はじめに
みなさんはじめまして。かわはるといいます。長野高専で学生をしてます。
開発を始めてから３か月の超初心者です！
今回は@crysta1221からのお誘いで参加しています。
初記事なので拙いところや誤植などあると思いますが、大目に見てください笑。
今回の話題
今回は3か月ほど前から開発を始めたメモアプリ「Memoapp-Overlay」の開発について、躓いた点について話していきたいと思います！
（アプリ作ったとは言ってますが、皆さんだったら多分１日で作れるんじゃないかなっていうところまでしか進んでません。ご容赦ください。）
使用技術
Tauri
https://v2.tauri.app/
Next.js
https://nextjs.org/
rust
https://www.rust-lang.org/ja
Tauriについて
Tauriとは、WEBフロントエンド（Next.js/React/Svelte/Qwikなど）と、Rustnのバックエンドで、Windows/macOS/Linux/Android/iOSを対象にしたデスクトップアプリケーションが作れるフレームワークです。
https://ja.wikipedia.org/wiki/Tauri
Memoapp-Overlay概要
このアプリは開発の途中から根本的に使うフレームワークを変えたり、方向性を分けたりしてます。
そのため、①初期バージョンのアプリと②現在開発中のアプリが存在します。
まずは①初期バージョンの方から紹介します。
初期バージョン
アプリについて
このアプリは「ゲーム中に簡単にメモが取れたらなー」という思いから作りました。
アプリでは完全に透明なウィンドウにNotionぽくブロックでメモができるというものです。
Ctrl+Alt+Vを押すことで編集モードと表示モードを切り替えます。
使用例としては、ウィンドウフルスクリーンのゲーム上で攻略情報を常に見ながらプレイする。
WEB会議中にウィンドウを分割することなくメモが取れる。
などを想定して作りました。
一応デモということで配布をします（exeファイル直貼りというやってはいけなさそうな配布の仕方ですが）
ちなみにメモ機能にはTipTapというNotion-likeなテンプレートを用いました。
開発について
今回の開発では、Tauriの環境構築とバージョンの調整にめっちゃ時間がかかりました。特に、Tauri APIでWindow EventをListenする際、必要な権限の設定に苦労しました。また、データベースに関してはわからず終いでした。あと、Rustくんが何言ってるかわからなかったです。
さらに、Reactの構造をどのように書けば良いのか全く分からず、設計に手間取りました。加えて、パッケージマネージャーの種類が多すぎて、ネット上で拾った情報が役に立たないこともありました。このような状況下で、どの情報を参考にすればうまくいくのか分からず、作業が停滞してしまうことも少なくありませんでした。
初学者がアプリを作るには...
・Udemy等の開発のすべての工程が載っているコンテンツで実践すること
・同じようなアプリをGitHubで探してソースコード丸パクリしてみること
・環境構築が複雑すぎるものに手を出さないこと
やっぱり一から実践できるコンテンツが本当に大事だなと。友達に付きっきりで教えてもらうわけにもいかないし。
現在開発中のバージョン
構想について
こちらはオーバーレイできるメモアプリというところには変わりはありません。
今度はここに「共有機能」を盛り込んだものにしようと考えました。
共有はDiscordのチャットにヒントを経て、画像や動画などの資料に対してノーションライクなリッチテキストでチャットのようにメモができる機能を持たせようと考えました。
めちゃくちゃ雑で申し訳ないのですが、一応Figmaで作ってみました。
コンセプトとしては「Notion風テキストフォーマットの見易さ」×「時系列整理できるチャット」×「画像とテキストの関連が見やすいJamboard風フィールド」といった立ち位置でしょうか。
一応構想はこんな形で練っています。
この構想にたどり着くまでにいろいろFIgmaでこねました。
作る中でそれなりによいプラグインを見つけたので共有しておきます。
・html.to.design
WEBサイトをFigmaファイルにインポートできる。
・shadcn/ui
・Dot Grid
先ほどの画像の背景にあるような丸方眼を再現できる
開発について
現状では初期バージョンの環境(Vite,Tiptap)から現在の環境(Nextjs,TailwindCSS,Shadcn,Platejs)
に移植して、透明にする機能だけが実装できている段階です。
これからはUIの作成、データベース設計などやっていこうと考えています。
最後に
今回は初心者がアプリを作ってみた話でした。
やっぱり最初からRustが絡んでくるTauriに足を突っ込むのはやめた方がよさそうですね。
最後まで読んでくれた方、ありがとうございます！！
記事の投稿遅れてごめんなさい！