狠狠撸

Movable Type + Data API を利用した
ハイブリッドアプリの開発について
2017年9月21日
シックス?アパート株式会社
長内毅志

自己紹介
?長内毅志
–2011年～ Movable Typeプロダクトマネージャー
–2014年～ディベロッパーリレーションマネージャー
エバンジェリスト
–趣味ダンス (ストリート、ジャズ)
ジョギング (サブフォー)
英語の勉強 (TOEIC 875, 英検準1級)
家族と過ごすこと

アジェンダ
?ハイブリッドアプリとは
?Movable Type と Data API
?Data APIを使ったハイブリッドアプリの開発
?Movable Type のテンプレートを使ったハイブリッドア
プリの開発
?まとめ

ハイブリッドアプリとは

ハイブリッドアプリとは
?ウェブの技術を使って開発したスマホアプリ
–HTML5
–JavaScript
–css3
?スマホのネイティブ機能も利用可能

? CodeZine 「エンタープライズモバイルアプリの本命技術、「HTML5ハイブリッドアプリ」とは」より
https://codezine.jp/article/detail/8141

ハイブリッドアプリとネイティブアプリの比較
ネイティブアプリハイブリッドアプリ
開発言語
Objective-C、Swift
Java
html、JavaScript、CSS
動作速度 ○ △
ウェブ技術者から
見た開発難度
△
各言語とIDEの
習熟が必要
○
ウェブ技術を応用できる
? 比較表は参考であり、速度や難易度は絶対的なものではありません。

Movable Typeとは
? 10年以上利用されているブログ?CMS(通称MT)
? MTタグ組み合わせでロジック生成
? テンプレートとDBが完全に分離している
(MVCライク)
? プラグインで拡張可能
? どんなコードも生成可能

Data APIとは
?Movable Type が提供する REST API
?2013年、Movable Type 6から実装
?JSON形式でデータをやり取りします

Data APIのエンドポイント
?https://example.com/mt/
mt-data-api.cgi/v3/sites/1/entries
バージョンブログID

Data API経由のデータ操作(V3)

Movable Type をハイブリッドアプリ開発に使うメリット
?ウェブ技術でアプリ開発ができる
?Data APIを利用した機能実装ができる
?静的htmlの出力を使ったパッケージングが可能
?CMSデータをウェブ、アプリの2つに使える

Movable Type を使ったハイブリッドアプリ開発の流れ
?Movable Type をベースにしたアプリ開発
?スマホアプリ開発用フレームワークでパッケージング
–アプリコ、Monaca、etc
?配布

今回のハイブリッドアプリ開発に使ったフレームワーク
?アシアル社が提供する
ハイブリッドアプリ開発フレームワーク
?Monacaデバッガーでデモします

サンプルケース
?Data API を使った
ハイブリッドアプリの開発例
?Movable Type のテンプレートでつくる

Data APIを使った

サンプルケース1
?投稿アプリの開発
?登録したデータは即時にサイト上に公開

今回の構成
1?アプリからMovable Typeへ認証
(投稿権限があるかチェック)
2?アプリから投稿データを
打ち込む
3?Movable Typeへ
データ送信
4?データ公開

開発の流れ
?認証の実装
?投稿の実装

認証の実装
?Data API経由で、MTに登録されているユーザーかど
うかを確認する
?登録された正しいユーザーだった場合、サインインを
行い、sessionデータをアプリに渡す

認証のエンドポイント
?2つの認証方法
–authorization
?ウェブページ上からMTのサインイン画面を呼び出す
?ウェブアプリ向け(WebViewを利用したアプリなど)
–authentication
?アプリ上でサインインロジックを実装する
?スマホアプリ向け

認証に関するドキュメント
?Data API クイックスタートガイド
?https://www.movabletype.jp/
developers/data-api/quick-start/

認証のサンプルコード
https://goo.gl/91JY6k

