モダンでもなく reactでもなく フロントエンドでもなく 開発でもない話

1. モダンでもなく
reactでもなく
フロントエンドでもなく
開発でもない話

2. who am I
• t.amano / @sheercat
• 職業:
名ばかり所長
• 言語:
perl go C C++ java clojure
• 会社:
livedoor → LINE → mixi
(Diverse inc.)

3. Diverse は何をやってる会社か？

4. YYC

5. youbride

6. AM

7. Poiboy

8. AM
http://am-our.com/sex/436/13708/

9. • 3行で

10. • セックスするときの脳波をしらべたら
• コンドームによって
• 気持ちよさがちがった

11. • ！？

12. 今時のコーポレートサイト

13. とある募集

14. ＿＿＿_
／ ＼
／ ─ ─ ＼ この予算感、、、やる人いるのか？
／ （●） （●)＼
| （__人__） |
./ ∩ノ ⊃ ／
( ＼ ／ ＿ノ | |
.＼ “ ／＿＿| |
＼ ／＿＿＿ ／

15. あ、いいとこにいたね
／￣￣＼
_,ノ ヽ､_ ＼
（●）（● ） |
………… （__人___） |
'､ |
｜ ｜
| , ／_.{
｀ｧﾆニ＜／／〉、＿_ __
,./ /＼ ／ : : : : : : ＞ : :＼
_／ /|ｲ:::::/∨. : : :l: : : : : : : : : : :.丶
／. : : : :| ./｀Y / : : : 」: : : /: : : : : : : : }
,´ : :/: : : :| ｉ::::::|/ : :／: : : ／: : : : : : : : :|
{ : :/. : : : :|/:::::/ : : : : : : : | : : : : : : : : : ,'
/ : :,' : : : : : |::::/ : : : : : r---く´ニ＼: ヽ:ﾉ
､'ｰr,_| : : : : : :|:/ : : : : :_/二ヽ V: : : : ｀ :´
／ :.／￣＞＜ :./ : : : : :/ 二 ヽ_」┘: : : ∨}
/ : : :ム / : : : :￣￣￣￣~ﾞ''-ゝ.」: : : : : ∨ :}
{ : : : : : :＼､ : : : : : : : : : : : : : : : :＼. : : :∨ : :l
ヽ: : : : : : : :￣"＼ : : : : : : : : : : : : : : : ／ : : :{

16. うちのコーポレートサイト
リニューアルしてくんない？／￣￣＼
_,ノ ヽ､_ ＼
（●）（● ） |
………… （__人___） |
'､ |
｜ ｜
| , ／_.{
｀ｧﾆニ＜／／〉、＿_ __
,./ /＼ ／ : : : : : : ＞ : :＼
_／ /|ｲ:::::/∨. : : :l: : : : : : : : : : :.丶
／. : : : :| ./｀Y / : : : 」: : : /: : : : : : : : }
,´ : :/: : : :| ｉ::::::|/ : :／: : : ／: : : : : : : : :|
{ : :/. : : : :|/:::::/ : : : : : : : | : : : : : : : : : ,'
/ : :,' : : : : : |::::/ : : : : : r---く´ニ＼: ヽ:ﾉ
､'ｰr,_| : : : : : :|:/ : : : : :_/二ヽ V: : : : ｀ :´
／ :.／￣＞＜ :./ : : : : :/ 二 ヽ_」┘: : : ∨}
/ : : :ム / : : : :￣￣￣￣~ﾞ''-ゝ.」: : : : : ∨ :}
{ : : : : : :＼､ : : : : : : : : : : : : : : : :＼. : : :∨ : :l
ヽ: : : : : : : :￣"＼ : : : : : : : : : : : : : : : ／ : : :{

17. ＿＿＿_
／ ＼
／ ─ ─ ＼ 「ふむ。。。」
／ （●） （●)＼
| （__人__） |
./ ∩ノ ⊃ ／
( ＼ ／ ＿ノ | |
.＼ “ ／＿＿| |
＼ ／＿＿＿ ／

18. • アクセス全然ないけど必要
• オフィス移転したりするたびに更新
• 新たなサービスだしたら更新
• 採用情報を載せて、更新
• なにかあったら更新
コーポレートサイト、
だいたいこんなイメージ

19. • SEO がんばりたい (まじで?
• 今風にしたい
全幅つかってパララックスするｱﾚ
またｱﾚかよ
• なにしろリニューアルしたい
（リソースかけずに ←まじか
でも定期的にリニューアルしたがる

20. • html がポトッと置いてあるだけで、web
アプリ的なものは無し
• ニュースリリースも、ニュースリリー
スの履歴もなし
そういうのは公式 blog でやってる
現在のコーポレート

21. • ニュースリリースをコーポレートサイト
にもだしたい （SEO 目的?
• 全部、プレスリリース、普通のニュー
スでわける（why
• ページャー
今回の要望まとめ

22. • web アプリを今から置きたくない
一番最初のころ amon2 置いてたけど、 xslate で
ヘッダ・フッタ include するくらいしかするこ
となかったので撤去した
• すぐ CMS って言うのでなだめる
• CMS がいいなら wordpress つかえば
wordpress is too much
my 方針検討

23. • cdn から Vue.js 食って、クライアントサ
イドレンダリング
最初の方針

24. • そのときたまたまはてブの テクノロジ
ーのとこにスライドがあった
• 調べてみたら案外軽そうだった
• react系 使ったことあるって言い張りた
かった(どうしても言い張りたかった
why Vue.js

25. • ndenv
• npm install vue などなど
• browserify とか
• vue-cli いれてベースつくったり
• npm run dev でhttp-server 起動
＼(^o^)／便利だな
Vue.js

26. • クライアントサイドレンダリングだと、
SEO どうするか
• SEO オワコンっていえるほど知見ない
• 社内で Vue.js なんてだれも使ってない
• どころか、フロント系の知見が無い
• ｵｯｻﾝの自己満プロジェクトになる
そういえば

27. • テンプレートエンジンでヘッダー・フッ
ター共有するだけでも楽になる
• サーバサイドレンダリングなのでSEO
で文句言われない
• ogp とか description, keyword とかも差
し替えれる
そうだ mustache だ

28. • {{ }} 記法へのあこがれ
[% %] 記法はコンプレックスになる
• 他には Handlebars とかも調べたけど
ヒゲだし
• Vue.js も併用するが、{{ }} バッティング
問題は Vue.js 側で逃げれる
why mustache

29. • npm install mustache
• mustache vars.json tmpl.mustache
＼(^o^)／かんたん
mustache

30. • {{> header }} とかで外部テンプレ読めるは
ず。。。がよくわからない
• ソースみる
• -p で全部渡す必要があった (^^;;;;;;;;;
• grunt ? gulp ? 社内であまり使ってない
• npm script ?
• よし、shell だ
mustache partial は

31. • みんな読める
why shell

32. • $MUSTACHEBIN null.json $MFILE
`ls partial/*.html | xargs | sed -e 's/partial/-p
partial/g’`
>| ${MFILE%.*}.html
let’s shell

33. • (^o^) これで行きましょう
shell 読める

34. • (^o^) ！？
要件見直す

35. 要件見直す
• ニュースリリースをコーポレートサイト
にもだしたい （SEO 目的?
• 全部、プレスリリース、普通のニュー
スでわける
• ページャー

36. • (^o^) ！？
要件見直す

37. • 特定ディレクトリの下に置かれてるファ
イル数をカウントしてそれをテンプレに
渡してやって、10 ページずつリストを
つくってやればよい。表示の制御は
Vue.js つかおう header footer の埋め込
みは mustache だ。build は gulp だ
deploy は rsync だ。そうだそうしよう
shell 最強のはず

38. • 常識的に考えてそんな unk project 爆誕
させちゃダメだった
冷静な感情

39. • これは サイトジェネレーターでは？
そういえば

40. • jekyll や middleman や hugo だ
hugo だ
hugo

41. • 速い
• install 超楽
• go 案件は社内にいくつかある
why hugo

42. • 要件はすべてみたす
tag, category、ページャー機能
• 意識高すぎる markdown での記事更新はべ
つにしなくていい。生 html でいい
• 生成した public ばらまけばいいので
deploy は rsync でいい
let’s hugo

43. • brew install hugo
• rbenv 入れて gem install compass
• hugo server -v -w
• compass watch
• あとは html 更新したり scss 更新した
りすれば勝手に反映される
デザイナに環境つくってもらった

44. • ということで、コーポレートサイトは
hugo で静的に生成することになりまし
た。
• go の template がちょっと特殊だが、慣
れ
happy end.
finally answer is hugo

45. • コンドームは薄いほうが気持ちいいとい
うわけじゃない（重要）
まとめ

46. • セックス時の脳波を計測すると
気持ちいい（計測しなくても）
まとめ

47. • ｵｯｻﾝの興味だけで unk プロジェクトつく
っちゃだめ
まとめ

48. ご清聴
ありがとうございました