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.
リモートワークで加速する!
Movable Type によるサイト構築
photo by Zengame https://www.flickr.com/photos/zengame/19947750606
bit part / BUN / h2h...
ABOUT US
mersy tinybeans
業務内容
photo by PRONana B Agyei https://www.flickr.com/photos/nanagyei/5641647904
! MovableType サイトの構築
! プラグイン開発:MTAppjQuery ...
capture http://www.bit-part.net/products/mtappjquery/
中でも得意分野
! MovableType 関連全般
! プロジェクト進行管理
bit part の二人は苦手?
photo by ぱくたそ https://www.pakutaso.com/20150539128post-5482.html
MovableType構築 やディレクション周りは得意だが
HTML・CSSのコ...
photo by Nicola Barnett https://www.flickr.com/photos/n_corboy/4921290518
作業を分割し、
各分野の専門パートナーとともに仕事
bit partner
(́ ºムº `)
h2ham
photo by Aaron Landry https://www.flickr.com/photos/s4xton/2425718415
bit part の HTML・CSS・JavaScript の制作や
技術面の確認を含めたフロント側業務...
BUN
BUN
photo by Nicola Barnett https://www.flickr.com/photos/n_corboy/4921290518
Movable Type でのサイト構築担当
bit part チームの制作の流れ
hei_a
mersy
tinybeans
BUNh2ham
#
コーディング指示 MT構築指示
コーディングデータ
役割と流れ
#
hei_a
mersy
tinybeans
BUNh2ham
#
コーディング指示 MT構築指示
コーディングデータ
役割と流れ
#
" Direction : bit part
$ HTML / CSS : (́ ºムº `) & CodeD...
だがしかし!
photo by Kiks Balayon https://www.flickr.com/photos/kiksbalayon/2113369517
photo by @bloodysheep https://twitter.com/ponoyuku/status/362415739514273792
一人は 北海道
このへん
一人は 秋田
遠いな…
photo by Pulseman https://www.flickr.com/photos/pulseman/577082958
ええ、遠いです
リモートワーク!!
photo by デザイン日本地図のフリー画像 http://www.abysse.co.jp/japan/d-japanmap/map07-1.html
なぜリモートで作業ができるか
photo by ぱくたそ https://www.pakutaso.com/20151016292web-9.html
分業による進行
分業?
実は今回の最大のポイント
% 分業が最善というわけではないが
分業できるようにしてあることが超重要
% 負荷分散、複数同時作業、リモートでも

問題なく進行可能
作業を依頼するだけ
photo by ぱくたそ https://www.pakutaso.com/20140927268post-4614.html
分業ができる体制
↓
作業を効率的に回せる体制
大事なことなのでもう一度
分業できるようにしてあることが
超重要
分業のポイント
分業のポイント
! ドキュメント用意と整理
" 説明時間の省略と忘れた時やチェック時の確認に
! 仕様の明確化
" 作業者を迷わせない
! 曖昧仕様を先に解決しておいての実装
" 手戻り工数の削減
やりがちな問題
やりがちな問題
# 説明のないワイヤーやデザインで作業指示
# 感覚値「もっと大きく・いい感じに など」
もっと大きく?
$ tinybeans
画像を大きくしてください
もっと大きく?
$ tinybeans
なんか変わった?
もっと大きく?
$ tinybeans
大きすぎない?
工数増
% 手戻り工数増:作業後の「やっぱりこうしてください」
% 確認工数増:動きは?リンク先は?レスポンシブ仕様は?
問題ない?
? 作業者が仕様を決めながらすすめるスタイル?
? 決めたり提案しながらすすめることが仕事?
確認による手戻り = コスト
提案しながらすすめるのはコストが増える原因
コスト増
# 「実装時の適当にいいようにやってください」
" 感覚や求めていることは人により違う
" 感覚値は実は地味に工数増 = 金額増
分業している作業者間での
やり取りはできるだけ少なく
NGではない
! 感覚値がダメなわけではない
! しかしデザインでの確認・決めるほうが
  実装中の確認・実装後のチェック参考にできる
' HTMLに直接変更を反映?
  " 確認時の参考資料(デザインなど)と差分が発生
