スマホサイトをチェックしていて、「この部分、どういうコードで書かれているんだろう？」と気になったことはありませんか？
Web制作を勉強中の学生さんや、仕事で急な修正確認が必要になったエンジニアの方。あるいは、ただただ好奇心から「スマホでHTMLって見られるの？」と思っているあなたへ。
実は、iPhoneのSafariには「HTMLソースを見る」機能が標準では隠されています。でも大丈夫。この記事では、無料アプリを使った確実な方法から、Safariだけで完結する裏技まで、あらゆる「iPhoneでHTMLを開く」方法を解説します。最後には、オフラインで保存したHTMLファイルを開く方法も紹介するので、ぜひ最後まで読んでみてください。
なぜiPhoneでHTMLを見る必要があるのか？
そもそも、スマホでHTMLのソースコードを見たい場面とはどんな時でしょうか。大きく分けて、次の3つのケースが考えられます。
まずは、学習や調査のため。通勤中やちょっとした空き時間に、気になるWebサイトの構造をサッと確認したい。デザインの参考に、どういうタグが使われているのか知りたい。そんな好奇心や向上心から調べたいと思う方は多いはず。
次に、緊急の確認やトラブルシューティング。外出先でクライアントや上司から「サイトの表示がおかしい」と連絡が入り、すぐに原因を確認しなければならない。そんなピンチの場面で、パソコンが手元になくてもiphoneさえあれば、最低限の調査が可能になります。
最後に、オフラインでの作業。あらかじめ保存しておいたHTMLファイルや、メールで受け取ったWebページのデータを[iPhone]で閲覧・編集したい。ネット環境が不安定な場所でも、事前に準備した資料を確認できるのは大きなメリットです。
方法1：専用アプリで確実にHTMLソースを表示する
最もオーソドックスで確実な方法が、App Storeで公開されている「ソースコードビューワー」アプリを利用することです。無料で使える優秀なアプリがいくつもあるので、まずはこちらから試してみるのがおすすめ。
特におすすめなのは「View Source」というアプリ。その名の通り、HTMLソースを見ることに特化したシンプルなツールです。使い方はカンタンで、アプリを起動してURLを入力するだけ。すると、そのページのHTMLコードがすっきりとした画面で表示されます。
「View Source」の良いところは、コードが見やすいこと。ソース内の検索ができたり、見やすいフォントで表示されたりと、基本的な機能はしっかり備えています。さらに、このアプリの真価が発揮されるのはSafariとの連携時。
実は「View Source」は、Safariの「拡張機能」として登録することができます。設定アプリからSafari→拡張機能と進み、「View Source」をオンにしましょう。設定後は、Safariで見ているページの共有ボタンからワンタップでソース表示が可能に。別アプリを行き来する手間が省け、作業効率がグッと上がります。
方法2：Safariだけを使ったHTML表示の裏技
「アプリをインストールしたくない」「今すぐにでも試したい」という方には、Safariのブックマークレットを使う方法があります。少しだけ設定が必要ですが、一度設定してしまえば、あとはブックマークをタップするだけでHTMLソースが表示できるようになります。
具体的な手順を説明しましょう。まず、Safariで新しいページを開き、URL入力欄に次の長いコードをコピー＆ペーストしてください：
javascript:(function(){var%20sourceWindow=window.open('about:blank');var%20xhr=new%20XMLHttpRequest();xhr.onreadystatechange=function(){if(xhr.readyState===4&&xhr.status===200){sourceWindow.document.write('<pre>'+xhr.responseText.replace(/[&<>]/g,function(m){return{'&':'&','<':'<','>':'>'}[m];})+'</pre>');}};xhr.open('GET',location.href);xhr.send();})();
次に、このURLをブックマークとして保存します。名前は「HTML表示」など分かりやすいものにしておきましょう。これで準備完了です。
実際にHTMLを見たいページで、このブックマークをタップしてください。新しいウィンドウが開き、そのページのソースコードが表示されます。仕組みとしては、JavaScriptを使ってページのHTMLを取得し、新しいウィンドウに表示しているのです。
この方法のメリットはアプリ不要で無料という点。デメリットとしては、複雑なJavaScriptが動いているサイトでは正しく表示されない場合があること、そしてCSSや画像などの関連ファイルまでは確認できないことです。
方法3：ローカルHTMLファイルを[iPhone]で開く方法
[iPhone]に保存されているHTMLファイルを開きたい場合、方法が少し変わってきます。メールに添付されてきたHTMLファイルや、クラウドストレージに保存した自作のWebページなどが該当します。
最もシンプルな方法は、「ファイル」アプリを使うこと。HTMLファイルが保存されている場所（iCloud Driveやダウンロードフォルダなど）を開き、該当ファイルをタップしましょう。すると、Safariが自動的に起動してHTMLファイルが表示されます。
ただし、ここで注意点が。SafariでローカルのHTMLファイルを開いた場合、同じフォルダ内にあるCSSファイルや画像ファイルが正しく読み込まれないことがあります。これはセキュリティ上の制限によるもので、特にオフラインで作業する際には困った状況になりがち。
この問題を解決するには、「HTML Viewer Q」のような専用アプリの利用が効果的です。このアプリはローカルファイルの表示に特化しており、CSSや画像などの関連リソースも正しく読み込んで表示してくれます。複数のHTMLファイルを行き来するような、ちょっとしたサイト制作の学習にも向いています。
高度な使い方：開発者視点での活用術
ここまで基本的な方法を紹介してきましたが、実際の開発現場や学習の場面では、もう一歩踏み込んだ使い方が求められることも。
例えば、レスポンシブデザインのチェック。最近のWebサイトは、PCとスマートフォンで表示を切り替えるのが当たり前になっています。実は、HTMLソースビューワーの中には、ユーザーエージェント（アクセス元のデバイス情報）を偽装できるものがあります。「HTML Viewer」アプリのプレミアム機能などがこれに該当し、スマホ表示用とPC表示用のHTMLを切り替えて確認することが可能です。
また、動的に生成されるコンテンツの確認にも注意が必要です。JavaScriptでページ読み込み後に追加される要素は、初期状態のHTMLソースには含まれていません。このようなケースでは、先ほど紹介したブックマークレット方式では完全な情報が得られないことがあります。
モダンなWebアプリケーション（SPA：シングルページアプリケーション）を調査したい場合は、より本格的なデバッグ環境が必要になることも覚えておきましょう。有線でMacと接続し、Safariの開発者メニューから「Webインスペクタ」を利用する方法もありますが、これは上級者向けの手法です。
安全に使うための注意点とマナー
最後に、iPhoneでHTMLソースを見る際の注意点をお伝えしておきます。
まず、著作権とプライバシーの尊重は絶対条件。どんなに素晴らしいコードでも、無断でコピーして自分のサイトに使うのは法律違反です。学習目的であっても、引用の範囲を守り、出典を明記するなどの配慮が必要です。
次に、アクセス制限のかかっているサイトには不用意にアクセスしないこと。パスワードで保護されたページや、社内限定のサイトなどは、たとえ技術的にアクセス可能でも、許可なくソースを閲覧してはいけません。
また、ソースビューワーアプリを選ぶ際は、信頼できる開発元のものを選ぶようにしましょう。レビューや評価を確認し、プライバシーポリシーもチェック。不審な権限を要求するアプリには注意が必要です。
iPhoneでHTMLを開く：あなたに合った方法を見つけよう
[iPhone]でHTMLソースを見る方法は、実に多様です。アプリをインストールする方法、Safariのブックマークレットを使う方法、ローカルファイルを開く方法…。どれが一番優れているというわけではなく、あなたの目的と状況に合わせて最適な方法を選ぶことが大切です。
急いでいるときはSafariの裏技を。しっかり調査したいときは専用アプリを。オフライン作業が多いなら、ローカルファイル対応のアプリを。
HTMLソースを読むことは、Webの仕組みを理解する第一歩。それが[iPhone]の小さな画面でできるというのは、現代ならではの学習環境と言えるでしょう。ぜひ、この記事で紹介した方法を試してみて、あなたの好奇心や作業効率を高めてください。新しい発見が、きっとあるはずです。
今すぐ[iPhone]を取り出して、気になるサイトのHTMLをのぞいてみませんか？ 思わぬコードの工夫や、参考になる書き方に出会えるかもしれません。
