iPadやiPhoneのSafariでWebページのソースコードを見る方法

iPadやiPhoneのSafariを使っているとき、閲覧しているWebページのソースコードを見たいことがあったので、Shortcutを作成しました。どのようなものかは次のDemo映像をご覧ください。

ダウンロード

“View Source Code”ショートカットをiCloudからダウンロード

なお、サードパーティ製のショートカットをインストールするには事前に“共有ショートカットを有効にする”設定を行ってください。

機能

ShortcutsアプリのギャラリーにもApple謹製の“View Source”なるShortcutはありますが、Plainテキストで表示されるため見辛いなぁ…と思い、次の機能を持ったソースコードビュアーが欲しくなり、つくった次第です。
  • 行番号の表示
  • Beautifyされたソースコード
  • 各種テーマによるコードのHighlight
  • Wrapやインデントサイズの設定可能性
加えて、Prism.jsのプラグイン“Autolinker”により、ソースコード中のURLにリンクが付与される機能も用意してみました。

使い方

  1. Safariでサイトを閲覧
  2. 共有シートを開く
  3. “View Source Code”を選択
Safariにて共有シートを表示している場面のスクリーンショット
共有シート内の“View Source Code”を選択

なお、本ショートカットでは閲覧中のWebページに、とあるJavaScriptコードをインジェクトしてWebページのソースコードを取得、表示する仕組みを採用しています。そのため、ドメインごとに本ショートカットの実行許可が求められます。

実行許可が表示されている画面のスクリーンショット
JavaScriptコードの実行許可が求められます

各自ご判断の上、続行なりキャンセルなり、ご対応ください。

仕組み

“使い方”でも記したようにこのショートカットはJavaScriptを閲覧中のページで実行します。具体的に本ショートカットがどのような動作をするのか、図解とともに文字にしてみました。実際にインストールしてもらい、実物を見るなりいじってもらった方が分かりやすいとは思いますが、念の為こちらに文字として記録します。
クリックで拡大表示(PNG画像:230kB)

1. JavaScriptのインジェクト

まず、閲覧中のWebページにJavaScriptコードをインジェクト、実行します。このJavaScriptはGitHub (source_viewer_gen.js)にて公開しています。

2. DOM文字列を取得

さて、上でインジェクトされたJavaScriptは実行時点でのdocumentオブジェクト取得、DOM String(DOM文字列)化します。コード中ではhtmlという定数にこの文字列を代入しています。この処理にはXMLSerializer.serializeToString()を利用しています。お気づきの方もいらっしゃるかと思いますが、最終的に表示されるソースコードとはこのDOM Stringですので、ショートカット実行時点でのDOM構造しか表示できない点、ご注意ください。なお、<!DOCTYPE>宣言が見つからない場合、JavaScriptはnullを返します。

3. “Source-Viewer”の生成

JavaScriptは取得したDOM String(ソースコード)を表示するための別ページを文字列として生成します。通称“Source-Viewer”と呼んでいるこのDOM String表示用ページは、コード中ではviewerという変数へ代入しています。もちろん取得されたDOM String自体も<code>タグに入れ込む形で埋め込みます。この時、DOM StringがHTMLとして解釈されることを避けるため、encodeURIComponent()でエンコードした上で埋め込んでいます。

4. Prism.jsとjs-beautify

満たしたい機能に挙げた、コードのBeautifyやHighlight、行番号の表示などを実現するため、Prism.jsjs-beautifyの読み込みコードもSource-Viewerに埋め込みます。別ページとしてSource-Viewerをつくっている理由はここにあります。取得した文字列はどう頑張ってもショートカットだけではBeautifyやHighlight表示など出来なかったので、ならばこれらのJSライブラリを使ってコードをキレイに表示できるWebページを生成しちゃえ、という発想です。さぁ、Source-Viewerが出来上がったらcompletion()を使って、ショートカットの次の処理へSource-Viewerを文字列として渡してあげましょう。補足: Prism.jsをManual(手動)で実行していることには訳があります。行数の多いソースコードを表示しようとした時、ソースコードが表示されなくなったことがありました。再現性のあるバグでした。どうやらPrism.jsとjs-beautifyが喧嘩しているようだったので、js-beautifyが準備出来てからPrism.jsを実行させるよう、手動実行にしたところソースコードが表示されるようになったので、その経緯から“prism.min.js”の読み込みタグにdata-manual属性を付与し、Prism.highlightElement()でPrism.jsを実行するようにしています。とは言え、そんな大量なソースコード見なくて良いよ、という場合でしたら、これらは削除し、Prism.jsが自動実行されるよう修正いただいた方が良いかと思います。

