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