概要 私たちは今回、福岡で開催された 技育CAMPキャラバン ハッカソン に参加してきました！ ハッカソンとは短期間で集中して開発を行うイベントで、今回はオフラインで開催され、はるばる博多まで行きました（とても大変だった…） 制作したアプリは当日非常によい反応を頂いて最優秀賞をいただくことができました！！ まさか初めてのハッカソンで、B1だけで、最優秀賞を取れるなんて…とてもいい経験になりました。 そんなハッカソンでの制作物について説明したいと思います 紙を破る風神 制作物について 今回制作したものは かみあぷり というものです。 このアプリでは 紙を破く という動作を認知し、スライドを移動する・プレゼンを開始/終了する、そしてソースコードを全て消す といった操作ができます。 以下の画像は実際のアプリの画面です。 紙を破いたと判断されると 付箋 に書かれている内容が実行され、ログが追加されます。また右側の2本の棒で認識状況がわかるようになっています。 実行内容は 付箋 をクリックすることで変更できます。 技術スタックについて フロントエンドは HTML/CSS と Vanilla JSを、音の認識には TensorFlow.js を使用しています。 Vanilla JS は高速で軽量な素晴らしいクロスプラットフォームのフレームワークです 本当は React.js を使用する予定でしたが、TensorFlow.js との兼ね合いがうまくいかず、諦めました。 他にもアニメーションをつけるために jQuery を使っているらしいです。(私は知らない) GUIフレームワークとして Tauri を使用しています。 とりあえず新しいものを使っとけの精神で選びました。 他にも AppleScript や Python を活用しています。 紙を丸める雷神 努力ポイント 続いて製作中に苦労したポイントなどです Tnsorflow.js ライブラリの読み込み TensorFlow.js は npm からインストールすることができます。 インポートして開発環境でテスト…無事できた！！ しかしビルドするとERROR… とても頑張りました、しかし私には分かりません。 どうしようか… そこで思いついた解決方法はデモ用の speech-commands.min.js をダウンロードする！ tf.min.js もダウンロードする！ついでに jquery-3.

スケジュール Unityでアニメーション 進捗 Unityでアニメーション c#スクリプトの注意点 ファイル名とクラス名を一致させなければならない (2時間無駄にした…) オブジェクトの移動(キーボード) this.transform.position = new Vector3(x, y,z); 単純な移動はこれだけ 軌跡に沿ったオブジェクトの移動 void Start() { ... while (!reader.EndOfStream) { string[] line = reader.ReadLine().Split(','); float x = float.Parse(line[1]); float y = float.Parse(line[2]); float z = float.Parse(line[3]); positions.Add(new Vector3(x, z, y)); } ... } void Update() { // アニメーションを実行する timer += Time.deltaTime * 4; if (timer >= 1f) { Debug.Log(timer); currentIndex++; if (currentIndex >= positions.

スケジュール 3次元の歩行軌跡 計測 二次元グラフ化 三次元グラフ化(Python) 三次元グラフ化(Unity) 進捗 計測 4号館別館の1階(階段前)から3階(トイレ前)へ 使用機器など Android Xperia Phyphox 加速度センサー 角速度センサー 気圧センサー 二次元グラフ化 各センサーの値 (前後40サンプルの移動平均フィルターをかけてある) 二次元グラフ(加速度, 角速度) 1-2階と2-3階が1.5mほどずれている => 階段の歩幅と平坦部の歩幅が異なるから? 三次元グラフ化(Python) 気圧から高さを出す 1気圧の環境で 1hPa 下がると 10m 上があるとして計算 三次元グラフ 三次元グラフ(横から) 階段を登っている様子はわかるが、沈んでしまっている(?) => もっと平滑化すべき? 平滑化を強めた(?)グラフ 前後160サンプルで平滑化 やりすぎだが、フィルター次第で綺麗にできる問題だと分かった 三次元グラフ化(Unity) Pythonで座標をcsvで書き出して、c#で読み込む c#スクリプト 少数16桁ある場合は System.Globalization.NumberStyles.Float が必要となる float.Parse(line[0], System.Globalization.NumberStyles.Float); 動かしながら見れるようになった メモ kajilab.net 論文 > 梶克彦，河口信夫，安定センシング区間検出に基づく3次元歩行軌跡推定手法， 情報処理学会論文誌，Vol.57, No.1, pp.12-24，2016. (特選論文) 直線や直角,並行な部分を割り出して綺麗にする研究 長期的にみてやる 情報処理学会 入っておくと良い TODO: - 直線や直角,並行な部分を割り出して綺麗にする - Unity で時間通りのアニメーションにする

