Lozad.js で Lazy Load (非 jQuery)



カテゴリー Programming

はじめに

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 を content_for で設定する方法



カテゴリー Programming

はじめに

Rails で OGP meta tags を設定する方法について整理した。この例では content_for を使ってページ別に定義する方法を用いている。

TL;DR

  • サイト名などの共通項はレイアウトファイルに記述
  • レイアウトファイルに yield(:ogp) を追加し、ページ別の設定内容を展開
  • 個別ページの view ファイルに content_for(:ogp) でページ別の設定内容を記述
続きを読む

はじめに

Laravel の中間テーブルを使った多対多(belongsToMany)の関係で、中間テーブルのカラムでソートする方法を調べた。

イメージとしては「ユーザー」と「サークル」があって、「ユーザー」は複数の「サークル」に所属可能、「サークル」には複数の「ユーザー」が所属。サークルへの加入時期(created_at)でソートする、など。

TL;DR

  • withPivotorderBy を組み合わせる
  • withPivot('created_at AS joined_at') のように別名を付けると分かりやすい
続きを読む

r17n


Softwear Engineer


Fukuoka