Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Amon2 で造られた api サーバを引き継いで課金の実装をしました話
Next
Download to read offline and view in fullscreen.

0

Share

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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

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

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

Views

Total views

496

On Slideshare

0

From embeds

0

Number of embeds

21

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×