Help us understand the problem. What is going on with this article?

【Nuxt.js+Firebase】ログイン不要!気軽に投稿できるオススメのカレー共有サイトを作りました!

カレーの時代到来

近年、カレーブームがますます加速しているように思われます。

ちょうど今、西武池袋で行われてるカレーイベントでは連日行列が続き、
売り切れ商品も多数あるとのこと!

かくいう私も、カレーフリーク。
カレー専用のInstagramを開設し、食べ歩いたカレーを投稿しています。

今回、静的サイトを作る練習として、Nuxt.jsとFirebaseを使って、カレー屋さんの共有サイトを作ってみました!

食べログやInstagramと違い、アカウントは不要、匿名で気軽に投稿できるのが特徴です♪
下記にリンクを貼っているので、ぜひ投稿してみてください!

カレー共有サイト「Curry Freak」

サイトURL ▶▶▶ https://curryfreak.ml/

「新しいCurryを追加」のページから、投稿画面が確認できます。
Image from Gyazo

入力が完了すると、投稿ボタンが出現!
(アップロードが完了する前に投稿するとエラーになるので)
Image from Gyazo

投稿ボタンを押すと、「Curry一覧」ページに遷移して、
投稿したカレー屋さん情報をご覧いただけます♪
Image from Gyazo

作り方

まずNuxt.jsでプロジェクトを作成(参考記事
UIフレームワークを選べるので、今回Buefyを選択しました。

yarn add firebaseでFirebaseのライブラリを追加

yarn dev で動作確認しながら、ページやコンポーネントを作成

UIをちょこっと修正

yarn generateを実行し、distフォルダをNetlifyでデプロイ

独自ドメインを設定して、完成♪(参考記事

ページなどのソースコードはgithubにあげたのでご覧ください!

ソースコード ▶▶▶ https://github.com/twtjudy1128/CurryFreak_new

つまずいたところ

Firebaseの呼び出し

序盤で「Firebase App named '[DEFAULT]' already exists」というエラーが出て進まず。
Image from Gyazo

こちらの記事を拝見し、
何度もFirebaseを初期化して呼び出してしまっていることが原因だとわかったので、
以下のように初期化のコードを修正したら、すぐエラーが消えました♪

            // Initialize Firebase
            if (firebase.apps.length === 0) {
            firebase.initializeApp(config);
            }

V-modelの使い方

v-onとv-bindをまとめて書くことができるv-model。
フォームで色んな人が使ってるのを見て、私も投稿画面で使ってみました。

     <div class="postform">
        <div>
          <input v-model="title" placeholder="店名"><br>
          <input v-model="name" placeholder="名前"><br>
          <input v-model="memo" placeholder="ひとこと"><br>
          <input v-show="!image_url" type="file" id="image_file" @change="onFileChange"  accept="image/*" required/>
          <b-button type="is-warning" v-on:click='post' v-show="show"><b>投稿</b></b-button>
        </div>
      </div>

ところが、以下のように真っ赤になっちゃいました><

Image from Gyazo

調べると、対応するデータが定義されていなかったので、script部分で、以下のように定義。

data(){
    return {
      image_url: null,
      title:'',
      name:'',
      memo:'',
      downloadURL:'',
      show: false,
    };

すると今度は、以下のエラー

The “data” option should be a function that returns a per-instance value in component definitions.

子コンポーネントでは、dataをオブジェクトではなく、関数として定義する必要があるとのこと・・・(難しい)
というわけで、以下のようにちょこっと変更しただけでエラーが綺麗に消えました!

data:function(){
    return {
      image_url: null,
      title:'',
      name:'',
      memo:'',
      downloadURL:'',
      show: false,
    };

【参考記事】
Vue.jsのv-modelを正しく使う
【Vue.js】The “data” option should be a function that returns a per-instance value in component definitions.というエラーについて

画像とテキストを一緒に投稿する

1番苦戦したところです。笑

Image from Gyazo

上記のような構造を目指して、あーだこーだやってみたのですがエラー続きで心折れかけました。笑

その時に、GyazoやimgurのAPIを使う方法を見つけたのでトライしてみることに。
ところが、GyazoAPIはアクセス権限で引っかかり使えず…。

imgurで試してみたのですが、下記のようなエラーが出ました…(今だ解決しておらず)
Image from Gyazo

かなり苦戦していたのですが、 @tkyko13 さんにご協力いただき、
本来やりたかったFirebase StorageとCloud Firestoreを使った方法でうまく投稿できるようになりました。(大感謝)

コード長くなるので、ソースコードのpost.vueをご覧いただけると幸いです!
ソースコード ▶▶▶ https://github.com/twtjudy1128/CurryFreak_new

心残りなPOINT

・投稿日時も入れればよかった
・投稿した順に表示できるようにしたい
・画像をアップロードしている間、「アップロード中」のクルクルみたいのを出したい
・UIをもっと綺麗にしたい(フレームワークは便利だけどカスタムのコツがまだ掴めてない)
・ロゴを作りたい
・もう1つページを増やして、おふざけ要素作りたかった

色々やりたいこと挙げるとキリがないですね・・・
でも、手こずりながらも、また1つアウトプットできたことが嬉しいです。

あなたのオススメのカレー屋さんを教えてください♪

最後までご覧いただき、ありがとうございます!
匿名で簡単に投稿できるので、是非あなたのオススメカレーを投稿してみてくださいね!

カレー共有サイト「Curry Freak」 ▶▶▶ https://curryfreak.ml/
(9/11 0:30現在 ストレージの制限超過で画像表示されなくなっています)

みんなでカレー食べて、免疫つけて、今日も1日がんばりまっしょー!!!!!

(*^^)v「よろしければLGTMも宜しくお願いします!」

 

<9/10 18:28追記>
もうこんなに投稿集まってきました~ありがとうございます!
こういう機能も欲しいなどフィードバックもいただけて嬉しいです!
バシバシ投稿よろしくお願いします!
Image from Gyazo

※私の独断で不適切だと思った画像は随時削除しております。ご了承ください。

<9/11 0:30追記>
 ストレージの制限超過で一時的に画像が表示されなくなってしまいました…。
でも、それだけ多くのアクセスがあったということなので、前向きに捉えていこうと思います!
 こういう事態に直面しないと、自分では予測できなかったと思うので、これを機にリサイズの実装などもできないか検討してみようと思います。

<9/11 16:22追記>
画像復活しました!どうやら1日1GBという制限があるようです。やはりリサイズが必要ですねん。

twtjudy1128
知識ほぼ0状態から、プログラミングを学ぼうと覚悟を決めたアラサーです。
protoout-studio
ProtoOut Studioは日本初のプロトタイピング専門スクールです。プログラミングとプランニング(企画)の両方のスキルを兼ね備えた人材輩出を行います。作って発信して、がんがんプロトアウトしていきましょう。
https://protoout.studio
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした