Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
はてなブログ10周年とエンジニアの関わり / Hatena Engineer Seminar #18
Search
Furutsuki
January 27, 2022
0
1.2k
はてなブログ10周年とエンジニアの関わり / Hatena Engineer Seminar #18
https://hatena.connpass.com/event/235821/
Furutsuki
January 27, 2022
Tweet
Share
More Decks by Furutsuki
See All by Furutsuki
小さく始める チームでのセキュリティインシデント対応演習 / Hatena Engineer Seminar #29
theoremoon
1
580
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
63
4.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Done Done
chrislema
179
15k
Designing for humans not robots
tammielis
247
25k
GitHub's CSS Performance
jonrohan
1026
450k
Typedesign – Prime Four
hannesfritz
37
2.2k
How GitHub (no longer) Works
holman
305
140k
The Pragmatic Product Professional
lauravandoore
29
6.1k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Code Review Best Practice
trishagee
58
16k
Transcript
はてなブログ10周年と エンジニアの関わり Hatena Engineer Seminar #18 id:Furutsuki
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