Ruby on railsのプログラミング学習を始めて約4ヵ月。
一つ目のポートフォリオサイト「ハモ街-ハモりたい人のためのマッチングサイト-」が完成したので、その詳細をご紹介していきます。
この記事の内容
- 開発したwebアプリケーションの概要
- 実装した機能
- 使用したツール、ライブラリ
- こだわったポイント
それではさっそく、上記内容についてご紹介していきます！
ハモ街ってwebどんなアプリケーション？
今回、開発したwebアプリケーションは「ハモ街-ハモりたい人のためのマッチングサイト-」です。
簡単にいうと、アカペラをしたい人が自由にメンバーを探せるアプリケーションです。
加えて、アカペラをしている人、これからアカペラをやりたい人が交流できるサイトにもなっています。
開発理由
「ハモ街」
結論から言うと、アカペラをしたいのに、周りにアカペラをしたい人を見つけられずにいる人の悩みを解決するためです。
ハモネプやゴスペラーズの知名度が上昇するにつれて、アカペラ自体の知名度も上がってきたものの、いまだにアカペラ人口は多いとは言えない状況です。
大学時代にアカペラサークルに所属していると、アカペラをしている友人が近くに居て、グループを組むことも容易なことでしょう。
しかし、社会人になった後や、これまでアカペラの経験がない人にとっては、身近にアカペラをしたい人を見つけることができずに、グループが組めないという悩みを抱きます。
私自身、中学1年生からボイスパーカッションを始めて、ずっとアカペラをしたいと思っていたものの、身近にアカペラをしたい人を見付けることができず、大学入学までグループを組むことができずにいました。
同じような境遇の方がいると思い、また、私自身、新しいアカペラグループを組みたくなった時にすぐにメンバーを探せるサイトがあったらいいなぁという想いから、ハモ街を開発することにしました。
どうやってアカペラのメンバーを探せるの？
「ハモ街」では、会員登録ができるようになっています。
会員になった人同士は、
- 投稿機能
- チャット機能
を利用できるので、これら2つの機能を使ってメンバーを探します。
①投稿機能で自分を発信orメンバー募集
会員のみが利用できる投稿機能を使って、自分がどんな人なのか発信しましょう。
- 出身サークル
- 歌の経験
- 担当パート
- どんなグループを組みたいのか
といったことを発信することで、メンバーにスカウトしてもらえる可能性が高くなります。
また、メンバーを募集したい人は、欲しいメンバーの概要を発信しましょう。
- 募集しているパート
- グループで歌っている曲のジャンル
- 練習頻度
- 出演予定のライブ
このような情報を発信することで、メンバーになりたい人からの連絡が来るかもしれません。
チャット機能で繋がる
投稿機能を活用して、参加したいグループや、一緒に歌いたいと思った会員がいたら、チャット機能でメッセージのやり取りができます。
マッチするようであれば、一緒にアカペラをしましょう。
ハモ街に実装した機能のご紹介
ハモ街に実装した機能を、サイト運営者、会員、非会員に分けて利用できるものをご紹介します。
【サイト運営者ができること】
- イベントニュース投稿
- 会員の投稿管理（投稿・編集・削除）
- スタジオ情報管理（投稿・編集・削除）
【会員ができること】
- 会員管理機能（登録・ログイン・ログアウト・編集）
- 投稿（タイトル・文章・画像・動画・mp3音声・PDF)
- チャット機能（message、画像、PDF、動画、音声）<= グループチャット型
【非会員ができること】
- スタジオ情報を見れる
- アカペラニュースを見れる
サイト運営者ができること
サイト運営者のみ利用できる機能は主に3点です。
運営者が主に利用できるものは、トップページに記載している
- アカペラニュースについて
- スタジオ情報について
加えて、各会員の投稿を管理できるようにしています。それぞれの機能を以下で解説します。
アカペラニュース投稿・編集・削除
アカペラに関連するニュース一覧を表示しています。
インデックスで一覧を3つ限定で取り出すようにして、個別ページへとリンクを貼っています。
bootstrapを活用して、キレイに影が付くようにコーディングしてみました。
「新しく作成する」ボタンは、管理者がログインした時のみ表示されるように設定しています。
また、こちらの「ニュースを編集する」、「ニュースを削除する」ボタンに関しても、管理者のみ表示されるボタンになっています。
スタジオ情報管理（投稿・編集・削除）
こちらのスタジオ情報に関しても、管理者のみが管理できるようにしています。
スタジオ一覧ページで、管理者のみ「新しく作成する」ボタンが表示されるようにしています。
こちらの「スタジオ情報を編集する」、「スタジオ情報を削除する」ボタンに関しても、管理者のみの権限です。
会員の投稿管理（投稿・編集・削除）
同様に、ハモ街に登録している会員が投稿したものに関しては、管理者も投稿編集、削除ができるようにしています。
万が一、会員の方が、他の会員やハモ街運営に不利益になるような内容を投稿した際に、すぐに削除できるように、このような設計にしました。
会員ができること
ハモ街に登録した会員の方が利用できる機能を解説します。会員として新規登録すると、何ができるのかをまとめました。
会員管理機能（登録・ログイン・ログアウト・編集）
トップページの「新規登録」を押すと、こちらの画面に飛びます。
ここで、メールアドレスを入力して、パスワードを設定することで新規会員登録が完了します。
一度登録をしていると、次回以降はログインボタンからログインできます。ログイン後に利用できる機能は、以下の3つです。
①投稿機能
自由に投稿ができます。ライブ出演情報や、メンバー探しに関して、普段の何気ない出来事についても投稿できます。
②チャット機能
チャットをしたい相手を選んで、メッセージのやり取りができます。グループチャットも可能です。
投稿（タイトル・文章・画像・動画・mp3音声・PDF)
投稿機能がついているため、タイトルと内容を入力して投稿ができます。
- アカペラのライブ出演情報
- メンバー募集の概要
- アカペラ仲間探し
…といった用途に利用してみると良いでしょう。
チャット機能（message、画像、PDF、動画、音声）
ハモ街では、他の会員とチャットすることができます。
やり方としては、ユーザー一覧から、他の会員ページに飛ぶと、「チャットを始めるボタン」があります。
こちらの「チャットを始める」ボタンを押すと、そのユーザーと二人のチャットができるようになります。
自分の会員情報のページに飛ぶと、以下のような画面が開きます。
「新規チャット」というものが立ち上がり、ここからチャットページに飛ぶことができます。
このような感じで、他の会員とチャットをすることができます。
グループチャット可能
ちなみに、こちらの画面の左側に「招待する」ボタンを設置しています。
ここを押すと、この二人のチャットに、他のユーザーを招待して、グループチャットをすることが可能です。
招待したいユーザーを選択すると、こちらの画面のような表示が出ます。
「たけなかなおとさんを招待しました」と書かれています。たけなかなおとさんとして、ログインすると、次のように表示されるようにしました。
分かりやすいように矢印で示しましたが、「招待(1)」と、招待されているグループの数が表示されるようになっています。
「招待(1)」のボタンを押すと、以下のページが出ます。
ここで「新規チャット」を押して、投稿すると以下の画面になります。
このように、自由にグループチャットができることが、ハモ街の機能で魅力的なポイントの一つです！
非会員ができること
非会員ができることは、以下の2つのことです。
- スタジオ情報を見れる
- アカペラニュースを見れる
スタジオ情報を見れる
こちらに掲載しているスタジオ情報を見れます。アカペラの練習場所選びに活用できるようにしました。
アカペラニュースを見れる
最新のアカペラライブ情報や、イベントの応募開始の情報などを発信します。
使用したツール、ライブラリ
fontawesome
トップページのこちらの部分には、fontawesomeを使用して、デザインを工夫しました。テキストのみの場合よりも、見た目がよく、分かりやすくなるメリットがあります。
devise
deviseのライブラリを使用して、ユーザー管理機能を導入しやすくしています。
- 会員登録
- ログイン
- ログアウト
このような機能を簡単につけられるため、非常に便利なライブラリです。
bootstrap
bootstrapはやっぱり便利です。
私はデザインはあまり得意ではなかったのですが、bootstrapを使ってコーディングすることで、簡単にきれいなページを作ることができました。（とはいうものの、まだまだではありますが。。）
こちらの、5つの配置に関してもbootstrapを使用しています。その他にも、ボタンや入力フォーム、トップページのカルーセルもbootstrapを使いました。
ポートフォリオサイトを作ってみた感想
結論、ポートフォリオサイトを作るからこそ、プログラミングの知識が身に付いていくなと感じました！
これまで、ドットインストールやProgateといったサイトで基礎的な学習をしたものの、実際に開発するとなると、それらの知識を暗記していなくても、作れました。
分からないこと、やりたいことは明確なので、それを実現するためには、どのようなコードが必要になるのか、エラーの原因は何なのか、ググりまくりました。
結果、プログラミングにおいて暗記は本当に必要ありませんでした。
ググればよし！
今回、「ハモ街-ハモりたい人のためのマッチングサイト-」という私が大好きなアカペラに関連するwebアプリケーションを作ったことは、自分のメンバー探しの悩みの解決策にもなりましたし、プログラミングでアプリを作れるという自信にもつながりました。
これからもどんどん自分の悩み、人の悩みを解決して、世の中に貢献できるwebアプリケーションを開発していきます！
参考記事：「侍エンジニア塾に６ヶ月通った感想【ガチのリアル体験談】」
