はじめに
今日から大学３回生になる者ですが、コロナ禍もあってかあまり学校での勉強が捗らなかったので勉強してみました。その際に、自分の兄がエンジニアとして仕事をしているので協力を仰ぎました。優しい兄でよかったです。
サイトはこちら→My Travel Note
自分のツイッターはこちら→小橋亮介
兄のツイッターはこちら→こばしゅん
コード
なにができるのか
各都道府県ごとのページ閲覧
Firebaseを使用し、画像含む各ページのテキストも管理している。そしてページごとにデータを取得し表示させている。加えて、ライブラリとしてchakra-uiのモーダルウィンドウを使用して表示の幅を広げている。
まだできないこと
サイトからの画像やテキストの投稿、削除、変更
だいたいの流れ
サイトの構想
サイトを作るうえで、何が難しくて何なら手を付けやすいのかがわからなかったので、しっかりと自分の作りたい最大のサイトを構想した。
ライブラリの選択
モーダル表示を利用したかったので、いろいろと調べたうえで一番しっくりときた、chakra-uiのものを選んだ。
データベースの利用
たくさんの写真、それに付随するデータを利用するので、どう管理すべきかと考えたときに兄が提案してくれたサービスがFirebaseです。その中で、Cloud Firestoreを利用しています。合わせて、画像を管理するためにCloud Storage for Firebaseも利用しています。
ウェブデザインの変更
なにを使うかが決まると、それに合わせてデザインの変更をしました。より見やすく使いやすいものを目指すため、ツイッターを参考にしました。
データの取得
ここが一番時間がかかったのですが、Firebaseからのデータの取得です。Firestoreのドキュメントを見つつだが、自分のしたい場所や自分のしたいタイミングでの取得が難しかった。
コードの整理
コンポーネントを作ってレイアウトの部分ごとにレンダリングするようにし、加えてファイルも分けてコードも見やすいものへと変更した。
レスポンシブ対応
どのサイトを見てもレスポンシブ対応がされており、いくつかのサイズに合わせて対応させた。
ロード画面の追加
データの取得中のアンバランスなページを訂正すべく、実装した。
ページの公開
Vercelを利用してページを公開しました。
apiキーをenvファイルで管理
githubを公開するうえで、Firebaseのapiキーをenvファイルで管理した。また、Vercelの環境変数機能も使用した。
使ったサービス
chakra-ui
これは兄からの提案で利用することを決めました。とてもよいモーダルで自分の考えていたそのものでした。
Firebase
これも兄からの提案です。理想的なサービスだった。
Google fonts
フォントについて調べていた際、出てきたので利用した。
Github
兄とのデータの共有、いずれ使うこと多くなるよと言われたので練習も兼ねて利用しました。
使ったサイト
原色大辞典
MDN Web docs
- CSS レイアウト入門
- details
- :hover
- list-style
- border
サルワカ
ul ol liタグの使い方まとめ
Faviconジェネレーター
感想
とにかく初めてのことだらけで、かなり時間がかかって難しかった。けど、それ以上に自分で自分の作りたいものを作ることがこれからできるようになるワクワクが同時に生まれた。もっと頑張る。