Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie 20170415 mttokyo handson
Ähnlich wie 20170415 mttokyo handson (20)
Mehr von Six Apart
Mehr von Six Apart (20)
20170415 mttokyo handson
- 1. MT東京－34 はじめよう！ Data API ハンズオン 2017年4月15日(土) シックス・アパート株式会社 長内毅志
- 2. 自己紹介 •長内毅志 –2011年～ Movable Typeプロダクトマネージャー –2014年～ ディベロッパーリレーションマネージャー エバンジェリスト –趣味 ダンス (ストリート、ジャズ) ジョギング (サブフォー) 英語の勉強 (TOEIC 875, 英検準1級) 家族と過ごすこと
- 3. ハンズオンの概要 •Movable Type と Microsoft Cognitive Services を連 携して、自動翻訳投稿システムを作ってみる
- 4. アジェンダ • Movable Type とは • Data APIとは • JavaScript SDKの使い方 • 認証システムの実装 • MTへの投稿システムの実装 • Microsoft Cognitive Services と連携した翻訳システムの実装 • まとめ
- 5. 今日のゴール •Movable Type、Data API とは何か •Data APIの使い方 •JavaScript SDKの使い方 を習得して持ち帰っていただく
- 9. 今日の内容 •MT + Microsoft の翻訳AIを組みあわせる •文章を入力すると、英語に自動翻訳 •英語の文章をMTに投稿・公開する …というシングルページアプリを開発します
- 10. •DEMO
- 11. 今回のシステムのポイント •MTの認証をどう実装するか •MTのブログ記事をどのように投稿・公開するか •Microsoft Translator Text APIをどのようにつかって 英訳するか
- 12. 概念図 MTで認証を行う Microsoft Translator Text APIで日 本語=>英語に翻訳 翻訳済みの英語文章を MT経由でブログ記事として公開
- 13. •以下の順番でハンズオンを行っていきます。 –Data APIを使った認証の実際 –Data API経由で記事を投稿 –入力した日本語をTranslator テキスト APIで翻訳後、Data API経 由で投稿
- 14. Movable Type とは
- 15. Movable Typeとは • 10年以上利用されているブログ・CMS(通称MT) • MTタグ組み合わせでロジック生成 • テンプレートとDBが完全に分離している (MVCライク) • プラグインで拡張可能 • どんなコードも生成可能
- 27. • 配布したアカウント情報を使っ て、Movable Type にサインイン します。
- 31. • MTの管理画面に戻ります。 • 最初の記事を作成してみましょう 。 • 左メニュー、もしくは右上のボタ ンから「記事」を新規作成します 。
- 32. • 記事の編集画面が表示されます 。 • タイトルや文章を適当に入力しま しょう。 • 右サイドの操作画面から「公開」 ボタンを選び、記事を公開します 。
- 35. Data APIを触ってみる
- 36. Data APIとは •MTのデータを操作できるAPI •REST形式 / JSON型データでやり取りする •データの読み込み、登録、更新、削除などが可能 •ユーザー認証も利用できる
- 37. Data API を利用したアプリ例:Movable Type for iOS
- 39. Data API のリファレンス •Movable Type Data API ドキュメント –https://www.movabletype.jp/developers/data-api/ •Movable Type Data API SDKガイド –https://github.com/movabletype/mt-data-api-sdk- js/wiki/DataAPI-SDK-japanese-MT.DataAPI
- 40. Data API のSDK •JavaScript –パッケージに同梱 •Swift –Movable Type の GitHubレポジトリ
- 42. JavaScript SDKのインストール •html上にJavaScript SDKを読み込ませる • <script src=“<$MTStaticWebPath$> data-api/v3/js/mt-data-api.js”> </script> • mt-static 配下にあります (MT6以降)
- 44. sample-01のシナリオ •Movable Type の認証を、Data API経由で行う •認証ができたら「認証しました」という文字を出力する 簡単なアプリを作る
- 48. • 画面下部にある[出力ファイル名 ]が [sample-01.html]であること を確認して、 [保存と再構築]ボタ ンを押します。
- 53. 認証アプリの仕組み •Data API 用のJavaScript SDKを利用 •認証が成功したら、ブラウザにCookieでトークンを保 存 •記事の投稿などができるようになる
- 54. ブラウザの検証ツールで見た認証
- 55. ブラウザに保存されたトークン
- 65. • 画面下部にある[出力ファイル名 ]を [sample-02.html]であることを 確認して、 [保存と再構築]ボタン を押します。
- 70. • 正常に登録されたというメッセー ジが表示されたら、管理画面に 戻ります。 • 左メニューから[記事]=>[一覧]を クリックします。 • 投稿した記事が登録されている ことがわかります。
- 71. • 記事の編集画面を開いて、投稿 内容どおりか確認してみましょう 。 • [表示]ボタンか、右上の[サイト の表示] ボタンをクリックします。
- 74. •59行目- – const entry = {}; entry.title = $(“#title”).val(); entry.body = $("#body").val(); entry.more = $("#more").val(); api.createEntry(siteId, entry, function(response) {
- 80. • コードの5行目に、Microsoft Translator テキストAPIと連携す るための、APIキーを定義する箇 所があります。 • 次のページに記載されている、 APIキーを記述します。
- 86. • 画面下部にある[出力ファイル名 ]を [sample-03.html]であることを 確認して、 [保存と再構築]ボタン を押します。
- 90. • 投稿用のフォーム画面が表示さ れます。 • タイトルと本文に、適当に文字を 入力します。 • 入力が終わったら、「英訳する」 ボタンをクリックします。
- 91. • Microsoft Translator テキスト APIを通じて翻訳された英語が、 下部のフォームに表示されます 。 • 「登録する」をクリックして、英訳 した記事をMTに投稿します。
- 94. Microsoft Translator テキストAPIとは • Microsoft Azure のサービス [Cognitive Services]の一つ • 多言語翻訳を行うAPI
- 96. Cognitive Services の一例 •画像解析(Computer Vision API)
- 98. リファレンス
- 100. 本日の内容 • Movable Type Data API のエンドポイントとJavaScript SDK の使い 方 –http://qiita.com/TakeshiNickOsanai/items/05120e295ee1aab59017 • Movable Type の Data API でユーザー認証を行う –http://qiita.com/TakeshiNickOsanai/items/5508b2df13be72bf4503
- 101. 本日の内容 • JavaScript を利用して Movable Type へデータを登録する –http://qiita.com/TakeshiNickOsanai/items/274c21530f2eb2b72880 • Microsoft Translator テキスト API + Movable Type で、自動英訳 投稿アプリを作る –http://qiita.com/TakeshiNickOsanai/items/e933df35ddf1aa07eb86
- 102. まとめ •Data APIは、Movable Type が提供するREST型の APIである •Data APIを介して、データのやり取りができる •他サービスと組み合わせることで、可能性が広がる
- 103. ありがとうございました。