TechTips

Webページでのhreflangの設定に関するGoogleの情報

Last edited

以下のようなHTML等でのhreflangの設定は、SEO (Search Engine Optimization)と関係して、検索エンジンにページの関係性を正しく認識してもらうために行う場合が大半だと思います。

<html>
  <head>
    <link rel="alternate" hreflang="en" href="https://example.com/en/page.html">
    <link rel="alternate" hreflang="ja" href="https://example.com/ja/page.html">
    <link rel="alternate" hreflang="x-default" href="https://example.com/page.html">
  </head>
  <body>
  ...
  </body>
</html>

そして、日本では最も最適化をしたい検索エンジンはGoogleの場合が大半だと思います。

Googleが説明するhreflangの設定の仕方

Googleが公開している以下のWebページには、Googleが期待するhreflangの設定の仕方が説明されています。

ページのローカライズ版について Google に知らせる: https://developers.google.com/search/docs/specialty/international/localized-versions?hl=ja

以上、Google検索結果で良い感じに表示されることを目指してhreflangの設定するのであれば、まずはこちらのWebページを参考にすると良いのではないかと思いまして、ご紹介いたしました。

既存のRailsアプリへのRuboCopの導入

@wakairo

06 Dec, 2024 05:28 +00:00

Last edited

06 Dec, 2024 08:18 +00:00

Rails 7.2からRuboCopが新規アプリケーションでデフォルトで有効になりました。このTopicでは、7.1以前で作成した既存RailsアプリにRuboCopを後から導入して、RuboCopに関して7.2の新規アプリ相当の状態にセットアップする方法をご紹介します。

RuboCop (Omakase Ruby styling for Rails) のインストール

基本的にはrubocop-rails-omakaseの公式ドキュメントのインストール手順に従います。

まず以下のように、Gemfileのgroup :development, :testのところにrubocop-rails-omakaseを追加します。

group :development, :test do

  # Omakase Ruby styling [https://github.com/rails/rubocop-rails-omakase/]
  gem "rubocop-rails-omakase", require: false

end

次にbundle installを実行して、RuboCop等をインストールします。

bundle install

さらに、必須ではありませんが、bin/rubocopでRuboCopを実行できるように、以下のコマンドを実行します。

bundle binstubs rubocop

最後に.rubocop.ymlという名前でファイルを作成し、以下の内容を記述します。

# Omakase Ruby styling for Rails
inherit_gem:
  rubocop-rails-omakase: rubocop.yml

以上でRuboCop (Omakase Ruby styling for Rails) のセットアップが出来ました。

ローカル環境でのbin/rubocopの実行とその結果に対する対応の進め方

以下のコマンドでbin/rubocopを実行でき、omakaseのチェックを行えます。

bin/rubocop

このチェックでの指摘事項が多かった場合、以下のオプションを付けて実行することで、無視設定を記述した.rubocop_todo.ymlというファイルが作成され、 .rubocop.ymlにもこの無視ファイルを参照する設定が追加されますので、とりあえず全ての指摘事項を無視するように設定が出来ます。

bin/rubocop --auto-gen-config

設定が出来たら、bin/rubocopを実行して、とりあえず指摘事項の数が0となることを確認します。

1つずつ指摘事項へ対応

ここから先は、以下の手順を繰り返します。

.rubocop_todo.ymlから1項目を削除
bin/rubocopを実行して指摘内容を確認して対応
- bin/rubocop -aもしくはbin/rubocop -Aを実行して自動修正できるものは自動修正し、その修正内容で問題ないことを確認
  - -aは安全なもののみ、-Aは安全で無いものも含めて自動修正を行います。
- 自動修正できなかったものは手作業で修正・確認
- 特定のファイルのみチェックを回避する場合は、.rubocop.ymlにてExclude:を用いて設定
- ソースコードの特定の箇所（行）のみチェックを回避する場合は、ソースファイルのコメントに# rubocop:disable等を用いて設定
- 指摘内容に対応する規則を完全に採用しない場合には、.rubocop.ymlにてEnabled: falseの記述を用いて規則を無効にする

1項目ずつ対応を進め、.rubocop_todo.ymlの中身が無くなったら、.rubocop_todo.ymlを削除すると共に、.rubocop.yml内で.rubocop_todo.ymlを参照している設定を削除します。ここまで終わればRuboCopの諸規則への対応は完了となります。お疲れ様でした。

