技育キャンプキャラバンハッカソン vol.2
概要 私たちは今回、福岡で開催された 技育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.
Hugo勉強会 コマンドたち
Hugo勉強会 コマンドたち 関連 Git/GitHub のセットアップ Hugo のセットアップ テーマ一覧 プロジェクトの作成(p.9) hugo new site profile git の初期化(p.10) git init テーマの追加(p.11) git submodule add https://github.com/SatooRu65536/satooru-hugo-theme themes/satooru-hugo-theme サンプルデータの追加(p.12) cp -r ./themes/satooru-hugo-theme/exampleSite/* ./ 不要なファイルを削除(p.12) rm -r ./hugo.toml ローカル環境で確認する(p.13) hugo server http://localhost:1313
ステージに上げる(p.15) git add . コミットする(p.16) git commit -m "メッセージ" Vercelに登録(p.18) http://vercel.com
Git Setup
Git のセットアップ MacOS Progate 【Mac】Gitの環境構築をしよう!
Windows Progate 【Windows】Gitの環境構築をしよう!
Hugoのインストール
HUGO のインストール方法 ソース元
目次 MacOS Windows 関連 Git/GitHub のセットアップ Hugo勉強会 コマンドたち テーマ一覧 MacOS 1. brew のインストール brew の確認 brew -v
Homebrew x.x.xx とバージョンが出たら 2.hugoのインストール へ.
brew のインストール 以下のコマンドを実行して brew をインストールする. > /bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
2. hugo のインストール brew install hugo
インストール完了後 以下のコマンドを実行し, バージョンが出たら完了. > hugo -v
Homebrew x.x.xx Windows 1. winget のインストール winget の確認 winget -v
梶研 05/10 - 05/16
スケジュール 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.
梶研 05/03 - 05/09
スケジュール 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 のように範囲追加できるようにしたいです。
梶研 04/26 - 05/02
スケジュール 二乗平均誤差(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) ぐねぐねしてるけど理想はこんな感じ
梶研 04/19 - 04/25
スケジュール 歩行軌跡の可視化 データを取得する 加速度, 角速度をグラフ化 歩行軌跡を表示する 加速度の大きさに合わせて歩幅を変えてみる 進捗 データを取得する 使用機器等 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進んだ位置にプロット
梶研 04/11 - 04/18
スケジュール 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
韓国旅行
日時 2023年3月20日 ~ 30日
1日目 予定 中部国際空港 -(jeju air)- 仁川国際空港 晩ごはん(鐘路3街) 宿泊 ヒュンダイレジデンス(ソウル) 2日目 予定 城郭壁 東大門 梨泰院(イテウォン) 西大門刑務所 独立門 景福宮 晩ごはん(弘大入口) 宿泊 ヒュンダイレジデンス 3日目 DMZ 自由の橋 第3トンネル 都羅展望台 慶熙大学 教保文庫(本屋) 明洞 宿泊 ヒュンダイレジデンス 4日目 弘益大学 弘大通り ソウル駅 - 釜山駅 新世界デパート(釜山) ロッテデパート(釜山) ホームプラス(海雲台) 海雲台市場 宿泊 マリンシティ 5日目 腹痛 図書館 宿泊 マリンシティ 6日目 新世界デパート(釜山 ロッテデパート(釜山) 昼飯(ムルミョン) 宿泊 이모の家 7日目 西生浦倭城 蔚山倭城 宿泊 이모の家 8日目 登山(金連山, 荒領山) 荒領山狼煙台 昼飯(ネンミョン) 時計買ったとこ じゃがいもチーズハッドク 宿泊 이모の家 9日目 大覚寺 連山洞古墳群 国際市場 宿泊 이모の家 10日目 釜山国際旅客ターミナル 宿泊 パンスターフェリー 11日目 大阪南港 感想 韓国は楽しいけど3日で疲れた。
Macアプリ chindicator
きっかけ 水族館に行った際にスマホ画面のイラストがあり、モバイル通信アイコンがチンアナゴになっていました。 これ作ったら面白そう!と思い作ってみました
本当は 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
四国旅行
日時 2023年2月13日 ~ 15日
目的地 高知県 岡豊城 高知城 香川県 丸亀城 高松城 引田城 徳島県 勝瑞城 一宮城 徳島城 収穫 高知県 岡豊城 続100名城スタンプ, 御城印 高知城 100名城スタンプ, 御城印 香川県 丸亀城 100名城スタンプ, 御城印 高松城 100名城スタンプ, 御城印 引田城 続100名城スタンプ, 御城印 徳島県 勝瑞城 続100名城スタンプ, 御城印 一宮城 続100名城スタンプ, 御城印 徳島城 100名城スタンプ, 御城印 金額 1日目 11900円 小牧空港-高知空港 2420円 高知空港-岡豊城-高知駅 タクシー 400円 コインロッカー 高知駅 200円 高知駅-高知城前 路面電車 200円 高知城 御城印 650円 鍋焼きラーメン 3420円 高知駅-丸亀駅 JR特急 400円 コインロッカー 丸亀駅 300円 丸亀城 入城料 200円 丸亀城 御城印 560円 丸亀駅-高松駅 JR 2000円 IRUCA 230円 肉うどん 108円 雪見だいふく 398円 焼きうどん 2800円 宿泊 計 23386円
プログラミング言語を作りました
なぜ 今までの会話でこんなことがありました > A. 使ったことあるプログラミング言語は?
> B. うーん… HTML と CSS かな?
経験者なら違和感を感じると思います
> どっちもプログラミング言語じゃなくね?
厳密に言うと HTML は マークアップ言語で CSS は スタイルシート言語 です。
プログラミング言語だ、と言う人もいれば違うと言う人もいます。
そこで私は思いつきました。
「プログラミング言語にすればいい!」
ということで作りました
目標は > CSSをプログラミング言語にする
はじめに プログラミング言語を作るには、他のプログラミング言語を使用します - Ruby は C言語 - Python は C言語, Java…
やはりC言語で実装するのが基本的ぽい、が、めんどくさい!
そこで私は JavaScript で実装することにしました。
決め手は以下の通りです - 使い慣れている - ブラウザで実行できる - 公開しやすい - パクれる 参考になるリポジトリがあった
自作言語について 言語仕様は この (GitHub) ようにしました。
サンプルコードは こちら (GitHub) です。
言語名は
> CSS(カスケーディング・スタイル・シート) ではない
ということで > NCSS (not CSS)
出席確認システムを作った-2
出席確認システムを作った の後に、バグが多かったため作り直しました
出席確認システム 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.
長篠旅行
日時 2022年10月22日
目的地 長篠城 長篠城保存館 設楽原決戦場 設楽原歴史資料館 野田城 大野田城 収穫 百名城スタンプ 長篠城 御城印 長篠城 御城印 野田城 御城印 設楽原 きっぷ 新城・本長篠往復きっぷ 往復・カルテットきっぷ専用新幹線変更券 金額 交通費 2720円 1680円 新城・本長篠往復きっぷ 400円 x2 新幹線変更券 240円 長篠城駅-野田城駅 食費 2134円 418円 朝ごはん(コンビニ) 213円 クレープ(コンビニ) 1000円 昼ごはん(もっくる新城) 203円 アイス(コンビニ) 300円 アイス(新幹線) 入場料 440円 440円 長篠城保存館・設楽原歴史資料館共通 御城印 900円 300円 長篠城 300円 野田城 300円 設楽原 お土産 770円 770円 五平餅 合計 6964円
aiboのアプリの一般公開が決まりました
7月後半より情報システム部4人で推し活をテーマにaiboと遊べるすごくを制作しました。
事前課題を経て選ばれた6校が2ヶ月で制作し、その内一般公開が決まったのは名電だけでした。
一般公開が決まりとても嬉しく、またAWS賞も同時に頂けてとても驚きました。 一般公開に向けて引き続き頑張って開発を進めていきたいと思います📛
メモ
Hi ブログの追加方法 hugo new posts/2022-07/index.md
トップ画像の変更方法 hero.png または hero.svg をフォルダ内に置くだけ
test ├── hero.png └── index.md
サブカテゴリー test ├── _index.md ├── hero.png ├── sub │ └── index.md └── sub2 └── index.md
さぶかてごりー
やあ わああaas gap@g
gkl
erkgne
srjgnl gjkeg
erhbneoh
wegg
werhlrnh
ehen
カラーコードボットを作った
概要
友)カラーコード好きなんだよね。よくネッ友とカラーコード当てゲームしてる
私)めんどくさくない?BOTにしたら…? 私がつくろう !!
出席確認システムを作った
概要
- 情報デザイン部 → システムコンピュータ部 に転部
- まずは出席を… まさかの紙 !?
- →デジタル化しよう