学籍番号をランダムに (このページは台本を兼ねています) 概要 シス研において一年生主体となり自己紹介ハッカソンを開催することにしました。 2週間程度で自己紹介サイトをつくるというものです。 そこでの発表順を決めるためにランダムに学籍番号を表示してくれるサイトを作りました。 サイト 台本 ポイント 第一にシンプルにすることを意識しました。 ボタンを極限まで減らし、操作は スクロール と 画面のクリック のみです。 自己紹介サイトに操作ってなんだ… 実際のページ さっそく実際のサイトをお見せします。 実際のページはこのようになっています。=> サイト ランダムに - 専攻はコンピューターシステム専攻です - フロントエンドを主体としています - プログラミングが好きです etc. 自己紹介はこんな感じで、このサイト実は学籍番号をランダムに表示してくれるサイトです。 右側にスクロールすると 学籍番号 を追加/削除できます。 チェックが入っているものはすでに選ばれたものを意味しています。 リセットするには下にスクロールします。 そうするとすべてのチェックが外れ、はじめから選ばれます。 さらにデータはローカルストレージというものに保存されており、画面をリロードしても復元されるようになっています 結果 はじめの目標となる シンプルさ と 操作の簡単さ を達成できました。 あらかじめ必要な機能を絞り、完成後に機能を追加するということがなかったお陰でコードが複雑になることを防げました。 また、コーディング時には Github Copilot という拡張機能を使い、AIに頼りながら書くことで効率的にコーディングできました。 今後 今後は学籍番号を k23075 - k23085 のように範囲追加できるようにしたいです。

スケジュール 二乗平均誤差(RMSE)を出す 計測 グラフ化 二乗平均誤差を出す 誤差を減らす 3次元の歩行軌跡 計測 グラフ化 進捗 計測 5歩 + 90度左 + 8歩(大きく) + (3歩) 歩幅に合わせて合わせて目印をつけ、歩く 実測した軌跡 加速度, 角速度, 角度グラフ 1歩を赤丸でプロット 角速度を積分して角度を出した ピークの条件 高さ 11m/s^2 以上 間隔 0.3s 以上(30サンプル) 顕著度(?)の閾値 3.5以上 signal.find_peaks(df_acc[‘low_norm’], height=11, distance=30, prominence=3.5) いい感じ…? 軌跡 90度左向いたはずが明らかに無い 原因 角度のグラフ をみてみると… 約6.2rad => 約360度 (先週の記録は 約1.75rad) 角速度を見てみると先週の約10倍 角度を *0.1 してみる 軌跡(角度*0.1) なぜ *0.1 する必要があるかは分からない => 反対に いくつ掛ければ90度になるか を考えてみる 軌跡(角度*0.26) ぐねぐねしてるけど理想はこんな感じ

スケジュール 歩行軌跡の可視化 データを取得する 加速度, 角速度をグラフ化 歩行軌跡を表示する 加速度の大きさに合わせて歩幅を変えてみる 進捗 データを取得する 使用機器等 iPhone 12 iOSアプリを制作 前回使用した phyphox は2つ以上のデータの取得ができなさそうだった (やり方あった) charGPTに聞きながら作った 結局使わなかった 取得方法 腰にポーチを付けてスマホを入れた 画面(z軸)を正面に、ジャイロのx軸左回りを正 10歩 + 左90度 + 5歩 加速度, 角速度をグラフ化 使用言語等 Python 3.10.10 pandas matplotlib numpy signal itertools 加速度と角速度, 角度のグラフ 1歩を赤丸でプロット 角速度を積分して角度を出した 条件 高さ 11m/s^2 以上 間隔 0.3s 以上(30サンプル) 歩行軌跡を表示する アルゴリズム 0歩の時点を (0, 0) とする 1歩 70cm とする 1歩進んだ時の角度(α)を出す α度の方向に70cm進んだ位置にプロット

スケジュール Androidアプリ開発 お試し Android Stdio の設定 加速度センサーを見るアプリをつくる ファイル出力する ファイルをPCに移す 加速度から距離を出してみる 加速度センサーの値を取る(直線運動) Pythonでグラフ化する 加速度グラフを距離グラフにする 相対時間にする 歩数推定 加速度センサーの値を取る(歩行) Pythonでグラフ化し、フィルターをかける 歩数を取得する 進捗 Androidアプリ開発 お試し 参考サイト 01_HelloAndroid 02_Sensor 03_Output リポジトリ AndroidSensor 変更点 APIレベルに合わせたコードに変更 TextView を行ごとに分割した 加速度から距離を出してみる 加速度センサーの値を取る スマホをx軸正の方向に約[TODO]cm動かした 環境 端末 iPhone 12 センサー取得アプリ phyphox Pythonでグラフ化する グラフ化 Python3.10.10 使用ライブラリ pandas matplotlib numpy 加速度グラフを距離グラフにする 加速度[m/s^2] を微分すると 速度[m/s] になる 速度[m/s] を微分すると 距離[m] になる 問題点 速度グラフ, 距離グラフ の形がおかしい 微分 と 積分 を逆に認識していた 速度, 距離の値が大きすぎる サンプリング周波数(100Hz)を考慮していなかった 最終的なグラフ 歩数推定 加速度センサーの値を取る(歩行) まっすぐ5歩 スマホのz軸正が上向き、y軸正が左向きになるように腰の位置で手に持った Pythonでグラフ化し、フィルターをかける 平滑化フィルター > (N0 + N-1 + N-2 + N-3 + N-4) / 5

