GitHub - mebjas/html5-qrcode: A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.orgYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Hotwireの良かった点、辛かった点、向いているケース、向いていないケース - 猫Rails
（自分はRailsを書くことが多く、フロントエンドの経験は乏しいです。見方にだいぶ偏りがあると思いますので、そのあたり差し引いてお読みいただければと思います〜🙇♂️） こんにちは〜。Hotwireを仕事で使う機会があったので、実際に使ってみて感じた、良かった点、辛かった点、向いているケース、向いていないケースを共有します〜。 Hotwireとは？ Turbo Driveとは？ Turbo Framesとは？ Turbo Streamsとは？ Stimulusとは？ Hotwireのデモ 良かった点 サーバーサイドに集中できる Railsの資産をフルに活かせる 後付けで段階的にSPA風の挙動を追加できる 学習コストが低い 開発コストが低い WebSocketは必須ではない 辛かった点・辛くなりそうな点 DOM更新時にレスポンスを待たないといけない SPAのユーザー体験とはだいぶ違う He
WebSocket
WebSocket プロトコルは仕様 RFC 6455 で説明されており、これは永続的な接続を介してブラウザとサーバ間でデータを交換する方法を提供します。接続の切断や追加のHTTPリクエストをすることなく、データを “パケット” として双方向に渡すことができます。 WebSocket は継続的にデータ交換を必要とするようなサービスに特に適しています。例えば、オンラインゲームやリアルタイムの取引システムなどです。 簡単な例websocket の接続を開くには、url の特別なプロトコル ws を使用した new WebSocket を作る必要があります:
React vs Hotwire ~ 私とHotwireとその後
半年くらい前にこんな記事を書きました。 様々なプロダクトにメインとして使用しているNext.js製のフロントエンドをStimulusとTurboに書き換えて運用してみました。 今回は実際に運用してみた所管などをまとめたいと思います。 はじめに とはいえ、Hotwireたちは飽くまでフロントエンドのみ。バックエンド側のロジックを持つことのできないこれらのライブラリとの単純な比較対象としては、サーバーレスでも運用できるNext.jsとは若干ズレが出てきます。 今回私はNode.js製のバックエンドサーバーの上にNext.jsが乗っかていたもののフロントエンドの部分を、従来型のpugのマークアップとHotwireに置換し運用しました。 ですので、今回はNext.jsではなくReactとの比較を行っていきます。 ここは一つご留意ください。 ちなみにVercelなどのPaasなどでHotwireを使
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
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 の何れかです。オプションの引数を BarcodeDetector コンストラクターに渡すことで、検出するバーコード形式のヒントを
RxJS入門 | 第1回 RxJSとは
RxJS入門 第1回 RxJSとは RxJSは、リアクティブプログラミングという考え方のもとに構築されているライブラリです。「いつ起こるかわからない処理」の扱いを、一貫性を持って書くことができます。 まずはコード例で、その感触をつかんでみてください。 はじめに 今シリーズではRxJSを紹介します。RxJSとは、端的にいうとJavaScriptでのイベントのハンドリングや非同期処理をラップし、扱いやすくするためのライブラリです。 このライブラリは、もともと2009年にマイクロソフト社によってC#用に開発されたRx.NETというライブラリのJavaScript向けの移植で、他にもRxの名を冠するライブラリがさまざまな言語向けに移植されています。そのため、RxJSを学ぶと他の言語向けのRx利用者とも同じ土俵で会話ができるという、おもしろい背景を持っています。 いつ起こるかわからない処理 Java
summernoteで動画ファイルをアップロードする - Qiita
はじめに summernoteの画像オプションにはファイルをアップロードして挿入する方法とURLから挿入する方法の2種類がありますが、動画についてはURLから挿入する方法しかありません。 ファイルをアップロードするプラグインはいくつかありますが、ファイルをアップロードしてエディタ内に動画を埋め込みたいという要望にうまくマッチするものがありません。 summernoteのコアファイルは弄りたくないので、画像オプションを参考にしつつ既存の動画オプションを拡張する形で動画ファイルのアップロードができるプラグインを作る事にしました。 ここではプラグイン作成手順の簡単な説明と、プラグインの利用方法について備忘録として残したいと思います。 なお、作成したプラグインのソースはGitHubに上げています。 summernote-video-upload プラグイン作成 プラグインの作成は基本的に公式サイト
JSフレームワーク事情2020年始め｜erukiti
この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。 まず結論から日本ではVueはReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。 シェアだけで見るとAngularとAngularJS（Angular系の1.x系）の合計値はVueよりも高いですが、「今後はもう採用したくない」と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは
「え？それそんなかかるの？」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
多！ そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度：★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ！うちもこんなんやりたい！と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法（CSSのtransformとJSを組み合わせるなど）で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - nodesource/distributions: NodeSource Node.js Binary Distributions
Shape Detection API で バーコードを読み取る
RxJS
Formタグを作らずにJavascriptのみで通常のPOST送信をするための関数です。便利なのでgitsコード化して、どこでも使えるようにしておく。