feature image

2024年3月15日 | ブログ記事

個人開発として2週間でWebサービスを作ってみた話 〜「LABEL」の紹介〜

構想段階を含めて「2週間で作った」はやや嘘、「2週間でガチ開発してた」の方がたぶん正解


どうも、夏月(なつき)です。
普段は主にtraPのサウンド班で作曲活動をやっています。
今回紹介したいのは、個人開発として2週間で作ったWebサービス・「LABEL」です:

https://label.trap.show

ホームページの見た目はこんな感じです↓↓
----------2024-03-14-19.20.47

背景的な話

曲分析が好きな人間なので、普段他人にYouTubeやビリビリ上の音楽関連の動画のリンクを貼って、その動画のある特定の時点の「ここの楽器編成めっちゃいい」とか「ここの転調がすごい」とか説明したくなる時はよくあります。
そういう時には、「一々別のウェブサイトに遷移した後、次の時点を確認するためにまた一々戻らなければならない」っていうのが面倒くせぇってなるでしょうか(僕はかなりこれになっています
特に講習会とかやったりする場合、情報源がバラバラでページの遷移+特定の時点に移動っていう行為はぐちゃぐちゃになりがちです。

「取り上げる内容を全て一箇所に」 という考えをもとに、「LABEL」がこの世に生まれました!

基本的な機能として:

使い方

以下、基本的な使い方について説明していきたいと思います。

ログイン・ログアウト

----------2024-03-14-21.53.39
右上のボタンをクリックしたらtraQのOAuth認証に遷移します。

※「LABEL」のアカウント管理は現時点でtraQのOAuthを使っているのでtraQのアカウントをお持ちでない方は閲覧のみとなっています。

メッセージの作成

----------2024-03-14-22.04.21-1
----------2024-03-14-22.04.35
右下の黒いボタンをクリックするとメッセージの作成画面に入ります。

メッセージの削除

----------2024-03-15-0.58.38
自分の作成したメッセージであれば「削除」が表示されます。

ラベルの作成

----------2024-03-15-0.58.38-1
----------2024-03-15-1.01.19-1
オプションもしくはラベル欄の最後からラベルの作成画面を呼び出せます。
----------2024-03-15-1.02.13

ラベルの削除

----------2024-03-15-1.05.06
自分の作成したラベルであれば右上に削除ボタンが表示されます。

リンクのコピー

----------2024-03-15-0.58.38-2
「リンクをコピー」をクリックするとコピーできます。

技術面の話

技術スタック

frame-2
フロントエンド:TypeScript + Vue.js + Vuetify
バックエンド:Golang + echo
データベース:MariaDB
PaaS基盤:NewShowcase

api設計

OAuth周り

GET
/api/loginpath  OAuthの認証画面のurlを取得する
/api/gettoken  OAuth側からaccess_tokenをバックエンドに取得させる

DELETE
/api/logout  バックエンドにaccess_tokenを破棄させ、ログアウトする

メッセージ周り

GET
/api/message/:id  指定したメッセージの情報を取得する
/api/message/get/:page  指定したページのメッセージの情報を取得する
/api/message/countPages  総ページ数を取得する

POST
/api/message/send  メッセージを作成する

DELETE
/api/message/:id  指定したメッセージを削除する

ラベル周り

GET
/api/label/get/:messageid  指定したメッセージに貼られたラベルの情報を取得する

POST
/api/label/send  ラベルを作成する

DELETE
/api/label/:id  指定したラベルを削除する

フロントエンド側

GET
/  ホームページ
/oauthcallback  OAuthのコールバック
/mypage  自分の投稿を見る
/message/:id  指定したメッセージを表示する

データベース設計

個人開発的な雰囲気で描いた図なので雑なところ許してください
frame-3

感想

毎日6時間以上開発していて進捗の鬼と化しました。
個人ハッカソン(広義)的な感覚でここ最近学んだ知識(特にOAuth関連の部分)を実践に活かした作品となっています。
mazreanさんの書いてくれたこの記事を読んでとても勉強になりました。ありがとうございます!!

猫でもわかる(諸説)OAuth 2.0【新歓ブログリレー2020 26日目】
はじめにこちらは新歓ブログリレー2020 26日目の記事です。こんにちは。19Bのmazreanです。traP内ではSysAd班に所属しており、普段はサーバーサイドのコードを書いたり、サーバー触ったりしています。 traP内には、traQという部内製のチャットサービスがあります。traPでは原則入部時にこのチャットに登録することになっています。そうなると他のサービスを作るにあたってこのアカウントを使ってユーザー認証をしたり、ここから情報を得たりしたいことがでてくるわけです。この記事では、そのようなときに使うOAuth2.0という仕組みについて説明していきたいと思います[1]。 OAuth 2.0とは簡単なイメージまず、いきなりOAuth2.0と言われてもイメージが湧きづらいと思います。インターネットを使っているとTwitter「〜にアカウントの利用を許可しますか?」とかができるものがあると思います。これを可能にしているのがOAuth2.0というものです(traPでは「〜にtraQアカウントの利用を許可しますか?」みたいなことができるようにしています)。人によっては、こ

これからやること

Natsuki icon
この記事を書いた人
Natsuki

21B サウンド班 曲作ったりピアノ弾いたり 四川生まれ四川育ち

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2023年12月11日
DIGI-CON HACKATHON 2023『Mikage』
toshi00 icon toshi00
2021年8月12日
CPCTFを支えたWebshell
mazrean icon mazrean
2021年5月19日
CPCTF2021を実現させたスコアサーバー
xxpoxx icon xxpoxx
2022年9月26日
競プロしかシラン人間が web アプリ QK Judge を作った話
tqk icon tqk
2023年10月20日
DIGI-CON HACKATHON 参加記事「Comic DoQ」
mehm8128 icon mehm8128
2023年9月13日
ブログリレーを支えるリマインダー
H1rono_K icon H1rono_K
記事一覧 タグ一覧 Google アナリティクスについて 特定商取引法に基づく表記