どうも、かたゆでです。
今回はバンド活動のスケジュールやタスクをまとめて管理するためのWebサイトを作ってみました。
ちなみに私のプログラミング経験はほぼゼロですが、AIに頼ればどこまでできるのか、という実験も兼ねています。
そして出来上がったものがこちら。
現在は自分のバンド内でテスト運用中です。
サイト自体は誰でも見ることができますが、実際のスケジュールやタスクなどのデータは許可したメンバーしかアクセスできないようにしています。
使ってみたいという方は是非コメントをお願いします。需要がありそうなら一般公開も検討します。
作ったサイト
今回作ったサイトでは、
・スケジュール
・タスク
・曲
・メンバー
の4つを管理できるようにしました。
トップページには登録済みのスケジュールとタスクを表示しています。
普段はここだけ見ておけば、いつまでに誰が何をしないといけないのかが分かるようにしています。
各項目の並び替えや絞り込みも可能です。
ログインすると下記のようなボタンが表示され、各登録画面にとべるようになっています。
スケジュール
スケジュールでは、
・日付
・開始、終了時間
・内容
・場所
・曲
・メモ
を登録できます。
曲は自由入力ではなく、あらかじめ登録した曲から選択するようにしています。
登録した予定は編集、削除も可能です。
スタジオ練習やライブ予定など、とりあえずバンドの予定は全部ここに突っ込んでおけばいいと思います。
タスク
タスクでは、
・担当メンバー
・締切
・内容
を登録できます。
担当者は登録済みのメンバーから選択します。こちらも登録、編集、削除が可能です。
曲・メンバー
曲は曲名とアーティストを登録。
メンバーは名前を登録するだけです。
ここで登録したものがスケジュールやタスクの選択肢として出てくる仕組みです。
機能を増やそうと思えばいくらでも増やせそうですが、まだ試作段階のため現時点ではこのくらいにしました。
サイトの構成
ここから少しだけ技術的な話です。
詳細なコードは私自身よくわかっていないので割愛します。したり顔で解説していますがすべてチャッピーの受け売りです、何を言っているのか自分でもよくわかりません。
もちろん、むずかしい質問は受け付けていません。
今回のサイトはHTML、CSS、JavaScriptをベースにして、GoogleのFirebaseというサービスを利用しています。
ざっくりした構成はこんな感じです。
スマホ・PC
↓
Firebase Hosting
↓
Googleアカウントでログイン
↓
Cloud Firestore
↓
スケジュールやタスクなどのデータを共有
サイト本体はFirebase Hostingで公開しています。
スケジュール、タスク、曲、メンバーなどのデータはCloud Firestoreというデータベースに保存しています。
ログインにはFirebase Authenticationを利用し、Googleアカウントで認証する形にしています。
セキュリティについて
ブログにURLを載せるにあたって、ここは少し対策しました。
試作段階ではGoogleアカウントでログインさえすれば誰でも中のデータを読み書きできる状態でしたが、ネットの海に放流するにはさすがにノーガードがすぎたので、許可されたユーザーのみ実際のバンドデータへアクセスできるようにしています。
サイト自体は誰でも見ることができますが、第三者がGoogleアカウントでログインしても、実際のスケジュールやタスクを見たり編集したりすることはできません。
現在はあくまで自分たちのバンド専用サイトとして運用しています。
制作のきっかけ
現在バンド内の連絡は基本的にLINEを使っています。
LINEにはノート機能もあるので、ライブの情報やスタジオ予定などはなるべくそちらにまとめるようにしています。
ただ、活動期間も長くなってきてトピックも増えてくると、どうしても共有漏れが出てくるんですよね。連絡した側は伝えたつもり、受け取る側は知らなかったという悲しき事故が発生します。
あとはLINEというサービスに全部乗っかっているのも少し気になっていました。
今すぐどうこうという話ではないですが、サービスの仕様変更もありますし、ノートなどの機能が今後ずっと同じ形で使える保証もありません。
ならバンド用の管理サービスを使えばいいじゃないかという話になります。
実際探してみるとそういったサービスはすでに存在するのですが、アカウント登録が面倒だったり、不要な機能が多すぎるものが多い印象でした。
欲しいのはもっと単純で、
「次いつどこで集まるか」
「いつまでに誰が何をやるのか」
が分かればとりあえず十分です。
だったら自分たちに必要な機能だけのシンプルなものを作ればいいのでは？
ということで今回の制作に至りました。
プログラミング経験ほぼゼロでも作れた
冒頭でも書いた通り、私にはほとんどプログラミング経験がありません。
仕事でExcelのVBAを調べながら使ったことがある程度で、Webサイトを一から作った経験はありませんでした。
HTML、CSS、JavaScriptについても、今回作り始めた段階では役割をなんとなく知っているくらいです。Firebaseに至っては何それおいしいの状態です。
というわけで、今回の開発ではChatGPTをフル活用しました。
開発当初はまだ私も若く、自身のスキルとして残そうという思いがあり、チャットで相談しながら
「まずスケジュールを登録できるようにする」
「編集と削除を付ける」
「他の端末からも見られるようにする」
「Googleログインを付ける」
と自分の手で一つずつ機能を追加していきました。
当然そのたびにエラーが出ます。エラーが出たらコンソールの内容をChatGPTに投げる→言われたところを直す→またエラーが出る→また投げる。
そんな感じで進め、ある程度基本的な仕組みができたところで一度バンドメンバーに共有し、Ver.1の仕様を決めました。
そこからはCodexを使用してみたのですが、これが素晴らしくもあり過ちでもありました。
既存のコード一式を読み込ませ欲しい仕様をまとめて指示すると、複数のファイルを勝手に読んで必要なところを全部修正してくれます。おまけに素人感丸出しだったUIまできれいに修正してくれるじゃありませんか。
今までのは何だったのか、とね。もう全部これでええやんけ、とね。
無事脳を焼かれました、もう竹槍には戻れません。
とんでもない時代です。
今後について
とりあえずVer.1として、バンド内で使い始められる状態にはなりました。
ここからは実際に使ってみてブラッシュアップしていこうと思います。
現状は自分たちのバンド専用ですが、もし今後「使ってみたい」という声があれば一般公開も検討したいと思っています。
その場合はバンドごとにグループを作成して、管理者がメンバーを招待するような仕組みが必要になりそうです。
さらに将来的にはアプリ化も少し考えています。
個人的な理想は、スマホのホーム画面を見れば次回の予定や自分のタスクが分かること。
ホーム画面にウィジェットとして置けたらかなり便利そうです。
そこまで行くと今回よりだいぶ話が大きくなりますが、(ChatGPTが)何とかしてみます。
おわりに
今回はAIを使ってバンド管理サイトを作ってみました。
作る前はプログラミング未経験でWebアプリを作るなんて結構ハードルが高いと思っていましたが、AIを使えばとりあえず動くものを作るところまでは思っていた以上に簡単でした。
とにもかくにもAIが凄すぎる。
反逆されたら人類はおしまいだなと思いました。
それではまた次回。
コメント