AUN[あうん]｜登録不要の修正依頼・指示ツールそれは、 仕事はもちろん プライベートでも 「AUN」はWeb制作の場面で、バグや修正の指示をスムーズにするために作られました。 しかし、他のビジネスシーンやプライベートなコミュニケーションにもご利用いただけるはずです。
![AUN[あうん]｜登録不要の修正依頼・指示ツール](https://cdn-ak-scissors.b.st-hatena.com/image/square/80d7ef00157a95f1026eb6ba3e952aeffe00b3f2/height=288;version=1;width=512/https%3A%2F%2Faun.tools%2Finc%2Fimages%2Fogp-image.jpg)
React vs Hotwire ~ 私とHotwireとその後
半年くらい前にこんな記事を書きました。 様々なプロダクトにメインとして使用しているNext.js製のフロントエンドをStimulusとTurboに書き換えて運用してみました。 今回は実際に運用してみた所管などをまとめたいと思います。 はじめに とはいえ、Hotwireたちは飽くまでフロントエンドのみ。バックエンド側のロジックを持つことのできないこれらのライブラリとの単純な比較対象としては、サーバーレスでも運用できるNext.jsとは若干ズレが出てきます。 今回私はNode.js製のバックエンドサーバーの上にNext.jsが乗っかていたもののフロントエンドの部分を、従来型のpugのマークアップとHotwireに置換し運用しました。 ですので、今回はNext.jsではなくReactとの比較を行っていきます。 ここは一つご留意ください。 ちなみにVercelなどのPaasなどでHotwireを使
Rails 7 で React & TypeScript を導入する方法（tsx, esbuild, jsbundling-rails） - LEFログ：学習記録ノート
※この記事では「新しくRails 7 アプリを作成するときのこと」を想定していますが、Rails 6を7に上げるときにもそれなりに役立つ情報だと思います！ 結論 rails newのときにesbuildを指定してあげれば、あとはJavaScriptファイルや.jsxファイルを、.tsxにしてあげるだけでOK。 型チェックや構文チェックを導入するには少し注意が必要。 概要 現在、Rails 7を使ってフロントエンドを構築する方法には、大きく分けて３種類あります。 importmapsを使って、素のJavaScriptを使ってフロントエンドを作る esbuildを使って、JSXファイルを使ってフロントエンドを作る Rails 7をAPIモードにして、フロントエンドはNextjsで作る 自分はこの２番めの「esbuildを使ってフロントエンドを作る」を選択しました。理由は、Railsのslim上
今更調べてみる Ruby on Rails7 フロントエンド周りの選択肢(と個人的な採用方針) - Qiita
Ruby on Rails7ではWebpackerがデフォルトで無くなったらしい... え？マジ？じゃあJavaScriptのバンドルとかどうすんの？ Rails7に触れる機会がなかったのでこの辺りの疑問をながらく放置してきたが、いい加減調べることにした。 何番煎じだい？という内容だが、2023年初頭時点で見えているものとして、まとめることに意味があると信じたい。 前提 対象読者 Rails7のフロントエンド周りに関して、大きく変わったらしいということは知っていてもそれ以上詳しいことは知らない人。 この記事の目標 個人的に 採用する Rails7のフロントエンド周りの選択を固める まとめ importmap-rails Hotwire(turbo-rails + stimulus-rails) sprockets-rails tailwindcss-rails を個人的には採用していこうと
【Rails】WebアプリにPWAを導入してネイティブアプリっぽくしてみた！ - Qiita
PWAとは？ PWAとは、「Progressive Web Apps」の略称で、PCやスマホでWebアプリを表示する際に、ネイティブアプリのような動作を可能にする仕組みのことです！ PWAを導入するメリットとして OSによる制限がないこと プッシュ通知を送ることができること ホーム画面にアイコンを設置できること Webアプリ上でキャッシュを使用でき、ローカルのキャッシュに保存できるため、再びアプリを開いた際の読み込みのスピードが従来よりも速くなること などが挙げられます！ 実装 まずは、app/views/layouts/application.html.erbに以下のように2箇所追記します！ <!DOCTYPE html> <html> <head> <title>Example</title> <%= favicon_link_tag('favicon.ico') %> + <link
【DockerでReactの環境構築】エンジニア1年生と学ぶコンテナ構築までの手順 | 東京のWeb制作会社 株式会社クーシー
【DockerでReactの環境構築】エンジニア1年生と学ぶコンテナ構築までの手順 システム開発 プログラミング 今回は、Dockerを使用してReact（React.js）の環境を構築する手順を紹介します。 Dockerでの環境構築は慣れていない人にはやや複雑です。本記事では画像つきで、初心者でもできるようにわかりやすく解説します。 実際に環境構築を行いながら書きましたので、トラブルもありました。その時の対応についてもそのまま載せてありますので、あなたのケースでお役に立つかもしれません。 ではいってみましょう。 React.jsとは？ React.jsはReactと同じもので、「React」と書かれたり「React.js」と書かれたりします。 React.jsは、Facebookが開発したJavaScriptライブラリです。コンポーネントと呼ばれる小さな部品を組み合わせて大きなアプリケー
Stimulus 2.0 を試してみた
はじめに 2020/12/5 に Stimulus 2.0 がリリースされました 🎉 Stimulus 2.0 リリースノート 以前 Rails アプリで JavaScript を書くときに少しだけ使ったことがあり便利だったので、2.0 も試してみました。 前提 $ ruby -v ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [x86_64-darwin19] $ bin/rails -v Rails 6.1.1 今回はテキストエリアの文字数をカウントする処理を Stimulus で実装してみようと思います。 Rails Girls アプリ・チュートリアル でつくるアイデア投稿アプリをベースにして、アイデアの Description 項目に処理を入れていきます。 参考: How to use Stimulus JS 2.0's new Va
【Rails】kaminariの使い方をざっくりまとめてみた
1.この記事をなぜ書いたか kaminariの使い方を忘れてしまったので、復習の意味で記事を作成しました。 記事の中で間違いがある場合、コメント頂けると嬉しいです。 2.kaminariとはそもそも何か？ kaminariとはページネーションを簡単に実装するためのGemです。このGemをインストールすることによって、簡単にページネーションを実装することができます。ちなみに、ページネーションとは、長くなってしまったWebページを分割するものです。googleで適当に検索して検索結果ページの一番下に行くと、以下の画像のようなものがあります。これがページネーションです。 まとめると、kaminariをインストールして、kaminariが提供するスコープとメソッドを使えば、簡単にページネーションを実装できます。 3.kaminariを用いたページネーションの実装手順 以下に、掲示板サイトのページネ
Rails でシンプルな無限スクロール実装 - ボクココ
ども、@kimihom です。 久々に無限スクロールを実装する機会が 詠みラボで発生しました。そこで、振り返りがてら、こんな感じで実装するのが個人的に一番シンプルだったコードをご紹介します。 サーバー側実装 俳句(Haiku) をそれぞれ20句ごとに毎回取得し、スクロール下部についたら新しく20件を取得します。HTMLの生成は Rails サーバー側で実施し、それをフロントエンド側では単に HTML を追加するだけの処理になっています。 # Gemfile gem "kaminari" # config/routes.rb resources :haiku # app/models/haiku.rb class Haiku < ApplicationRecord paginates_per 20 end # app/controllers/haiku_controller.rb class
【Rails】kaminariのページネーションのデザインをviewごとに変更する
はじめに この記事の概要 こんにちは、株式会社TOKOSのたくまです！ 今回はviewごとにkaminari を使用したページネーションのデザインを変更する方法について紹介します! ページネーション実装時にkaminari を使用されている方も多いかと思います。 kaminari を使用することで簡単にページネーションを実装することは出来ますが、 例えば管理者側の画面とユーザー側の画面でデザインを変更したいと思うことはありませんか？ そんな時は、これから紹介する方法で簡単にデザインを変更することが出来ます！ 基本的なページネーションの使い方や実装方法については、以下のサイトが参考になると思います。 対象読者 kaminariを使用してページネーションを実装している方 ページネーションのデザインを変更したい方 ページネーションのデザインを変更する themeごとにディレクトリを作成する ka
ProseMirrorで作るちょっとだけリッチなテキストエディタ | 株式会社ヌーラボ(Nulab inc.)
はじめに Backlogは昨年（2021年）メンション機能を導入しました。本文中に他のユーザーの名前を書くと、相手に通知が送られるというものです。それにともないこのメンション機能が使える箇所で使うテキスト編集コンポーネント（以下、エディタ）を作り直しました。 編集中のテキストに含まれるメンションを、見た目的にもデータ的にも通常のテキストとは異なるものとして扱えるようにするためです。 Backlogの以前のエディタはtextarea要素で実装されていました。textarea要素はプレーンなテキストしか扱えず、テキストの一部を太字にするとか背景色をつけるといった機能はありません。 ブラウザ上でテキストエディタを実装する手段には、textareaのほかにcontenteditable属性をtrueにした要素を使う選択肢もあります。この場合はHTMLの表現力が使えるのでメンションの表示をいい感じに
Barcode Detection APIでブラウザ上からQRコードを読み取る
我々の生活にQRコードが浸透してから何年経ったでしょうか。QRコードの読み取り機能はOS標準で可能になり、もはや「QRコードアプリ」すら不要な時代になりました。 一方でブラウザにおけるQRコードの取り扱いは、全くサポートされていませんでした。今まではゼロから実装した有志のライブラリを使ってQRコードの読み取りを実装していました。 しかしBarcode Detection APIの実装で、そういったライブラリも不要になるかもしれません。 Shape Detection API 近年になって、ブラウザにShape Detection APIというAPIの策定・実装が始まっています。 Shape Detection APIは現在以下の2つのAPIから構成されています。 Barcode Detection API Face Detection API また、「親戚」として、OCRを実現するText
Shape Detection API + PWAでブラウザからそのまま使えるバーコードリーダーアプリを作ってみる - Qiita
ラクス Advent Calendar 2018 繋ぎの3番バッターです。 今回はChrome 70から実験的に使えるようになっているShape Detection APIについてまとめてみます。使ってみると意外と実用的だったのでPWA化してブラウザだけでスマホアプリ相当のことが実現できそうなことも検証してみました。 Shape Detection APIとは Webの新しい技術の普及を推進する団体の WICG が仕様策定を進めているJavaScriptのAPIです。 Accelerated Shape Detection in Images まだEditor's Draft（草案レベル）ですが以下の3つの事ができます。 Face Detection（顔検出） Barcode Detection（バーコードスキャン） Text Detection（テキスト認識） Shape Detecti
バーコード検出 API - Web API | MDN
バーコード検出 API (Barcode Detection API) は、線形および二次元のバーコードを画像内から検出します。 ウェブアプリケーションでバーコード認識に対応することで、対応しているバーコード形式を通じてさまざまな用途に利用できるようになります。 QR コードはオンライン決済、ウェブナビゲーション、ソーシャルメディア接続の確立に、アステカコードは搭乗券のスキャンに、ショッピングアプリは JAN、EAN、UPC バーコードを使用して物理的なアイテムの価格を比較するために使用することが可能です。 検出は detect() メソッドで行われ、これに画像オブジェクトを渡します。これは 要素、Blob、ImageData、CanvasImageSource (en-US) の何れかです。オプションの引数を BarcodeDetector コンストラクターに渡すことで、検出するバーコー
猫Rails
（自分はRailsを書くことが多く、フロントエンドの経験は乏しいです。見方にだいぶ偏りがあると思いますので、そのあたり差し引いてお読みいただければと思います〜🙇♂️） こんにちは〜。Hotwireを仕事で使う機会があったので、実際に使ってみて感じた、良かった点、辛かった点、向いているケース、向いていないケースを共有します〜。 Hotwireとは？ Turbo Driveとは？ Turbo Framesとは？ Turbo Streamsとは？ Stimulusとは？ Hotwireのデモ 良かった点 サーバーサイドに集中できる Railsの資産をフルに活かせる 後付けで段階的にSPA風の挙動を追加できる 学習コストが低い 開発コストが低い WebSocketは必須ではない 辛かった点・辛くなりそうな点 DOM更新時にレスポンスを待たないといけない SPAのユーザー体験とはだいぶ違う He
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ruby/ruby.wasm: ruby.wasm is a collection of WebAssembly ports of the CRuby.
form_withがlocal: trueなのにviewが再描画されずにはまった件 - Qiita
猫でもわかるHotwire入門 Turbo編
【Rails】kaminariのpageメソッドを用いて、配列のページャを作成する方法｜TechTechMedia
Shape Detection API で バーコードを読み取る