月刊ライトニングトークで発表しました。 tumblrテーマ を middleman で開発していた体験談をまとめました。 middleman 自体のこととかは省略しているので、気になる方は是非お調べください。

1. Tumblr構築について
MJ

2. 自己紹介
MJ : 森淳（もり じゅん）
所属 : ユニバ株式会社
役職 : フロントエンドエンジニア?
!
東京にでて速攻で会社を辞め、無職突入
そこをユニバさまに拾っていただき
現在東京生活2年目に突入し、生きていることに感謝

3. Middleman で tumblr 構築する話
かなり自己流の体験談

5. tumblr の凄いところ
基本無料！
好きなドメインも取れる！
テンプレート弄り放題！
ユーザ数１億人以上！
APIも充実…うん充実！
gzip化もしてくれてる最高！

6. tumblr のクソなところ
テンプレート管理が難しい。
サイト上で弄ろうものなら修羅場
基本的に1ファイル完結

8. スマートに構築していきたい！
というか運用できない

9. 構築の流れ
Middleman
で構築
build
しまして
コピペだけ

10. 構築の前に…
tumblarghを入れましょう
https://github.com/jasonwebster/tumblargh
API経由で記事を生成してくれる。
ローカル環境でも開発できるようになるよ。
(でもmoreタグとか完全再現は×)
ブログにパスワドがかかっているとエラーする(残念)
ビルドするときに、tumblr固有の記述をしても
エラーしなくなるよ！(私はビルドの時だけ有効にします)
※ 確認はtumblr 上でしよう！(javascript あたりが危険)

11. partialを使おう
before after

12. 環境変数を使おう

13. static な 画像はbase64に

14. テンプレートも別ファイル化
tumblr と相性が
いいのは ejs 系
!
外部ファイル化
するならなんでも
ok

15. .css, .js 上げ直すの嫌！
inline 化しよう！
僕は、gulp で、、、
https://www.npmjs.org/package/gulp-inline
!
基本的にビルドした時点でガッチャンこしてます。
build するときにminifyしておくと、
コピペの際に見やすくなるよ。
!
※jsライブラリはスタティックに上げておくのがオススメ

16. 後はビルドしてコピペ
そこも自動化したい。。。というのは置いといて
これで、
!
ローカルでの構築の資産が流用しやすく
ソースコードの修正を容易に
インライン化していれば、上げ直す手間も省ける
!
ようになった！

17. build前 build後
123行 342行
実際にどんなもんか

18. まとめ
これで普段通りのコーディングしつつ
tumblr 作れて嬉しいと思いました。
!
ただ、tumblr に middleman とか少し重いのでは…
なので、assemble とかで出来ないか今後検討予定

19. ありがとうございました