スマホで手軽にソースを見れるツールを開発しました
2020.03.11
みなさま、こんにちは。
今回はスマホでお手軽にソースを見れるツールを開発しました。
スマホで簡単にソース表示するツール
外出先で、参考までにwebサイトをぱらぱら見ていると気になるのがソースですよね。
スマホもパソコンも仕組みは同じで、URLの文頭に「view-source:」をつけ検索すればソースコードを見れますが、スマホのキーボードとアドレスバーって最悪の組み合わせじゃないかってくらい使いにくい。
そこで、お手軽にURLの文頭へ「view-source:」をつけたURLを生成できるツールを開発しました。
サービス対象の方
・アンドロイドのスマホを使用。
・外出先でサイトのソースが気になる方。
サービス概要
仕組みも構造もシンプルで、
- 気になったURLを入力エリアに入れて、キーボードのエンターキーをクリックし入力完了。
- 動的にURLが生成されるので、そのURLをコピーしアドレスバーに貼り付ける。
つまり、URLの文頭に「view-source:」をつけるだけのツールです。
制作前に想像していたものより、ユーザーに手間をかけさす構造になってしまいました。
開発前設計図
本来考えていたのは、
- ユーザーがURLを入力する。
- 動的にURLを生成し、動的に新規タブで生成したURLを開く。
というものでした。
仕組み自体は簡単に作れたのですが、そもそもの問題がありました。
「view-source:」へのリンク許されていない
すべての設計が音を立てて崩壊しました。
試しに「view-source:」へのリンクをクリックしても何も起きず、コンソールを確認すると「Not allowed to load local resource」という文言が出てきます。
日本語にすると「ローカルリソースの読み込みが許可されていません」ということでした。
どうやらセキュリティの問題で、ビューソースへのリンクは許可されていないとのこと。
ですのでこちらのツールは作成完了しましたが、日の目を見ずに没となりました。
iPhoneだとソースが見れない
思った以上にユーザーに手間をかけさせてしまう形になりましたが、開発自体は完了しました。
そしてブラウザチェックの段階で気づいたのですが、iPhoneだとソースが見れない。
これもまたデフォルトとのことでしたので、もうすっぱりと諦めてアンドロイドユーザーのみを対象にすることを決めました。
紆余曲折がありできあがったシンプルで、特別真新しくもないツールですが機会があれば使用してみてください。