今の気分の本を推薦！『EmoBooks』をデプロイしました📚
はじめに 👀
今回『EmoBooks』を開発した背景としては
- 単純にスマホ向けの簡単なwebアプリケーションができたら面白そう！
- 絵文字で気持ちを表現するのが可愛くて好き
- 読書が好きだけど実際に手に取ろうとする時すごく悩んでしまう
といったものがあります。なんとなく開発したクソアプリです(((
『EmoBooks』とは？ 📱
今回作成したスマホ向けWebアプリケーションは、気分に合わせて本を推薦するアプリです。シンプルなUIと動的なアニメーションを取り入れ、モバイルユーザーにとって使いやすい設計を目指しました。
-
機能:
- ユーザーが絵文字を選択し、現在の気分を入力
- Google Books API を活用し、気分に合わせた本を一覧表示
- 背景には動的なグラデーションアニメーションを適用
- 直感的な絵文字選択 UI
🛠 使用技術
| 項目 | 技術・サービス |
|---|---|
| フロントエンド | React, Tailwind CSS |
| アニメーション | Framer Motion |
| API | Google Books API |
| デプロイ | Vercel |
| フォント | Google Fonts（Zen Maru Gothic） |
🚀 デプロイ手順
ここら辺は別の記事でまとめているものを手順として行います！
詳しくはこちらvercelでデプロイしてみた/菊田佑輔
1. アプリケーションの準備
まずはローカルでアプリケーションが正常に動作していることを確認します。
コードの確認
package.json 内のスクリプトが以下のようになっていることを確認してください。
{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}
アプリケーションのビルド
アプリケーションを本番環境用にビルドします。
npm run build
build/フォルダが生成され、デプロイ可能なファイル群が作成されます。
2. Vercelでデプロイ
Vercelを使用してデプロイを行います。以下の手順に従ってください。
Vercelのセットアップ
-
Vercelアカウントを作成（Vercel にアクセス）。
-
Vercel CLIをインストールします。
npm install -g vercel -
プロジェクトディレクトリでVercelにログインします。
vercel login
デプロイの実行
-
ターミナルで以下のコマンドを実行します。
vercel -
デプロイオプションの選択:
- プロジェクトをリンクするか新規作成するかを選びます。
-
ビルド出力ディレクトリとして
build/を指定します。
-
デプロイが完了すると、VercelからURLが発行されます。
- 例:
https://your-app-name.vercel.app
- 例:
🎨 アプリのデザイン
今回ここにとても力を入れました！何よりも気軽にアクセスできるサイトにしたかったのでターゲットを高校生から大学生に絞ってより今風なデザインにできるように頑張りました(今風なデザインにできているかは定かではないです...)
動的背景
背景には、以下のCSSとframer-motionを利用して動的なグラデーションアニメーションを適用しました。
const backgroundAnimation = {
animate: {
backgroundPosition: ["0% 0%", "100% 100%", "0% 0%"],
transition: {
duration: 10,
repeat: Infinity,
ease: "linear",
},
},
};
<motion.div
style={{
background: "linear-gradient(120deg, #293241, #3D5A80, #EE6C4D)",
backgroundSize: "300% 300%",
}}
animate={backgroundAnimation.animate}
>
フォント適用
Google Fontsの「Zen Maru Gothic」を使用しました。理由は可愛いからです！！以上！！！
<link href="https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap" rel="stylesheet">
適用方法:
font-family: 'Zen Maru Gothic', sans-serif;
📊 完成したアプリケーション
-
ホームページ:
- ユーザーが気分に合わせて絵文字を選択。
- 背景には動的なアニメーションが適用され、柔らかいデザイン。
-
結果ページ:
- Google Books API を使用して、選択した気分に合った本を一覧表示。
- モバイル向けレイアウトに最適化。
デプロイ先 URL
👉 EmoBooks
📝 最後に
このアプリは、ReactとTailwind CSS、Framer Motionを活用し、シンプルで使いやすいスマホ向けWebアプリケーションを作成しました。デプロイにはVercelを利用し、簡単に公開できる方法を採用しました!
皆様もこのクソアプリで遊んでくださると嬉しいです！！！
ぜひ、今後のプロジェクトにもこの手順を参考にしてみてください！ 😊✨
Discussion