「Movable Typeの可能性を広げるアドオン「DynamicMTML」について」 v2 (MTDDC Meetup HOKKAIDO 2013版)

3,371
-1

Published on

2013年10月6日に北海道で行われたMovable Typeセミナーで使用した資料です。

-----
MTDDC Meetup HOKKAIDO 2013
http://mtddc2013.mt-ezo.net/

-----
フォローアップ記事(書きました!)
http://riatw.me/blog/dynamicmtml_point.html

Published in: Technology

「Movable Typeの可能性を広げるアドオン「DynamicMTML」について」 v2 (MTDDC Meetup HOKKAIDO 2013版)

  1. 1. Movable Typeの可能性を広げるアドオン DynamicMTMLについて 1
  2. 2. • 札幌生まれ/愛知県在住 28歳 • Web制作会社のテクニカル・ディレクター • Webシステムの提案と導入サポート MTのテンプレート設計・カスタマイズ • MTとサーバ・インフラなどが好きで プログラムが苦手 鈴木健太郎(@riatw)
  3. 3. 念願の「初」北海道です! やっとこれましたヽ(=́▽`=)ノ
  4. 4. • はじめてMTを使ったのはMT4.1のころ • 仕事で使い始めたのがきっかけ • 5年間で50以上の案件に導入 • 仕事もプライベートもMTが大好き MTDDC Meetup Nagoya 2014の企画をしています! 1月18日(土)ウィンクあいち 1103号室(予定) MTは今年で5年目
  5. 5. • プログラムが書けなくてもシステムが作れること • 身の丈以上のことができること MTを好きになった理由 これなら自分にもできるかも! と思いました
  6. 6. そんな自分がさらにMTを好きになった きっかけ、それが…
  7. 7. DynamicMTML
  8. 8. このテーマを選んだ理由
  9. 9. • プログラムは苦手だけどMTなら分かるWebデザイナー • PHPは得意だけどデザインが苦手なWebプログラマー • Webアプリ・サービスに興味のあるディレクター このような方々にDynamicMTMLの 面白さと便利さを知ってもらうこと
  10. 10. • DynamicMTMLとは? • DynamicMTMLを使う理由 • 特に便利な標準機能 7つ • DynamicMTMLで作れるサイト • まとめ アジェンダ
  11. 11. DynamicMTMLとは?
  12. 12. • アルファサード社が開発したMT向けのアドオン • 動的ページ生成機能を大幅強化! • PHPでDynamicMTML用のプラグインが作れる 概要 MTユーザとPHPユーザが仲良くなれるプラグイン ざっくり言ってしまえば、DynamicMTMLは
  13. 13. • Movable Type v5.04以降 • PHPによるダイナミックパブリッシングが 動作する環境 • mod_rewriteが有効で.htaccessによる設定が可能な環境 動作環境
  14. 14. • PowerCMS/DynamicMTML · GitHub https://github.com/PowerCMS/DynamicMTML • DynamicMTML 導入のポイント http://riatw.me/blog/dynamicmtml_point.html • はじめてのDynamicMTML (かたつむりくんのWWW) http://www.tinybeans.net/blog/movable-type/dynamicmtml/ 参考情報
  15. 15. DynamicMTMLを使う理由
  16. 16. それは制作会社が システム案件に強くなるため
  17. 17. なぜ強くなる必要があるのか?
  18. 18. それはクライアントから 求められるようになってきたから
  19. 19. 制作会社にもシステム案件への 対応力が求められている
  20. 20. • 完全な静的サイトは殆ど無くなりつつある • CMS、お問い合わせフォームなどは完全にマスト • 顧客情報管理、他API連動、既存システムとの連動… など…システム関係の要件は増加の一途 要件の多様化
  21. 21. • Webサイトとシステムが密に絡むようになってきた • 今まで以上のスピード感が求められるようになった • 案件に対するコスト意識が厳しくなってきた →デザインは制作会社、システムはシステム会社と  発注を分ける余裕が無くなってきた • Webサイトがあることが当たり前になり、より一層 成果が求められるように、結果に厳しくなってきた 背景
  22. 22. • 簡単なシステムであれば制作会社が実装する • 難しいシステムでも見た目と簡単なシステム部分は 制作会社だけでメンテナンスできるようにする 対応策 「メンテができる」って大事
  23. 23. • HTMLタグとPHPコードが混在したソースコード • 恐る恐る触る →思ったようにできない →知らない間にバグが生まれる →何これ暗号なの、いみふ(ry… こんなことはありませんか? (́・ω:;.:... デザイナー編
  24. 24. • システムを考慮していないデザインとコーディング • 恐る恐るシステムを組み込む →思ったようにできない →デザインが再現できない →どうやっても再現できないわ、こんなの(ry こんなことはありませんか? (́・ω:;.:... エンジニア編
  25. 25. • DynamicMTMLなら、ロジックはPHP、見た目はMTタグと 完全に分離できる • デザイナーはMTタグさえ分かれば、見た目の調整や簡単な 機能追加はデザイナーだけでできる • プログラマーはデザインが分からなくてもPHPが 書ければいい(MTの事情が少し分かると嬉しい) 解決策の一案としてのDynamicMTML ヽ(=́▽`=)ノ
  26. 26. 両者の強い所を活かすことで メンテナンス性と再利用性の高い サイトをつくることができる
  27. 27. DynamicMTMLはこのような 変化に対応する制作者の強い味方
  28. 28. デザインとプログラムが完全に 分離することでお互い保守が楽に!
  29. 29. • 提案→デザイン→システムがワンストップが提供できる • デザインの修正が自社で完結することから、サポートの スピードが向上する→信頼を獲得しやすい • できることの幅が広がることで、デザイン・企画だけの 提案よりも大規模の案件に挑戦できる 制作会社が得られるメリット
  30. 30. • 従来の開発案件に加えて新しい案件を開拓できる • デザインが得意な制作会社とコネクションが広がる • 企画やデザインを気にせず、得意なシステムに注力する ことができる システム会社が得られるメリット
  31. 31. 特に便利な標準機能 7つ
  32. 32. • ブログ記事の詳細検索 • ユーザエージェントによる分岐 • ログイン状況による分岐 • ユーザ権限に応じた分岐 • 静的ファイルの動的ビルド • PHP API • コールバック
  33. 33. • 条件に応じてブログ記事を出力できる • MTEntriesに代わるタグとして使用できる • タイトル・カテゴリID・投稿日などの条件が指定できる ブログ記事の詳細検索
  34. 34. サンプル //タイトルに MT が含まれている記事を表示する場合 //targetにはMTの標準のフィールドが指定できる <mt:searchentries target="title" query="MT" lastn="10"> <li><a href="<$mt:entrypermalink$>"><$mt:entrytitle escape="html"$></a></li> </mt:searchentries> 34
  35. 35. • ユーザエージェント(端末情報)を取得できる • 端末の種類・キャリアごとに分岐できる • 同一URLでPC・スマフォ対応のサイトを作成できる ユーザーエージェントによる分岐
  36. 36. サンプル <mt:IfUserAgent wants= SmartPhone > <$mt:include module="スマートフォン向けの内容"$> <mt:else> <$mt:include module="PC向けの内容"$> </mt:IfUserAgent> 36
  37. 37. • ユーザのログイン状況によって表示を変えることができる • 会員限定サイトやユーザのマイページを作ることができる • 公開サイトに管理画面へのリンクを表示することができる ログイン状況による分岐
  38. 38. サンプル <p>○○の価格</p> <mt:IfLogin> //ログインしている場合 <p>19,800円がなんと、<span>16,800円!</span></p> <mt:else> <p>19,800円</p> </mt:If> 38
  39. 39. • MTにログイン中のユーザ権限による分岐ができる • ログイン状況による分岐と組み合わせることで、 一部の管理者だけが見える情報などの配信もできる ユーザの権限に応じた分岐
  40. 40. • MT管理外のファイル(普通のHTMLなど)に直接MTタグを 書くことができる • 1ファイルの中で静的に出力されるところと動的に出力される ところを分けることができる 静的ファイルの動的ビルド
  41. 41. サンプル <html> <body> <!-- 以下の内容は通常通りに再構築される --> <mt:blogname> <!-- 以下の内容は表示時に再構築される --> <MTDynamicMTML> <mt:date> <!-- 現在の日付を表示 --> </MTDynamicMTML> </body> </html> 41
  42. 42. • MTの各種機能に対してPHPからアクセスできる • MTのデータベースにPHPからアクセスすることができる • プラグインを追加すれば、他のシステムのデータベースに アクセスをして、MTタグで出力することができる (WordPressのデータをMTタグで出力するなど) PHP API
  43. 43. • ページを表示する前・後などにPHPの処理を追加できる 例1)フォーム送信されたデータの検証 例2)MTのユーザ情報を使用したBasic認証 例3)MTのデータベースに接続できなかった際の例外処理 コールバック
  44. 44. DynamicMTMLで作れるサイト
  45. 45. • イベント集客サイト • レシピ・口コミ投稿サイト • 会員限定情報サイト • 伝票管理システム • 見積作成システム • その他簡単なWebアプリなど DynamicMTML向きのサイト
  46. 46. • REST APIのみでサービスを提供するサイト • データベースにおけるデータの持ち方が特殊なサイト • 動作スピードが最優先なサイト →ソーシャルゲームや大規模なWebカタログなど DynamicMTMLが不向きなサイト
  47. 47. まとめ
  48. 48. • DynamicMTMLは制作会社でもシステム案件の 対応力を上げることのできるツール • 従来の知識を生かしたまま、よりリッチなサイトを 簡単に作ること・保守することができる • DynamicMTMLを使えば新しい協業の形が見えてくる コラボすれば美味しさが増すツール! 何より楽しいツールなので一度試してみてください!
  49. 49. 最後に少しだけ
  50. 50. • DynamicMTMLを使えば、動的生成向けのプラグインを PHPで書くことができます →MT案件は豊富にあります。協業の道もご検討ください • DynamicMTML本体はGithubで管理されており、 いつでもPullRequestを受け付けています →MTユーザにはプログラマーが不足しています  PHPによるプラグイン作成やDynamicMTMLの  バグフィックスにご協力をお願いします! PHPプログラマの方へお願い
  51. 51. @riatw on Twitter http://riatw.me/ Thank you so much! 51

×