[ワークアラウンド]Android端末でDevelopersIOの記事を開いたらハングする事象をブラウザ側の設定で回避する

こんにちは、CX事業本部 IoT事業部の若槻です。

今回は、Android端末でDevelopersIOの記事（以降、記事）を開いたらハングする事象をブラウザ側の設定で回避するワークアラウンドを見つけたので共有します。

事象

タイトルの通りなのですが、Andoroidスマートフォン端末で弊社ブログメディアのDevelopersIOの記事をブラウザを使用して開くと、ブラウザアプリが数十秒程ハングする事象が発生する場合があります。

例えば私のスマートフォンですと、以前に私が書いた次の記事を開くとハングしてしまいます。

• [AWS CDK] Lambda@Edge関数の作成または更新時に自動的に最新バージョンを発行し、CloudFront Distributionに紐付ける | DevelopersIO

<img src="https://www.evernote.com/l/APcMB4Tp2f5LxLhZsxJJ3RlHNLC2ERAT45QB/image.jpg" width="300">

他にも同事象が発生する記事はいくつか見つかっています。また社内および社外からも同事象の報告が上がっています。

そこで本記事ではこの事象の暫定的な対処（以降、本対処）について紹介します。

おことわり

本記事では以下の事項については記載しません。

• 事象の原因、事象が発生する記事の条件
  • ただし、Chromiumに下記のバグがあり、シンタックスハイライトの行数が多い場合に発生しやすい、という情報は社内で把握しています。
    • 1297594 - Chrome for Android freezes on some websites using PrismJS - chromium
• 事象が発生する環境（機種、ブラウザなど）
• 本対処により事象が解消する環境
• クラスメソッドとしての本事象への対処方針

また本対処を試される場合は以下点についてもご了承ください。

• 本対処の実施により記事閲覧時にコンテンツ内の一部機能が使用できないなどの影響が出る可能性があります。
• 飽くまで暫定対処です。今後のDevelopersIOのアップデートにより本対処は不要となる可能性があります。

対処方法

Android版Google Chromeの場合の対処方法です。

メニューから[設定]を開く。
<img src="https://www.evernote.com/l/APcDxVmkc-FDzLnL2IoD2J2vKOOipY2zzZQB/image.jpg" width="300">

[詳細設定 > サイトの設定]を開く。
<img src="https://www.evernote.com/l/APfDfhHWSy1JMIDGVrxjQswwij07aTQFvKoB/image.jpg" width="300">

[JavaScript]を開く。
<img src="https://www.evernote.com/l/APeswVJ5Z0dFNb4gwXCRYq426irPv6NtEssB/image.jpg" width="300">

サイトの例外としてdev.classmethod.jpを追加する。
<img src="https://www.evernote.com/l/APdT4vj3MQxAKazLCV3jo2NUB0yWW4rhwrUB/image.jpg" width="300">

追加できました。設定はこれで完了です。
<img src="https://www.evernote.com/l/APf3VcT2oHVKmaj_DseHtF5j-UvK4vOfyQgB/image.jpg" width="300">

冒頭に載せた事象が発生した記事を再度開いてみると、ハングせずに開けました！ただしアイキャッチやアイコンなど一部画像の読み込みはできていないようです。
<img src="https://www.evernote.com/l/APfOZK-lfi9Ka7wG5UufCyffTNn0X3XvGaYB/image.jpg" width="300">

またコードブロックでシンタックスハイライトが適用されなくなっていました。
<img src="https://www.evernote.com/l/APdEp4nT9r1BLJyV28p6zXNLQ9teEd1mrr4B/image.jpg" width="300">

記事によるかと思いますが、これくらいの制限であればハングするよりマシなので許容できそうです！

以上