サーバ構築不要！HTML5で始めるAndroid＆iOSアプリ開発セミナー

✕

Web制作会社様向け～Monaca & SPIRAL®～

サーバ構築不要！HTML5で始める
Android＆iOSアプリ開発セミナー
2013年8月29日
アシアル株式会社
株式会社パイプドビッツ
© Asial Corporation. & PIPED BITS Co., Ltd.

1

セミナーのポイント1
• すべての開発がクラウド上で完結
– 開発環境はインターネットに接続できるPCだけ

フロントエンド


バックエンド

2

• Web技術（HTML5、CSS、JavaScript）だけで開発

– Objective-CやJavaの知識、サーバサイドの構築も不要
フロントエンド

Objective-C
Java

バックエンド
（サーバサイド）

MySQL
Apache
Linux


3

• サンプルアプリを題材にした開発講座
– 具体的な開発イメージがわかる
飲食店販促用アプリ

スパイラルバーガー with Monaca


4

• 「スパイラルバーガー」のソースコード等をご提供
– 明日からの開発にすぐ使える

ソースコード


設定情報

5

セミナーの内容
• セッション1
– 「Monacaで作るHTML5ハイブリッドアプリ開発」
• アシアル株式会社エンジニア

生形可奈子

– 「バックエンドの開発工数を80％削減できるSPIRAL®」
• 株式会社パイプドビッツプロダクトマーケティング部部長

小西辰也

– 「Monaca & SPIRAL®で作るアプリ開発講座」
• アシアル株式会社エンジニア

生形可奈子

• 株式会社パイプドビッツ SDP認定制度運営部部長

小泉久美子
6

Monacaで作る

HTML5ハイブリッドアプリ開発
アシアル株式会社
生形可奈子

URL : http://monaca.mobi/
Reserved.

Copyright © Asial Corporation. All Right

8

自己紹介
生形可奈子（うぶかたかなこ）
元々は業務系／制御系のSEをやっていましたが、
教育の楽しさに目覚めてプログラミング講師に転身。

現在はエバンジェリストとしてMonacaの普及活動
なども行っています。
著書：「スラスラわかるJavaScript」（翔泳社）

Reserved.


9

モバイルアプリ開発を取り巻く状況

Reserved.


10

様々なモバイルOSが混在
世界中で利用されているモバイル端末には、様々な種類のOSが
搭載されています。さらに、今後新しいOSも登場するといわれ
ています。

iOS
Android iOS18%
Android

Android
25%
75%
25%

Reserved.

62%


11

モバイルアプリ開発に関する障害
複数OS対応 × 需要の増大
•

それぞれのOSに合わせてアプリを開発しないと
いけない(開発環境、言語はそれぞれ異なる)
 開発環境の構築が大変
 開発コストとエンジニアの確保に課題

Reserved.


12

HTML5という選択肢

Reserved.


13

ハイブリッドアプリの登場
Webアプリとネイティブアプリのいいとこどりアプリ

• HTML5+JavaScriptで開発
• デバイスの機能を使える
• 端末にインストールできる
Reserved.


14

ハイブリッドアプリのメリット
クロスプラットフォーム性
iOS、Android、Windows 8・・・HTML5に対応したプラットフォーム
である程度は互換性を保ちながら動作可能

Webの技術でネイティブの機能を使える
JavaScriptから、ブラウザに実装されている機能以外に端末固有の機能
を利用することができる
技術の習得コストの低さ・Webアプリとの親和性が強み

Reserved.


15

ハイブリッドアプリの課題
実行速度の見劣りがある
フルネイティブで作成されたアプリと比較し、画面描画の速度低下
が大きい。

事例やノウハウ蓄積はこれから
海外と比較し、日本でのハイブリッドアプリに関する事例が少ない。
HTML5も本格利用が始まったばかり。

Reserved.


16

ハイブリッドアプリが担うニーズ
Webサイトのアプリ化や、複雑なネイティブ機能
を使わない場合は、ハイブリッドアプリで十分に
対応可能。

読み物系アプリ

業務アプリ

Reserved.

キャンペーン/プロモーション
向けアプリ


17

Monacaの紹介

Reserved.


18

