20170801 monaca ug_lt_public
- 2. 自己紹介 ?長内毅志 –2011年～ Movable Typeプロダクトマネージャー –2014年～ ディベロッパーリレーションマネージャー エバンジェリスト –趣味 ダンス (ストリート、ジャズ) ジョギング (サブフォー) 英語の勉強 (TOEIC 875, 英検準1級) 家族と過ごすこと
- 3. Disclaimer
- 5. Movable Typeとは ? 10年以上利用されているブログ?CMS(通称MT) ? MTタグ組み合わせでロジック生成 ? テンプレートとDBが完全に分離している (MVCライク) ? プラグインで拡張可能 ? どんなコードも生成可能
- 7. Monaca と Movable Type を 連動できるわけがない
- 9. ?やってみた
- 18. ?やってみた
- 21. 組み合わせてわかったこと ?MT のREST API「Data API」を使うと、Monacaと連動 したアプリが作れる
- 22. ?MTは静的htmlファイルを生成する ?Monaca へのプロジェクトインポートが簡単 –動的CMSのように、バックエンドでCMSを動かす必要がない ?ウェブサイト+スマホアプリの開発が簡単
- 23. ?というわけで
- 24. Movable Type
- 25. ?LTのタイトルを 「Monaca と Movable Type は こんなに相性が良いわけがない」 と変更して終わります
- 26. ご清聴ありがとうございました。
Editor's Notes
- みなさん、こんばんは！シックス?アパートの長内と申します。 今日は、「Monaca と Movable Type がこんなに相性が良いわけがない」という、ちょっと前に流行ったラノベ風のタイトルでLTをします。 どうぞよろしくお願いいたします。
- 最初に、簡単な自己紹介をします。 Movable Type というCMSソフトのプロダクトマネージャーを数年担当して、3年ほど前からは、ディベロッパーリレーションとか、エバンジェリストとか呼ばれて、人前で話したりハンズオンを行ったりしています。 中津川さんとは、DevRel Meetup というコミュニティで、よくお世話になっています。
- ここで自分のMonaca 歴を話しますと、自分はまだスマホアプリをリリースしたことがありません。 MTの活用方法の一つとして、スマホアプリと連動できないかな？と思い、Monaca を触り始めています。 いわば、Monaca に関してはまだ見習いの状態ですので、これから皆さんに色々とお聞きしていきます。 色々教えてください。
- まず最初に、Movable Type について。 みなさん、Movable Type について、ご存知ですか？ 聞いたことありますか。 使ったことはありますでしょうか。
- 簡単に紹介しておきます。 Movable Type とは、10年以上利用されているブログソフトであり、CMSソフトです。 テンプレートを利用して、htmlを静的に生成するのが得意です。 日本では、ビジネス向けのCMSとして、広く使われています。
- Movable Type には、Data APIというREST型のAPIがあります。 エンドポイントを指定して叩くと、データの読み込みや書き込み、更新などができるようになっています。
- それでは、本題に入ります。 いきなりタイトルが出落ちぽくて恐縮ですが、今日のLTは出落ちのオンパレードです。 「Monaca と Movable Type を連動できるわけがない」というタイトルですが、 最初はどうやってMonaca とMTを連動させればよいか、いろいろ手探り状態でした。
- MTのAPIには、ユーザー認証を行ってサインインを行い、ブログ記事を投稿する、という機能があります。 Monaca と組み合わせを考えたときに、「ブログ記事の投稿アプリ」を作れるんじゃないかと思いました。 単純に、その日のメモをスマホで登録するイメージです。
- で、早速作ってみました。 ここからはデモ画面でご覧ください。
- 今回お見せしたデモは、こんな構成になっています。 アプリからMTへサインインして、記事投稿のフォームを呼び出しています。 投稿すると、MTへデータを送って、記事が更新されます。
- では次。 「MTで作ったウェブアプリをスマホアプリにできるわけがない」 というタイトルですが。
- 早速ですが、昨年大ヒットした映画「君の名は。」 ご覧になった方はいらっしゃいますか？ 結構いらっしゃいますね。 僕も観に行ったんですが、とてもおもしろくて、もう1回見よう、仕事帰りに観て帰ろう。IMAX版も見てみたい、など。 気がつけば10回も観てしまいました
- そこで、ウェブアプリを開発してみました。 アニメファンは、物語に出た場所を「聖地」とよんで、訪問して楽しんだりしています。そういう方向けに作ってみました。 Googleで「君の名は」「聖地ナビ」と検索すると、でてきます。 映画を観た方はご存知かと思いますが、東京の色んな場所がでてきます。 東京は広いので、なかなか見つけられないんですよね。 で、映画にでた場所をナビゲーションするシステムが有ると、便利じゃないかと。
- で、ふと思いました。 このウェブアプリは静的なhtmlでできているんだけど、Monaca にまるごとインポートできるんじゃないか？と。
- 皆さんご存知かと思いますが、Monaca には「インポート機能」があります。 これを触ってみたら、複数のディレクトリもまとめてアップロードできるんですね。
- で、「君の名は。聖地ナビ」は、全部静的htmlを使っています。 cssとJavaScriptだけで実装しています。 もしかして、これをまるごとスマホアプリ家できるんじゃないか？と。
- で、やってみました。 デモしてみます。
- というわけで、うまくいきました。 御覧頂いたとおり、中身はそれほど昔苦ありません。 GeLocation APIを叩いて、現在地点から聖地までの距離を測定する、GPS系のアプリです。 今回のアプリの特徴は、すべてhtlmでできていて、MTへアクセスしていないことです。 MTは他のオープンソースCMSと違って、静的htmlを吐き出せば、あとはCMS本体は動かさなくても済みます。
- 色々触ってみて思ったのですが、MTのREST APIを使うと、Monaca と連動したアプリが色々作れるな、と。 これはまあ、他のWordPress などでも、REST APIを使えば、同じようにアプリが作れると思います。
- もう一点、気がついたのは、MTの静的ファイル生成と、Monaca の仕組みは、すごく相性が良いのではないか、ということです。 MTが吐き出したhtml5のアプリを、そのままMonaca に持っていける、と。 html5のアプリを作るときに、ちょっとMonacaを意識した構築は必要ですが、他のCMSと比べると、バックエンドで動かす必要が無いため、アプリだけの開発?配布がしやすそうだな、と感じました。