SlideShare une entreprise Scribd logo
1  sur  26
2017年8月1日
シックス・アパート株式会社
長内毅志
Movable Type
自己紹介
•長内毅志
–2011年~ Movable Typeプロダクトマネージャー
–2014年~ ディベロッパーリレーションマネージャー
エバンジェリスト
–趣味 ダンス (ストリート、ジャズ)
ジョギング (サブフォー)
英語の勉強 (TOEIC 875, 英検準1級)
家族と過ごすこと
Disclaimer
Movable Typeとは
Movable Typeとは
• 10年以上利用されているブログ・CMS(通称MT)
• MTタグ組み合わせでロジック生成
• テンプレートとDBが完全に分離している
(MVCライク)
• プラグインで拡張可能
• どんなコードも生成可能
Data APIのエンドポイント
•https://example.com/mt/
mt-data-api.cgi/v3/sites/1/entries
バージョン ブログID
Monaca と Movable Type を
連動できるわけがない
•MTの APIは認証・投稿などの設定が可能
•Monaca とどう組み合わせる?
•スマホアプリを作成して、ブログ更新できるか?
•やってみた
今回の構成
1・アプリからMovable Typeへ認証
(投稿権限があるかチェック)
2・アプリから投稿データを
打ち込む
3・Movable Typeへ
データ送信
4・データ公開
MTで作ったウェブアプリをスマホアプリにで
きるわけがない
君の名は、見ましたか?
10回も観てしまいました
ウェブアプリ作りました
https://www.kiminonahaseichi.link
•ウェブアプリをスマホアプリ化できるか?
•Monacaには「インポート」機
能がある
•htmlなど静的なファイルをま
とめてアップできる
•MTはhtmlを静的生成できるCMS
•「君の名は。聖地ナビ」もすべて静的ファイル
•インポートできるんじゃね?
•やってみた
今回の構成
1・スマホのGPS機能を呼
び出し現在地を測定
2・周辺の観光地を
検索
3・見つかった観光地
をリスト表示
4・地図アプリを呼び出
し観光地までの経路
を調べる
5・Movable Type へのアク
セスは行わない
(アプリはパッケージ化さ
れているため、MTへアクセ
スする必要がない)
組み合わせてわかったこと
•MT のREST API「Data API」を使うと、Monacaと連動
したアプリが作れる
•MTは静的htmlファイルを生成する
•Monaca へのプロジェクトインポートが簡単
–動的CMSのように、バックエンドでCMSを動かす必要がない
•ウェブサイト+スマホアプリの開発が簡単
•というわけで
Movable Type
•LTのタイトルを
「Monaca と Movable Type は
こんなに相性が良いわけがない」
と変更して終わります
ご清聴ありがとうございました。

Contenu connexe

Tendances

20160720 okubo mt_cloud_handson
20160720 okubo mt_cloud_handson20160720 okubo mt_cloud_handson
20160720 okubo mt_cloud_handsonSix Apart
 
20160610 mtsaga handson_public
20160610 mtsaga handson_public20160610 mtsaga handson_public
20160610 mtsaga handson_publicSix Apart
 
20161115 okubo mt_cloud_handson
20161115 okubo mt_cloud_handson20161115 okubo mt_cloud_handson
20161115 okubo mt_cloud_handsonSix Apart
 
20150930 MTCloud handson
20150930 MTCloud handson20150930 MTCloud handson
20150930 MTCloud handsonSix Apart
 
20160125 power cms_cloud_public
20160125 power cms_cloud_public20160125 power cms_cloud_public
20160125 power cms_cloud_publicSix Apart
 
20150729 cloud handson
20150729 cloud handson20150729 cloud handson
20150729 cloud handsonSix Apart
 
20160927 okubo mt_cloud_handson
20160927 okubo mt_cloud_handson20160927 okubo mt_cloud_handson
20160927 okubo mt_cloud_handsonSix Apart
 
20140228 Movable Type Seminar
20140228 Movable Type Seminar20140228 Movable Type Seminar
20140228 Movable Type SeminarSix Apart
 
20150708 cloud handson
20150708 cloud handson20150708 cloud handson
20150708 cloud handsonSix Apart
 
WordBench埼玉紹介 20130526
WordBench埼玉紹介 20130526WordBench埼玉紹介 20130526
WordBench埼玉紹介 20130526Yoshitaka KATO
 
20160121 hachioji mt_cloud_handson
20160121 hachioji mt_cloud_handson20160121 hachioji mt_cloud_handson
20160121 hachioji mt_cloud_handsonSix Apart
 