誰でも今日からアプリ開発。
2013年9月12日
正式リリースしました！
特徴１：ハイブリッドアプリ開発
特徴２：すべてをブラウザーで

特徴３：UIフレームワークも
http://monaca.mobi/

Reserved.


19

Monacaとは
• クラウドベースのハイブリッドアプリ開発環境
• ブラウザだけで開発～テスト～アプリの生成までの
すべての工程を行うことができる

1. ブラウザで開発

2. 実機でリアル
タイムに動作確認

Reserved.

3. ブラウザからビルド
して配布


20

開発実績

auヘッドライン
KDDI株式会社

名刺管理: Eight
© 三三株式会社

テレ朝動画アプリ
© 株式会社テレビ朝日

Reserved.

シューズファインダー
© 株式会社アシックス


21

Monaca IDE
ブラウザ上で動作するIDEで、アプリ開発からデバッ
グ、ビルドまで一貫して機能を提供します。

・コードハイライト
・シンタックスチェック

・zen-coding

Reserved.


22

Monacaデバッガー
Monaca上のプロジェクトをシミュレートして、実機
で動作検証を行うことができます。

・プロジェクトの内容を
即時反映
・エラーログやスクリーン
ショットをアップロード
Google Play, App Storeからダウンロードできます。
Reserved.


23

Onsen UI
シンプルなコードでモバイル用UIを構築することがで
きるフレームワークです。

・モバイルアプリライクな
フラットデザイン
・ネイティブと遜色ない
アニメーション

Reserved.


24

Monaca IDE の開発機能

ファイルの編集
を行います

ファイルの管理
を行います

デバッグ情報
を表示します
Reserved.

ライブ
プレビューを
表示します


25

Monacaデバッガーの使い方
ログイン

プロジェクト選択

Reserved.

プロジェクト起動


26

デモ

Reserved.


27

充実したサポート体制
ユーザーコミュニティや有償のテクニカルサポート、
アプリ開発トレーニングなど、ユーザーのレベルに応
じた様々なサポートメニューが用意されています。

フォーラム

技術サポート

Reserved.

トレーニング


28

料金プラン
おすすめ！
機能

Basic

Personal

Professional

Business

Enterprise

料金

無料

月980円

月5,000円

月8,000円

個別見積り

ストレージ
容量

250MB

1GB

10GB

制約なし

制約なし

PhoneGapプ
ラグイン組
込

×

×

○

○

○

チーム機能

△

△

○

○

○

Reserved.


29

もっと知りたい方のために

Reserved.


30

Monacaのサンプルアプリ
10を超えるサンプルアプリの解説。
データベースの利用や音楽ファイルの再生など、
個別のトピックもあります。
http://docs.monaca.mobi/sampleapp/

Reserved.


31

Monacaの記事を連載中です！

「ThinkIT Monaca」で検索

Reserved.

「ITPro Monaca」で検索


32

ありがとうございました

Reserved.


33

✕

サーバ構築不要！HTML5で始めるAndroid＆iOSアプリ開発セミナー

バックエンドの開発工数を
80％削減できるSPIRAL®
2013年8月29日
株式会社パイプドビッツ
プロダクトマーケティング部
部長小西辰也

35

ご紹介
• 会社概要
–
–
–
–
–
–
–

社名：株式会社パイプドビッツ
拠点：本社（東京）、札幌支店、大阪支店、福岡支店
代表者：佐谷宣昭
設立：2000年4月3日
上場：2006年12月（東証マザーズ）
資本金：315百万円
従業員数：173名

• 自己紹介
– 氏名：小西辰也
– 所属：開発本部プロダクトマーケティング部
– 経歴：
• 大阪支店、インバウンド営業部門、パートナー営業部門の責任者
• スパイラル・デベロッパーズ・プログラム（SDP）の立上げ
• プロダクトマーケティング部門の責任者

36

事業コンセプト

※「情報資産の銀行」は当社の登録商標です。

37

提供サービス

企業と業界の課題を解決します


38

本題


39

App Storeでダウンロードされている
企業プロモーション用アプリは？


40

カテゴリー別で最上位に表示された
企業プロモーション用アプリ

（カタログカテゴリー）

（フード/ドリンクカテゴリー）

※2013年8月27日時点の調査による

