knowledge base

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

Node.js

gulpでShift_JISのファイルを生成する(Gitでの文字化け対策も行う)

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

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

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

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

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

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

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

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

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

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

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

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

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