Upgrade to Pro — share decks privately, control downloads, hide ads and more …

はてなブログ10周年とエンジニアの関わり / Hatena Engineer Seminar #18

5e4aa45f0fced5c5bbed0af0e250d009?s=47 theoremoon
January 27, 2022
760

はてなブログ10周年とエンジニアの関わり / Hatena Engineer Seminar #18

5e4aa45f0fced5c5bbed0af0e250d009?s=128

theoremoon

January 27, 2022
Tweet

Transcript

  1. はてなブログ10周年と エンジニアの関わり Hatena Engineer Seminar #18 id:Furutsuki

  2. id:Furutsuki - 株式会社はてな アプリケーションエンジニア
 - 2021年新卒
 - はてなブログチーム
 - 趣味はCTF


    - SECCON電脳会議で行われたRTACTFという
 イベントに出ました
 2
  3. はてなブログ - 2011年から提供しているブログサービス
 - 2021年11月7日でサービス開始から10周年 🎉
 3

  4. はてなブログ10周年 https://hatenablog.com/10th - 10年分のコンテンツが詰まったページです
 - 今日はこのページを作ったときの話をします
 4

  5. 10周年企画ページ - コンテンツをページに表示できるようにする部分を作ることに
 - やるとなってまず作戦を立てにいった
 - 締め切りがある程度近く、要件が固まりきっていない
 - 先輩エンジニアに同席してもらいつつ直接会話した
 -

    わかっている要件を明確にして、方針を立てる
 5
  6. 10周年ページの要件 1. たくさんのブログや記事の紹介をしたい
  ブロガーによる寄稿記事など、はてなブログ以外の記事もある
 2. 掲載する記事については更新できるようにしたい
  週に2回程度、1ヶ月間はお題記事を更新する
 3. 掲載したい記事の情報はスプレッドシートでまとめている
  掲載したい情報は変わる可能性がある


    4. はてなブログ10周年の日に出せるように準備したい
 6
  7. 要件から考察 
 - 記事の更新の反映はどのタイミングでできると良いか
 - アクセス毎に最新のデータソースに問い合わせなくて良いなら
 負担が減る
 - はてなブログのDBに載っていない情報がある
 -

    事前にDBに入れるか、別のデータソースが必要になる。
 できるなら全て同じように扱いたい
 - 掲載したい情報は変わりうる
 - このデータを扱う期間は限られているので、巧遅拙速で
 変化に素早く対応したい
 7
  8. 作戦 
 
 1. コンテンツ担当の方がデータを集めると自動で別のシートに 
 整形される
 はてなブログもそれ以外のメディアもまとめてこの段階で 
 データを解決してしまう


    2. それをコピーして、__DATA__セクションにペーストする
 3. デプロイすれば内容が反映される
 必要なデータを全てスプレッドシート上で集めて、
 TSVとしてソースコードに埋め込んでしまう
 8
  9. 整形されたシート作成 - すでに情報がまとめられているシートがあるので、これを整形して必要 な情報がTSVとして得られるようにする
 9

  10. 整形されたシート作成 - ブログの情報はIMPORTXML関数を使って抜き出して整えた
 - はてなブログ以外のデータもここで扱いやすく整形した
 10

  11. シートの改善 - IMPORTXMLだと記事が多いとき必ずどこかがLoading...になってしまう
 - 同等の動作をGoogle Apps Scriptで実現することにした
 - ボタンを押すとGASの関数が走ってデータが更新される
 -

    データをコピーしたいタイミングは多くない。そのときボタンを押せば良い
 11
  12. 無事公開🎊 - シートで編集→ソースコードにコピペをやってもらって
 予定通り2021年11月7日に10周年ページが公開された
 - 当初予定していなかったタグラインも余裕を持って設置できた
 - 出す情報が変わっても素早く対応できる設計になるように
 作戦を立てていた
 -

    その後週に2回程度ずつ、掲載内容を更新していた
 - シートを更新して __DATA__ セクションにコピペするだけ
 12
  13. ふりかえって - 先に作戦を立てられたのがうまく効いた
 - 締め切りと要件を睨みつつうまい仕組みを作れた
 - IMPORTXMLでは件数的に厳しいということがわかって
 GASに切り替えた
 - 素朴な仕組みになっていたので切り替えも容易だった


    - 10周年ページは好評で、楽しいページになっています
 13