Rails で favicon の設定



カテゴリー Programming

はじめに

Rails で favicn を設定する方法(と、ついでに favicon そのものの生成)についてまとめた。

TL;DR

  • favicon_link_tag を使う
    • /public 配下の場合は / 始まりで指定
    • /app/assets など配下の場合は / 無しで指定
  • favicon の作成は Canvafavicon generator が便利
  • Favicon checker で設定内容を確認する
続きを読む

はじめに

簡易的に「あなたはxx歳以上ですか?」の年齢認証ページを挟む方法について整理した。

前提や要件は以下。

  • ユーザー登録なし
  • ページ表示前に単純な年齢認証を挟む
  • Yes を選択したら、表示しようとしていたページに移動
  • No を選択したら、トップページにリダイレクト
  • 一度 Yes を選択したら、(指定期間内は)その後の年齢認証は行わない

TL;DR

ちょっと分かりづらいけど。

  • cookie に「年齢認証結果」と「本来表示しようとしていたページ(URL)」を保持すると OK
  • 「年齢認証結果」がなければ、「本来表示しようとしていたページ(URL)」を保持しつつ、年齢認証ページにリダイレクト
  • 年齢認証で Yes が選ばれたら、「年齢認証結果」を保持して、「本来表示しようとしていたページ(URL)」にリダイレクト
続きを読む

はじめに

Rails で静的ページを作成する方法について調べて、thoughtbot/high_voltage に辿り着いたので使い方を整理した。

TL;DR

  • Gemfilegem 'high_voltage' を追加して bundle でインストール
  • app/views/pages/ 配下に静的ページ用の view ファイルを作成
  • link_to 'About', page_path('about') のようにすると静的ページへのリンクを生成可能
続きを読む

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) でページ別の設定内容を記述
続きを読む

はじめに

サイトのタイトルは 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 のメソッドも使える
    • tagNamename などを変更すると、他のタグも一撃で取れるはず
  • Array.from(document.head.children).find(t => t.tagName === "META" && t.name === "description") でも良い
続きを読む

はじめに

Chrome 拡張機能を React などで構成された SPA で動作させる方法 で、background から JS を注入する方法を整理した。が、別要件で上手くいかないケースがあったのでメッセージドリブンで処理タイミングを通知する方法を整理した。

TL;DR

続きを読む

はじめに

とあるページ向けに作っていた拡張機能が上手く動作しなくなったので確認すると、React.js を利用した SPA に変更されていた。

リロードするとちゃんと動作するのだが、クリックなどでページ遷移すると拡張機能が動作しないので、対応方法について調べた。

続編: Chrome 拡張機能で background scripts から content scripts にメッセージを送信する

TL;DR

続きを読む

HTML の OGP meta タグの設定方法



カテゴリー Programming

はじめに

OGP の設定について調べたので簡単にメモ。

調べる前は「面倒くさそう」と思ってたけど、ちゃんと見たら大したこと無かった。

TL;DR

  • <head>prefix を付与
  • <meta property="og:xxx" content="xxx> で各要素を指定
  • Twitter は <meta name="twitter:xxx" content="xxx"> で指定
  • Facebook は <meta property="fb:xxx" content="xxx"> で指定
続きを読む

r17n


Softwear Engineer


Fukuoka