javascript
クライアント側の実装 クライアント側は、基本的に前回までで実装したAPIを叩きにいくように変更します。 サブスクリプション の登録(と古いものがあれば削除) 前回の実装では、サブスクリプションの情報をconsoleに出力するだけでしたが、実際にサブスク…
Expressが提供するAPI自体を実装します。 基本的には第7回で紹介した内容を、Expressの文法に落とし込んでゆく感じになります。 ここで登場するsubscriptionsという変数には前回でSqualizeによって作成されたORマッパーのオブジェクト(DBにデータの追加や削…
ここまでで、任意の内容でプッシュ通知を送ることはできました。 ところが現状では、今後複数のサブスクリプションが増えた時に対応ができません。 push.jsは配列にて複数のサブスクリプションを送れるようになっているため、サブスクリプション が増えるこ…
VAPID やっぱり通知内容をカスタマイズしたい。 今回はそのために、VAPIDと呼ばれる仕組みを利用します。 必要なものは、Firebase Consoleから取得できる公開鍵と秘密鍵のペア。 SSHのようにこのキーペアを利用します。 利用する箇所は(1)通知登録時のPus…
はじめに WebPushと呼びます。 ServiceWorkerを使わなくてもJavascriptでプッシュ通知自体は実装できます。 しかしそれはサイトをブラウザ表示したときのみ通知されるもので、そうでなくても送られるプッシュ通知とは異なるものです。 (厳密にいうと参照先…
ServiceWorkerを動かすための最低限のベースができたので、ServiceWorkerに仕事をさせてみましょう。 まずは、メジャーな実装となるキャッシュ制御、つまるところ高速化やオフライン対応の実装を行います。 リクエストがあったらキャッシュを返すようにして…
登録 registerメソッドを使う 一旦インストールしてしまえば、JSに変更がない限りServiceWorkerは更新されない。 このあたりはブラウザがよしなにやってくてる。registerするには後述するserviceworker.jsのパスを引数に指定するだけ。 navigator.serviceWor…
これまでさんざんServiceWorkerという言葉が出てきましたが、ServiceWorkerとはブラウザとインターネットの間に立って色々と便利なことをしてくれるものです。 プロキシのようなイメージだと分かりやすいかもしれません。これがPWAそのものであるといっても…
今回は、PWAの機能の中でもっともシンプルなミニ情報バーの表示をしたいと思います。 ミニ情報バーとは PWAをブラウザで表示した時に画面下部に現れる、ホーム画面へのインストールを促すバナーのことです。 このバナーは正しい設定のもとPWA化されているWEB…
このシリーズPWAは個人的な調査メモをもとにしたものです。 巷の情報が散在して体系的にまとまった書籍もない中、PWAについて全く知識がない状態から実装レベルまでなんとか知識を引き上げようともがいた痕跡です。 なので記事の引用や、実装するためのソー…
instanceof演算子を利用します。 変数objにはjQueryオブジェクトもしくはVanillaなDOMオブジェクトが入っています。 obj instanceof jQuery jQueryオブジェクトであれば戻り値はtrueになります。「instanceof XXX」の「XXX」部は文脈によってjQueryそのもの…
beforeunloadイベントを利用して実装 先日、とあるCMSの管理画面にて、記事入力途中・画像入力途中でのページ離脱防止機能の実装を行いました。 要件としては、Google Chromeのみで、離脱時にアラートを表示するというものでした。 ページ遷移前に発火するbe…
toDataURL, getImageDataなど、Canvasで画像のピクセルデータを取得したり保持しているピクセルデータを出力する際、画像を格納しているディレクトリにBASIC認証がかかっていると認証エラーを起こします。 その際はCanvasで操作するimageオブジェクトにcross…
モダンブラウザに限定すれば実装は容易 Photoshopには描画モードという機能があり、例えば「乗算」「オーバーレイ」「スクリーン」などの描画モードを用いることでデザインの表現を大きく広げることが可能になります。 これまで描画モードを利用した表現はブ…
前提 SVGの埋め込み方法はいくつか用意されています。 img要素のsrc属性による埋め込み object要素のdata属性による埋め込み embed要素のsrc属性による埋め込み CSSプロパティ(背景画像や擬似要素)による埋め込み インラインSVGによる埋め込み 基本的にSVG…
Canvasのレスポンシブ対応はなぜ難しいか Canvasは複雑なグラフィックの描画から、マルチデバイスに対応したアニメーションの実装、3Dの描画まで幅広く対応できる優れものです。 ところがレスポンシブ対応となると格段に難易度が上がります。 その理由につい…
モバイルでは自動再生は行わない YouTube Iframe Player APIを使用して、埋め込み動画を動的生成したところ、「すぐに再生が開始しない場合は、端末を再起動してください。」というメッセージが表示されるとともに、動画のローディングが終わらないという現…
チェックボックスは「見た目上」readonlyにならない フォーム部品にはそれぞれreadonly属性がサポートされていて、これを指定すれば入力が不可能になります(disabledとは違います、念のため)。 ところがチェックすボックスやラジオボタンにreadonly属性を…
delayはアニメーションのみ このような要件を実装するためによく使われるのは、以下のようにdelayを利用したロジックです。 [ex].200ミリ秒づつ遅らせてフェードインする var $targets = $('.fade'); var delay = 200; $targets.each(function(i){ $(this).d…
たとえば下記のようなページを想定します。 ビジュアルが表示幅ぴったりに広がっており、とても洗練されたデザインですね。 今回はこのデザインを横幅320pxに最適化して表示する際の問題について書きたいと思います。 横幅320pxに最適化とは 横幅320px固定の…
関数内で、その関数自身の情報を得たいなと思っていました。 次の方法で可能となります。 var functionA = function(){ console.log(arguments); } argumentsというオブジェクトは、本来名前の通り関数に渡された引数を参照できる配列に似たものです。 もし…
transitionが終了したら実行されるようにしたい CSS3のプロパティであるtransitionを用いてアニメーションをさせるとき、transition終了時にコールバックを実装したいときがあります。 jQueryのanimateメソッドならば、簡単にコールバック関数を指定できるの…
Android2.3デフォルトブラウザにはiframeに関連するバグだけでなく、他にもスクロールにまつわるバグがあります。 今回はoverflow:scrollにまつわる現象について、その解決方法をご紹介したいと思います。 要素からあふれた部分を表示するoverflowプロパティ…
jQueryを用いた場合 垂直方向はscrollTopで取得できますが、水平方向のスクロール量はscrollLeftによって取得します。 var scrollLeft = $(ELEMENT).scrollLeft(); 引数に数値を与えれば、その数値だけ水平方向にスクロールします。 たとえば左に200pxスクロ…
※inputValという変数に、チェック対象の文字列が代入されていると仮定します。 空白チェック 空文字、半角スペース、全角スペース、タブを検知。 if(inputVal == '' || inputVal.match(/^[\s\u00A0\u3000]+$/g)){ console.log('空白'); }else{ console.log('…
iOS版Safariで入力フォームにフォーカスすると、勝手にズームすることがあります。 予告なくズームされるため、ユーザビリティを考慮すると、好ましくありません。 この現象に対する対策はいくつかあるため、ご紹介いたします。 font-sizeを大きく設定する i…
以下のような事例を想定します。 こちらの事例はページ読み込み時に、タイル状に並んだ透過PNGがフェードインする要件だったのですが、IE8で表示したときに透過チャンネルの部分が黒く汚れてしまいました。 フェードしているので分かりにくいかもしれません…
イベントのバブリングに注意 たとえば、ページ内の任意を場所をクリックしたとき、クリックした場所にある要素のタグ名を出力するという事例を想定します。 まずタグ名は次のように取得可能です。 var target = /* DOMオブジェクト */ var tagName = target.…
try~catchを活用 たとえば、ユーザーエージェントからIEのバージョンを判別します。 var ua = window.navigator.appVersion.toLowerCase(); var appVersion = parseFloat(ua.match(/msie(\s)?(\d+)/i)[2]); String.matchメソッドの戻り値は、正規表現の後方…
UTF-8の外部ファイルを、Shift-JISのページに読み込むと想定します。 当然ながら文字コードが異なるので、文字化けします。 overrideMimeTypeを用いる $.ajax({ type: 'GET', url: 'hogehoge.xml', dataType: 'xml', success: function(data) { /* do someth…