[HTML5] QRコードリーダーを作成する

今回はHTML5の機能を利用した「QRコードリーダー」を作成します。
以前作ったJavaScriptによるカメラを操作するコードに、QRコードを読み取ってくれる便利ライブラリをくっつけただけのお手軽版。

PCやスマホに付いているカメラの映像を0.3秒毎にチェックし、QRコードが見つかったらQRに埋め込まれている情報を表示してくれます。見つかったQRコードの場所も簡単にマーキングする機能も付けてみました。

続きを読む

[HTML5] カメラをJSで操作し写真を撮影する

HTML5ではPCやスマホのデバイスの機能をJavaScriptから直接利用することができるようになりました。今回はカメラを操作し、デジカメのような要領で静止画を撮影する簡単なサンプルを作ってみたいと思います。

カメラの映像が向かって左側に写り続け、良いタイミングで下にある「シャッター」ボタンをクリックすると、右側に撮影した静止画が表示されます。ボタンをクリックするとシャッター音も再生されます。
続きを読む

[Node.js] おみくじQRコードを作成する

前回はアニメーションするQRコードを作成しましたが、今回はその応用です。時間とともにQRコードの情報が変化する「おみくじ」を作ってみたいと思います。

雑にいうと「ルーレット」ですね。すごい勢いでQRコードの内容が切り替わっていく中、その一瞬をQRコードリーダー読み取ることで、利用者から見るとランダムな結果が得られるというヤツです。

続きを読む

[Node.js] デザインQRコードをアニメーションさせる

前回はQRコードの中央にちょっとした画像を貼り付ける「デザインQR」を作成しましたが、今回はその画像をアニメーションさせてみたいと思います。

続きを読む

[Node.js] デザインQRコードを作成する

今回はQRコードの真ん中あたりに画像を埋め込む「デザインQR」をNodeで作成してみます。

通常のQRでも機能自体に問題ありませんが、以下のような欲求が出てきます。

  • どんなデータが埋め込まれているか想像しづらい、
  • デザイン的に無粋(無機質)

今回はこれらを解消しようというお話です。

続きを読む

microSDカードが本物かmacOSで検証する

GWのロングツーリングに向けて色々準備しています。アクションカムでずっと撮影しながら旅をしようと思っているのですがネックになるのはSDカード。結構なファイル容量になるのでポータブルSSDを持ち歩いて定期的にコピーすることも考えましたが、正直面倒なので大量のmicroSDカードを持っていくことにしました。

microSDを大量購入するのは良いのですが、昨今よく耳にする偽物のSDカードが紛れている問題をどうクリアするか。特にAmazonで頻発しているようですが例えば容量の半分も記録できなかった、仮に本物だったとしても不良品だったなんてことももあります。旅先で初めて気がついた日には精神的に落ち着かないですし、家電量販店を探して買いに向かうリカバリーに時間を使うのももったいない。というかそもそも田舎だと売ってないw 何よりも帰宅したあとに記録できていなかったことに気がついたときの喪失感と言ったらもうねw

そんなわけで今回はSDカードの全領域に書き込み/読み込みを行い、正常に動作するか確認したいと思います。

続きを読む

[バイク] 1年点検とタイヤ交換 #Ninja250SL

最初お願いしようとしていたお店とタイミングが合わなかったので、今回は近所にある2りんかんで実施しました。繁盛しているバイク屋さんだと10日〜2週間程度預けることになりますすが、2りんかんは平日朝に預ければ(故障等がなければ)夜には仕上がるので日帰りコースでいけます。

以前、量販店でタイヤ交換したら走行中にブレーキキャリパーが外れたモトブロガーさんの動画を見ていたので、正直不安でしたが結果やいかにw

NEOさんの動画は味があって好きですw

続きを読む

[PHP] 7.1から7.3へアップグレードする

AmazonLinux上でPHP7.1を利用していたのですが、今年の12月でセキュリティアップデートの提供が終了するため、サポート期間が2021年12月までのPHP7.3へアップグレードしました。

パフォーマンスも20%程度アップするみたいですね。こちらも目的だったりもしますw

続きを読む

[バイク] ウィンドスクリーンをぱぱっと延長 #Ninja250SL 🏍

今年のゴールデンウィークはバイクで2000kmほど旅という名の帰省をしようと思ってまして、ちょっとずつ遠征のための準備をしてます。今回はウィンドスクリーンを延長する汎用パーツを付けてみました。

Ninja250SLのスクリーンは非常に小さくてネイキッドかよってくらい風が体に当たります。普段の日帰りツーリング程度ならそれほど苦にはならないのですがさすがに距離が距離なだけになにか対策を…というわけで以下のパーツを装着することに。