41

UNIQLOアプリのメニュー構成
• STORES
–
–
–
–

•
•
•
•

店舗検索
商品バーコードスキャン
オンラインストア
ユニクロアプリシリーズ

CIRASHI （チラシ）
COUPONS （クーポン）
MY NEWS （お知らせ）
SETTING （マイページ）
– ユーザー情報の登録・編集
– マイストアの登録・編集など

• 通知


42

マクドナルドアプリのメニュー構成
•
•
•
•
•

店舗（検索）
クーポン
週刊マック（お知らせ）
FUN (ゲームなど)
マイページ
– 会員情報の登録・編集など

• 通知


43

バックエンド（サーバサイド）開発が
必要なメニューは意外と多い
DB系
サーバ

店舗マス
タDB

商品マス
タDB

チラシ
管理DB

通信

会員マス
タDB

クーポン
管理DB

お知らせ
管理DB

配信系
サーバ


プッシュ

メール

通知

配信

44

バックエンド開発の
3つのボトルネック

人

納期


予算

45

ボトルネックを解消する
クラウドサービス

BaaS

46

BaaSって、なに？
・Backend as a Service
・モバイルアプリのバックエンド機能を備え、
APIで利用できるクラウドサービス

API

認証

DB
GPS


PUSH

ファイル
画像

47

BaaSのメリット
バックエンド開発のボトルネック解消
• インフラの構築・運用スキルは不要
– インフラエンジニアがいなくても開発ができ
る

• スピード開発
– インフラ設計・調達・構築の期間を短縮
– API・管理画面の開発の期間を短縮

• コスト圧縮
– 開発コスト
– 運用・保守コスト

48

はBaaS
なのか？


49

Webアプリを開発できて
BaaSとしても使える
クラウドサービス


50

SPIRALの仕組み
DBを中心としたアプリ開発プラットフォーム
・

Webアプリ

モバイルアプリ

組合せるだけ

カスタマイズ

Web＆Mailコンポーネント
フォーム

一覧表

PHP

マイエリア
ID

連携

API

PW

認証

配信

出力
入力

DB

DBプラットフォーム
Copyright© PIPED BITS CO., LTD.

51

SPIRALを使うと
どんないいことがあるの？


52

モバイルアプリとWebアプリのDBを共通化
モバイルアプリ

会員管理

API連携

PC
サイト

会員管理
Webアプリ

スマホ
サイト

会員管理
Webアプリ


会員DB
共通化

53

DBを共通化するメリット
• クライアント企業
– データの一元管理による効率的な運用
– 会員ユーザのユーザビリティ向上

• Web制作会社
– Web制作案件とモバイルアプリ開発案件を受注しやすい
※会員DBを管理すると、コンペになりにくい


54

モバイルにも高速で多彩なメール配信


55

プッシュ通知があれば
十分じゃないの？


56

一長一短があるプッシュとメール
いいとこ取りができるSPIRAL
「デバイストークンだけでいい？会員情報を取得すべき？」は超重要
項目

プッシュ通知

メール配信

オプトインの
しやすさ

◯

△

プッシュ通知はアプリ起動時にワンクリックでオプ
トインできる。

通知の
視認性

◎

△

ポップアップするプッシュ通知の方が高い。メール
配信でもローカルプッシュ設定をしている場合は高
い。

メッセージの
文字数と表現

△

◯

プッシュ通知は画面表示できる文字数が尐ない。
メールはHTMLで表現力を高めることができる。

メッセージの
保存

×

◯

メールはメーラーにメッセージが保存できるため、
検索することができる。

セグメント
配信

△

◯

プッシュ通知は多様な属性を取得するにはアプリと
の連動が必要。メールは登録時にエントリーに取得
が可能。

◯

プッシュ通知は規約により信頼性を保証されていな
い。メール配信はキャリアブロックに対応できる仕
組みを実装していれば安定した配信が期待できる

信頼性

△

補足説明


57

プッシュとメールを組み込んだフロー
アプリストア
1）アプリを
ダウンロード

2）プッシュ
通知許可

App Store

Googleplay

プッシュサーバ
APNs
（Apple Push Notification Service）

UI開発が必要です。
※PHPであれば、SPIRAL上
に設置可

