Rails: Tailwind + Stimulusで2FA/OTP/SMS認証用の6桁フィールドを作る（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Making a nice 2FA / OTP / SMS field with Tailwind & Stimulus | justin․searls․co 原文公開日: 2024/08/08 原著者: Justin Searls 日本語タイトルは内容に即したものにしました。 というわけで、今日はBeckyの新アプリでメールベースの認証フローの一部となるささやかなUIを構築しました。 （まだリリースしておらず、スクリーンキャストを録画するのもおっくうなので、ひとまずこのフィールドが完璧に動いているものとお考えください、どうぞよろしく） 何らかのサイトにログインすると、認証アプリからTOTP（タイムベースのワンタイムパスワード）1を自動入力したり、SMSやメールで送信されたコードをコピーして貼り付けたりするときに、（私のように）
Railsフロントエンド: ホットキーをStimulusで追加する（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: How to add Hotkeys to your Rails App with Stimulus | Rails Designer 原文公開日: 2024/02/22 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています アプリが育ってくると画面数も増えてきます。今のうちに、ユーザーがアプリ内を移動する別の方法も追加しておくことを検討しましょう。今回はキーボードショートカット（ホットキー）を導入します。 ホットキー（hotkey）による移動とは、ユーザーがマウスクリックしなくても（Web）アプリの画面上を素早く移動して操作する、キーボードショートカットの実装を指します。 幸い、ホットキーをR
Railsの技: TailwindスタイルのCSSトランジションをStimulusJSで行う（翻訳）｜TechRacho by BPS株式会社
2022.10.17 Railsの技: TailwindスタイルのCSSトランジションをStimulusJSで行う（翻訳） StimulusJSでUI要素をビルドしたことがあるなら、きっとページ上の要素の表示・非表示を切り替えるコードを書いたことがあるでしょう。これまでの私たちは、モーダルダイアログを表示するときやパネルをスライドさせるときに以下のようなコントローラコードをひとつ覚えで書いていたものです。 this.modalTarget.classList.remove("hidden") UIデザインをレベルアップさせる目的で、トランジション（transition）1で画面上の要素の表示・非表示を滑らかに切り替える方法が使えます。トランジションを使うと、不透明な要素をじわじわ透明にしたり、要素を表示位置にスライドインしたりできるようになります。 CSSのtransitionプロパティで
Railsの技: StimulusJSで使えるキーボードショートカットのライブラリ（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Adding keyboard shortcuts and hotkeys to StimulusJS | Boring Rails: Skip the bullshit and ship fast 原文公開日: 2022/07/11 原著者: Matt Swanson サイト: Boring Rails 日本語タイトルは内容に即したものにしました。 キーボードショートカットは、Webアプリケーションのユーザーエクスペリエンスを高めて使い勝手を改善する優れた方法のひとつです。ホットキーの使いこなし方を知らない人にとっても、たとえばescキーを押すとモーダルダイアログを閉じられるといった小さな心配りひとつが、アプリケーションの印象に大きく影響することもあります。 Stimulusにはデフォルトのホットキー機能が組み込まれていません。
Railsの技: StimulusJSのコントローラを"self-destructing"にする（翻訳）｜TechRacho by BPS株式会社
UXを改善するためにJavaScriptをほんのちょっぴり加える必要に迫られることがたまにあります。昔のフルスタック開発者は、そういうときにjQueryを以下のようにページに直接追加することがよくありました。 <script type="application/javascript"> $(".flash-container").delay(5000).fadeOut() $(".items").last().highlight() </script> もちろんこれでも動きますが、ベストとは言えません。 Hotwireアプリでは、"self-destructing"なStimulusコントローラを使えば同じことができます。 self-destructingとは？ "self-destructing"なStimulusコントローラは、何かコードを少し実行してからthis.element.re
Better Stimulusガイド 09: Turbolinks（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Global Teardown - Better StimulusJS 原文更新日: 2020/10/28 原著者: leastbad、Adrien Poly サイト: Home - Better StimulusJS グローバルにteardownする こんなときに使いたい Turbolinksは、ページから離れる前にページの情報をキャッシュします。同じページを再度開くと、最初にキャッシュされたバージョンがプレビューに表示されて、続いてコンテンツがリフレッシュされます。 このため、キャッシュする前の状態に過渡的な変更を加えると、そのコンテンツは消えてしまいます。 この状況を修正するには、DOMを操作するコントローラすべてにteardownメソッドを追加して、変更をロールバックする必要があります。以下のスニペットをたとえばapp/
Railsの技: StimulusJSコントローラからRailsの環境変数にアクセスする（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Accessing Rails environment variables from a StimulusJS Controller | Boring Rails: Skip the bullshit and ship fast 原文公開日: 2022/01/20 原著者: Matt Swanson サイト: Boring Rails 環境変数はRailsアプリを設定するのによい手段です。Rails.env変数を用いれば、development環境やtest環境やproduction環境に応じて振る舞いを変更できますし、アプリケーションに独自の環境変数を追加してAPIトークンやグローバル設定に使うことも可能です。 StimulusにはHTMLのdata-*属性を読み出すvalues APIがありますが、コントローラを作成するたびに
Better Stimulusガイド 08: Rails-ujs（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Submit a Form Programmatically - Better StimulusJS 原文更新日: 2022/01/29 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS フォームをプログラムで送信する <div data-controller="remote-form"> <%= form_with(model: @article, html: { data: { action: "ajax:success->remote-form#onPostSuccess" } }) do |f| %> <%= select_tag "author", options_from_collection_for_select
Better Stimulusガイド 07: SOLID原則（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Single Responsibility Principle - Better StimulusJS 原文更新日: 2020/04/13 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 単一責任の原則 特に、StimulusJSを初めて自分のアプリケーションに適用するときは、コントローラを「ページコントローラ」スタイルで書きたくなる誘惑に負けて、1個のコントローラ内に無関係な機能が散らばる結果になりがちです。誘惑に打ち勝って、コントローラを再利用可能な形で書くよう心がけましょう。 以下は両者を簡潔な形で並べたものです。 Bad <!-- page.html --> <div data-controller="page
Better Stimulusガイド 06: コントローラ間通信にコールバックを使う（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Use Callbacks to Communicate Between Controllers - Better StimulusJS 原文更新日: 2020/07/04 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 コントローラ間通信にコールバックを使う（翻訳） 単一のStimulusJSコンポーネントで複数のロジックを管理したい場合 機能を実行するために他のコントローラの値が必要な場合 あらゆるケースに対応するためにイベントをたくさん作りたくない場合 話を簡単にするために、以下の例ではカスタムイベントのコンストラクタが不要なjQueryを使っていますが、素のJavaScriptも使えます。 Bad // fir
Better Stimulusガイド 06: コントローラとDOMのマッパー（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Controller DOM Mapper - Better StimulusJS 原文更新日: 2020/03/09 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 コントローラとDOMのマッパー こんなときに使いたい あるコントローラの内部ステートに外部からアクセスしようとする場合 コントローラから別のコントローラのメソッドを呼び出す必要がある場合 たとえば、コントローラが処理を行うために、今どのページにいるのかという情報を別のコントローラから得る必要があるとします。 <!-- index.html --> <div data-controller="pagination test" data-pagination
Better Stimulusガイド 05: ライフサイクルイベントによるセットアップ・終了（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Use Lifecycle Events for Setup and Teardown - Better StimulusJS 原文更新日: 2020/07/04 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS セットアップや終了にはライフサイクルイベントを使う 🔗 1. ライブサイクルイベントを使えば、サードパーティJSライブラリとTurbolinksの互換性を完璧に保てる Bad import EasyMDE from "easymde" let editors = []; document.addEventListener("turbolinks:load", function() { document.queryS
Better Stimulusガイド 04: イベントリスナーの追加・削除はStimulusで行う（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Events - Better StimulusJS 原文更新日: 2021/07/16 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 1. マークアップにグローバルなイベントを登録する Bad connect() { document.addEventListener(...); } Good <div data-controller="gallery" data-action="resize@window->gallery#layout">...</div> layout(e) { ... } そうする理由 イベントリスナーの追加や削除はStimulusが行うからです。 この方法が使えない場合 コントローラのコー
Better Stimulusガイド 03: エラーハンドリング（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Global Error Handler - Better StimulusJS 原文更新日: 2022/02/17 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 グローバルなエラーハンドラ こんなときに使いたい Stimulusに関連するエラー（connectエラー、targetsにアクセスできないなど）やアプリケーションエラーをコントローラ内でキャッチして、SentryやHoneybadgerなどのエラートラッキングサービスに送信したい場合。 ソリューション 最初に、自分のStimulusコントローラが継承するグローバルなApplicationControllerを作成します。 このApplicationCont
Better Stimulusガイド 02: DOMステートを元に戻す（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Use <template> to Restore DOM State - Better StimulusJS 原文更新日: 2020/10/08 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 DOMステートを<template>でリストアする こんなときに使いたい 使っている外部ライブラリがHTMLの一部を削除したときに復元する必要がある場合 Turbolinksのキャッシュに備えて、ページ遷移の前に既知のステートにリストアしたい場合 Good <!-- index.html --> <div data-controller="modal"> <template data-target="modal.templat
Better Stimulusガイド:アーキテクチャ4: 名前空間化された属性（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Namespaced Attributes - Better StimulusJS 原文更新日: 2020/07/04 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 名前空間化された属性 Good <!-- index.html --> <input data-controller="filter" data-filter-param-category="cats" data-filter-param-rating="5" data-filter-param-color="black" type="text" data-action="input->filter#update"> // filter_controll
Better Stimulusガイド:アーキテクチャ3: ミックスイン（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Mixins - Better StimulusJS 原文更新日: 2020/10/08 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 3. ミックスイン Bad // overlay_controller.js import { Controller } from "stimulus"; export default class extends Controller { showOverlay(e) { // ... } hideOverlay(e) { // ... } } // dropdown_controller.js import OverlayController from "./overlay_con
Better Stimulusガイド:アーキテクチャ2: コントローラはコンフィグ可能にしよう（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Configurable Controllers - Better StimulusJS 原文更新日: 2020/07/04 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS 🔗 2.コントローラはコンフィグ可能にしよう Bad <!-- index.html --> <a href="#" data-controller="toggle" data-action="click->toggle#toggle"> Toggle </a> // toggle_controller.js import { Controller } from "stimulus"; export default class extends Cont
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
