スマホで手軽にソースを見れるツールを開発しました

みなさま、こんにちは。

今回はスマホでお手軽にソースを見れるツールを開発しました。

スマホで簡単にソース表示するツール

スマホで簡単にソース表示するツール

外出先で、参考までにwebサイトをぱらぱら見ていると気になるのがソースですよね。

スマホもパソコンも仕組みは同じで、URLの文頭に「view-source:」をつけ検索すればソースコードを見れますが、スマホのキーボードとアドレスバーって最悪の組み合わせじゃないかってくらい使いにくい。

そこで、お手軽にURLの文頭へ「view-source:」をつけたURLを生成できるツールを開発しました。

スマホで簡単にソース表示するツール

サービス対象の方

・アンドロイドのスマホを使用。
・外出先でサイトのソースが気になる方。

サービス概要

仕組みも構造もシンプルで、

1. 気になったURLを入力エリアに入れて、キーボードのエンターキーをクリックし入力完了。
2. 動的にURLが生成されるので、そのURLをコピーしアドレスバーに貼り付ける。

つまり、URLの文頭に「view-source:」をつけるだけのツールです。

制作前に想像していたものより、ユーザーに手間をかけさす構造になってしまいました。

開発前設計図

本来考えていたのは、

1. ユーザーがURLを入力する。
2. 動的にURLを生成し、動的に新規タブで生成したURLを開く。

というものでした。

仕組み自体は簡単に作れたのですが、そもそもの問題がありました。

「view-source:」へのリンク許されていない

すべての設計が音を立てて崩壊しました。

試しに「view-source:」へのリンクをクリックしても何も起きず、コンソールを確認すると「Not allowed to load local resource」という文言が出てきます。

日本語にすると「ローカルリソースの読み込みが許可されていません」ということでした。

どうやらセキュリティの問題で、ビューソースへのリンクは許可されていないとのこと。

ですのでこちらのツールは作成完了しましたが、日の目を見ずに没となりました。

iPhoneだとソースが見れない

思った以上にユーザーに手間をかけさせてしまう形になりましたが、開発自体は完了しました。

そしてブラウザチェックの段階で気づいたのですが、iPhoneだとソースが見れない。

これもまたデフォルトとのことでしたので、もうすっぱりと諦めてアンドロイドユーザーのみを対象にすることを決めました。

紆余曲折がありできあがったシンプルで、特別真新しくもないツールですが機会があれば使用してみてください。

スマホで簡単にソース表示するツール