モバイルブラウザからWebページのソースコードを表示する方法

スマートフォンやタブレットデバイスといったPC以外のデバイスからWebページにアクセスするシーンが増えている。ハードウェア性能の差もあり、PCのブラウザからアクセスする場合と比べて、こういったデバイスからアクセスしたときの方がページの表示はモッサリと重さを感じることが多い。しかしこれはただハードウェア的な性能差というよりも、モバイルデバイス特有の処理にWebページの方が適合していないという理由もある。

どのようにデータ通信が実施され、どういった順序でWebページのレンダリングが実施されるかといったことはPCで動作するブラウザであれば比較的容易に調べることができる。ブラウザがデフォルトで提供している開発ツールや、エクステンション/プラグインとして後から追加したツールなどを使って調査できるようになっている。

PCのブラウザであれば当たり前に実施できるこうした作業が、モバイルデバイスのブラウザでは実施できない。なにが起っているか計測できないため、改善の手も打ちようがない、というわけだ。しかし状況は変わりつつある。最先端に関わるWebデベロッパはモバイルデバイスで動作するブラウザ向けの高速化技術などの模索をはじめている。

具体的にどういった作業を実施することになるかだが、GoogleでWebサイトの高速化に携わっているSteve Souders氏のDocsource mobile bookmarkletの記事がいい例といえる。この記事ではモバイルデバイスのブラウザでWebページのソースコードを表示させるテクニックを紹介している。すぐにソースコードを表示させることができるPCブラウザと異なり、モバイルブラウザではその機能が提供されていない。Steve Souders氏はブックマークレットを使うことでこれを実現する方法を紹介している。紹介されている方法をまとめると次のとおり。

1. 対象のデバイスのブラウザからhttp://www.stevesouders.com/を閲覧。
2. "Docsource mobile bookmarklet"という名前の記事を探してクリック。
3. 本文中の"click this link: Mobile Perf bookmarklet"のリンクを探してクリック。
4. ページをブックマークに保存。
5. 保存したブックマークを編集して、先頭から#javascriptという文字列の#までを削除して保存。
6. ソースコードを表示したいページを開いて、先ほど保存したブックマークをクリック。
7. しばらく待つとページ上部にメニューが表示されるので、メニューから「Docsource」を選択。
8. さらにメニューが表示されるので、そのページの上にソースコードを表示させるには「DOCSOURCE」をクリック、新しいページにソースコードを表示させるには「open in new window」をクリック。

スマートフォンなどのモバイルデバイスのブラウザでWebページのソースコードを表示させることに実用上の意味はほとんどない。そうではなく、次の点でこの記事は参考になる。

• Webページのソースコードを表示させるという作業でさえ、モバイルデバイスのブラウザで実施するのは大変面倒な作業。
• ここで紹介されている手順でブックマークレットを登録し、JavaScriptで組まれた開発ツールを使うというのが、今のところモバイルデバイスにおけるWeb開発で有用な方法とされている。

スマートフォンのハードウェア性能や搭載されるソフトウェアは日進月歩で開発が進められており、効果的な開発を実施するにはタイムリーに登場する技術を素早くキャッチアップし、活用できる技術として取り込んでいく必要がある。