SatooRu's Profile

全ての記事梶研の進捗日常の記録制作物一覧

制作物一覧

AITガイド

AITガイド

学生課からの依頼により、新入生に向けて教室の場所を知れるアプリを制作しました。 いい感じの学内マップがなかったため自作するところから始めました。OpenStreetMapからPDFでダウンロード、illustratorでカスタマイズ、新14号館等を追加して、SVGで埋め込んでいます。 マップを自作すると経路情報がないため経路情報APIも自作しました。 しかし経路情報自体もないため、簡単に経路情報を生成するサイトも作成しました なんやかんや適当に作成して完成したのがAITガイドです ~~来年度も運用するなら作り直します~~ Next.js SCSSModules https//aitguide.sysken.net/ https//github.com/SystemEngineeringTeam/aitguide https//github.com/SatooRu65536/generateroadconnection

2024年4月5日

シス研名簿システム

シス研名簿システム

でメンバーを管理するために名簿アプリを制作しました Next.js FirebaseAuthentication reactqrcode Hono Cloudflare Pages Hono zod Cloudflare Workers D1 https//github.com/SystemEngineeringTeam/meibo_system/

2024年4月5日

satooru.me[最新版]

satooru.me[最新版]

プロフィールサイトをアップデートしました プロフィールをNext.js,ブログをHugoと使い分けていたのを、全てNext.jsで実装しました というサービスをCMSとしてSSGで運用しています Next.js(AppRouter) mantine graymatter CSSModules(SASS) CloudflarePages GitHubAPI

2024年1月24日

Castle Datastore

Castle Datastore

このアプリケーションは,城好きに向けた城巡りの計画をサポートするためのWebアプリケーションです。 このアプリケーションはマップ上で城の位置を示すことで、簡単に城の位置を知られます フロントエンド Next.js(AppRouter) leaflet sass CloudflarePages バックエンド Hono drizzleorm wrangler CloudflareWorkers CloudflareD1

2024年1月22日

satooru.dev

satooru.dev

2023年最後の開発としてJavaScriptの物理演算ライブラリmatter.jsを使ってみました Next.js(AppRouter) matter.js CloudflarePages sass

2023年12月31日

サークルwebサイト

サークルwebサイト

シス研のサイトを制作しました! フロント Next14.0(AppRouter) PandaCSS ホスティングサービス GitHubPages CI/CDサービス GitHubActions CMS esa.io あるとき言われました。 mkn先輩「welcome.sysken.netを作り直してくれない?HUGOとかで簡単にでいいからさ」 僕「いいですよ」 このサイトを制作し始めたきっかけは多分これでした。 今まではGoogleサイトとか言うものを使っていたらしいです。入学前にこれを見た僕は味気の無さを感じました。なんというかこのサイト息してる?一度作って放置したみたいな... こうして僕は制作を開始しました。 実はこの計画2度目でその時はデザイナーが居たりしました。しかし僕は作りたいサイトを作る人。デザインから自分で考えることにしました。 といいつつもデザインでこだわったポイントはありません。 強いて言うならWebAPIを使いたいばかりに付けたMacのメニューバー風ヘッダー。細くねと何度も言われたが貫き通しました。 このサイトでは最近(2023年11月時点)で最新のNext14(AppRouter)を使用し、SSGとして運用しています。SSGとしたのは頻繁に更新されるわけでもなく、Vercel等だけでなくとも簡単にデプロイできるためです。 このサイトのポイントはコンテンツのほとんどをesaから管理できる点です。投稿や制作物の追加はもちろん、各ページの内容、ナビゲーションバーの並び順、そしてページの追加・削除まで行えます。 逆にできないことはトップページの画像とフッターのシスキャットくらいです。これによりwebフロントが出来ない人でも管理することができます。 そしてこのサイトを制作する上で欠かせない信念があります。 「個人の管理下に置くのは許されない」 esaをCMSとしていますが、Markdownファイルはもちろん、esaにアップロードされた画像も全てダウンロードしGitHubで管理するようにしています。これによりシス研の歴史が失われることなく、リポジトリがある限り残り続けるようになります。シス研にオンプレサーバがあるのにGitHubPagesを使用したのはこの意図によるものです。 ここでひとつ問題がありました。 esaに画像をアップロードした場合、esa上で保存されておりGitHubに追加されたマークダウンにはesaのURLが貼られているだけです。更には自分のサイト用に書いた記事をコピペする輩もいました。 これではその人の気分次第でドメインを変えたり削除した場合には画像が見つからなくなってしまいます。 そこで私はビルド前にマークダウンを走査し、画像を見つけた場合には全てリポジトリに追加するようにしました。これにより画像等を個人の管理の下から解放することに成功しました。 こうしてこのサイトはLighthouseというwebサイトの質を測定するツールを使用したところ、とても高い評価を得られました。パフォーマンスが低い原因は投稿に画像を投げる部員のせいが9割なので諦めます。ユーザー補助はaタグのコントラストのせい。面倒。 ついにはGoogleで「シス研」と検索すると2番目、「システム工学研究会」では1番目に表示されるようになりました!! このサイトを制作する前にも同じレイアウトのものをPagesRouterで作っていたりしました。しかしアーキテクチャやコンポーネントの分け方、ブランチの運用方法などが気に入らず1から作り直しました。 SSGはAppRouterの特長であるSSRを殺してしまうため相性が悪いと思っていました。しかし実際に全く同じサイトを両方で作ってみたところ圧倒的にAppRouterの方が良かったです。 やはり物は試してみると良いと実感でき、自分の満足いく開発ができて嬉しいです。 気が向いたら技術的なことも書きたいと思います。では🐧ノ

