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 的にも良い(らしい)2019年11月時点で主要な SNS である(と個人的に思う) Twitter, Facebook, LINE への共有リンクの設定方法についてまとめた。
https://twitter.com/intent/tweet?text=<text>via, related, url, hashtagshttps://www.facebook.com/share.php?u=<url>https://line.me/R/msg/text/?<text>Rails で OGP meta tags を設定する方法について整理した。この例では content_for を使ってページ別に定義する方法を用いている。
yield(:ogp) を追加し、ページ別の設定内容を展開content_for(:ogp) でページ別の設定内容を記述Laravel の中間テーブルを使った多対多(belongsToMany)の関係で、中間テーブルのカラムでソートする方法を調べた。
イメージとしては「ユーザー」と「サークル」があって、「ユーザー」は複数の「サークル」に所属可能、「サークル」には複数の「ユーザー」が所属。サークルへの加入時期(created_at)でソートする、など。
withPivot と orderBy を組み合わせるwithPivot('created_at AS joined_at') のように別名を付けると分かりやすいPHP, Laravel で null の可能性があるケースでの便利なメソッドや演算子について調べたので忘れないようにメモ。
※Ruby の Safe Navigation Operator (ぼっち演算子) hoge&.name とかのようなもの。
optional(): optional($hoge)->name とすると、$hoge = null の時は null が返ってくる??: $a = $b ?? 'null だよ' とすると、$b != null の時は $b、$b == null の時は ?? の後の値が設定されるoptional($a)->name ?? '未入力' のように組み合せて使うと便利サイトのタイトルは 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 を注入docs 配下を対象にした GitHub Pages を、検索エンジンにクロールしてもらうために調べたことを整理した。
ちなみにターゲットは以下のサイト。
docs に _config.yml を配置docs に googleXXXX.html を配置public に配置してビルドOGP の設定について調べたので簡単にメモ。
調べる前は「面倒くさそう」と思ってたけど、ちゃんと見たら大したこと無かった。
<head> に prefix を付与<meta property="og:xxx" content="xxx> で各要素を指定<meta name="twitter:xxx" content="xxx"> で指定<meta property="fb:xxx" content="xxx"> で指定
