際際滷

MT�|奨�34
はじめよう� Data API ハンズオン
2017定4埖15晩(輿)
シックス?アパ�`ト幄塀氏芙
�L坪吼崗

徭失�B初
?�L坪吼崗
�C2011定゛ Movable Typeプロダクトマネ�`ジャ�`
�C2014定゛ディベロッパ�`リレ�`ションマネ�`ジャ�`
エバンジェリスト
�C箸龍ダンス (ストリ�`ト、ジャズ)
ジョギング (サブフォ�`)
哂�Zの茶� (TOEIC 875, 哂��1�)
社怛と�^ごすこと

ハンズオンの古勣
?Movable Type と Microsoft Cognitive Services を�B
亊して、徭�啖㎏U誘後システムを恬ってみる

アジェンダ
? Movable Type とは
? Data APIとは
? JavaScript SDKの聞い圭
? �J�^システムの�g廾
? MTへの誘後システムの�g廾
? Microsoft Cognitive Services と�B亊した鍬�Uシステムの�g廾
? まとめ

書晩のゴ�`ル
?Movable Type、Data API とは採か
?Data APIの聞い圭
?JavaScript SDKの聞い圭
を�誼して隔ち｢っていただく

融隼ですが
哂�Zで猟嫗が��韻襪茲Δ砲覆蠅燭ぃ�
と房ったことはありませんか�

?哂�Zで晩�やブログが��韻燭蕕�辰海いぃ�
?でも、哂�Zを��里�yしい
=>
Movable Type(MT) +クラウドAIで、その�瑤鬚�覆┐�
みましょう

書晩の坪否
?MT + Microsoft の鍬�UAIを�Mみあわせる
?猟嫗を秘薦すると、哂�Zに徭�啖㎏U
?哂�Zの猟嫗をMTに誘後?巷�_する
´というシングルペ�`ジアプリを�_�kします

書指のシステムのポイント
?MTの�J�^をどう�g廾するか
?MTのブログ�並をどのように誘後?巷�_するか
?Microsoft Translator Text APIをどのようにつかって
哂�Uするか

古廷��
MTで�J�^を佩う
Microsoft Translator Text APIで晩
云�Z=>哂�Zに鍬�U
鍬�U�gみの哂�Z猟嫗を
MT�U喇でブログ�並として巷�_

?參和の�桑でハンズオンを佩っていきます。
�CData APIを聞った�J�^の�g�H
�CData API�U喇で�並を誘後
�C秘薦した晩云�ZをTranslator テキスト APIで鍬�U瘁、Data API�U
喇で誘後

Movable Typeとは
? 10定參貧旋喘されているブログ?CMS(宥各MT)
? MTタグ�Mみ栽わせでロジック伏撹
? テンプレ�`トとDBが頼畠に蛍�xしている
(MVCライク)
? プラグインで��辛嬬
? どんなコ�`ドも伏撹辛嬬

?ブログから方嵐ペ�`ジに式び寄�庁サイトまで
5嵐周參貧の��g�
ECサイト
イントラサイト?WEB芙坪��
メディアサイト?二�Iオウンドメディア
氏�T崙サイト?コミュニティサイト
�g�
コ�`ポレ�`トサイト
5嵐周參貧の��g�
5嵐周參貧�

ビジネスユ�`ザ�`に�~寄な屶隔
晩�U峠譲225芙の
磯方參貧がMTユ�`ザ�`

恷仟10周のブログ�並をリンク原きで伏撹
<ul>
<MT:Entries limit="10">
<li>
<a href="<MT:EntryPermalink>">
<MT:EntryTitle>
</a>
</li>
</MT:Entries>
</ul>

?床議伏撹でhtmlを竃薦
(スタティックパブリッシング)
?�啜追敎匹��魗苗�
(ダイナミックパブリッシング)

?�啜帖⊂乙追敎匹匹舛蕕��鬉垢襪海箸如��？なサ�`
バ�`��撹に��して悲�に��鬉任④�

児云議な��撹
巷�_サ�`バ�`惹
CMSサ�`バ�`
砿尖宀
��E宀
(サイト�L��宀)

ステ�`ジング�h廠
ステ�`ジング
サ�`バ�`惹
CMSサ�`バ�`
巷�_
サ�`バ�`
砿尖宀 ��E宀
(サイト�L��宀)

庇�L��撹
CMS
サ�`バ�`
巷�_
サ�`バ�`
�庇�L��撹�
ロ�`ド
バランサ

床議伏撹
?床議なhtmlを竃薦します
?書晩のハンズオンファイルも、htmlやphpをリアルに
竃薦します。

Movable Type にサインインして
�並を誘後する

この嫗でやること
?�g�HにMovable Type へサインインして、�並を誘後
します。

? 塘下したアカウント秤�鵑鯤垢�
て、Movable Type にサインイン
します。

? サインインを佩うと、兜豚鮫中仝
ユ�`ザ�`ダッシュボ�`ド々が燕幣
されます。
? ウェブサイトのタブから、徭蛍の
ID兆と揖じウェブサイトを�x�kし
ます。user01なら仝user01々を�xび
ます。

? 書指のハンズオンで聞うウェブ
サイトの砿尖鮫中に卞�咾靴泙�
。
? 嘔貧に、＆と弍め文咫のアイコ
ンがありますので、クリックして
みましょう。

? ハンズオンで聞うウェブサイトが
燕幣されます。
? �並を弖紗していくと、厚仟され
ます。

? MTの砿尖鮫中に��蠅泙后�
? 恷兜の�並を恬撹してみましょう
。
? 恣メニュ�`、もしくは嘔貧のボタ
ンから仝�並々を仟�恬撹します
。

? �並の�鹿鮫中が燕幣されます
。
? タイトルや猟嫗を�m輝に秘薦しま
しょう。
? 嘔サイドの荷恬鮫中から仝巷�_々
ボタンを�xび、�並を巷�_します
。

? 恷兜の�並を巷�_しました。鮫
中に燕幣されているリンクをクリ
ックして、巷�_サイトを�_�Jして
みましょう。

? 秘薦した�並デ�`タが、巷�_さ
れていることがわかります。

Data APIとは
?MTのデ�`タを荷恬できるAPI
?REST侘塀 / JSON侏デ�`タでやり函りする
?デ�`タの�iみ�zみ、鞠�h、厚仟、�茅などが辛嬬
?ユ�`ザ�`�J�^も旋喘できる

Data API を旋喘したアプリ箭:Movable Type for iOS

Data API を旋喘したサイト�g廾箭:�|奨��

Data API のリファレンス
?Movable Type Data API ドキュメント
�Chttps://www.movabletype.jp/developers/data-api/
?Movable Type Data API SDKガイド
�Chttps://github.com/movabletype/mt-data-api-sdk-
js/wiki/DataAPI-SDK-japanese-MT.DataAPI

Data API のSDK
?JavaScript
�Cパッケ�`ジに揖�y
?Swift
�CMovable Type の GitHubレポジトリ

?書晩は、JavaScript SDKを聞います

JavaScript SDKのインスト�`ル
?html貧にJavaScript SDKを�iみ�zませる
? <script src=/slideshow/20170415-mttokyo-handson/75007313/＾<$MTStaticWebPath$>
data-api/v3/js/mt-data-api.js￣>
</script>
? mt-static 塘和にあります (MT6參週)

(sample-01)
�J�^を�g廾する

sample-01のシナリオ
?Movable Type の�J�^を、Data API�U喇で佩う
?�J�^ができたら仝�J�^しました々という猟忖を竃薦する
��gなアプリを恬る

? ウェブサイトのダッシュボ�`ド恣
メニュ�`から
[デザイン]=>[テンプレ�`ト]を�x
びます。