5. BASE64エンコードとサイズチェック

出来上がったSource-Viewerは文字列ではあるものの、きちんとしたHTMLなので、適当に処理すればSafariで閲覧できます。その“適当な処理”の前段階としてBASE64エンコードします。ここで、BASE64化したSource-Viewerのバイトサイズが既定値よりも大きい場合、「かなりの行数のソースコードを表示するけど良い?」と警告表示する機能を付けました。というのも、500キロバイト以上のソースコードを表示しようとすると、動作がもっさりする場合があったり、サイズが大きすぎると(MB単位など)ソースコードがファーストビューまでしか表示されないなどの動作不良があったためです。この“しきい値”はインストール時に設定できますし、後々変更も出来ますが、実体験から行くと500キロバイトが良い気がします。

6. Source-ViewerをSafariで表示

ブラウザというのは素晴らしいもので、BASE64化された画像やHTML、さらにはPDFなども閲覧することが出来ます。これにはData URIsを利用します。HTMLの場合、data:text/html;base64,に続けてBASE64化されたHTML文字列をアドレスバーに入力すると、そのHTMLページを閲覧できます。つまり、取得されたDOM Stringがキレイに整形されたWebページ = Source-Viewerが表示されるわけです。

と、まぁこのような処理を行っているわけで御座います。長い旅路、ここまでお付き合いいただきまして、誠にありがとうございました。


念には念を入れ、本ショートカットを壱から自作したい方やただロジックだけを見たい、という方々向けにロジックのスクリーンショットを載せます。セキュリティの都合によりiCloud経由からサードパーティ製のショートカットをインストールしたくない方も含め、参考ください。

クリックで拡大表示(PNG画像:148kB)

ここまで読んで「こうすればもっと効率よく動作するよ!」とか、「こうした方が楽じゃない?」などなど…どのようなことであれ、本ショートカットについてご意見ご感想などあれば、ページ下部のコメント欄までコメントいただけると嬉しいです。

カスタマイズ

このショートカットにはカスタムできる設定項目がいくつかあります。

警告を表示するソースコードサイズの値

ソースコードが長くなるとSource-ViewerをBASE64化したとき、当然エンコード結果も長々したものになります。そのためSafariがDATA URLsを処理するにも時間を要したり、あるいは処理した結果が適切に表示されない場合もあります(実際ありました)。インストールする時、この“しきい値”の設定ができます。デフォルトは500キロバイトです。これより大きなサイズのソースコード(正確には“Source-Viewer”をBase64化した文字列)を表示する際、続行して良いか警告を表示するようしました。この値はいつでも変更可能です。なお、iOSやiPadOSなどがURL/URIとして受け付けられる文字列の最長文字数は調査不足で知ることが出来ませんでした。この当たりについて詳しい方はお知恵をコメントいただけると嬉しいです。

ソースコードをWrapするか否かの選択

js-beautifyで整形されても、ソースコードは一行が長い場合ももちろんあります。そこで、画面端で行を折り返す(改行させる)オプションを用意しました。JavaScriptコード最初にあるconfigwrapCodetrueに設定することで折り返し(Wrap)するようになります。デフォルトではfalse(Un-wrap)です。

インデントサイズ

インデントサイズもWrap同様のconfigより設定できます。デフォルトはスペース2個分です。お好みのインデントサイズを整数値で指定してみてください。

ハイライトのテーマ

Prism.jsによりSyntaxハイライトされているため、テーマの変更も可能です。<link>タグで読み込んでいる…/themes/prism.min.cssをお好みのCSSテーマファイルへ変更ください。Prism.jsの公式サイトより各種テーマのプレビューができます。CDNはこちらからどうぞ、prism - Libraries - cdnjs。加えて、Source-Viewer自体の背景色もデフォルトはwhiteになっているので、テーマに合わせて調整してみてください。

以上、自作ショートカット“View Source Code”の紹介でした。また、役立ちそうなショートカットを作成した際などはこうして記事にまとめてみたいと思います。

4031592265251741277 https://www.storange.jp/2021/02/view-source-code-shortcuts.html https://www.storange.jp/2021/02/view-source-code-shortcuts.html iPadやiPhoneのSafariでWebページのソースコードを見る方法 2021-02-28T21:16:00+09:00 https://www.storange.jp/2021/02/view-source-code-shortcuts.html Hideyuki Tabata 200 200 72 72