GitHubワークフロー（CI）でのrubocopの実行

.github/workflows/ci.ymlに相当するファイルがなければ作成します。この.ymlファイルを編集して、以下のようにjobsの下にlintジョブを追加します。

注意点

timeout-minutes:の設定は、実行時間に対して十分余裕を持たせて下さい。
ruby-version: .ruby-versionという設定は、プロジェクトルートにある.ruby-versionという名前のファイルで指定されているrubyのバージョンという意味になります。この設定について詳しくはこちらのTopicをご覧下さい。
-f githubオプションは、出力フォーマットをGitHub Actionsに適したものにするオプションです。

jobs:
  lint:
    runs-on: ubuntu-latest
    timeout-minutes: 10

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Set up Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: .ruby-version
          bundler-cache: true

      - name: Lint code for consistent style
        run: bin/rubocop -f github

公式情報

RuboCopのその他の詳細についてはRuboCop公式ドキュメントをご覧ください。
Omakase Ruby styling for RailsのRuboCop設定の最新の内容はGitHubで確認出来ます。なお、最新ではなくインストールしたバージョンのRuboCop設定内容をご覧になりたい場合は、GitHubの操作でTagsから当該バージョンを選択するようにして下さい。

RubyのArrayやHashのリテラルをdeep freezeするshareable_constant_valueマジックコメント

@wakairo

04 Dec, 2024 02:44 +00:00

概要

Rubyでは、以下のようにshareable_constant_value: literalというマジックコメントを記入することで、以下の例のように、定数に代入したArrayやHashのリテラルを深く（deeply）freezeすることが出来ます。

# shareable_constant_value: literal

X = [{foo: []}]
X.frozen? # => true
X[0].frozen? # => true
X[0][:foo].frozen? # => true

少し詳しい話

shareable_constant_valueマジックコメントはRuby 3.0で導入されました。

注意点

このマジックコメントのliteralモードでfreezeされるのは定数が対象であるため、以下のように、代入先が変数である場合にはfreezeされません。

# shareable_constant_value: literal

z = []
z.frozen? # => false

また、このマジックコメントのliteralモードを指定したファイル内では、以下のように、「freezeされていないオブジェクト」や「freezeされていないものを含むオブジェクト」を定数に代入しようとするとエラーが発生します。

# shareable_constant_value: literal

Y = [{}, Object.new] # => エラー発生

裏を返せば、以下のように、freezeすればエラーが回避できます。また、freezeする定数とfreezeしない定数でファイルを分けるという自然なアプローチでもエラーを回避できます。

# shareable_constant_value: literal

Y = [{}, Object.new.freeze]

参考文献

Ruby公式のshareable_constant_valueのドキュメント

Shinjuku.rb #96 「今までで一番学びになった瞬間」発表LT会!!

@wakairo

28 Nov, 2024 09:27 +00:00

Last edited

28 Nov, 2024 22:47 +00:00

［お知らせ］こちらのまとめに追加して欲しい内容があるなど、ご要望等ございましたら、下の所からのコメントやX（旧Twitter）などでお気軽にお伝えください。

Connpass: https://shinjukurb.connpass.com/event/336025/

それぞれのLTなどについての簡単な記録です。

開始前

新宿のRAIZAP本社にて

はじめに

スポンサー：RIZAP様
アンチハラスメントポリシー：人の嫌がることはしないでね

スポンサーLT

ものすごいスポンサーLT！はじめて！
「Shinjuku.rbを広げていきたい」

izawa 「What brought you to NYC?」

自分を変えた言葉：「What brought you to NYC?」
- 大学生でニューヨークに行ったときにかけてもらった言葉
- エンジニアになることを決意

chaki8923「失敗とそこから学んだこと」

失敗とそこから学んだこと
慌てない慌てない <- 一番大事
できる人に任せちゃう

Koji NAKAMURA 「Kaigi on Rails 2024とGlue」

スライド
好きなエクササイズはプランク
The Tale of Plack: https://www.youtube.com/watch?v=5XvH_y2wyG0
- YAPC::Asia 2010 のクロージングキーノート
- 具体的な話は何も覚えていなかったので、改めて見直した
- Glue (のり) となるものの重要性
- Ruby/Rack/RailsもGlue

