QuaggaJSを使用したブラウザでの二次元バーコードスキャン
QuaggaJSとは JavaScriptで書かれたバーコードスキャナ。 EAN, CODE 128, CODE 39, EAN 8, UPC-A, UPC-C, I2of5, 2of5, CODE 93, CODABARといった様々なタイプのバーコードのリアルタイムローカライズとデコードをサポートしています。 一般的な日本の商品に付いているバーコードはEANおよびEAN 8を使用しています。 QuaggaJSのインストール npmでインストールする場合は以下の通り。 npm i -D quagga あるいは以下のURLのJavaScriptを利用する。 https://serratus.github.io/quaggaJS/examples/js/quagga.min.js インストールしたらconsole.log(Quagga)が表示されるか確認してみてください。 QuaggaJSの使
QuaggaJS+αでかんたんバーコードリーダ&メーカ
プロジェクトを用意する 次の様にプロジェクトを作ります。 MyProject01/ ├ index.html (プログラムを起動するファイルです) ├ custom.css (CSSを記述するファイルです) ├ main.js (メインのプログラムを記述するファイルです) HTMLファイルを用意する では、作っていきましょう。 用意したHTMLファイルには次のコードを記述します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="./images/favicon.ico"> <title>QuaggaJS</tit
フォームの値をリアルタイムに取得して、検索結果を表示する実装した際にハマったポイント | Blog | 株式会社マイロプス | mylops inc. | デザインで照らす、テクノロジーで結ぶ。
こんにちは。エンジニアのmasuzakaです。 とある案件でJavaScriptでフォームの値をリアルタイムに取得し、その値を用いて検索結果を表示する機能を作成しました。 その際にハマったポイントを共有します。 アウトプット 今回実装したのは、下記のような検索ボックスに文字を入力するたびに、部分一致するワードを絞り込んで検索結果を表示するという機能です。(ここでは説明のためにHarry Potter APIを使用して、同じようにレスポンスの結果を絞り込みするサンプルを作成してします。) See the Pen ブログ用 by 増坂航 (@fsrrytdx-the-sans) on CodePen. このような流れで処理をしています。 1.ユーザーが検索ボックスに文字を入力 ↓ 2.addEventListenerのinputイベントが発火し処理がスタート ↓ 3.検索対象のデータ情報が記載
【jQuery・JavaScript】複数ファイルの同時ダウンロード機能を実装
2021/08/29 （最終更新日：2022/02/18） 【jQuery・JavaScript】複数ファイルの同時ダウンロード機能を実装 Web制作・ﾌﾟﾛｸﾞﾗﾐﾝｸﾞ こういった疑問に答えます。 本記事の内容 ダウンロード機能の実装方法【aタグのみで簡単実装】 複数ファイルの同時ダウンロード機能の実装方法【jQuery】 この記事を書いている僕は、 Webマーケ会社で働く傍ら、 複業でエンジニアとして Web制作も行っています。 そんな僕が、最近実装した 『複数ファイルの同時DL機能』 を備忘録として残そうと思い、 今回この記事を書きました。 本記事を読めば、今後もしあなたが この機能を実装することがあっても怖いもの無しです。 ダウンロード機能の実装方法【aタグのみで簡単実装】 まずは基礎として、 JavaScriptを使わず aタグのみで実装する方法 をご紹介します。 といっても
Three.jsの記法まとめ
はじめに この記事は、Three.jsを用いた3Dオブジェクトを作成する方法やシェーダーの記法の整理を目的としています。 解説を目的とした記事ではないので、ご覧される際はあくまでメモ程度と捉えて頂けますと幸いです。 尚、全てのコードはnpmでthreejsモジュールをインストールしている前提で記載しています。 Three.jsを用いた3Dオブジェクトの生成 テンプレート(コメントあり) //モジュールの読み込み(パスは環境によって調整) import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; import GUI from "lil-gui"; /* //canvasを定義 */ const canvas = document.
Babylon.js を一から学習して自分の部屋の中を作る
今回はBabylon.jsについてお話しします。 Babylon.jsを知ったきっかけ、Babylon.jsとは、どうやって学習したのか、自分の成果物の順にお話ししていきます。 Babylon.jsを知ったきっかけ Babylon.jsを知ったきっかけは、connpassで見つけた以下のイベントです。 元々WebGLに興味があるのでそのイベントに参加して、登壇者のLT発表を試聴したり、 実際にBabylon.jsを触ってみてすごく面白いと実感してこの日から学習し始めました。 Babylon.jsとは Babylon.jsはMicrosoft社が開発したJavaScriptのWebGLのライブラリです。 有名なThreeJSと同じWebGLですね。 Babylon.jsはWeb上３Dゲーム開発で主に利用されているようです。 Babylon.jsメリットデメリット BabylonJSのメリット
簡単な Three.js のサンプルを試そう - ICS MEDIA
Three.jsはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。Three.jsを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。 ライブラリのセットアップから3D画面への表示および直方体の回転までを紹介します。手順通りに進めば、20分くらいで作業が完了できると思います。 サンプルを再生する サンプルのソースコードを確認する まずはHTMLファイルを用意して、次のコードを貼り付けて試してください。 <html> <head> <meta charset="utf-8" /> <script type="importmap"> { "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.175.0/build/three.module.js" } } </script> <script t
ドラッグ&ドロップでファイルアップロードする | バシャログ。
こんにちは山崎です。久しぶりの投稿になります。 今回はJavascriptでドラッグアンドドロップでのファイルアップロードを実装しようと思います。 完成形・仕様 このような画面になります。ファイルはドラッグ＆ドロップもしくは、ファイル選択フィールドからアップロードし、下にアップロードされた画像を表示する形です。 Ajaxなどを使ってアップロードされた時点でサーバーに保存するのではなく、送信ボタンが押された時点でサーバーに画像がアップロードされる仕様です。 今回はスタイルを最低限しか当ててないため質素ですが、こういったUIはCMSの管理画面などでよく見ると思います。 実装 まずHTMLを作っていきます。今回は最低限のスタイルで済ませるので、インラインでスタイルを書いています。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ドラッグ
jQueryでDropイベントを受け取る方法 - Qiita
きっかけ ブラウザからサーバーにファイルをアップロードする際、アップロードするファイルをPCのファイラーからブラウザへドラッグ・アンド・ドロップすることで行えるようにしようとしたら、何故かそのイベントハンドラの引数がDragEventになっていなかった。その原因と、対策について 状況 コードは下記 https://jsfiddle.net/kkotaro0111/8dsv37xu/5/ //with jQuery 2.x $(function(){ var $f = $("#fileinput"); var $d = $("#dragarea"); var $c = $("#clickarea"); $f.on("change", function(){ handleFiles(this.files); }); $c.on("click", function(e){ if( $f.leng
【Laravel】非同期処理をJavaScriptのFetch APIで実装する - Qiita
Fetch APIによる非同期処理とは？ Fetch APIはブラウザに搭載された非同期処理をするための関数です。 fetch関数を用いることで、ブラウザのページを全て更新することなく 一部分だけを更新する非同期処理が実行できます 非同期処理のFetch関数の使い方 LaravelではModel View Controllerの3つに分けてコードを管理するため fetchメソッドもMVCの流れに沿う必要があります fetch関数は第一引数に指定したURLにhttp通信（リクエスト）を送信することで Laravelのルーティングを経由しコントローラに記述したアクションを実行します コントローラ側でデータベースの操作および情報を取得した処理を実行した後、 fetch関数に対して実行結果（レスポンス）を返します。 JavaScriptにはブラウザのHTMLを書き換えたり追記したりする機能があるた
Laravel × JavaScript（Fetch） × MySQL を利用した非同期通信（第２回：一覧表示） - Laravel学習帳
前回はLaravel × JavaScript（Fetch） × MySQL を利用した非同期通信のイントロについてエントリーしました。 Laravel × JavaScript（Fetch）× MySQL を利用した非同期通信（第１回：イントロ） 今回はその第２回になります。 非同期通信で DB にあるレコードを全件表示させるスクリプトをエントリーします。 デモ画面 デモサイト（Laravel × JavaScript(Fetch) × MySQL の非同期通信） 【 ベーシック認証 】laraweb : laraweb ↓クリックするとアニメーション Gif で確認できます。↓ 手順 考え方 index のページにアクセスしたら JavaScript の fetch() メソッドを使って DB の全件レコードの取得する URL に通信します。 通信の結果、問題がなければ全件のレコードを
JSDocの書き方・出力メモ - Qiita
最近はJavaScriptを書くことが多く、「仕様書出せ！」と言われるのでJSDocでの記述・出力メモ。 やりたいこと ./srcフォルダに機能別に保存され、module.exportsされる関数の仕様を記述・出力する セットアップ めんどくさいのでグローバルにインストールします。
【Laravel】保存処理時にフラッシュメッセージを表示【汎用的】 - エンジニ屋.com(エンジニヤドットコム)
登録処理の際、下記イメージGIFのようにフラッシュメッセージを表示する方法を紹介します。 イメージ フラッシュメッセージ イメージは登録処理が成功した時のフラッシュメッセージです。 登録処理が失敗した時に「登録が失敗しました」というフラッシュメッセージも表示するように実装します。 通信の問題であったり、予期せぬことで登録出来ていないことに気づかなかった！なんてことにならないように、 コンテンツ管理システムなどでほとんどのケースで取り入れています。 ※フラッシュメッセージの実装に必要部分を抜粋したソースのみ記述するので、イメージのような新着機能の紹介しておりません。 では実装していきます!! Controllerの記述 先ずはコントローラの記述です。 bladeのform部分の記述は省略致します。 app\Http\Controllers\Admin\NewsController.php p
TailwindCSS + Alpine.js でモーダルダイアログを作ろう
最近知ったのですが、 TailwindCSS と Alpine.js の組み合わせがなかなか使いやすかったので紹介します。 ソースコードhttps://codesandbox.io/s/fancy-bush-22qyf?file=/index.html 作った手順は次の通りです。 1. TailwindCSS をCDNから読み込む。 headタグ内に次のlinkタグを追加します。 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" /> 参考： https://tailwindcss.com/docs/installation#using-tailwind-via-cdn 2. Alpine.js をCDNから読み込む。 headタグ内に次のstyleタグを追加します。 <
【Tailwind CSS】@applyでスタイルをまとめてみる - devlog [開発部門ブログ]
はじめに この記事はこういう方にオススメ Tailwind CSSでスタイリングしていて大量のクラスの羅列に「ウッ！」となったことのある方 はじめに Tailwind CSS、便利ですね。初めて目にしたときには多大なカルチャーショックを受けたものですが、HTMLから離れずにスタイリングができる点、CSSファイルが荒れない点はとても便利だなあと感じます。 独特のクラス名も覚えてきてサクサクスタイリングができるようになってきたなぁ……という今日この頃なのですが、同じクラスのツブツブ達を色んな画面にペタペタとコピペしていて思いました。 <button class="rounded-full bg-gradient-to-tr from-orange-300 to-red-600 px-6 py-2 text-base font-bold text-white drop-shadow-lg hov
![【Tailwind CSS】@applyでスタイルをまとめてみる - devlog [開発部門ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/eb86b7f6c4a7d343c22fcbdd604958fd3b08e73b/height=288;version=1;width=512/https%3A%2F%2Fdevlog.neton.co.jp%2Fwp-content%2Fuploads%2F2022%2F11%2FTailwind-CSS-1.png)
Promiseで簡単！JavaScript非同期処理入門【前編】
ECMAScript 2015（ECMAScript 6）で新たに追加されたPromiseについて、その概要を全2回に渡って紹介します。 ひとつずつ処理されるJavaScript まず、Promiseについて解説する前に、基礎的なことではありますが、JavaScriptのコードがどのようにJavaScriptエンジンに処理されるかについて、軽く解説しておきましょう。例えば以下の様なコードがあったとします。 var result1 = 1 + 2; // 3 var result2 = result1 + 100; // 103 /* functionらを準備 */ var doSomething1 = function() { document.getElementById('price').value = result2; }; var doSomething2 = function()
【新刊紹介】『速習 React 第2版』発売、最新のReact 18やReact Hooksに対応
本書は、Reactの基本について、10のPartに分けてサンプルコードとともに詳しく解説しています。Create React Apps環境をベースに、コンポーネントの基本から、Props／Stateによるデータの受け渡し、React RouterによるSPA開発、React Testing Libraryによる自動テストまでを学べます。 本書掲載のサンプルは、サポートページからダウンロード可能です。どんどん動かして試してみてください。 担当編集者からのコメント 「「速習」シリーズ」は、WINGSプロジェクトが進めるAmazon Kindle電子書籍のシリーズ。気になる技術をサクッと短時間で学ぶ、「時間もお金も低コストに」をコンセプトとしています。 おかげさまで、隙間時間に基本を学習するのにちょうど良い、といずれもご好評いただいており、今回はシリーズとして21冊目になります。 その本書「速習
JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
射影変換 (Homography) - jsdo.it - Share JavaScript, HTML5 and CSS
var IMG_URL = 'http://jsrun.it/assets/4/W/u/U/4WuUH.png', SPACE = 10, SRC_WIDTH = 295, SRC_HEIGHT = 295, DST_WIDTH = 465 - SRC_WIDTH - SPACE * 3, DST_HEIGHT = 465 - SRC_HEIGHT - SPACE * 3; var img, canvas, context, points, srcImageData, draggingPoint = null; window.addEventListener('DOMContentLoaded', function() { canvas = document.getElementById('c'); context = canvas.getContext('2d'); srcBounds
Reactの単純なサンプルでFluxの実装を解説
先日『Flux – Dispatcher【日本語訳】と実装のポイント』という記事を投稿しました。Fluxの理解を深めるために、その実装の核となるDispatcherを理解することが大事だと思ったからです。おかげで、ある程度Fluxの理解進みました。今回さらにFluxを実装することで、理解を深めたいと思い、簡単なサンプルを作ってみることにしました。このサンプルを通して、Fluxの実装方法について説明していきたいと思います。だいぶ長くなりましたが、ぜひ参考にしていただければと思います。 Fluxの実装サンプルまずはサンプルを見てください。フォームに入力したテキストを表示させるだけのものとなっています。とても単純ですが、Fluxを使って実装しています。 Flux実装サンプルコード – GitHubFlux実装の説明の前にFluxとは FluxFluxは「クライアントサイドのWebアプリケーション
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
