チャレキャラで制作したWebアプリケーション Movie de Historia

OVERVIEW

チャレキャラ2019にて制作したWebアプリ Movie de Historiaの紹介です.初めて参加したハッカソンで初めて作ったWebアプリになります.フロントエンドについて何も知らない状態から全て独学で作りあげたので,色々な課題に挑戦することになった思い出深い作品です.

YEAR 2019

<開発したWebアプリ : Movie de Historiaについて>

Movie de Historiaは,映画のレビューを見て映画を決める人をターゲットにしたサービスで,良いレビューを見つけるのに時間がかかる人に対して,逆にこちらからランダムにレビューを送ることで自分の嗜好以外の映画などを見るきっかけに繋げたいという逆転の発想から生まれたWebアプリケーションサービスです.

また,今回のハッカソンでは導入することが叶いませんでしたが,より良質なレビューがユーザに送らやすくするために,当初はランダムにレビューを送るのではなく,各レビューに対して時間で減少するライフの概念を導入し,「いいね」が押されるとライフが増え,より多くのユーザに送られやすくなることを目指しました.

<概要>

初めてのハッカソンで作った初めてのWebアプリです.1人のアイデアマンと4人のエンジニアの計5名のチームで作り上げました!エンジニアチームはフロントエンド2人とバックエンド2人で分かれました.私はフロントエンド担当だったのですが,相方が開発初期の段階でドロップアウト(就活のため)したため,結果フロントエンド側は全て私のみで作ることになってしまいました....ちなみにフロントエンドはHTMLもCSSもJavaScriptもReactも全て未経験の状態で始めたため,結局全部勉強することになりました!!!

しかし,課題や挑戦が多かったものの,チャレキャラの最終発表では想定していたほとんどの機能を実装することができました.残念ながら入賞はできなかったものの,チーム一丸となってWebアプリを1から作ったこと,課題を乗り越えるために沢山調べ,より良くするためにどうすればいいか考えた議論したこと,そしてものづくりの楽しさを改めて感じることができたこのハッカソンは,とても貴重な思い出になりました.

<Movie de Historiaの開発レポジトリ>

https://github.com/Movie-De-Historia/app

<チャレキャラのホームページ>

https://challecara.org/

<身につけたこと,良かったこと>

・1つのサービスをチーム一丸となり,1から開発した体験が得られたこと.

・(ローカル上でしか動かないけれど)1つのWebアプリケーションを初めて作り上げることができたこと.また,ハッカソンで入賞はできなかったけれど,やれること全てを出し切ったという経験と達成感を得ることができたこと.

・何もわからない状態からスタートし,なかなか思うように進まなかったがスケジュール管理やどのレベルまで作り上げるかを議論できた点.

・技術的なこととして,API通信についてだいぶ抵抗感があったものの,今回ガンガン使う必要があったため,結果その抵抗感がなくなったこと.

<大変だったこと>

・独学でReactを勉強したこと.

・特にReactは,ここ最近大きなversion変更によってclassではなくfunctionを推奨するようになったので,functionを積極的に用いていたら過去のQiita等の記事がほとんど最新のものに対応していなかったこと.

・Reactで多くの外部のライブラリを用いる必要があったため,その都度新しい知識を調べる必要があった点(特に,最新verは英語の記事しかない場合がほとんど).

・CSSレベルのオブジェクトの配置がなかなか上手くいかなかったこと(今現在もこれに苦戦中).

・バックエンドとのAPI通信でセキュリティ面からtokenを用いて行うことになったが,初心者ゆえになかなか上手くいかなかったこと(ちなみに,発表の二日前にtokenをなくす方向に切り替えたらすぐにAPI通信できるようになった...).

・etc...

<未実装な機能や展望>

・スマホ以外の端末からでも表示が崩れないようにフレキシブルに画面がスケールできるようにしたい

・ローカルでしか動かせていないので,サービスとしてオンライン上で動かしたい

<Webアプリで使用した技術やサービス>

・Docker(環境は全てこれで行いました.設定するのは大変ですが,一度用意すれば環境によらず開発ができるのでとても便利です)

・Ruby on Rails(バックエンド担当が使用)

・React(フロントエンド担当(私)が使用.しかし,Reactを使うにはHTML,CSS,JavaScriptの知識も必要だったため,開発初期段階では同時に4つの言語を勉強することになり大変でした...)

・Google Chrome(Web上で動かすために使用.フロント開発にも使えることを初めて知ったので,当時かなり驚きました)

・Github(コードレビューやIssueをまとめるために使用.進捗管理にも使えて記録も残せるのでチーム開発には本当に便利です)

<Webアプリの各画面の説明>

1.Webアプリにアクセスしたときの,最初の画面はこのようなシンプルな画面です(ちなみにメールアドレスとパスワードはとちらも入力することはできますが,デモ版のため何も入力せずにログインできるようにしています).


2.1の「ログイン」を押すと,このレビュー受信画面に移動します.この画面に初めてくると,ランダムに3つのレビューが表示されます.1つのレビューはタイトル,ジャンル,一言レビューで構成されています.より詳細なレビュー内容はクリックしないと分からないようにしています.


3.2のレビューの中で特に「相棒」のレビューが気になったので押してみた画面.もしこの詳細なレビュー内容を見て,映画を見たいと思ったら「みたい!!!」ボタンを押します.もしレビュー内容を見てもイマイチだった場合は,一度だけこのレビュー選択をやり直すことができます.そのときは左下のホームボタンを押すと2の画面に戻ることができます.


4.3の「みたい!!!」を押した後の画面です.この画面になると24時間経つまで,同じ画面しか表示されません.この画面では,もしこのレビューが気に入ったのであれば「いいね」を押すとレビューを書いた人の元に反映されるので各側のモチベが上がることを狙っています.またこのレビューの感想を「メッセージを入力」でレビュワー側から送ることができます.


5.レビューの作成画面.下の紙ヒコーキを押すとこの画面になります.


6.右下のアイコンを押すとこの設定画面になります.自分が「いいね」したレビューの統計情報や自分が書いたレビューの「いいね」された情報などが見られます.この部分はまだまだ実装できていないことが多い画面となっています.ちなみにこの楕円グラフもライブラリにとても癖があったせいで発表までに上手く使いこなすことができませんでした....