Information

23307d2f 8c14 4624 a95e bbf34a6d3f0f
  • 作者
  • 488aa3b3 d662 4b10 9740 9852afa145ad ふくい ☺︎
  • 作品リンク
  • 23307d2f 8c14 4624 a95e bbf34a6d3f0f SessionGO
  • 概要
  • SessionGOでは全国の音楽セッションの情報を検索・投稿することができます。
    また、チャットで気軽にコミュニケーションすることもできます!
    演奏する人はもちろん、お酒や美味しい料理などを楽しみながら聴きたい人にも役立つでしょう!

    SessionGOは主にアイルランド音楽のセッションをメインのターゲットとしています。
    ですが、ほかジャンルのセッション情報も歓迎です!

  • タグ
  • こだわり・開発背景
  • [開発のきっかけ]
    自身も趣味でよく参加するアイルランド音楽のセッションは、日本ではまだまだマイナーなものです。
    セッション開催する際の告知はSNS、お店のHP、口コミ等が主流で中心的な情報サイトはなく、初心者プレイヤーやセッションを聞きに行きたい人にとって「情報を手軽に探せる場」がありませんでした。
    そこで、いつ、どこで、どんなセッションを、誰が開催するのかをひと目で確認できるように、SessionGOを開発しました。

    [こだわった点]
    ・フロントエンドには今風の技術を使用したかったので、Vue.jsとNuxt.jsを採用。基本的にnon SSRのSPAとして構築。
    ・バックエンドは主にFirebaseを使用し、ログイン認証やデータベース、ストレージからホスティングまでをサーバーレスで構築。
    ・セッション情報の投稿ページには、地域・店名のオートコンプリート機能を実装し、スムーズな入力システムを実現。(のつもり)
    ・SPAで問題視されるOGP対策は、UAがSNSのbotの時のみmetaタグやOGPタグをCloud Functionsでレンダリングして返すことでクリア。
    ・今の所ほぼキャッシュ目的だが、ServiceWorkerを設定。PWAとしてホーム画面に追加も可能。Push通知なども実装予定。

  • 開発環境
  • Mac,Vue.js,Nuxt.js,Javascript,Element-UI,Firebase,GCP,

  • 制作期間
  • 実際の製作期間は3ヶ月ほどでした。

    当初はLaravelで書き始めましたが、ログイン認証やデータの構造を設計するのに苦労し、一旦白紙にしました。
    JavascriptフレームワークはjQueryぐらいしか触ったことがなく、Vue.jsとNuxt.jsはほぼ一からの勉強でしたが、学習難度は思ったよりも低く、今風の技術ということもあって楽しみながら制作できました。

  • 学習方法
  • 学生時代はWebデザイナーを目指していて、主にHTMLとCSSとJSを独学で勉強していました。
    Web系ということもあってWordpress等のCMSも個人ブログなどで使用するようになり、PHPやインフラ系なども簡単に触るようになりました。