Embed Size (px)
Citation preview
モダンでもなくreact でもなくフロントエンドでもなく開発でもない話
who am I• t.amano / @sheercat• 職業 : 名ばかり所長• 言語 :
perl go C C++ java clojure
• 会社 : livedoor → LINE → mixi(Diverse inc.)
Diverse は何をやってる会社か？
• 3 行で
• セックスするときの脳波をしらべたら• コンドームによって• 気持ちよさがちがった
• ！？
今時のコーポレートサイト
とある募集
＿＿＿ _ ／ ＼ ／ ─ ─ ＼ この予算感、、、やる人いるのか？／ （●） （● ) ＼| （ __ 人 __ ） |./ ∩ノ ⊃ ／( ＼ ／ ＿ノ | |. ＼ “ ／＿＿ | | ＼ ／＿＿＿ ／
あ、いいとこにいたね ／￣￣＼ _, ノ ヽ､ _ ＼ （●）（● ） | ………… （ __ 人 ___ ） | ' ､ | ｜ ｜ | , ／ _.{ ｀ｧﾆニ＜／／〉、＿ _ __ ,./ / ＼ ／ : : : : : : ＞ : : ＼ _ ／ /| ｲ :::::/∨. : : :l: : : : : : : : : : :. 丶 ／ . : : : :| ./ ｀ Y / : : : 」 : : : /: : : : : : : : } ,´ : :/: : : :| ｉ ::::::|/ : : ／ : : : ／ : : : : : : : : :| { : :/. : : : :|/:::::/ : : : : : : : | : : : : : : : : : ,' / : :,' : : : : : |::::/ : : : : : r--- く ´ ニ＼ : ヽ : ﾉ ､ ' ｰ r,_| : : : : : :|:/ : : : : :_/ 二ヽ V: : : : ｀ :´ ／ :. ／￣＞＜ :./ : : : : :/ 二 ヽ _ 」┘ : : : ∨} / : : : ム / : : : : ￣￣￣￣ ~ ﾞ ''- ゝ . 」 : : : : : ∨ :} { : : : : : : ＼､ : : : : : : : : : : : : : : : : ＼ . : : :∨ : :l ヽ : : : : : : : : ￣ " ＼ : : : : : : : : : : : : : : : ／ : : :{
うちのコーポレートサイトリニューアルしてくんない？ ／￣￣＼ _, ノ ヽ､ _ ＼ （●）（● ） | ………… （ __ 人 ___ ） | ' ､ | ｜ ｜ | , ／ _.{ ｀ｧﾆニ＜／／〉、＿ _ __ ,./ / ＼ ／ : : : : : : ＞ : : ＼ _ ／ /| ｲ :::::/∨. : : :l: : : : : : : : : : :. 丶 ／ . : : : :| ./ ｀ Y / : : : 」 : : : /: : : : : : : : } ,´ : :/: : : :| ｉ ::::::|/ : : ／ : : : ／ : : : : : : : : :| { : :/. : : : :|/:::::/ : : : : : : : | : : : : : : : : : ,' / : :,' : : : : : |::::/ : : : : : r--- く ´ ニ＼ : ヽ : ﾉ ､ ' ｰ r,_| : : : : : :|:/ : : : : :_/ 二ヽ V: : : : ｀ :´ ／ :. ／￣＞＜ :./ : : : : :/ 二 ヽ _ 」┘ : : : ∨} / : : : ム / : : : : ￣￣￣￣ ~ ﾞ ''- ゝ . 」 : : : : : ∨ :} { : : : : : : ＼､ : : : : : : : : : : : : : : : : ＼ . : : :∨ : :l ヽ : : : : : : : : ￣ " ＼ : : : : : : : : : : : : : : : ／ : : :{
＿＿＿ _ ／ ＼ ／ ─ ─ ＼ 「ふむ。。。」／ （●） （● ) ＼| （ __ 人 __ ） |./ ∩ノ ⊃ ／( ＼ ／ ＿ノ | |. ＼ “ ／＿＿ | | ＼ ／＿＿＿ ／
• アクセス全然ないけど必要• オフィス移転したりするたびに更新• 新たなサービスだしたら更新• 採用情報を載せて、更新• なにかあったら更新
コーポレートサイト、だいたいこんなイメージ
• SEO がんばりたい ( まじで ?
• 今風にしたい全幅つかってパララックスするｱﾚまたｱﾚかよ• なにしろリニューアルしたい（リソースかけずに ←まじか
でも定期的にリニューアルしたがる
• html がポトッと置いてあるだけで、 web アプリ的なものは無し• ニュースリリースも、ニュースリリースの履歴もなしそういうのは公式 blog でやってる
現在のコーポレート
• ニュースリリースをコーポレートサイトにもだしたい （ SEO 目的 ?• 全部、プレスリリース、普通のニュースでわける（ why
• ページャー
今回の要望まとめ
• web アプリを今から置きたくない一番最初のころ amon2 置いてたけど、 xslate でヘッダ・フッタ include するくらいしかすることなかったので撤去した• すぐ CMS って言うのでなだめる• CMS がいいなら wordpress つかえば
wordpress is too much
my 方針検討
• cdn から Vue.js 食って、クライアントサイドレンダリング
最初の方針
• そのときたまたまはてブの テクノロジーのとこにスライドがあった • 調べてみたら案外軽そうだった• react 系 使ったことあるって言い張りたかった ( どうしても言い張りたかった
why Vue.js
• ndenv • npm install vue などなど• browserify とか• vue-cli いれてベースつくったり• npm run dev で http-server 起動＼ (^o^) ／便利だな
Vue.js
• クライアントサイドレンダリングだと、SEO どうするか
• SEO オワコンっていえるほど知見ない• 社内で Vue.js なんてだれも使ってない• どころか、フロント系の知見が無い• ｵｯｻﾝの自己満プロジェクトになる
そういえば
• テンプレートエンジンでヘッダー・フッター共有するだけでも楽になる• サーバサイドレンダリングなので SEOで文句言われない• ogp とか description, keyword とかも差し替えれる
そうだ mustache だ
• {{ }} 記法へのあこがれ[% %] 記法はコンプレックスになる
• 他には Handlebars とかも調べたけどヒゲだし• Vue.js も併用するが、 {{ }} バッティング問題は Vue.js 側で逃げれる
why mustache
• npm install mustache• mustache vars.json tmpl.mustache
＼ (^o^) ／かんたん
mustache
• {{> header }} とかで外部テンプレ読めるはず。。。がよくわからない• ソースみる• -p で全部渡す必要があった (^^;;;;;;;;;• grunt ? gulp ? 社内であまり使ってない• npm script ?• よし、 shell だ
mustache partial は
• みんな読める
why shell
• $MUSTACHEBIN null.json $MFILE \`ls partial/*.html | xargs | sed -e 's/partial/-p partial/g’`\ >| ${MFILE%.*}.html
let’s shell
• (^o^) これで行きましょう
shell 読める
• (^o^) ！？
要件見直す
要件見直す• ニュースリリースをコーポレートサイトにもだしたい （ SEO 目的 ?• 全部、プレスリリース、普通のニュースでわける• ページャー
• (^o^) ！？
要件見直す
• 特定ディレクトリの下に置かれてるファイル数をカウントしてそれをテンプレに渡してやって、 10 ページずつリストをつくってやればよい。表示の制御は Vue.js つかおう header footer の埋め込みは mustache だ。 build は gulp だ deploy は rsync だ。そうだそうしよう
shell 最強のはず
• 常識的に考えてそんな unk project 爆誕させちゃダメだった
冷静な感情
• これは サイトジェネレーターでは？
そういえば
• jekyll や middleman や hugo だhugo だ
hugo
• 速い• install 超楽• go 案件は社内にいくつかある
why hugo
• 要件はすべてみたすtag, category 、ページャー機能
• 意識高すぎる markdown での記事更新はべつにしなくていい。生 html でいい• 生成した public ばらまけばいいので
deploy は rsync でいい
let’s hugo
• brew install hugo• rbenv 入れて gem install compass• hugo server -v -w• compass watch
• あとは html 更新したり scss 更新したりすれば勝手に反映される
デザイナに環境つくってもらった
• ということで、コーポレートサイトは hugo で静的に生成することになりました。
• go の template がちょっと特殊だが、慣れhappy end.
finally answer is hugo
• コンドームは薄いほうが気持ちいいというわけじゃない（重要）
まとめ
• セックス時の脳波を計測すると気持ちいい（計測しなくても）
まとめ
• ｵｯｻﾝの興味だけで unk プロジェクトつくっちゃだめ
まとめ
ご清聴ありがとうございました
![おもいでばこを 使いこなそう [決定版]「おもいでばこを使いこなそう（決定版）」 6 PASOCOOP おもいでばこを使いこなそう[決定版] 1 “おもいでばこ”とは？](https://img.pdfslide.net/doc/110x75/5f0647ba7e708231d417335a/-c-oeici.jpg)
