2016年5月27日(金) kintone devCamp ハンズオンセミナーの公開資料です。

1. ウェブCMS 「Movable Type」と
kintoneを連携して
フォームデータをDB化しよう
2016年5月27日
シックス・アパート株式会社 長内毅志

2. • 本資料は、2016年5月27日(金) kintone devCamp で行ったハンズオンのセミ
ナー資料です。
• 一部ハンズオン実施時と変更した箇所があるため、ご了承ください。

3. 本日の講師
• シックス・アパート株式会社 長内毅志
–2011年～ Movable Typeプロダクトマネージャー
–2014年～ ディベロッパーリレーションマネージャー
エバンジェリスト
–趣味 ダンス (ストリート、ジャズ)
ジョギング (サブフォー)
英語の勉強 (TOEIC 875, 英検準1級)
家族と過ごすこと

4. 本日のサマリ
• Movable Type(MT) とは
–Movable Type とkintoneの意外な関係
• Movable Type とkintoneの連携

5. Movable Type とは

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

7. 最新10件のブログ記事をリンク付きで生成
<ul>
<MT:Entries limit="10">
<li>
<a href="<MT:EntryPermalink>">
<MT:EntryTitle>
</a>
</li>
</MT:Entries>
</ul>

8. • 静的生成でhtmlを出力
(スタティックパブリッシング)
• 動的生成も対応可能
(ダイナミックパブリッシング)

9. ビジネスユーザーに絶大な支持
• 日経平均225社の半分以上がMTユーザー
• 国内導入企業は5万件超

10. Movable Type と kintone の意外な関係

11. 日本に広がるMTコミュニティ
• MT蝦夷
• MT東北
• MT東京
• MTなごや
• MT愛媛
• MT鹿児島
• MT関西
• MT広島
• MT福岡
• MT長野
• MT ∗/ NIIGATA(新潟)
• MT SAGA
• MT 熊本

12. kintone café
• 2013年11月に開始、すでに全国17拠点

13. 実は、kintone caféは
• kintone café はMTコミュニティの影響を受けて立ち上がった
–MT Café が札幌で開催
=> kintoneでもこんなコミュニティがあると嬉しい
–北海道の札幌で第1回め
• kintoneコミュニティの広がりを作るきっかけに

14. AWS Cloud Roadshow

15. というわけで
• Movable Type と kintone には意外な縁があるのです
• これからもよろしくお願いします！

16. Movable Type と kintoneを連携して
フォームデータを蓄積する

17. 今回のゴール
Movable Type で
htmlフォームと
登録用プログラムを
生成
登録用プログラムから
REST API経由で
kintoneへデータ送信
htmlフォームから
登録用プログラムに
データ受け渡し

18. Movable Type と kintone を連携するメリット
• 収集したデータを公開サーバーと分離
–情報保護につながる
• データをkintoneの機能で分析
–収集データのデータベース化
• エンタープライズ企業への提案
–オープンソースや海外のSaaSはNGというケース

19. ハンズオン手順
• kintoneの操作
–アプリ作成
–フォーム定義
• Movable Typeの操作
–テンプレート作成
–フォーム出力

20. kintoneの準備

21. テンプレートのインポート準備
• システム管理者アカウントでkintoneにログインし、「kintoneシステム管理」「
アプリテンプレート」の順に進みます。

22. アプリの読み込み
• アプリのテンプレート画面で、先ほどダウンロードしたファイルから［
mt_kintone.zip］という名前のzipファイルを読み込みます。

23. アプリの読み込み
• 「Movable Type x kintone ハンズオンセミナー用」というテンプレートが読み
込まれていれば完了です。

24. 新規アプリの作成
• ホーム画面に戻り、テンプレートからアプリの作成を行います。

25. ハンズオン用テンプレートの選択
• 「Movable Type x kintone ハンズオンセミナー用」テンプレートを選択してア
プリを作成します。

26. アプリ管理
• 右上の「kintoneの操作と設定」から「アプリ管理」を選択します。

27. アプリIDの確認
• アプリ一覧の中から「お問い合わせフォーム」のアプリIDを確認してこれを覚
えておきます。

28. Movable Type の設定

29. 今回のゴール
Movable Type で
htmlフォームと
登録用プログラムを
生成
登録用プログラムから
REST API経由で
kintoneへデータ送信
htmlフォームから
登録用プログラムに
データ受け渡し

30. Movable Type のアカウント確認
• 先ほどダウンロードしたファイルの中から［mt_template.zip］という圧縮ファイ
ルを解凍します。
• 配布したアカウント情報を元に、管理画面へアクセスし、サインインします。

31. サインイン
• サインイン後、ダッシュボードに表示されている
「My First Website」を選択します

32. ウェブサイトの確認
• 画面右上のアイコンをクリックすると、今回ハンズオンで利用するサイトが表
示されます。表示が問題ないか確認してください。

33. テンプレート管理画面
• 左サイドの操作メニューから [デザイン] => [テンプレート]を選択して、
Movable Type のテンプレート設定画面に移動します。