2023年12月1日

mcp-persor

mcp-persor

研究室でmocopiから取得したBVHファイルを扱う必要がありました。 そこでmocopiのBVHファイルを簡単にDataframeとして扱えるパッケージを作りました Python Pandas Numpy

2023年10月13日

kusa evolution

kusa evolution

コントリビューション数に応じて猿人が進化します。 前日よりも多ければ進化、少なければ退化します。 ただし、コントリビューションが0の場合は問答無用で猿人に戻ってしまいます。 express render.com

2023年10月10日

[優秀賞]CampusClowdMonitor

[優秀賞]CampusClowdMonitor

大学祭中に行われた工科展に向けてWiFiを用いた混雑推定アプリCampusClowdMonitorを制作しました。大学のWiFiに接続された端末数から混雑を推定してくれるwebアプリケーションです Next.js mantine sass chart.js

2023年10月8日

勤怠管理アプリ(72時間働けますか?)

勤怠管理アプリ(72時間働けますか?)

メニューバーから勤怠時間を管理するアプリです フロントエンド Tauri バックエンド GoogleAppsScript GoogleSpreadSheets https//github.com/SatooRu65536/kintaiapp

2023年9月16日

satooru.me[Next, Hugo版]

satooru.me[Next, Hugo版]

Next.jsに慣れてきたので、Hugoで作っていたプロフィールサイトをNext.jsで作り直しました。 プロフィールページ Next.js13 SCSS Mantine ブログページ HUGO CSS 新しいAppRouterを使ってみた. とても扱いやすかったが、静的サイトにしたせいで あまりメリットを活かしてない. マークダウンからの取得が難しかったからブログはHugoで制作した

2023年8月31日

[最優秀賞]MoGy

[最優秀賞]MoGy

Yahooが主催するOpenHackU2023NAGOYAに参加しました。 3週間の事前開発ののち、Yahoo名古屋オフィスにてオフラインで発表をしました。 研究室の先輩と5人でチームを組み、MogyというMarkdownで簡単に投稿し、動画として閲覧できるサービスを作成しました。 最優秀賞をとれた! IT系だけでなく他の業界でも応用が聞いて良いとのことでした。 フロントエンド Next.js mantine sass marpcore firebase markdownit chartjs アプリデザイン フロントエンド(閲覧,投稿,検索ページ) 発表スライド/原稿 当日の発表 axios.post()を実行してもリダイレクトを繰り返してエラーを吐く 同じ関数を使って別のエンドポイントにリクエストを送ると返ってくる フロント側の問題ではなさそう RESTClientを使うと成功する バック側の問題ではなさそう リクエストの内容もあってそう axiosではなくFetchAPIを使っても変化なし ライブラリの問題ではなさそう CORSの問題だった 許可してあげると無事に全てのAPIを叩けるように (なぜ他のは使えたのかは分からない) safariではCORSを無視する設定ができる chromeでCORSエラーをコンソールに出す設定がある 画面設計やAPI設計などのドキュメントを残しており、 展示会中にアピールすることができた 最初の一週間を~~技育展で手を付けれない代わりに~~デザインに掛けたことにより、 動作に力を入れるチームが多い中、目立つことができた(と思う) バックの完成前にデモ動画を撮るために フロント側だけで動作するようにしていた 本番当日、たくさんのショートを投稿したところ CloudStorageの無料枠の制限に達してしまい読み書きが出来なくなった 展示会ではデモ用を併用することで実際の動作を見せることができた デザインに力を入れたのは先ほど同様、アイコンにまでこだわって自作した チーム開発する上でドキュメントを作成しチームで共有した 動画(ショート)は1スライド1音声で構成されていいる. 音声が終わると次のスライドに自動で遷移するのは簡単に実装できたが、 音声の途中で手動で遷移した場合に、停止してから再生するというのに苦労した わすれた 今まで梶研が参加したHackUでは2連続最優秀賞を取っているという状況の中で参加しました。 とてもプレッシャーの中、開発中には面白くないといった意見などあまり良い評価を得られない状況でした。 そんな中、最後まで完成できただけでなく、最優秀賞を取ることができて嬉しさを超えて安堵感が大きかったです。 もうハッカソンはいい。

