2018/01/03(水)【PWA】「ホーム画面に追加」の「Site cannot be installed: the page does not work offline」エラー対策

結論:serviceWorker用のJSファイルに「self.addEventListener('fetch', function(event) {});」と追記すれば直る。


自作のWebアプリで「ホーム画面に追加」機能を加えようと以下を用意しました。

HTMLのヘッダーで上記「manifest.json」を読み込むようにして、HTMLのフッターには以下のJSを追記。

window.addEventListener('load', function() {
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register("/serviceWorker.js")
            .then(function(registration) {
                console.log("Service worker registration succeeded: ", registration);
            }).catch(function(error) {
                console.warn("Service worker registration failed: ", error);
            });
    }
    else {
        console.log('Service workers are not supported.');
    }
});

しかし、Chromeのコンソールで「Add to homescreen」をクリックしても「Site cannot be installed: the page does not work offline」のエラーが表示されます。(画像の右端の下部から手動でも Add to homescreen できる)

スクリーンショット 2018-01-03 0.08.11.png

「ホーム画面に追加」機能には影響ないのではなかろうかと思って半日くらい待ってみましたが、一向に「ホーム画面に追加」バナーが出てきません。

さすがにおかしいと思って調べると、ServiceWorker用のJSファイルに「self.addEventListener('fetch', function(event) {});」と追記する必要があるようでした。

Chrome looks for the fetch event handler as a minimal test for offline capability. Designing a proper caching strategy is not simple, so deploying an 'empty' or placeholder service worker is a valid strategy to get started. Just make sure you have a fetch event handler.

https://love2dev.com/blog/is-your-progressive-web-app-may-not-prompting-the-customer-to-add-to-home-screen/より引用。

追加してブラウザキャッシュを飛ばしてやると、すぐに Android の Chrome で「ホーム画面に追加」バナーが出てきました。(PC版の Chrome では Chromeアプリとして登録されました。)

PC版では「このサイトをシェルフに追加するといつでも使えるようになります。」という、利用者からすると「なんのこっちゃ」という感じのメッセージが出てきました。(将来のバージョンではいろいろ変わってそう)

スクリーンショット 2018-01-02 22.59.51.png

2018/01/01(月)2018年の目標

スポーツ

卓球:気分転換にたまにやる感じ

去年の2月に人生で初めて卓球をまともにやって、サークルに入って、卓球教室で技術を磨きつつ練習を重ねて秋の区民大会に出場しました。カット主戦でいきましたが大会では1勝もできず、1セット取るだけでいっぱいいっぱいでした。今年は月に1回くらい気分転換にやるくらいのあんばいでいきたい。

野球:月1でいいか

経験は12年くらいで特に学びもなくなってきて、野球は月1でいいかなという具合です。

テニス:区民大会で勝ちたい

去年の9月中旬に始めました。自主トレしつつテニス教室に週2で通っていますがまだサーブに苦しんでいます。サーブが安定して教室の中級に上がれたくらいでサークルにも入りたいと思います。やはり教室よりスポーツを通じて他者と仲良くなりやすいサークルのほうが楽しいですからね。

あとは、秋の区民大会に出たい。出るからには勝ちたいですね。

  1. サーブを安定させる
  2. 初級 → 中級 に上がる
  3. テニスサークルに入る
  4. 秋季区民大会出場

Web開発

スポーツ事業を支えるサービスの開発

年初最初の副業がこれです。知人から依頼されて去年頃から話を詰めていました。もうデザインを考えねばならないというフェーズです。スポーツによって人生を支えられてきたので、今度は私らが支える番です。

朗読部

朗読Webアプリです。すでにブログとツイッターは開設してあるので、あとは本体を作るのみです。大ヒットはまったく狙っていなくて、「すごい名前生成器」みたいに、流行り廃りに負けない、一定のアクセスがずっと続く系のコンテンツになれば成功かと思っています。

お金を貯める

去年は卓球・テニスを始めたせいもあってかなりお金を使ってしまいました。でも今習っておけば、何十年も楽しめるスポーツなので投資効果は高いと考えてやっている面もあります。今年は最低でも100万円は貯めたい。でも、確実に将来にプラスになると確信できることであれば、自信への投資も積極的に行いたい。

2018年もがんばるぞー!

2014/12/20(土)Web Speech API と Twitter n-gram を利用した英語発音矯正ゲーム

4月からは自分が研究室で唯一の日本人になってしまうので、英語の発音のトレーニングをひたすら楽しく積めるWebアプリケーションを研究の合間に作っていました。

「えいごのはつおんとれーにんぐ」 https://pron.chobitool.com/

開発は6日間ぐらいで、そのうち素材集めに3日ほど費やしました。

Web Speech API に音声認識と音声合成のインターフェースがあるので、これらをフル活用しました。出題される問題は Twitter n-gram の高頻度の表現から抽出しています。

いい練習になるので、マイクとChromeがあればどうぞ。