? MTのテンプレ�`ト砿尖鮫中が燕
幣されます。
? [インデックステンプレ�`ト]坪に
ある[sample-01]を�xびます。

? sample-01.htmlのテンプレ�`トが
燕幣されます。

? 鮫中和何にある[竃薦ファイル兆
]が [sample-01.html]であること
を�_�Jして、 [隠贋と壅��B]ボタ
ンを兀します。

? 壅��Bが�K阻すると、htmlが竃
薦されます。
? 鮫中嘔何にある[巷�_されたテン
プレ�`トを�_�J]をクリックしてみ
ましょう。

? 竃薦したhtmlが燕幣されます。
鮫中の[サインイン]というボタンを
クリックします。

? 書指竃薦した、サンプルアプリ喘
のサインイン鮫中が燕幣されま
す。
? 塘下したIDと仝ウェブサ�`ビスパ
スワ�`ド々でサインインしてみまし
ょう。

? �J�^が屎械に佩われると[サイン
インしています]というメッセ�`ジ
が燕幣されます。
? 恷兜のアプリ仝�J�^アプリ々が�o
並に�咾④泙靴拭�

�J�^アプリの碧�Mみ
?Data API 喘のJavaScript SDKを旋喘
?�J�^が撹孔したら、ブラウザにCookieでト�`クンを隠
贋
?�並の誘後などができるようになる

