https://hatena.connpass.com/event/235821/
はてなブログ10周年とエンジニアの関わりHatena Engineer Seminar #18id:Furutsuki
View Slide
id:Furutsuki- 株式会社はてな アプリケーションエンジニア - 2021年新卒 - はてなブログチーム - 趣味はCTF - SECCON電脳会議で行われたRTACTFという イベントに出ました 2
はてなブログ- 2011年から提供しているブログサービス - 2021年11月7日でサービス開始から10周年 🎉 3
はてなブログ10周年 https://hatenablog.com/10th- 10年分のコンテンツが詰まったページです - 今日はこのページを作ったときの話をします 4
10周年企画ページ- コンテンツをページに表示できるようにする部分を作ることに - やるとなってまず作戦を立てにいった - 締め切りがある程度近く、要件が固まりきっていない - 先輩エンジニアに同席してもらいつつ直接会話した - わかっている要件を明確にして、方針を立てる 5
10周年ページの要件1. たくさんのブログや記事の紹介をしたい ブロガーによる寄稿記事など、はてなブログ以外の記事もある 2. 掲載する記事については更新できるようにしたい 週に2回程度、1ヶ月間はお題記事を更新する 3. 掲載したい記事の情報はスプレッドシートでまとめている 掲載したい情報は変わる可能性がある 4. はてなブログ10周年の日に出せるように準備したい 6
要件から考察 - 記事の更新の反映はどのタイミングでできると良いか - アクセス毎に最新のデータソースに問い合わせなくて良いなら 負担が減る - はてなブログのDBに載っていない情報がある - 事前にDBに入れるか、別のデータソースが必要になる。 できるなら全て同じように扱いたい - 掲載したい情報は変わりうる - このデータを扱う期間は限られているので、巧遅拙速で 変化に素早く対応したい 7
作戦 1. コンテンツ担当の方がデータを集めると自動で別のシートに 整形される はてなブログもそれ以外のメディアもまとめてこの段階で データを解決してしまう 2. それをコピーして、__DATA__セクションにペーストする 3. デプロイすれば内容が反映される 必要なデータを全てスプレッドシート上で集めて、 TSVとしてソースコードに埋め込んでしまう 8
整形されたシート作成- すでに情報がまとめられているシートがあるので、これを整形して必要な情報がTSVとして得られるようにする 9
整形されたシート作成- ブログの情報はIMPORTXML関数を使って抜き出して整えた - はてなブログ以外のデータもここで扱いやすく整形した 10
シートの改善- IMPORTXMLだと記事が多いとき必ずどこかがLoading...になってしまう - 同等の動作をGoogle Apps Scriptで実現することにした - ボタンを押すとGASの関数が走ってデータが更新される - データをコピーしたいタイミングは多くない。そのときボタンを押せば良い 11
無事公開🎊- シートで編集→ソースコードにコピペをやってもらって 予定通り2021年11月7日に10周年ページが公開された - 当初予定していなかったタグラインも余裕を持って設置できた - 出す情報が変わっても素早く対応できる設計になるように 作戦を立てていた - その後週に2回程度ずつ、掲載内容を更新していた - シートを更新して __DATA__ セクションにコピペするだけ 12
ふりかえって- 先に作戦を立てられたのがうまく効いた - 締め切りと要件を睨みつつうまい仕組みを作れた - IMPORTXMLでは件数的に厳しいということがわかって GASに切り替えた - 素朴な仕組みになっていたので切り替えも容易だった - 10周年ページは好評で、楽しいページになっています 13
caitiem20
paigeccino
robhawkes
rasmusluckow
marcelosomers
holman
soudai
garrettdimon
chriscoyier
jrom
destraynor
paulrobertlloyd