OJappとは｜URLをホーム画面の入口にする仕組み
OJappをひとことで説明すると、 URLをスマホのホーム画面の入口として使いやすくする仕組み・ツール群です。
Webサイトを見るときは、普通ならSafariやChromeを開いて、検索したり、ブックマークを探したり、SNSのリンクから移動したりします。
OJappがやろうとしているのは、その一歩手前です。
よく使うWebページやWeb上の機能を、最初からホーム画面に置いておく。 そして、アプリを開くのと同じような感覚で、アイコンから直接そのURLへ入る。
それがOJappの基本です。
「Webサイトを見る」から「Webをホーム画面に置く」へ
Webには便利なページがたくさんあります。
ブログ、ショップ、予約ページ、管理画面、タイマー、プロフィール、会員ページ、自作ツール。
でも、どれだけ便利でも、毎回ブラウザを開いて探すとなると少し遠い。
これがスマホアプリなら、ホーム画面にアイコンがあります。 必要になったら、そのアイコンを押すだけです。
Webでも同じようにできたらいい。
OJappでは、この感覚をかなり大事にしています。
「全部をネイティブアプリにする」のではなく、 Webのまま、ホーム画面から直接入れる入口を作るという考え方です。
実際に自分でも、よく使うページをホーム画面に置いて試してきました。 一度そこに慣れると、毎回検索していたページが妙に遠く感じます。
URL自体は何も変わっていません。 でも、入口が変わるだけで使い方はかなり変わります。
OJappは「PWAを作るサービス」だけではない
OJappではPWAの技術をかなり使っています。 Web App Manifestやホーム画面追加、アイコン、起動URLなどは重要な要素です。
ただ、OJappそのものを「PWAを作るサービス」とだけ説明すると、少し狭くなります。
目的はPWAという技術を使うことではありません。
目的は、 WebページやWeb上の機能を、ホーム画面から使いやすくすることです。
そのためにPWAが合う場所ではPWAを使うし、ページ単位で入口を作ったり、ユーザー自身が好きなURLを選んだりする仕組みも使います。
技術が先ではなく、ホーム画面からどう使うかが先です。
ホーム画面には「サイト」だけを置かなくてもいい
一般的なPWAは、ひとつのWebサイト全体をひとつのアプリとして扱う形がよく使われます。
もちろん、それが合うサイトもたくさんあります。
ただ、実際にいろいろ試していると、 「サイト全体じゃなく、このページだけ置きたい」 という場面もかなりあります。
たとえば、同じサイトの中にこんなページがあったとします。
- タイマー
- 画像加工ツール
- 会員ページ
- ショップ
- 管理画面
これを全部ひとつの入口にまとめるより、それぞれ別のアイコンとして置いた方が使いやすいことがあります。
そこでOJappでは、「何を1つのAppとして扱うか」をいくつかの単位で整理しています。
1S1A｜One Site. One App.
サイト全体をひとつのAppとして扱う考え方です。 一般的なPWAに近い形です。
1G1A｜One Group. One App.
サイト内の特定のディレクトリや機能グループを、ひとつのAppとして扱います。
たとえば、サイト全体ではなく /shop/ や /member/ だけを独立した入口にするようなイメージです。
1P1A｜One Page. One App.
1ページを1つのAppとして扱う考え方です。
ページごとに名前・アイコン・起動URLを持たせて、同じサイトの中でも複数のホーム画面入口を作ります。
UDA｜User Defined App.
さらに細かくすると、ページだけでなく「URLが表している状態」そのものを入口にする考え方もあります。
たとえば、同じタイマーでも「3分」と「5分」を別の入口としてホーム画面に置くような使い方です。
OJappでは、こうした違いを Site → Group → Page → State という単位で整理しています。
OJappにはいくつかのサービスがある
OJappという名前の中には、用途の違うサービスやツールがあります。
一見すると別々のものに見えますが、根っこの考え方は同じです。
URLをホーム画面の入口にする。
その対象が「Webページ」なのか、「WordPressの記事」なのか、「自分の個人ページ」なのかで形が変わっています。
OJapp FREE
Webページに1行のスクリプトを追加して、ホーム画面へ置きやすくする無料版です。
WordPress専用ではなく、通常のHTMLサイトなどでも使えます。
1P1A・1S1A・1G1Aといった設計を、できるだけ簡単に導入するための土台になっています。
OJapp PRO
OJapp FREEの仕組みに、運用や計測の機能を追加したサービスです。
ホーム画面から何回起動されたか、どの端末やOSから使われているか、Offerがどれくらい表示・クリックされたか、といった部分を確認できます。
「ホーム画面に置けた」で終わらず、そのあと実際に使われているかを見るためのものです。
WordPress Plugin
WordPressの記事や固定ページ、商品ページなどを、ページ単位でホーム画面へ追加しやすくするためのWordPress向け実装です。
記事ごとのアイコン生成やManifestの設定などを、WordPressの管理画面から扱いやすくしています。
MyApp / MyApp Maker
MyAppは、自分がよく使うWebサービスやページをまとめて、自分用のホーム画面のように使うテンプレートです。
MyApp Makerは、それをコード編集なしで作りやすくするためのジェネレーターです。
Petal
Petalは、デジタル名刺や個人ページを、そのまま個人のホーム画面Appへつなげるサービスです。
サイトやツールではなく「人」を入口にする、OJappの応用形です。
実際の使い方が気になる場合は、Petalを見ると「個人ページをホーム画面に置く」という感覚が分かりやすいと思います。
アプリストアを通さなくても、入口は作れる
スマホで何かを使ってもらおうとすると、「アプリを作らないといけない」と考えがちです。
でも、すべてのサービスにApp StoreやGoogle Playが必要なわけではありません。
小さなWebツール。 個人のポートフォリオ。 予約ページ。 ショップ。 社内用の管理画面。 自分だけが使うタイマー。
こういうものまで全部ネイティブアプリにするのは、かなり大げさです。
Webとして作って、必要ならホーム画面に置く。
それで十分なものも、かなりあります。
OJappが重視しているのは、アプリストアを否定することではありません。
App StoreやGoogle Playが必要なものは、もちろんあります。
ただ、 「ホーム画面に置きたい＝必ずストアアプリを作らないといけない」ではない という選択肢を作りたい。
WebにはURLという、すでに強い入口があります。
そのURLをもっとホーム画面で使いやすくする。 それがOJappです。
iPhoneとAndroidでは、同じ設定でも同じ動きとは限らない
OJappでは、PCだけで確認して終わりにはしていません。
実際にiPhoneやAndroidのホーム画面へ追加して、挙動を見ながら作っています。
ここで何度も分かったのが、iPhoneとAndroidは同じではないということです。
特にホーム画面追加では、次のような設定の扱いに差があります。
- scope
- id
- start_url
- icon
- apple-touch-icon
Androidで問題なくてもiPhoneでは見え方が違う。 逆に、iPhone向けに調整した設定がAndroidでは複数Appの邪魔になる。
こういうことが普通にあります。
なのでOJappでは、仕様書だけではなく実機で確認した結果もかなり重視しています。
細かい検証の経緯や、なぜその設定にしたのかはGuideではなく、TipsやLABで深掘りしていきます。
Service Workerも「必要だから使う」
PWAの話になると、Service Workerがよく出てきます。
オフライン対応やキャッシュにはかなり便利です。
ただ、ホーム画面に置くことだけが目的なら、必ずしも複雑なキャッシュ処理が必要とは限りません。
Service Workerを入れると、
- 更新したのに古いファイルが残る
- キャッシュのせいで原因が分かりにくくなる
- デバッグが面倒になる
といったことも起きます。
便利だから全部入れる、ではなく、必要な機能に合わせて使う。
このあたりもOJappではシンプルさを優先しています。
OJappが目指しているのは「Webをもう少し近くすること」
OJappでやっていることを技術用語だけで説明すると、Manifest、PWA、Service Worker、start_url、scope……と、どうしても難しく見えます。
でも、やりたいことはかなり単純です。
いつも使うWebを、ホーム画面からすぐ開けるようにする。
これだけです。
サイト全体でもいい。 ひとつのページでもいい。 タイマーの「5分」という状態でもいい。 個人ページでもいい。
URLで表せるものなら、それを入口として使える可能性があります。
アプリを作るほどではないWebも、ホーム画面に置くと急に「道具」っぽくなります。
この感覚が、OJappの一番分かりやすいところだと思っています。
まとめ
OJappは、単なるPWA作成ツールではありません。
WebページやWeb上の機能を、スマートフォンのホーム画面から直接使える入口として扱いやすくする仕組み・ツール群です。
中心にあるのは、 「URLをホーム画面の入口にする」 という考え方です。
サイト全体をひとつのAppとして扱うこともできる。 ページ単位で分けることもできる。 ユーザー自身がURLの状態を選んで、自分用の入口を作ることもできる。
OJapp FREE、PRO、WordPress Plugin、MyApp、Petalなども、全部この考え方からつながっています。
Webは、検索して見るだけのものではありません。
必要なものを、そのままホーム画面に置く。
OJappは、その使い方をできるだけ簡単にするために作っています。