[初回公開] 2021年08月23日
パソコンでウェブサイトを表示する場合は簡単な操作で HTML ソースを見たりデバッグを行うことができるが、Android はパソコンのブラウザほどの機能が無く、HTML ソースの確認方法もパソコンと異なるためその方法について紹介する。
このページの目次
１．ウェブサイトの HTML ソースから得られる情報
ウェブサイトの HTML ソースで得られる情報としては、表示している画面を構成している HTML タグの他、広告やアクセス解析などサイト内に貼りつけられている外部サービスの利用状況を確認することができる。
場合によっては WordPress などどのような CMS を利用しているかといったウェブサイトの運用状態も把握することもできる。
パソコンのブラウザではウェブサイトを表示した状態でマウスを右クリックして表示されるメニューより「ソースの表示」を選択すると確認することができるが、Android などスマホには右クリックの操作が無いため次の方法で HTML ソースを確認する。
２．ウェブサイトの HTML ソースを確認する利用シーン
ウェブサイトの HTML ソースを確認する利用シーンは、主にウェブサイトを制作する現場で利用することが多い。
例えばパソコン版とスマホ版でウェブサイトのデザインやコンテンツを分けている場合、スマホ版サイトが意図した動作をしない原因を調査するために HTML ソースを用いられる。
スマホ向けのウェブサイトはパソコン版とは別にスマホ用の HTML を書き出す機能を利用している場合があり、スマホ実機で確認する時に HTML ソースを確認することがある。
３．Android でウェブサイトの HTML ソースを確認する方法
Android で HTML ソースを確認する方法としては、ブラウザを表示して URL の入力欄に下記のように「view-source:」を URLの http または https の前に付けると HTML ソースが表示される。
view-source:https:https://{ウェブサイトの URL}/
URL に「view-source:」を付けてエンタキーをタップまたは実行を行うと下図のように HTML が表示される。
留意事項として Android OS で動作する下記の 4 つのブラウザで view-source: が利用できるが、iOS の safari は view-source: に対応していないため HTML ソースを確認することはできない。
- Google Chrome
- FireFox
- Opera
- Microsoft Edge
４．パソコンでウェブサイトの HTML ソースを確認する方法
パソコンでウェブサイトの HTML ソースを確認する方法は、ウェブサイトを表示した状態でマウスを右クリックして表示されるメニューより「ソースの表示」を選択すると確認することができる。
また、ブラウザによっては開発者モードの機能があり、開発者モードの状態でウェブサイトを表示すると HTML ソースの他に表示までの時間測定や HTML を疑似的に変更してデバッグを行うことができる。
関連記事
ソフトウェアの WinMerge でテキストファイルとフォルダの内容を比較する方法
システムの開発現場ではプログラムとなるテキストファイルの内容を比較したり、フォルダ内にあるファイルの比較を行うことが多く、見落としを無くすためにソフトウェアの WinMerge を使って内容を比較して差分を把握…
【タイパ向倍速動画作成】PowerDirector で撮影した動画の再生速度を変更する方法
動画を撮影して YouTube や TikTok などにアップロードして公開する場合に、スピード感を出すために再生速度を早めたり、反対に遅くすることでリプレイのように演出することができ、動画編集ソフトの PowerDirector…
PowerDirector で動画の開始と終了を指定して数秒で切り抜き（トリミング）する方法
動画を撮影して YouTube や TikTok などにアップロードして公開する場合に、見せたくないシーンはカットして編集するのに一般的には動画編集ソフトを利用するが、開始と終了地点を設定すると指定した部分以外を破…
