10年程前であればホームページの閲覧といえば、パソコンであり、インターネットエクスプローラーが基本で、ごくまれに、ガラケーでのページ閲覧ということもありましたが、現在は、スマホが当たり前の時代。

スマホからホームページを見ることも、さらには、スマホアプリからWEBVIEWを使ってホームページを見ることもあります。まったく異なる内容のページをそれぞれ表示したいのであれば、それぞれスマホWEB、スマホアプリ、パソコンのブラウザ用に専用のホームページを作る必要がありますが、ほぼ一緒の場合は、どうにか違うところだけを切り替えてハイブリッドなページを作りたいと考えるものです。

今回は、そんなスマホWEB、スマホアプリ、パソコンのブラウザに対応するハイブリッドなWEBページの作り方のアイデアをご紹介します。

目次

• どうやってブラウザの違いを認識するのか？
• ページの違うところはどういった部分か？
• 具体的な実装のイメージ

どうやってブラウザの違いを認識するのか？

パソコンのブラウザ、スマホのブラウザ、スマホアプリが同じURLのページを見る場合、ユーザーが何でページを見ているのかを認識できれば、それ専用のページを表示することができそうですよね。

では、どうやったらそれがわかるのでしょうか？

答えの一つめは、User-Agentです。

リクエストを行うユーザーエージェントソフトウェアのアプリケーションタイプ、オペレーティングシステム、ベンダー、バージョンを、ネットワークプロトコルのピアが識別できるようにする文字列を持ちます。

https://developer.mozilla.org/ja/docs/Web/HTTP/Headers

これを使えば、パソコンのブラウザとスマホからの違いを判別することは簡単に行えました。

しかしながら、スマホのWEBとスマホアプリからのアクセスを見分けようとすると、 User-Agent では見分けがつきません。

そこで、答えの２つめは、独自のヘッダー文字列を入れるというのが一般的になってきています。

私は、パソコンから見てます、私はスマホから見てます、私はスマホアプリから見てますという中で、ブラウザはユーザーが好き勝手にダウンロードした、好みのブラウザを使うので制御ができないのですが、スマホアプリに関して言えば、独自のアプリケーションを開発することになるので、

(つづく)