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

# WEB制作

2020.03.11

みなさま、こんにちは。

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

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

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

外出先で、参考までに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だとソースが見れない。

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

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

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

webサイトの制作、お任せください。

あくまでも基本料金になりますので、まずはご連絡ください。

コーディング

トップページ
(ヘッダー・フッター含む)

¥8,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥4,000~

ランディングページ

¥15,000~

※アニメーションはオプション料金

デザイン

トップページ
(ヘッダー・フッター含む)

¥20,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥5,000~

ランディングページ

¥20,000~

※コーディングとのセット料金

サイト構築

10ページ
(お問合せページを含まない)

¥100,000~

20ページ
(お問合せページを含まない)

¥175,000~

Wordpress導入

(上記)+¥50,000~

※お問合せページは¥10,000~