\ 最大10%ポイントアップ! /

ソースコード表示するURLコマンド“view-source:”の変換ツール

ボタンのタップで変換できる “view-source:” 変換ツール

下記のスリーステップで変換したURLがコピーできます!

  1. 貼り付けボタン
    このページのテキストボックスにURLが貼り付け。
  2. 変換ボタン
    テキストボックスのURLが変換。
  3. コピーボタン
    変換したテキストボックスの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ツール。

下記は変換のイメージです。

変換前
変換後
  • https://haretokidoki-blog.com
  • view-source:https://haretokidoki-blog.com

ボタン機能について

貼り付けボタン

クリップボードにある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ツールを作成して紹介する予定です。

サポート募集中

この記事はお役に立てたでしょうか。現在、サポートを募集しています。
コーヒーを一杯 ☕ ご馳走いただけないでしょうか。

この記事が気に入ったら
フォローしてね!

この記事をシェアする

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA