単純なオプションの指定だけで良いかと思いきや、そうでもありませんでした。 下記の「avoid_this_directory_please」に除外したいディレクトリのパスを代入します。 find . -type d -name 'avoid_this_directory_please' -prune -o -type f -print 下記で解…

特定の文字列を含むファイル一覧の取得 grep -ril "文字列" ディレクトリのパス 特定の拡張子のファイルを検索対象に絞り込むには「–include」オプションを追加 grep -ril --include="*.html" "文字列" ディレクトリのパス 「grep」コマンドの詳細はこちらを…

きっかけ 先日、とあるプロジェクトにてShift_JISでHTMLやCSSを作成しなければいけないという場面がありました。 ただそれだけではなく、そのファイルは近いうち（半年から１年後）にUTF-8にして公開しなければいけないとのこと。 エディタの文字コードをShi…

クライアント側の実装 クライアント側は、基本的に前回までで実装したAPIを叩きにいくように変更します。 サブスクリプション の登録（と古いものがあれば削除） 前回の実装では、サブスクリプションの情報をconsoleに出力するだけでしたが、実際にサブスク…

Expressが提供するAPI自体を実装します。 基本的には第7回で紹介した内容を、Expressの文法に落とし込んでゆく感じになります。 ここで登場するsubscriptionsという変数には前回でSqualizeによって作成されたORマッパーのオブジェクト（DBにデータの追加や削…

ここまでで、任意の内容でプッシュ通知を送ることはできました。 ところが現状では、今後複数のサブスクリプションが増えた時に対応ができません。 push.jsは配列にて複数のサブスクリプションを送れるようになっているため、サブスクリプション が増えるこ…

.htaccessに以下を記述。今回はShift-JISにする想定です。 AddDefaultCharset shift-jis AddType "text/html; charset=shift-jis" .html .php php_value default_charset Shift_JIS php_value mbstring.language Japanese php_value mbstring.http_input aut…

VAPID やっぱり通知内容をカスタマイズしたい。 今回はそのために、VAPIDと呼ばれる仕組みを利用します。 必要なものは、Firebase Consoleから取得できる公開鍵と秘密鍵のペア。 SSHのようにこのキーペアを利用します。 利用する箇所は（１）通知登録時のPus…

はじめに WebPushと呼びます。 ServiceWorkerを使わなくてもJavascriptでプッシュ通知自体は実装できます。 しかしそれはサイトをブラウザ表示したときのみ通知されるもので、そうでなくても送られるプッシュ通知とは異なるものです。 （厳密にいうと参照先…

ServiceWorkerを動かすための最低限のベースができたので、ServiceWorkerに仕事をさせてみましょう。 まずは、メジャーな実装となるキャッシュ制御、つまるところ高速化やオフライン対応の実装を行います。 リクエストがあったらキャッシュを返すようにして…

登録 registerメソッドを使う 一旦インストールしてしまえば、JSに変更がない限りServiceWorkerは更新されない。 このあたりはブラウザがよしなにやってくてる。registerするには後述するserviceworker.jsのパスを引数に指定するだけ。 navigator.serviceWor…

これまでさんざんServiceWorkerという言葉が出てきましたが、ServiceWorkerとはブラウザとインターネットの間に立って色々と便利なことをしてくれるものです。 プロキシのようなイメージだと分かりやすいかもしれません。これがPWAそのものであるといっても…

今回は、PWAの機能の中でもっともシンプルなミニ情報バーの表示をしたいと思います。 ミニ情報バーとは PWAをブラウザで表示した時に画面下部に現れる、ホーム画面へのインストールを促すバナーのことです。 このバナーは正しい設定のもとPWA化されているWEB…

このシリーズPWAは個人的な調査メモをもとにしたものです。 巷の情報が散在して体系的にまとまった書籍もない中、PWAについて全く知識がない状態から実装レベルまでなんとか知識を引き上げようともがいた痕跡です。 なので記事の引用や、実装するためのソー…

例えば、以下のようなテキストファイル（filelist.txt）があるとします。 aaa.html bbb.html ccc.html ddd.html eee.html このリストをもとに新規ファイルを作成するには、毎回無題の新規ファイルを作成しそのたびにリネームをするという非効率な作業が必要…

ファイル中にマルチバイト文字があるか確認 gulp-sassモジュールを利用してsassをコンパイルしていると、以下のようにscssファイル中に文字コードを指定していても削除されてしまうことがあります。 @charset "UTF-8"; scssファイル中にマルチバイト文字があ…

以下のようなディレクトリ構造になるようgulpを用いてSassのコンパイルを行います。 devディレクトリがSassファイルを格納する開発用、destディレクトリがコンパイル後のCSSファイルを格納する納品用ディレクトリです。 root │ ├─ dev │ ├─ scss │ │ ├─ top …

Shift-JIS / EUC-JPの場合 Apacheにてデフォルトの文字コードにUTF-8を指定していることが原因なので、httpd.confにて下記をコメントアウト AddDefaultCharset UTF-8 UTF-8なのに文字化けする場合 ロケールが原因 先ほどは日本語専用の文字コードの場合でし…

httpd.confのドキュメントルートディレクティブに以下を記述 AllowOverride All

Boxにもよるのかもしれませんが、多くの場合はデフォルトで無効になっています。 まずSSIをするためのモジュールがインストールされているか、httpd.confにて確認。 下記がコメントアウトされていたらコメントを外します。 LoadModule include_module module…

Vagrantの共有フォルダ機能を利用して環境を構築している場合、ブラウザをスーパーリロードしてもキャッシュが消去されない場合があります。httpd.confのドキュメントルートディレクティブに以下を記述します。 EnableMMAP Off EnableSendfile Off

実機での挙動を実機で確認 モバイル用コンテンツの制作をする際、多くの場合はPC用ブラウザのエミュレータであったり、仮想環境にて挙動を確認します。 しかしごく稀に実機でしか起こり得ない崩れやバグが発生することがあります。 検証しなくてもある程度の…

.htaccessに以下を記述 AddOutputFilter INCLUDES .shtml .html .php .xsl includesという命令を、列挙した拡張子のファイルで実行可能にする、という意味です。

主な現象 以下に列挙したもの以外にもありそうなので、分かり次第追記してゆきます。 僕が経験したことがあるのは次のとおり。 faviconの反映ができない ※端末による Apple-touch-iconの反映ができない ※iOS端末のみ リンク先に指定したファイル（PDF等）の…