Kouji Takao

PTA役員がきっかけで青少年育成に携わるようになって約13年。いまでは地域の青少年育成に関わる人を増やしたり、育成するための活動をさせてもらっています。人生、何がきっかけで、どんなことをするのかなんて、わかんないものですね。その青少年育成の活動において、ZOOMを利用したビデオ会議の参加者が少ないという悩みがあります。もしかするとZOOMの敷居が高いのかもしれない、とのご意見をいただき、試しにLINEのグループ通話でもZOOMのビデオ会議に参加できるようにしてみました。    Google広告試したのはこんな感じ。まずは手元のコンピューター (MacBook Air M3) に ZOOM と LINE を用意します。そして、 ZOOM と LINE の音声を BlackHole というソフトウェアを使ってつなぎます。さらに LINE のグループでビデオ通話を開始して、ZOOM の画面を共有します。これで ZOOM と LINE をつなぐことができます。つぎにiPhoneのZOOMで接続して準備完了です。私はこちらをつかって参加者とやりとりをします。参加者は、ZOOMまたはLINEの好きな方で接続します。ただし、LINEの場合は音声は問題ないのですが、画面についてはZOOMの画面しか表示されないため、自分の顔が相手からは見えません。これは、この仕組みの制限になります。ZOOM と LINE の音声をつなぐ今回使った BlackHole の設定について、詳しく説明します。BlackHole は仮想オーディオデバイスといわれるソフトウェアで、あるソフトウェア(例えば ZOOM) のスピーカーとマイクを別のソフトウェア (例えば LINE) で使えるようにします。インストールは Homebrew で行いました。途中で sudo のためにログインパスワードを入力する必要がありました。brew install blackhole-2chインストール後、ZOOM と LINE の設定画面で、マイクとスピーカーをそれぞれ BlackHole 2ch に設定します。ZOOM の設定LINEの設定これで、ZOOM と LINE の音声をつなぐことができます。LINE でも参加できるようになりましたが…LINE で簡単に参加できるようになったのですが、実際に LINE で参加されたのは2名でした。全体でも5名の参加者だったのでまぁ、そんなものだろうなとは思いますが、もっと参加してもらえるようにしたいと思うので、これからもなにかしらのトライを続けたい考えています。

ZOOMとLINEのグループ通話をつないでビデオ会議を行う

LINEログイン・メッセージ送信可能なRailsアプリをデプロイする

現代のコミュニケーション手段として LINE はなくてはならないものになりました。今回は、その LINE を Ruby on Rails のアプリケーション (以降、Rails アプリ) から使えるようにします。ソースコードは takaokouji/everdiary-line にあります。環境Apple M3 (MacBook Air 13 2024)macOS Sonoma 14.6.1HomebrewVisual Studio Code 1.93.0    Dev Container 機能拡張をインストール済みDocker Desktop 4.34.2ruby 3.3.5    anyenv で rbenv をインストールruby 3.3.5 を global に設定済み ( rbenv global 3.3.5 )rails 7.2.1 gem    gem install rails他のソフトウェアは Docker コンテナ上にインストールLINE アカウント    スマホで LINE を使えるようにしておきます。Rails アプリ今回 LINE を組み込むのは、1行日記を記録する Everdiary (エバーダイアリー) という Rails アプリです。Everdiary は、ユーザー(users)と日記(diaries)の2つのテーブルのみ。そして、日記には、日記を書いた日(written_on)と255文字以下の日記(content)の2つのカラムのみ、という単純なものにします。ユーザーテーブル (users)    Devise が自動生成するカラムのみ日記テーブル (diaries)    written_on: 日記を書いた日content: 日記user_id: ユーザーとの関連早速、作っていきます。初期セットアップ。ターミナルで実行します。rails new everdiary --css=tailwind --javascript=esbuild --database=mysql --devcontainer --skip-bundle --skip-gitVisual Studio Code で everdiary を開き、Docker コンテナを構築。以降はコンテナ上で作業します。code everdiaryコンテナ上で Rails の再セットアップ。rm bin/rails がポイントです。こうすることで、tailwindcss や esbuild のインストールをコンテナ上で再現できます。rm bin/railsbundle exec rails new . -f -n everdiary --css=tailwind --javascript=esbuild --database=mysql --devcontainerbin/bundle add tailwindcss-railsbin/devブラウザで表示後、 bin/dev を control-c で停止させます。モデルの作成やDeviseの導入。ターミナルで以下のコマンドを実行する。bin/bundle add devisebin/rails generate devise:installbin/rails generate devise Userbin/rails generate scaffold Diary written_on:date:uniq content:string user:references --skip-jbuilderbin/rails db:migrateapp/models/user.rb を修正する。class User < ApplicationRecord  # Include default devise modules. Others available are:  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable  devise :database_authenticatable, :registerable,         :recoverable, :rememberable, :validatable  has_many :diaries, dependent: :destroy # ←この行を追加endapp/controllers/application_controller.rb を修正する。class ApplicationController < ActionController::Base  # Only allow modern browsers supporting webp images, web push, badges, import maps, CSS nesting, and CSS :has.  allow_browser versions: :modern  before_action :authenticate_user!, unless: :devise_controller? # ←この行を追加endapp/controllers/diaries_controller.rb の修正。1行日記とログインユーザーを紐づけます。# (省略)    def diary_params      params.require(:diary).permit(:written_on, :content).merge(user: current_user) # ←この行を修正    endendapp/views/diaries/_form.html.erb の修正。user_id は入力不要なので削除します。<%# 省略 %>  <div class="my-5">    <%= form.label :content %>    <%= form.text_field :content, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>  </div>  <%# ここに記述されていた user_id のフォームを削除する %>  <div class="inline">    <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>  </div><%# 省略 %>config/routes.rb を修正。 http://localhost:3000/ にアクセスしたときや、サインイン後に1行日記の一覧を表示するように修正。# (省略)  # Defines the root path route ("/")  root "diaries#index"endapp/views/layouts/_navbar.html.erb の作成。サインイン後にメールアドレスとサインアウト用のリンクを表示する。<header class="flex items-center shadow-lg py-2 px-2 mb-10">  <% if user_signed_in? %>    <div class="font-bold mr-3">      <%= current_user.email %>    </div>    <%= button_to "Sign out", destroy_user_session_path, method: :delete,      class: "rounded-md py-1 px-3 border-solid border-[1px] border-black block" %>  <% end %></header>app/views/layouts/application.html.erb の修正。<%# 省略 %>  <body>    <%= render "layouts/navbar" %> <%# ←この行を追加 %>    <%= yield %>  </body><%# 省略 %>サーバーを起動して動作確認。bin/dev動作確認の内容は以下のようなものです。http://localhost:3000/ にアクセスすると、サインイン画面にリダイレクト    サインイン画面と次のサインアップ画面にはスタイルが全くあたっていない。が、ここでは気にしないことにします。サインアップを押して、メールアドレスとパスワードを入力して、ユーザーの作成日記の一覧画面を表示日記の作成・編集・削除これで必要最低限の機能を持った Rails アプリケーションができました。LINE ログイン・メッセージ送信の流れLINE のチャネルの登録から LINE ログインしてメッセージを送信するまでの流れは次のようになります。LINE ログイン・Messaging APIチャンネルの作成LINE ログインとメッセージ送信には次の情報が必要です。LINE Developers/プロバイダー/LINEログイン    チャネルIDチャネルシークレットLINE Developers/プロバイダー/Messaging API    チャネルシークレットチャネルアクセストークンまずは LINE Developersコンソール でプロバイダーと、LINE ログインチャネルを登録します。LINE アカウントで LINE Developers コンソールにログインプロバイダーの登録    プロバイダーは サービス提供者を表している という説明もあったので、企業名や屋号のような少し規模の大きなものにすると良さそうです。LINE ログインチャネルの登録    こちらは開発用と本番用の2つを作ることになるため、everdiary-login-dev、everdiary-login-prod にします。これで、LINE ログインのチャネルIDとチャネルシークレットを用意できました。次に LINE 公式アカウント で LINE 公式アカウントと Messaging API の利用を開始します。LINE 公式アカウントの作成LINE 公式アカウント上の設定から「Messaging APIを利用する」もう一度 LINE Developersコンソール でチャネルアクセストークンを発行します。LINE Developersコンソールでプロバイダーを選択するMessaging APIのチャネルを選択するMessaging API設定タブを表示して、チャンネルアクセストークン(長期)を発行するこれで、LINE Messaging APIのチャネルシークレットとチャネルアクセストークンを用意できました。それぞれを .env を作成して記載します。# LINE ログインLINE_KEY="チャネルID"LINE_SECRET="チャネルシークレット"# LINE Messaging APILINE_CHANNEL_SECRET="チャネルシークレット"LINE_CHANNEL_TOKEN="チャンネルアクセストークン"ngrokのセットアップLINE ログインの動作確認で利用する ngrok をセットアップします。ngrok を使えば、http://localhost:3000/ にインターネットからアクセスできるようになります。まずは ngrok にサインアップ(sign up)します。用途などのアンケートにいくつか回答すると、サインアップできます。続いて、サインアップ後の画面に従って、ngrokアプリケーションをインストールします。brew install ngrok/ngrok/ngrokngrok config add-authtoken xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx# (↑のxxx...はngrokの画面のものに置き換えること。以下、実行結果)# Authtoken saved to configuration file: /Users/kouji/Library/Application Support/ngrok/ngrok.yml最後に config/environments/development.rb を修正して、 ngrok からアクセス可能にします。# (省略)  # Apply autocorrection by RuboCop to files generated by `bin/rails generate`.  # config.generators.apply_rubocop_autocorrect_after_generate!  config.hosts << /.*\.ngrok-free\.app/endこれでセットアップできました。今ではないのですが、今後 LINE ログインを試す前に、Visual Studio Code ではない (Docker 上ではない) 通常のターミナルで以下のコマンドを実行します。その後に表示された URL https://xxx-xxx-xxx-xxx-xxx.ngrok-free.app にアクセスすることで、インターネットから開発中のアプリケーションにアクセスできるようになります。$ ngrok http http://localhost:3000ngrok                                    (Ctrl+C to quit)Share what you're building with ngrok https://ngrok.com/share-your-ngrok-storySession Status                onlineAccount                       Kouji Takao (Plan: Free)Version                       3.16.0Region                        Japan (jp)Latency                       25msWeb Interface                 http://127.0.0.1:4040Forwarding                    https://xxx-xxx-xxx-xxx-xxx.ngrok-free.app -> http://localhost:3000                              ↑↑↑ この URLLINE ログインこれでようやく準備が整いました。まずは LINE のユーザーIDを格納するテーブルを作ります。bin/rails generate model MyLineUser uid:string user:references:uniqbin/rails db:migrate次に LINE ログインで利用する gem をインストールします。bin/bundle add omniauth-line omniauth-rails_csrf_protection dotenvconfig/initializers/devise.rb に LINE ログインの設定を追加します。# (省略)  # ==> OmniAuth  # Add a new OmniAuth provider. Check the wiki for more information on setting  # up on your models and hooks.  # config.omniauth :github, 'APP_ID', 'APP_SECRET', scope: 'user,public_repo'  config.omniauth :line, ENV["LINE_KEY"], ENV["LINE_SECRET"] # ← この行を追加# (省略)app/models/user.rb を修正。# (省略)  has_many :diaries, dependent: :destroy  has_one :my_line_user, dependent: :destroy # ←この行を追加endapp/models/my_line_user.rb を修正。class MyLineUser < ApplicationRecord  devise :omniauthable, omniauth_providers: %i[line] # ←この行を追加  belongs_to :userendconfig/routes.rb を修正。Rails.application.routes.draw do  resources :diaries  devise_for :users  devise_for :my_line_users, controllers: { omniauth_callbacks: "omniauth_callbacks" } # ←この行を追加# (省略)LINE ログインによって呼び出されるコントローラーを作成します。bin/rails generate controller omniauth_callbacksapp/controllers/omniauth_callbacks_controller.rb を修正します。ここではエラー処理は考えず、すべてうまくいく前提にしています。class OmniauthCallbacksController < Devise::OmniauthCallbacksController  def line    auth = request.env["omniauth.auth"]    MyLineUser.create!(user: current_user, uid: auth["uid"])    redirect_to root_path  endendapp/views/layouts/_navbar.html.erb を修正して LINE 連携用のリンクを追加します。 data: {turbo: "false"} がポイントで、これを指定しないと CORS のエラーで LINE ログインに失敗します。<header class="flex items-center shadow-lg py-2 px-2 mb-10">  <% if user_signed_in? %>    <div class="font-bold mr-3">      <%= current_user.email %>    </div><%# ここから %>    <% if current_user.my_line_user %>      <div class="mr-3">        LINE Linked      </div>    <% else %>      <%= button_to "LINE Login", my_line_user_line_omniauth_authorize_path, data: {turbo: "false"},        class: "rounded-md py-1 px-3 border-solid border-[1px] border-black block mr-3" %>    <% end %><%# ここまで %>    <%= button_to "Sign out", destroy_user_session_path, method: :delete,      class: "rounded-md py-1 px-3 border-solid border-[1px] border-black block" %>  <% end %></header>なお、「LINE Linked」と「LINE Login」の日本語は、それぞれ「LINE連携済」「LINE連携」を想定しています。Everdiary は i18n 対応は行わないのですが、いちおう、日本語のラベルも考えています。これで LINE ログイン対応の修正は終わりました。動作確認のためにサーバーを起動して、bin/devさらに ngrok を起動します。$ ngrok http http://localhost:3000ngrok                                                         (Ctrl+C to quit)Share what you're building with ngrok https://ngrok.com/share-your-ngrok-storySession Status                onlineAccount                       Kouji Takao (Plan: Free)Version                       3.16.0Region                        Japan (jp)Latency                       25msWeb Interface                 http://127.0.0.1:4040Forwarding                    https://xxx-xxx-xxx-xxx-xxx.ngrok-free.app -> http://localhost:3000                              ↑↑↑ この URLそして、↑の Forwarding に表示されている https://xxx-xxx-xxx-xxx-xxx.ngrok-free.app に /my_line_users/auth/line/callback を追加して、 LINE Developersコンソール のLINE ログインチャネルのコールバックURLに指定します。面倒ですが ngrok を起動するたびに設定してください。LINE Developers コンソール にアクセスするプラバイダーを選択するLINE ログインチャネルを選択するLINE ログイン設定タブを選択する「ウェブアプリでLINEログインを利用する」のにある「コールバックURL」に ↑ の https://xxx-xxx-xxx-xxx-xxx.ngrok-free.app/my_line_users/auth/line/callback を指定する。それでは、ブラウザで https://xxx-xxx-xxx-xxx-xxx.ngrok-free.app/ にアクセスしてサインインします。そして、LINE Login ボタンを押します。http://localhost:3000/ ではなく ngrok の URL にアクセスすることです。LINE ログインに成功して LINE のユーザーID (uid) を DB に保存できましたね。LINE 連携を解除する方法を用意していないため、もう一度 LINE ログインを試す場合は、 rails console で MyLineUser を削除します。$ bin/rails console> MyLineUser.last.destroy最後に LINE ログインを公開済みに変えます。これですべての LINE ユーザーがログインできるようになります。LINE Developers コンソール にアクセスするプロバイダーを選択するLINE ログインチャネルを選択する↓の画像を参考にして公開済みに変更するLINE メッセージ送信続いて、日記を登録したときに LINE でメッセージ送信できるようにします。まったく便利な機能ではありませんが、メッセージ送信のテストなので割り切って作りましょう。LINE のメッセージ送信で使う gem をインストールします。bin/bundle add line-bot-apiapp/models/my_line_messaging.rb　の作成。これは MyLineMessaging.push_text_message(uid: current_user.my_line_user&.uid, text: "送信するメッセージ") のように使います。class MyLineMessaging  class << self    def push_text_message(uid:, text:)      new.push_text_message(uid:, message: { type: "text", text: })    end  end  def push_text_message(uid:, message:)    line_bot_client.push_message(uid, message)  end  private  def line_bot_client    @line_bot_client ||= Line::Bot::Client.new { |config|      config.channel_secret = ENV["LINE_CHANNEL_SECRET"]      config.channel_token = ENV["LINE_CHANNEL_TOKEN"]    }  endendapp/controllers/diaries_controller.rb の修正。if current_user.my_line_user&.uid でチェックして、LINE ログイン済みであればメッセージを送ります。# (省略)  def create    @diary = Diary.new(diary_params)    respond_to do |format|      if @diary.save        # ここから        if current_user.my_line_user&.uid          text =  "#{@diary.written_on.strftime("%Y/%m/%d(%a)")} #{@diary.content}"          MyLineMessaging.push_text_message(uid: current_user.my_line_user.uid, text:)        end        # ここまで        format.html { redirect_to @diary, notice: "Diary was successfully created." }        format.json { render :show, status: :created, location: @diary }      else        format.html { render :new, status: :unprocessable_entity }        format.json { render json: @diary.errors, status: :unprocessable_entity }      end    end  end# (省略)これで新しい日記を書くと LINE でメッセージが送信されます。イェイおわりにLINEログインとメッセージ送信。ここまでは先人の知恵をお借りしながら、無事にたどり着くことができました。ここまでのソースコードは takaokouji/everdiary-line に置いておきます。次回は、 Everdiary を aws 上にデプロイして、 ngrok なしで HTTPS 通信を行い、 LINE ログインとメッセージ送信を実現したいと思います。協力者の募集スモウルビー (GitHub) の開発にご協力いただける方を常に募集しています。ご協力いただける方は、 contact@smalruby.jp までご連絡いただいてもいいですし、連絡なしで「xxx のブロックに対応しました」というPRを作成してもらってもかまいません。むしろその方が好都合です。スポンサーも募集しています。また、 拙著:小学生から楽しむ きらきらRubyプログラミング をご購入いただけるとありがたいです。スモウルビーの使い方と教え方を学ぶことができる書籍です。特に小・中学校の先生に読んでいただきたいです。日本中の小・中学生が学校の授業や地域のプログラミング教室でスモウルビーを使っています。みなさんのご協力で、たくさんの子どもたちがハッピーになります。ご協力、よろしくお願いします。