投稿の実装
?Data API のエンドポイントへ、投稿データのタイトル
と本文をPOST
?アクセストークンを付与して、権限チェックをクリア後
、MTへデータ登録しています

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

投稿のサンプルコード
https://goo.gl/VXw8iY

?认証=&驳迟;投稿の仕组みを応用してみましょう

サンプルケース2
?読書メモアプリの開発
?書籍データを検索して、詳細情報を取得
?読書の感想メモを追加して登録

今回の構成
1?アプリからMovable Typeへサインイン
(投稿権限があるかチェック)
3?アプリから読書の
感想メモを打ち込む
4?Movable Typeへ
データ送信
2?Google Books API
へ書籍方法を
問い合わせ

Data APIを利用したアプリ開発のメリット
?MTの認証の仕組みを利用できる
–セキュアな認証が実装可能
?Data API経由で、データ操作が可能
–読み出し、書き込み、上書き、削除など
?外部サービスのAPIと連携
–アプリ開発の幅が広がる

Movable Type のテンプレートを使った
ハイブリッドアプリの開発

サンプルケース
?観光地ナビゲーション
?GPSで現在地を取得
?周辺の観光地を検索
?観光地までの距離を測定
?地図アプリを呼び出し経路を調べる

今回の構成
1?スマホのGPS機能を呼
び出し現在地を測定
2?周辺の観光地を
検索
3?見つかった観光地
をリスト表示
4?地図アプリを呼び出
し観光地までの経路
を調べる
5?Movable Type へのアク
セスは行わない
（アプリはパッケージ化さ
れているため、MTへアクセ
スする必要がない）

開発の流れ
?観光地情報をMTから入力
–緯度?経度をカスタムフィールドへ登録
?位置情報インデックスファイルを静的出力
–JSONファイルであらかじめ出力する
?現在地を測定して、位置情報ファイルを検索
–html5から、スマホのネイティブ機能(GPS)を呼び出す

MTの入力画面
?観光地の情報をタイトル、本文に
?緯度と経度をカスタムフィールドに

位置情報インデックスファイルを出力
?観光地の緯度経度が記載されたインデックスファイ
ルをJSONで出力する

インデックステンプレート

実际に出力された闯厂翱狈ファイル

現在地を取得して、位置情報ファイルを検索
?html5のAPI [GeoLocation] を利用して、スマホのネイ
ティブ機能であるGPSを呼び出す
?現在地の緯度経度を取得
?インデックスファイルを参照して、半径＊km内の聖地
を取得する

骋别辞尝辞肠补迟颈辞苍の呼び出し

フレームワークを使ってパッケージ化
?静的なhtml、JavaScript、CSSをMTから出力
?ハイブリッドアプリ開発用のフレームワークを使って
パッケージ化
–今回はMONACAを利用
?配布準備

他のCMS?mBaaS系のサービスと比べて
?REST APIを備えたCMS?バックエンドサービスは他に
もあるが
?動的システムがほとんど
?アプリの操作ごとにサーバーへのアクセスが必要と
なる

MTのテンプレートを利用したアプリ開発のメリット
?html、css、JavaScriptファイルを静的に出力できる
?CMS、バックエンドへアクセスが不要
?アプリのパッケージ化が容易
?ウェブアプリをまるごとスマホアプリ化できる

?ウェブ技術を利用したアプリ
＝ハイブリッドアプリ
?Movable Type を利用することで、ハイブリッドアプリ
の開発が効率良く行える

?Data APIを利用したアプリ開発
–MTの認証を利用できてセキュア
–MTのデータ操作がアプリから可能
?テンプレートを利用したアプリ開発
–静的ファイルでパッケージ化が容易
–ウェブサイト?スマホアプリの共通開発が可能

ご清聴ありがとうございました。

狠狠撸

20170921 smartphone apli_seminar_public

More Related Content

20170921 smartphone apli_seminar_public