Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MTDDC Meetup NAGOYA 2014-01-18 Seiichiro Hazama

2,429 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

MTDDC Meetup NAGOYA 2014-01-18 Seiichiro Hazama

  1. 1. Movable Type 6 で できること(仮) SixApart KK Movable Type Engineer Seiichiro Hazama
  2. 2. 改め
  3. 3. Data API で 遊ぼう(仮) SixApart KK Movable Type Engineer Seiichiro Hazama
  4. 4. 発表させて 頂きます。
  5. 5. はじめまして。
  6. 6. 間(はざま) 誠一郎と 申します。
  7. 7. Movable Type エンジニア です。
  8. 8. ネットでは 太鉄(たいてつ) という名前で 活動しています。
  9. 9. MT4i の 中の人です。 (MT4i については 後述)
  10. 10. まずは 自己紹介 がわりに、
  11. 11. 私と Movable Typeの 出会いの話を させてください。
  12. 12. 私が Movable Type と 出会ったのは
  13. 13. 2002年11月頃
  14. 14. カテゴリ分けの できる 日記スクリプトを 探していて、
  15. 15. Movable Typeと 出会う
  16. 16. まだ 「ブログ」という 言葉も 無い頃
  17. 17. 「ウェブログ」 なのか 「ブログ」 なのか
  18. 18. そんな議論が なされていた 時代のこと。
  19. 19. version は確か 2.51 とか 2.52 とか
  20. 20. そしてこの頃の Movable Type には
  21. 21. 日本語版など 存在せず
  22. 22. 日本語化 する為には
  23. 23. 有志による パッチを 適用する必要が ありました。
  24. 24. Japanese Language Pack http://uva.jp/dh/mt/archives/000190.html
  25. 25. daiji hirata
  26. 26. そして 2003年7月
  27. 27. バレーボールの ブログを 始める
  28. 28. 翌年が アテネ五輪
  29. 29. 女子バレーの 復興ムードに乗り
  30. 30. そこそこの PVを 稼ぎ
  31. 31. なんとなく ブログブームに 乗っかった
  32. 32. その年末
  33. 33. その年の ベストblogを 選出する
  34. 34. blog of the yeah! 2003 が開催され、
  35. 35. その スポーツ部門に
  36. 36. 何故か私の ブログが ノミネートされる という事故発生。
  37. 37. のこのこと 会場へ でかけ、
  38. 38. 惜しくも(?) 受賞は 逃すが
  39. 39. ここで 人生を変える 出会いをする
  40. 40. 誰に会ったのか というと
  41. 41. daiji hirata
  42. 42. Japanese Language Packで お世話になって いたので
  43. 43. 挨拶して 名刺交換させて 頂いた
  44. 44. これが 縁で
  45. 45. その約2年半後の
  46. 46. 2006年6月
  47. 47. シックス・アパートへ 転職
  48. 48. Movable Typeが 縁で 転職したので
  49. 49. 当然
  50. 50. Movable Type を 担当することに なる
  51. 51. と 思うじゃ ないですか
  52. 52. 履歴書にも
  53. 53. 「MovableType やりたい」
  54. 54. って 書きましたし。
  55. 55. ところが その履歴書を 見た 面接担当者
  56. 56. daiji hirata
  57. 57. 「Movable Type じゃなきゃ だめですか?」
  58. 58. とか 言うんですよ。
  59. 59. 咄嗟に
  60. 60. 「いや かまいません。 なんでも やります!」
  61. 61. って 応えたん ですけど、
  62. 62. 内心、
  63. 63. 「え」
  64. 64. って感じでした。
  65. 65. そんな経緯で、
  66. 66. 2006年~2010年
  67. 67. TypePad (現Lekumo Business Blog) 担当でした。
  68. 68. そして 2011年~2012年
  69. 69. Lekumo キャンペーン ビルダー を担当。
  70. 70. そして 2012年10月
  71. 71. 遂に
  72. 72. 満を持して
  73. 73. Movable Type 担当へ。
  74. 74. 使う側から
  75. 75. 作る側に。
  76. 76. 文句 言う側から
  77. 77. 言われる側に なりました。
  78. 78. しかし 開発担当 エンジニア である前に
  79. 79. 一ユーザーでも あるわけなので、
  80. 80. 自分でも より 使いたく なるような
  81. 81. そんな 魅力的な製品に
  82. 82. 皆さんと一緒に 育てて 行けたらなと 思っております。
  83. 83. 閑話休題
  84. 84. さて本題へ
  85. 85. Movable Type の 長所と言えば 長らく
  86. 86. 静的コンテンツの 生成
  87. 87. と 言われてきました
  88. 88. もちろん、 それは MT6 に おいても 顕在で
  89. 89. それに対する 一つの回答が
  90. 90. 2014年01月15日に リリースされた
  91. 91. 新しい Movable Type Advanced の
  92. 92. サーバー 配信機能です。
  93. 93. MT で生成された 静的コンテンツを 外部のサーバーへ 配信して 公開できる機能
  94. 94. 公開サーバーと アプリケーション サーバーを 分離したり、
  95. 95. その公開サーバーを ロード バランシング したり、
  96. 96. ステージング 環境として 使ったり、
  97. 97. コンテンツの バックアップ元 として 利用したり。
  98. 98. 静的コンテンツ としての長所を 最大活用する 機能が、
  99. 99. サーバー配信 機能なんです。
  100. 100. これがまず、 CMSプラットホーム としての MT6 の 回答の一つ。
  101. 101. そして もう一つの 回答が、
  102. 102. Data API です。
  103. 103. Web を 取り巻く環境は
  104. 104. 日々変化 しています。
  105. 105. ユーザーの 環境は
  106. 106. PC スマートフォン タブレット 携帯電話 etc...
  107. 107. 様々。
  108. 108. これまでは 必死に
  109. 109. それらの環境に 最適な コンテンツを
  110. 110. サーバーサイドで 用意しようと 躍起になっていた
  111. 111. 昨今のトレンド
  112. 112. サーバーサイド では
  113. 113. REST API などで
  114. 114. データを 配信する だけ
  115. 115. コンテンツの 生成は
  116. 116. データを 受け取った
  117. 117. クライアント (Web ブラウザ) 側で
  118. 118. デバイスに 合わせて 構築する
  119. 119. それに対する 回答が
  120. 120. Data API なんです
  121. 121. さて、
  122. 122. 皆さんは
  123. 123. MT4i
  124. 124. って ご存知でしょうか
  125. 125. MT4i を 知ってる人は 挙手 ノシ
  126. 126. 知らない 人の為に ざっくり 説明すると
  127. 127. MT = Movable Type 4 = for i = i-mode
  128. 128. 当時 主流だった i-mode
  129. 129. しかし前述の
  130. 130. Japanese Language Pack http://uva.jp/dh/mt/archives/000190.html
  131. 131. daiji hirata
  132. 132. UTF-8 or EUC-JP を選択する 必要があり
  133. 133. EUC-JPを 選択していた
  134. 134. i-modeは
  135. 135. Shift_JISしか 理解できない
  136. 136. さて どうしよう
  137. 137. 無いなら
  138. 138. 作ってしまえ
  139. 139. で できたのが MT4i でした
  140. 140. なにを しているかというと
  141. 141. MT::Objectで データを取得
  142. 142. 文字コードを Shift_JISに変換
  143. 143. 全角カタカナを 半角カタカナに 変換 (データ量削減)
  144. 144. 指定バイト数で ページネーション
  145. 145. 絵文字の 入出力
  146. 146. なんか それっぽい レイアウトで 出力
  147. 147. コメントも 投稿 できるよ
  148. 148. 適用すると
  149. 149. これが
  150. 150. こんな風に
  151. 151. 結構 色んな方に 使って頂きました
  152. 152. で、
  153. 153. Data API で 何か作ると 考えた時に
  154. 154. まず最初に 思いついたのが
  155. 155. Data API を 使って MT4i を 作り直すこと
  156. 156. 実は過去、
  157. 157. XML-RPC API で チャレンジ したことがあった
  158. 158. しかし XML-RPC API は あくまで 編集用
  159. 159. Entryの Statusが 取れない (公開or下書)
  160. 160. コメントが 投稿できない
  161. 161. など、
  162. 162. 様々な 問題に直面し 断念
  163. 163. でも
  164. 164. Data::APIなら できるよね
  165. 165. できるんじゃ ないかな
  166. 166. ということで 作ってみた
  167. 167. DEMO
  168. 168. AngularJS + Bootstrap で開発
  169. 169. 当初は jQuery Mobile で チャレンジ
  170. 170. 動的コンテンツに 向いてないかも…
  171. 171. そこで なにやら 流行ってるらしい AngularJS
  172. 172. 所謂 Javascript の MVC フレームワーク
  173. 173. 長所は
  174. 174. Model View Controller が分離できて
  175. 175. 比較的 見通しの良い コードが 書けること
  176. 176. かつ
  177. 177. 非エンジニアでも 使える (分かり易い)
  178. 178. と 言われている模様
  179. 179. そして
  180. 180. Data API との 相性も 良い
  181. 181. さて
  182. 182. 開発中に Data API の 問題を 一つ発見
  183. 183. Entries: get で 取って来た body(本文)及び more(続き)に
  184. 184. Text Filter (フォーマット)が 適用されていない
  185. 185. リッチテキストで 書いていれば 問題ないが
  186. 186. MarkDown や 改行を変換、 独自の Filter など 使っていると
  187. 187. Filter 適用前の 素の Text が 帰ってくる
  188. 188. これは困る
  189. 189. こう表示して 欲しいのに
  190. 190. 改行が 無視されちゃう
  191. 191. そこで
  192. 192. callback ですよ
  193. 193. Data API は callback を 使って
  194. 194. カスタマイズが 可能です
  195. 195. post_run_data_api. get_entry にて、
  196. 196. API が値を返す前に Filter を適用する
  197. 197. すると
  198. 198. さて、 どのように 表示されるか。
  199. 199. こうだった 戻り値が
  200. 200. <p>さて、</p> <p>どのように</p> <p>表示されるか。</p>
  201. 201. こうなって 返ってくるように なりました
  202. 202. また、
  203. 203. Entries: get の 返す Object には
  204. 204. next や previous が 無く
  205. 205. Newer や Older の ボタン
  206. 206. これ
  207. 207. が 実装できない
  208. 208. ので、
  209. 209. これも callback を 使用し、
  210. 210. nextId と previousId という field を
  211. 211. Entries: get の 戻り値に 追加しました。
  212. 212. このように Data API は
  213. 213. callback を 駆使して
  214. 214. 様々な用途に 柔軟に対応 できる
  215. 215. 実は、
  216. 216. 独自の Endpoint も 生やせる?
  217. 217. まだ 試してない けど。
  218. 218. ではまとめ。
  219. 219. サーバーサイドで なんでもかんでも コンテンツを生成 するのではなく、
  220. 220. サーバーは データを 返すだけ、
  221. 221. コンテンツの構築は クライアント サイドで、
  222. 222. というのが 今のトレンド というのは 前述の通り。
  223. 223. だからこそ、 AngularJS のような Javascript の  フレームワーク が
  224. 224. 重宝がられて いる。
  225. 225. そんな時代に
  226. 226. Movable Type が
  227. 227. Data API を 実装したのは
  228. 228. まさに時代の 要求であり、
  229. 229. これからの Movable Type の 歴史は
  230. 230. Data API の歴史と なって行くのだ ろうなと、
  231. 231. エンジニアとしても ユーザーとしても ファンとしても、
  232. 232. 感じている 次第です。
  233. 233. そんな Data API で 皆さん、
  234. 234. 是非是非 遊んで みてください。
  235. 235. 作るのは、 なんでも 良いと思います。
  236. 236. 最初は 個人で 欲しいなと 思ったもので。
  237. 237. MT4i も 最初は そうでした。
  238. 238. そうやって 色んな人の 色んな何かが、
  239. 239. たくさん 出てくることを 願っています。
  240. 240. 以上、 ご清聴 ありがとう ございました。
  241. 241. ちなみに さっきの アプリは
  242. 242. MT4i の 焼き直しと 言いつつ
  243. 243. 携帯電話では 動きません。
  244. 244. おしまい

×