実際にAmazonで注文、翌日には届きました。

続きを読む

コストから考えるGoogleのクラウドゲーミング「Stadia」

GDC2019でGoogleから新たなクラウドゲーミングサービス「Stadia」が発表されました。概要についてはGIZMODEの記事がわかりやすいので詳しくはこちらをどーぞ。

Stadiaを耳にした際にに真っ先に頭に浮かんだのはスクエニが子会社を設立してまで立ち向かった「シンラテクノロジー」でした。

シンラテクノロジーは2014年に設立され、思わずニヤリとしてしまうネーミングからも話題になりましたが、残念ながら実際にサービスインすることなく2016年には20億円の特損を出し会社ごと清算する運命をたどりました。また同じく2016年にはG-clusterを当初提供していた「Gクラスタ・グローバル」社も債務超過に陥り倒産しています。現在はブロードメディアの子会社が事業を引き継いでいます。具体的に何にどれくらい資金を注ぎ込んだのかは公表されていませんが、クラウドゲーミングはとにかくお金がかかると認識させられたのをよく覚えています。

Google先生の膨大な資金力があれば会社毎逝くことはないでしょうが、事業単体では巨額の赤字を抱えて死ぬのではという未来が頭をよぎって仕方ありません。
続きを読む

[Firebase] Firestoreでリアルタイムなチャットを作る (Web編) その4

今回はチャットで発言する内容にNGワードのチェックを入れたいと思います。
特定のキーワードが含まれている場合、「?」など伏せ字に置換する機能です。

実装方法を考える

方針

この実装方法は2つのパターンが考えられます。

クライアントでチェック
中身を覗かれるとNGワードのリストが漏洩しますし、サーバ側のAPIを直接リクエストされると機能しません。ただし高速に動作する可能性が高い。
サーバ側でチェック
NGワードのリストが漏洩する心配もなく、サーバ側APIを直接叩かれても機能する。ただしクライアント側で処理する場合に比べると低速。

あくまでFirestoreで実装した前提ですが、いずれも一長一短ありますがここはひとまずサーバ側で実装してみたいと思います。
続きを読む

[Firebase] はじめてのCloud Functions

FirebaseのCloud Functionsを利用すると巷で話題のサーバレスなシステムを構築することができます。外部にURLを公開してRESTful APIなども作成できますし、Firebase内のイベントに合わせて特定の処理を実行することが可能です。もちろんFirestoreやRealtimeDatabaseなどと連携することもできます。

functionsはNode.js上で動作するプログラムを記述することになりますので、すでにJavaScriptやTypeScriptの経験がある方なら特別な言語仕様を覚える必要が無いのも魅力でしょう。

CloudFunctionsでHelloWorld

準備

Firebaseのコンソールからプロジェクトを作成します。すでに利用しているプロジェクトがある場合はそちらを使用しても大丈夫です。

その後CLIツールのインストールを行います。詳しくは以下のページの「1 環境の準備」の項、Googleアカウントでログインするまでの部分を参照ください。

ディレクトリの初期化

すでにFirebaseで利用しているディレクトリがあればそちらに、無ければ新規にディレクトリを作成しカレントディレクトリを移ります。今回はすでに使ってるプロジェクトがあったのでそちらに移動しました。

$ cd miku3net

ではおもむろに初期化コマンドを叩きます。

$ firebase init functions

続きを読む

[Firebase] Firestoreでリアルタイムなチャットを作る (Web編) その3

前々回でFirestoreを利用してリアルタイムな通信が行えるチャットを、前回はユーザー認証を導入しました。

今回は自分が書き込んだログを削除する機能を追加してみます。

サンプル

実行結果

  • 書き込むためにはログインが必要です。閲覧は未ログイン状態でも行えます。
  • 自分が書き込んだログは背景がピンク色になり、クリックすると削除できます。
  • 自由に投稿していただいて問題ありませんが、公序良俗に反する書き込みはご遠慮ください。
  • 適当なタイミングでお掃除します。

続きを読む

[Firebase] Firestoreでリアルタイムなチャットを作る (Web編) その2

前回、Firestoreを利用してリアルタイムな通信が行えるチャットを作成しましたが、今回はこのチャットに書き込みためにはログインが必要な状態に仕様変更したいと思います。

サンプル

実行結果

  • 書き込むためにはログインが必要です。閲覧は未ログイン状態でも行えます。
  • 自由に投稿していただいて問題ありませんが、公序良俗に反する書き込みはご遠慮ください。
  • 適当なタイミングでお掃除します。

続きを読む