GCM

（Google Cloud Messaging）

A：deviceToken
G：Registration ID

6）通知依頼
3）デバイストー
クン発行

プッシュ通知
設定UI

7）プッシュ通知

5）通知設定

SPIRALにプッシュ通知等の
証明書の設定が必要

スパイラルAPI
4）デバイストークン
格納

デバイス
トークンDB
スパイラルAPI

スパイラルAPI

会員
DB

会員登録

メール配信UIは
SPIRALに標準実装

メール配信


58

Passbookを使ったプロモーション


59

Passbookとは？
Passbookはデジタルクーポン管理アプリです
（iOS6.0以降、MacOSX10.8.2以降の端末に対応/iPhone5にプリインストール）

デジタルクーポン（パス）
イベントの
入場券

搭乗券

店舗カード

すべてのパス
を1つのアプ
リで集約管理

クーポン

その他

ダウンロード

パス発行者のメリット
・スマホアプリがなくても、パスをダウンロード
した端末にプッシュ通知ができる。
（位置情報によるローカルプッシュにも対応）
・ユーザが1度ダウンロードしたパスを更新
することができる。

ユーザメリット
・多種多様なパスを1つのアプリにまとめて
管理できる。
・プッシュ通知によるお知らせを任意に設定
できる。

※Passbookは、米国Apple Inc.の米国およびその他の国における商標または登録商標で
す。

60

SPIRALのPassbook機能でできること
1）Passbook対応のパスを発行
イベントの
入場券

搭乗券

店舗カード

2）DB属性を付与したパスを生成
イベント受付
DB

その他

3）多彩な経路でパスを配布
SPIRAL
DB

認証エリア
（マイエリ
ア）

ID
PASS

スパイラルAPI連携
サンキュー
ページ

モバイル
アプリ内

会員証
NO,001
山田太郎様

4）「SPIRALシャリーン」連携で
クーポンの利用状況などを把握

メール

Web一覧表

入場券
受付NO,007

会員
DB

クーポン

クーポン発行
DB

DL

クーポンの回
収情報を取得

DL

パス

クーポン
20％off

顧
客

シャリーン♪

店
員

SPIRALシャリーンはQRコードを読取り、情報を付加
してSPIRALのDBへ送信できるiPhoneアプリです。


61

安心のセキュリティ


62

第三者機関による高い評価と
セキュリティに厳格な企業への豊富な実績
• 業界最多のセキュリティ・品質マネジメント認証
※ISO/IEC 20000-1:2011/JIS Q 20000-1:2012 (ITMS 513019)認証の登録範囲は、
情報資産プラットフォーム事業における保守・サポート業務の提供をサポートする
ITサービスマネジメントシステムです。

• 最高ランクのセキュリティ診断評価
2013年
LAC社
★★★★★（優良）

2012年
NRI ST社
AAA

2011年
LAC社
AAA

2010年
三井物産SD社
S

2009年
LAC社
AAA

2008年
NRI ST社
AAA

• 100以上の金融機関への導入実績
セキュリティチェックシート対応年間200件

63

SPIRALを使うメリット
（1）モバイルアプリと
WebアプリのDBを共通化

（2）プッシュとメー
ルの
いいとこ取り

Push＆Mail

会員DB

（3）Passbookを使った
プロモーション

（4）安心のセキュリ
ティ


64

SPIRALでサンプルアプリを
作ってみました


65

サンプルアプリ
スパイラルバーガー 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


66

スパイラルバーガー with PhoneGapの構成
プッシュサーバ
APNs

デバイス
トークンDB

GCM

SPIRAL管理画面
本部

メール配信
ログイン

パス発行

スマホアプリ
会員管理（登録・変更・退会）
マイページ・会員証
（Passbook）

会員
DB

店舗責任者
SPIRALアプリ
DB
（Webアプリ）
9
プッシュ通知
設定UI
ログイン

店舗検索

店舗
DB

店舗管理
一覧

クーポン（Passbook）

クーポン
DB

クーポン管理
一覧

おすすめ・お知らせ

お知らせ
DB

お知らせ
管理一覧

本部・店
長

顧客

API連携


67

工数シミュレーション
バックエンドの開発工数を80％以上削減