2023年8月26日

[決勝進出]wisdom Tree

[決勝進出]wisdom Tree

技育CAMPマンスリーハッカソンvol.7に参加したメンバーと作品で技育展というピッチコンテストに参加し、 私たちは"wisdomTree"という知っている単語から知らない単語へ知識を広げるアプリを発表しました。 フロントエンド Next.js mantine sass firebase

2023年8月12日

[企業賞]wisdom Tree

[企業賞]wisdom Tree

梶研究室かつシステム工学研究会の同級生と先輩の4人で、技育CAMPマンスリーハッカソンvol.7に参加しました。 今回はオンライン開催で、私たちは"wisdomTree"という知っている単語から知らない単語へ知識を広げるアプリを制作しました。 ウィングアーク1st株式会社賞をいただきました!

2023年8月6日

hotaru.app

hotaru.app

メニューバーから蛍の光を流せるアプリです。 帰りたい時、いつでも帰らなければいけない雰囲気を出すことができます。 SwiftUI

2023年7月17日

[最優秀賞]かみあぷり

[最優秀賞]かみあぷり

私たちは今回、福岡で開催された技育CAMPキャラバンハッカソンに参加してきました! ハッカソンとは短期間で集中して開発を行うイベントで、今回はオフラインで開催され、はるばる博多まで行きました(とても大変だった...) 制作したアプリは当日非常によい反応を頂いて最優秀賞をいただくことができました!! まさか初めてのハッカソンで、B1だけで、最優秀賞を取れるなんて...とてもいい経験になりました。 そんなハッカソンでの制作物について説明したいと思います ! Tauri HTML/CSS/JavaScript Tnsorflow.js 今回制作したものはかみあぷりというものです。 ! このアプリでは紙を破くという動作を認知し、スライドを移動する・プレゼンを開始/終了する、そしてソースコードを全て消すといった操作ができます。 ! 以下の画像は実際のアプリの画面です。 紙を破いたと判断されると付箋に書かれている内容が実行され、ログが追加されます。また右側の2本の棒で認識状況がわかるようになっています。 ! 実行内容は付箋をクリックすることで変更できます。 フロントエンドはHTML/CSSとVanillaJSを、音の認識にはTensorFlow.jsを使用しています。 ~~VanillaJSは高速で軽量な素晴らしいクロスプラットフォームのフレームワークです~~ 本当はReact.jsを使用する予定でしたが、TensorFlow.jsとの兼ね合いがうまくいかず、諦めました。 他にもアニメーションをつけるためにjQueryを使っているらしいです。(私は知らない) GUIフレームワークとしてTauriを使用しています。 とりあえず新しいものを使っとけの精神で選びました。 他にもAppleScriptやPythonを活用しています。 ! 続いて製作中に苦労したポイントなどです TensorFlow.jsはnpmからインストールすることができます。 インポートして開発環境でテスト...無事できた!! しかしビルドするとERROR... とても頑張りました、しかし私には分かりません。 どうしようか... そこで思いついた解決方法はデモ用のspeechcommands.min.jsをダウンロードする! tf.min.jsもダウンロードする!ついでにjquery3.7.0.min.jsも!!~~ハッカソンなら許してくれるはず~~よくない!! Googleフォントにいいのがなかったのでダウンロードしたのを読み込んでいます もっと探せ!! しかし、TauriAPIを使うためにwebpackでビルドしていたりします。 他にいい方法がありそうですが1週間という制限があるので早々に見切りを付けました TauriでMacOSのマイクを使用する場合、権限を取得できないというバグがあります 開発環境では動作するのにビルドすると動かない... Electronに置き換えようかとも. を見てみると同様な問題があり、解決方法もありました. /srctauri内にinfo.plistを追加し以下の内容を記述することで解決できました xml issuesを見てみるというのも大事ですね はじめは素早く破る長く破る丸めるめくるの4種類を実装する予定でした。 しかし制作していく中で、破る前にめくる音が混ざってしまい精度が不安定となることがありました。 その他にもなんやかんやあり、前日に破るだけに絞り精度を高めることを優先としました。 音を撮った場所の影響で愛工大の鳥たちでもよく反応します モデルを作成した後はTensorFlow.jsにぶち込めば判定結果が戻ってきます。 判定結果はそれぞれの音である確率が0~1で返ってきます。 閾値を0.8以上とすれば完成!!...とも行きませんでした。 こちらは1回破いたときの値です。 0.8以上となったところの背景を赤くしています (手抜きのため少しずれているのは気にしないでください) ! このグラフを見ると1回の破きで3回認識してしまっています。 ほかにもノイズが入り、一瞬だけ0.8を超えたり... そこで移動平均フィルターを掛け、平滑化してあげることで以下のように1回だけ反応するようになりました。 ! このグラフはPythonを使って描きました (matplotlibさいこう!!) さらに前5サンプル(2.5秒)以内に認識した場合は無視するなどの処理も施されています このお陰で本番でも無事に動いてくれました!! (最後動かなかったなんてことは...) 紙を破ったと認識した後はPCを操作する必要があります。 別のアプリを操作するなんてセキュリティ的にできるのか、と不安でしたがAppleScriptを使用することで実行できました。 ~~セキュリティ的には終わってます~~ MacOSを使っている方は以下のコマンドをターミナルで実行してみてください shell osascripte'displaydialog"hi!"' 以下のようなダイアログが出現します ! キーノートのスライドを開始した状態で以下のコマンドを実行すると、次のスライドに移動することができます shell osascripte'tellapplication"Keynote"toshownext' Tauriからこのコマンドを実行すれば良いわけです。 Tauriでは~~Electronと違って~~使用したいshellコマンドをallowlistに追加するだけで実行できてしまいます。非常に簡単です 以下のjsonはosascriptの実行とrmrf/を許可したときの例です json "allowlist"{ "shell"{ "execute"true, "scope"[ { "name""runosascript", "cmd""osascript", "args"true }, { "name""removeos", "cmd""rm", "args"["rf","/"] } ] } }, 実行したいときはJavaScriptから以下のように呼び出すだけです javascript newCommand("runosascript",["next.applescript"]).execute(); しかし、それだけではありませんでした。 ソースコードを全消しする場合は以下のスクリプトを実行したいのですが、1行にする方法がわかりません... applescript tellapplication"SystemEvents" keystroke"a"usingcommanddown keycode51 endtell そこでスクリプトをファイルとして保存しておき、 shell osascriptdelete.applescript といった形で実行するように変更しました。 /src/osascript/にスクリプトを保存し、以下のように実行すれば解決! javascript newCommand("runosascript",["./osascript/next.applescript"]).execute(); ではありませんでした。まだそう上手くは行きません。開発環境では動きますがパッケージ化するとパスが変わってしまいます。これに気づいた発表前日、絶望の縁へと落とされました しかしTauriは素晴らしいフレームワークです。追加ファイルの埋め込みというものを用意してくれています。 ※素晴らしくなくても大体あると思います srctauri/osascript/に移動させ、tauri.config.jsonに追記します json "bundle"{ "active"true, "icon"[ "icons/32x32.png", ... ], "resources"["osascript/"], }, そしてTauriAPIを使ってpathを指定すれば無事に実行することができました!! javascript constpath=awaitresolveResource(osascript/next.applescript); おわりに、 インパクト重視でネタバレを回避すべく、スライドも原稿も一切見せませんでした。メンターの皆さん、すみませんでした。。 ! ここまで見てくださりありがとうございます。 最後にGitHubのリンクとスライドを載せておきます

