ボタンのタップで変換できる “view-source:” 変換ツール
下記のスリーステップで変換したURLがコピーできます！
- 貼り付けボタン
このページのテキストボックスにURLが貼り付け。 - 変換ボタン
テキストボックスのURLが変換。 - コピーボタン
変換したテキストボックスのURLをコピー。
ボタン類
変換用のテキストボックス
パソコンでソースコードを確認する場合は、下記の記事で紹介しているショートカットキーが便利です。
以降は、この記事の前置きやツールの詳しい説明を掲載しています。
必要に応じてご覧ください。
前置きやツールの説明
スマートフォンでWebページのソースコードを確認する場合は、少し面倒で対象URLの先頭にURLコマンド「view-source:」を追加が必要です。
そこで今回は 「view-source:https://～」にボタンのタップで変換可能なWebツールを作成しました。
文字を範囲選択するよりも楽なので、ぜひ活用してください！
この記事の対象者・対象環境について
- スマートフォン ユーザーの方
（パソコンでもview-source:でソース表示できるが、こちらの記事で紹介している方法の方が手っ取り早い。）
- 下記のブラウザを使用している方
（参考情報：view-source URI scheme – Wikipedia）- Google Chrome（Edgeなど、他のChromiumベースのブラウザを含む）
- Mozilla Firefox
- Netscape
- Opera 15 以上
- SeaMonkey
- Web
- Webページのソースコードを表示したい方
ツールの説明
概要
ソースを表示したい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ツールを作成して紹介する予定です。
コメント