20151207 shibuya handson
20151207 shibuya handson20151207 shibuya handson
20151207 shibuya handsonSix Apart
 
WEB TOUCH MEETING #52
WEB TOUCH MEETING #52WEB TOUCH MEETING #52
WEB TOUCH MEETING #52Tao Sasaki
 
20150202 Movable Type Seminar
20150202 Movable Type Seminar20150202 Movable Type Seminar
20150202 Movable Type SeminarSix Apart
 
How Would You Like Component Management System
How Would You Like Component Management SystemHow Would You Like Component Management System
How Would You Like Component Management SystemHidetaka Okamoto
 
エンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったことエンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったことHirata Tomoko
 
Java script samary
Java script samaryJava script samary
Java script samaryssuser78615b
 
2014年10月 東北発表資料
2014年10月 東北発表資料2014年10月 東北発表資料
2014年10月 東北発表資料Tao Sasaki
 
Markdownでドキュメント作成
Markdownでドキュメント作成Markdownでドキュメント作成
Markdownでドキュメント作成Yasuyuki Fujikawa
 

Tendances (20)

20160720 okubo mt_cloud_handson
20160720 okubo mt_cloud_handson20160720 okubo mt_cloud_handson
20160720 okubo mt_cloud_handson
 
20160610 mtsaga handson_public
20160610 mtsaga handson_public20160610 mtsaga handson_public
20160610 mtsaga handson_public
 
20161115 okubo mt_cloud_handson
20161115 okubo mt_cloud_handson20161115 okubo mt_cloud_handson
20161115 okubo mt_cloud_handson
 
20150930 MTCloud handson
20150930 MTCloud handson20150930 MTCloud handson
20150930 MTCloud handson
 
20160125 power cms_cloud_public
20160125 power cms_cloud_public20160125 power cms_cloud_public
20160125 power cms_cloud_public
 
20150729 cloud handson
20150729 cloud handson20150729 cloud handson
20150729 cloud handson
 
20160927 okubo mt_cloud_handson
20160927 okubo mt_cloud_handson20160927 okubo mt_cloud_handson
20160927 okubo mt_cloud_handson
 
20140228 Movable Type Seminar
20140228 Movable Type Seminar20140228 Movable Type Seminar
20140228 Movable Type Seminar
 
20150708 cloud handson
20150708 cloud handson20150708 cloud handson
20150708 cloud handson
 
WordBench埼玉紹介 20130526
WordBench埼玉紹介 20130526WordBench埼玉紹介 20130526
WordBench埼玉紹介 20130526
 
20160121 hachioji mt_cloud_handson
20160121 hachioji mt_cloud_handson20160121 hachioji mt_cloud_handson
20160121 hachioji mt_cloud_handson
 
20151207 shibuya handson
20151207 shibuya handson20151207 shibuya handson
20151207 shibuya handson
 
WEB TOUCH MEETING #52
WEB TOUCH MEETING #52WEB TOUCH MEETING #52
WEB TOUCH MEETING #52
 
20150202 Movable Type Seminar
20150202 Movable Type Seminar20150202 Movable Type Seminar
20150202 Movable Type Seminar
 
How Would You Like Component Management System
How Would You Like Component Management SystemHow Would You Like Component Management System
How Would You Like Component Management System
 
エンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったことエンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったこと
 
Java script samary
Java script samaryJava script samary
Java script samary
 
2014年10月 東北発表資料
2014年10月 東北発表資料2014年10月 東北発表資料
2014年10月 東北発表資料
 
Markdownでドキュメント作成
Markdownでドキュメント作成Markdownでドキュメント作成
Markdownでドキュメント作成
 
Web制作者が知っておきたいアクセシビリティ最新動向
Web制作者が知っておきたいアクセシビリティ最新動向Web制作者が知っておきたいアクセシビリティ最新動向
Web制作者が知っておきたいアクセシビリティ最新動向
 

Similaire à 20170801 monaca ug_lt_public

20180709 pronet study
20180709 pronet study20180709 pronet study
20180709 pronet studySix Apart
 
20180228 jazug
20180228 jazug20180228 jazug
20180228 jazugSix Apart
 
20161022 mt azure_handson
20161022 mt azure_handson20161022 mt azure_handson
20161022 mt azure_handsonSix Apart
 
20130611 movable type nagoya seminar
20130611 movable type nagoya seminar20130611 movable type nagoya seminar
20130611 movable type nagoya seminarSix Apart
 
