Upgrade to Pro — share decks privately, control downloads, hide ads and more …

はてなブログ10周年とエンジニアの関わり / Hatena Engineer Seminar #18

theoremoon
January 27, 2022
1.1k

はてなブログ10周年とエンジニアの関わり / Hatena Engineer Seminar #18

theoremoon

January 27, 2022
Tweet

Transcript

  1. はてなブログ10周年と
    エンジニアの関わり
    Hatena Engineer Seminar #18
    id:Furutsuki

    View full-size slide

  2. id:Furutsuki
    - 株式会社はてな アプリケーションエンジニア

    - 2021年新卒

    - はてなブログチーム

    - 趣味はCTF

    - SECCON電脳会議で行われたRTACTFという

    イベントに出ました

    2

    View full-size slide

  3. はてなブログ
    - 2011年から提供しているブログサービス

    - 2021年11月7日でサービス開始から10周年 🎉

    3

    View full-size slide

  4. はてなブログ10周年 https://hatenablog.com/10th
    - 10年分のコンテンツが詰まったページです

    - 今日はこのページを作ったときの話をします

    4

    View full-size slide

  5. 10周年企画ページ
    - コンテンツをページに表示できるようにする部分を作ることに

    - やるとなってまず作戦を立てにいった

    - 締め切りがある程度近く、要件が固まりきっていない

    - 先輩エンジニアに同席してもらいつつ直接会話した

    - わかっている要件を明確にして、方針を立てる

    5

    View full-size slide

  6. 10周年ページの要件
    1. たくさんのブログや記事の紹介をしたい

     ブロガーによる寄稿記事など、はてなブログ以外の記事もある

    2. 掲載する記事については更新できるようにしたい

     週に2回程度、1ヶ月間はお題記事を更新する

    3. 掲載したい記事の情報はスプレッドシートでまとめている

     掲載したい情報は変わる可能性がある

    4. はてなブログ10周年の日に出せるように準備したい

    6

    View full-size slide

  7. 要件から考察

    - 記事の更新の反映はどのタイミングでできると良いか

    - アクセス毎に最新のデータソースに問い合わせなくて良いなら

    負担が減る

    - はてなブログのDBに載っていない情報がある

    - 事前にDBに入れるか、別のデータソースが必要になる。

    できるなら全て同じように扱いたい

    - 掲載したい情報は変わりうる

    - このデータを扱う期間は限られているので、巧遅拙速で

    変化に素早く対応したい

    7

    View full-size slide

  8. 作戦


    1. コンテンツ担当の方がデータを集めると自動で別のシートに

    整形される

    はてなブログもそれ以外のメディアもまとめてこの段階で

    データを解決してしまう

    2. それをコピーして、__DATA__セクションにペーストする

    3. デプロイすれば内容が反映される

    必要なデータを全てスプレッドシート上で集めて、

    TSVとしてソースコードに埋め込んでしまう

    8

    View full-size slide

  9. 整形されたシート作成
    - すでに情報がまとめられているシートがあるので、これを整形して必要
    な情報がTSVとして得られるようにする

    9

    View full-size slide

  10. 整形されたシート作成
    - ブログの情報はIMPORTXML関数を使って抜き出して整えた

    - はてなブログ以外のデータもここで扱いやすく整形した

    10

    View full-size slide

  11. シートの改善
    - IMPORTXMLだと記事が多いとき必ずどこかがLoading...になってしまう

    - 同等の動作をGoogle Apps Scriptで実現することにした

    - ボタンを押すとGASの関数が走ってデータが更新される

    - データをコピーしたいタイミングは多くない。そのときボタンを押せば良い

    11

    View full-size slide

  12. 無事公開🎊
    - シートで編集→ソースコードにコピペをやってもらって

    予定通り2021年11月7日に10周年ページが公開された

    - 当初予定していなかったタグラインも余裕を持って設置できた

    - 出す情報が変わっても素早く対応できる設計になるように

    作戦を立てていた

    - その後週に2回程度ずつ、掲載内容を更新していた

    - シートを更新して __DATA__ セクションにコピペするだけ

    12

    View full-size slide

  13. ふりかえって
    - 先に作戦を立てられたのがうまく効いた

    - 締め切りと要件を睨みつつうまい仕組みを作れた

    - IMPORTXMLでは件数的に厳しいということがわかって

    GASに切り替えた

    - 素朴な仕組みになっていたので切り替えも容易だった

    - 10周年ページは好評で、楽しいページになっています

    13

    View full-size slide