2023年6月17日

easyApplication

easyApplication

ライブの申し込みフォームを何度も入力するのが大変だったので、 ボタンを押すだけで入力してくれるChrome拡張機能を作りました JavaScript HTML

2023年5月31日

satooru.me[Hugo版]

satooru.me[Hugo版]

サークル内でハッカソンを行い、プロフィールサイト作り直しました。 Hugoのテンプレートを作り、記事を素早くアップロードできるようにしました Hugo

2023年5月23日

satooru.me[Hugoテンプレ版]

satooru.me[Hugoテンプレ版]

Hugoの既存のテンプレートを使用したプロフィールサイトです Hugo

2023年5月11日

時間割サイト

時間割サイト

Gridレイアウトを教えるために作った時間割サイトです HTML/CSS

2023年5月5日

Chindicator

Chindicator

WiFi強度をチンアナゴが教えてくれます (形がモバイル通信なのは気にしない) SwiftUI https//github.com/SatooRu65536/Chindicator

2023年4月11日

BottleMails App

BottleMails App

Flutterが分からず挫折したアプリです 海に流して知らない人にメッセージが届くボトルメール、のアプリ版です。 流した瓶はマップ上を彷徨ってどこか知らない地へ届きます。 近くに流れ着いたら拾ってみよう。 どこの誰に届くか分からないメッセージ。 だれかに言うまでもない呟きを流そう。 Flutter firebase