きっかけ 水族館に行った際にスマホ画面のイラストがあり、モバイル通信アイコンがチンアナゴになっていました。 これ作ったら面白そう！と思い作ってみました 本当は iPhone でやりたかったのですが、きっとできないので妥協してMacにしました。 アプリの概要 MacのメニューバーバーでWifiの強度に合わせて表示が変わります。 (WiFiなのにモバイル通信の形なのはきにしない) 使用言語等 Swift UI(App Kit) Xcode はじめは手慣れた Electron や 最近はまっている Tauri を使用しようと思いましたが、 メニューバーにアイコンを表示くらいならと思い、Swiftを選びました。 感想 2年前にswiftから逃げて以来久々だったので1週間を想定していましたが、メニューバーにアイコンを表示させる程度なら簡単にできました。 適切な画像サイズ・dpiでなく表示されなかったりして厄介でした。うざ 今後Swiftにもチャレンジしようかな

目的 情報システム部がどのような活動をしているかを周知しやすくするため 使用技術 フレームワーク Hugo テーマ chringel CSS フレームワーク Tailwind CSS ポイント メンテナンスがしやすいように難しいものは使わず、MarkDown形式で記事を追加できるようになっています。 また、MISCらしさを出すためにヘッダーには 現在のパスやコマンド などが表示されるように魔改造しました。 サイト misc-mdn.dev

なぜ 今までの会話でこんなことがありました > A. 使ったことあるプログラミング言語は？ > B. うーん… HTML と CSS かな？ 経験者なら違和感を感じると思います > どっちもプログラミング言語じゃなくね？ 厳密に言うと HTML は マークアップ言語で CSS は スタイルシート言語 です。 プログラミング言語だ、と言う人もいれば違うと言う人もいます。 そこで私は思いつきました。 「プログラミング言語にすればいい！」 ということで作りました 目標は > CSSをプログラミング言語にする はじめに プログラミング言語を作るには、他のプログラミング言語を使用します - Ruby は C言語 - Python は C言語, Java… やはりC言語で実装するのが基本的ぽい、が、めんどくさい！ そこで私は JavaScript で実装することにしました。 決め手は以下の通りです - 使い慣れている - ブラウザで実行できる - 公開しやすい - パクれる 参考になるリポジトリがあった 自作言語について 言語仕様は この (GitHub) ようにしました。 サンプルコードは こちら (GitHub) です。 言語名は > CSS(カスケーディング・スタイル・シート) ではない ということで > NCSS (not CSS)

出席確認システムを作った の後に、バグが多かったため作り直しました 出席確認システム ver3.0 使用機器等 Raspberry Pi 4B 4GB Pasori Google スプレッドシート GSpread システム Pasori からNFCタグを認識 Googleスプレッドシートに記録 Googleスプレッドシートから管理 メリット スプレッドシートの機能を使うため管理がしやすい 持続性がある デメリット 通信量に制限がある バグ / 問題 謎のエラーがよく出る 毎日0時に消されるはずのデータベースが消されてない 帰りの時間を知らせる音楽を ON/OFF できない 反応が遅い ということで…作り直しました。 変更点 ver3.0 でのプログラム - check.py - NFCタグを検知する - 判別後スプレッドシートとデータベースを更新 - スプレッドシートがなかった場合のシートを追加・更新 - periodic.py - 設定時間を取得し、その時間に音楽を流す - 毎月スプレッドシートのシートを追加・更新 - 0時にデータベースを削除 ver3.2 でのプログラム - check.

7月後半より情報システム部4人で推し活をテーマにaiboと遊べるすごくを制作しました。 事前課題を経て選ばれた6校が2ヶ月で制作し、その内一般公開が決まったのは名電だけでした。 一般公開が決まりとても嬉しく、またAWS賞も同時に頂けてとても驚きました。 一般公開に向けて引き続き頑張って開発を進めていきたいと思います📛

概要

友）カラーコード好きなんだよね。よくネッ友とカラーコード当てゲームしてる
私）めんどくさくない？BOTにしたら…? 私がつくろう !!

概要

1. 情報デザイン部 → システムコンピュータ部 に転部
2. まずは出席を… まさかの紙 !?
3. →デジタル化しよう