OJapp FREEの使い方｜1行でWebページをホーム画面アプリにする

「このWebページ、ホーム画面からすぐ開けたら便利なのにな」 と思ったことがあるなら、OJapp FREEはかなりシンプルです。

基本は、ページの<head>にJavaScriptを1行追加するだけです。

<script src="https://ojapp.app/js/ojapp_1p1a.js"></script>

これで、そのページをホーム画面へ追加するためのWeb App Manifestがブラウザ上で動的に生成されます。

ページごとにmanifest.jsonを作ったり、サーバー側でManifestを生成したりする必要はありません。

まずは1行だけ入れて試して、必要になったら名前やアイコンを調整する。 OJapp FREEは、そのくらい軽いところから始められるようにしています。

OJapp FREEとは？

OJapp FREEは、Webページやサイトをスマホのホーム画面から直接開ける入口として扱いやすくする無料スクリプトです。

対応している基本的な設計は、次の3つです。

• 1P1A： 1ページを1つのAppとして扱う
• 1G1A： ディレクトリや機能グループを1つのAppとして扱う
• 1S1A： サイト全体を1つのAppとして扱う

この記事では、いちばん手軽な1P1Aを中心に紹介します。

「このページだけホーム画面に置きたい」という使い方なら、まず1P1Aから試すのが分かりやすいです。

まずは本当に1行だけ入れてみる

1P1Aで最低限必要なのは、この1行です。

<script src="https://ojapp.app/js/ojapp_1p1a.js"></script>

HTMLの<head>内に追加します。

たとえば、こんな形です。

<head>
  <meta charset="UTF-8">
  <title>My Timer</title>

  <script src="https://ojapp.app/js/ojapp_1p1a.js"></script>
</head>

任意設定を何も書かなければ、現在のページURL、ページタイトル、ページ内で利用できるアイコン情報などが自動的に使われます。

最初から細かく設定しなくても大丈夫です。

とりあえず1行入れて、実際にスマホへ追加してみる。 そのあと「名前だけ変えたい」「アイコンを指定したい」となったら調整していく方がラクです。

[画像]

1P1Aでは、そのページ自体がホーム画面の入口になる

1P1Aは、One Page. One App.の略です。

サイト全体ではなく、現在のページをひとつのAppとして扱います。

たとえば、

• タイマー
• 画像加工ツール
• 記事
• 商品ページ
• プロフィールページ

のように、「このページを直接開きたい」というものと相性がいいです。

ホーム画面からアイコンを押したときにサイトトップへ戻すのではなく、そのページを入口として使います。

小さなWebツールを作っていると、この違いはけっこう大きいです。

タイマーを使いたいのに毎回トップページを開いて探すより、タイマーそのものがホーム画面にあった方が早いですよね。

アプリ名を指定したい場合

ホーム画面に表示する名前を自分で決めたい場合は、スクリプトより前にojapp:titleを追加します。

<meta name="ojapp:title" content="My Timer">

<script src="https://ojapp.app/js/ojapp_1p1a.js"></script>

大事なのは、OJapp用のmetaタグをスクリプトより前に書くことです。

OJappはスクリプトが実行されたタイミングでmetaタグを読み取ります。

そのため、後ろに書くと設定が反映されません。

アイコンを指定したい場合

好きな画像をホーム画面アイコンとして使いたい場合は、ojapp:iconを追加します。

<meta name="ojapp:icon" content="/icon.png">

<script src="https://ojapp.app/js/ojapp_1p1a.js"></script>

タイトルとアイコンを両方指定するなら、こうです。

<meta name="ojapp:title" content="My Timer">
<meta name="ojapp:icon" content="/icon.png">

<script src="https://ojapp.app/js/ojapp_1p1a.js"></script>

これだけでも、ホーム画面に置いたときの印象はかなり変わります。

ページごとに役割の違うツールがあるなら、それぞれ別のアイコンを用意しておくと分かりやすいです。

アイコンを指定しなかった場合はどうなる？

ojapp:iconを必ず書かないと動かないわけではありません。

指定がない場合、OJappはページ内にあるアイコン情報を利用します。

そのため、すでにサイトでアイコンやOG画像を設定しているページなら、その情報をそのまま利用できる場合があります。

ただ、ホーム画面用として見た目をきっちりそろえたいなら、専用の正方形画像を用意してojapp:iconで指定しておく方が分かりやすいです。

Manifestファイルを自分で作らなくていい

