knowledge base

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

【PWA】シリーズPWA (10) クライアントからAPIにリクエストを送って通知を受け取る

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

【PWA】シリーズPWA (9) APIを実装する

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

【PWA】シリーズPWA (8) 複数の端末に通知を送る

ここまでで、任意の内容でプッシュ通知を送ることはできました。 ところが現状では、今後複数のサブスクリプションが増えた時に対応ができません。 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…

【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について全く知識がない状態から実装レベルまでなんとか知識を引き上げようともがいた痕跡です。 なので記事の引用や、実装するためのソー…

jQueryオブジェクトかどうかの判定方法

instanceof演算子を利用します。 変数objにはjQueryオブジェクトもしくはVanillaなDOMオブジェクトが入っています。 obj instanceof jQuery jQueryオブジェクトであれば戻り値はtrueになります。「instanceof XXX」の「XXX」部は文脈によってjQueryそのもの…

ページ離脱防止機能を実装する

beforeunloadイベントを利用して実装 先日、とあるCMSの管理画面にて、記事入力途中・画像入力途中でのページ離脱防止機能の実装を行いました。 要件としては、Google Chromeのみで、離脱時にアラートを表示するというものでした。 ページ遷移前に発火するbe…

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

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

Canvasでの認証エラー

toDataURL, getImageDataなど、Canvasで画像のピクセルデータを取得したり保持しているピクセルデータを出力する際、画像を格納しているディレクトリにBASIC認証がかかっていると認証エラーを起こします。 その際はCanvasで操作するimageオブジェクトにcross…

Photoshopのような画像合成はフロントエンドでどこまで可能か

モダンブラウザに限定すれば実装は容易 Photoshopには描画モードという機能があり、例えば「乗算」「オーバーレイ」「スクリーン」などの描画モードを用いることでデザインの表現を大きく広げることが可能になります。 これまで描画モードを利用した表現はブ…

Windows環境でWebフォントが崩れる

CSS

ブラウザを問わずWindowsでのみ崩れる Webフォントサービスを利用していた際、Windows環境にてブラウザを問わずフォントが崩れるという現象がありました。 ▼Windows環境での表示 ▼本来の表示 遠目にはわかりにくいのですが、太字の部分においてWindowsの環境…

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

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

SVGアニメーション はじめの一歩

前提 SVGの埋め込み方法はいくつか用意されています。 img要素のsrc属性による埋め込み object要素のdata属性による埋め込み embed要素のsrc属性による埋め込み CSSプロパティ(背景画像や擬似要素)による埋め込み インラインSVGによる埋め込み 基本的にSVG…

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用ブラウザのエミュレータであったり、仮想環境にて挙動を確認します。 しかしごく稀に実機でしか起こり得ない崩れやバグが発生することがあります。 検証しなくてもある程度の…

Canvasのレスポンシブ対応

Canvasのレスポンシブ対応はなぜ難しいか Canvasは複雑なグラフィックの描画から、マルチデバイスに対応したアニメーションの実装、3Dの描画まで幅広く対応できる優れものです。 ところがレスポンシブ対応となると格段に難易度が上がります。 その理由につい…

ビューポートのサイズに合わせてフォントを拡縮する

CSS

iOSではzoomが非対応に レスポンシブデザインにおいて、画面サイズに合わせてフォントサイズも拡縮しないとデザインを大きく崩してしまう場合があります。 そのようなときは、こちらのjQueryプラグインのような挙動を実装する必要があります。これまでは、そ…

YouTubeの埋め込み再生で、警告メッセージが出る

モバイルでは自動再生は行わない YouTube Iframe Player APIを使用して、埋め込み動画を動的生成したところ、「すぐに再生が開始しない場合は、端末を再起動してください。」というメッセージが表示されるとともに、動画のローディングが終わらないという現…

チェックボックスをreadonlyにする

チェックボックスは「見た目上」readonlyにならない フォーム部品にはそれぞれreadonly属性がサポートされていて、これを指定すれば入力が不可能になります(disabledとは違います、念のため)。 ところがチェックすボックスやラジオボタンにreadonly属性を…

n秒づつ遅らせてクラスを追加する

delayはアニメーションのみ このような要件を実装するためによく使われるのは、以下のようにdelayを利用したロジックです。 [ex].200ミリ秒づつ遅らせてフェードインする var $targets = $('.fade'); var delay = 200; $targets.each(function(i){ $(this).d…