Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
リモートワークで加速する!
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
Próxima SlideShare
Cargando en…5
×

MTDDC Meetup TOKYO 2015 bit-part

1.761 visualizaciones

Publicado el

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

Publicado en: Internet
  • Sé el primero en comentar

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

×