Webページの制作や学習をしていると、スマホでもHTMLのソースコードを確認したくなることがあります。
しかし、スマホ版Firefoxでソース表示をしようとして、方法がわからずに困った経験はありませんか?
この記事では、Firefoxスマホ版でのソース表示方法と、現在の制約、そして代替手段について詳しく解説します。
スマホ版Firefoxの現状
結論から申し上げますと、現在のFirefoxスマホ版(Android・iOS)では、標準機能としてWebページのソース表示ができません。
以前は「view-source:」というURLプレフィックスや専用アドオンを使用してソース表示が可能でしたが、Firefox for Androidの大幅な刷新(Fenixプロジェクト)に伴い、この機能が削除されてしまいました。
古い情報に注意
インターネット上には「Firefoxスマホ版でもソース表示できる」という情報が残っていますが、これらの多くは2020年以前の古い情報です。
現在のバージョンでは動作しないため、注意が必要です。
PC版Firefoxでのソース表示方法(参考)
スマホ版の説明の前に、PC版Firefoxでのソース表示方法を確認しておきましょう。
方法1: 右クリックメニューから
Webページ上で右クリックし、メニューから「ページのソース」を選択します。
新しいタブでHTMLソースが表示されます。
方法2: ショートカットキー
Ctrl + U(Windows・Linux)またはCommand + U(Mac)を押すことで、すぐにソース表示できます。
方法3: メニューから
ウィンドウ上部の「ツール」メニューを開き、「ウェブ開発」→「ページのソース」と選択します。
開発者ツールの利用
F12またはCtrl + Shift + Iを押すと、インタラクティブな開発者ツールが起動します。
これにより、ソースコードやCSS設定を確認しながら、変更がWebページにどう影響するかをリアルタイムで確認できます。
Firefoxスマホ版でソース表示する方法
標準機能では不可能ですが、拡張機能を使用することでソース表示が可能になります。
拡張機能「View Page Source」を使用する方法
ステップ1: 拡張機能のインストール
Firefox for Androidを開き、以下のいずれかの方法で拡張機能をインストールします。
- Firefoxのメニュー(右上の三本線アイコン)を開く
- 「アドオン」を選択
- 検索窓で「View Page Source」を検索
- インストールボタンをタップ
または、Firefox Add-ons公式サイトから直接インストールすることもできます。
ステップ2: ソース表示の実行
拡張機能をインストールすると、Firefoxのメニューに「View Page Source」という項目が追加されます。
- ソースを表示したいWebページを開く
- Firefoxのメニュー(三本線アイコン)を開く
- 「View Page Source」を選択
- 新しいタブでHTMLソースが表示される
別の拡張機能「View Page Source (Mobile)」
もう一つの選択肢として、View Page Source (Mobile)という拡張機能もあります。
こちらも同様に、メニューからソース表示が可能になります。
Android Chromeでのソース表示方法
Firefoxではなく、Android版Google Chromeを使用する場合は、より簡単な方法があります。
view-source: プレフィックスを使用
- ソースを表示したいWebページを開く
- アドレスバーをタップしてURLを表示
- URLの先頭に「view-source:」を追加
- Enterキーを押す
例:
- 元のURL:
https://www.example.com - 変更後:
view-source:https://www.example.com
この方法は、Android版Chromeだけでなく、PC版の各種ブラウザでも使用できます。
注意点
この「view-source:」プレフィックスは、現在のFirefox for Androidでは動作しません。
以前は使用できましたが、Fenixへの移行後に利用できなくなりました。
開発者コミュニティでは機能の復活が要望されており、GitHubのIssue #3972で議論が続いていますが、2025年1月現在、まだ実装されていません。
iPhoneでのソース表示方法
iOS版Firefoxでも、Android版と同様に標準機能ではソース表示ができません。
iPhoneでソース表示をする場合は、以下の方法があります。
方法1: 専用アプリを使用
App Storeから「View Source」という無料アプリをダウンロードして使用します。
- App Storeで「View Source」を検索してインストール
- アプリを起動
- ソースを表示したいWebページのURLを入力
- HTMLソースが表示される
方法2: ブックマークレットを作成
Safari(またはChrome)でブックマークレットを作成する方法もあります。
- 任意のページをブックマークに追加
- ブックマークを編集
- URLの部分に以下のJavaScriptコードを貼り付ける
javascript:(function(){var script=document.createElement('script');script.src="//cdn.jsdelivr.net/npm/eruda";document.body.appendChild(script);script.onload=function(){eruda.init()}})();- ソースを表示したいページでこのブックマークをタップ
この方法では、Erudaという開発者ツールが起動し、ソース表示だけでなく、コンソールやネットワークの確認も可能になります。
方法3: 有料アプリ「Inspect Browser」
より高機能な開発者ツールが必要な場合、「Inspect Browser」という有料アプリ(約1,500円)があります。
ソース表示だけでなく、ネットワークリクエストやストレージの確認も可能です。
オンラインツールを利用する方法
アプリや拡張機能をインストールしたくない場合は、オンラインツールを利用する方法もあります。
Source Code Viewer
Source Code ViewerなどのWebサービスを利用できます。
- オンラインツールのサイトを開く
- URLを入力欄に貼り付け
- 「View Source」ボタンをクリック
- ソースが表示される
この方法は、どのブラウザでも使用できますが、インターネット接続が必要です。
スマホでソース表示が必要な場面
スマホでHTMLソースを確認する場面として、以下のようなケースがあります。
Web制作の確認
レスポンシブデザインのサイトを制作している場合、スマホでの表示を確認しながらソースコードをチェックする必要があります。
学習目的
HTMLやCSSを学習中の方が、参考サイトのコードを確認する際に便利です。
トラブルシューティング
自分のサイトがスマホで正しく表示されない場合、ソースを確認してエラーを見つけることができます。
SEO確認
メタタグの設定や構造化データが正しく実装されているかを確認する際に使用します。
ソース表示の制約
スマホでのソース表示には、いくつかの制約があることを理解しておきましょう。
クライアントサイドのみ表示
表示されるのは、クライアントサイド(ブラウザで実行される)のHTML、CSS、JavaScriptのみです。
サーバーサイドのスクリプト(PHP、Python、Rubyなど)やデータベースの内容は確認できません。
画面サイズの制約
スマホの小さな画面でソースコードを読むのは、PCと比較して困難です。
長いコードを確認する場合は、PC版ブラウザの使用を推奨します。
検索機能の活用
スマホでソース表示した場合、ブラウザの「ページ内検索」機能を使うことで、特定のタグやクラス名を素早く見つけることができます。
まとめ
Firefoxスマホ版では、標準機能としてWebページのソース表示ができなくなりました。
Android版Firefoxでソース表示する方法:
- 拡張機能「View Page Source」または「View Page Source (Mobile)」をインストール
- または、Android版Chromeで「view-source:」プレフィックスを使用
iOS版Firefoxでソース表示する方法:
- 専用アプリ「View Source」を使用
- ブックマークレットを作成
- 有料アプリ「Inspect Browser」を使用
その他の選択肢:
- オンラインツールを利用
- PCでFirefoxを使用(標準機能が利用可能)
Firefoxの開発チームには機能復活の要望が多数寄せられていますが、2025年1月現在、実装の予定は明らかになっていません。
当面は、拡張機能を使用するか、他のブラウザを併用することで対応する必要があります。
Web制作やプログラミング学習を本格的に行う場合は、やはりPC環境の整備を推奨します。
ただし、外出先での簡易的な確認や学習であれば、本記事で紹介した方法で十分対応可能です。
参考情報
本記事は、以下の信頼できる情報源を参考に作成しました。
コメント