Kouji Takao

前回の続き です。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プログラミング をご購入いただけるとありがたいです。スモウルビーの使い方と教え方を学ぶことができる書籍です。特に小・中学校の先生に読んでいただきたいです。日本中の小・中学生が学校の授業や地域のプログラミング教室でスモウルビーを使っています。みなさんのご協力で、たくさんの子どもたちがハッピーになります。ご協力、よろしくお願いします。

mysql2-0.5.6 gemのインストールに失敗したらLIBRARY_PATHにzstdを追加すること

mysql2のインストールにつまずいてしまったですが 、Turbo Rails Tutorial を Dev Container と tailwindcss を利用してやってみようと思っていたんですよね。うまくできるかわかりませんが、Let’s Try!環境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 mysql2Turbo Rails tutorial introductionrails new のコマンドラインオプションを次のように変えて、CSSフレームワークを tailwindcss 、DB を MySQL にする。rails new quote-editor --css=tailwind --javascript=esbuild --database=mysql --devcontainer# (以下、実行結果)#       create#       create  README.md#       create  Rakefile# (省略)#   Add build:css script#          run    npm pkg set scripts.build:css="tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify" from "."#          run    yarn build:css from "."#          run  bundle install --quiet無事にコマンドが終了したら、Visual Studio Code で開く。code quote-editorDev Container 機能拡張をインストール済みなので Dev Container を含んでいる旨が通知される。「コンテナーで開く」 (2回目からはスクリーンショットのように 「コンテナーで再度開く」)ボタンを押して、しばらくすると MySQL や Redis 、 Selenium などの必要なソフトウェアが全部インストールされた Docker コンテナが構築される。たったこれだけで Rails の開発環境が整う。Dev Container / Docker (docker compose) は便利すぎる。ただし、CPU が Apple Silicon や ARM の場合は Selenium の Docker イメージを Apple Silicon 対応の seleniarm/standalone-chromium に変えないといけません。ちなみに Selenium は System Test で使います。いったん、すべての修正をコミットしておきます。以下のコマンド相当の操作を Visual Studio Code のソース管理で行います。以降同様。git add .git commit -m 'feat: init'ここでレポジトリが信頼できないため、ターミナルで以下のコマンドを実行してくれ、と通知されたのでそれに従いました (このあと、もう一度同じような通知があったのでコンテナを再構築するたびにこのコマンドの実行が必要なのかもしれません。面倒ですね)。git config --global --add safe.directory /workspaces/quote-editor.devcontainer/compose.yaml を .devcontainer/compose.override.yaml に複製 (コピペしてからリネーム) します。そして、以下のように変更します。services:  selenium:    image: seleniarm/standalone-chromiumそして、 .devcontainer/devcontainer.json の dockerComposeFile に先ほど作成した compose.override.yaml を追加します。 diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.jsonindex 487620b..4757ef7 100644--- a/.devcontainer/devcontainer.json+++ b/.devcontainer/devcontainer.json@@ -2,7 +2,10 @@ // README at: https://github.com/devcontainers/templates/tree/main/src/ruby {   "name": "quote_editor",-  "dockerComposeFile": "compose.yaml",+  "dockerComposeFile": [+    "compose.yaml",+    "compose.override.yaml"+  ],   "service": "rails-app",   "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",ファイルを保存後、通知に従ってコンテナを再構築します。念のため Docker Desktop で正しいイメージ (seleniarm/standalone-chromium) がインストールされていること確認します。この変更をコミットして続けます。git add .git commit -m 'faet: seleniarm'rails 7.2.1 だと gem "turbo-rails" はすでに追加されていたので Gemfile は変更しませんでした。Visual Studio Code のターミナルで以下を実行。bin/setupbin/dev# (以下、実行結果の一部)# 11:56:46 js.1   | $ esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets --watch# 11:56:46 css.1  | $ tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify --watch# 11:56:46 js.1   | /bin/sh: 1: esbuild: not found# 11:56:46 css.1  | /bin/sh: 1: tailwindcss: not foundエラーです。bin/dev はサーバーの起動コマンドなのですが、esbuild と tailwindcss がないためサーバーを起動できませんでした。よくよく考えてみると、 bundle install や yarn install を行ったのは rails new のときなのでコンテナではなくてローカル。そのため、コンテナ上でもあらためてそれらを実行する必要があるはず。まずは bundle から。bundle list で確認したところ gem はすべてインストール済みだった。bundle は OK。$ bundle listGems included by the bundle:  * actioncable (7.2.1)  * actionmailbox (7.2.1)  * actionmailer (7.2.1)(省略)  * websocket-extensions (0.1.5)  * xpath (3.2.0)  * zeitwerk (2.6.18)Use `bundle info` to print more detailed information about a gem次に yarn。こちらはさっぱりだめでした。$ yarn global list --depth=0yarn global v1.22.22Done in 0.02s.$ yarn list --depth=0yarn list v1.22.22Done in 0.02s.rails new のときの実行ログを眺めたところ、以下をコンテナ上で再実行しないといけなさそう。コマンド的には package.json にこれらのパッケージを記載したほうが良さそうなのですが、記載されていない理由があるのだろうか。(省略)  Install esbuild         run    yarn add --dev esbuild from "."(省略)  Install Turbo         run    yarn add @hotwired/turbo-rails from "."(省略)  Install Stimulus         run    yarn add @hotwired/stimulus from "."(省略)  Install Tailwind (+PostCSS w/ autoprefixer)(省略)         run    yarn add tailwindcss@latest postcss@latest autoprefixer@latest from "."それぞれのコマンドをコンテナ上でも実行します。必要なパッケージがインストールされます。yarn add --dev esbuildyarn add @hotwired/turbo-railsyarn add @hotwired/stimulusyarn add tailwindcss@latest postcss@latest autoprefixer@latestyarn list --depth=0# (以下、実行結果)# yarn list v1.22.22# ├─ @alloc/quick-lru@5.2.0# ├─ @esbuild/aix-ppc64@0.23.1# ├─ @esbuild/android-arm@0.23.1# (省略)# ├─ wrap-ansi-cjs@7.0.0# ├─ wrap-ansi@8.1.0# └─ yaml@2.5.1# Done in 0.07s.あらためてサーバーを起動します。$ bin/dev12:25:33 web.1  | started with pid 1409512:25:33 js.1   | started with pid 1409612:25:33 css.1  | started with pid 1410012:25:33 js.1   | yarn run v1.22.22(省略)12:25:34 web.1  | * Listening on http://127.0.0.1:300012:25:34 web.1  | * Listening on http://[::1]:300012:25:34 web.1  | Use Ctrl-C to stop12:25:34 css.1  |12:25:34 css.1  | Done in 156ms.よし！いつもの rails server ですね。早速ブラウザでアクセスしてみます。せっかくなので「エディタでのプレビュー」を選択して、Visual Studio Code 上でプレビュー。これは Chromium ベースのエディタの強みですね。…。えっ、真っ白なんですけど！？いつもの Yay! はどこいったの！？恐る恐る Chrome で http://localhost:3000 にアクセスしてみると…いつもの Yay! じゃないのですが、ちゃんと表示されていました。Visual Studio Code 上のシンプルブラウザーだとダメみたい。Turbo が原因だと予想していますが、デバッグ方法がわからないため深追いしません。 Turbo を使っているウェブサイトでは Visual Studio Code のシンプルブラウザーは使えない 、ということを覚えておきます。git add .git commit -m 'feat: install esbuild, tailwindcss'今回はここまで。ソースコードは takaokouji/quote-editor においていますので、興味がある方は Watch していただけると励みになります。Dev Container は簡単そうに見えて、やってみるとそれなりに険しい道ですね。百聞は一見にしかず、ですね。協力者の募集スモウルビー (GitHub) の開発にご協力いただける方を常に募集しています。ご協力いただける方は、 contact@smalruby.jp までご連絡いただいてもいいですし、連絡なしで「xxx のブロックに対応しました」というPRを作成してもらってもかまいません。むしろその方が好都合です。スポンサーも募集しています。また、 拙著:小学生から楽しむ きらきらRubyプログラミング をご購入いただけるとありがたいです。スモウルビーの使い方と教え方を学ぶことができる書籍です。特に小・中学校の先生に読んでいただきたいです。日本中の小・中学生が学校の授業や地域のプログラミング教室でスモウルビーを使っています。みなさんのご協力で、たくさんの子どもたちがハッピーになります。ご協力、よろしくお願いします。

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

