毎日やったことを記録していく（2019/5/30 53日目）

雑記

今日やったこと

英語

TOEIC® L&R テスト 文法問題 でる1000問
  • 回答数：5問
iKnow
  • 新規：0個
  • 復習：5個
スタディサプリENGLISH
  • クイックワードクイズ：1サブセクション

開発

danime-nico-tools
  • fixturesの更新
  • faviconの設定
  • OGPの設定
  • ChromeのAuditsで指摘された箇所の修正

知ったこと

theme-color

下記のように設定するとGoogleのiOS アプリやChrome for Androidのヘッダー等に表示される色を設定できる。

<meta name="theme-color" content="#ffffff">

target="blank"を設定している際はrel="noopener"を指定する

これをしておかないとセキュリティ・パフォーマンスの2点で問題になってくる。

セキュリティ

rel="noopener"を指定しておかないとリンク先から元ページを操作できてしまう。

パフォーマンス

rel="noopener"を指定しておかないとリンク先でもJavascriptのプロセス・スレッドが元ページで動いてしまう。

参考

developers.google.com chaika.hatenablog.com note.mu

meta-tags

  • meta_tagsという類似Gemがある
    • 最初間違ってこっちを追加してしまった。
  • ページ内でデフォルトの値から変更したい場合にset_meta_tagsをViewで使用することでデフォルトで設定した値を上書きできる
    • set_meta_tagsの引数にはHashを渡す
    • オブジェクトにto_meta_tagsというメソッドをはやし、set_meta_tagsにそのオブジェクトのインスタンスを渡してやると内部でto_meta_tagsを呼んでくれる
  • titleを設定していない場合、titleには:siteの値が設定される
    • トップページ等、:siteのみで十分でtitleを設定しない場合、og:titleが設定されないのでopgがvalidにならない。この場合はViewでset_meta_tags({ og: { title: :site } })のように設定しておく必要がある。

OGPを設定する際に便利なツール

感想等

スマホのGoogle検索でfavivonが表示されない

ページには設定できたけどスマホのGoogle検索結果にはfaviconが表示されない・・・。
なぜだろう？