iPad や iPhone から Web ページのソースを表示したいと思ったことはありませんか?残念ながら、モバイル Safari には独自の機能が含まれておらず、モバイル Web インスペクター ツールキットもまだ組み込まれていませんが、カスタム ブックマークレットを使用すると、iOS および iPadOS で任意の Web ページのソースを表示できます。

この記事では、ブックマークレットと JavaScript のトリックを使用して、iPad および iPhone の Safari でソースを表示できるように設定する方法を説明します。

iPad および iPhone の Safari でソースを表示する方法

1. Safari をまだ開いていない場合は、開いてください
2. この Web ページ (またはその他のページ) を iPad、iPhone、または iPod touch の Safari でブックマークし、ブックマークに「ソースを表示」という名前を付けます
3. ここをクリックしてブックマークレット JavaScript を表示し、[すべて選択] を選択します -> コピー
4. Safariの新規ブラウザ画面でブックマークアイコンをタップし、「編集」をタップし、手順2で保存したブックマークをタップします
5. 手順 3 でコピーした JavaScript コードを URL バーに貼り付け、[完了] をタップして変更をブックマークに保存します
6. iPad または iPhone で Web ページのソースを表示する場合は、[ブックマーク] メニューを開いて [ソースの表示] を選択します
7. ソース コードは強調表示された構文で表示され、クリック可能なソース URL が表示されます

注意すべき重要な点の 1 つは、ここで使用されている JavaScript が、ソースを表示しているページを処理のために michelsen.dk サーバーに送信することです。他の解決策があることに慣れていない場合は、構文が強調表示されず、全体的にそれほど洗練されていません.

たとえば、以下の Javascript をブックマークレットとして使用してソースを表示することもできます。これはリモート サーバーを介して処理されませんが、構文の強調表示は使用されません:

javascript:(function(){var a=window.open('about:blank').document;a.write(''+location. href+'');a.close();var b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace='pre-wrap ';b.appendChild(a.createTextNode(document.documentElement.innerHTML))})();

同様のヒントでは、編集済みのブックマークを利用して、iPhone または iPad の Mobile Safari で Firebug を実行することもできます。これは、一部の Web 開発者にとってもう少し役立つかもしれません。

このすばらしいヒントは、Michelsen.dk から提供されています。 Twitter で見つけたので、そちらもフォローしてください

いつの日か、iOS および iPadOS の Safari にネイティブでソースを表示する機能が追加されるのでしょうか?それまでは、このようなパーティー アプリやツールに頼る必要があります。

これはテストでは問題なく機能しましたが、一部のユーザーは、Safari および iOS のさまざまな新しいバージョンで異なる結果を報告しています。以下のコメント欄で、あなたに適したものと、使用している iOS のバージョンと iPad または iPhone をお知らせください。