ついにメインマシンをARM (Apple Silicon) に変えました。買ったのは MacBook Air 13 / M3 / 16GB / 1TB 。カラーはスターライト。MacBook 12 のゴールドを彷彿とさせます。すごく良い。実は Apple Silicon への乗り換えに踏ん切りがつかなかったので、2019年に購入したMacBook Pro 15を騙し騙し使ってきました。気がつけば4年近くになっていました。長かった。それに重かった。約3年間はリモートワーク中心だったのでなんとかなっていました。この4月から出社することにしたので、2kgはずっしりと重い。軽くて小さいマシンがいいな〜と。それに、懸念していたApple Siliconですが、仕事で M3 を使うことができたので仕事で使うことに対する不安は解消。さらに M2 のマシンを 1 ヶ月ほど試すことができたので、個人的な用途でもバッチリ。rubyもnode.jsもApple Silicon対応はバッチリで本当に感謝です。rosettaもありますからね。Windows 11 on Parallels も ARM 版で問題なく動作しています (Parallelsを起動してしばらくするとWindows 11 が使えるようになったんだけど、これ、どのタイミングでライセンス登録するのだろう)。ということで、MacBook Air 13です。今は移行アシスタントでM2のAirからM3にデータを移行中。完了するのが楽しみです！協力者の募集スモウルビー (GitHub) の開発にご協力いただける方を常に募集しています。ご協力いただける方は、 contact@smalruby.jp までご連絡いただいてもいいですし、連絡なしで「xxx のブロックに対応しました」というPRを作成してもらってもかまいません。むしろその方が好都合です。スポンサーも募集しています。また、 拙著:小学生から楽しむ きらきらRubyプログラミング をご購入いただけるとありがたいです。スモウルビーの使い方と教え方を学ぶことができる書籍です。特に小・中学校の先生に読んでいただきたいです。日本中の小・中学生が学校の授業や地域のプログラミング教室でスモウルビーを使っています。みなさんのご協力で、たくさんの子どもたちがハッピーになります。ご協力、よろしくお願いします。