オペレーターズサイドという音声認識ゲームに触発されて「なんだとはなんだゲーム」も作りました。

学生寄宿舎の壁が薄すぎて小さい声でしか練習できないのが辛いところです。

2014/09/20(土)KindleGenで縦書き

以下のCSSを用いてKindleGenでmobiファイルを生成したら縦書きになりました。ハマった点は、HTML5のノリでCSSの「type="text/css"」を省略するとCSSがまったく適用されなくなる点。別のリーディングシステム(Readiumなど)では正常に縦書きで表示されるため、問題の特定に2時間以上かかりました。

自作ライブラリである程度のCSSを自動生成している関係でp要素のCSSは上書きしている形になっています。

@charset "UTF-8";

body
{
    -webkit-writing-mode: vertical-rl;
    -epub-writing-mode:   vertical-rl;
    writing-mode:         vertical-rl;

    -webkit-text-orientation: vertical-right;
    -epub-text-orientation:   vertical-right;
    text-orientation:         vertical-right;

    line-height: 1.8;
    letter-spacing: 0.1em;

    -webkit-word-break: break-all;
    -epub-word-break: break-all;
    word-break: break-all;

    -webkit-line-break: strict;
    -epub-line-break: strict;
    line-break: strict;
}

.tcy
{
    letter-spacing: 0;

    -webkit-text-combine: horizontal;
    -epub-text-combine: horizontal;
    text-combine: horizontal;

    -webkit-text-combine-horizontal: all;
    text-combine-horizontal: all;
}

p
{
    margin: 0;
    padding: 0;
    text-indent: 1em;
}

.dialog
{
    text-indent: 0em;
}

h2
{
    margin-left: 3em;
    margin-right: 2em;
    text-indent: 3em;
    font-size: large;
    font-weight: normal;
}

p
{
    margin: 0;
    padding: 0;
    text-indent: 1em;
}

.dialog
{
    text-indent: 0.5em;
}

Kindle PWでの表示 Nexus7での表示 iPhone5Sでの表示

スクリーンショットはKindle Paperwhite 2013、Nexus7 2013、iPhone5Sの順番ですが、見事に表示がバラバラ。最後の「!」2つはU+203Cの感嘆符です。Kindleでは普通の「!」を縦中横させるほうがいい感じですな。

Kindle PWとNexus7ならある程度は表示を揃えられそうなので、この2つを優先しますかね。

2014/05/01(木)1文字フォントの作り方(無料)

💩 (うんこ)を表示できるフォント(うんこフォント)を作ったので作り方を軽くまとめておきます。

用意するハードウェア

  • スキャナー(デジタルでフォントを描く場合はなくてもOK)

最初に用意するソフトウェア

  • Gimp
  • Inkscape

フォント(SVGファイル)作成手順↓

  1. 紙に文字を書く
  2. スキャナーで読み込む(300dpiぐらい)
  3. Gimpで2値化(白と黒に分けること)
  4. 気に入らないところがあればGimpで編集
  5. bmpファイルで保存
  6. Inkscapeを起動
  7. 「ファイル」→「ドキュメントの設定」→「カスタムサイズ」で正方形にする(1000px x 1000pxぐらい)
  8. bmpファイルをドラッグ・アンド・ドロップしてInkscapeで読み込み(埋め込み)
  9. 「パス」→「ビットマップをトレース」→「OK」ボタンを押す
  10. 「テキスト」→「SVG フォントエディタ」→「新規」ボタンを押す
  11. 「フォント 1」をクリックして「ファミリ名」を適当なフォント名(うんこフォントなら「Unko」とか)にする
  12. 「グリフ」タブをクリック→「グリフを追加」ボタンを押す
  13. 「グリフ 1」の「マッチング文字列」に作りたいフォントの文字を入力
  14. 「選択オブジェクトから曲線を取得」ボタンを押す
  15. 「プレビューテキスト」に作りたいフォントの文字を入力して描いたフォントが反映されているか確認
  16. 「ファイル」→「名前を付けて保存」でファイルの種類はInkscape SVGのままで保存

Inkscapeの操作は自作フォントの作り方|windowsで無料で作成!How to make Font in Inkscape.It's completely free.が詳しいです。

SVGファイルから eot, ttf, woff ファイル作成手順(難易度高め)

  1. Linuxで「sudo apt-get install npm」する(パッケージ管理システムによって少し変わる)
  2. さらに「npm install -g svg2ttf」する
  3. 「svg2ttf from.svg to.ttf」でttfファイルを作成(もちろん適切なファイル名で)
  4. WOFFコンバータでttfファイルからwoffファイルとeotファイルを作成!(終了)

紙にかいた文字は↓ですが、線はもっと太くしたほうがいいです。 うんこ

↑のように線が細いと、小さく表示したときに文字が見えなくなるのでGimpでかなり太くしないといけなくなります。 unko

ファイルサイズは woff, eot, ttf で2,000から3,000 バイトぐらいになりました。

OK キャンセル 確認 その他