iPhoneのSafariでWebサイトを閲覧していると、ふとHTMLのソースを覗いてみたいと思ったりしたことがあったのだが、「View Source – HTML, JavaScript and CSS」という拡張機能アプリを使うと簡単に閲覧することができる。
目次
View Sourceのとは？
WebページのURLを貼り付けるとそのページのHTMLやJavaScript、CSSのソースを直ぐに開いてくれるアプリ本体の機能と、iOS 8から搭載されたSafariの拡張機能（Extension）の機能から直接開く機能が利用できるソースを閲覧するための拡張機能アプリ。
その他には、こんな細かい機能がある。
- アセットブラウジングでサイトで使用している画像や、リンク、JavaScript、CSSを一覧表示
- 開閉可能なツリー型のDOMブラウジング
- タイトルやページサイズ、更新日、文字コード、クッキーの情報を表示
- 拡張機能を閉じた後にカスタマイズJavaScriptを実行できる
- ソースコードのハイライト検索
- 行のラップ切替え
- テーマの選択
紹介動画。
ソースを閲覧するためのブックマークレットSnoopyもあるが、アプリの方がスムーズに動作して機能も多め。
View Sourceのダウンロード
アプリのダウンロードはこちらから。
View Sourceの使い方
アプリ本体での利用とSafariの拡張機能での利用ができるが、基本的には同じ。アプリ本体の場合は、URLを貼り付けるとWebページではなくソースコードそのものが表示される。
View Sourceの設定
Safariを開いたら「共有ボタン」をタップする。
拡張機能一覧が表示されたら、画面を左にスワイプして「その他」を選択する。
次に「View Source」を「オン」にする。
HTMLソースの表示
拡張機能一覧が再び表示されたらアイコンをタップする。
そうすると、こんな風にHTMLのソースコードが表示される。
機能
画面の右上の共有ボタンをタップするとこんなメニューが利用できる。
- Highlight string… ： ソースのハイライト検索
- Copy to Pasteboard ： クリップボードにソースをコピー
- Send as Email ： メールで送信
- Toggle Highlight ： ソースのハイライトの切替え
- Toggle Line Wrap ： ソースの改行の有無
- Choose Theme ： ソース画面のテーマ変更
ハイライト
「Highlight string…」を選択して文字列を検索すると、このようにハイライト表示してくれる。
テーマ
テーマはいくつか用意されており、こんな風に変更できる。
Assets画面
「Assets」画面。
画像やリンク、JavaScript、CSSへのリンクが一覧表示される。「Last Component」では、フルパスではなくファイル名で表記される。
DOM画面
DOM画面。
「Expand All」で全て展開、「Collapse All」で全て閉じ。
Scriptの実行
「Script」画面。
ここに記述したJavaScriptを記述すると、画面を閉じてSafari画面に戻った後にスクリプトを実行してくれる。サンプルでページタイトルとリンクタグを取得するスクリプトを入力して保存してみた。
「Save」を選択するとスクリプト名の入力画面に。
実際にスクリプトが実行された画面。
プロンプト画面が起動してページタイトルとリンクタグを取得できる状態になっている。ブックマークレットの代わりに使うことで、スマホでブログを書くのに便利かもしれない。
「Script」の「Load」一覧画面。
左にスワイプで素早く削除ができる。
