はてなブログを無料でアプリ化(PWA)する方法｜headに2行貼るだけ

はてなブログを、スマートフォンやPCへインストールできるアプリのようにしてみました。

必要なのは、はてなブログの設定画面へアイコン指定とスクリプトの2行を追加するだけです。manifest.jsonを作成したり、サーバーへファイルをアップロードしたりする必要はありません。

この記事では、無料で利用できるOJapp FREEを使って、開いている記事をそのままPWAとしてホーム画面へ追加できるようにする手順を紹介します。

完成するとどうなる？

設定後に対応ブラウザでブログを開くと、インストールボタンからブログをアプリとして追加できるようになります。

インストール後は、設定した名前とアイコンでホーム画面やアプリ一覧から起動できます。

設定方法

1. はてなブログの設定を開く

はてなブログの管理画面から「設定」を開き、「詳細設定」を選択します。

2. headへスクリプトを追加する

詳細設定ページを下へ進むと、「<head>要素にメタデータを追加」という入力欄があります。

アイコン画像のURLを指定するmetaタグと、OJappのスクリプトを貼り付けます。

<meta name="ojapp:icon" content="https://example.com/icon.png">
<script src="https://ojapp.app/js/ojapp_1p1a.js"></script>

https://example.com/icon.pngの部分は、自分で用意した正方形画像のURLへ置き換えてください。はてなブログではこのアイコン指定が必要です。

貼り付けたら、ページ下部の「変更する」を押して保存します。これで基本設定は完了です。

OJapp Tips｜合わせて読みたい
ホーム画面名刺とは？新しいつながり方「Petal」の考え方と使い方 の解説が役に立ちます。

アプリ名も指定できる

アプリ名も指定したい場合は、OJappのスクリプトより前にojapp:titleを追加します。

<meta name="ojapp:title" content="ブログのアプリ名">
<meta name="ojapp:icon" content="https://example.com/icon.png">
<script src="https://ojapp.app/js/ojapp_1p1a.js"></script>

ojapp:titleにはアプリとして表示したい名前、ojapp:iconには必須の正方形画像のURLを指定します。

画像は、自分が権利を持っているもの、または利用許可を得ているものを使用してください。安定して表示するためにも、自分で管理している画像URLの利用をおすすめします。

インストールできるか確認する

保存後にブログを開き、ブラウザの再読み込みを行います。PC版Chromeではアドレスバー付近のインストールボタン、Androidではブラウザメニューなどから確認できます。

iPhoneではSafariの共有メニューから「ホーム画面に追加」を選択します。端末やブラウザによって、追加ボタンの位置やインストール画面の表示は異なります。

はてなブログでは1P1Aがおすすめ

1P1A（One Page. One App.）は、現在開いているページをアプリの起動ページにします。

<meta name="ojapp:icon" content="https://example.com/icon.png">
<script src="https://ojapp.app/js/ojapp_1p1a.js"></script>

そのため、記事を読んでいる状態でホーム画面へ追加すると、あとからそのアイコンを開いたときも同じ記事から再開できます。

サイト全体を1つのアプリにする1S1Aでは、どの記事から保存しても起動先がブログのトップページになります。読んでいた記事をそのまま残したい場合は、1P1Aの方がはてなブログと相性のよい使い方です。

ただし、詳細設定のhead欄へ書いたコードやアプリ名、アイコンはブログ全体に共通で出力されます。また、トップページを先にアプリとして追加すると、ブラウザによっては配下の記事も同じアプリ領域として扱われ、記事ごとに複数追加しにくくなる場合があります。記事を個別に残したい場合は、追加したい記事を直接開いてホーム画面へ追加してください。

記事の概要欄へmetaタグを書いても個別設定にはならない

記事編集画面の「SEO・SNS向け設定」にある「記事の概要」は、検索結果やSNSで使われる説明文を設定する欄です。ここへ<meta name="ojapp:icon" ...>を書いても、OJapp用のmetaタグとしてheadへ追加されるわけではありません。

また、記事ごとに設定したアイキャッチ画像はSNS向けのog:imageには反映されますが、OJappのojapp:iconとして自動的に利用されません。

今回の方法では、アプリ名とアイコンはブログ共通のまま、起動ページだけを記事ごとに変える使い方になります。

はてなブログは2行でPWA化できる

はてなブログには、headへmetaタグやスクリプトを追加するための設定が公式に用意されています。そのため、アイコン指定とOJapp FREEのスクリプトを追加するだけで、好きな記事をその記事から起動するPWAとしてホーム画面へ置けるようになります。

<meta name="ojapp:icon" content="https://example.com/icon.png">
<script src="https://ojapp.app/js/ojapp_1p1a.js"></script>

静的なmanifest.jsonの作成、ビルド作業、外部APIへの登録は不要です。まずは自分のブログで、実際のインストール表示を確認してみてください。

OJapp FREEの詳しい仕様やオプションは、以下のページで確認できます。

OJapp FREEの詳細を見る

ホーム画面からの起動解析や、再訪した読者への新着記事・限定案内の表示には、OJapp PROを利用できます。

OJapp PROの詳細を見る