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.3k
はてなブログ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
820
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Speed Design
sergeychernyshev
32
1.2k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Visualization
eitanlees
149
16k
Become a Pro
speakerdeck
PRO
29
5.5k
BBQ
matthewcrist
89
9.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
The Language of Interfaces
destraynor
162
25k
KATA
mclloyd
32
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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