Your SlideShare is downloading. ×
0
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

5,579

Published on

株式会社パイプドビッツ・アシアル株式会社共催セミナー(2013/08/29開催) …

株式会社パイプドビッツ・アシアル株式会社共催セミナー(2013/08/29開催)
「Web制作会社様向け 〜Monaca&SPIRAL(R)〜
サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー」の発表資料です。

資料の中で紹介している「スパイラルバーガー スタートアップマニュアル」については以下のURLより参照いただけます。
http://developer.pi-pe.co.jp/login/school/text/MS/startupManual.pdf

----

Monacaアカウント作成: http://monaca.mobi/register/start
SPIRALトライアル: http://bit.ly/spiralm
SDP向けアプリ依頼: http://bit.ly/sdp-m

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,579
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
11
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ✕ Web制作会社様向け ~Monaca & SPIRAL®~ サーバ構築不要!HTML5で始める Android&iOSアプリ開発セミナー 2013年8月29日 アシアル株式会社 株式会社パイプドビッツ © Asial Corporation. & PIPED BITS Co., Ltd. 1
  • 2. セミナーのポイント1 • すべての開発がクラウド上で完結 – 開発環境はインターネットに接続できるPCだけ フロントエンド © Asial Corporation. & PIPED BITS Co., Ltd. バックエンド 2
  • 3. セミナーのポイント2 • Web技術(HTML5、CSS、JavaScript)だけで開発 – Objective-CやJavaの知識、サーバサイドの構築も不要 フロントエンド Objective-C Java バックエンド (サーバサイド) MySQL Apache Linux © Asial Corporation. & PIPED BITS Co., Ltd. 3
  • 4. セミナーのポイント3 • サンプルアプリを題材にした開発講座 – 具体的な開発イメージがわかる 飲食店販促用アプリ スパイラルバーガー with Monaca © Asial Corporation. & PIPED BITS Co., Ltd. 4
  • 5. セミナーのポイント4 • 「スパイラルバーガー」のソースコード等をご提供 – 明日からの開発にすぐ使える ソースコード © Asial Corporation. & PIPED BITS Co., Ltd. 設定情報 5
  • 6. セミナーの内容 • セッション1 – 「Monacaで作るHTML5ハイブリッドアプリ開発」 • アシアル株式会社 エンジニア 生形可奈子 • セッション2 – 「バックエンドの開発工数を80%削減できるSPIRAL®」 • 株式会社パイプドビッツ プロダクトマーケティング部 部長 小西辰也 • セッション3 – 「Monaca & SPIRAL®で作るアプリ開発講座」 • アシアル株式会社 エンジニア 生形可奈子 • 株式会社パイプドビッツ SDP認定制度運営部 部長 © Asial Corporation. & PIPED BITS Co., Ltd. 小泉久美子 6
  • 7. Monacaで作る HTML5ハイブリッドアプリ開発 アシアル株式会社 生形 可奈子 URL : http://monaca.mobi/ Reserved. Copyright © Asial Corporation. All Right 8
  • 8. 自己紹介 生形 可奈子(うぶかた かなこ) 元々は業務系/制御系のSEをやっていましたが、 教育の楽しさに目覚めてプログラミング講師に転身。 現在はエバンジェリストとしてMonacaの普及活動 なども行っています。 著書:「スラスラわかるJavaScript」(翔泳社) URL : http://monaca.mobi/ Reserved. Copyright © Asial Corporation. All Right 9
  • 9. モバイルアプリ開発を取り巻く状況 URL : http://monaca.mobi/ Reserved. Copyright © Asial Corporation. All Right 10
  • 10. 様々なモバイルOSが混在 世界中で利用されているモバイル端末には、様々な種類のOSが 搭載されています。さらに、今後新しいOSも登場するといわれ ています。 iOS Android iOS18% Android Android 25% 75% 25% URL : http://monaca.mobi/ Reserved. 62% Copyright © Asial Corporation. All Right 11
  • 11. モバイルアプリ開発に関する障害 複数OS対応 × 需要の増大 • それぞれのOSに合わせてアプリを開発しないと いけない(開発環境、言語はそれぞれ異なる)  開発環境の構築が大変  開発コストとエンジニアの確保に課題 URL : http://monaca.mobi/ Reserved. Copyright © Asial Corporation. All Right 12
  • 12. HTML5という選択肢 URL : http://monaca.mobi/ Reserved. Copyright © Asial Corporation. All Right 13
  • 13. ハイブリッドアプリの登場 Webアプリとネイティブアプリのいいとこどりアプリ • HTML5+JavaScriptで開発 • デバイスの機能を使える • 端末にインストールできる URL : http://monaca.mobi/ Reserved. Copyright © Asial Corporation. All Right 14
  • 14. ハイブリッドアプリのメリット クロスプラットフォーム性 iOS、Android、Windows 8・・・HTML5に対応したプラットフォーム である程度は互換性を保ちながら動作可能 Webの技術でネイティブの機能を使える JavaScriptから、ブラウザに実装されている機能以外に端末固有の機能 を利用することができる 技術の習得コストの低さ・Webアプリとの親和性が強み URL : http://monaca.mobi/ Reserved. Copyright © Asial Corporation. All Right 15
  • 15. ハイブリッドアプリの課題 実行速度の見劣りがある フルネイティブで作成されたアプリと比較し、画面描画の速度低下 が大きい。 事例やノウハウ蓄積はこれから 海外と比較し、日本でのハイブリッドアプリに関する事例が少ない。 HTML5も本格利用が始まったばかり。 URL : http://monaca.mobi/ Reserved. Copyright © Asial Corporation. All Right 16
  • 16. ハイブリッドアプリが担うニーズ Webサイトのアプリ化や、複雑なネイティブ機能 を使わない場合は、ハイブリッドアプリで十分に 対応可能。 読み物系アプリ 業務アプリ URL : http://monaca.mobi/ Reserved. キャンペーン/プロモーション 向けアプリ Copyright © Asial Corporation. All Right 17
  • 17. Monacaの紹介 URL : http://monaca.mobi/ Reserved. Copyright © Asial Corporation. All Right 18
  • 18. 誰でも今日からアプリ開発。 2013年9月12日 正式リリースしました! 特徴1:ハイブリッドアプリ開発 特徴2:すべてをブラウザーで 特徴3:UIフレームワークも http://monaca.mobi/ URL : http://monaca.mobi/ Reserved. Copyright © Asial Corporation. All Right 19
  • 19. Monacaとは • クラウドベースのハイブリッドアプリ開発環境 • ブラウザだけで開発~テスト~アプリの生成までの すべての工程を行うことができる 1. ブラウザで開発 2. 実機でリアル タイムに動作確認 URL : http://monaca.mobi/ Reserved. 3. ブラウザからビルド して配布 Copyright © Asial Corporation. All Right 20
  • 20. 開発実績 auヘッドライン KDDI株式会社 名刺管理: Eight © 三三株式会社 テレ朝動画アプリ © 株式会社テレビ朝日 URL : http://monaca.mobi/ Reserved. シューズファインダー © 株式会社アシックス Copyright © Asial Corporation. All Right 21
  • 21. Monaca IDE ブラウザ上で動作するIDEで、アプリ開発からデバッ グ、ビルドまで一貫して機能を提供します。 ・コードハイライト ・シンタックスチェック ・zen-coding URL : http://monaca.mobi/ Reserved. Copyright © Asial Corporation. All Right 22
  • 22. Monacaデバッガー Monaca上のプロジェクトをシミュレートして、実機 で動作検証を行うことができます。 ・プロジェクトの内容を 即時反映 ・エラーログやスクリーン ショットをアップロード Google Play, App Storeからダウンロードできます。 URL : http://monaca.mobi/ Reserved. Copyright © Asial Corporation. All Right 23
  • 23. Onsen UI シンプルなコードでモバイル用UIを構築することがで きるフレームワークです。 ・モバイルアプリライクな フラットデザイン ・ネイティブと遜色ない アニメーション URL : http://monaca.mobi/ Reserved. Copyright © Asial Corporation. All Right 24
  • 24. Monaca IDE の開発機能 ファイルの編集 を行います ファイルの管理 を行います デバッグ情報 を表示します URL : http://monaca.mobi/ Reserved. ライブ プレビューを 表示します Copyright © Asial Corporation. All Right 25
  • 25. Monacaデバッガーの使い方 ログイン プロジェクト選択 URL : http://monaca.mobi/ Reserved. プロジェクト起動 Copyright © Asial Corporation. All Right 26
  • 26. デモ URL : http://monaca.mobi/ Reserved. Copyright © Asial Corporation. All Right 27
  • 27. 充実したサポート体制 ユーザーコミュニティや有償のテクニカルサポート、 アプリ開発トレーニングなど、ユーザーのレベルに応 じた様々なサポートメニューが用意されています。 フォーラム 技術サポート URL : http://monaca.mobi/ Reserved. トレーニング Copyright © Asial Corporation. All Right 28
  • 28. 料金プラン おすすめ! 機能 Basic Personal Professional Business Enterprise 料金 無料 月980円 月5,000円 月8,000円 個別見積り ストレージ 容量 250MB 1GB 10GB 制約なし 制約なし PhoneGapプ ラグイン組 込 × × ○ ○ ○ チーム機能 △ △ ○ ○ ○ URL : http://monaca.mobi/ Reserved. Copyright © Asial Corporation. All Right 29
  • 29. もっと知りたい方のために URL : http://monaca.mobi/ Reserved. Copyright © Asial Corporation. All Right 30
  • 30. Monacaのサンプルアプリ 10を超えるサンプルアプリの解説。 データベースの利用や音楽ファイルの再生など、 個別のトピックもあります。 http://docs.monaca.mobi/sampleapp/ URL : http://monaca.mobi/ Reserved. Copyright © Asial Corporation. All Right 31
  • 31. Monacaの記事を連載中です! 「ThinkIT Monaca」で検索 URL : http://monaca.mobi/ Reserved. 「ITPro Monaca」で検索 Copyright © Asial Corporation. All Right 32
  • 32. ありがとうございました URL : http://monaca.mobi/ Reserved. Copyright © Asial Corporation. All Right 33
  • 33. ✕ サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー バックエンドの開発工数を 80%削減できるSPIRAL® 2013年8月29日 株式会社パイプドビッツ プロダクトマーケティング部 部長 小西辰也 © Asial Corporation. & PIPED BITS Co., Ltd. 35
  • 34. ご紹介 • 会社概要 – – – – – – – 社名:株式会社パイプドビッツ 拠点:本社(東京)、札幌支店、大阪支店、福岡支店 代表者:佐谷 宣昭 設立:2000年4月3日 上場:2006年12月(東証マザーズ) 資本金:315百万円 従業員数:173名 • 自己紹介 – 氏名:小西辰也 – 所属:開発本部プロダクトマーケティング部 – 経歴: • 大阪支店、インバウンド営業部門、パートナー営業部門の責任者 • スパイラル・デベロッパーズ・プログラム(SDP)の立上げ • プロダクトマーケティング部門の責任者 © Asial Corporation. & PIPED BITS Co., Ltd. 36
  • 35. 事業コンセプト ※「情報資産の銀行」は当社の登録商標です。 © Asial Corporation. & PIPED BITS Co., Ltd. 37
  • 36. 提供サービス 企業と業界の課題を解決します © Asial Corporation. & PIPED BITS Co., Ltd. 38
  • 37. 本題 © Asial Corporation. & PIPED BITS Co., Ltd. 39
  • 38. App Storeでダウンロードされている 企業プロモーション用アプリは? © Asial Corporation. & PIPED BITS Co., Ltd. 40
  • 39. カテゴリー別で最上位に表示された 企業プロモーション用アプリ (カタログカテゴリー) (フード/ドリンクカテゴリー) ※2013年8月27日時点の調査による © Asial Corporation. & PIPED BITS Co., Ltd. 41
  • 40. UNIQLOアプリのメニュー構成 • STORES – – – – • • • • 店舗検索 商品バーコードスキャン オンラインストア ユニクロアプリシリーズ CIRASHI (チラシ) COUPONS (クーポン) MY NEWS (お知らせ) SETTING (マイページ) – ユーザー情報の登録・編集 – マイストアの登録・編集など • 通知 © Asial Corporation. & PIPED BITS Co., Ltd. 42
  • 41. マクドナルドアプリのメニュー構成 • • • • • 店舗 (検索) クーポン 週刊マック (お知らせ) FUN (ゲームなど) マイページ – 会員情報の登録・編集など • 通知 © Asial Corporation. & PIPED BITS Co., Ltd. 43
  • 42. バックエンド(サーバサイド)開発が 必要なメニューは意外と多い DB系 サーバ 店舗マス タDB 商品マス タDB チラシ 管理DB 通信 会員マス タDB クーポン 管理DB お知らせ 管理DB 配信系 サーバ © Asial Corporation. & PIPED BITS Co., Ltd. プッシュ メール 通知 配信 44
  • 43. バックエンド開発の 3つのボトルネック 人 納期 © Asial Corporation. & PIPED BITS Co., Ltd. 予算 45
  • 44. ボトルネックを解消する クラウドサービス BaaS © Asial Corporation. & PIPED BITS Co., Ltd. 46
  • 45. BaaSって、なに? ・Backend as a Service ・モバイルアプリのバックエンド機能を備え、 APIで利用できるクラウドサービス API 認証 DB GPS © Asial Corporation. & PIPED BITS Co., Ltd. PUSH ファイル 画像 47
  • 46. BaaSのメリット バックエンド開発のボトルネック解消 • インフラの構築・運用スキルは不要 – インフラエンジニアがいなくても開発ができ る • スピード開発 – インフラ設計・調達・構築の期間を短縮 – API・管理画面の開発の期間を短縮 • コスト圧縮 – 開発コスト – 運用・保守コスト © Asial Corporation. & PIPED BITS Co., Ltd. 48
  • 47. はBaaS なのか? © Asial Corporation. & PIPED BITS Co., Ltd. 49
  • 48. Webアプリを開発できて BaaSとしても使える クラウドサービス © Asial Corporation. & PIPED BITS Co., Ltd. 50
  • 49. SPIRALの仕組み DBを中心としたアプリ開発プラットフォーム ・ Webアプリ モバイルアプリ 組合せるだけ カスタマイズ Web&Mailコンポーネント フォーム 一覧表 PHP マイエリア ID 連携 API PW 認証 配信 出力 入力 DB DBプラットフォーム Copyright© PIPED BITS CO., LTD. 51
  • 50. SPIRALを使うと どんないいことがあるの? © Asial Corporation. & PIPED BITS Co., Ltd. 52
  • 51. モバイルアプリとWebアプリのDBを共通化 モバイルアプリ 会員管理 API連携 PC サイト 会員管理 Webアプリ スマホ サイト 会員管理 Webアプリ © Asial Corporation. & PIPED BITS Co., Ltd. 会員DB 共通化 53
  • 52. DBを共通化するメリット • クライアント企業 – データの一元管理による効率的な運用 – 会員ユーザのユーザビリティ向上 • Web制作会社 – Web制作案件とモバイルアプリ開発案件を受注しやすい ※会員DBを管理すると、コンペになりにくい © Asial Corporation. & PIPED BITS Co., Ltd. 54
  • 53. モバイルにも高速で多彩なメール配信 © Asial Corporation. & PIPED BITS Co., Ltd. 55
  • 54. プッシュ通知があれば 十分じゃないの? © Asial Corporation. & PIPED BITS Co., Ltd. 56
  • 55. 一長一短があるプッシュとメール いいとこ取りができるSPIRAL 「デバイストークンだけでいい?会員情報を取得すべき?」は超重要 項目 プッシュ通知 メール配信 オプトインの しやすさ ◯ △ プッシュ通知はアプリ起動時にワンクリックでオプ トインできる。 通知の 視認性 ◎ △ ポップアップするプッシュ通知の方が高い。メール 配信でもローカルプッシュ設定をしている場合は高 い。 メッセージの 文字数と表現 △ ◯ プッシュ通知は画面表示できる文字数が尐ない。 メールはHTMLで表現力を高めることができる。 メッセージの 保存 × ◯ メールはメーラーにメッセージが保存できるため、 検索することができる。 セグメント 配信 △ ◯ プッシュ通知は多様な属性を取得するにはアプリと の連動が必要。メールは登録時にエントリーに取得 が可能。 ◯ プッシュ通知は規約により信頼性を保証されていな い。メール配信はキャリアブロックに対応できる仕 組みを実装していれば安定した配信が期待できる 信頼性 △ 補足説明 © Asial Corporation. & PIPED BITS Co., Ltd. 57
  • 56. プッシュとメールを組み込んだフロー アプリストア 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に標準実装 メール配信 © Asial Corporation. & PIPED BITS Co., Ltd. 58
  • 57. Passbookを使ったプロモーション © Asial Corporation. & PIPED BITS Co., Ltd. 59
  • 58. Passbookとは? Passbookはデジタルクーポン管理アプリです (iOS6.0以降、MacOSX10.8.2以降の端末に対応/iPhone5にプリインストール) デジタルクーポン(パス) イベントの 入場券 搭乗券 店舗カード すべてのパス を1つのアプ リで集約管理 クーポン その他 ダウンロード パス発行者のメリット ・スマホアプリがなくても、パスをダウンロード した端末にプッシュ通知ができる。 (位置情報によるローカルプッシュにも対応) ・ユーザが1度ダウンロードしたパスを更新 することができる。 ユーザメリット ・多種多様なパスを1つのアプリにまとめて 管理できる。 ・プッシュ通知によるお知らせを任意に設定 できる。 ※Passbookは、米国Apple Inc.の米国およびその他の国における商標または登録商標で す。 © Asial Corporation. & PIPED BITS Co., Ltd. 60
  • 59. 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アプリです。 © Asial Corporation. & PIPED BITS Co., Ltd. 61
  • 60. 安心のセキュリティ © Asial Corporation. & PIPED BITS Co., Ltd. 62
  • 61. 第三者機関による高い評価と セキュリティに厳格な企業への豊富な実績 • 業界最多のセキュリティ・品質マネジメント認証 ※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件 © Asial Corporation. & PIPED BITS Co., Ltd. 63
  • 62. SPIRALを使うメリット (1)モバイルアプリと WebアプリのDBを共通化 (2)プッシュとメー ルの いいとこ取り Push&Mail 会員DB (3)Passbookを使った プロモーション (4)安心のセキュリ ティ © Asial Corporation. & PIPED BITS Co., Ltd. 64
  • 63. SPIRALでサンプルアプリを 作ってみました © Asial Corporation. & PIPED BITS Co., Ltd. 65
  • 64. サンプルアプリ スパイラルバーガー 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
  • 65. スパイラルバーガー with PhoneGapの構成 プッシュサーバ APNs デバイス トークンDB GCM SPIRAL管理画面 本部 メール配信 ログイン パス発行 スマホアプリ 会員管理(登録・変更・退会) マイページ・会員証 (Passbook) 会員 DB 店舗責任者 SPIRALアプリ DB (Webアプリ) 9 プッシュ通知 設定UI ログイン 店舗検索 店舗 DB 店舗管理 一覧 クーポン(Passbook) クーポン DB クーポン管理 一覧 おすすめ・お知らせ お知らせ DB お知らせ 管理一覧 本部・店 長 顧客 API連携 © Asial Corporation. & PIPED BITS Co., Ltd. 67
  • 66. 工数シミュレーション バックエンドの開発工数を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 © Asial Corporation. & PIPED BITS Co., Ltd.
  • 67. スパイラル・デベロッパーズ・プログラム 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 初月 © Asial Corporation. & PIPED BITS Co., Ltd. 翌月以降 69
  • 68. 4週間無料トライアル 20分で体験できる スパイラルバーガー スタートアップマニュアルの TOPページのURLからお申し込みください Monaca版とPhoneGap版の サンプルソースがダウンロードできます © Asial Corporation. & PIPED BITS Co., Ltd. 70
  • 69. ご清聴いただき、 ありがとうございました © Asial Corporation. & PIPED BITS Co., Ltd. 71
  • 70. ✕ サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー Monaca & SPIRAL® で作る アプリ開発講座 アシアル株式会社 生形 可奈子 株式会社パイプドビッツ 小泉 久美子 © Asial Corporation. & PIPED BITS Co., Ltd. 73
  • 71. アジェンダ • 講師紹介 • 解説するアプリの紹介 • Monaca, SPIRALによるアプリ開発講座 © Asial Corporation. & PIPED BITS Co., Ltd. 74
  • 72. 講師紹介 • バックエンド SPIRAL 解説担当 – 小泉 久美子 • 株式会社パイプドビッツ 所属 • 略歴 / 職務内容 – スパイラル®ユーザーさま向け導入支援担当、 スパイラル®アカウント管理・ユーザーさま向けイベント運営担当 を経て、 現在はスパイラル®デベロッパーズプログラム(SDP)責任者 • フロントエンド Monaca 解説担当 – 生形 可奈子 • アシアル株式会社 所属 © Asial Corporation. & PIPED BITS Co., Ltd. 75
  • 73. 解説するアプリの紹介 © Asial Corporation. & PIPED BITS Co., Ltd. 76
  • 74. 本講座で解説する題材アプリ 飲食店販促用アプリ スパイラルバーガー with Monaca お知らせ クーポン 店舗マップ © Asial Corporation. & PIPED BITS Co., Ltd. マイページ 77
  • 75. このアプリを開発するのに必要なもの • スキル – HTML5 – CSS3 – jQuery, jQuery Mobile • 開発環境 – MonacaとSPIRALのアカウントだけあればOK! – 全てクラウド上で開発が完結 © Asial Corporation. & PIPED BITS Co., Ltd. 78
  • 76. jQuery Mobileとは? • jQueryの技術をベースに作られたモバイルアプリや スマホ向けサイトのUIを構築可能なフレームワーク • HTML5とjQueryだけでスマホらしいUIを表現可能 • iOS, Android, WindowsPhoneなど様々なモバイルプラ ットフォームに対応 © Asial Corporation. & PIPED BITS Co., Ltd. 79
  • 77. Monaca, SPIRALによるアプリ開発講座 © Asial Corporation. & PIPED BITS Co., Ltd. 80
  • 78. 本講座ではクーポンとマイページを解説 お知らせ クーポン 店舗マップ © Asial Corporation. & PIPED BITS Co., Ltd. マイページ 81
  • 79. 解説の流れ 1. スクリーンショットを元に画面構成を説明 2. 各画面ごとにアプリにおけるバックエンド、フロ ントエンドそれぞれの役割を説明 3. SPIRAL上で行うバックエンドの設定を解説 4. Monaca上で行うフロントエンドの実装を解説 © Asial Corporation. & PIPED BITS Co., Ltd. 82
  • 80. 「クーポン」画面の解説 © Asial Corporation. & PIPED BITS Co., Ltd. 83
  • 81. クーポンの画面構成 © Asial Corporation. & PIPED BITS Co., Ltd. 84
  • 82. クーポン画面でのバックエンド・フロントエンド クーポンDB クーポン一覧 © Asial Corporation. & PIPED BITS Co., Ltd. 85
  • 83. SPIRAL標準機能「一覧表・単票」とは? • SPIRALで作成したDB内のデータを一覧形式でウェブ ページを表示させる機能 – 単票と呼ばれる各項目の詳細情報を表示するためのペー ジも作成でき、一覧表から単票にリンクさせることも可 能 © Asial Corporation. & PIPED BITS Co., Ltd. 86
  • 84. 画面に当てはめると… 一覧表 単票 © Asial Corporation. & PIPED BITS Co., Ltd. 87
  • 85. クーポン画面の構成オブジェクト DB クーポンDB 一覧表 クーポン一覧(一般公開) © Asial Corporation. & PIPED BITS Co., Ltd. 88
  • 86. クーポン画面のバックエンドを構築 1. クーポンDBを作成 – DBの基本情報を設定 – DBのフィールド(テーブルのカラムに相当)を決める – 必要に応じてフィールド属性を設定 2. クーポンDBにクーポンデータを追加 3. クーポンDB用の一覧表を作成 – HTMLソースの編集をしてjQuery Mobileを利用した見た目 に変更 © Asial Corporation. & PIPED BITS Co., Ltd. 89
  • 87. jQuery Mobile流の画面定義 • jQuery Mobileでは、1つのHTMLファイルに複数の ページを定義する – data-role属性でページの構造を定義する – 画面遷移はページのidをアンカーで指定する index.html お知らせ クーポン 店舗マップ マイページ © Asial Corporation. & PIPED BITS Co., Ltd. 90
  • 88. 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> 店舗マップページ
  • 89. 「マイページ」画面の解説 © Asial Corporation. & PIPED BITS Co., Ltd. 92
  • 90. マイページ画面構成 © Asial Corporation. & PIPED BITS Co., Ltd. 93
  • 91. マイページ画面でのバックエンド・フロントエンド クーポンDB 会員DB 会員限定 クーポン一覧 認証エリア スパイラル API JS © Asial Corporation. & PIPED BITS Co., Ltd. 94
  • 92. SPIRAL標準機能「マイエリア」とは? • ログイン認証が必要な会員向けコンテンツを構築できる機 能 – 通常のWebアプリケーションで必要なセッションを操作するプログ ラムを一切書くことなく設定だけで認証機構を実現 – マイエリア内には、SPIRAL上で作成した会員ページ(カスタムマイ ページ)・Webフォーム・一覧表などのWebパーツを設置可能 – マイエリアの作成にはユーザIDやパスワードが含まれる会員DBが必 須 © Asial Corporation. & PIPED BITS Co., Ltd. 95
  • 93. マイエリアのイメージ ログイン 会員 DB ** ** 会員DBに登録された ID,PWでログイン 公開エリア(誰でも閲覧可能) 認証DB 一般公開 クーポン 会員登録 フォーム 一覧表 ××フォーム ** ** ******** ******** マイエリア(認証エリア) 会員情報変更 フォーム ××フォーム ** ** ******** ******** 会員情報表示 カスタム マイペー ジ 会員限定 クーポン 一覧表 クーポン DB © Asial Corporation. & PIPED BITS Co., Ltd. 96
  • 94. マイページ画面の構成オブジェクト API DB 会員DB 一覧表 クーポン一覧 (会員限定) マイエリア ××フォーム ** ** ******** ******** APIトークン ××フォーム ** ** ******** ******** ××フォーム ** ** ******** ******** 会員新規登録 / 会員情報変更 / 会員退会 © Asial Corporation. & PIPED BITS Co., Ltd. 97
  • 95. マイページ画面のバックエンドを構築 1. 2. 3. 4. 5. 会員マスタDBを作成 新規会員登録フォームを作成 既存会員向け情報変更・退会フォームを作成 会員用の認証ページ(マイエリア)を作成 会員限定クーポン用の一覧表を作成 – 一覧表のアクセス権限を認証エリア内に限定 6. クーポンDB(一般公開・会員用で共用)に会員ク ーポンのデータを追加 7. スパイラルAPIのAPIトークンを発行 © Asial Corporation. & PIPED BITS Co., Ltd. 98
  • 96. スパイラルAPIとは? • SPIRALで設定したDB内のデータやWebコンテンツを外部システムに出力 したり、外部システムからメール配信操作を実行可能なAPI • SPIRAL内の会員情報を元にした認証関連(マイエリア)のAPIも完備 • 利用するには、あらかじめSPIRAL側でAPIトークン・トークンシークレッ トを発行しておく必要がある © Asial Corporation. & PIPED BITS Co., Ltd. 99
  • 97. スパイラル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 © Asial Corporation. & PIPED BITS Co., Ltd. 100
  • 98. スパイラル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
  • 99. マイページで利用するスパイラル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 © Asial Corporation. & PIPED BITS Co., Ltd. 102
  • 100. スパイラルAPIの実行手順 • マイエリアを利用するには、以下の手順でAPIを実 行 以降、取得したURL に対してAPIを発行 APIサーバのURLを 取得 ログイン (セッションIDの取得) 以降、APIのパラメータに セッションIDを含める セッションの有効確認 一覧表取得 マイページ取得 ログアウト © Asial Corporation. & PIPED BITS Co., Ltd. 103
  • 101. JavaScriptによるWeb APIの利用方法 • APIの呼び出しは、Ajaxという非同期通信を行う技 術を利用する – Ajax通信はjQueryの$.ajax()メソッドを使う スパイラルAPI index.html AjaxでAPIをコール © Asial Corporation. & PIPED BITS Co., Ltd. 104
  • 102. ajaxメソッドの利用方法 $.ajax({ type: HTTP通信の種類 (GET/POST), url: 通信先のURL, headers: HTTPヘッダをオブジェクト形式で設定, data: 送信するパラメータ, async: 同期的に通信する場合にfalseを設定 }).done(function(data) { // 通信成功時の処理(dataにはAPIから返却されたデータが入る) }).fail(function(data) { // 通信失敗時の処理 }).always(function(data) { // 通信完了後に必ず実行する処理 });
  • 103. 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; });
  • 104. マイエリア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(…
  • 105. 署名の設定方法 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で暗号化
  • 106. まとめ:クーポン画面 クーポンDB クーポン一覧 © Asial Corporation. & PIPED BITS Co., Ltd. 109
  • 107. まとめ:マイページ画面 クーポンDB 会員DB 会員限定 クーポン一覧 認証エリア スパイラル API JS © Asial Corporation. & PIPED BITS Co., Ltd. 110
  • 108. ソースコードのご提供 ✕ アカウントの作成 https://monaca.mobi/register/start 4週間トライアルアカウントの作成 http://bit.ly/spiralm なお、Monaca上に展開するHTML,JSなどのソースコードや本スライド、 スタートアップマニュアル等はトライアルアカウント内のSPIRALアプリに同梱
  • 109. ソースコードのご提供 ✕ SDPにご加入の方で、お持ちのアカウントにアプリをインポー トしたい場合は、以下からご依頼ください。 http://bit.ly/sdp-m
  • 110. ご清聴いただき、 ありがとうございました © Asial Corporation. & PIPED BITS Co., Ltd. 113

×