リモートでのプロジェクトは失敗が多い?
capture http://www.slideshare.net/takayukiito739/ss-55141697
そんなことになったことがない bit part チーム!
? ? ?
? ? ?
bit partner が失敗しないのは
! 仕事遂行の意識が共有できている
" リモート = 自由な時間で仕事 ではあるが
ゆっくりやってよいというわけではない
" ディレクターが、いつまでにできるかの確認 と
スケジュールまでに完了させる作...
リモートワークのための利用ツール
capture http://www.slideshare.net/takayukiito739/ss-55141697
Slack:連絡や質問、情報共有などは全てここ
案件ごとのチャンネル
チーム内は Slack のみ
capture http://www.slideshare.net/takayukiito739/ss-55141697
Redmine:作業・確認チケット
ドキュメントをWikiに
作業はチケットに
capture http://www.slideshare.net/takayukiito739/ss-55141697
Redmine:作業・確認チケット
ドキュメントをWikiに
作業はチケットにその他様々なツールに対応可能
Skype /...
各作業における連携のポイント
ディレクション
いかにスムーズにその後の作業が
スムーズに行くかの最大のポイント
段取りと指示
! 段取りが良くないと作業もスムーズにいかない
! 指示のタイミングや量、仕方なども重要
! 不明な点は全て確認するようにする
" 技術的に確認が必要な物は早めに共有したうえで、
そのまま対応するか調整提案するなどを検討する
" 危険の芽は早めに摘む
! 期日をなるべく指定する
" 確認も同様、いつまで回答もらえるのかなど
その他の...
! スコープ内容のタスクは全て洗い出してTodo化
" なるべくタスクの粒度は細かくする
! 専門的に決める部分は各担当に任せる
" 例:マークアップの要素、MTの変数化など
! 情報は全て共有する
! ボール(確認事項やTodo)は持たないで...
! なるべく自動化・スニペットの活用など
! 毎回使うようなドキュメントは共通の場所に
" 各種ガイドラインなど
その他のポイント
作業者への説明はドキュメントや文章前提
ドキュメントや文章前提
! MTGなどは出来る限り減らす
(必要な時以外はしない)
! ドキュメントやプロジェクト管理ツールの活用
説明時間の省略と忘れた時やチェック時の確認に
スケジュールの確認重要
スケジュールの確認
! いつからいつまでの作業か
! 作業者はスケジュールに問題がないか
! 優先度指定
進行管理
進行管理
! 気配り
! 段取り
! 確認は細々(しつこくということではなく)
テクニカルディレクション
テクニカルディレクション
! 希望されているスケジュールや技術と、
想定されるスケジュール・技術に
乖離がないかどうか
! ディレクターと共有して可否判断
ギリギリ・無理なスケジュールで組まない
静的HTML実装フロー
なぜ 静的HTMLを別途分けて制作を進めるか
HTML の制作を分離
! MTのテーマの実装しながらコーディングは
すぐにプレビューできないため時間のロス
! どんな案件でも対応可
MT以外の案件でも分業でファイルを渡せる
! システム・CMSのセットアップや設定と
同時進行可能
HTML の工夫
! モジュール前提(システム化前提)
大きなHTML構造に依存しない = 疎結合
! CSSで対応できるものはCSSで対応
:first-child や :nth-child の利用など
! システムやプラグインで、
決まったH...
コーディング時に実践していること
capture https://git-scm.com/
Gitの利用(リビジョン管理ツールの利用)
capture http://gulpjs.com/
タスクランナーの活用
capture http://www.metalsmith.io/
静的 HTML ジェネレータの利用
capture http://www.browsersync.io/
サーバー設定を代替、準備時間の短縮
capture http://www.browsersync.io/
FTPアップ & 確認を前提にしない
静的 HTML はローカル確認前提
先祖返り・バッティング 工数増
Git のリモートリポジトリに push
すると、確認環境に自動で反映
Movable Type の実装フロー
大きく3つの流れ
大きく3つの流れ
! ウェブサイト / ブログの設定
! 管理画面のカスタマイズ
! テンプレートのカスタマイズ
photo by PRONana B Agyei https://www.flickr.com/photos/nanagyei/5641647904
#</>
#{css}
#{JS}
$
管理画面のカスタマイズまでは、
静的HTML実装フローと...
1.ウェブサイト / ブログの設定
ウェブサイト / ブログの設定
$ ウェブサイト / ブログの作成
$ カスタムフィールドの追加 / 設定
$ 不要テンプレート / ウィジェットの削除
$ 空テンプレートの追加
$ テーマのエクスポート
" これ以降、入力作業と同時並行可能
設計書(カスタムフィールド)
* 写真
* basename
* type
* object
* 写真のキャプション
* basename
* type
* object
* 写真の説明文
* basename
* type
* object
...
設計書(テンプレート)
### インデックステンプレート
* トップページ
* path
* identifier
* 公開
### アーカイブテンプレート
* カテゴリ
* type
* mapping
* identifier
* 公開
* 記...
2.管理画面のカスタマイズ
管理画面のカスタマイズ
$ ラベルの変更
$ 入力項目のソート
$ 増減可能な表組みによる入力欄
($.MTAppJSONTable)
$ DataAPI を利用したファイルアップロード
($.MTAppMultiFileUpload)
$ 異...
MTAppjQuery 利用時のポイント
$ メインウェブサイトのインデックステンプレート化
" プラグインの user.js を上書きし、一元管理
$ 分岐用のブログ ID は config モジュールにセット
" 本番 / 開発環境で ID ...
3.テンプレートのカスタマイズ
テンプレートのカスタマイズ
<mt:Ignore>==================================================
Template Name : トップページ
Template Type : index /...
config モジュール
$ 変数の定義
" ウェブサイト / ブログ ID
" サイトの共通変数(description / keywords など)
" 置換のパターン
$ SetVarTemplate の定義
" SNS ボタン / Pag...
config モジュール のサンプル
<mt:Ignore>== blogID ==</mt:Ignore>
<mt:SetVars>
blogid_website =1
blogid_topics =2
</mt:SetVars>
<mt:Ig...
config モジュール(ブログ専用)
$ SetVarTemplate の定義
(一覧用モジュールなど、ブログ内で複数回利用するもの)
テンプレート固有の変数
<!-- meta 関連 -->
<mt:SetVars>
meta_title =<mt:Var name="base_sitename" />
meta_description =<mt:Var name="base...
HTML ソースの出力
<mt:Unless name="compress" regex_replace="/^s*n/gm",""
trim="1">
<mt:Unless name="compress"
regex_replace="$co...
共通モジュールの例(html_head)
<head>
<meta charset=“UTF-8">
<!—- meta 関連 —->
<title><mt:Var name="meta_title" /></title>
<meta name...
とあるウェブサイトのテーマ
├── templates/
│ ├── comment_listing.mtml
│ ├── comment_preview.mtml
│ ├── comment_response.mtml
│ ├── dynam...
あとは、テンプレートごとに出力用のタグを記述
静的HTML実装フローとの連携
実装フローの連携
! HTML のコーディング段階で
テンプレート的にファイルを用意
$ 静的HTMLジェネレータの導入が
MT テンプレート実装の効率化に繋がる
" 共通部分のインクルード
" 条件分岐
" ループ処理
静的 HTML ジェネレータの利用
capture http://www.metalsmith.io/
静的 HTML ジェネレータの利用
capture http://paularmstrong.github.io/swig/
静的 HTML ジェネレータの利用
とあるコンテンツのHTMLテンプレート
<body{% if page == 'top' %}
class="page--top"{% endif %}>
{% include 'header.html' %}
<div class="layo...
とあるコンテンツのMTMLテンプレート
<body<mt:Unless name="page_class"> class="<mt:Var
name="page_class" />"</mt:Unless>>
<mt:Include modul...
ページ単位の変化は diff ツールで確認
SublimeText のプラグインを利用し Kaleidoscope で開く
FileDiffs Plugin
Package Control でインストール後、2つの設定ファイルを修正
エディタと diff ツールの連携例
[
// Subli...
リモートワークをするためのまとめ
リモートワークをするためのまとめ
! 不明点は早めに確認
! 分業できる体制用意・情報整理
! 文字ベースのやりとりで、
いかに認識の違いをなくせるか
! 同時並行で作業できるよう、
タスクの粒度と優先順位が大事
! 担当者に関わらず、品質を担...
- https://www.flickr.com/photos/zengame/19947750606
- https://www.pakutaso.com/20150539128post-5482.html
- https://www.flick...
MTDDC Meetup TOKYO 2015 bit-part
Upcoming SlideShare
Loading in …5
×

MTDDC Meetup TOKYO 2015 bit-part

1,663 views

Published on

リモートワークで加速する! Movable Type によるサイト構築

Published in: Internet
  • Be the first to comment

MTDDC Meetup TOKYO 2015 bit-part

  1. 1. リモートワークで加速する! Movable Type によるサイト構築 photo by Zengame https://www.flickr.com/photos/zengame/19947750606 bit part / BUN / h2ham
  2. 2. ABOUT US
  3. 3. mersy tinybeans
  4. 4. 業務内容 photo by PRONana B Agyei https://www.flickr.com/photos/nanagyei/5641647904 ! MovableType サイトの構築 ! プラグイン開発:MTAppjQuery など ! HTML・CSS・JavaScriptのコーディング業務 " ディレクション・プロジェクトマネジメント業務 などなど
  5. 5. capture http://www.bit-part.net/products/mtappjquery/
  6. 6. 中でも得意分野 ! MovableType 関連全般 ! プロジェクト進行管理
  7. 7. bit part の二人は苦手? photo by ぱくたそ https://www.pakutaso.com/20150539128post-5482.html MovableType構築 やディレクション周りは得意だが HTML・CSSのコーディングはやや不得意
  8. 8. photo by Nicola Barnett https://www.flickr.com/photos/n_corboy/4921290518 作業を分割し、 各分野の専門パートナーとともに仕事
  9. 9. bit partner
  10. 10. (́ ºムº `) h2ham
  11. 11. photo by Aaron Landry https://www.flickr.com/photos/s4xton/2425718415 bit part の HTML・CSS・JavaScript の制作や 技術面の確認を含めたフロント側業務を主に担当
  12. 12. BUN BUN
  13. 13. photo by Nicola Barnett https://www.flickr.com/photos/n_corboy/4921290518 Movable Type でのサイト構築担当
  14. 14. bit part チームの制作の流れ
  15. 15. hei_a mersy tinybeans BUNh2ham # コーディング指示 MT構築指示 コーディングデータ 役割と流れ #
  16. 16. hei_a mersy tinybeans BUNh2ham # コーディング指示 MT構築指示 コーディングデータ 役割と流れ # " Direction : bit part $ HTML / CSS : (́ ºムº `) & CodeDesign $ JavaScript : (́ ºムº `) & bit part Movable Type : BUN & bit part &
  17. 17. だがしかし! photo by Kiks Balayon https://www.flickr.com/photos/kiksbalayon/2113369517
  18. 18. photo by @bloodysheep https://twitter.com/ponoyuku/status/362415739514273792 一人は 北海道 このへん
  19. 19. 一人は 秋田
  20. 20. 遠いな… photo by Pulseman https://www.flickr.com/photos/pulseman/577082958 ええ、遠いです
  21. 21. リモートワーク!! photo by デザイン日本地図のフリー画像 http://www.abysse.co.jp/japan/d-japanmap/map07-1.html
  22. 22. なぜリモートで作業ができるか photo by ぱくたそ https://www.pakutaso.com/20151016292web-9.html
  23. 23. 分業による進行
  24. 24. 分業? 実は今回の最大のポイント
  25. 25. % 分業が最善というわけではないが 分業できるようにしてあることが超重要 % 負荷分散、複数同時作業、リモートでも
 問題なく進行可能
  26. 26. 作業を依頼するだけ photo by ぱくたそ https://www.pakutaso.com/20140927268post-4614.html
  27. 27. 分業ができる体制 ↓ 作業を効率的に回せる体制
  28. 28. 大事なことなのでもう一度 分業できるようにしてあることが 超重要
  29. 29. 分業のポイント
  30. 30. 分業のポイント ! ドキュメント用意と整理 " 説明時間の省略と忘れた時やチェック時の確認に ! 仕様の明確化 " 作業者を迷わせない ! 曖昧仕様を先に解決しておいての実装 " 手戻り工数の削減
  31. 31. やりがちな問題
  32. 32. やりがちな問題 # 説明のないワイヤーやデザインで作業指示 # 感覚値「もっと大きく・いい感じに など」
  33. 33. もっと大きく? $ tinybeans 画像を大きくしてください
  34. 34. もっと大きく? $ tinybeans なんか変わった?
  35. 35. もっと大きく? $ tinybeans 大きすぎない?
  36. 36. 工数増 % 手戻り工数増:作業後の「やっぱりこうしてください」 % 確認工数増:動きは?リンク先は?レスポンシブ仕様は?
  37. 37. 問題ない? ? 作業者が仕様を決めながらすすめるスタイル? ? 決めたり提案しながらすすめることが仕事?
  38. 38. 確認による手戻り = コスト 提案しながらすすめるのはコストが増える原因
  39. 39. コスト増 # 「実装時の適当にいいようにやってください」 " 感覚や求めていることは人により違う " 感覚値は実は地味に工数増 = 金額増
  40. 40. 分業している作業者間での やり取りはできるだけ少なく
  41. 41. NGではない ! 感覚値がダメなわけではない ! しかしデザインでの確認・決めるほうが   実装中の確認・実装後のチェック参考にできる ' HTMLに直接変更を反映?   " 確認時の参考資料(デザインなど)と差分が発生
  42. 42. リモートでのプロジェクトは失敗が多い?
  43. 43. capture http://www.slideshare.net/takayukiito739/ss-55141697
  44. 44. そんなことになったことがない bit part チーム! ? ? ? ? ? ?
  45. 45. bit partner が失敗しないのは ! 仕事遂行の意識が共有できている " リモート = 自由な時間で仕事 ではあるが ゆっくりやってよいというわけではない " ディレクターが、いつまでにできるかの確認 と スケジュールまでに完了させる作業者の意識 " 無理のあるスケジュールになっていないか? 想像との乖離がないか要確認
  46. 46. リモートワークのための利用ツール
  47. 47. capture http://www.slideshare.net/takayukiito739/ss-55141697 Slack:連絡や質問、情報共有などは全てここ 案件ごとのチャンネル チーム内は Slack のみ
  48. 48. capture http://www.slideshare.net/takayukiito739/ss-55141697 Redmine:作業・確認チケット ドキュメントをWikiに 作業はチケットに
  49. 49. capture http://www.slideshare.net/takayukiito739/ss-55141697 Redmine:作業・確認チケット ドキュメントをWikiに 作業はチケットにその他様々なツールに対応可能 Skype / Backlog / Facebook / Basecamp など
  50. 50. 各作業における連携のポイント
  51. 51. ディレクション
  52. 52. いかにスムーズにその後の作業が スムーズに行くかの最大のポイント
  53. 53. 段取りと指示 ! 段取りが良くないと作業もスムーズにいかない ! 指示のタイミングや量、仕方なども重要
  54. 54. ! 不明な点は全て確認するようにする " 技術的に確認が必要な物は早めに共有したうえで、 そのまま対応するか調整提案するなどを検討する " 危険の芽は早めに摘む ! 期日をなるべく指定する " 確認も同様、いつまで回答もらえるのかなど その他のポイント
  55. 55. ! スコープ内容のタスクは全て洗い出してTodo化 " なるべくタスクの粒度は細かくする ! 専門的に決める部分は各担当に任せる " 例:マークアップの要素、MTの変数化など ! 情報は全て共有する ! ボール(確認事項やTodo)は持たないですぐ投げる ! わかりやすく伝える " 意図が伝わらないのはディレクターのバグ その他のポイント
  56. 56. ! なるべく自動化・スニペットの活用など ! 毎回使うようなドキュメントは共通の場所に " 各種ガイドラインなど その他のポイント
  57. 57. 作業者への説明はドキュメントや文章前提
  58. 58. ドキュメントや文章前提 ! MTGなどは出来る限り減らす (必要な時以外はしない) ! ドキュメントやプロジェクト管理ツールの活用
  59. 59. 説明時間の省略と忘れた時やチェック時の確認に
  60. 60. スケジュールの確認重要
  61. 61. スケジュールの確認 ! いつからいつまでの作業か ! 作業者はスケジュールに問題がないか ! 優先度指定
  62. 62. 進行管理
  63. 63. 進行管理 ! 気配り ! 段取り ! 確認は細々(しつこくということではなく)
  64. 64. テクニカルディレクション
  65. 65. テクニカルディレクション ! 希望されているスケジュールや技術と、 想定されるスケジュール・技術に 乖離がないかどうか ! ディレクターと共有して可否判断 ギリギリ・無理なスケジュールで組まない
  66. 66. 静的HTML実装フロー
  67. 67. なぜ 静的HTMLを別途分けて制作を進めるか
  68. 68. HTML の制作を分離 ! MTのテーマの実装しながらコーディングは すぐにプレビューできないため時間のロス ! どんな案件でも対応可 MT以外の案件でも分業でファイルを渡せる ! システム・CMSのセットアップや設定と 同時進行可能
  69. 69. HTML の工夫 ! モジュール前提(システム化前提) 大きなHTML構造に依存しない = 疎結合 ! CSSで対応できるものはCSSで対応 :first-child や :nth-child の利用など ! システムやプラグインで、 決まったHTMLが出力される箇所は、 それに合わせてマークアップ & スタイル " 例:ページャー、wysiwyg
  70. 70. コーディング時に実践していること
  71. 71. capture https://git-scm.com/ Gitの利用(リビジョン管理ツールの利用)
  72. 72. capture http://gulpjs.com/ タスクランナーの活用
  73. 73. capture http://www.metalsmith.io/ 静的 HTML ジェネレータの利用
  74. 74. capture http://www.browsersync.io/ サーバー設定を代替、準備時間の短縮
  75. 75. capture http://www.browsersync.io/ FTPアップ & 確認を前提にしない 静的 HTML はローカル確認前提 先祖返り・バッティング 工数増 Git のリモートリポジトリに push すると、確認環境に自動で反映
  76. 76. Movable Type の実装フロー
  77. 77. 大きく3つの流れ
  78. 78. 大きく3つの流れ ! ウェブサイト / ブログの設定 ! 管理画面のカスタマイズ ! テンプレートのカスタマイズ
  79. 79. photo by PRONana B Agyei https://www.flickr.com/photos/nanagyei/5641647904 #</> #{css} #{JS} $ 管理画面のカスタマイズまでは、 静的HTML実装フローと並行作業 ! できることから先に進めて おけるのも、分業化の メリット ! カスタムフィールドなどの 構成を事前に把握でき、 テンプレート実装時点で 過不足に気づきやすい
  80. 80. 1.ウェブサイト / ブログの設定
  81. 81. ウェブサイト / ブログの設定 $ ウェブサイト / ブログの作成 $ カスタムフィールドの追加 / 設定 $ 不要テンプレート / ウィジェットの削除 $ 空テンプレートの追加 $ テーマのエクスポート " これ以降、入力作業と同時並行可能
  82. 82. 設計書(カスタムフィールド) * 写真 * basename * type * object * 写真のキャプション * basename * type * object * 写真の説明文 * basename * type * object : image_file : 画像 : 記事 : image_caption : 1行テキスト : 記事 : image_description : 複数行テキスト : 記事 " テンプレート実装時 MT タグ名の参照が容易に
  83. 83. 設計書(テンプレート) ### インデックステンプレート * トップページ * path * identifier * 公開 ### アーカイブテンプレート * カテゴリ * type * mapping * identifier * 公開 * 記事詳細 * type * mapping * identifier * 公開 : index.html : index-top : スタティック : カテゴリアーカイブ : /%c/index.html : archive-category : スタティック : ブログ記事 : /%c/%b/index.html : archive-entry : スタティック " あらかじめ識別子を 決めておくため、編集対象の ローカルファイルを探しやすい
  84. 84. 2.管理画面のカスタマイズ
  85. 85. 管理画面のカスタマイズ $ ラベルの変更 $ 入力項目のソート $ 増減可能な表組みによる入力欄 ($.MTAppJSONTable) $ DataAPI を利用したファイルアップロード ($.MTAppMultiFileUpload) $ 異なるブログでの記事の関連付け ($.MTAppListing) " MTAppjQuery で必要に応じたカスタマイズ
  86. 86. MTAppjQuery 利用時のポイント $ メインウェブサイトのインデックステンプレート化 " プラグインの user.js を上書きし、一元管理 $ 分岐用のブログ ID は config モジュールにセット " 本番 / 開発環境で ID が異なる場合も影響を受けない $ 複数人で作業する場合は、担当ごとにモジュール化 " 管理画面で直接更新する際、ロールバックを回避
  87. 87. 3.テンプレートのカスタマイズ
  88. 88. テンプレートのカスタマイズ <mt:Ignore>================================================== Template Name : トップページ Template Type : index / website Current Site : ウェブサイト名 Required Vars : Template Note : ==================================================</mt:Ignore> <mt:Include module="config" blog_id="1" /> <mt:Ignore>------------------------------- テンプレート固有の変数 -------------------------------</mt:Ignore> <mt:Ignore>------------------------------- HTML ソースの出力 -------------------------------</mt:Ignore>
  89. 89. config モジュール $ 変数の定義 " ウェブサイト / ブログ ID " サイトの共通変数(description / keywords など) " 置換のパターン $ SetVarTemplate の定義 " SNS ボタン / Pager などサイト共通のもの メインウェブサイトに作成
  90. 90. config モジュール のサンプル <mt:Ignore>== blogID ==</mt:Ignore> <mt:SetVars> blogid_website =1 blogid_topics =2 </mt:SetVars> <mt:Ignore>== 共通変数 ==</mt:Ignore> <mt:SetVars> base_keywords = サイト共通のキーワード base_description = サイト共通の説明文 base_sitedomain = ドメイン base_sitename = サイト名 <mt:SetVars> <mt:Ignore>== 置換のパターン ==</mt:Ignore> <mt:SetVarBlock name="compress_pattern">/http:// <mt:WebsiteHost />/g</mt:SetVarBlock> <mt:SetVarBlock name="replace_blank"></mt:SetVarBlock> <mt:SetVarBlock name="replace_sitedomain">http://<mt:Var name="base_sitedomain" /></mt:SetVarBlock>
  91. 91. config モジュール(ブログ専用) $ SetVarTemplate の定義 (一覧用モジュールなど、ブログ内で複数回利用するもの)
  92. 92. テンプレート固有の変数 <!-- meta 関連 --> <mt:SetVars> meta_title =<mt:Var name="base_sitename" /> meta_description =<mt:Var name="base_description" /> meta_keywords =<mt:Var name="base_keywords" /> </mt:SetVars> <!-- head 要素に追加する CSS --> <mt:SetVarBlock name="html_head_css"></mt:SetVarBlock> <!-- head 要素に追加する JS --> <mt:SetVarBlock name="html_head_script"></mt:SetVarBlock> <!-- /body 直前に追加する JS --> <mt:SetVarBlock name="html_foot_script"></mt:SetVarBlock> <!-- トピックパス --> <mt:SetVarBlock name="topic_path"></mt:SetVarBlock> 共通ヘッダなどのモジュールで上書きしたいものだけ定義
  93. 93. HTML ソースの出力 <mt:Unless name="compress" regex_replace="/^s*n/gm","" trim="1"> <mt:Unless name="compress" regex_replace="$compress_pattern","$replace_blank"> <!-- body 開始タグまで --> <mt:Include module="html_head" blog_id="$blogid_website" /> <!-- 共通ヘッダ --> <mt:Include module="header" blog_id="$blogid_website" /> (中略:テンプレートごとの処理) <!-- 共通フッタ --> <mt:Include module="footer" blog_id="$blogid_website" /> <!-- body 終了タグ以降 --> <mt:Include module="html_foot" blog_id="$blogid_website" /> </mt:Unless> </mt:Unless> サイト共通のヘッダ / フッタなどはモジュール化
  94. 94. 共通モジュールの例(html_head) <head> <meta charset=“UTF-8"> <!—- meta 関連 —-> <title><mt:Var name="meta_title" /></title> <meta name="description" content="<mt:Var name="meta_description" />"> <meta name="keywords" content="<mt:Var name="meta_keywords" / >"> <link rel="stylesheet" href=“/common/css/style.css"> <!—- ページ単位で追加する CSS / Script —-> <mt:Var name="html_head_css" /> <mt:Var name="html_head_script" /> <body>
  95. 95. とあるウェブサイトのテーマ ├── templates/ │ ├── comment_listing.mtml │ ├── comment_preview.mtml │ ├── comment_response.mtml │ ├── dynamic_error.mtml │ ├── index-top.mtml // トップページ │ ├── index-user_css.mtml // MTAppjQuery の user.css │ ├── index-user_js.mtml // MTAppjQuery の user.js │ ├── module-config.mtml // サイト共通の config モジュール │ ├── module-footer.mtml // 共通フッタ │ ├── module-header.mtml // 共通ヘッダ │ ├── module-html_foot.mtml // 共通 HTML フッタ │ ├── module-html_head.mtml // 共通 HTML ヘッダ │ ├── popup_image.mtml │ └── search_results.mtml └── theme.yaml 増減はあっても最低構成はこの形 " Git で共有
  96. 96. あとは、テンプレートごとに出力用のタグを記述
  97. 97. 静的HTML実装フローとの連携
  98. 98. 実装フローの連携
  99. 99. ! HTML のコーディング段階で テンプレート的にファイルを用意 $ 静的HTMLジェネレータの導入が MT テンプレート実装の効率化に繋がる " 共通部分のインクルード " 条件分岐 " ループ処理 静的 HTML ジェネレータの利用
  100. 100. capture http://www.metalsmith.io/ 静的 HTML ジェネレータの利用
  101. 101. capture http://paularmstrong.github.io/swig/ 静的 HTML ジェネレータの利用
  102. 102. とあるコンテンツのHTMLテンプレート <body{% if page == 'top' %} class="page--top"{% endif %}> {% include 'header.html' %} <div class="layout-container"> {{ contents | safe }} </div> {% include 'footer.html' %} </body> これを MTML に置き換えると
  103. 103. とあるコンテンツのMTMLテンプレート <body<mt:Unless name="page_class"> class="<mt:Var name="page_class" />"</mt:Unless>> <mt:Include module="header.html" /> <div class="layout-container"> <mt:EntryBody /> <mt:EntryMore /> </div> <mt:Include module="footer.html" /> </body>
  104. 104. ページ単位の変化は diff ツールで確認
  105. 105. SublimeText のプラグインを利用し Kaleidoscope で開く FileDiffs Plugin Package Control でインストール後、2つの設定ファイルを修正 エディタと diff ツールの連携例 [ // SublimeFileDiffs { "keys": ["ctrl+shift+d"], "command": "file_diff_menu" } ] { // ksdiff (Kaleidoscope) "cmd": ["/usr/local/bin/ksdiff", "$file1", "$file2"] } % Preferences > Key Bindings - User % Preferences > Package Settings > FileDiffs > Settings - User
  106. 106. リモートワークをするためのまとめ
  107. 107. リモートワークをするためのまとめ ! 不明点は早めに確認 ! 分業できる体制用意・情報整理 ! 文字ベースのやりとりで、 いかに認識の違いをなくせるか ! 同時並行で作業できるよう、 タスクの粒度と優先順位が大事 ! 担当者に関わらず、品質を担保できる仕組み作り ! タスク単位で変更点を共有(Git)
  108. 108. - https://www.flickr.com/photos/zengame/19947750606 - https://www.pakutaso.com/20150539128post-5482.html - https://www.flickr.com/photos/n_corboy/4921290518 - https://www.flickr.com/photos/s4xton/2425718415 - https://www.flickr.com/photos/kiksbalayon/2113369517 - https://twitter.com/ponoyuku/status/362415739514273792 - https://www.flickr.com/photos/pulseman/577082958 - http://www.abysse.co.jp/japan/d-japanmap/map07-1.html - https://www.pakutaso.com/20151016292web-9.html - https://www.pakutaso.com/20140927268post-4614.html Photo credit

×