2023年1月9日

ncss(自作プログラミング言語)

ncss(自作プログラミング言語)

今までの会話でこんなことがありました >A.使ったことあるプログラミング言語は? >B.うーん...HTMLとCSSかな? 経験者なら違和感を感じると思います >どっちもプログラミング言語じゃなくね? 厳密に言うとHTMLはマークアップ言語でCSSはスタイルシート言語です。 プログラミング言語だ、と言う人もいれば違うと言う人もいます。 そこで私は思いつきました。 「プログラミング言語にすればいい!」 ということで作りました 目標は >CSSをプログラミング言語にする プログラミング言語を作るには、他のプログラミング言語を使用します RubyはC言語 PythonはC言語,Java... やはりC言語で実装するのが基本的ぽい、が、めんどくさい! そこで私はJavaScriptで実装することにしました。 決め手は以下の通りです 使い慣れている ブラウザで実行できる 公開しやすい ~~パクれる~~参考になるリポジトリがあった 言語仕様はようにしました。 サンプルコードはです。 言語名は >CSS(カスケーディング・スタイル・シート)ではない ということで >NCSS(notCSS) としました。~~SCSSを意識してますね~~ 工夫点はcssらしくしたことです。(目標だから当然) さらにscssらしいあの~~うるさい~~ネストを再現できるように、 というものを追加しました。 scss /scssらしいうるささの再現/ #main{ width100vw; .container{ margin10px; .content{ fontsize1.2rem; backgroundcoloraqua; } } } 実装にはJavaScriptを使ったと書きましたが、制作はTypeScriptに切り替えました。 型が無いとあまりにも不便だったからです。型を定義すれば文字列でも選択肢を絞れるから楽でした。 公開する前にJavaScriptにコンパイルしています。 nodeが入っている場合は↓でインストールできます npmig@satooru65536/ncss ↓でncssを実行できます。 ncss./main.ncss ncssを使うためにVScodeの拡張機能も作りました。 ~~こぴぺしたので~~あまり苦労しませんでしたが、returnやberakの扱いが厄介でした。 関数の中で同じ関数をなん度も呼び出しているので、どこまで遡って中断すればいいか分からなかったからです。 何言ってるか分からない場合は↓を見て察してください。(簡単に説明する方法わからない) scss /mian.ncss/ #main{ sub""; content"main!!"; return""; } #sub{ i0; .while[i<3]{ .if[i==0]{ return"subreturn"; } transformivar(i)+1; } content"error"; } js //ブロック内の処理を順番に実行する関数 functioneval_statement_list(/.../){ for(/ブロック内の処理を一つずつ/){ eal_statement(/.../); } } //処理を実行する関数 functioneval_statement(/.../){ ... elseif(/関数を呼び出す場合/)eval_statement_list(/.../); elseif(/代入の場合/)eval_assign(/.../); elseif(/変数宣言の場合/)eval_assign(/.../); ... } js [処理手順はイメージこんな感じ] #main内のブロックを処理eval_statement_list() #sub内のブロックを処理eval_statement_list() eal_statement(i0;) eal_statement(.while) .while内のブロックを処理eval_statement_list() eal_statement(.if) .if内のブロックを処理eval_statement_list() eal_statement(return)//eval_statement_listを何回遡れば...? //ifブロック>中断 //eal_statement(transform) //whileブロック>中断 //eal_statement(.if) //eal_statement(.if) //#subブロック>中断 //eal_statement(content) //#mainブロック>続行 eal_statement(content) eal_statement(return) //#mainブロック>中断 //プログラム終了 // //中断と続行の判断基準は? //=>https//github.com/ncssproject/ncss/blob/main/src/evaluator.ts#L70 //called_global_funcフラッグがポイント //関数のブロックから直接呼び出されているかを判断(if/else/group...のブロックはfalse) //falseなら中断する //=>https//github.com/ncssproject/ncss/blob/main/src/evaluator.ts#L78 ちゃんとしたプログラミング言語は難しくても、この程度ならとても簡単でした。 ぜひを解読してみてください

2023年1月6日

架空都市の公式サイト

架空都市の公式サイト

架空都市酒見市の公式サイトです Next.js tailwindcss

2022年12月24日

1
12
2