MacBook Air 13 に買い替えました！

今日は RubyKaigi 2024 follow up に参加。PicoRuby のセッション にインスパイアーされて Raspberry Pi Pico に R2P2 をインストールしました。GitHub の R2P2 のリリースから *.uf2.zip をダウンロード。https://github.com/picoruby/R2P2https://github.com/picoruby/R2P2/releases今日時点の最新の https://github.com/picoruby/R2P2/releases/download/0.2.1/R2P2-FLASH_MSC-0.2.1-20240209-5145384.uf2.zip をダウンロード。Raspberry Pi Pico をマシンに接続。ファイルを開くと展開されるので、ダウンロードフォルダにある R2P2-FLASH_MSC-0.2.1-20240209-5145384.uf2 を Raspberry Pi Pico にドラッグ＆ドロップするとインストール完了。これが本当に楽。すごすぎる。micro:bitやMicroPythonがこの仕組みなのですが、本当に楽。uf2のドキュメントとかとても少ないのに実装してくださって、感謝。本当に楽。あとはRaspberry Pi Picoとシリアル通信できればOKなのですが、最近はscreenではなくtmuxを使っているため、macOSでシリアル通信をする方法を調査。picocomが良さそうなのでインストール。brew install picocom私の環境では /dev/tty.usbmodem1234567890121 がシリアル通信のデバイスだったので以下で接続。オプションなしで接続できるのはありがたい。picocom /dev/tty.usbmodem1234567890121# (以下、実行結果)# picocom v3.1## port is        : /dev/tty.usbmodem1234567890121# flowcontrol    : none# baudrate is    : 9600# parity is      : none# databits are   : 8# stopbits are   : 1# escape is      : C-a# local echo is  : no# noinit is      : no# noreset is     : no# hangup is      : no# nolock is      : no# send_cmd is    : sz -vv# receive_cmd is : rz -vv -E# imap is        :# omap is        :# emap is        : crcrlf,delbs,# logfile is     : none# initstring     : none# exit_after is  : not set# exit is        : no## Type [C-a] [C-h] to see available commands# Terminal ready# Starting shell...###                    ____  _           ____        _#                   |  _ \(_) ___ ___ |  _ \ _   _| |,_  _   _#                   | |_) | |/ __/ _ \| |_) | | | | '_ \| | | |#                   |  __/| | (_| (_) |  _ <| |_| | |_) | |_| |#                   |_|   |_|\___\___/|_| \_\\__,_|_.__/ \__, |#                                  by hasumikin          |___/## $>動作確認はこんな感じ。irbが動くのは本当にすごい。入力、解析、実行のループをRaspberry Pi Pico上で行っているのですよね。本当にすごい。$> irbirb> puts "hello, world"hello, world=> nilirb> exit$> exitbye (RuntimeError)RebootingFATAL: read from port failed: Device not configuredterm_exitfunc: reset failed for dev UNKNOWN: No such file or directory以上、R2P2のインストール＆動作確認でした。余談R2P2 インストール済みの Raspberry Pi Pico を持ち歩きたいので、いい感じのケースがないか物色中。Raspberry Pi Pico Dule-SidedProtection用の防塵クリアアクリル保護ケース これが良いのですが、値段が高い。100円ショップでそれっぽいケースを探す予定。あと、 はんだ付けなしでピンソケットをRaspberry pi picoにたてる というのも試したい。このあとセリアでテグスを探そう。協力者の募集スモウルビー (GitHub) の開発にご協力いただける方を常に募集しています。ご協力いただける方は、 contact@smalruby.jp までご連絡いただいてもいいですし、連絡なしで「xxx のブロックに対応しました」というPRを作成してもらってもかまいません。むしろその方が好都合です。また、 拙著:小学生から楽しむ きらきらRubyプログラミング をご購入いただけるとありがたいです。スモウルビーの使い方と教え方を学ぶことができる書籍です。特に小・中学校の先生に読んでいただきたいです。日本中の小・中学生が学校の授業や地域のプログラミング教室でスモウルビーを使っています。みなさんのご協力で、たくさんの子どもたちがハッピーになります。ご協力、よろしくお願いします。