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

1. リモートワークで加速する！
Movable Type によるサイト構築
photo by Zengame https://www.flickr.com/photos/zengame/19947750606
bit part / BUN / h2ham

2. ABOUT US

4. mersy tinybeans

5. 業務内容
photo by PRONana B Agyei https://www.flickr.com/photos/nanagyei/5641647904
! MovableType サイトの構築
! プラグイン開発：MTAppjQuery など
! HTML・CSS・JavaScriptのコーディング業務
" ディレクション・プロジェクトマネジメント業務
などなど

6. capture http://www.bit-part.net/products/mtappjquery/

7. 中でも得意分野
! MovableType 関連全般
! プロジェクト進行管理

8. bit part の二人は苦手？
photo by ぱくたそ https://www.pakutaso.com/20150539128post-5482.html
MovableType構築 やディレクション周りは得意だが
HTML・CSSのコーディングはやや不得意

9. photo by Nicola Barnett https://www.flickr.com/photos/n_corboy/4921290518
作業を分割し、
各分野の専門パートナーとともに仕事

10. bit partner

11. (́ ºムº `)
h2ham

12. photo by Aaron Landry https://www.flickr.com/photos/s4xton/2425718415
bit part の HTML・CSS・JavaScript の制作や
技術面の確認を含めたフロント側業務を主に担当

13. BUN
BUN

14. photo by Nicola Barnett https://www.flickr.com/photos/n_corboy/4921290518
Movable Type でのサイト構築担当

15. bit part チームの制作の流れ

16. hei_a
mersy
tinybeans
BUNh2ham
#
コーディング指示 MT構築指示
コーディングデータ
役割と流れ
#

17. hei_a
mersy
tinybeans
BUNh2ham
#
コーディング指示 MT構築指示
コーディングデータ
役割と流れ
#
" Direction : bit part
$ HTML / CSS : (́ ºムº `) & CodeDesign
$ JavaScript : (́ ºムº `) & bit part
Movable Type : BUN & bit part &

18. だがしかし！
photo by Kiks Balayon https://www.flickr.com/photos/kiksbalayon/2113369517

19. photo by @bloodysheep https://twitter.com/ponoyuku/status/362415739514273792
一人は 北海道
このへん

20. 一人は 秋田

21. 遠いな…
photo by Pulseman https://www.flickr.com/photos/pulseman/577082958
ええ、遠いです

22. リモートワーク!!
photo by デザイン日本地図のフリー画像 http://www.abysse.co.jp/japan/d-japanmap/map07-1.html

23. なぜリモートで作業ができるか
photo by ぱくたそ https://www.pakutaso.com/20151016292web-9.html

24. 分業による進行

25. 分業？
実は今回の最大のポイント

26. % 分業が最善というわけではないが
分業できるようにしてあることが超重要
% 負荷分散、複数同時作業、リモートでも
問題なく進行可能

27. 作業を依頼するだけ
photo by ぱくたそ https://www.pakutaso.com/20140927268post-4614.html

28. 分業ができる体制
↓
作業を効率的に回せる体制

29. 大事なことなのでもう一度
分業できるようにしてあることが
超重要

30. 分業のポイント

31. 分業のポイント
! ドキュメント用意と整理
" 説明時間の省略と忘れた時やチェック時の確認に
! 仕様の明確化
" 作業者を迷わせない
! 曖昧仕様を先に解決しておいての実装
" 手戻り工数の削減

32. やりがちな問題

33. やりがちな問題
# 説明のないワイヤーやデザインで作業指示
# 感覚値「もっと大きく・いい感じに など」

34. もっと大きく？
$ tinybeans
画像を大きくしてください

35. もっと大きく？
$ tinybeans
なんか変わった？

36. もっと大きく？
$ tinybeans
大きすぎない？

37. 工数増
% 手戻り工数増：作業後の「やっぱりこうしてください」
% 確認工数増：動きは？リンク先は？レスポンシブ仕様は？

38. 問題ない？
? 作業者が仕様を決めながらすすめるスタイル?
? 決めたり提案しながらすすめることが仕事？

39. 確認による手戻り = コスト
提案しながらすすめるのはコストが増える原因

40. コスト増
# 「実装時の適当にいいようにやってください」
" 感覚や求めていることは人により違う
" 感覚値は実は地味に工数増 = 金額増

41. 分業している作業者間での
やり取りはできるだけ少なく

42. NGではない
! 感覚値がダメなわけではない
! しかしデザインでの確認・決めるほうが
実装中の確認・実装後のチェック参考にできる
' HTMLに直接変更を反映？
" 確認時の参考資料(デザインなど)と差分が発生

43. リモートでのプロジェクトは失敗が多い？

44. capture http://www.slideshare.net/takayukiito739/ss-55141697

45. そんなことになったことがない bit part チーム！
? ? ?
? ? ?

46. bit partner が失敗しないのは
! 仕事遂行の意識が共有できている
" リモート = 自由な時間で仕事 ではあるが
ゆっくりやってよいというわけではない
" ディレクターが、いつまでにできるかの確認 と
スケジュールまでに完了させる作業者の意識
" 無理のあるスケジュールになっていないか？
想像との乖離がないか要確認

47. リモートワークのための利用ツール

48. capture http://www.slideshare.net/takayukiito739/ss-55141697
Slack：連絡や質問、情報共有などは全てここ
案件ごとのチャンネル
チーム内は Slack のみ

49. capture http://www.slideshare.net/takayukiito739/ss-55141697
Redmine：作業・確認チケット
ドキュメントをWikiに
作業はチケットに

50. capture http://www.slideshare.net/takayukiito739/ss-55141697
Redmine：作業・確認チケット
ドキュメントをWikiに
作業はチケットにその他様々なツールに対応可能
Skype / Backlog / Facebook / Basecamp など

51. 各作業における連携のポイント

52. ディレクション

53. いかにスムーズにその後の作業が
スムーズに行くかの最大のポイント

54. 段取りと指示
! 段取りが良くないと作業もスムーズにいかない
! 指示のタイミングや量、仕方なども重要

55. ! 不明な点は全て確認するようにする
" 技術的に確認が必要な物は早めに共有したうえで、
そのまま対応するか調整提案するなどを検討する
" 危険の芽は早めに摘む
! 期日をなるべく指定する
" 確認も同様、いつまで回答もらえるのかなど
その他のポイント

56. ! スコープ内容のタスクは全て洗い出してTodo化
" なるべくタスクの粒度は細かくする
! 専門的に決める部分は各担当に任せる
" 例：マークアップの要素、MTの変数化など
! 情報は全て共有する
! ボール(確認事項やTodo)は持たないですぐ投げる
! わかりやすく伝える
" 意図が伝わらないのはディレクターのバグ
その他のポイント

57. ! なるべく自動化・スニペットの活用など
! 毎回使うようなドキュメントは共通の場所に
" 各種ガイドラインなど
その他のポイント

58. 作業者への説明はドキュメントや文章前提

59. ドキュメントや文章前提
! MTGなどは出来る限り減らす
（必要な時以外はしない）
! ドキュメントやプロジェクト管理ツールの活用

60. 説明時間の省略と忘れた時やチェック時の確認に

61. スケジュールの確認重要

62. スケジュールの確認
! いつからいつまでの作業か
! 作業者はスケジュールに問題がないか
! 優先度指定

63. 進行管理

64. 進行管理
! 気配り
! 段取り
! 確認は細々（しつこくということではなく）

65. テクニカルディレクション

66. テクニカルディレクション
! 希望されているスケジュールや技術と、
想定されるスケジュール・技術に
乖離がないかどうか
! ディレクターと共有して可否判断
ギリギリ・無理なスケジュールで組まない

67. 静的HTML実装フロー

68. なぜ 静的HTMLを別途分けて制作を進めるか

69. HTML の制作を分離
! MTのテーマの実装しながらコーディングは
すぐにプレビューできないため時間のロス
! どんな案件でも対応可
MT以外の案件でも分業でファイルを渡せる
! システム・CMSのセットアップや設定と
同時進行可能

70. HTML の工夫
! モジュール前提（システム化前提）
大きなHTML構造に依存しない = 疎結合
! CSSで対応できるものはCSSで対応
:first-child や :nth-child の利用など
! システムやプラグインで、
決まったHTMLが出力される箇所は、
それに合わせてマークアップ & スタイル
" 例：ページャー、wysiwyg

71. コーディング時に実践していること

72. capture https://git-scm.com/
Gitの利用（リビジョン管理ツールの利用）

73. capture http://gulpjs.com/
タスクランナーの活用

74. capture http://www.metalsmith.io/
静的 HTML ジェネレータの利用

75. capture http://www.browsersync.io/
サーバー設定を代替、準備時間の短縮

76. capture http://www.browsersync.io/
FTPアップ ＆ 確認を前提にしない
静的 HTML はローカル確認前提
先祖返り・バッティング 工数増
Git のリモートリポジトリに push
すると、確認環境に自動で反映

77. Movable Type の実装フロー

78. 大きく3つの流れ

79. 大きく3つの流れ
! ウェブサイト / ブログの設定
! 管理画面のカスタマイズ
! テンプレートのカスタマイズ

80. photo by PRONana B Agyei https://www.flickr.com/photos/nanagyei/5641647904
#</>
#{css}
#{JS}
$
管理画面のカスタマイズまでは、
静的HTML実装フローと並行作業
! できることから先に進めて
おけるのも、分業化の
メリット
! カスタムフィールドなどの
構成を事前に把握でき、
テンプレート実装時点で
過不足に気づきやすい

81. 1.ウェブサイト / ブログの設定

82. ウェブサイト / ブログの設定
$ ウェブサイト / ブログの作成
$ カスタムフィールドの追加 / 設定
$ 不要テンプレート / ウィジェットの削除
$ 空テンプレートの追加
$ テーマのエクスポート
" これ以降、入力作業と同時並行可能

83. 設計書（カスタムフィールド）
* 写真
* basename
* type
* object
* 写真のキャプション
* basename
* type
* object
* 写真の説明文
* basename
* type
* object
: image_file
: 画像
: 記事
: image_caption
: 1行テキスト
: 記事
: image_description
: 複数行テキスト
: 記事
" テンプレート実装時
MT タグ名の参照が容易に

84. 設計書（テンプレート）
### インデックステンプレート
* トップページ
* path
* identifier
* 公開
### アーカイブテンプレート
* カテゴリ
* type
* mapping
* identifier
* 公開
* 記事詳細
* type
* mapping
* identifier
* 公開
: index.html
: index-top
: スタティック
: カテゴリアーカイブ
: /%c/index.html
: archive-category
: スタティック
: ブログ記事
: /%c/%b/index.html
: archive-entry
: スタティック
" あらかじめ識別子を
決めておくため、編集対象の
ローカルファイルを探しやすい

85. 2.管理画面のカスタマイズ

86. 管理画面のカスタマイズ
$ ラベルの変更
$ 入力項目のソート
$ 増減可能な表組みによる入力欄
（$.MTAppJSONTable）
$ DataAPI を利用したファイルアップロード
（$.MTAppMultiFileUpload）
$ 異なるブログでの記事の関連付け
（$.MTAppListing）
" MTAppjQuery で必要に応じたカスタマイズ

87. MTAppjQuery 利用時のポイント
$ メインウェブサイトのインデックステンプレート化
" プラグインの user.js を上書きし、一元管理
$ 分岐用のブログ ID は config モジュールにセット
" 本番 / 開発環境で ID が異なる場合も影響を受けない
$ 複数人で作業する場合は、担当ごとにモジュール化
" 管理画面で直接更新する際、ロールバックを回避

88. 3.テンプレートのカスタマイズ

89. テンプレートのカスタマイズ
<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>

90. config モジュール
$ 変数の定義
" ウェブサイト / ブログ ID
" サイトの共通変数（description / keywords など）
" 置換のパターン
$ SetVarTemplate の定義
" SNS ボタン / Pager などサイト共通のもの
メインウェブサイトに作成

91. 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>

92. config モジュール（ブログ専用）
$ SetVarTemplate の定義
（一覧用モジュールなど、ブログ内で複数回利用するもの）

93. テンプレート固有の変数
<!-- 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>
共通ヘッダなどのモジュールで上書きしたいものだけ定義

94. 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>
サイト共通のヘッダ / フッタなどはモジュール化

95. 共通モジュールの例（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>

96. とあるウェブサイトのテーマ
├── 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 で共有

97. あとは、テンプレートごとに出力用のタグを記述

98. 静的HTML実装フローとの連携

99. 実装フローの連携

100. ! HTML のコーディング段階で
テンプレート的にファイルを用意
$ 静的HTMLジェネレータの導入が
MT テンプレート実装の効率化に繋がる
" 共通部分のインクルード
" 条件分岐
" ループ処理
静的 HTML ジェネレータの利用

101. capture http://www.metalsmith.io/
静的 HTML ジェネレータの利用

102. capture http://paularmstrong.github.io/swig/
静的 HTML ジェネレータの利用

103. とあるコンテンツのHTMLテンプレート
<body{% if page == 'top' %}
class="page--top"{% endif %}>
{% include 'header.html' %}
<div class="layout-container">
{{ contents | safe }}
</div>
{% include 'footer.html' %}
</body>
これを MTML に置き換えると

104. とあるコンテンツの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>

105. ページ単位の変化は diff ツールで確認

106. 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

107. リモートワークをするためのまとめ

108. リモートワークをするためのまとめ
! 不明点は早めに確認
! 分業できる体制用意・情報整理
! 文字ベースのやりとりで、
いかに認識の違いをなくせるか
! 同時並行で作業できるよう、
タスクの粒度と優先順位が大事
! 担当者に関わらず、品質を担保できる仕組み作り
! タスク単位で変更点を共有（Git）

109. - 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