Quagga.js でバーコード読取してみた - Qiita
はじめに 自分は以前に Cordova を使って「蔵書台帳」アプリを作りました。このとき 書籍の ISBN のバーコードを読取するのに、Cordova のプラグインを使っていました。 改めて調べてみると、ブラウザ上の JavaScript コードで直接、カメラ画像からバーコードの読取できるんですね。 JavaScript でバーコード読取できるライブラリは幾つもありましたが、これがよさそうでした。 GitHub - serratus/quaggaJS: An advanced barcode-scanner written in JavaScript GitHub - ericblade/quagga2: An advanced barcode-scanner written in Javascript and TypeScript 紹介している記事も多く、幾つか試してみました。 Quag
Node.js, WebSocket 使った簡易チャットの作成 - Qiita
server.js (バックエンド) 作成 フォルダ分けてもOK、ここでは直下に作成していく やってることはざっくりと以下になる WebSocketサーバ作成 (これで双方向通信できる)して wss に設定 接続時の処理を設定 wss.on('connection', (ws) => {処理} (ws が接続したクライアント) 上の処理の中でクライアントとのやり取りを設定 ws.on('処理名', 処理), ws.send(値) など const WebSocket = require('ws'); const http = require('http'); const crypto = require('crypto'); // WebSocketのサーバ作成 const server = http.createServer(); const wss = new WebSocket.Se
フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」 - Qiita
フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」JavaScriptテストフロントエンド はじめに JavaScriptにおけるテストのベストプラクティスをまとめた「javascript-testing-best-practices」というGitHubレポジトリが大変勉強になったため、特に参考になった内容をまとめて共有したいと思います。 （補足）本レポジトリにはfrontendのみならずbackendのテストに関する情報もありますが、今回はfrontendに焦点を当てて共有します。そのため扱うSectionは以下の4つです。 Section 0: The Golden Rule Section 1: The Test Anatomy Section 3: Frontend Section 4: Measuring Test
実務経験ほぼゼロでTypeScriptやNext.jsを扱う開発案件にアサインされた人のための備忘録 - Qiita
はじめに 筆者は2022年8月に株式会社ニジボックスに入社し、翌月の9月に現在のプロジェクトにアサインされました。 入社時はフロントエンドの実務経験はほぼゼロで、HTML/CSSやJSの基礎的な文法・ルールをスクールや独学で勉強していた程度の新人エンジニアでした。 そんな私がいきなりTypeScriptでNext.jsをガリガリ書くようなプロジェクトにアサインされ、困ったことや技術的につまずいたところを備忘録としてまとめていきたいと思います。 （読者の方が私と同じ轍を踏まなくて済むように、先輩方からいただいた解決策や私なりの解説を載せておきます） 対象読者 フロントエンド初心者、実務経験があまりない人 これからNext.jsやTypeScriptなどを扱う業務もしくは学習を始める人 前提 フロントエンドの実務経験が少ない筆者が、あくまで同じような技術レベルの方に向けて書いた記事です。 この
毎週アプリをリリースして3ヶ月経ったので振り返る - Qiita
こんにちは、Yuiです。 実は5月後半から週イチ発信と称して、週一でアプリをリリースして日本語と英語両方で記事を書くという挑戦をしておりました。 まだもう少し続ける予定ですが、一旦は3ヶ月完走したということでこのチャレンジ期間中に開発したアプリやできるようになったことを紹介していこうと思います。 参考になったと思えばLGTM してもらえれば大変励みになります。 1週目: TensorFlowを使って画像にマスクをかけるアプリを作った TensorFlow.jsを使った初めての開発でした。 最初face-api.jsで動かそうとしてたんですが、なんでかモデルの読み込みができなくて（最終的にはできるようになった）TensorFlow.jsでやりました。 ただ、TensorFlow.jsを使うことにしたのは良いものの、React+TypeScriptで動かしてる例があまりなくて、最初はまあまあハ
苦しんで覚えるDraft.js -リッチテキストエディタをシュッと作る- - Qiita
株式会社LITALICOでWebエンジニア（Rails）を担当しています、@YudaiTsukamotoです。 この記事は『LITALICO Advent Calendar 2017』1日目の記事です。 記念すべき1記事目は、Facebook謹製のリッチテキストエディタフレームワークのDraft.jsについて書こうと思います。 はじめに 弊社では、conobie, LITALICO(りたりこ)発達ナビ, U2Plusを始めとするメディアを中心としたWebサービスを複数運営しております。様々な歴史的な経緯で、記事編集画面をスクラッチで実装しているのですが、以下のような辛さを抱えています。 記事UIパーツの修正・追加をする事が結構しんどい 書いた見た目と表示される見た目が異なるので、いちいちプレビューを見ないといけない Undo/Redoなどの履歴管理が辛い コンテンツの順序を変更することが辛
【Javascript】リアルタイムプレビュー付き簡易htmlエディタ - Qiita
必要最低限の機能しか実装してないけどちょっと工夫すれば そこそこ実用的なものが作れるかと思います。そして楽！ クリックでデモページのzipファイルダウンロード Win,MacのChromeでのみ動作確認済みです 10/17 リンク間違ってました…ごめんなさい ソースコード <html> <head> <title>qiita_js003</title> <meta charset="utf-8"> <meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=2.0"> <style type="text/css"> *{ font-family: Meiryo; text-align: center; margin: 0; padding: 0; } #liveeditor{ margin: 10px
GitHubでスターが多いWYSIWYGエディタ（2019年11月） - Qiita
はじめに 2019/11時点でGitHubにあるWYSIWYGタグでスターが多いライブラリを調べてみます。 Quill 概要 GitHub https://github.com/quilljs/quill Demo https://quilljs.com/ ・テーブルの作成はできないようです(ver2.x用にテーブル追加のプラグインはある） ・クリップボードを経由して画像のアップロードが可能です。 ・highlight.jsを使用してコードブロックのハイライトが可能のようです 対象ブラウザ IEは非推奨のようです。 ライセンス BSD 3-clause サンプル 1.3.7のサンプル <!doctype html> <html> <head> <meta charset="utf-8"> <title>Test Quill</title> <!-- highlight.js を使う場合はq
管理画面を作る：AdminLTE 基本編 - Qiita
管理画面を作るのは大変なので、なるべく手間を省きたい。Bootstrapでもいいが、意外としょぼくなるのと、何よりメニュ周りの制御が今ひとつな感じがする。そこで、管理画面作成に特化したCSSフレームワークを使ってみる。 いくつか選択肢はあるが、ここではAdminLTEを利用してみる。 bootstrapベースとはなっているが、いろいろと独自の癖があり、「bootstrapだと動くのに・・・」みたいなことがままある。 最初に注意 まじめに、TOPメニューから作って見たが、Dropdown等、基本的な機能がうまく動作しないことがあった。どうやら、他の要素に依存しているので、header(class="main-header")だけでなく、サイドバー(class="main-sidebar")や、コンテンツ(class="content-wrapper")、フッター(class="main-fo
10分でわかるブラウザ処理自動化！初心者向けSelenium IDE入門ガイド (2019/08版 : Selenium IDE v3.12.0) - Qiita
※ 宿泊日に設定している日付は本記事を書いた(2019/08/14)時点でのものです。 デモサイトの仕様に軽く触れておきます。 当日は予約できない仕様になっているため、お試しの際には翌日以降の日付を指定してください。 宿泊料金は、平日7,000円(土日は25%増)で宿泊朝食バイキングは宿泊日数x1,000円、プランのオプションはそれぞれ1,000円です。 手動で上記ステップの通りに入力していきます。 全ての入力が終われば、「利用規約に同意して次へ」をクリックします。 すると、予約内容確認画面に遷移します。 最後に、予約確認画面への画面遷移と合計金額を確認するステップを加えます。 以下のように、検証対象を選択して、右クリック ->「Selenium IDE」-> 「Verify Title」(「Verify Text」)を選択するだけでそれを確認するテストが追加されます。 【タイトル(予約確
Xamarin を使用したアプリ開発での、問題解決の方法 - Qiita
Xamarin はクロスプラットフォームアプリ開発ツールで、しかも「ネイティブAPI をラップするだけ」のタイプなので、トラブルの解決方法は、ネイティブアプリ開発の情報やノウハウの中にある場合が多いです。 私が Xamarin.Forms でアプリ開発をしていて、書いたコードが期待通り動作しない場合、以下のような手順で問題解決を試みていますよーというのを紹介します（環境面のトラブルではなく書いたコードの問題についてです）。 ひとつ最初に言いたいのは、問題が発生したときにまず行うことは、 問題が発生する最小の環境を作り出す ことです。修正のためにコードを書き換えたり、人に聞いたりするのはその後です。これは Xamarin に限らず、いやプログラミングに限らず、問題解決する際にはいつも心がけている事です。 1. それはネイティブ（Java-Android や Swift-iOS）でも起こり得る
[サーバレス] Googleスプレッドシートでスクレイピング - Qiita
スクレイピングがやりたかったんだけど、サーバの管理がめんどくさくなったので、Googleスプレッドシートの上でスクレイピングを出来るようにした。 やりたいこと 献血で、400mlAB型の血液が不足してます、A型は今大丈夫です、みたいな情報が、献血センターのwebサイトに掲載されるようになった。 たとえば 宮城県赤十字血液センターの今週の献血状況。AB型の人は成分献血にするか、次の機会にしたほうが良いらしい。 これ以外の県も、各県の献血センターに掲載されている こういう情報をオープンにしてくれたのはとてもうれしいことなんだけど、webページに掲載されたって、ぼくらがわざわざ見に行かない限り気が付かない。できればこう、SNSで「今週の献血状況」みたいなことを発表してくれるといいよね。そしたら、「あ、AB型足りない？今週は余裕があるからじゃあぼく行くね」みたいなことが出来ていいと思うのよ。 ない
![[サーバレス] Googleスプレッドシートでスクレイピング - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/887726243bc177ea271bd5e4156739bf5152ac79/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkwJUUzJTgzJUFDJUUzJTgyJUI5JTVEJTIwR29vZ2xlJUUzJTgyJUI5JUUzJTgzJTk3JUUzJTgzJUFDJUUzJTgzJTgzJUUzJTgzJTg5JUUzJTgyJUI3JUUzJTgzJUJDJUUzJTgzJTg4JUUzJTgxJUE3JUUzJTgyJUI5JUUzJTgyJUFGJUUzJTgzJUFDJUUzJTgyJUE0JUUzJTgzJTk0JUUzJTgzJUIzJUUzJTgyJUIwJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1jMDMxYmRhZGMzYzgxODQ4YzQ4OWVjOTIzYTk5NjgzNg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtb2d5YSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9Y2Y1YTI5ZDlmNGVjNjYwMWRkYjAyNjZiM2UyMTMyMDg%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g6YGL5Za26ICF44Ku44Or44OJ%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D6702fb6f54a8fa3741edd3899a82a324)
Webアプリ無料運営のススメ：FirebaseとNuxt(Vue)なら最強！ - Qiita
まだサーバーで消耗してるの？Firebase（サーバーレス）とNuxt.js（Vue系）ならWebアプリ運営は最強でしょ！？ この記事は、 サーバー費用をなるべくかけたくないけどショボいのはNO Firebaseの活用法をあまり理解していない Nuxt/Vueを使ってアプリ作ってみたい（Next/Reactと悩んでたり） アプリ構想はあるけどアイデアの落とし込みスピードが遅くて毎回挫折する という人向けに、「こんな感じで構築すれば効率良く開発できそうよ」というのを、勉強になった記事や技術的トピック・躓いた点なども合わせて紹介させていただきます。初心者向け＆技術トピック気になる方向けです！ 今回作ったアプリ「Moji → Pic」 Moji → Picは、文字だけだとなかなか目につく投稿ができないなぁ…とお困りの時にインパクトある画像が即座に出来るアプリ。目立ったツイートで友達に差をつけろ！
ApacheとNode.jsの共存 - Qiita
ApacheとNode.jsを共存させる方法。 さくらVPSでApacheで立てたサーバの他にNodeで立てたサーバが必要になったので、その作業のメモ。 ApacheやNode.jsは既にインストールされているものとする。 構成は以下の通り。 node-http-proxy (Port 80) │ ├─Apache (Port 8080) example.com, apache.example.com │ └─Node.js (Port 8081) node.example.com 使用した環境 CentOS 6.5 node v0.10.29 npm 1.3.6 apache 2.2.15 1. rootユーザ以外にもポート80番の実行権を与える 80番はrootでないと使用できないため、任意のユーザ(ここではhogeとする)に実行権を与える。 任意のユーザの追加とグループをwheelに
【React Native入門】Java Scriptでアプリ作ろう【Reactやったことない人向け】１ - Qiita
その２【React Native入門】Java Scriptでアプリ作ろう【Reactやったことない人向け】2 はじめに 後輩がReact Nativeの入門記事ないかって調べてたら僕の記事を見つけたらしい・・・。 ということで調べてみると僕がReact Nativeはじめたての頃の記事が出てきた！ 僕がちゃんとこの業界に入りだしたのもこのぐらいで、このころはQiitaすらやってなくてQiitaの発音もわからないほどだった。なのでQiitaというよくわかんないけど検索すると出てくるいろいろと記事の書いてあるサイトという認識でしかなかったと思われる。ゆえにサクラドメインでブログを作ったのだと思う。このころはgitの使い方すらわからなかった・・・・。 せっかくなのでこのサイトに書いてあることを掘り起こしつつ最近の書き方を踏襲しつつ、当時の僕でもわかるようにTodoアプリぐらいは作れるようになる
Node.js+Express+socket.ioでリアルタイムチャットを作ってWeb Appsに無料ホスティングする（yarnも試してみた） - Qiita
Node.js+Express+socket.ioでリアルタイムチャットを作ってWeb Appsに無料ホスティングする（yarnも試してみた）Node.jsSocket.ioAzureExpressWebApps Node.jsのフレームワークといえばExpressが有名です。そしてSocket.io+Node.jsという組み合わせもやはり有名です。これらを使ってチャットを作ってみます。 僕が運営しているdotstudioの裏側ではAzure Web Appsを使っていますが、今回のチャットも同様にWeb Appsでホスティングしてみます。 筆者の環境 macOS Sierra 10.12 Node.js v7.0.0 (出たばかりですね) yarn v0.16.1 Express 4.14.0 socket.io 1.5.1 npmでもいいですが、それだと前の記事と全く同じになりそうなの
Node.jsでSocket.ioを使わずにWebSocket - Qiita
ちょっとWebSocketを使う話があったので試してみます。 考えてみるとNode.jsでリアルタイム通信をする時はSocket.ioかMilkcocoaを使ってました。 調べるとそこまでサンプルっぽいサンプルが見当たらないのでメモしてみます。 websocket-node npmなどで調べるとこのパッケージがメジャーっぽいですね。 https://github.com/theturtle32/WebSocket-Node #!/usr/bin/env node var WebSocketServer = require('websocket').server; var http = require('http'); var server = http.createServer(function(request, response) { console.log((new Date()) +
Node.jsとWebSocketでゲームアプリを作ってみた - Qiita
はじめに 双方向通信を学ぶ為にNode.js+WebSocketでトランプのスピードゲームアプリを作成してみたので、ポイントとなる点をまとめてみました。 アーキテクチャ解説 通常クライアントサイドで動くJavaScriptをサーバーサイドで稼働させるためのJavaScript環境。 メモリ使用量が小さく、ノンブロッキングI/Oによる非同期処理で大量のアクセスを捌く処理に向いている。 また、Socket.ioというwebsocketのライブラリが用意されているので手軽に双方向通信の実装が行える。 Http通信と異なり、サーバ⇒クライアントへのプッシュ通信も可能とする通信プロトコル。 今回はサーバーサイドをNode.jsで作るのでNode.jsのライブラリであるsocket.ioを使用して実現します。 詳しくはこちらの記事に纏めています。 アプリ概要 作るアプリは、トランプのスピードゲーム。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
表をドラッグ & ドロップで並び替えたい - Qiita
今日から始めるDocker【Dockerfileを書いてみよう編】 - Qiita
