iPhoneのSafariでHTMLソースを表示する拡張機能アプリView Source

iPhoneのSafariでHTMLソースを表示する拡張機能アプリView Source

iOS
4.31

iPhoneのSafariでWebサイトを閲覧していると、ふとHTMLのソースを覗いてみたいと思ったりしたことがあったのですが、「View Source – HTML, JavaScript and CSS」という拡張機能アプリを使うと簡単に閲覧することができます。

View Sourceの主な特徴

SafariでHTMLソースを表示する拡張機能アプリ

WebページのURLを貼り付けるとそのページのHTMLやJavaScript、CSSのソースを直ぐに開いてくれるアプリ本体の機能と、iOS 8から搭載されたSafariの拡張機能(Extension)の機能から直接開く機能が利用できるソースを閲覧するための拡張機能アプリです。

その他には、こんな細かい機能があります。

  • アセットブラウジングでサイトで使用している画像や、リンク、JavaScript、CSSを一覧表示
  • 開閉可能なツリー型のDOMブラウジング
  • タイトルやページサイズ、更新日、文字コード、クッキーの情報を表示
  • 拡張機能を閉じた後にカスタマイズJavaScriptを実行できる
  • ソースコードのハイライト検索
  • 行のラップ切替え
  • テーマの選択

紹介動画です。
横画面で使うといいかもしれません。

ソースを閲覧するためのブックマークレットSnoopyもありますが、アプリの方がスムーズに動作して機能も多めです。

今すぐアプリをダウンロード

View Sourceの使い方

アプリ本体での利用とSafariの拡張機能での利用ができますが、基本的には同じです。
アプリ本体の場合は、URLを貼り付けるとWebページではなくソースコードそのものが表示されます。

それではSafariでの拡張機能を使ったやり方を紹介します。
Safariを開いたら「共有ボタン」をタップします。
Safariを開く

続きを読む

拡張機能一覧が表示されたら、画面を左にスワイプして「その他」を選択します。
その他を選択

次に「View Source」を「オン」にします。
View Sourceをオンに

拡張機能一覧が再び表示されたらアイコンをタップします。
アイコンを選択

そうすると、こんな風にHTMLのソースコードが表示されます。
表示されたHTMLソース

画面の右上の共有ボタンをタップするとこんなメニューが利用できます。

  • Highlight string… : ソースのハイライト検索
  • Copy to Pasteboard : クリップボードにソースをコピー
  • Send as Email : メールで送信
  • Toggle Highlight : ソースのハイライトの切替え
  • Toggle Line Wrap : ソースの改行の有無
  • Choose Theme : ソース画面のテーマ変更

共有機能

「Highlight string…」を選択して文字列を検索すると、このようにハイライト表示してくれます。
ソースのハイライト検索

テーマはいくつか用意されており、こんな風に変更できます。
ソースコード画面のテーマ変更

「Assets」画面です。
画像やリンク、JavaScript、CSSへのリンクが一覧表示されます。「Last Component」では、フルパスではなくファイル名で表記されます。
アセット

DOM画面です。
「Expand All」で全て展開、「Collapse All」で全て閉じます。
DOMビュー

「Script」画面です。
ここに記述したJavaScriptを記述すると、画面を閉じてSafari画面に戻った後にスクリプトを実行してくれます。
サンプルでページタイトルとリンクタグを取得するスクリプトを入力して保存してみました。
JavaScriptを入力

「Save」を選択するとスクリプト名の入力画面に。
Script前を入力

実際にスクリプトが実行された画面です。
プロンプト画面が起動してページタイトルとリンクタグを取得できる状態になっています。
ブックマークレットの代わりに使うことで、スマホでブログを書くのに便利かもしれません。
SafariでのJavaScriptの実行

「Script」の「Load」一覧画面です。
左にスワイプで素早く削除ができます。
JavaScriptのLOAD一覧画面

今すぐアプリをダウンロード
  • アプリ名:View Source – HTML, JavaScript and CSS
  • 販売者: Paul Hudson
  • 価格(掲載時): 100円
  • アプリサイズ:3.8MB
  • バージョン(掲載時):2.0