ねこの足跡R

2019.07.29

[HTML5] カメラをJSで操作しフォトフレーム付き写真を撮影する

以前、JavaScriptでカメラを操作し写真を撮影するサンプルコードを作成しましたが、今回はそこにフォトフレームを合成してみたいと思います。

プリクラやスマホアプリでよくある見かけるやつですね。撮影した画像をダウンロードすることもできます。
続きを読む

2019.06.22

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

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

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

2019.06.18

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

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

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

2019.06.09

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

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

ついカットなっておみくじQRコードを作った。 pic.twitter.com/0pKlS1576g
— 勝部麻季人 🍮 (@katsube) 2019年6月8日

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

2019.06.08

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

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

アニメーションするQRコード作ってみた。
これくらいの大きさならQRコードリーダーも認識してくれる。紙はムリだけどデジタルサイネージとかWebで出すのに良いかもね。
（キャラはUNITYちゃん） pic.twitter.com/4TzPShoTmk
— 勝部麻季人 🍮 (@katsube) 2019年6月8日

2019.06.06

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

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

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

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

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

2019.04.20

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

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

アクションカム用のmicroSDXCを準備中。追加で発注したのであと2枚増える予定w pic.twitter.com/tEDGmfiGf6
— 勝部麻季人 🐟 (@katsube) 2019年4月20日

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

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

2019.04.02

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

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

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

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

2019.03.30

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

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

PHP7.1のサポート期間が今年12月1日までなので、週末は7.3にアップデート作業かな。こういう時は可能な範囲で最大まで上げないと毎年作業することになるｗhttps://t.co/HxfmR9O7SX pic.twitter.com/EueYheJgkK
— 勝部麻季人 🍲 (@katsube) 2019年3月29日

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

PHP7.3はこれまでよりもさらにパフォーマンスが向上している - Qiita

https://qiita.com/rana_kualu/items/05a510f53c0ea9a1ccaf

2018/11/22に(http://php.net/archive/2018.php#id2018-11-22-1)されました。(https://wiki.php.net/todo/p...

Qiita

2019.03.25

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

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

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

【HOZAN照明】オートバイ汎用気流調整可能なボルトオン可変ウインドスクリーンスポイラー 1年間保証付き (グレー)

posted with amazlet at 19.03.25

GuangZhou HOZAN Lighting CO,Ltd
売り上げランキング: 7,765

Amazon.co.jpで詳細を見る

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

2019.03.24

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

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

Googleの新ゲームサービス｢Stadia｣まとめ：これは歴史に残るぞ

https://www.gizmodo.jp/2019/03/google-stadia-unveil-summary.html

新時代の幕開けとともに、新世界が広がり始めた。Googleがやっちまいました。ゲーム業界の革命です。GDC（ゲーム開発者カンファレンス）で発表した...

www.gizmodo.jp

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

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

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

2019.03.07

[Firebase] Authenticationで複数の認証プロバイダへ同時対応する (Web編)

今まではFirebaseの個別の認証プロバイダでログインしていましたが、今回はここまで対応した全プロバイダのいずれかでログインできる仕組みを作ってみます。

以下の画面のように複数の認証方法から自由に選択することができます。

続きを読む

2019.02.26

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

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

実装方法を考える

方針

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

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

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

2019.02.25

[Firebase] はじめてのCloud Functions

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

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