触れて楽しいユーザーインターフェイスを開発している、個人事業主のホームページです。
ブログ

ウェブアプリ

ジャイロセンサの出力を可視化する

MPU-6050を使ったデバイスの加速度の出力を可視化したが、同様にジャイロセンサの出力を可視化するアプリも作成した。 https://muid7989.github.io/imu-gyro-test/ アプリの概要 ジ …

加速度センサを使ったヨーヨーみたいなアプリ

加速度センサの出力値を使ってヨーヨーのような感じを出したアプリを作った。 https://muid7989.github.io/imu-yoyo/ アプリの概要 MPU-6050を使った自作のデバイスをBLEで接続して使 …

加速度センサの出力を可視化する

MPU-6050を使ったデバイスを試作したので、その出力を可視化するアプリも作ってみた。 まずは加速度の出力を可視化したもの。 https://muid7989.github.io/imu-data-monitor/ ア …

ウェブアプリを作る際のviewportの話

p5jsでウェブアプリを作っている。 これまではキャンバスのサイズを960×1280としていて、これで自分の使っているタブレットやスマホで大体画面いっぱいに表示できていたので良しとしていた。 キャンバスサイズを変えようと …

p5jsでのBLEデバイスからのデータ受信タイミング

p5jsを使ったウェブアプリ上でBLEデバイスを接続して使用する際に、データを受信するタイミングが気になったので調べてみた。 概要 BLEで接続した入力デバイスを使ったウェブアプリを作成中 加速度センサの検出データを使っ …

MPU-6050のバイトオーダーの話

p5jsを使ったウェブアプリを作る中で、MPU-6050を使ったデバイスからのデータを処理している。 バイトオーダーで少し引っかかったので、情報を整理。 MPU-6050のバイトオーダー MPU-6050の加速度やジャイ …

p5jsのcreateFileInputで文字を変更する方法

p5jsでローカルファイルを読み込みたい場合、createFileInputで作ったinput要素からファイル選択画面を呼び出す。 そのinput要素で、表示する文字を変えたりしようとするのがなかなか難しかった。 いろい …

本のナンプレをスマホでできるようにする

本のナンプレの問題を手軽にスマホに取り込んで解けるようにするためのウェブアプリを作ってみた。 本に書き込まずに問題を解ける 候補数字の書込みでごちゃごちゃしない ミスがあったときにすぐやり直せる 使い方 まずこちらのアプ …

p5jsでカメラを使うときの解像度の設定

p5jsでカメラを使うアプリを使うにはcreateCaptureでカメラ映像を取得できる。 createCaptureではwidthとheightの値を指定することでカメラの解像度を設定することができるようになっているが …

大きい数字の桁の名前を覚えるためのゲーム

大きい数字の桁の名前を覚えるために、順番を正しく並び替えるミニゲーム https://muid7989.github.io/sort-game-number/ 操作方法 画面上のボタンをタップして操作 startで開始 …

1 2 3 »
PAGETOP
Copyright © 松原UIデザイン All Rights Reserved.
Powered by WordPress & BizVektor Theme by Vektor,Inc. technology.