20151206 hamamatsu handson
20151206 hamamatsu handson20151206 hamamatsu handson
20151206 hamamatsu handsonSix Apart
 
20171023 mt azure_handson
20171023 mt azure_handson20171023 mt azure_handson
20171023 mt azure_handsonSix Apart
 
20140731 Movable Type Seminar
20140731 Movable Type Seminar20140731 Movable Type Seminar
20140731 Movable Type SeminarSix Apart
 
20140416 Movable Type Seminar
20140416 Movable Type Seminar20140416 Movable Type Seminar
20140416 Movable Type SeminarSix Apart
 
20180326 mt azure_handson_translation
20180326 mt azure_handson_translation20180326 mt azure_handson_translation
20180326 mt azure_handson_translationSix Apart
 
20141027 movable type seminar
20141027 movable type seminar20141027 movable type seminar
20141027 movable type seminarSix Apart
 
20150124 mt nagano_publish
20150124 mt nagano_publish20150124 mt nagano_publish
20150124 mt nagano_publishSix Apart
 
20170415 mttokyo handson
20170415 mttokyo handson20170415 mttokyo handson
20170415 mttokyo handsonSix Apart
 
Objective-Cプログラマのためのswift導入法
Objective-Cプログラマのためのswift導入法Objective-Cプログラマのためのswift導入法
Objective-Cプログラマのためのswift導入法Tomoki Hasegawa
 
20141101 handson
20141101 handson20141101 handson
20141101 handsonSix Apart
 
20170314 aws handson
20170314 aws handson20170314 aws handson
20170314 aws handsonSix Apart
 
Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座Atsushi Miura
 
Polyglot Persistence and Graph Schema
Polyglot Persistence and Graph SchemaPolyglot Persistence and Graph Schema
Polyglot Persistence and Graph SchemaTakao Tetsuro
 
20180628 sappor alibaba_event
20180628 sappor alibaba_event20180628 sappor alibaba_event
20180628 sappor alibaba_eventSix Apart
 
20180709 aws handson_public
20180709 aws handson_public20180709 aws handson_public
20180709 aws handson_publicSix Apart
 

Similaire à 20170801 monaca ug_lt_public (20)

20180709 pronet study
20180709 pronet study20180709 pronet study
20180709 pronet study
 
20180228 jazug
20180228 jazug20180228 jazug
20180228 jazug
 
20161022 mt azure_handson
20161022 mt azure_handson20161022 mt azure_handson
20161022 mt azure_handson
 
20130611 movable type nagoya seminar
20130611 movable type nagoya seminar20130611 movable type nagoya seminar
20130611 movable type nagoya seminar
 
20151206 hamamatsu handson
20151206 hamamatsu handson20151206 hamamatsu handson
20151206 hamamatsu handson
 
20171023 mt azure_handson
20171023 mt azure_handson20171023 mt azure_handson
20171023 mt azure_handson
 
20140731 Movable Type Seminar
20140731 Movable Type Seminar20140731 Movable Type Seminar
20140731 Movable Type Seminar
 
20140416 Movable Type Seminar
20140416 Movable Type Seminar20140416 Movable Type Seminar
20140416 Movable Type Seminar
 
20180326 mt azure_handson_translation
20180326 mt azure_handson_translation20180326 mt azure_handson_translation
20180326 mt azure_handson_translation
 
20141027 movable type seminar
20141027 movable type seminar20141027 movable type seminar
20141027 movable type seminar
 
20150124 mt nagano_publish
20150124 mt nagano_publish20150124 mt nagano_publish
20150124 mt nagano_publish
 
20170415 mttokyo handson
20170415 mttokyo handson20170415 mttokyo handson
20170415 mttokyo handson
 
Objective-Cプログラマのためのswift導入法
Objective-Cプログラマのためのswift導入法Objective-Cプログラマのためのswift導入法
Objective-Cプログラマのためのswift導入法
 
20141101 handson
20141101 handson20141101 handson
20141101 handson
 
20170314 aws handson
20170314 aws handson20170314 aws handson
20170314 aws handson
 
Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座
 
Polyglot Persistence and Graph Schema
Polyglot Persistence and Graph SchemaPolyglot Persistence and Graph Schema
Polyglot Persistence and Graph Schema
 
概説 Data API v3
概説 Data API v3概説 Data API v3
概説 Data API v3
 
20180628 sappor alibaba_event
20180628 sappor alibaba_event20180628 sappor alibaba_event
20180628 sappor alibaba_event
 
20180709 aws handson_public
20180709 aws handson_public20180709 aws handson_public
20180709 aws handson_public
 

