Vue + Cordova の iOS アプリを Xcode v11 でビルドすると Cannot read property 'toLowerCase' of undefined のエラーが出たので、解決方法について整理した。
cordova-ios v4 系は互換性がないvue add cordova でインストールされるのは cordova-ios v4.5.5 (2019/11/21 現在)cordova platform rm ios → cordova platform add ios@latest で解決Vue.js + TypeScript で CDN からスクリプトを読み込んで、xxxx.ts で window.hoge にアクセスするコードをビルドすると Property 'hoge' does not exist on type 'Window'. のビルドエラーが出たので、解決方法を調べて整理した。
declare global を使うdeclare global { interface Window { hoge: any } }window.hoge = window.hoge || {};最近のサイトでよく見かける「このサイトでは 〜 Cookie を利用します」という表示を、osano/cookieconsent を用いて簡単に実現する方法について調べた。
jQuery Select2 で、選択肢に存在しない情報を動的に追加する方法を調べた。
ユーザー入力で一致する選択肢がある場合は既存選択肢を、そうでなければユーザー入力をそのまま選択肢として追加する、というイメージ。
tags: true を指定すると選択肢を動的に追加できるcreateTag で選択肢追加時の挙動を制御できるmultiple の場合は複数選択しを追加できるjQuery Select2 で、ajax で選択肢を取得する方法方法を調べた。
ajax オプション内で設定url, data オプションで API Request に関する設定processResults オプションで API Response を受信した後の処理templateResult, templateSelection オプションで見た目(HTML)の設定jQuery Select2 で、複数選択(multiple)を有効にした場合の、最大選択可能数を設定する方法を調べた。
$('xx').select2({maximumSelectionLength: n}) で最大選択可能数を設定できるmultiple は <select multiple> でも、select2({multiple: "multiple"}) でも良いlanguage: maximumSelected でメッセージをカスタマイズできるjQuery を使わずに Lazy Load できる ApoorvSaxena/lozad.js の使い方を整理した。
<img class="lozad" src="dummy" data-src="image"> のように指定class="lozad" を追加data-src に Lazy Load 対象画像、src にダミー画像を設定lozad().observe() を実行して Lazy Load 起動(監視処理の起動)IntersectionObserver を使っているので SEO 的にも良い(らしい)サイトのタイトルは document.title で取得できるが、description は一発で取れない(専用の関数が無い)ので、簡単に取得する方法を調べた。
Array.prototype.slice.call(document.head.children).find(t => t.tagName === "META" && t.name === "description") で取れるArray.prototype.slice.call と組み合わせると、Array.prototype のメソッドも使えるtagName や name などを変更すると、他のタグも一撃で取れるはずArray.from(document.head.children).find(t => t.tagName === "META" && t.name === "description") でも良いArray.from は IE 非対応なので注意Chrome 拡張機能を React などで構成された SPA で動作させる方法 で、background から JS を注入する方法を整理した。が、別要件で上手くいかないケースがあったのでメッセージドリブンで処理タイミングを通知する方法を整理した。
chrome.runtime.onMessage.addListener を使ってメッセージを待つchrome.tabs.sendMessage を使ってメッセージを送るchrome.tabs.onUpdated.addListener でタブの更新の検出や URL の絞り込みを行うとあるページ向けに作っていた拡張機能が上手く動作しなくなったので確認すると、React.js を利用した SPA に変更されていた。
リロードするとちゃんと動作するのだが、クリックなどでページ遷移すると拡張機能が動作しないので、対応方法について調べた。
続編: Chrome 拡張機能で background scripts から content scripts にメッセージを送信する
chrome.tabs.onUpdated.addListener でページ遷移を検知chrome.tabs.executeScript で JS を注入