普通にPWAを作ろうとすると、まずmanifest.jsonを用意することが多いです。

たとえば、

• name
• short_name
• icons
• start_url
• scope
• display

といった項目を設定します。

1サイトに1つなら、そこまで大変ではありません。

でも、ページごとに別のAppとして扱おうとすると、管理するManifestが増えて一気に面倒になります。

OJapp FREEでは、このManifestをJavaScriptから動的に生成します。

そのため、1P1Aを使うためにページごとの静的なmanifest.jsonを用意する必要はありません。

ここが1行で導入できる理由です。

Service Workerを必ず用意する必要もない

PWAと聞くと、Service Workerも必ずセットで作らないといけないように感じるかもしれません。

でも、OJapp FREEの基本スクリプトは、Service Workerを自動で作るものではありません。

オフライン対応や高度なキャッシュが必要なら、サイト側で必要に応じて追加します。

逆に「まずホーム画面の入口を作りたい」というだけなら、最初から複雑なキャッシュ処理を抱える必要はありません。

使う機能だけ入れる。

OJappでは、このくらいの距離感でPWAを扱っています。

サイト全体を1つのAppにしたいなら1S1A

ページ単位ではなく、サイト全体をひとつのAppとして扱いたい場合は、1S1A用のスクリプトを使います。

<script src="https://ojapp.app/js/ojapp_1s1a.js"></script>

この場合は、同一オリジン全体をひとつのAppとして扱う構成になります。

サイト全体がひとつのサービスとして成立しているなら、こちらの方が自然です。

一方で、ページごとに別のツールとして使いたいなら1P1A。

どちらが上というものではなく、何をひとつのAppとして扱いたいかで選びます。

ディレクトリ単位なら1G1A

「サイト全部では広すぎるけど、1ページだけでは細かすぎる」という場合は、1G1Aも使えます。

たとえば/dashboard/以下をひとつのAppとして扱うなら、次のように設定します。

<meta name="ojapp:id" content="/dashboard/">
<meta name="ojapp:start-url" content="/dashboard/">
<meta name="ojapp:scope" content="/dashboard/">

<script src="https://ojapp.app/js/ojapp_1s1a.js"></script>

これで、特定のディレクトリや機能グループをひとつのAppとして扱えます。

管理画面、ドキュメント、複数ページで構成されたツールなどに使いやすい形です。

クエリを含んだ状態も入口にできる

OJapp FREEでは、必要に応じてURLのクエリをAppの状態として扱うこともできます。

有効にするには、スクリプトより前に次のmetaタグを追加します。

<meta name="ojapp:query" content="true">

たとえば、

/timer/?time=5&mode=down

のようなURLなら、そのクエリを含んだ状態を起動時に使える形にできます。

同じページでも「3分タイマー」「5分タイマー」のように状態を分けたいときに使える機能です。

これはUDA（User Defined App）的な使い方につながります。

実際にスマホへ追加する

コードを追加したら、最後は実際の端末で確認します。

iPhoneではSafariからページを開き、共有メニューの「ホーム画面に追加」を使います。

AndroidではChromeなど対応ブラウザのメニューやインストールUIから追加します。

ブラウザやOSによって表示場所や見え方は少し違います。

特にアイコンや起動時の挙動は、PCの開発者ツールだけで確認して終わらせず、実機で一度ホーム画面に追加してみるのがおすすめです。

[画像]

こんなページならOJapp FREEを試しやすい

最初に試すなら、ページ単体で使い道がはっきりしているものが分かりやすいです。

• タイマー
• 計算ツール
• 画像加工ツール
• 記事ページ
• 商品ページ
• プロフィールページ
• 予約ページ

「このURLをホーム画面から直接開きたい」と感じるページなら、かなり相性があります。

最初から大きなPWAを作ろうとしなくても大丈夫です。

自分がよく使う1ページだけで試すと、ホーム画面に置く感覚が分かりやすいです。

まとめ

OJapp FREEで1ページをホーム画面Appとして扱うなら、基本はこの1行から始められます。

<script src="https://ojapp.app/js/ojapp_1p1a.js"></script>

必要なら、その前にojapp:titleやojapp:iconを追加して、名前やアイコンを調整します。

サイト全体なら1S1A、ディレクトリ単位なら1G1Aという選択肢もあります。

大事なのは、最初からPWAを大きく考えすぎないことです。

まずは「このWebページをホーム画面から直接開きたい」という1ページから始めれば十分です。

OJapp FREEのページを見る