80％以上の削減効果

◆シミュレーションの前提
1）API開発・・・DB関連（insert、update、select）とプッシュ通知関連のAPIを開発する。
2）管理I/F開発・・・データ操作関連（検索、登録、更新、削除、ダウンロード）、プッシュ通知、簡易なメール配信の管理I/Fを開発する。
3）DB開発・・・P14に記載のDB（クーポン画像、緯度経度を含む）を開発する。
4）H/Wコスト・・・Webサーバ（ユーザ用・管理者用I/F、API管理）、配信サーバ、DBサーバ、バックアップサーバ、N/W機器の調達コス
ト。
※Passbokのバックエンド開発コストは含めていない。
68

スパイラル・デベロッパーズ・プログラム
SDPはSPIRALを使ってアプリケーションを開発する
Web開発・制作会社、SIer様向けの年会費60,000円の
有料制プログラムです。

3つのプログラムと活用ステップ
1．まず自社利用で試す

2．独自サービスを開発

3．継続ビジネスへ

「開発環境として」だけではなく、自社
利用であれば「本番利用できる」アカウ
ント（年間760,000円相当）をご提供し
ます。ご提案前にSPIRALを徹底的に試
すことができます。

電話サポートと開発者向けセミナーを
活用して、SPIRALの仕様を理解し、得
意技術や他のサービスと組合せた付加
価値の高いサービスを作ることができま
す。

クライアント向けのSPIRALアカウント
のご契約には初期・月次費用を特別価格
でご提供しますので、継続ビジネスへシ
フトできます。

開発環境/自社用本番アカウント

電話サポート＆開発者セミナー

クライアント契約の特別価格
月次
初期

初期　 10 万円月次　2 万5,000 円
　　　　7 万円　　　1 万7,500 円
※
5,000レコードの場合

（導入実績により最大50％OFF）
3 0 ％OFF

初月


翌月以降

69

4週間無料トライアル
20分で体験できる
スパイラルバーガースタートアップマニュアルの
TOPページのURLからお申し込みください

Monaca版とPhoneGap版の
サンプルソースがダウンロードできます


70

ご清聴いただき、


71

✕

サーバ構築不要！HTML5で始めるAndroid＆iOSアプリ開発セミナー

Monaca & SPIRAL® で作る
アプリ開発講座

アシアル株式会社生形可奈子
株式会社パイプドビッツ小泉久美子


73

アジェンダ
• 講師紹介
• 解説するアプリの紹介
• Monaca, SPIRALによるアプリ開発講座


74

講師紹介
• バックエンド SPIRAL 解説担当
– 小泉久美子
• 株式会社パイプドビッツ所属
• 略歴 / 職務内容
– スパイラル®ユーザーさま向け導入支援担当、
スパイラル®アカウント管理・ユーザーさま向けイベント運営担当
を経て、
現在はスパイラル®デベロッパーズプログラム（SDP）責任者

• フロントエンド Monaca 解説担当
– 生形可奈子
• アシアル株式会社所属


75

解説するアプリの紹介


76

本講座で解説する題材アプリ
飲食店販促用アプリ

スパイラルバーガー with Monaca

お知らせ

クーポン

店舗マップ


マイページ
77

このアプリを開発するのに必要なもの
• スキル
– HTML5
– CSS3
– jQuery, jQuery Mobile

• 開発環境
– MonacaとSPIRALのアカウントだけあればOK！
– 全てクラウド上で開発が完結


78

jQuery Mobileとは？

• jQueryの技術をベースに作られたモバイルアプリや
スマホ向けサイトのUIを構築可能なフレームワーク
• HTML5とjQueryだけでスマホらしいUIを表現可能
• iOS, Android, WindowsPhoneなど様々なモバイルプラ
ットフォームに対応


79

Monaca, SPIRALによるアプリ開発講座


80

本講座ではクーポンとマイページを解説

お知らせ

クーポン

店舗マップ


マイページ

81

解説の流れ
1. スクリーンショットを元に画面構成を説明
2. 各画面ごとにアプリにおけるバックエンド、フロ
ントエンドそれぞれの役割を説明
3. SPIRAL上で行うバックエンドの設定を解説
4. Monaca上で行うフロントエンドの実装を解説