Plus de Six Apart

20180625 dev relenglish_public
20180625 dev relenglish_public20180625 dev relenglish_public
20180625 dev relenglish_publicSix Apart
 
20180411 monaca ug_lt
20180411 monaca ug_lt20180411 monaca ug_lt
20180411 monaca ug_ltSix Apart
 
20180228 aws handson_public
20180228 aws handson_public20180228 aws handson_public
20180228 aws handson_publicSix Apart
 
20180214 okubo mt_cloud_handson
20180214 okubo mt_cloud_handson20180214 okubo mt_cloud_handson
20180214 okubo mt_cloud_handsonSix Apart
 
20170922 cms security_public
20170922 cms  security_public20170922 cms  security_public
20170922 cms security_publicSix Apart
 
20170926 aws handson_public
20170926 aws handson_public20170926 aws handson_public
20170926 aws handson_publicSix Apart
 
20170921 smartphone apli_seminar_public
20170921 smartphone apli_seminar_public20170921 smartphone apli_seminar_public
20170921 smartphone apli_seminar_publicSix Apart
 
20170905 dev rellt_public
20170905 dev rellt_public20170905 dev rellt_public
20170905 dev rellt_publicSix Apart
 
20170713 smartphone apli_seminar_public
20170713 smartphone apli_seminar_public20170713 smartphone apli_seminar_public
20170713 smartphone apli_seminar_publicSix Apart
 
20170602 aws lt_public
20170602 aws lt_public20170602 aws lt_public
20170602 aws lt_publicSix Apart
 
20170519 cms security_public
20170519 cms  security_public20170519 cms  security_public
20170519 cms security_publicSix Apart
 
20170425 aws handson
20170425 aws handson20170425 aws handson
20170425 aws handsonSix Apart
 
20170420 publish
20170420 publish20170420 publish
20170420 publishSix Apart
 
20170221 aws handson
20170221 aws handson20170221 aws handson
20170221 aws handsonSix Apart
 
20170201 dev rel_public
20170201 dev rel_public20170201 dev rel_public
20170201 dev rel_publicSix Apart
 
20161219 aws handson._publicpptx
20161219 aws handson._publicpptx20161219 aws handson._publicpptx
20161219 aws handson._publicpptxSix Apart
 
20161202 lte publish
20161202 lte publish20161202 lte publish
20161202 lte publishSix Apart
 

Plus de Six Apart (17)

20180625 dev relenglish_public
20180625 dev relenglish_public20180625 dev relenglish_public
20180625 dev relenglish_public
 
20180411 monaca ug_lt
20180411 monaca ug_lt20180411 monaca ug_lt
20180411 monaca ug_lt
 
20180228 aws handson_public
20180228 aws handson_public20180228 aws handson_public
20180228 aws handson_public
 
20180214 okubo mt_cloud_handson
20180214 okubo mt_cloud_handson20180214 okubo mt_cloud_handson
20180214 okubo mt_cloud_handson
 
20170922 cms security_public
20170922 cms  security_public20170922 cms  security_public
20170922 cms security_public
 
20170926 aws handson_public
20170926 aws handson_public20170926 aws handson_public
20170926 aws handson_public
 
20170921 smartphone apli_seminar_public
20170921 smartphone apli_seminar_public20170921 smartphone apli_seminar_public
20170921 smartphone apli_seminar_public
 
20170905 dev rellt_public
20170905 dev rellt_public20170905 dev rellt_public
20170905 dev rellt_public
 
20170713 smartphone apli_seminar_public
20170713 smartphone apli_seminar_public20170713 smartphone apli_seminar_public
20170713 smartphone apli_seminar_public
 
20170602 aws lt_public
20170602 aws lt_public20170602 aws lt_public
20170602 aws lt_public
 
20170519 cms security_public
20170519 cms  security_public20170519 cms  security_public
20170519 cms security_public
 
20170425 aws handson
20170425 aws handson20170425 aws handson
20170425 aws handson
 
20170420 publish
20170420 publish20170420 publish
20170420 publish
 
20170221 aws handson
20170221 aws handson20170221 aws handson
20170221 aws handson
 
20170201 dev rel_public
20170201 dev rel_public20170201 dev rel_public
20170201 dev rel_public
 
20161219 aws handson._publicpptx
20161219 aws handson._publicpptx20161219 aws handson._publicpptx
20161219 aws handson._publicpptx
 
20161202 lte publish
20161202 lte publish20161202 lte publish
20161202 lte publish
 

20170801 monaca ug_lt_public

Notes de l'éditeur

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