Embed Size (px)
Citation preview
リモートワークで加速する！ Movable Type によるサイト構築
photo by Zengame https://www.flickr.com/photos/zengame/19947750606
bit part / BUN / h2ham
ABOUT US
mersy tinybeans
業務内容
photo by PRONana B Agyei https://www.flickr.com/photos/nanagyei/5641647904
! MovableType サイトの構築 ! プラグイン開発：MTAppjQuery など ! HTML・CSS・JavaScriptのコーディング業務 " ディレクション・プロジェクトマネジメント業務
などなど
中でも得意分野
! 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 : (́ ºムº `) & CodeDesign $ JavaScript : (́ ºムº `) & bit part Movable Type : BUN & bit part &
だがしかし！
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 / Backlog / Facebook / Basecamp など
各作業における連携のポイント
ディレクション
いかにスムーズにその後の作業が スムーズに行くかの最大のポイント
段取りと指示
! 段取りが良くないと作業もスムーズにいかない ! 指示のタイミングや量、仕方なども重要
! 不明な点は全て確認するようにする " 技術的に確認が必要な物は早めに共有したうえで、 そのまま対応するか調整提案するなどを検討する " 危険の芽は早めに摘む ! 期日をなるべく指定する " 確認も同様、いつまで回答もらえるのかなど
その他のポイント
! スコープ内容のタスクは全て洗い出してTodo化 " なるべくタスクの粒度は細かくする
! 専門的に決める部分は各担当に任せる " 例：マークアップの要素、MTの変数化など
! 情報は全て共有する ! ボール(確認事項やTodo)は持たないですぐ投げる ! わかりやすく伝える " 意図が伝わらないのはディレクターのバグ
その他のポイント
! なるべく自動化・スニペットの活用など ! 毎回使うようなドキュメントは共通の場所に " 各種ガイドラインなど
その他のポイント
作業者への説明はドキュメントや文章前提
ドキュメントや文章前提
! MTGなどは出来る限り減らす （必要な時以外はしない） ! ドキュメントやプロジェクト管理ツールの活用
説明時間の省略と忘れた時やチェック時の確認に
スケジュールの確認重要
スケジュールの確認
! いつからいつまでの作業か ! 作業者はスケジュールに問題がないか ! 優先度指定
進行管理
進行管理
! 気配り ! 段取り ! 確認は細々（しつこくということではなく）
テクニカルディレクション
テクニカルディレクション
! 希望されているスケジュールや技術と、 想定されるスケジュール・技術に 乖離がないかどうか ! ディレクターと共有して可否判断 ギリギリ・無理なスケジュールで組まない
静的HTML実装フロー
なぜ 静的HTMLを別途分けて制作を進めるか
HTML の制作を分離
! MTのテーマの実装しながらコーディングは すぐにプレビューできないため時間のロス ! どんな案件でも対応可 MT以外の案件でも分業でファイルを渡せる ! システム・CMSのセットアップや設定と 同時進行可能
HTML の工夫
! モジュール前提（システム化前提） 大きなHTML構造に依存しない = 疎結合 ! CSSで対応できるものはCSSで対応 :first-child や :nth-child の利用など ! システムやプラグインで、 決まったHTMLが出力される箇所は、 それに合わせてマークアップ & スタイル " 例：ページャー、wysiwyg
コーディング時に実践していること
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
: image_file : 画像 : 記事
: image_caption : 1行テキスト : 記事
: image_description : 複数行テキスト : 記事
" テンプレート実装時 MT タグ名の参照が容易に
設計書（テンプレート）### インデックステンプレート * トップページ * path * identifier * 公開 ### アーカイブテンプレート * カテゴリ * type * mapping * identifier * 公開 * 記事詳細 * type * mapping * identifier * 公開
: index.html : index-top : スタティック
: カテゴリアーカイブ : /%c/index.html : archive-category : スタティック
: ブログ記事 : /%c/%b/index.html : archive-entry : スタティック
" あらかじめ識別子を 決めておくため、編集対象の ローカルファイルを探しやすい
2.管理画面のカスタマイズ
管理画面のカスタマイズ
$ ラベルの変更 $ 入力項目のソート $ 増減可能な表組みによる入力欄 （$.MTAppJSONTable） $ DataAPI を利用したファイルアップロード （$.MTAppMultiFileUpload） $ 異なるブログでの記事の関連付け （$.MTAppListing） " MTAppjQuery で必要に応じたカスタマイズ
MTAppjQuery 利用時のポイント
$ メインウェブサイトのインデックステンプレート化 " プラグインの user.js を上書きし、一元管理 $ 分岐用のブログ ID は config モジュールにセット " 本番 / 開発環境で ID が異なる場合も影響を受けない $ 複数人で作業する場合は、担当ごとにモジュール化 " 管理画面で直接更新する際、ロールバックを回避
3.テンプレートのカスタマイズ
テンプレートのカスタマイズ
<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>
config モジュール
$ 変数の定義 " ウェブサイト / ブログ ID " サイトの共通変数（description / keywords など） " 置換のパターン $ SetVarTemplate の定義 " SNS ボタン / Pager などサイト共通のもの
メインウェブサイトに作成
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>
config モジュール（ブログ専用）
$ SetVarTemplate の定義 （一覧用モジュールなど、ブログ内で複数回利用するもの）
テンプレート固有の変数
<!-- 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>
共通ヘッダなどのモジュールで上書きしたいものだけ定義
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>
サイト共通のヘッダ / フッタなどはモジュール化
共通モジュールの例（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>
とあるウェブサイトのテーマ
├── 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 で共有
あとは、テンプレートごとに出力用のタグを記述
静的HTML実装フローとの連携
実装フローの連携
! HTML のコーディング段階で テンプレート的にファイルを用意 $ 静的HTMLジェネレータの導入が MT テンプレート実装の効率化に繋がる " 共通部分のインクルード " 条件分岐 " ループ処理
静的 HTML ジェネレータの利用
とあるコンテンツのHTMLテンプレート
<body{% if page == 'top' %} class="page--top"{% endif %}> {% include 'header.html' %} <div class="layout-container"> {{ contents | safe }} </div> {% include 'footer.html' %} </body>
これを MTML に置き換えると
とあるコンテンツの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>
ページ単位の変化は diff ツールで確認
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
リモートワークをするためのまとめ
リモートワークをするためのまとめ
! 不明点は早めに確認 ! 分業できる体制用意・情報整理 ! 文字ベースのやりとりで、 いかに認識の違いをなくせるか ! 同時並行で作業できるよう、 タスクの粒度と優先順位が大事 ! 担当者に関わらず、品質を担保できる仕組み作り ! タスク単位で変更点を共有（Git）
- 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