Yuta 「駅員になって気づいたこと」

乗車券類は有価証券
教訓：確認数秒、処理徹夜

ryosk7 「5年越しにGitを理解した話」

スライド： https://speakerdeck.com/ryosk7/gitwoli-jie-sitahua
Gitは常に進化している
Gitはコマンドの集合体
Tips: Gitは日付の文字列を理解する。例: git log --since="yesterday"
「checkout ファイル名」でファイル復元
コミットメッセージで-mを2つ付けて簡潔と詳細の2つメッセージを付けられる。
実用Git 第3版: https://www.amazon.co.jp/dp/4814400616
Roppongi.rb来てね

otsuka-rizap 「私のエンジニア人生を変えた出会い」

Railsとの出会い!
初めてのフレームワークはJava servlet -> もっといいのあるぜ! Rails!
RIZAPとの出会いもRailsのインターン
モチベーションにはビジネス価値がある

Markdownプレビュー機能をリリースしました！

TechTips運営 @TechTips

27 Nov, 2024 12:13 +00:00

本日（2024/11/27）Markdownのプレビュー機能をリリースしました。
コメントなど、Markdownが利用できるところでは、投稿前にプレビューで確認できるようになりました。

既存のRailsアプリでのDependabotへの対応

@wakairo

25 Nov, 2024 02:34 +00:00

Last edited

25 Nov, 2024 02:41 +00:00

Rails 7.2から新規アプリケーションにおいてDependabotがデフォルトで有効になりました。具体的には、rails newで生成される新規アプリにおいて、Dependabotの設定ファイルである.github/dependabot.ymlが生成されるようになりました。

Dependabotとは

Dependabotとは、GitHubのサービスであり、リポジトリで使用しているソフトウェアを最新の状態に保つことをサポートしてくれるサービスです。具体的なDependabotの機能としては、以下の3つがあります。

Dependabot alerts — リポジトリで使っている依存関係に内在する脆弱性について通知します。
Dependabot security updates — 使っている依存関係のうち、既知のセキュリティ脆弱性があるものを更新するための pull request を自動的に生成します。
Dependabot version updates — 依存関係を最新に保つための pull request を自動的に発行します。

Dependabotの詳細な理解にはクイックスタートガイドなどをご利用ください。

既存のRailsアプリでのDependabotへの対応方法

脆弱性の通知機能(Dependabot alerts)は、GitHubのWebページから設定を変更するだけで利用できます。

脆弱性に関するpull requestの自動生成機能(Dependabot security updates)も、GitHubのWebページから設定を変更するだけで利用できますが、詳細な設定が必要な場合はdependabot.ymlを通して行います。

脆弱性対応以外も含めて最新の状態にするためのpull requestを自動生成する機能（Dependabot version updates）は、dependabot.ymlを通した設定が必要です。

（参考）デフォルトのdependabot.ymlの内容

このリンク先で閲覧できるrails newで生成される新規アプリのdependabot.ymlの設定内容は、既存アプリでも参考になるかもしれません。このdependabot.ymlには、Rails 7.2の時点では、railsアプリで利用しているgemとGitHub Actions(GitHubのCI)で利用しているアクションを最新に保つための設定が記述されています。

BootstrapとTurbo Driveを組み合わせたときの問題と対処法

@wakairo

22 Nov, 2024 02:29 +00:00

Last edited

22 Nov, 2024 02:35 +00:00

問題

HotwireのTurbo Driveでは高速化を図るために、ページ遷移時に全体をリロードせずに<body>タグ内のコンテンツを置き換える動作が基本となっています。そのためか、Turbo Driveを有効にしていると、JavaScriptの動作が必要なBootstrapのコンポーネントが適切に動作しない場合があります。

例えば、タブのコンポーネントにおいて、ページ遷移の直後はカーソルキーでのタブの切り替えが動作しません。

対策

HotwireのStimulusを利用して、必要なBootstrapオブジェクトをページ遷移時に作成します。

対策の具体例

タブ・コンポーネントの場合、まず以下のようにタブの各要素を対象にしてgetOrCreateInstance()をconnect内で呼び出すStimulusコントローラapp/javascript/controllers/foo_controller.jsを作成します。

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    const triggerTabList =
          this.element.querySelectorAll(".nav-link");
    triggerTabList.forEach(triggerEl => {
      bootstrap.Tab.getOrCreateInstance(triggerEl);
    });
  }
}

