スマートフォンでWebページのソースコードを確認する場合は少し面倒です。
対象ページのURLの先頭にURLコマンド「view-source:」を追加が必要となります。
そこで今回は “WebページのURL” から “URLコマンド「view-source:https://～」”に変換できるWebツールを作成してみました。
- スマートフォン ユーザーの方
（パソコンでもview-source:でソース表示できるが、こちらの記事で紹介している方法の方が手っ取り早い。）
- 下記のブラウザを使用している方
（参考情報：view-source URI scheme – Wikipedia）- Google Chrome（Edgeなど、他のChromiumベースのブラウザを含む）
- Mozilla Firefox
- Netscape
- Opera 15 以上
- SeaMonkey
- Web
- Webページのソースコードを表示したい方
“view-source:”変換ツール
さきにWebツールを掲載。各機能の説明は後述しています。
コチラにURLを貼り付け！
ココのボタンで変換が可能！
以降は、このツールの説明や関連記事を紹介しています。
ツールの説明
概要
ソースを表示したいWebページのURLをあらかじめコピーしておき、本ツールのテキストボックスに貼り付け、
その後、変換ボタンを押すとソースを表示できるURLコマンド“view-source:対象URL”という形式に変換するWebツール。
下記は変換のイメージです。
ボタン機能について
貼り付けボタン
クリップボードにあるURL、もしくはURLコマンドをテキストボックスに貼り付けします。
変換ボタン
変換処理を実行します。
変換処理は、変換対象の文字列により下記の3パターンに分岐。
- パターン1：変換対象の文字列が
http://もしくはhttps://ではじまる場合 -
先頭に”view-source:”を追加した文字列に変換します。
- パターン2：分岐1以外 かつ 半角コロン（
:）がある場合 -
URLコマンドの指定があるものの打ち間違えた（たとえば、逆に
source-view:で指定）と判断し、
先頭から半角コロンまでの文字を消し、”view-soruce”に変換します。 - パターン3：上記以外の場合
-
対象文字列がURLではないと判断し、何も処理をしない。
コピーボタン
テキストボックスにある変換後の文字列をクリップボードに書き込みます。
コピー後、アドレスバーに貼り付けてアクセスするとソースコードを表示することができる。
クリアボタン
テキストボックスにある文字列をすべて削除します。
参考情報
参考情報：view-source URI scheme – Wikipedia
まとめ
- URLコマンド「
view-source:対象のURL」が作成できるWebツールを作った
- 主にスマートフォン用のWebツール
- 後日対応したいこと
- もう少し見た目を気にしたい
- 主要なブラウザで動作するか検証したい
ChromeやEdge以外、他のChromiumベースでも動作すると思われる。
また、Firefoxでもおそらく動作可能。
たぶん、動作しないのは、Safariが動かないと思われる。要検討。 - Safariでもview-sourceのようなURLコマンドが実現できないか調べて記載したい（別記事？）
ほかのWebツールを作成して紹介する予定。
コメント