はじめに
JリーグのJ2に所属している栃木SCのパートナー企業の一覧表示と絞り込みなどで検索を行えるサイトを、自分の勉強も兼ねて作成してみました。
※企業数は全然網羅できていません。手作業でまとめているので心が折れました・・・。随時追加していく予定。
作ったサービス
GitHub：https://github.com/ur-oot/PartnerList
作ったきっかけは？
ずっと前からWebアプリを何か作りたいなと思っていたところに、たまたま以下のツイートを見かけました。
自分自身も栃木SCのサポーターで、サポーターというのは日頃からどうしたらクラブ・サポート企業に還元できるかを考えているものです。このツイートを見て栃木SCのパートナー様でも同じようなサイトがあると面白いんじゃないかと思い、全面乗っかりで作成しました。
話が逸れますが、栃木SCは2018年5月に界隈で良くも悪くも？何かと話題の江藤美帆氏(えとみほ氏)@etomihoをマーケティング戦略部長に招き入れ、J2リーグの中でもいち早くデジタル化に舵を切ったクラブです。IT業界に身を置く私としてもITに力を入れているクラブは少なく、とても話題性があるクラブではないかと思っています。
気になる方はぜひチェックしてみてください。
使い方
話を戻して、アプリの使い方です。
凝った機能は実装していない(というよりも、一覧表示・詳細ページ・ちょっとした検索機能ができたとこで初版をリリースした)ので、使い方で困ることはないと思います。
使用技術
インフラ
- GitHub
- Netlify
フロントエンド
- HTML
- CSS(SCSS)
- JavaScript
- Vue.js
- BootstrapVue
フレームワークの選定にあたり色々調べたところ学習コストが低く、初心者でも比較的扱いやすいということでVue.jsを選びました。Vue.jsを使っていることもありSPAでアプリを実装しています。また、過去に少しだけBootstrapを触ったことがあったのでBootstrapVueを選びました。
今後の対応予定
インフラ
現状だと企業情報を直接JSONファイルに記載して読み込んでいるので、AWSのDynamoDBで管理して、API Gatewayで取得できるようにしたいと思う。
フロントエンド
Bootstrapで実装してみたが、カードスタイルなど簡単に実装できるがカスタマイズがしにくかったので、Vuetifyに徐々に移行していきたいと思う。
ついでにデザイン面でもそれなりのデザインにしたいと思う。
機能
実装している機能が全然ないので以下を追加できればと思う。
※随時追加更新予定。
- お気に入り機能
- ジャンル別表示
- 企業のソート機能
- 絞り込みしてから詳細ページに遷移したあと戻ると絞り込みが初期化されるので保持するようにする
- アプリ上から登録・編集を行える機能