スマホでHTMLソースが確認できる「Srcfari」

デザイナーの方は他サイトがどのようなHTMLなのか調べたいときがありますが、スマホサイトのソースを取得するのは難しいと思います。そんな時に役に立つのがSrcfariです。SrcfariはスマホでHTMLソースやCSS等の構成要素が取得できるアプリです。

Srcfariの使い方

サイトのHTMLソースを取得する

アプリを起動すると以下の画面が表示されます。上部のバーで、ソース表示したいサイトのURLか、検索キーワードを入力します。キーワードを入力した場合はGoogleの検索結果が表示されますのでさらにソースを表示したいページまでジャンプしましょう。

サイトを表示したら左下にあるアイコンをタップします。

これでHTMLソースが表示されます。タグや属性で色分けされて表示されます。続けて、この結果を保存したい場合は右下の共有アイコンをタップします。

「Copy Source to Clipboard」でクリップボードにコピーすることが可能です。その他、URLのコピーや直接Eメール送信も可能です。

構成要素を取得する

さらに、SrcfariではCSSや画像などの構成要素を取得することが可能です。以下のアイコンをタップします。

サイトを構成するCSSやjsファイル、画像の一覧が表示されます。この一覧からさらにCSSソースの表示や、画像を保存することが可能です。

Safariから直接呼び出す

SrcfariはSafariなどのブラウザアプリから直接呼び出すことも可能です。Safariのブックマーク機能にて、URLに「javascript:location.protocol=”srcfari”;」のURLを入力して登録します。

登録後は、Safariにてソース表示を行い画面を開いた状態でブックマークを呼び出しましょう。

確認画面が表示されるので「はい」をタップします。

これで、すぐにソースを表示することができます。

Srcfari有料アプリとなりますが、簡単な操作でソースが表示できるようになります。ぜひデザイナーの方は導入いただいてはいかがでしょうか。

Srcfariの制限

iOS版のみとなります。Android版はありません。

Srcfariの価格

有料。240円となります。買い取り型となりますので、購入後料金が発生することはありません。

Srcfariのサイト情報

URL：https://apps.apple.com/jp/app/srcfari-view-html-source-code/id805903147
※App Storeのリンクとなります。