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

https://hatena.connpass.com/event/235821/

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