Webポータルの表示速度改善

Webポータルが遅い(表示がもっさりしている)というご指摘を受けて調査したところ、イベントによっては終了間際のラストスパート時間にイベントページに集中的なアクセスがあるようで、この負荷が全体を引っ張り、平均応答時間が5秒を超えている時間帯があることがわかりました。

これまであまり Web ポータルの速度については考慮してきませんでしたが、5秒はちょっと腹立ちますし、APIにも影響が出ていたので改善してみました。

  1. リバースプロキシを設置してほぼ全てのリクエストを Cache-Control の max-age 期間だけキャッシュするようにしました。実はこれまではすべてのアクセスを Kestrel で動的処理していました。これには画像も含まれます。おそいですね。
  2. トップページ、イベントページ、道場リストはアクセス頻度が高いため、表示する ViewModel データを、次のイベントスコア更新タイミングまでの間、シリアライズして Redis にキャッシュするようにしました。
  3. イベントデータなどの各ページで共通的に使うマスタ情報も、 シリアライズして各ページ間で横断的にキャッシュするようにしました。
  4. 特定ページでしか使っていないライブラリ (Handsontable等) は、使用しているページでのみ取得するようにしました。

ボーダーbotのWebサーバはケチっていて、CPUも1コアしかないのである程度諦めはあります。いまのところ時間あたりで平均応答が 2秒を超えたケースは直近2週間で一度もなかったようなので、とりあえずこれで様子を見ます。

ツイート画像スタイルの刷新

2019年1月以来となる、ツイッター画像の全面的な変更を行いました。まだ一部のツイート画像は古いスタイルのままですが、漸次的に変更していきます。

変更前後の比較

変更前

変更後

※画像は改修中のものです。

変更のねらい

これまでにDMないしリプライでユーザから頂戴したご指摘を分析して対応しました。

1. 総合ランキングの上位報酬が判りやすいヘッダ画像にした

ボーダーbotのツイートにおいてご指摘が最も多いのは、「上位報酬が間違っている」です。ぶっちぎりで多いです。

しかしボーダーbotは総合ランキングの上位報酬カードは自動取得するようになっており、上位報酬が誤取得されるケースはほぼありません。ではなぜこの指摘が来るかというと、中間ランキング期間中には、ヘッダーに中間ランキングの上位報酬を出力していたためです。中間ランキング期間中は中間終了日を基準に出力した方がランナーは嬉しいだろうという前提で作られていました。

おそらく、利用しているユーザの一定数はそもそも中間イベントの存在を認識しておらず(または少なくとも重要視しておらず)、出力されている上位報酬の画像と想定している(=いま狙いに行こうとボーダーbotを参照している)上位報酬が異なったことが、この指摘につながったものと考えています。

これまでも注意書きなどを追加するなど小手先の改善を続けてきましたが、本格対応として、これまで上位報酬のミニアイコンを焼き付けていたヘッダーを、イベントトップ画像を背景にするよう変更しました。そのうえで、各ランキングの上位報酬アイドルはヘッダ外の本文中に貼り付けるようにしました。

実はイベントトップ画像と上位報酬は同一とは限りません(ex. 花見DEドリームライブフェスティバル)。とはいえ、少なくとも中間上位報酬ではなく、イベント中のメダル報酬SRなどのアイドルがトップ画像には設定されるため、問題ないだろうと思います。

2. 画像サイズをPCではなくスマートフォンに最適化した

ボーダーbot Webポータルの広告解析から、50%のユーザがアスペクト比 9:19.5 / 9:21 などの大型スマートフォンを利用してボーダーbotを見ていることがわかりました。スマートフォン・タブレットの割合は80%弱に上ります。(PCは残りの2割しかいない)

Redmi note 9sなどの最近のミドルレンジスマホにおいても縦長液晶の製品が増えていることから、横に延ばすよりは縦に延伸する画像に変更することにしました。

3. ミュージックJAMの並走4ランキングに対応した

イベント中に4つのランキング(総合+3つのステージ)が同時に並走するミュージックJAMに対応しました。

4. 日本語を解せないプロデューサーからの問い合わせを軽減する

これまでの設計方針として、「関連する内容はなるべく1枚の画像に集約したほうが、ヘビーユーザには使いやすいだろう」という想定で出力する画像をデザインしてきました。私はそれなりにヘビーにイベントを触っていますし、ボーダーbotも活用するなかで、その方が便利だったからです。

しかし、ボーダーbot利用者の15%は海外の(おそらくそのほとんどは日本語ネイティブではない)ユーザです。DeepLやGoogleで翻訳可能なWebポータルと異なり、ツイート画像は日本語を現地の言語に変換することができません。

1枚の画像に複数の内容が出力されている場合、日本語を読めない海外ユーザにはなにが複数載っているのか理解しがたいようで、「これはなんなのか」という問い合わせが来ることがあります。

現実問題として海外ユーザからの問い合わせは、日本語に翻訳したうえで送っていただいたとしても回答に体力がかかります。データの誤りなどへのご指摘はありがたいですが、同種の質問DMへの回答時間は削減したいのが正直なところです。

「1画像には1つの情報のみ」「比較は同時に1イベントのみ」に分離することで、文字を読まなくとも”なんとなく”なにが出力されているのかわかりやすいようにしました。

5. データの正確性を保証しない旨の追加

たまにmobageからのデータ取得タイミングによっては、値が不正確なことがあったり、データの欠損により新旧イベント間比較の結果が一時的に誤っていることがあるので、正確性が保証されない旨の記載を末尾に追加しました。

お叱りをいただいたことがありますので、これは「逃げ」として追加しています。

今後

  • UIの変更なので、おそらく見やすさとしては前の方がよかった~という意見もあると思います。私も前の方が良かったなと思う部分がまだあります。
  • とはいえ、誤解されづらくて、比較的はじめての方にわかりやすくて、かつ問い合わせが減るようになることが目下の優先事項です。

ボーダーbotの更新情報を記載するようにしました

4年以上にわたって改修と仕様変更とmobage側の変更への追随を続け続けた結果、デレマスボーダーbotの仕様はつぎはぎだらけになり、極めて複雑怪奇になりました。

最近はあとから質問を受けたとしても、いつどんな仕様になったかまったく覚えておらず、gitのコミットログを追わないと経緯も実装もわからないことが増えてきました。

つきましては、せめて更新情報くらいはきちんと残しておくべく、本ブログに修正内容をなるべく載せていく運用にしようと思います。

UIやツイートなど外から見える部分にとどまらず、おそらく一般ユーザにはあまり関わらないであろう内部変更についても、可能な範囲で記載していくことにします。