アプリ

iPhoneでもHTMLのソース確認が確認できる『ViewSource』を使ってみました!

こんにちは!モノづくりの記事をメインに書いているオトカモです…が今回は先日購入したiosのアプリ『View Source』をご紹介したいと思います!

アプリ『ViewSource』って?

前述したとおりiPhoneでもwebサイトのhtmlを確認することが出来るアプリです。
使い方としてはアプリに見たいページのURLをコピペするか、サファリの機能拡張(Extension)からソースを見ることもできます!

なんで導入したの?

実は言うと先日当サイトのAdSenseが一時的にスマホだけ表示されない現象がありました…ブラウザなどでの確認ではまったくもって問題ないのですが、どういうわけかモバイル端末だけ表示されないみたいで…。
Wi-Fiの設定を変更したり、ブラウザの機能拡張を利用したりといろいろ試したんですが、どうにも動作がぎこちない感じが…。
そこで、端末で直接ソースの確認が出来れば早期解決になるのでは?と思い、出先での確認も視野に入れて『ViewSource』を導入してみることにしました!

View Source – HTML, JavaScript and CSS
¥120

有料ですがいい仕事をしてくれるので120円なんて安い安い!

ホーム画面に表示されるアプリのアイコンをタップするとブラウザが立ち上がります。

「Go to URL」に(ソースを)見たいサイトのURLを入力します。

こんな感じにソースが表示されます。

ちなみに右上のアイコンをクリックすると…
ソースのハイライト検索ができたり、メールで送れたりと色々出来るみたいです。

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

その他のメニューも充実!

画面下のメニュー「Assets」「DOM」「Script」を利用すれば更に便利に使えます!

Assets

画像やリンク、その他にもscript、cssのリンク一覧が表示されます。「Last Component」ではフルパスではなく、ファイル名で表示されるので、見つけたいファイルをすぐに確認することもできます!

DOM

開閉式でソースが表示されるので、各要素毎にソースを表示したい時に便利ですね!
「Expand All」で全部のソースを展開し、「Collapse All」では逆にすべてのソースを閉じることが出来るみたいです。

info

サイトのタイトルやページ容量、最終更新日等が表示されます!

Cookiesとかも表示されますね。

使いやすくしよう!

といっても設定は自分のお好みでカスタムして貰えればいいかと思います。
例えば、画面は暗く、文字は白に…等の場合は、「Choose Theme」のDarkを選択してもらえればいいかと思います。

ここでお知らせするのはSafari側での拡張機能を使った設定方法の紹介となります。

まずはSafariを開いて、「共有」ボタンをタップします。

そして、機能拡張一覧を左にスワイプし「その他」をタップします。

そうするとアクティビティ項目に『ViewSource』が追加されますので、そちらを「オン」にしてあげます。

そうすると次回から「共有」ボタンをタップすると『ViewSource』が表示されますので、ソースが見たい場合はこちらのアイコンをタップするとHTMLのソースコードを確認することができます!
コレは便利ですね!

Scriptのテストも出来る!?

Safariからソースを確認すると、「Script」というメニューが追加されます。
こちらをタップするとscriptを記述することができるみたいです。
記述したscriptは保存し、読み込む事も可能みたいですので、scriptに詳しい方は是非チャレンジしてみてください!
私はあまり詳しくないので…やってません!ごめんなさい!

いかがでしたか?『ViewSource』は?

外出している時はもちろんですが、サーバの設定などでブラウザのデベロッパーでもスマホサイトが表示されない時、モバイルで直接HTMLのソースを確認したい方には重宝するアプリだと思います。前述の通り有料ですが、ホームページなどを制作していたりする方は120円の価値はあるかと思いますので、興味のある方は是非アップルストアでご確認ください!

View Source – HTML, JavaScript and CSS
¥120
アバター

オトカモ

投稿者の記事一覧

1981年生まれ。作ること全般が好きなので、木材や金属を使ったDIYの他に簡単な料理もする、「広く浅い」マイペースな人間。趣味のDIYをメインにおもしろおかしい事を記事にしていきたいと考えています。

関連記事

  1. どんな写真も“いい感じ”にしてくれるカメラアプリ「VSCO」
  2. アプリが趣味のみなさまへ!
  3. 【レビュー】消音カメラアプリ『StageCamHD』を実際に使っ…
  4. Android Studio で Hello World! を表…
  5. 今、iPhoneのカメラアプリはどんなものが出ているのか。~カメ…

はじめに

休日クリエイターってなんですか?

休日クリエイター編集部です。写真、音楽、インテリア、料理 etc……

新着記事

どんな写真も“いい感じ”にしてくれるカメラアプリ「VSCO」

こんにちは。休クリライターのもりすけです。一眼レフで写真を撮るのも好きですが、同じくらい、い…

【体験レポ】使うのは本物のスワロフスキー!「グルーデコ」で本格的なアクセサリー作り

こんにちは!休日クリエイターのライターもりすけです。先日、“すべての女性はその手で「何か」を…

混ぜて焼くだけ!ベイクドチーズケーキ

こんにちは。目指せ!亀仙人です。今回は、簡単です。混ぜるだけ。そんなベイクドチーズケーキ…

【体験レポ】おしゃれな植物標本「ハーバリウム」をDIY!

先日、仙台市青葉区錦ヶ丘にある住宅メーカー「ウェルネストホーム」のモデルハウスで、ハーバリウムのワー…

バースデーやパーティーに!おうちで手作りホールケーキ

こんにちは。目指せ!亀仙人です。バースデーケーキでも作ってみるかなぁということでやってみます…

ろくろ陶芸体験で作った器が完成!果たして出来栄えは…?

こんにちは。休日クリエイターのライターもりすけです。人生初の「ろくろ陶芸」に挑戦してから約1…

簡単!アップルパウンドケーキ

こんにちは。目指せ!亀仙人です。おいしい大きいりんごを沢山いただきましたので~パウンドケ…

【後編】noteって何?新規登録のやりかたから投稿の方法まで細かく解説します!

こんにちは。休日クリエイターでライターをしているイタガキマリコです。私は仕事だけではなく、趣味に…

カメラ

モノづくり

料理

音楽

アプリ

ボティメイク

雑談

PAGE TOP