はじめに
jQuery Select2 で、複数選択(multiple)を有効にした場合の、最大選択可能数を設定する方法を調べた。
TL;DR
$('xx').select2({maximumSelectionLength: n})で最大選択可能数を設定できるmultipleは<select multiple>でも、select2({multiple: "multiple"})でも良いlanguage: maximumSelectedでメッセージをカスタマイズできる
はじめに
Rails で favicn を設定する方法(と、ついでに favicon そのものの生成)についてまとめた。
TL;DR
favicon_link_tagを使う/public配下の場合は/始まりで指定/app/assetsなど配下の場合は/無しで指定
- favicon の作成は Canva と favicon generator が便利
- Favicon checker で設定内容を確認する
はじめに
簡易的に「あなたはxx歳以上ですか？」の年齢認証ページを挟む方法について整理した。
前提や要件は以下。
- ユーザー登録なし
- ページ表示前に単純な年齢認証を挟む
- Yes を選択したら、表示しようとしていたページに移動
- No を選択したら、トップページにリダイレクト
- 一度 Yes を選択したら、(指定期間内は)その後の年齢認証は行わない
TL;DR
ちょっと分かりづらいけど。
- cookie に「年齢認証結果」と「本来表示しようとしていたページ(URL)」を保持すると OK
- 「年齢認証結果」がなければ、「本来表示しようとしていたページ(URL)」を保持しつつ、年齢認証ページにリダイレクト
- 年齢認証で Yes が選ばれたら、「年齢認証結果」を保持して、「本来表示しようとしていたページ(URL)」にリダイレクト
はじめに
Rails で静的ページを作成する方法について調べて、thoughtbot/high_voltage に辿り着いたので使い方を整理した。
TL;DR
Gemfileにgem 'high_voltage'を追加してbundleでインストールapp/views/pages/配下に静的ページ用の view ファイルを作成link_to 'About', page_path('about')のようにすると静的ページへのリンクを生成可能
はじめに
jQuery を使わずに Lazy Load できる ApoorvSaxena/lozad.js の使い方を整理した。
TL;DR
<img class="lozad" src="dummy" data-src="image">のように指定class="lozad"を追加data-srcに Lazy Load 対象画像、srcにダミー画像を設定
lozad().observe()を実行して Lazy Load 起動(監視処理の起動)IntersectionObserverを使っているので SEO 的にも良い(らしい)
はじめに
2019年11月時点で主要な SNS である(と個人的に思う) Twitter, Facebook, LINE への共有リンクの設定方法についてまとめた。
TL;DR
- Twitter:
https://twitter.com/intent/tweet?text=<text>- 他オプション:
via,related,url,hashtags
- 他オプション:
- Facebook:
https://www.facebook.com/share.php?u=<url> - LINE:
https://line.me/R/msg/text/?<text>
はじめに
Rails で OGP meta tags を設定する方法について整理した。この例では content_for を使ってページ別に定義する方法を用いている。
TL;DR
- サイト名などの共通項はレイアウトファイルに記述
- レイアウトファイルに
yield(:ogp)を追加し、ページ別の設定内容を展開 - 個別ページの view ファイルに
content_for(:ogp)でページ別の設定内容を記述
はじめに
サイトのタイトルは document.title で取得できるが、description は一発で取れない(専用の関数が無い)ので、簡単に取得する方法を調べた。
TL;DR
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 を注入する方法を整理した。が、別要件で上手くいかないケースがあったのでメッセージドリブンで処理タイミングを通知する方法を整理した。
TL;DR
- content:
chrome.runtime.onMessage.addListenerを使ってメッセージを待つ - background:
chrome.tabs.sendMessageを使ってメッセージを送るchrome.tabs.onUpdated.addListenerでタブの更新の検出や URL の絞り込みを行う
はじめに
とあるページ向けに作っていた拡張機能が上手く動作しなくなったので確認すると、React.js を利用した SPA に変更されていた。
リロードするとちゃんと動作するのだが、クリックなどでページ遷移すると拡張機能が動作しないので、対応方法について調べた。
続編: Chrome 拡張機能で background scripts から content scripts にメッセージを送信する
TL;DR
chrome.tabs.onUpdated.addListenerでページ遷移を検知chrome.tabs.executeScriptで JS を注入- DOM 追加するような場合は、追加位置によっては残存するので適宜削除する
