スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)

posted with カエレバ

リブロワークスインプレス 2018-06-22

Amazonで探す

楽天市場で探す

Yahooショッピングで探す

スマートフォンWebアプリをホーム画面に追加してもらいたい

最近趣味でスマートフォン用のWebアプリを作っているのですが、

myenigma.hatenablog.com

ネイティブアプリのように使ってもらうように、

レスポンシブデザインやアイコンを設定できるように作っている場合、

下記の写真のようにブラウザ上で使う代わりに、

ホーム画面に追加して使ってもらいたくなります。

f:id:meison_amsl:20150712185517p:plain

そのような場合、下記の写真のように

ブラウザ上でそのWebアプリを使っている時に、

ホーム画面に追加することを促すバルーン表示が現れると便利です。

f:id:meison_amsl:20150721090319p:plain

今回、上記のように

スマートフォン(iPhone, Android)上で

ホーム画面追加を促すバルーンを表示させる

Javascriptライブラリ"Add to home screen"の使い方と、

注意点について説明したいと思います。

Add to home screenの使い方

ホーム画面追加を促すバルーンを表示させる

Javascriptライブラリ"Add to home screen"は

下記のプロジェクトページとGithub上で使い方とコードが公開されています。

cubiq/add-to-homescreen

Add to home screen

基本的な使い方としては、

HTMLファイルのヘッダ部分に下記のコードをコピペして、

<link rel="stylesheet" type="text/css" href="../../style/addtohomescreen.css">
<script src="../../src/addtohomescreen.js"></script>
<script>
addToHomescreen();
</script>

GithubからDLしてきた、

addtohomescreen.cssとaddtohomescreen.js

を配置して、上記のコードのパスを修正すればOKです。

そうすれば、スマートフォンの

ブラウザ上でWebアプリを開いている場合、

iPhoneでは下記のように、

f:id:meison_amsl:20150721090319p:plain

Androidでは下記のように、

f:id:meison_amsl:20150721090329p:plain

表示されて、ホーム画面追加をリコメンドできるようになります。

またlocalStrageを使って、以前ポップアップを表示した時間や、

バツボタンを使ってポップアップを閉じた履歴を管理しており、

それらの情報から、ユーザにウザがられないような

ポップアップの表示を制御する機能もついています。

(例: 一日一回しかポップアップを表示しないなど)

Add to home screenの設定

先ほどのコードのaddToHomescreen関数の

引数で、挙動の設定ができます。

自分は下記のようにして使用しています。

<script>
addToHomescreen({
    appID:"AddToHomescreenKindleHighlights",
    lifespan:0
    });
</script>

下記で、いくつかの設定要素の説明をしたいと思います。

app ID

appIDはlocalStrageのキーとなる文字列で、

github pagesを使うwebアプリの場合、

同じオリジンになるため、設定のキーが重複してしまいます。

ですので、それぞれ固有のIDを与えています。

(一つのオリジンで一つのアプリの場合は、

設定は不要かと思います)

lifespan

lifespanはポップアップが表示される秒数です。

デフォルトの5秒では、短い気がしたので、

0秒(時間で消えないようにする)にしています。

skipFirstVisit

これをtrueにすると、

初めてそのWebアプリを使った人にはポップアップが出なくなります。

何度も使っているユーザのみにリコメンドできるようになります。

startDelay

ポップアップを表示するまでの時間です。

デフォルトでは1秒になっています。

displayPace

これは、一度ポップアップを表示してから、

次回表示するまでの分数です。

デフォルトは1440となっており、

これは一日一回表示する設定になっています。

Add to home screenの日本語の表示がおかしい件

現在のgithubのコードは一応、

ブラウザの言語設定から日本語設定されて、

ポップアップを日本語表示してくれますが、

下記のコードのように、

ios版は日本語が怪しいですし、

android版はそもそも英語のままです。。。

ja_jp: {
        ios: 'このウェプアプリをホーム画面に追加するために%iconを押して<strong>ホーム画面に追加</strong>。',
        android: 'To add this web app to the home screen open the browser option menu and tap on <strong>Add to homescreen</strong>. <small>The menu can be accessed by pressing the menu hardware button if your device has one, or by tapping the top right menu icon <span class="ath-action-icon">icon</span>.</small>',
    },

add-to-homescreen/addtohomescreen.js at master · cubiq/add-to-homescreen

　そこで、下記のように修正してプルリクエストを出しました。

ja_jp: {
      ios: 'このWebアプリをより一層便利に使うために、%iconを押して<strong>ホーム画面に追加</strong>ボタンを押して下さい',
        android: 'このWebアプリをより一層便利に使うために、ブラウザのオプションメニューから<strong>ホーム画面に追加</strong>を押して下さい.<small>オプションメニュ-はハードウェアボタンや右上のメニューアイコン<span class="ath-action-icon">icon</span>を押すと表示されます.</small>',
    },

まだマージされていないので、

もし日本語を修正したバージョンを使いたい場合は、

上記のようにコードを修正するか、

下記のブランチのコードをDLして使うと良いかもしれません

AtsushiSakai/add-to-homescreen at update_message