82

「クーポン」画面の解説


83

クーポンの画面構成


84

クーポン画面でのバックエンド・フロントエンド

クーポンDB

クーポン一覧


85

SPIRAL標準機能「一覧表・単票」とは？
• SPIRALで作成したDB内のデータを一覧形式でウェブ
ページを表示させる機能
– 単票と呼ばれる各項目の詳細情報を表示するためのペー
ジも作成でき、一覧表から単票にリンクさせることも可
能


86

画面に当てはめると…

一覧表

単票


87

クーポン画面の構成オブジェクト

DB

クーポンDB

一覧表

クーポン一覧（一般公開）


88

クーポン画面のバックエンドを構築
1. クーポンDBを作成
– DBの基本情報を設定
– DBのフィールド（テーブルのカラムに相当）を決める
– 必要に応じてフィールド属性を設定

2. クーポンDBにクーポンデータを追加
3. クーポンDB用の一覧表を作成
– HTMLソースの編集をしてjQuery Mobileを利用した見た目
に変更


89

jQuery Mobile流の画面定義
• jQuery Mobileでは、１つのHTMLファイルに複数の
ページを定義する
– data-role属性でページの構造を定義する
– 画面遷移はページのidをアンカーで指定する
index.html
お知らせ
クーポン
店舗マップ
マイページ

90

index.htmlの定義
<div data-role="page" id="page-info">
</div>

お知らせページ

<div data-role="page" id="page-coupon">
<div data-role="header">

#page-coupon
</div>
がURLになる
<div data-role="content">

</div>
<div data-role="footer">

</div>
</div>

クーポンページ

<div data-role="page" id="page-map">
</div>

店舗マップページ

「マイページ」画面の解説


92

マイページ画面構成


93

マイページ画面でのバックエンド・フロントエンド
クーポンDB

会員DB

会員限定
クーポン一覧

認証エリア

スパイラル
API

JS


94

SPIRAL標準機能「マイエリア」とは？
• ログイン認証が必要な会員向けコンテンツを構築できる機
能
– 通常のWebアプリケーションで必要なセッションを操作するプログ
ラムを一切書くことなく設定だけで認証機構を実現
– マイエリア内には、SPIRAL上で作成した会員ページ（カスタムマイ
ページ）・Webフォーム・一覧表などのWebパーツを設置可能
– マイエリアの作成にはユーザIDやパスワードが含まれる会員DBが必
須


95

マイエリアのイメージ
ログイン

会員
DB

**
**

会員DBに登録された
ID,PWでログイン

公開エリア（誰でも閲覧可能）

認証DB

一般公開
クーポン

会員登録
フォーム

一覧表

××フォーム
**
**
********
********

マイエリア（認証エリア）
会員情報変更
フォーム
××フォーム
**
**
********
********

会員情報表示
カスタム
マイペー
ジ

会員限定
クーポン
一覧表

クーポン
DB


96

マイページ画面の構成オブジェクト

API

DB
会員DB

一覧表

クーポン一覧
（会員限定）

マイエリア

××フォーム
**
**
********
********

APIトークン

××フォーム
**
**
********
********

××フォーム
**
**
********
********

会員新規登録 / 会員情報変更 / 会員退会


97

マイページ画面のバックエンドを構築
1.
2.
3.
4.
5.

会員マスタDBを作成
新規会員登録フォームを作成
既存会員向け情報変更・退会フォームを作成
会員用の認証ページ（マイエリア）を作成
会員限定クーポン用の一覧表を作成
– 一覧表のアクセス権限を認証エリア内に限定

6. クーポンDB（一般公開・会員用で共用）に会員ク
ーポンのデータを追加
7. スパイラルAPIのAPIトークンを発行


98

スパイラルAPIとは？
• SPIRALで設定したDB内のデータやWebコンテンツを外部システムに出力
したり、外部システムからメール配信操作を実行可能なAPI
• SPIRAL内の会員情報を元にした認証関連（マイエリア）のAPIも完備

• 利用するには、あらかじめSPIRAL側でAPIトークン・トークンシークレッ
トを発行しておく必要がある

99

