Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

20170921 smartphone apli_seminar_public Slide 1 20170921 smartphone apli_seminar_public Slide 2 20170921 smartphone apli_seminar_public Slide 3 20170921 smartphone apli_seminar_public Slide 4 20170921 smartphone apli_seminar_public Slide 5 20170921 smartphone apli_seminar_public Slide 6 20170921 smartphone apli_seminar_public Slide 7 20170921 smartphone apli_seminar_public Slide 8 20170921 smartphone apli_seminar_public Slide 9 20170921 smartphone apli_seminar_public Slide 10 20170921 smartphone apli_seminar_public Slide 11 20170921 smartphone apli_seminar_public Slide 12 20170921 smartphone apli_seminar_public Slide 13 20170921 smartphone apli_seminar_public Slide 14 20170921 smartphone apli_seminar_public Slide 15 20170921 smartphone apli_seminar_public Slide 16 20170921 smartphone apli_seminar_public Slide 17 20170921 smartphone apli_seminar_public Slide 18 20170921 smartphone apli_seminar_public Slide 19 20170921 smartphone apli_seminar_public Slide 20 20170921 smartphone apli_seminar_public Slide 21 20170921 smartphone apli_seminar_public Slide 22 20170921 smartphone apli_seminar_public Slide 23 20170921 smartphone apli_seminar_public Slide 24 20170921 smartphone apli_seminar_public Slide 25 20170921 smartphone apli_seminar_public Slide 26 20170921 smartphone apli_seminar_public Slide 27 20170921 smartphone apli_seminar_public Slide 28 20170921 smartphone apli_seminar_public Slide 29 20170921 smartphone apli_seminar_public Slide 30 20170921 smartphone apli_seminar_public Slide 31 20170921 smartphone apli_seminar_public Slide 32 20170921 smartphone apli_seminar_public Slide 33 20170921 smartphone apli_seminar_public Slide 34 20170921 smartphone apli_seminar_public Slide 35 20170921 smartphone apli_seminar_public Slide 36 20170921 smartphone apli_seminar_public Slide 37 20170921 smartphone apli_seminar_public Slide 38 20170921 smartphone apli_seminar_public Slide 39 20170921 smartphone apli_seminar_public Slide 40 20170921 smartphone apli_seminar_public Slide 41 20170921 smartphone apli_seminar_public Slide 42 20170921 smartphone apli_seminar_public Slide 43 20170921 smartphone apli_seminar_public Slide 44 20170921 smartphone apli_seminar_public Slide 45 20170921 smartphone apli_seminar_public Slide 46 20170921 smartphone apli_seminar_public Slide 47 20170921 smartphone apli_seminar_public Slide 48 20170921 smartphone apli_seminar_public Slide 49 20170921 smartphone apli_seminar_public Slide 50 20170921 smartphone apli_seminar_public Slide 51 20170921 smartphone apli_seminar_public Slide 52 20170921 smartphone apli_seminar_public Slide 53 20170921 smartphone apli_seminar_public Slide 54
Upcoming SlideShare
What to Upload to SlideShare
Next

0 Likes

Share

20170921 smartphone apli_seminar_public

2017年9月21日 Movable Type 鹿児島で行ったイベントの登壇資料です。

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

