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
theoremoon
January 27, 2022
0
1.1k
はてなブログ10周年とエンジニアの関わり / Hatena Engineer Seminar #18
https://hatena.connpass.com/event/235821/
theoremoon
January 27, 2022
Tweet
Share
Featured
See All Featured
BBQ
matthewcrist
78
8.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
58
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
Infographics Made Easy
chrislema
237
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
Automating Front-end Workflow
addyosmani
1353
200k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Facilitating Awesome Meetings
lara
39
5.5k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
RailsConf 2023
tenderlove
0
510
How to train your dragon (web standard)
notwaldorf
71
5.1k
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