Ruby on Railsのアプリに LINEログイン、LINE Messaging APIによるメッセージ送信を組み込む

前回の続き です。Dev Container と tailwindcss を利用して Turbo Rails Tutorial をやっています。今回は CSS ファイルの分割と CSS 入れ子 (CSS nesting) をできるようにします。前回までソースコードは takaokouji/quote-editor:7e07238 にあります。環境Apple M3 (MacBook Air 13 2024)macOS Sonoma 14.6.1HomebrewVisual Studio Code 1.93.0    Dev Container 機能拡張をインストール済みruby 3.3.5    anyenv で rbenv をインストールruby 3.3.5 を global に設定済み ( rbenv global 3.3.5 )rails 7.2.1 gem    gem install rails他のソフトウェアは Docker コンテナ上にインストールPostCSSの導入公式のドキュメント には tailwindcss を使いつつ、ファイル分割と CSS 入れ子を実現するには PostCSS を使う、とあります。ファイル分割One of the most useful features preprocessors offer is the ability to organize your CSS into multiple files and combine them at build time by processing @import statements in advance, instead of in the browser.The canonical plugin for handling this with PostCSS is postcss-import.CSS 入れ子To add support for nested declarations, we recommend our bundled tailwindcss/nesting plugin, which is a PostCSS plugin that wraps postcss-nested or postcss-nesting and acts as a compatibility layer to make sure your nesting plugin of choice properly understands Tailwind’s custom syntax.早速 PostCSS を導入します。railsコマンド一発で完了です。railsすごい！bin/rails css:install:postcssただ、これが何しているのかが知っておきたいので、実行ログを詳しく見てみます。       apply  /home/vscode/.rbenv/versions/3.3.5/lib/ruby/gems/3.3.0/gems/cssbundling-rails-1.4.1/lib/install/postcss/install.rb       apply    /home/vscode/.rbenv/versions/3.3.5/lib/ruby/gems/3.3.0/gems/cssbundling-rails-1.4.1/lib/install/install.rb    Build into app/assets/builds       exist      app/assets/builds   identical      app/assets/builds/.keep   unchanged      app/assets/config/manifest.js    Stop linking stylesheets automatically        gsub      app/assets/config/manifest.js   unchanged      .gitignore   unchanged      .gitignore    Remove app/assets/stylesheets/application.css so build output can take over      remove      app/assets/stylesheets/application.css    Add stylesheet link tag in application layout   unchanged      app/views/layouts/application.html.erb   unchanged      Procfile.dev    Add bin/dev to start foreman   identical      bin/dev  Install PostCSS w/ nesting and autoprefixer      create    postcss.config.js      create    app/assets/stylesheets/application.postcss.css         run    yarn add postcss postcss-cli postcss-import postcss-nesting autoprefixer from "."yarn add v1.22.22[1/4] Resolving packages...[2/4] Fetching packages...warning Pattern ["postcss@^8.4.45"] is trying to unpack in the same destination "/home/vscode/.cache/yarn/v6/npm-postcss-8.4.45-538d13d89a16ef71edbf75d895284ae06b79e603-integrity/node_modules/postcss" as pattern ["postcss@^8.4.23"]. This could result in non-deterministic behavior, skipping.[3/4] Linking dependencies...[4/4] Building fresh packages...success Saved lockfile.success Saved 29 new dependencies.info Direct dependencies├─ autoprefixer@10.4.20├─ postcss-cli@11.0.0├─ postcss-import@16.1.0├─ postcss-nesting@13.0.0└─ postcss@8.4.45info All dependencies├─ @csstools/selector-resolve-nested@2.0.0├─ @csstools/selector-specificity@4.0.0├─ @sindresorhus/merge-streams@2.3.0├─ autoprefixer@10.4.20├─ cliui@8.0.1├─ dependency-graph@0.11.0├─ escalade@3.2.0├─ fs-extra@11.2.0├─ get-caller-file@2.0.5├─ get-stdin@9.0.0├─ globby@14.0.2├─ graceful-fs@4.2.11├─ ignore@5.3.2├─ jsonfile@6.1.0├─ path-type@5.0.0├─ postcss-cli@11.0.0├─ postcss-import@16.1.0├─ postcss-nesting@13.0.0├─ postcss-reporter@7.1.0├─ postcss@8.4.45├─ pretty-hrtime@1.0.3├─ require-directory@2.1.1├─ slash@5.1.0├─ thenby@1.3.4├─ unicorn-magic@0.1.0├─ wrap-ansi@7.0.0├─ y18n@5.0.8├─ yargs-parser@21.1.1└─ yargs@17.7.2Done in 12.35s.  Add build:css script  Add build:css script         run    npm pkg set scripts.build:css="postcss ./app/assets/stylesheets/application.postcss.css -o ./app/assets/builds/application.css" from "."         run    yarn build:css from "."yarn run v1.22.22$ postcss ./app/assets/stylesheets/application.postcss.css -o ./app/assets/builds/application.cssDone in 0.70s.         run  bundle install --quietここから次のことがわかりました。PostCSS の設定ファイル postcss.config.js が追加されたことPostCSS の CSS ファイル app/assets/stylesheets/application.postcss.css が追加されたことnpm の postcss postcss-cli postcss-import postcss-nesting autoprefixer パッケージが追加されたことCSS をビルドするコマンドが postcss ./app/assets/stylesheets/application.postcss.css -o ./app/assets/builds/application.css に変更されたことこれだけで PostCSS を使う準備がほとんど整いました。あとは、前回作成した tailwindcss の CSS を PostCSS から使えるようにするだけです。postcss.config.js に tailwindcss の設定を追加して、module.exports = {  plugins: [    require('postcss-import'),    require('postcss-nesting'),    require('tailwindcss'),    require('autoprefixer'),  ]}app/assets/stylesheets/application.tailwind.css の内容を app/assets/stylesheets/application.postcss.css に転記します。そして、@tailwind base; を @import "tailwindcss/base"; に変えます。他の @tailwind も変えます。/* Entry point for your PostCSS build */@import "tailwindcss/base";@import "tailwindcss/components";@import "tailwindcss/utilities";/* ここから下は app/assets/stylesheets/application.tailwind.css のまま */tailwind.config.js はそのままで OK。最後に app/assets/stylesheets/application.tailwind.css を削除して、 bin/dev を再起動します。これで OK。rails がコマンドを提供してくれていたので、簡単に PostCSS を導入できました。ファイル分割次はファイル分割です。app/assets/stylesheets/application.postcss.css の内容を複数のファイルに分割して転記します。ファイルのパスはチュートリアルに従います。app/assets/stylesheets/config/reset.csshtml {  @apply overflow-y-scroll h-full;}body {  @apply flex flex-col min-h-full bg-background text-text-body leading-normal font-sans;}img,picture,svg {  @apply block max-w-full;}h1,h2,h3,h4,h5,h6 {  @apply text-text-header leading-tight;}h1 {  @apply text-3xl;}h2 {  @apply text-2xl;}h3 {  @apply text-xl;}h4 {  @apply text-lg;}a {  @apply text-primary no-underline transition-colors duration-200    hover:text-primary-rotate focus:text-primary-rotate active:text-primary-rotate;}app/assets/stylesheets/components/btn.css@layer components {  .btn {    @apply      inline-block      py-1.5 px-4      rounded-md      bg-origin-border      bg-transparent      border-solid border-2 border-transparent      font-bold      no-underline      cursor-pointer      outline-none      [transition:filter_400ms,color_200ms]      hover:[transition:filter_250ms,color_200ms]      focus:[transition:filter_250ms,color_200ms]      focus-within:[transition:filter_250ms,color_200ms]      active:[transition:filter_250ms,color_200ms];    }  .btn--primary {    @apply text-white bg-gradient-to-r from-primary to-primary-rotate      hover:text-white hover:saturate-[1.4] hover:brightness-[115%]      focus:text-white focus:saturate-[1.4] focus:brightness-[115%]      focus-within:text-white focus-within:saturate-[1.4] focus-within:brightness-[115%]      active:text-white active:saturate-[1.4] active:brightness-[115%];  }  .btn--secondary {    @apply text-white bg-gradient-to-r from-secondary to-secondary-rotate      hover:text-white hover:saturate-[1.2] hover:brightness-[110%]      focus:text-white focus:saturate-[1.2] focus:brightness-[110%]      focus-within:text-white focus-within:saturate-[1.2] focus-within:brightness-[110%]      active:text-white active:saturate-[1.2] active:brightness-[110%];  }  .btn--light {    @apply text-dark bg-light      hover:text-dark hover:brightness-[92%]      focus:text-dark focus:brightness-[92%]      focus-within:text-dark focus-within:brightness-[92%]      active:text-dark active:brightness-[92%];  }  .btn--dark {    @apply text-white border-dark bg-dark      hover:text-white      focus:text-white      focus-within:text-white      active:text-white;  }}app/assets/stylesheets/components/quote.css@layer components {  .quote {    @apply flex justify-between text-center items-center gap-3 bg-white rounded-md shadow-sm mb-4 p-2      md:py-2 md:px-4;  }  .quote__actions {    @apply flex flex-[0_0_auto] gap-2 self-start;  }}app/assets/stylesheets/components/form.css@layer components {  .form {    @apply flex flex-wrap gap-2;  }  .form__group {    @apply flex-1;  }  .form__input {    @apply block w-full max-w-full py-1.5 px-2 border-solid border-2 border-light rounded-md outline-none      transition-shadow duration-200      focus:[box-shadow:0_0_0_2px_theme(colors.glint)];  }  .form__input--invalid {    @apply border-primary;  }}app/assets/stylesheets/components/visually-hidden.css@layer components {  /* Shamelessly stolen from Bootstrap */  .visually-hidden {    @apply !absolute !w-px !h-px !p-0 !-m-px !overflow-hidden ![clip:rect(0,0,0,0)] !whitespace-nowrap !border-0;  }}app/assets/stylesheets/components/error-message.css@layer components {  .error-message {    @apply w-full text-primary bg-primary-bg p-2 rounded-md;  }}app/assets/stylesheets/layouts/container.css@layer components {  .container {    @apply w-full pr-2 pl-2 ml-auto mr-auto md:pr-4 md:pl-4 md:max-w-[60rem];  }}app/assets/stylesheets/layouts/header.css@layer components {  .header {    @apply flex flex-wrap gap-3 justify-between mt-4 mb-6 md:mb-8;  }}ここまで。分割できたら app/assets/stylesheets/application.postcss.css を修正して、それらを読み込むようにします。/* Entry point for your PostCSS build */@import "tailwindcss/base";@import "./config/reset.css";@import "tailwindcss/components";@import "./components/btn.css";@import "./components/quote.css";@import "./components/form.css";@import "./components/visually-hidden.css";@import "./layouts/container.css";@import "./layouts/header.css";@import "tailwindcss/utilities";これで CSS ファイルを分割できました。ブラウザで一通り操作して、見た目が変わっていないことを確認します。CSS 入れ子次は CSS 入れ子 (CSS nesting) に対応します。postcss.config.js の require('postcss-nesting'), を require('tailwindcss/nesting') に書き換えます。module.exports = {  plugins: [    require('postcss-import'),    require('tailwindcss/nesting'),    require('tailwindcss'),    require('autoprefixer'),  ]}これでSASSを使っているチュートリアルのように CSS ファイルで & を使えるようになります。余談ですが、「CSS 入れ子」といってもブラウザが標準で対応している CSS nesting (日本語訳) と、 SASS などの CSS プリプロセッサで処理する必要がある CSS nested があります。nesting と nested は、どちらもほぼ同じようなものなのですが、チュートリアルのように CSS のコーディング規約として BEM を採用する場合は後者の nested にする必要があります。nested では、以下のようにクラス名の一部を & で補うことができます。例では  &--primary の箇所で & が .btn として補われて .btn-primary が定義されます。しかしながら、CSS nesting では対応していません。@layer components {  .btn {    /* 省略 */    &--primary {      /* 省略 */    }  }}というわけで今回は CSS nested を使います。参考までに tailwindcss で CSS nesting を使う場合の PostCSS の設定は次に挙げておきます。 plugins の指定が配列からオブジェクトになり、 tailwindcss/nesting を読み込むときのパラメーターとして ‘postcss-nesting’ を指定しているのが変更点です。/* 今回はこれは使わない。今後 CSS nesting を使うことがあればこのように設定する。 */module.exports = {  plugins: {    'postcss-import': {},    'tailwindcss/nesting': 'postcss-nesting',    tailwindcss: {},    autoprefixer: {},  }}それでは、いくつかの CSS ファイルを CSS nested な記述に変えます。app/assets/stylesheets/components/btn.css@layer components {  .btn {    @apply      inline-block      py-1.5 px-4      rounded-md      bg-origin-border      bg-transparent      border-solid border-2 border-transparent      font-bold      no-underline      cursor-pointer      outline-none      [transition:filter_400ms,color_200ms]      hover:[transition:filter_250ms,color_200ms]      focus:[transition:filter_250ms,color_200ms]      focus-within:[transition:filter_250ms,color_200ms]      active:[transition:filter_250ms,color_200ms];    &--primary {      @apply text-white bg-gradient-to-r from-primary to-primary-rotate        hover:text-white hover:saturate-[1.4] hover:brightness-[115%]        focus:text-white focus:saturate-[1.4] focus:brightness-[115%]        focus-within:text-white focus-within:saturate-[1.4] focus-within:brightness-[115%]        active:text-white active:saturate-[1.4] active:brightness-[115%];    }    &--secondary {      @apply text-white bg-gradient-to-r from-secondary to-secondary-rotate        hover:text-white hover:saturate-[1.2] hover:brightness-[110%]        focus:text-white focus:saturate-[1.2] focus:brightness-[110%]        focus-within:text-white focus-within:saturate-[1.2] focus-within:brightness-[110%]        active:text-white active:saturate-[1.2] active:brightness-[110%];    }    &--light {      @apply text-dark bg-light        hover:text-dark hover:brightness-[92%]        focus:text-dark focus:brightness-[92%]        focus-within:text-dark focus-within:brightness-[92%]        active:text-dark active:brightness-[92%];    }    &--dark {      @apply text-white border-dark bg-dark        hover:text-white        focus:text-white        focus-within:text-white        active:text-white;    }  }}app/assets/stylesheets/components/quote.css@layer components {  .quote {    @apply flex justify-between text-center items-center gap-3 bg-white rounded-md shadow-sm mb-4 p-2      md:py-2 md:px-4;    &__actions {      @apply flex flex-[0_0_auto] gap-2 self-start;    }  }}app/assets/stylesheets/components/form.css@layer components {  .form {    @apply flex flex-wrap gap-2;    &__group {      @apply flex-1;    }    &__input {      @apply block w-full max-w-full py-1.5 px-2 border-solid border-2 border-light rounded-md outline-none        transition-shadow duration-200        focus:[box-shadow:0_0_0_2px_theme(colors.glint)];      &--invalid {        @apply border-primary;      }    }  }}ここまで。前回の作業中に tailwindcss では @import と CSS nested が使えないことを発覚したため、かなり焦っていました。でも、これで CSS ファイル群がチュートリアルと同じディレクトリ構成・内容にできました。なんとかなってよかったです。今回はここまで。ソースコードは takaokouji/quote-editor においていますので、興味がある方は Watch していただけると励みになります。協力者の募集スモウルビー (GitHub) の開発にご協力いただける方を常に募集しています。ご協力いただける方は、 contact@smalruby.jp までご連絡いただいてもいいですし、連絡なしで「xxx のブロックに対応しました」というPRを作成してもらってもかまいません。むしろその方が好都合です。スポンサーも募集しています。また、 拙著:小学生から楽しむ きらきらRubyプログラミング をご購入いただけるとありがたいです。スモウルビーの使い方と教え方を学ぶことができる書籍です。特に小・中学校の先生に読んでいただきたいです。日本中の小・中学生が学校の授業や地域のプログラミング教室でスモウルビーを使っています。みなさんのご協力で、たくさんの子どもたちがハッピーになります。ご協力、よろしくお願いします。