スパイラルAPIの利用の前に
• ロケータサービス
– スパイラルのAPIサーバは複数存在するため、APIの利用者側がどのAPIサーバ
を使うべきなのかを特定する必要がある
– 全システム共通のロケータサービス（https://www.pi-pe.co.jp/api/locator）に
対してlocator/apiserverメソッドのAPIを実行することで、自分のアカウント
がどのAPIサーバにリクエストすれば良いかを特定することができる
ロケータ
サービス

スパイラルAPI
サーバA

API

API
スパイラルAPI
サーバB

サーバB
サーバA

API
開発者X

開発者Y

100

スパイラル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分間です。

101

マイページで利用するスパイラルAPI
分類
ロケータ

APIメソッド名

内容
マイエリアにログインし、そのセッションIDを返す

area/logout

マイエリアからログアウトし、セッションIDを無効にする

area/status

セッションIDを引数として、セッションが有効かを確認す
る

area/mypage
一覧表

APIトークンに対応するAPIサーバのURLを返す

area/login
認証
（マイエリア）

locator/apiserver

引数として指定されたマイページのURLを返す

table/data

一覧表の出力データを返す

各APIごとにリクエスする際に必要となる送信パラメータやレスポンスのデータ
形式等の詳細に関しては以下のドキュメントを参照
・スパイラルAPI 設定資料・データ
http://www.pi-pe.co.jp/help/manual/api_data.pdf

102

スパイラルAPIの実行手順
• マイエリアを利用するには、以下の手順でAPIを実
行
以降、取得したURL
に対してAPIを発行

APIサーバのURLを
取得

ログイン
（セッションIDの取得）

以降、APIのパラメータに
セッションIDを含める

セッションの有効確認

一覧表取得
マイページ取得
ログアウト

103

JavaScriptによるWeb APIの利用方法
• APIの呼び出しは、Ajaxという非同期通信を行う技
術を利用する
– Ajax通信はjQueryの$.ajax()メソッドを使う

スパイラルAPI

index.html
AjaxでAPIをコール


104

ajaxメソッドの利用方法
$.ajax({
type: HTTP通信の種類 (GET/POST),
url: 通信先のURL,
headers: HTTPヘッダをオブジェクト形式で設定,
data: 送信するパラメータ,
async: 同期的に通信する場合にfalseを設定
}).done(function(data) {
// 通信成功時の処理（dataにはAPIから返却されたデータが入る）
}).fail(function(data) {
// 通信失敗時の処理
}).always(function(data) {
// 通信完了後に必ず実行する処理
});

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;
});

マイエリア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(…

署名の設定方法
signParams: function(params)
{
// APIトークン
params['spiral_api_token'] = app.token;

パスキーは
現在日時を元に計算

// パスキー
var passkey = Math.floor((new Date()).getTime() / 1000).toString();
params['passkey'] = passkey;

// 署名
var message = app.token + '&' + passkey;
params['signature'] = CryptoJS.HmacSHA1(message, app.tokenSecret).toString();
return params;
}

トークンシークレットを
SHA1で暗号化

まとめ：クーポン画面

クーポンDB

クーポン一覧


109

まとめ：マイページ画面
クーポンDB

会員DB

会員限定
クーポン一覧

認証エリア

スパイラル
API

JS


110

ソースコードのご提供

✕

アカウントの作成

https://monaca.mobi/register/start

4週間トライアルアカウントの作成

http://bit.ly/spiralm

なお、Monaca上に展開するHTML,JSなどのソースコードや本スライド、
スタートアップマニュアル等はトライアルアカウント内のSPIRALアプリに同梱

ソースコードのご提供

✕

SDPにご加入の方で、お持ちのアカウントにアプリをインポー
トしたい場合は、以下からご依頼ください。

http://bit.ly/sdp-m

ご清聴いただき、


113

サーバ構築不要！HTML5で始めるAndroid＆iOSアプリ開発セミナー

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a サーバ構築不要！HTML5で始めるAndroid＆iOSアプリ開発セミナー

Similar a サーバ構築不要！HTML5で始めるAndroid＆iOSアプリ開発セミナー (20)

Más de SPIRAL Inc.

Más de SPIRAL Inc. (20)

サーバ構築不要！HTML5で始めるAndroid＆iOSアプリ開発セミナー