20170921 smartphone apli_seminar_public

  1. 1. Movable Type + Data API を利用した ハイブリッドアプリの開発について 2017年9月21日 シックス・アパート株式会社 長内毅志
  2. 2. 自己紹介 •長内毅志 –2011年~ Movable Typeプロダクトマネージャー –2014年~ ディベロッパーリレーションマネージャー エバンジェリスト –趣味 ダンス (ストリート、ジャズ) ジョギング (サブフォー) 英語の勉強 (TOEIC 875, 英検準1級) 家族と過ごすこと
  3. 3. アジェンダ •ハイブリッドアプリとは •Movable Type と Data API •Data APIを使ったハイブリッドアプリの開発 •Movable Type のテンプレートを使ったハイブリッドア プリの開発 •まとめ
  4. 4. Disclaimer
  5. 5. ハイブリッドアプリとは
  6. 6. ハイブリッドアプリとは •ウェブの技術を使って開発したスマホアプリ –HTML5 –JavaScript –css3 •スマホのネイティブ機能も利用可能
  7. 7. • CodeZine 「エンタープライズモバイルアプリの本命技術、「HTML5ハイブリッドアプリ」とは」より https://codezine.jp/article/detail/8141
  8. 8. ハイブリッドアプリとネイティブアプリの比較 ネイティブアプリ ハイブリッドアプリ 開発言語 Objective-C、Swift Java html、JavaScript、CSS 動作速度 ○ △ ウェブ技術者から 見た開発難度 △ 各言語とIDEの 習熟が必要 ○ ウェブ技術を応用できる • 比較表は参考であり、速度や難易度は絶対的なものではありません。
  9. 9. Movable Type と Data API
  10. 10. Movable Typeとは • 10年以上利用されているブログ・CMS(通称MT) • MTタグ組み合わせでロジック生成 • テンプレートとDBが完全に分離している (MVCライク) • プラグインで拡張可能 • どんなコードも生成可能
  11. 11. Data APIとは •Movable Type が提供する REST API •2013年、Movable Type 6から実装 •JSON形式でデータをやり取りします
  12. 12. Data APIのエンドポイント •https://example.com/mt/ mt-data-api.cgi/v3/sites/1/entries バージョン ブログID
  13. 13. データサンプル
  14. 14. Data API経由のデータ操作(V3)
  15. 15. Movable Type をハイブリッドアプリ開発に使うメリット •ウェブ技術でアプリ開発ができる •Data APIを利用した機能実装ができる •静的htmlの出力を使ったパッケージングが可能 •CMSデータをウェブ、アプリの2つに使える
  16. 16. Movable Type を使ったハイブリッドアプリ開発の流れ •Movable Type をベースにしたアプリ開発 •スマホアプリ開発用フレームワークでパッケージング –アプリコ、Monaca、etc •配布
  17. 17. 今回のハイブリッドアプリ開発に使ったフレームワーク •アシアル社が提供する ハイブリッドアプリ開発フレームワーク •Monacaデバッガーでデモします
  18. 18. サンプルケース •Data API を使った ハイブリッドアプリの開発例 •Movable Type のテンプレートでつくる ハイブリッドアプリの開発例
  19. 19. Data APIを使った ハイブリッドアプリの開発例
  20. 20. サンプルケース1 •投稿アプリの開発 •登録したデータは即時にサイト上に公開
  21. 21. •DEMO
  22. 22. 今回の構成 1・アプリからMovable Typeへ認証 (投稿権限があるかチェック) 2・アプリから投稿データを 打ち込む 3・Movable Typeへ データ送信 4・データ公開
  23. 23. 開発の流れ •認証の実装 •投稿の実装
  24. 24. 認証の実装 •Data API経由で、MTに登録されているユーザーかど うかを確認する •登録された正しいユーザーだった場合、サインインを 行い、sessionデータをアプリに渡す
  25. 25. 認証のエンドポイント •2つの認証方法 –authorization •ウェブページ上からMTのサインイン画面を呼び出す •ウェブアプリ向け(WebViewを利用したアプリなど) –authentication •アプリ上でサインインロジックを実装する •スマホアプリ向け
  26. 26. 認証に関するドキュメント •Data API クイックスタートガイド •https://www.movabletype.jp/ developers/data-api/quick-start/
  27. 27. 認証のサンプルコード https://goo.gl/91JY6k
  28. 28. 投稿の実装 •Data API のエンドポイントへ、投稿データのタイトル と本文をPOST •アクセストークンを付与して、権限チェックをクリア後 、MTへデータ登録しています
  29. 29. Movable Type の認証に関するリファレンス •クイックスタートガイド –https://www.movabletype.jp/developers/data-api/quick-start/ •Movable Type Data API のセキュリティの話 –https://www.movabletype.jp/blog/data-api-v3-07.html
  30. 30. 投稿のサンプルコード https://goo.gl/VXw8iY
  31. 31. •認証=>投稿の仕組みを応用してみましょう
  32. 32. サンプルケース2 •読書メモアプリの開発 •書籍データを検索して、詳細情報を取得 •読書の感想メモを追加して登録
  33. 33. •DEMO
  34. 34. 今回の構成 1・アプリからMovable Typeへサインイン (投稿権限があるかチェック) 3・アプリから読書の 感想メモを打ち込む 4・Movable Typeへ データ送信 2・Google Books API へ書籍方法を 問い合わせ
  35. 35. Data APIを利用したアプリ開発のメリット •MTの認証の仕組みを利用できる –セキュアな認証が実装可能 •Data API経由で、データ操作が可能 –読み出し、書き込み、上書き、削除など •外部サービスのAPIと連携 –アプリ開発の幅が広がる
  36. 36. Movable Type のテンプレートを使った ハイブリッドアプリの開発
  37. 37. サンプルケース •観光地ナビゲーション •GPSで現在地を取得 •周辺の観光地を検索 •観光地までの距離を測定 •地図アプリを呼び出し経路を調べる
  38. 38. •DEMO
  39. 39. 今回の構成 1・スマホのGPS機能を呼 び出し現在地を測定 2・周辺の観光地を 検索 3・見つかった観光地 をリスト表示 4・地図アプリを呼び出 し観光地までの経路 を調べる 5・Movable Type へのアク セスは行わない (アプリはパッケージ化さ れているため、MTへアクセ スする必要がない)
  40. 40. 開発の流れ •観光地情報をMTから入力 –緯度・経度をカスタムフィールドへ登録 •位置情報インデックスファイルを静的出力 –JSONファイルであらかじめ出力する •現在地を測定して、位置情報ファイルを検索 –html5から、スマホのネイティブ機能(GPS)を呼び出す
  41. 41. MTの入力画面 •観光地の情報をタイトル、本文に •緯度と経度をカスタムフィールドに
  42. 42. 実際の入力画面
  43. 43. 位置情報インデックスファイルを出力 •観光地の緯度経度が記載されたインデックスファイ ルをJSONで出力する
  44. 44. インデックステンプレート
  45. 45. 実際に出力されたJSONファイル
  46. 46. 現在地を取得して、位置情報ファイルを検索 •html5のAPI [GeoLocation] を利用して、スマホのネイ ティブ機能であるGPSを呼び出す •現在地の緯度経度を取得 •インデックスファイルを参照して、半径*km内の聖地 を取得する
  47. 47. GeoLocationの呼び出し
  48. 48. フレームワークを使ってパッケージ化 •静的なhtml、JavaScript、CSSをMTから出力 •ハイブリッドアプリ開発用のフレームワークを使って パッケージ化 –今回はMONACAを利用 •配布準備
  49. 49. 他のCMS・mBaaS系のサービスと比べて •REST APIを備えたCMS・バックエンドサービスは他に もあるが •動的システムがほとんど •アプリの操作ごとにサーバーへのアクセスが必要と なる
  50. 50. MTのテンプレートを利用したアプリ開発のメリット •html、css、JavaScriptファイルを静的に出力できる •CMS、バックエンドへアクセスが不要 •アプリのパッケージ化が容易 •ウェブアプリをまるごとスマホアプリ化できる
  51. 51. まとめ
  52. 52. •ウェブ技術を利用したアプリ = ハイブリッドアプリ •Movable Type を利用することで、ハイブリッドアプリ の開発が効率良く行える
  53. 53. •Data APIを利用したアプリ開発 –MTの認証を利用できてセキュア –MTのデータ操作がアプリから可能 •テンプレートを利用したアプリ開発 –静的ファイルでパッケージ化が容易 –ウェブサイト・スマホアプリの共通開発が可能
  54. 54. ご清聴ありがとうございました。

2017年9月21日 Movable Type 鹿児島で行ったイベントの登壇資料です。

Views

Total views

163

On Slideshare

0

From embeds

0

Number of embeds

19

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×