Turbo Rails Tutorial を Rails 7.2.1 / ruby 3.3.5 / Dev Container / tailwindcss でやってみた (4)

前回の続き です。Dev Container と tailwindcss を利用して Turbo Rails Tutorial をやっています。今回は Turbo Drive と Turbo Frame/Stream です。前回までソースコードは takaokouji/quote-editor:94fb9f7 にあります。環境Apple M3 (MacBook Air 13 2024)macOS Sonoma 14.6.1HomebrewVisual Studio Code 1.93.0    Dev Container 機能拡張をインストール済みruby 3.3.5    anyenv で rbenv をインストールruby 3.3.5 を global に設定済み ( rbenv global 3.3.5 )rails 7.2.1 gem    gem install rails他のソフトウェアは Docker コンテナ上にインストールTurbo DriveTurbo Drive は gem を導入するだけでユーザー体験が格段にアップする仕組みです。が、実際には、導入したけどフォームが動かない / 動かなくなった、ってことでオフにされがちです。一昔前の turbolinks と同じような扱い。でも、この章を理解することでかなりの疑問が解消され、導入するための勇気がもらえます。rails 7.2.1 では最初から Turbo Drive が有効になっているので、コードの修正は２点だけ。画面読み込みの進捗バーの色を変えています。app/assets/stylesheets/components/turbo_progress_bar.css@layer components {  .turbo-progress-bar {    @apply bg-gradient-to-tr from-primary to-primary-rotate;  }}app/assets/stylesheets/application.postcss.css に以下を追加。@import "./components/turbo_progress_bar.css";こんな感じで進捗バーがテーマカラーの赤色になります。Turbo Frames and Turbo Stream templatesここからがチュートリアルの本題です。オーソドックスは CRUD ウェブアプリを JavaScript を書かずに SPA っぽくしていきます。まずはテストの修正から。このチュートリアルはテストファーストなんですよね。すごく好きです。差分がわかりにくくなるため、いったんコメントを削除してから変更します。新規登録と更新のテストを変えています。  test "Creating a new quote" do    visit quotes_path    assert_selector "h1", text: "Quotes"    click_on "New quote"    # (削除) assert_selector "h1", text: "New quote"    # 新規作成画面に遷移せず、一覧画面に新規作成のためのフォームを表示する    fill_in "Name", with: "Capybara quote"    # (追加) 一覧画面のままであることを確認    assert_selector "h1", text: "Quotes"    click_on "Create quote"    assert_selector "h1", text: "Quotes"    assert_text "Capybara quote"  end  test "Updating a quote" do    visit quotes_path    assert_selector "h1", text: "Quotes"    click_on "Edit", match: :first    # (削除) assert_selector "h1", text: "Edit quote"    # 同様に、編集画面に遷移せず、一覧画面に編集のためのフォームを表示する    fill_in "Name", with: "Updated quote"    assert_selector "h1", text: "Quotes"    click_on "Update quote"    assert_selector "h1", text: "Quotes"    assert_text "Updated quote"  endテストに失敗するので、これからアプリケーションを修正していきます。vscode ➜ /workspaces/quote-editor (main) $ bin/rails test test/system/quotes_test.rb(省略)Finished in 8.909481s, 0.4490 runs/s, 0.7857 assertions/s.4 runs, 7 assertions, 2 failures, 0 errors, 0 skips詳細表示と削除まずは一覧の Quote の Turbo Frame/Stream 対応。app/views/quotes/_quote.html.erb<%# locals: (quote:) %><%= turbo_frame_tag quote do %>  <div class="quote">    <%= link_to quote.name, quote_path(quote), data: { turbo_frame: "_top" } %>    <div class="quote__actions">      <%= button_to "Delete",                    quote_path(quote),                    method: :delete,                    class: "btn btn--light" %>      <%= link_to "Edit",                  edit_quote_path(quote),                  class: "btn btn--light" %>    </div>  </div><% end %>修正内容はこちら。turbo_frame_tag quote do ~ end で括って Turbo Frame/Stream で置き換えることができるようにする。Quoteの名前をクリックすると、 data: { turbo_frame: "_top" } の指定により、全画面を詳細画面で書き換える。locals magic comment を追加して必須のパラメーターを明記こんな感じで動きます。続いて、削除の Turbo Frame/Stream 対応。app/controllers/quotes_controller.rb の destroy メソッドの修正。 format.turbo_stream を追加。def destroy    @quote.destroy    respond_to do |format|      format.html { redirect_to quotes_path, notice: "Quote was successfully destroyed." }      format.turbo_stream    end  endapp/views/quotes/destroy.turbo_stream.erb の追加。<%= turbo_stream.remove @quote %>こんな感じで動きます。これで詳細表示と削除が Turbo Frame/Stream に対応できました。新規作成続いて、新規作成の Turbo Frame/Stream 対応です。app/views/quotes/new.html.erb の修正。turbo_frame_tag @quote do ~ end でフォームを括ります。<main class="container">  <%= link_to sanitize("&larr; Back to quotes"), quotes_path %>  <div class="header">    <h1>New quote</h1>  </div>  <%= turbo_frame_tag @quote do %>    <%= render "form", quote: @quote %>  <% end %></main>app/views/quotes/index.html.erb の修正。「New quote」のリンクに data: { turbo_frame: dom_id(Quote.new) パラメーターを追加して、そのレスポンスを埋め込むための <%= turbo_frame_tag Quote.new %> を追加します。さらに、新規作成した Quote を追加するために render @quotes を turbo_frame_tag "quotes" do ~ end で括ります。<main class="container">  <div class="header">    <h1>Quotes</h1>    <%= link_to "New quote",                new_quote_path,                class: "btn btn--primary",                data: { turbo_frame: dom_id(Quote.new) } %>  </div>  <%= turbo_frame_tag Quote.new %>  <%= turbo_frame_tag "quotes" do %>    <%= render @quotes %>  <% end %></main>app/controllers/quotes_controller.rb の create メソッドの修正。Turbo Frame/Stream の対応。  def create    @quote = Quote.new(quote_params)    if @quote.save      respond_to do |format|        format.html { redirect_to quotes_path, notice: "Quote was successfully created." }        format.turbo_stream      end    else      render :new, status: :unprocessable_entity    end  end最後は app/views/quotes/create.turbo_stream.erb の追加。先ほど修正した create メソッドのレスポンス。登録した Quote を一覧に追加して、新規作成のフォームを消しています。<%= turbo_stream.prepend "quotes", @quote %><%= turbo_stream.update Quote.new, "" %>こんな感じです。これで新規作成も Turbo Frame/Stream に対応できました。編集チュートリアルとは順番が異なってしまいますが、このタイミングで編集の Turbo Frame/Stream 対応です。単に読み飛ばしていしまっていました。失敗。app/views/quotes/edit.html.erb の修正。フォームを turbo_frame_tag @quote do ~ end で括ります。<main class="container">  <%= link_to sanitize("&larr; Back to quote"), quote_path(@quote) %>  <div class="header">    <h1>Edit quote</h1>  </div>  <%= turbo_frame_tag @quote do %>    <%= render "form", quote: @quote %>  <% end %></main>これだけです。こんな感じで動きます。編集も新規作成もフォームには一切手を加えずに SPA っぽくなりました。これは驚異的なことで、まずは従来のページ遷移を伴う CRUD を作って、あとで SPA っぽくする、みたいなことが簡単にできます。すごくワクワクしますね。バグ修正ちょっとフォームを触っていたところ 2 点、バグが見つかりました。Quote の名前を入力せずに Create quoteしたときのエラーメッセージに CSS のスタイルがあたっていないQuote の名前フォームの CSS スタイルがあたっていないエラーメッセージのバグの原因は @import 漏れ。app/assets/stylesheets/application.postcss.css に以下を追加。@import "./components/error-message.css";名前フォームのバグは simple_formのclass cssがtailwindを使っている時に反映されない場合 - kazuhitonakayama を参考にして対応。 tailwind.config.js の content に './config/initializers/simple_form.rb' を追加。/* 省略 */module.exports = {  content: [    './app/views/**/*.html.erb',    './app/helpers/**/*.rb',    './app/assets/stylesheets/**/*.css',    './app/javascript/**/*.js',    './config/initializers/simple_form.rb'  ],/* 省略 */こんな感じ。これでバグを 2 つとも潰すことができました。ソート順の修正次はソート順の修正です。Quote を新規作成したときは一覧の一番上に表示されるのですが、リロードすると一覧の一番下に来てしまいます。そこで、一覧の順番を変えて、新しい Quote から順になるようにします。まずはテスト test/system/quotes_test.rb を修正します。一覧の一番上に表示される Quote を @quote として扱っているため、Quote のうちで一番新しいもの = Quote.last に変えます。  setup do    @quote = Quote.last  endテストを実行して失敗することを確認したら、アプリケーションを修正します。チュートリアルではモデルに scope を追加しているのですが、ここではコントローラーを修正します。経験上、モデルに直接 scope を書きたくないからです。scope はシンプルで共通のものだけ (a minimum and only extract the common queries there)、という方針を見たことがありますが、それはとても難しいことなので、そもそも使わない、という方針にしています。それでは app/controllers/quotes_controller.rb の index メソッドを次のように修正します。  def index    @quotes = Quote.order(id: :desc)  end修正後はテストに成功することを確認します。こんな感じで新規作成後にリロードしても順番が変わりません。これでソート順が修正できました。キャンセル最後に新規作成をキャンセルできるようにします。テスト test/system/quotes_test.rb を追加して、  test "Cancel creating" do    visit quotes_path    click_on "New quote"    assert(has_field?("Name"))    click_on "Cancel"    assert(has_no_field?("Name"))  endapp/views/quotes/_form.html.erb にキャンセルボタン link_to "Cancel", quotes_path, class: "btn btn--light" を追加します。<%# locals: (quote:) %><%= simple_form_for quote, html: { class: "quote form" } do |f| %>  <% if quote.errors.any? %>    <div class="error-message">      <%= quote.errors.full_messages.to_sentence.capitalize %>    </div>  <% end %>  <%= f.input :name, input_html: { autofocus: true } %>  <%= link_to "Cancel", quotes_path, class: "btn btn--light" %>  <%= f.submit class: "btn btn--secondary" %><% end %>こんな感じ。これで新規作成をキャンセルできます。今回のまとめ今回は Turbo Frame/Stream を使って詳細表示、削除、新規作成、編集、キャンセルを SPA っぽくしました。チュートリアルにも書いてありますが、JavaScript を一切書かずに SPA っぽいものができました。さらに tailwindcss を使っているため (基本的には) CSS も書かなくてもいいです。つまり、Ruby と HTML だけで SPA っぽいウェブアプリケーションが作れる、ということです。これは本当にすばらしいことです。ソースコードは takaokouji/quote-editor においていますので、興味がある方は Watch していただけると励みになります。協力者の募集スモウルビー (GitHub) の開発にご協力いただける方を常に募集しています。ご協力いただける方は、 contact@smalruby.jp までご連絡いただいてもいいですし、連絡なしで「xxx のブロックに対応しました」というPRを作成してもらってもかまいません。むしろその方が好都合です。スポンサーも募集しています。また、 拙著:小学生から楽しむ きらきらRubyプログラミング をご購入いただけるとありがたいです。スモウルビーの使い方と教え方を学ぶことができる書籍です。特に小・中学校の先生に読んでいただきたいです。日本中の小・中学生が学校の授業や地域のプログラミング教室でスモウルビーを使っています。みなさんのご協力で、たくさんの子どもたちがハッピーになります。ご協力、よろしくお願いします。

