Contenu connexe
Similaire à サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー (20)
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
- 1. ✕
Web制作会社様向け ~Monaca & SPIRAL®~
サーバ構築不要!HTML5で始める
Android&iOSアプリ開発セミナー
2013年8月29日
アシアル株式会社
株式会社パイプドビッツ
© Asial Corporation. & PIPED BITS Co., Ltd.
1
- 6. セミナーの内容
• セッション1
– 「Monacaで作るHTML5ハイブリッドアプリ開発」
• アシアル株式会社 エンジニア
生形可奈子
• セッション2
– 「バックエンドの開発工数を80%削減できるSPIRAL®」
• 株式会社パイプドビッツ プロダクトマーケティング部 部長
小西辰也
• セッション3
– 「Monaca & SPIRAL®で作るアプリ開発講座」
• アシアル株式会社 エンジニア
生形可奈子
• 株式会社パイプドビッツ SDP認定制度運営部 部長
© Asial Corporation. & PIPED BITS Co., Ltd.
小泉久美子
6
- 47. BaaSって、なに?
・Backend as a Service
・モバイルアプリのバックエンド機能を備え、
APIで利用できるクラウドサービス
API
認証
DB
GPS
© Asial Corporation. & PIPED BITS Co., Ltd.
PUSH
ファイル
画像
47
- 66. サンプルアプリ
スパイラルバーガー with PhoneGap
・iOS版:App Storeで「スパイラルバーガー」で検索
https://itunes.apple.com/jp/app/supairarubaga/id643500327?mt=8
・Android版:GooglePlayで「スパイラルバーガー」で検索
https://play.google.com/store/apps/details?id=com.pipedbits.SpiralBurger&hl=ja
© Asial Corporation. & PIPED BITS Co., Ltd.
66
- 75. 講師紹介
• バックエンド SPIRAL 解説担当
– 小泉 久美子
• 株式会社パイプドビッツ 所属
• 略歴 / 職務内容
– スパイラル®ユーザーさま向け導入支援担当、
スパイラル®アカウント管理・ユーザーさま向けイベント運営担当
を経て、
現在はスパイラル®デベロッパーズプログラム(SDP)責任者
• フロントエンド Monaca 解説担当
– 生形 可奈子
• アシアル株式会社 所属
© Asial Corporation. & PIPED BITS Co., Ltd.
75
- 78. このアプリを開発するのに必要なもの
• スキル
– HTML5
– CSS3
– jQuery, jQuery Mobile
• 開発環境
– MonacaとSPIRALのアカウントだけあればOK!
– 全てクラウド上で開発が完結
© Asial Corporation. & PIPED BITS Co., Ltd.
78
- 89. クーポン画面のバックエンドを構築
1. クーポンDBを作成
– DBの基本情報を設定
– DBのフィールド(テーブルのカラムに相当)を決める
– 必要に応じてフィールド属性を設定
2. クーポンDBにクーポンデータを追加
3. クーポンDB用の一覧表を作成
– HTMLソースの編集をしてjQuery Mobileを利用した見た目
に変更
© Asial Corporation. & PIPED BITS Co., Ltd.
89
- 90. jQuery Mobile流の画面定義
• jQuery Mobileでは、1つのHTMLファイルに複数の
ページを定義する
– data-role属性でページの構造を定義する
– 画面遷移はページのidをアンカーで指定する
index.html
お知らせ
クーポン
店舗マップ
マイページ
© Asial Corporation. & PIPED BITS Co., Ltd.
90
- 101. スパイラルAPIの利用方法
1. HTTPヘッダにはX-SPIRAL-APIを渡す
Content-Type: application/json; charset=UTF-8
X-SPIRAL-API: area/login/request
2. APIへのリクエストはJSONデータをPOSTする
(応答データもJSON形式で返却される)
3. パラメータにはAPIトークン・パスキー・署名を付与する
POSTデータとして spiral_api_token, passkey, signature を渡す
{'spiral_api_token':'00123abc...987','passkey':'123def...012','signature':'789
023...a5f','jsessionid':'5678ab...90f', ...
spiral_api_token
管理画面から取得したAPIトークン
passkey
呼出時刻のエポック秒
signature
"APIトークン&passkey"の文字列をAPIシークレットを使って
hmac-sha1で生成した署名。署名の有効期間は発行(passkey
のエポック秒)から15分間です。
© Asial Corporation. & PIPED BITS Co., Ltd.
101
- 105. ajaxメソッドの利用方法
$.ajax({
type: HTTP通信の種類 (GET/POST),
url: 通信先のURL,
headers: HTTPヘッダをオブジェクト形式で設定,
data: 送信するパラメータ,
async: 同期的に通信する場合にfalseを設定
}).done(function(data) {
// 通信成功時の処理(dataにはAPIから返却されたデータが入る)
}).fail(function(data) {
// 通信失敗時の処理
}).always(function(data) {
// 通信完了後に必ず実行する処理
});
- 106. APIサーバのURLの取得
var params = {'spiral_api_token': app.token};
$.ajax({
ロケータのURL
type: 'POST',
url: 'https://www.pi-pe.co.jp/api/locator',
headers: {
'content-type': 'application/json; charset=utf-8',
'x-spiral-api': 'locator/apiserver/request'
},
HTTPヘッダに
APIメソッドを指定
data: JSON.stringify(params),
async: false,
パラメータに
}).done(function(data) {
APIトークンを指定
app.apiUrl = data.location;
});
- 107. マイエリアAPIの呼び出し
var params = app.signParams({
my_area_title: 'MSmemberLogin',
id: loginId,
password: $('#memberPassword').val()
});
my_area_title は必須
ログイン後はセッションIDを含める
$.ajax({
APIサーバのURLを指定
type: 'POST',
url: app.apiUrl,
headers: {
'content-type': 'application/json; charset=utf-8',
'x-spiral-api': 'area/login/request'
},
data: JSON.stringify(params)
}).done(…