34. 新規生成
• [インデックステンプレートの作成] をクリックします。

35. アンケートフォームの生成
• ダウンロードしたファイルから[form.txt]を開き、中身をまるごと貼り付けしま
す。
• 名前は「アンケートフォーム」とします。

36. テンプレートの保存
• 貼り付けが終わったら、画面下部の「テンプレートの設定」を開き、[出力ファ
イル名]を[form.html]と入力します。
• [保存]ボタンを押して、データを保存します。

37. 再構築してhtmlを生成する
• 保存が終わったら[再構築]を行い、htmlファイルを生成します。
• 再構築が終了したら、画面右部の[ショートカット]から[公開されたテンプレー
トを確認]をクリックします。
• フォームページが確認できます。

38. プログラムの作成
• 続いて、kintoneへ投稿するためのプログラムファイルを生成します
• [インデックステンプレートの作成] をクリックします

39. テンプレート設定
• ダウンロードしたファイルから[post.txt]を開き、中身をまるごと貼り付けしま
す。
• 名前は「投稿用プログラム」とします。

40. kintoneサブドメインの設定
• 貼付けしたコードの3行目を、今回のハンズオンで利用するkintoneのサブド
メインに変更します。
皆さんが利用中の
kintoneのサブドメインに変更

41. kintoneアプリIDの設定
• 貼付けしたコードの4行目を、先ほどkintoneで確認したアプリIDに変更しま
す。
kintoneのアプリIDに変更
(数字)

42. ID、パスワードの設定
• 5行目、6行目を、kintoneのアプリに対して投稿権限を持つユーザーのID、
パスワードに変更します。
kintoneのID、パスワードへ
変更する

43. プログラムテンプレートの保存
• 修正が終わったら、画面下部の「テンプレートの設定」を開き、[出力ファイル
名]を[post.php]と入力します。
• [保存]ボタンを押して、データを保存します。

44. 再構築と確認
• 保存が終わったら[再構築]を行い、phpファイルを生成します。
• 再構築が終了したら、画面右部の[ショートカット]から[公開されたテンプレー
トを確認]をクリックします。
• ページが表示されたらプログラムが生成されています。
–(フォーム外からのアクセスなのでエラーになりますが問題ありません)

45. データ送信のテスト
• 公開した[アンケートフォーム]から、データ入力後、送信します。
• 登録完了のメッセージが表示されたら送信成功です。

46. kintoneアプリの確認
• 投稿が終わったら、kintoneに作成したアプリの一覧を確認しましょう。投稿し
たデータが反映されていれば成功です。

47. kintoneの
REST APIを利用する際のポイント

48. 今回のコード
• 以下のドキュメントを元に作成しました
• kintone API
–https://cybozudev.zendesk.com/hc/ja/categories/200147600
• レコードの登録
–https://cybozudev.zendesk.com/hc/ja/articles/202166160-
%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E7%99%BB%E9%8C%B2-
POST-

49. ハンズオンプログラム作成中の所感
• REST APIへデータを登録する際は、型を確認する
–データ登録の際はアプリからデータを取得
–RESTの型を確認して合わせるようにjsonデータを生成
• kintoneの日付データはISO8601形式で登録
• ID/パスワードの利用に抵抗がある場合はトークンを利用
–トークン利用の際はアプリの設定=>アクセス権 で設定を

50. kintoneの設定
• アプリ作成ユーザーとデータ登録ユーザーは分けたほうが良い
–権限を分けることでセキュアな運用につながる
• 権限設定は運用前に見直す
–不必要な権限は付与しない

51. アプリのアクセス権

52. Movable Type のまとめ

53. Movable Type の特徴まとめ
• どんな種類のファイルも生成可能
–html、php、Java、JavaScript、CSS
• 要件に応じたサイト構築ができる
• セキュリティポリシーに沿ったCMS構築が可能

54. • REST型APIを実装している
–kintone から Movable Type にデータを登録することも可能

55. • アプリケーションと生成データを分離できるため、様々なサーバー構成に対
して柔軟に対応できる

56. 基本的な構成
公開サーバー兼
CMSサーバー
管理者
閲覧者
(サイト訪問者)

57. ステージング環境
ステージング
サーバー兼
CMSサーバー
公開
サーバー
管理者 閲覧者
(サイト訪問者)

58. 冗長構成
CMS
サーバー
公開
サーバー
（冗長構成）
ロード
バランサ

59. クラウド環境
–CMSサーバーをVMイメージで構築(Amazon EC2など)
–公開ページはコンテンツサーバーで構築
–AmazonS3 (Azure Webサイト) など
VMサーバー
AmazonEC2など
Amazon S3など

60. さらに詳しくは
• ぜひウェブサイトをご覧ください！
• http://www.sixapart.jp/movabletype/

61. Movable Typeの Data API
• Movable Type にもREST型のAPIがあります。
• MTのデータをCRUD(Create、Read、Update、Delete)操作できます
• ぜひAPIを触ってみてください！
• http://www.sixapart.jp/movabletype/data-api/

62. • http://www.sixapart.jp
• http://www.movabletype.jp