Turbo Rails Tutorial を Rails 7.2.1 / ruby 3.3.5 / Dev Container / tailwindcss でやってみた (5)

前回の続き です。Dev Container と tailwindcss を利用して Turbo Rails Tutorial をやっています。前回までソースコードは takaokouji/quote-editor:a84cf9e にあります。環境Apple M3 (MacBook Air 13 2024)macOS Sonoma 14.6.1Visual Studio Code 1.93.0    Dev Container 機能拡張をインストール済みHomebrewruby 3.3.5    anyenv で rbenv をインストールruby 3.3.5 を global に設定済み ( rbenv global 3.3.5 )rails 7.2.1 gem    gem install railsmysql 9.0.1    brew install mysqlzstd 1.5.6    brew install zstdmysql2 0.5.6 gem    gem install mysql2ruby-lspの導入本題に入る前に、前回、コーディングスタイルの問題で quote-editor の CI (GitHub Actions) が失敗しました。そこで、プログラムするタイミングで rubocop を実行するようにして GitHub に push する前にコーディングスタイルの問題を解決できるようにします。.vscode/settings.json の修正内容。{  "rubyLsp.formatter": "rubocop",  "[ruby]": {    "editor.defaultFormatter": "Shopify.ruby-lsp",    "editor.formatOnSave": true  }}.devcontainer/devcontainer.json の修正内容。変更点のみです。ついでに tailwindcss 用の拡張機能も追加しています。  "customizations": {    "vscode": {      "extensions": [        "Shopify.ruby-lsp",        "bradlc.vscode-tailwindcss"      ]    }  },それと 【DevContainers】fatal: detected dubious ownership in repositoryの対処法 を参考にして git の権限がない問題にも対応しておきます。  "postCreateCommand": "sudo git config --system --add safe.directory ${containerWorkspaceFolder} && bin/setup"コンテナをリビルドして作業再開。本当は必要ないのでしょうけど、devcontainer.jsonを修正したらリビルドしておくと安心です。Organizing CSS files in Ruby on Rails今回はこんな感じの Web 1.0 な残念なページに CSS を適用して Web 2.0 にグレードアップさせます。Turbo Rails Tutorial では1からCSSを記述しています。説明はとてもわかりやすく、それに、完成したページのデザインも良いです。それでも、単に使ってみたいからというすごく個人的な理由で、tailwindcss を使って同じような見た目にします。実は tailwindcss を使ったことがないため、ちょっと不安です。が、なんとかなるでしょう。それでは順番にやっていきましょう！色の定義app/assets/stylesheets/config/_variables.scss はいろいろな CSS 変数の定義です。これらの多くは tailwindcss が提供しているため不要です。ただ、フォントとカラーについてはなるべく同じデザインにするため、設定ファイル tailwind.config.js で定義します。/** @type {import('tailwindcss').Config} */const colorTextHeader = 'hsl(0, 1%, 16%)';module.exports = {  content: [    './app/views/**/*.html.erb',    './app/helpers/**/*.rb',    './app/assets/stylesheets/**/*.css',    './app/javascript/**/*.js'  ],  theme: {    fontFamily: {      sans: [        'Lato', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans',        'Helvetica Neue', 'sans-serif'      ]    },    colors: {      transparent: 'transparent',      current: 'currentColor',      // Three different text colors      'text-header': colorTextHeader,      'text-body':   'hsl(0, 5%, 25%)',      'text-muted':  'hsl(0, 1%, 44%)',      // Application colors      primary:          'hsl(350, 67%, 50%)',      'primary-rotate':   'hsl(10, 73%, 54%)',      'primary-bg':       'hsl(0, 85%, 96%)',      secondary:        'hsl(101, 45%, 56%)',      'secondary-rotate': 'hsl(120, 45%, 56%)',      tertiary:         'hsl(49, 89%, 64%)',      glint:            'hsl(210, 100%, 82%)',      // Neutral colors      white:      'hsl(0, 0%, 100%)',      background: 'hsl(30, 50%, 98%)',      light:      'hsl(0, 6%, 93%)',      dark:       colorTextHeader    }  }}リセットapp/assets/stylesheets/config/_reset.scss は重要そうなところだけを tailwindcss で定義。具体的にはブラウザのデフォルト値をリセットしている margin: 0 などは定義せず、フォントカラーなどの見た目を変えるものを定義。チュートリアルのCSSとの違いは @apply ディレクティブ を使って tailwindcss が定義しているクラスを記述する。現時点ではファイルの分割方法がわからないため、直接 app/assets/stylesheets/application.tailwind.css を変更します。修正前の app/assets/stylesheets/application.tailwind.css は次の3行です。@tailwind base;@tailwind components;@tailwind utilities;これに次の内容を追記します。html {  @apply overflow-y-scroll h-full;}body {  @apply flex flex-col min-h-full bg-background text-text-body leading-normal font-sans;}img,picture,svg {  @apply block max-w-full;}h1,h2,h3,h4,h5,h6 {  @apply text-text-header leading-tight;}h1 {  @apply text-3xl;}h2 {  @apply text-2xl;}h3 {  @apply text-xl;}h4 {  @apply text-lg;}a {  @apply text-primary no-underline transition-colors duration-200    hover:text-primary-rotate focus:text-primary-rotate active:text-primary-rotate;}チュートリアルのフォントサイズと tailwindcss の対応は以下でした。–font-size-xs: 0.75rem;   // 12px    text-xs–font-size-s: 0.875rem;   // 14px    text-sm–font-size-m: 1rem;       // 16px    text-base–font-size-l: 1.125rem;   // 18px    text-lg–font-size-xl: 1.25rem;   // 20px    text-xl–font-size-xxl: 1.5rem;   // 24px    text-2xl–font-size-xxxl: 2rem;    // 32px    text-3xl厳密には対応するものがなかった–font-size-xxxxl: 2.5rem; // 40px    text-4xl厳密には対応するものがなかったここまでの成果。ちょっと色がついて、隙間が空いた。ボタン次はボタン .btn のスタイルを定義します。チュートリアルの app/assets/stylesheets/components/_btn.scss 相当です。.btn はコンポーネントとして定義すると良さそうなので @layer ディレクティブ を使います。/* 省略 */@layer components {  .btn {    @apply      inline-block      py-1.5 px-4      rounded-md      bg-origin-border      bg-transparent      border-solid border-2 border-transparent      font-bold      no-underline      cursor-pointer      outline-none      [transition:filter_400ms,color_200ms]      hover:[transition:filter_250ms,color_200ms]      focus:[transition:filter_250ms,color_200ms]      focus-within:[transition:filter_250ms,color_200ms]      active:[transition:filter_250ms,color_200ms];  }  .btn--primary {    @apply text-white bg-gradient-to-r from-primary to-primary-rotate      hover:text-white hover:saturate-[1.4] hover:brightness-[115%]      focus:text-white focus:saturate-[1.4] focus:brightness-[115%]      focus-within:text-white focus-within:saturate-[1.4] focus-within:brightness-[115%]      active:text-white active:saturate-[1.4] active:brightness-[115%];  }  .btn--secondary {    @apply text-white bg-gradient-to-r from-secondary to-secondary-rotate      hover:text-white hover:saturate-[1.2] hover:brightness-[110%]      focus:text-white focus:saturate-[1.2] focus:brightness-[110%]      focus-within:text-white focus-within:saturate-[1.2] focus-within:brightness-[110%]      active:text-white active:saturate-[1.2] active:brightness-[110%];  }  .btn--light {    @apply text-dark bg-light      hover:text-dark hover:brightness-[92%]      focus:text-dark focus:brightness-[92%]      focus-within:text-dark focus-within:brightness-[92%]      active:text-dark active:brightness-[92%];  }  .btn--dark {    @apply text-white border-dark bg-dark      hover:text-white      focus:text-white      focus-within:text-white      active:text-white;  }}チュートリアルのスペース(パディングやマージン)のサイズと tailwindcss のサイズの対応は以下でした。ここには数値しか記載していませんが、例えば 1 だと m-1, p-1 みたいに指定します。–space-xxxs: 0.25rem; // 4px    1    –space-xxs: 0.375rem; // 6px    1.5–space-xs: 0.5rem;    // 8px    2    –space-s: 0.75rem;    // 12px    3    –space-m: 1rem;       // 16px    4    –space-l: 1.5rem;     // 24px    6    –space-xl: 2rem;      // 32px    8    –space-xxl: 2.5rem;   // 40px    10–space-xxxl: 3rem;    // 48px    12–space-xxxxl: 4rem;   // 64px    16最初、 .btn を追加したのに生成した css にはその定義が含まれていませんでした。おかしいなと思って、 bin/dev を control-C でいったん止めてから、再度 bin/dev でサーバーを起動すると修正が反映されました。その後はサーバーの再起動なしで変更が即座に反映されています。なんだったのだろう…。また、 transition の指定に四苦八苦しました。特に transition: filter 400ms, color 200ms; を tailwindcss でどのように表現すればいいのかわかりませんでした。が、わかってみれば [] で括れば自由に CSS を書けることがわかり、それをつかって実現しました。なお、tailwindcss では CSS 入れ子 (CSS nesting) は使えませんでした。残念。/* 現時点ではこれはダメな書き方 */a {  @apply text-primary no-underline [transition:filter_450ms,color_200ms];  &:hover,  &:focus,  &:active {    @apply text-primary-rotate;  }}tailwindcss/nesting というプラグインと PostCSS を導入するとそれっぽい記述ができるようになるようなのですが、現時点ではプラグインを入れずに作業を進めたかったので & を愚直に展開して対応しました。ここまでの成果。ボタンのグラデーションがかっこいい。こういったセンスを身につけたい。見積もり (Quote)メインコンテンツの見積もり (Quote) のスタイルを定義します。チュートリアルの  app/assets/stylesheets/components/_quote.scss 相当です。/* 省略 */@layer components {  /* 省略 */  .quote {    @apply flex justify-between text-center items-center gap-3 bg-white rounded-md shadow-sm mb-4 p-2      md:py-2 md:px-4;  }  .quote__actions {    @apply flex flex-[0_0_auto] gap-2 self-start;  }}tailwindcss では flex: 0 0 auto; に対応する flex-[0_0_auto] という書き方ができるのが強み。事前に定義してあるものだけでなく、必要ならその場で定義できるのは楽。ここまでの成果。一気にそれっぽいデザインになった。すごい。フォーム前回、 simple_form の設定をスキップしたのですが、やはり必要だったのでこのタイミングで設定します。SimpleForm.setup do |config|  config.wrappers :default, class: "form__group" do |b|    b.use :html5    b.use :placeholder    b.optional :maxlength    b.optional :minlength    b.optional :pattern    b.optional :min_max    b.optional :readonly    b.use :label, class: "visually-hidden"    b.use :input, class: "form__input", error_class: "form__input--invalid"  end  config.default_wrapper = :default  config.boolean_style = :nested  config.button_class = "btn"  config.error_notification_tag = :div  config.error_notification_class = "error_notification"  config.label_text = lambda { |label, _, _| label }  config.generate_additional_classes_for = []  config.browser_validations = false  config.boolean_label_class = "form__checkbox-label"end設定後は bin/dev を再起動します。そして、フォームのスタイルを定義します。チュートリアルの app/assets/stylesheets/components/_form.scss と app/assets/stylesheets/components/_visually_hidden.scss 相当です。  /* 省略 */  .form {    @apply flex flex-wrap gap-2;  }  .form__group {    @apply flex-1;  }  .form__input {    @apply block w-full max-w-full py-1.5 px-2 border-solid border-2 border-light rounded-md outline-none      transition-shadow duration-200      focus:[box-shadow:0_0_0_2px_theme(colors.glint)];  }  .form__input--invalid {    @apply border-primary;  }  /* Shamelessly stolen from Bootstrap */  .visually-hidden {    @apply !absolute !w-px !h-px !p-0 !-m-px !overflow-hidden ![clip:rect(0,0,0,0)] !whitespace-nowrap !border-0;  }}[] で括って 任意の値 (arbitrary value) を指定する際、theme関数 を使って theme(colors.glint) のようにして定義したカラー glint を参照しています。ここまでの成果。一覧に続いて、新規登録画面のデザインもいい感じになりました。エラーメッセージエラーメッセージのスタイルを定義します。チュートリアルの app/assets/stylesheets/components/_error_message.scss 相当です。  /* 省略*/  .error-message {    @apply w-full text-primary bg-primary-bg p-2 rounded-md;  }}で、こんな感じ。コンテナチュートリアルの app/assets/stylesheets/layouts/_container.scss 相当です。  /* 省略*/  .container {    @apply w-full pr-2 pl-2 ml-auto mr-auto md:pr-4 md:pl-4 md:max-w-[60rem];  }}一覧画面。新規作成画面。ヘッダーチュートリアルの app/assets/stylesheets/layouts/_header.scss 相当です。  /* 省略*/  .header {    @apply flex flex-wrap gap-3 justify-between mt-4 mb-6 md:mb-8;  }}一覧画面。新規作成画面。1ファイルにすべてのスタイルに定義したため manifest ファイルはそのままでいいです。今回はここまで。初 tailwindcss でしたが、これは便利。通常、フロントエンドは HTML + CSS + JavaScript で作るのですが tailwindcss を使えば CSS を引き算して HTML + JavaScript でできそう。また、@import が使えないのが不安でしたが、なんとかなりましたね。 PostCSS を使えば @import が使えたり、入れ子 CSS 相当のことができたりするようなので、次回はそれにチャレンジしようと思います。ソースコードは takaokouji/quote-editor においていますので、興味がある方は Watch していただけると励みになります。協力者の募集スモウルビー (GitHub) の開発にご協力いただける方を常に募集しています。ご協力いただける方は、 contact@smalruby.jp までご連絡いただいてもいいですし、連絡なしで「xxx のブロックに対応しました」というPRを作成してもらってもかまいません。むしろその方が好都合です。スポンサーも募集しています。また、 拙著:小学生から楽しむ きらきらRubyプログラミング をご購入いただけるとありがたいです。スモウルビーの使い方と教え方を学ぶことができる書籍です。特に小・中学校の先生に読んでいただきたいです。日本中の小・中学生が学校の授業や地域のプログラミング教室でスモウルビーを使っています。みなさんのご協力で、たくさんの子どもたちがハッピーになります。ご協力、よろしくお願いします。

Turbo Rails Tutorial を Rails 7.2.1 / ruby 3.3.5 / Dev Container / tailwindcss でやってみた (3)

前回の続き です。Dev Container と tailwindcss を利用して Turbo Rails Tutorial をやっています。前回までソースコードは takaokouji/quote-editor:20a61f1 にあります。環境Apple M3 (MacBook Air 13 2024)macOS Sonoma 14.6.1Visual Studio Code 1.93.0    Dev Container 機能拡張をインストール済みHomebrewruby 3.3.5    anyenv で rbenv をインストールruby 3.3.5 を global に設定済み ( rbenv global 3.3.5 )rails 7.2.1 gem    gem install railsmysql 9.0.1    brew install mysqlzstd 1.5.6    brew install zstdmysql2 0.5.6 gem    gem install mysql2A simple CRUD controller with Railsこれは失敗だったのですが、作業を再開するにあたって Visual Studio Code のリモートエクスプローラーから quote-editor quote_editor-rails-app-1 を選択して、「現在のウィンドウのコンテナーで開く」ボタンを押す。bin/dev を実行してサーバーを起動して、ブラウザで http://localhost:3000 にアクセス。「さぁ、作業再開」と思ったのですが 「MySQL サーバーに接続できません」という旨のというエラーが発生しました。作業再開の正しい手順は、コマンドパレットで「Dev Containers: Reopen in Container」を選択でした。すると、rails-appのコンテナだけでなく、mysql、redis、seleniumのコンテナも起動して、期待通りに動作するようになります。気を取り直して続きをやります。この章では、自動テストの実装モデル/テーブルの作成コントローラーの作成ビューの作成を行って、quote という1行メモの CRUD を作ります。自動テストの実装bin/rails g system_test quotes以下の警告が表示されました。/home/vscode/.rbenv/versions/3.3.5/lib/ruby/3.3.0/bundled_gems.rb:75: warning: /home/vscode/.rbenv/versions/3.3.5/lib/ruby/3.3.0/ostruct.rb was loaded from the standard library, but will no longer be part of the default gems starting from Ruby 3.5.0.You can add ostruct to your Gemfile or gemspec to silence this warning.Also please contact the author of jbuilder-2.12.0 to request adding ostruct into its gemspec.Gemfileにostruct(OpenStruct)を追加して、この警告が出ないようにします。Ruby 3.0 から OpenStruct が非推奨になったgem "ostruct"コピペで自動テスト test/system/quotes_test.rb を実装。require "application_system_test_case"class QuotesTest < ApplicationSystemTestCase  setup do    @quote = quotes(:first) # Reference to the first fixture quote  end  test "Creating a new quote" do    # When we visit the Quotes#index page    # we expect to see a title with the text "Quotes"    visit quotes_path    assert_selector "h1", text: "Quotes"    # When we click on the link with the text "New quote"    # we expect to land on a page with the title "New quote"    click_on "New quote"    assert_selector "h1", text: "New quote"    # When we fill in the name input with "Capybara quote"    # and we click on "Create Quote"    fill_in "Name", with: "Capybara quote"    click_on "Create quote"    # We expect to be back on the page with the title "Quotes"    # and to see our "Capybara quote" added to the list    assert_selector "h1", text: "Quotes"    assert_text "Capybara quote"  end  test "Showing a quote" do    visit quotes_path    click_link @quote.name    assert_selector "h1", text: @quote.name  end  test "Updating a quote" do    visit quotes_path    assert_selector "h1", text: "Quotes"    click_on "Edit", match: :first    assert_selector "h1", text: "Edit quote"    fill_in "Name", with: "Updated quote"    click_on "Update quote"    assert_selector "h1", text: "Quotes"    assert_text "Updated quote"  end  test "Destroying a quote" do    visit quotes_path    assert_text @quote.name    click_on "Delete", match: :first    assert_no_text @quote.name  endendテストで使うデータベースの用意。touch test/fixtures/quotes.ymltest/fixtures/quotes.yml もコピペ。first:  name: First quotesecond:  name: Second quotethird:  name: Third quoteテストに失敗することを確認。assetをビルドしてからテストを実行してくれるんですね。これは便利。$ bin/rails test:systemyarn install v1.22.22[1/4] Resolving packages...success Already up-to-date.Done in 0.15s.yarn run v1.22.22$ esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets  app/assets/builds/application.js      261.9kb  app/assets/builds/application.js.map  481.9kbDone in 0.13s.yarn install v1.22.22[1/4] Resolving packages...success Already up-to-date.Done in 0.07s.yarn run v1.22.22$ tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minifyRebuilding...Done in 126ms.Done in 0.54s.Running 4 tests in a single process (parallelization threshold is 50)Run options: --seed 10879# Running:EError:QuotesTest#test_Creating_a_new_quote:ActiveRecord::StatementInvalid: Mysql2::Error: Table 'quote_editor_test.quotes' doesn't exist(省略)Finished in 0.014672s, 272.6219 runs/s, 0.0000 assertions/s.4 runs, 0 assertions, 0 failures, 4 errors, 0 skipsモデル/テーブルの作成bin/rails generate model Quote name:stringtest/fixtures/quotes.yml がコンフリクトするため、「n」を選択して、前の節で作成したものを採用。モデル app/models/quote.rb。validates を追加。class Quote < ApplicationRecord  validates :name, presence: trueendテーブル db/migrate/20240909124654_create_quotes.rb (ファイル名のうち 20240909124654 は bin/rails generate を実行した日時を示す)。 null: false を追加。class CreateQuotes < ActiveRecord::Migration[7.2]  def change    create_table :quotes do |t|      t.string :name, null: false      t.timestamps    end  endendDBのマイグレーション。bin/rails db:migrateコントローラーの作成bin/rails generate controller Quotesあら？コントローラーのgeneratorではルーティングが追加されないのですね。手作業で追加。ルーティング config/routes.rb の修正。長かったのでコメントを削っています。Rails.application.routes.draw do  get "up" => "rails/health#show", as: :rails_health_check  get "service-worker" => "rails/pwa#service_worker", as: :pwa_service_worker  get "manifest" => "rails/pwa#manifest", as: :pwa_manifest  resources :quotesendコントローラー app/controllers/quotes_controller.rb の実装。class QuotesController < ApplicationController  before_action :set_quote, only: [:show, :edit, :update, :destroy]  def index    @quotes = Quote.all  end  def show  end  def new    @quote = Quote.new  end  def create    @quote = Quote.new(quote_params)    if @quote.save      redirect_to quotes_path, notice: "Quote was successfully created."    else      render :new    end  end  def edit  end  def update    if @quote.update(quote_params)      redirect_to quotes_path, notice: "Quote was successfully updated."    else      render :edit    end  end  def destroy    @quote.destroy    redirect_to quotes_path, notice: "Quote was successfully destroyed."  end  private  def set_quote    @quote = Quote.find(params[:id])  end  def quote_params    params.require(:quote).permit(:name)  endendビューの作成一覧画面のビュー app/controllers/app/views/quotes/index.html.erb の作成。あとで tailwindcss に合わせて HTML の class を修正しますが、いまはコピペで進めます。<main class="container">  <div class="header">    <h1>Quotes</h1>    <%= link_to "New quote",                new_quote_path,                class: "btn btn--primary" %>  </div>  <%= render @quotes %></main>詳細画面の一部のビュー app/views/quotes/_quote.html.erb の作成。<div class="quote">  <%= link_to quote.name, quote_path(quote) %>  <div class="quote__actions">    <%= button_to "Delete",                  quote_path(quote),                  method: :delete,                  class: "btn btn--light" %>    <%= link_to "Edit",                edit_quote_path(quote),                class: "btn btn--light" %>  </div></div>新規登録画面のビュー app/views/quotes/new.html.erb の実装。<main class="container">  <%= link_to sanitize("&larr; Back to quotes"), quotes_path %>  <div class="header">    <h1>New quote</h1>  </div>  <%= render "form", quote: @quote %></main>編集画面のビュー app/views/quotes/edit.html.erb の実装。<main class="container">  <%= link_to sanitize("&larr; Back to quote"), quote_path(@quote) %>  <div class="header">    <h1>Edit quote</h1>  </div>  <%= render "form", quote: @quote %></main>新規作成画面と編集画面の共通ビュー app/views/quotes/_form.html.erb の実装。<%= simple_form_for quote, html: { class: "quote form" } do |f| %>  <% if quote.errors.any? %>    <div class="error-message">      <%= quote.errors.full_messages.to_sentence.capitalize %>    </div>  <% end %>  <%= f.input :name, input_html: { autofocus: true } %>  <%= f.submit class: "btn btn--secondary" %><% end %>simple_form を使えるようにします。 Gemfile に以下を加えます。バージョンは現在(2024/09/09)の最新版にしています。gem "simple_form", "~> 5.3.1"simple_formの設定の追加。bundle installbin/rails generate simple_form:installsimple_form の設定 `config/initializers/simple_form.rb は後回し。HTML 全体に tailwindcss を適用するときに合わせて設定します。メッセージカタログ config/locales/simple_form.en.yml の修正。error_notification より下をコピペ。en:  simple_form:    "yes": 'Yes'    "no": 'No'    required:      text: 'required'      mark: '*'      # You can uncomment the line below if you need to overwrite the whole required html.      # When using html, text and mark won't be used.      # html: '<abbr title="required">*</abbr>'    error_notification:      default_message: "Please review the problems below:"    placeholders:      quote:        name: Name of your quote    labels:      quote:        name: Name  helpers:    submit:      quote:        create: Create quote        update: Update quote詳細画面のビュー app/views/quotes/show.html.erb の実装。<main class="container">  <%= link_to sanitize("&larr; Back to quotes"), quotes_path %>  <div class="header">    <h1>      <%= @quote.name %>    </h1>  </div></main>動作確認ここまでできたらテストを実行。$ bin/rails test:system(省略).Finished in 2.776025s, 1.4409 runs/s, 3.9625 assertions/s.4 runs, 11 assertions, 0 failures, 0 errors, 0 skips無事にパスした。しかしここでも警告が表示される。2024-09-09 13:27:53 WARN Selenium [:clear_local_storage] [DEPRECATION] clear_local_storage is deprecated and will be removed in a future release.ここまでの修正をいったんコミットしてから対応する。git add .git commit -m 'feat: crud'少し無理矢理感はあるが、 clear_local_storage と clear_session_storage を実行しないように設定して回避しました。diff --git a/test/application_system_test_case.rb b/test/application_system_test_case.rbindex 8d40628..ebc486a 100644--- a/test/application_system_test_case.rb+++ b/test/application_system_test_case.rb@@ -6,7 +6,9 @@ class ApplicationSystemTestCase < ActionDispatch::SystemTestCase     driven_by :selenium, using: :headless_chrome, screen_size: [ 1400, 1400 ], options: {       browser: :remote,-      url: "http://#{ENV["SELENIUM_HOST"]}:4444"+      url: "http://#{ENV["SELENIUM_HOST"]}:4444",+      clear_local_storage: false,+      clear_session_storage: false     }   else     driven_by :selenium, using: :headless_chrome, screen_size: [ 1400, 1400 ]これで警告が消えて、見慣れたテスト結果になりました。$ bin/rails test:system(省略)# Running:Capybara starting Puma...* Version 6.4.2, codename: The Eagle of Durango* Min threads: 0, max threads: 4* Listening on http://172.19.0.5:45678....Finished in 1.405442s, 2.8461 runs/s, 7.8267 assertions/s.4 runs, 11 assertions, 0 failures, 0 errors, 0 skips最後にブラウザでも確認します。gemを追加したのでサーバーを再起動させます。control+Cで停止して bin/dev です。無事に表示でき、一通りの操作ができました。が、スタイルシートがあたっていないため残念な見た目になっています。初見だとバグっているようにしか見えないかも。One more thing…これで終わり。と思ったら続きがあった。コントローラー app/controllers/quotes_controller.rb の修正。render :new と render :editに , status: :unprocessable_entity を追加する。こうしないとバリデーションエラーの際に画面が再描画されません。Rails 7のルールです。  # (省略)  def create    @quote = Quote.new(quote_params)    if @quote.save      redirect_to quotes_path, notice: "Quote was successfully created."    else      render :new, status: :unprocessable_entity    end  end  # (省略)  def update    if @quote.update(quote_params)      redirect_to quotes_path, notice: "Quote was successfully updated."    else      render :edit, status: :unprocessable_entity    end  end  # (省略)DBの初期値 db/seeds.rb の実装。元々あったコメントはすべて削除した。puts "\n== Seeding the database with fixtures =="system("bin/rails db:fixtures:load")DBへの登録。bin/rails db:seedそれとコーディングスタイルが不適切なので rubocop が警告を出していた (GitHub Actionsの失敗で気がついた)。これも修正しておく。bin/rubocop -aコミット、push。git add .git commit -m 'style: rubocop'これで本当に終わり。お疲れ様でした。今回はここまで。ソースコードは takaokouji/quote-editor においていますので、興味がある方は Watch していただけると励みになります。協力者の募集スモウルビー (GitHub) の開発にご協力いただける方を常に募集しています。ご協力いただける方は、 contact@smalruby.jp までご連絡いただいてもいいですし、連絡なしで「xxx のブロックに対応しました」というPRを作成してもらってもかまいません。むしろその方が好都合です。スポンサーも募集しています。また、 拙著:小学生から楽しむ きらきらRubyプログラミング をご購入いただけるとありがたいです。スモウルビーの使い方と教え方を学ぶことができる書籍です。特に小・中学校の先生に読んでいただきたいです。日本中の小・中学生が学校の授業や地域のプログラミング教室でスモウルビーを使っています。みなさんのご協力で、たくさんの子どもたちがハッピーになります。ご協力、よろしくお願いします。

Turbo Rails Tutorial を Rails 7.2.1 / ruby 3.3.5 / Dev Container / tailwindcss でやってみた (2)

Apple Silicon上でR2P2をビルドしてみたが、ダメだった

新しいマシンには新しいアクセサリーを、というのは世の常ですよね。早速、MacBook Air 13 / M3 と合わせて購入した新しいアクセサリーを紹介します。キーボードカバーおすすめ度: ★★★★★ (星5つ)これまでは moshi製のClearguardというキーボードカバー を使っていました。365日、8時間以上の使用でも2年程度は持つほどの耐久力と驚きの薄さです。打鍵感は変わってしまいますが、慣れてくると適度な硬さと打鍵音の静けさが心地よくなる至高の逸品。ただ、値段が高い。標準的なキーボードカバーの2〜2.5倍の値段です。仕事で使うにはオススメですが、個人的にはちょっと。ということで、 Amazonおすすめ の 2024-2021】MacBook Air 13 / Air 15 / Pro 14 / Pro 16 インチ 用 キーボードカバー 対応日本語JIS配列 (型番 A3114 A3113 A2918 A2991 A2992 A2681 A2941 A2779 A2442 A2780 A2485) M3 M2 M1 超薄 高い透明感 マックブック プロ 14/16 エアー 15.3/13.6 專用 を購入。 1,380 円。現在 moshi 製は 3,960 円なので 3 分の 1 の価格。使ってみた感想としては大満足。薄さ、質感、フィット、どれをとっても moshi 製と遜色ない。強いて挙げるなら moshi 製のほうがサラサラ感があって、表現は難しいのですが粉が吹きかかっている感じ。また、 moshi 製のほうだ少し厚みがあるような気がするため、耐久性はこれから1年くらいかかけ確認します。とはいえ、価格が 3 分の 1 ですからね。へこたれたら買い換えれば良い、というのは気分が楽です。パームレスト保護フィルムおすすめ度: ★★★☆☆ (星3つ)今回、久しぶりにパームレスト保護フィルム ClearView MacBook Air 13.6 2024 M3 / 2022 M2用 カーボン調 パームレスト保護フィルム 日本製 を購入しました。以前は パワーサポートのリストラグ を使っていましたが、 MacBook の筐体が変わってディスプレイとパームレストの隙間がなくなり、リストラグをつけるとディスプレイが傷ついてしまうようになりました。Apple の公式サポートの Mac ノートブックでカメラカバー、パームレスト、キーボードカバーを使う には、ディスプレイを閉じる前にカバーを取り外してください。ディスプレイ、キーボード、パームレストに何かを被せたまま蓋を閉じると、ディスプレイが所定の位置に収まらなくなり、傷つくおそれがあります。と記載されています。ようするに使うなと。ただ、パワーサポートのリストラグのように起毛で厚みがあるのはだめでしょうけど、自己責任ではありますが保護フィルムのよう極薄のものならいいでしょう。それよりも汗などによるるパームレスト部分の経年劣化のほうが辛いので。つけたあとはこんな感じ。見た目は悪くない。しかし、夏場のように手が湿った状態だとペタッとなってしまって息苦しい感じ。残念ながらパームレスト無しのほうがかなり良いので、そのうち外すかもしれません。天板保護フィルムおすすめ度: ？ (未評価)まだ届いていないので紹介だけになりますが、今回は ClearView MacBook Air 13.6 2024 M3 / 2022 M2用 カーボン調 天板保護フィルム 日本製 を使ってみることにしました。これまではハードシェルケースを使ってきました。主に パワーサポート製 と moshi 製 のものです。薄くて、質感が良く、気に入っていました。しかしながら、放熱の点で問題があり、夏場は CPU のサーマルスロットによって性能劣化が問題になりました。そこで今回は ハードシェルではないPCケース に入れて持ち運ぶことにしました。ただ、天板にはステッカーが貼りたいので保護フィルムを使うことにしました。ちょっと不安なのは、購入した商品の Amazon のレビュー欄にはきれいに貼るのがとても大変と書かれていました。けっして器用なほうではないため、うまく貼れるか今から不安です。電源アダプタ兼モバイルバッテリーおすすめ度: ★★★★☆ (星4つ)Intel CPU と比べて Apple Silicon M3 の特徴は、なんといってもバッテリーの持ちの良さ。ようするに消費電力がとても少ないのです。35W の電源アダプタが付属されていましたが、同時に iPhone などを充電するために USB-C ポートが 2 つ用意されています。おそらく充電するだけならば 30W もあれば十分なのでしょう。ということで、予備の電源アダプタとして Anker 511 Power Bank (PowerCore Fusion 30W) / 小型 モバイルバッテリー / 5000mAh 30W出力 / コンセント一体型/USB Power Delivery/PowerIQ搭載/PSE技術基準適合 (ブラック) を購入しました。大きさ・重さは適度で、出力は 30W で十分です。MacBook Air 13 M3 のバッテリーは約 14,000 mAh (52.6Wh) でしたので、いざというときに 5,000mAh でも数時間は使えるという安心感も◯。iPhone用のモバイルバッテリーと兼ねられるのも良い。と、概ね満足なのですが、ちょっとミスしたのは、USB-C ポートが 1 つだと MacBook Air と iPhone を同時に充電できないですね。Anker Power Bank (30W, Fusion, Built-In USB-C ケーブル) (5000mAh 22.5W出力モバイルバッテリー搭載 30W出力USB充電器) / LEDディスプレイ搭載/USB-Cケーブル一体型/コンセント一体型/折りたたみ式プラグ 1台3役 (ブラック) のほうが良かったかも。こちらの商品は USB-C ケーブルを内蔵していて、さらに 1 ポートあります。重さはほぼ変わりません。考慮不足だったとちょっと後悔しています。新しいマシンは楽しい久しぶりに新しいマシンを買ったので楽しくて仕方ありません。一通り開発環境を整えて、Chromeで3つのChromeプロフィールでそれぞれ数十のタブを常駐させて、Dockerでの開発、ParallelsでWindows 11での動作確認、TimeMachineでバックアップなんかをやっていますが、もたつく感じはまったくありません。これでファンレスなんですよね。全然熱くならないし。すごい。本当に買ってよかったです。いや〜、しばらく楽しめそうです。協力者の募集スモウルビー (GitHub) の開発にご協力いただける方を常に募集しています。ご協力いただける方は、 contact@smalruby.jp までご連絡いただいてもいいですし、連絡なしで「xxx のブロックに対応しました」というPRを作成してもらってもかまいません。むしろその方が好都合です。スポンサーも募集しています。また、 拙著:小学生から楽しむ きらきらRubyプログラミング をご購入いただけるとありがたいです。スモウルビーの使い方と教え方を学ぶことができる書籍です。特に小・中学校の先生に読んでいただきたいです。日本中の小・中学生が学校の授業や地域のプログラミング教室でスモウルビーを使っています。みなさんのご協力で、たくさんの子どもたちがハッピーになります。ご協力、よろしくお願いします。

MacBook Air 13 M3 と合わせて購入したアクセサリーの紹介

Rails の Dev Container を試そうとしていきなりつまずきました。mysql2-0.5.6 gem がインストールできなかったのです。しかしながら、zstd ライブラリのパスを環境変数 LIBRARY_PATH に追加することで無事インストールできました。LIBRARY_PATH="${HOMEBREW_PREFIX}/lib:$LIBRARY_PATH" gem install mysql2環境Apple M3 (MacBook Air 13 2024)macOS Sonoma 14.6.1Homebrewruby 3.3.5    anyenv で rbenv をインストールruby 3.3.5 を global に設定済み ( rbenv global 3.3.5 )rails 7.2.1 gem    gem install railsmysql 9.0.1    brew install mysqlzstd 1.5.6    brew install zstdmysql2 0.5.6 gem ← ここで失敗    gem install mysql2作業の記録rails 7.2.1 gem のインストールに続いて、mysql2 gem のインストールを行ったところ、以下のように失敗した。$ gem install mysql2Building native extensions. This could take a while...ERROR:  Error installing mysql2:        ERROR: Failed to build gem native extension.    current directory: /Users/kouji/.anyenv/envs/rbenv/versions/3.3.5/lib/ruby/gems/3.3.0/gems/mysql2-0.5.6/ext/mysql2/Users/kouji/.anyenv/envs/rbenv/versions/3.3.5/bin/ruby extconf.rbchecking for rb_absint_size()... yeschecking for rb_absint_singlebit_p()... yeschecking for rb_gc_mark_movable()... yeschecking for rb_wait_for_single_fd()... yeschecking for rb_enc_interned_str() in ruby.h... yes-----Using --with-openssl-dir=/opt/homebrew/opt/openssl@3----------Using mysql_config at /opt/homebrew/bin/mysql_config-----checking for mysql.h... yeschecking for errmsg.h... yeschecking for SSL_MODE_DISABLED in mysql.h... yeschecking for SSL_MODE_PREFERRED in mysql.h... yeschecking for SSL_MODE_REQUIRED in mysql.h... yeschecking for SSL_MODE_VERIFY_CA in mysql.h... yeschecking for SSL_MODE_VERIFY_IDENTITY in mysql.h... yeschecking for MYSQL.net.vio in mysql.h... yeschecking for MYSQL.net.pvio in mysql.h... nochecking for MYSQL_DEFAULT_AUTH in mysql.h... yeschecking for MYSQL_ENABLE_CLEARTEXT_PLUGIN in mysql.h... yeschecking for SERVER_QUERY_NO_GOOD_INDEX_USED in mysql.h... yeschecking for SERVER_QUERY_NO_INDEX_USED in mysql.h... yeschecking for SERVER_QUERY_WAS_SLOW in mysql.h... yeschecking for MYSQL_OPTION_MULTI_STATEMENTS_ON in mysql.h... yeschecking for MYSQL_OPTION_MULTI_STATEMENTS_OFF in mysql.h... yeschecking for my_bool in mysql.h... nochecking for mysql_ssl_set() in mysql.h... no-----Don't know how to set rpath on your system, if MySQL libraries are not in path mysql2 may not load----------Setting libpath to /opt/homebrew/Cellar/mysql/9.0.1_1/lib-----creating Makefilecurrent directory: /Users/kouji/.anyenv/envs/rbenv/versions/3.3.5/lib/ruby/gems/3.3.0/gems/mysql2-0.5.6/ext/mysql2make DESTDIR\= sitearchdir\=./.gem.20240908-69354-4ptxnv sitelibdir\=./.gem.20240908-69354-4ptxnv cleancurrent directory: /Users/kouji/.anyenv/envs/rbenv/versions/3.3.5/lib/ruby/gems/3.3.0/gems/mysql2-0.5.6/ext/mysql2make DESTDIR\= sitearchdir\=./.gem.20240908-69354-4ptxnv sitelibdir\=./.gem.20240908-69354-4ptxnvcompiling client.cIn file included from client.c:15:./mysql_enc_name_to_ruby.h:43:1: warning: a function definition without a prototype is deprecated in all versions of C and is not supported in C2x [-Wdeprecated-non-prototype]mysql2_mysql_enc_name_to_rb_hash (str, len)^./mysql_enc_name_to_ruby.h:86:1: warning: a function definition without a prototype is deprecated in all versions of C and is not supported in C2x [-Wdeprecated-non-prototype]mysql2_mysql_enc_name_to_rb (str, len)^2 warnings generated.compiling infile.ccompiling mysql2_ext.ccompiling result.cresult.c:304:35: warning: implicit conversion loses integer precision: 'unsigned long' to 'int' [-Wshorten-64-to-32]        precision = field->length - (field->decimals > 0 ? 2 : 1);                  ~ ~~~~~~~~~~~~~~^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~1 warning generated.compiling statement.clinking shared-object mysql2/mysql2.bundleld: library 'zstd' not foundclang: error: linker command failed with exit code 1 (use -v to see invocation)make: *** [mysql2.bundle] Error 1make failed, exit code 2Gem files will remain installed in /Users/kouji/.anyenv/envs/rbenv/versions/3.3.5/lib/ruby/gems/3.3.0/gems/mysql2-0.5.6 for inspection.Results logged to /Users/kouji/.anyenv/envs/rbenv/versions/3.3.5/lib/ruby/gems/3.3.0/extensions/arm64-darwin-23/3.3.0/mysql2-0.5.6/gem_make.outld: library 'zstd' not found から zstd ライブラリが見つからないことが原因だと推測。LD に失敗する場合はさらに関連ライブラリが見つからないこともあるので、この時点ではまだ zstd が原因だと確定していなかった。zstd はインストール済み。関連ライブラリも問題ない (otool -L で調べられる)。$ brew search zstd==> Formulaezstd ✔                                                                                                   zsxd$ ls /opt/homebrew/lib/libzstd.*/opt/homebrew/lib/libzstd.1.5.6.dylib   /opt/homebrew/lib/libzstd.1.dylib       /opt/homebrew/lib/libzstd.a             /opt/homebrew/lib/libzstd.dylib$ otool -L /opt/homebrew/lib/libzstd.1.5.6.dylib/opt/homebrew/lib/libzstd.1.5.6.dylib:        /opt/homebrew/opt/zstd/lib/libzstd.1.dylib (compatibility version 1.0.0, current version 1.5.6)        /usr/lib/libSystem.B.dylib (compatibility version 1.0.0, current version 1345.100.2)これでエラーの原因はリンカーのパスに libzstd.* が含まれていないことだとほぼ確定。そもそも Homebrew でインストールしたライブラリのパスを追加していなかったらしい。失敗、失敗。# HOMEBREW_PREFIX=/opt/homebrewLIBRARY_PATH="${HOMEBREW_PREFIX}/lib:$LIBRARY_PATH" gem install mysql2ついでに .zshrc に以下を追加しておく。これで問題ないんだけど、環境変数 HOMEBREW_PREFIX はどのタイミングで設定されているのかしら。export LIBRARY_PATH="${HOMEBREW_PREFIX}/lib:$LIBRARY_PATH"無事、解決。協力者の募集スモウルビー (GitHub) の開発にご協力いただける方を常に募集しています。ご協力いただける方は、 contact@smalruby.jp までご連絡いただいてもいいですし、連絡なしで「xxx のブロックに対応しました」というPRを作成してもらってもかまいません。むしろその方が好都合です。スポンサーも募集しています。また、 拙著:小学生から楽しむ きらきらRubyプログラミング をご購入いただけるとありがたいです。スモウルビーの使い方と教え方を学ぶことができる書籍です。特に小・中学校の先生に読んでいただきたいです。日本中の小・中学生が学校の授業や地域のプログラミング教室でスモウルビーを使っています。みなさんのご協力で、たくさんの子どもたちがハッピーになります。ご協力、よろしくお願いします。