COVID-19特集ページの裏側

新型コロナウイルス感染症(COVID-19)が流行を始めた時、エムスリーでは医療従事者の方々がCOVID-19の情報にアクセスできるようにいち早く特設ページを開設しました。本発表では特設ページを開設するにあたって使用した社内技術を中心に紹介していきます。

Transcript

1. Copyright © 2020 M3, Inc. All rights reserved. インターネットを活用し、 健康で楽しく長生きする人を１人でも増やし、 不必要な医療コストを１円でも減らすこと COVID-19特集ページの裏側
2. Copyright © 2020 M3, Inc. All rights reserved. 1 自己紹介 👨　名前：安江　築生（やすえ　きずき） 🏠　出身：福岡県 🏢　入社：2019年4月（２年目） 👥　所属：Unit4 󰞵　仕事：m3.com サイト 💻　技術：Play / Ruby on Rails / Google Apps Script ❤　好き：まどマギのマミさん
3. Copyright © 2020 M3, Inc. All rights reserved. 2 コロナ禍での取り組みの紹介
4. Copyright © 2020 M3, Inc. All rights reserved. 3 COVID-19特集ページ
5. Copyright © 2020 M3, Inc. All rights reserved. 4 COVID-19特集ページ 現在の感染者数 （日本/世界） 他のCOVID-19 ページへのリンク 編集部が厳選した 注目記事 都道府県ごとの 新着記事
6. Copyright © 2020 M3, Inc. All rights reserved. 5 COVID-19特集ページ 都道府県ごとの 感染者数 記事評価 ランキング ...他省略
7. Copyright © 2020 M3, Inc. All rights reserved. 6 時系列
8. Copyright © 2020 M3, Inc. All rights reserved. 7 時系列 1/27 ページ 公開 2/7 アン ケート開始 2/18 記事ラ ンキング 3/3 デザイ ン更新 3/12 プレス リリース 4/3 フルリ モート 4/27 SPアプ リ対応 5/21 感染者数 の自動更新 3/6 感染者 数グラフ 4/22 記事更 新の競合解消
9. Copyright © 2020 M3, Inc. All rights reserved. 8 時系列 2/7 アン ケート開始 2/18 記事ラ ンキング 3/3 デザイ ン更新 3/12 プレス リリース 4/3 フルリ モート 4/27 SPアプ リ対応 5/21 感染者数 の自動更新 3/6 感染者 数グラフ 1/27 ページ 公開 4/22 記事更 新の競合解消
10. Copyright © 2020 M3, Inc. All rights reserved. 9 時系列 2/7 アン ケート開始 2/18 記事ラ ンキング 3/3 デザイ ン更新 3/12 プレス リリース 4/3 フルリ モート 4/27 SPアプ リ対応 5/21 感染者数 の自動更新 3/6 感染者 数グラフ 4/22 記事更 新の競合解消 1/27 ページ 公開
11. Copyright © 2020 M3, Inc. All rights reserved. 10 ページ公開 サイト担当による判断で、医療従事者にCOVID-19の情報を素早く提供したい サービス間で共通する認証機能、コンポーネントは同じものを利用したい →特集ページを手軽に作成・公開できる社内ツール m3comlp を活用 m3comlp サイト担当 特集ページ 医療従事者
12. Copyright © 2020 M3, Inc. All rights reserved. 11 m3comlp 特集ページ 医療従事者 HTML m3comlp m3comlp: エンジニアを介さずにランディングページ(LP)を公開できる社内ツール 　※COVID-19特集ページ作成以前にも、エンジニアへのLPの作成依頼は増加傾向 　　その度に長いリードタイム(見積〜実装〜QA〜公開)が発生
13. Copyright © 2020 M3, Inc. All rights reserved. 12 m3comlp m3comlp: エンジニアを介さずにランディングページ(LP)を公開できる社内ツール 　※COVID-19特集ページ作成以前にも、エンジニアへのLPの作成依頼は増加傾向 　　その度に長いリードタイム(見積〜実装〜QA〜公開)が発生 特集ページ 医療従事者 プレビュー m3comlp
14. Copyright © 2020 M3, Inc. All rights reserved. 13 m3comlp 特集ページ 医療従事者 ボタンを押すとすぐ公開 m3comlp m3comlp: エンジニアを介さずにランディングページ(LP)を公開できる社内ツール 　※COVID-19特集ページ作成以前にも、エンジニアへのLPの作成依頼は増加傾向 　　その度に長いリードタイム(見積〜実装〜QA〜公開)が発生
15. Copyright © 2020 M3, Inc. All rights reserved. 14 短いリードタイムで時期を逃さない 写真提供（写真AC) Build a prototype as soon as possible
16. Copyright © 2020 M3, Inc. All rights reserved. 15 時系列 1/27 ページ 公開 2/7 アン ケート開始 3/3 デザイ ン更新 3/12 プレス リリース 4/3 フルリ モート 4/27 SPアプ リ対応 5/21 感染者数 の自動更新 3/6 感染者 数グラフ 4/22 記事更 新の競合解消 2/18 記事ラ ンキング
17. Copyright © 2020 M3, Inc. All rights reserved. 16 記事ランキング 多くのCOVID-19関連記事の中から、医療従事者に質の良い記事を提供したい →他の医療従事者に勧めたい記事を10段階でアンケート 　結果を集計し、特集ページにランキング表示
18. Copyright © 2020 M3, Inc. All rights reserved. 17 記事ランキング 多くのCOVID-19関連記事の中から、医療従事者に質の良い記事を提供したい →他の医療従事者に勧めたい記事を10段階でアンケート 　結果を集計し、特集ページにランキング表示 Ibis アンケート システム Nielsen ランキング システム 参考に なった
19. Copyright © 2020 M3, Inc. All rights reserved. 18 Ibis & Nielsen Ibis: アンケート結果をTablueで解析、次の施策を考える（詳細はテックブログ） Nielsen: 記事のPVからハイライト記事リストを出力 　目的の異なるサービスを組み合わせて課題を解決 集計して ランキング 出力 アンケート 結果を BigQueryに 記事のPV 次の施策など 参考に なった
20. Copyright © 2020 M3, Inc. All rights reserved. 19 写真提供（写真AC) 社内ツールのレバレッジを効かせよう Use software leverage to your advantage
21. Copyright © 2020 M3, Inc. All rights reserved. 20 時系列 1/27 ページ 公開 2/7 アン ケート開始 2/18 記事ラ ンキング 3/3 デザイ ン更新 3/12 プレス リリース 4/3 フルリ モート 4/27 SPアプ リ対応 5/21 感染者数 の自動更新 3/6 感染者 数グラフ 4/22 記事更 新の競合解消
22. Copyright © 2020 M3, Inc. All rights reserved. 21 記事更新の競合解消 m3comlp は１つのページを複数の人が同時に更新できない 記事リストも増えてHTMLの修正ミスも増えてきた セクションごとにニュースを掲載 同じページの別の箇所を 別の人たちが更新 更新頻度もバラバラ ...
23. Copyright © 2020 M3, Inc. All rights reserved. 22 記事更新の競合解消 m3comlp は１つのページを複数の人が同時に更新できない 記事リストも増えてHTMLの修正ミスも増えてきた
24. Copyright © 2020 M3, Inc. All rights reserved. 23 記事更新の競合解消 m3comlp は１つのページを複数の人が同時に更新できない 記事リストも増えてHTMLの修正ミスも増えてきた
25. Copyright © 2020 M3, Inc. All rights reserved. 24 記事更新の競合解消 m3comlp は１つのページを複数の人が同時に更新できない 記事リストも増えてHTMLの修正ミスも増えてきた
26. Copyright © 2020 M3, Inc. All rights reserved. 25 Google Apps Script 記事リストをスプレッドシートで管理。GASでHTMLに変換し、S3にアップロード 特集ページでは S3にあるHTMLをjQueryでフェッチし、挿入する →担当者ごとに別々のファイルを更新するので、記事修正時のロック宣言が不要 同時編集可能 それぞれ別のシートで作業
27. Copyright © 2020 M3, Inc. All rights reserved. 26 時系列 1/27 ページ 公開 2/7 アン ケート開始 2/18 記事ラ ンキング 3/3 デザイ ン更新 3/12 プレス リリース 4/3 フルリ モート 4/27 SPアプ リ対応 3/6 感染者 数グラフ 4/22 記事更 新の競合解消 5/21 感染者数 の自動更新
28. Copyright © 2020 M3, Inc. All rights reserved. 27 感染の現状把握のため、新型コロナ感染者数の表・グラフを掲載 感染者数の自動更新
29. Copyright © 2020 M3, Inc. All rights reserved. 28 手作業の範囲 感染の現状把握のため、新型コロナ感染者数の表・グラフを掲載 厚生労働省のウェブページおよびPDFが元データ 元データを手作業でExcelファイルに写して整形、m3comlpに貼り付けていた 感染者数の自動更新
30. Copyright © 2020 M3, Inc. All rights reserved. 29 自動化の範囲 既存のExcelファイルの内容をスプレッドシートで管理 GASを使ってPDF/HTMLをスクレイピング〜S3アップロードまで自動化 →数字のうち間違えや更新忘れなどがなくなった。休日も更新されるようになった Google Apps Script
31. Copyright © 2020 M3, Inc. All rights reserved. 30 写真提供（Shutterstock) 手作業は可能な限り自動化しよう Laziness, Impatience, Hubis
32. Copyright © 2020 M3, Inc. All rights reserved. 31 まとめ
33. Copyright © 2020 M3, Inc. All rights reserved. 32 写真提供（Shutterstock) プログラミング活動に万能薬はありません No Silver Bullet in programming
34. Copyright © 2020 M3, Inc. All rights reserved. 33 写真提供（Shutterstock) 状況に応じたツールを組み合わせる
35. Copyright © 2020 M3, Inc. All rights reserved. 34 写真提供（写真AC) 様々なツールを駆使して コロナに打ち勝とう！