次に以下のように、このStimulusコントローラfooを指定したhtmlタグでタブコンポーネントを囲みます。

<div data-controller="foo">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  </div>
</div>

以上で、Turbo Driveによるページ遷移時に、このタブ・コンポーネントを含むHTMLがロードされるとconnect()が呼び出され、タブ用のBootstrapオブジェクトが存在していなかった場合には作成されるようになり、その結果タブ・コンポーネントが正しく動作するようになります。

Windows Terminalの日本語表示は複数のフォントを指定することで改善できます

@wakairo

16 Nov, 2024 09:54 +00:00

複数のフォントが設定出来たのですね。単一のフォントしか使えないのに比べると、意図した表示の仕方に大分しやすくなりますね。良い情報をありがとうございます。

ちなみに、Microsoftは現在Cascadia Nextという日本語に対応した等幅フォントを開発しているそうですので、このフォントの採用などでWindows Terminalの日本語表示がデフォルト設定のままでも良い感じになると良いですね。

Windows Terminalの日本語表示は複数のフォントを指定することで改善できます

Misasa @Misasa365

15 Nov, 2024 12:26 +00:00

Last edited

15 Nov, 2024 12:27 +00:00

Windows Terminalのデフォルトの日本語表示は、文字と文字の間に隙間があり、見にくいと感じる方も少なくないと思います。 Windows Terminalでは、複数のフォントを利用可能にする改良が2024/03/27にマージされています。ですので、それ以降のバージョンでは、コンソール用欧文フォントに続けて好みの和文フォントを設定することで、日本語表示を改善できます。

具体的には、Windows Terminalの設定を開き、「プロファイル」の「既定値」を選択し、「追加の設定」の「外観」を選択、「フォントフェイス」のところにカンマで区切って利用したいフォントを並べ、設定を保存すればOKです。

例えば、「フォントフェイス」のところを以下のように設定した場合、英数字や記号は「Cascadia Code」フォント、日本語の文字は「MS Gothic」フォントで表示されるようになります。

Cascadia Code, MS Gothic

Brakemanの--safe-methodsオプションはXSSチェック専用

@wakairo

15 Nov, 2024 00:17 +00:00

役立つ情報ありがとうございます。

リンク先のGitHubのディスカッションを覗いてみたのですが、「poor naming」という表現があり、--safe-methodsというオプション名が紛らわしいということは認識されているみたいですね。
それから、"use the ignore file instead"というポリシーだそうですので、XSSチェック以外のタイプの警告は、1つずつ無視の設定をして欲しいというのがBrakemanの開発側の考えのようですね。

Categories

Latest comments

Webページでのhreflangの設定に関するGoogleの情報

Googleが説明するhreflangの設定の仕方

既存のRailsアプリへのRuboCopの導入

RuboCop (Omakase Ruby styling for Rails) のインストール

ローカル環境でのbin/rubocopの実行とその結果に対する対応の進め方

1つずつ指摘事項へ対応

GitHubワークフロー（CI）でのrubocopの実行

注意点

公式情報

RubyのArrayやHashのリテラルをdeep freezeするshareable_constant_valueマジックコメント

概要

少し詳しい話

注意点

参考文献

Shinjuku.rb #96 「今までで一番学びになった瞬間」発表LT会!!

開始前

はじめに

スポンサーLT

izawa 「What brought you to NYC?」

chaki8923「失敗とそこから学んだこと」

Koji NAKAMURA 「Kaigi on Rails 2024とGlue」

Yuta 「駅員になって気づいたこと」

ryosk7 「5年越しにGitを理解した話」

otsuka-rizap 「私のエンジニア人生を変えた出会い」

Markdownプレビュー機能をリリースしました！

既存のRailsアプリでのDependabotへの対応

Dependabotとは

既存のRailsアプリでのDependabotへの対応方法

（参考）デフォルトのdependabot.ymlの内容

BootstrapとTurbo Driveを組み合わせたときの問題と対処法

問題

対策

対策の具体例

Windows Terminalの日本語表示は複数のフォントを指定することで改善できます

Windows Terminalの日本語表示は複数のフォントを指定することで改善できます

Brakemanの--safe-methodsオプションはXSSチェック専用