ブラウザの�編^ツ�`ルで需た範�^

ブラウザに隠贋されたト�`クン

もう富し侮く�たい圭へ
?ブラウザのCookie を匯業�茅して、もういちど�J�^
喘htmlを�てみましょう。
?ブラウザの�編^ツ�`ルを聞って、ネットワ�`クの送れ
を�てみましょう。

Data API の2つの�J�^
?Authentication
�CIDとパスワ�`ドでサインインする
?Authorization
�CMTのサインイン鮫中を柵び竃す
�Cウェブサイトで聞うならAuthorization の圭が芦畠

�J�^に�vするリファレンス
?クイックスタ�`トガイド
�Chttps://www.movabletype.jp/developers/
data-api/quick-start/

(sample-02)
�並を誘後する

?サインインしたら、フォ�`ム鮫中を燕幣
?秘薦 => 誘後ボタンを兀す
?MTに�並が誘後、巷�_される
(砿尖鮫中を聞わずに�並誘後する)

?sample-02フォルダをえらぶ
?[sample-02.html]をテキストエディタ吉で�_きます。

? MTのテンプレ�`ト砿尖鮫中が燕
幣されます。
ある[sample-02]を�xびます。

? sample-02のhtmlコ�`ドが燕幣さ
れます。

]を [sample-02.html]であることを
�_�Jして、 [隠贋と壅��B]ボタン
を兀します。

? 竃薦したhtmlが燕幣されます
? 鮫中の[サインイン]というボタンを

? MTへ誘後できるサンプルアプリ
のフォ�`ム鮫中が燕幣されます
。
? 採か��zんで仝鞠�hする々ボタ
ンを兀します。

? 屎械に鞠�hされたというメッセ�`
ジが燕幣されたら、砿尖鮫中に
��蠅泙后�
? 恣メニュ�`から[�並]=>[匯�E]を
? 誘後した�並が鞠�hされている
ことがわかります。

? �並の�鹿鮫中を�_いて、誘後
坪否どおりか�_�Jしてみましょう
。
? [燕幣]ボタンか、嘔貧の[サイト
の燕幣] ボタンをクリックします。

? 鞠�hした�並が、巷�_されてい
ることが�_�Jできます。

コ�`ドの盾�h
?�並を伏撹するエンドポイント[entries]へ、フォ�`ム
から秘薦したデ�`タを僕佚
?僕佚には、JavaScript SDKの�v方
[createEntry]を聞っている。

?59佩朕-
�C const entry = {};
entry.title = $(＾#title￣).val();
entry.body = $("#body").val();
entry.more = $("#more").val();
api.createEntry(siteId, entry, function(response) {

Translator テキストAPIと�B亊して、
哂�Uした�並を誘後する

?サインインボタンを兀すと�J�^
?誘後鮫中から晩云�Zを秘薦すると、哂�Zに鍬�Uされ
る
?誘後を佩うと、哂�Zの�並が巷�_される

? MTのテンプレ�`ト砿尖鮫中に��
ります。
ある[sample-03-php]を�xびます
。

