knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

その他

【PWA】シリーズPWA (7) 暗号化してみよう

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

【PWA】シリーズPWA (6) プッシュ通知を送ってみる

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

【PWA】シリーズPWA (5) キャッシュを制御して高速化やオフライン対応をしてみる

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

【PWA】シリーズPWA (4) Service Workerを生成して実際に動かす

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

【PWA】シリーズPWA (3) Service Workerについて

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

【PWA】シリーズPWA (2) ミニ情報バーを表示する

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

【PWA】シリーズPWA (1) はじめ一歩

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

ファイル名一覧から新規ファイルを作成

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

gulpでSassをコンパイルするとcharset指定が削除される

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

gulpで階層構造を維持して出力する

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

Vagrantで文字化けする

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

Vagrantでphpmyadminが403エラーになる

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

VagrantでSSIを有効にする

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

Vagrantのキャッシュが強すぎる

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

インスペクタを用いたモバイル端末での検証方法まとめ

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

SSIをshtml以外でも実行可能にする

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

BASIC認証下ではできないこと

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