? sample-03のphpコ�`ドが燕幣さ
れます。

? コ�`ドの5佩朕に、Microsoft
Translator テキストAPIと�B亊す
るための、APIキ�`を協�xする�w
侭があります。
? 肝のペ�`ジに��dされている、
APIキ�`を�峰します。

? APIキ�`を�峰します。念瘁のシ
ングルクオ�`トを�茅しないよう
に�櫃鬚弔韻届造気ぁ�

? ファイル兆が[sample-03.php]で
あることを�_�Jします。
? [隠贋と壅��B]をクリックして、
phpファイルを竃薦します。

? 壅��Bが�gんだら、�K阻です。
肝は、htmlのフォ�`ムを竃薦しま
す。

? 壅び、MTのテンプレ�`ト砿尖鮫
中に卞�咾靴泙后�
ある[sample-03-html]を�xびま
す。

? sample-03のhtmlコ�`ドが燕幣さ
れます。

]を [sample-03.html]であることを
�_�Jして、 [隠贋と壅��B]ボタン
を兀します。

巷�_したテンプレ�`トを�てみましょう
? sample-03のhtmlが燕幣されま
す。
? 仝サインイン々をクリックします。

? 書指竃薦した、sample-03のサイ
ンイン鮫中が燕幣されます。
? 塘下したIDと仝ウェブサ�`ビスパ
スワ�`ド々でサインインしてみまし
ょう。

? 誘後喘のフォ�`ム鮫中が燕幣さ
れます。
? タイトルと云猟に、�m輝に猟忖を
秘薦します。
? 秘薦が�Kわったら、仝哂�Uする々
ボタンをクリックします。

? Microsoft Translator テキスト
APIを宥じて鍬�Uされた哂�Zが、
和何のフォ�`ムに燕幣されます
。
? 仝鞠�hする々をクリックして、哂�U
した�並をMTに誘後します。

? 誘後が�Kわったら、ウェブサイト
の鮫中を�_�Jします。
? 哂�Uした�並デ�`タが誘後され
ていることがわかります。

? MTの砿尖鮫中に��辰董��Zの
誘後が�並として鞠�hされてい
ることを�_�Jしてみましょう。

Microsoft Translator テキストAPIとは
? Microsoft Azure のサ�`ビス
[Cognitive Services]の匯つ
? 謹冱�Z鍬�Uを佩うAPI

Cognitive Services のラインアップ
繁�gの仝�J岑々�C嬬をクラウド貧で戻工

Cognitive Services の匯箭
?鮫�盾裂(Computer Vision API)

?MT x AI
?翌何サ�`ビスとの�B亊でﾚがる辛嬬來

Movable Type のリファレンス
?https://www.movabletype.jp

云晩の坪否
? Movable Type Data API のエンドポイントとJavaScript SDK の聞い
圭
�Chttp://qiita.com/TakeshiNickOsanai/items/05120e295ee1aab59017
? Movable Type の Data API でユ�`ザ�`�J�^を佩う
�Chttp://qiita.com/TakeshiNickOsanai/items/5508b2df13be72bf4503

云晩の坪否
? JavaScript を旋喘して Movable Type へデ�`タを鞠�hする
�Chttp://qiita.com/TakeshiNickOsanai/items/274c21530f2eb2b72880
? Microsoft Translator テキスト API + Movable Type で、徭�嗷�U
誘後アプリを恬る
�Chttp://qiita.com/TakeshiNickOsanai/items/e933df35ddf1aa07eb86

まとめ
?Data APIは、Movable Type が戻工するREST侏の
APIである
?Data APIを初して、デ�`タのやり函りができる
?麿サ�`ビスと�Mみ栽わせることで、辛嬬來がﾚがる

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

際際滷

20170415 mttokyo handson

More Related Content

20170415 mttokyo handson