Vue.js+Firebaseで映画マッチングアプリ(CinemaWith)をリリースしました - Qiita
概要 入社して７ヶ月をすぎました。 流行りのVue.js,Firebaseを使って上映中の映画を利用したマッチングアプリ「CinemaWith」のβ版をリリースしたのでその過程を残します。 https://cinemawith.app 特徴 上映中の映画をお気に入りに登録することで、 その映画を観に行きたい人を探すことができる。 登録からチャットまでが早いため色々な人と関わることができます。 動機 Sierとして客先で働いているため、やってみたいと思った技術に触れられる機会が少ない。 サーバー構築などはベテランの方がやるので新卒の自分が触れることのできる範囲が限られている。 そんな中で一から十まで自分で作ってみたい、あわよくば儲けたい という魂胆のもと開始しました。 制作期間は一ヶ月半ほどでほぼ毎日業後に開発を行っていました。 トップページ 流れ アイデア出し 最初は同期と二人で開発する予
Vue.js+Vuex+VuexFireでTodoList - Qiita
最近、Firebaseを勉強中です。Vuexも勉強中です。 その2つをつなぐためのVuexFireというライブラリを組み込んで、TodoListを作ってみました。 作ったやつ とりあえず現状だと接続先のFirebaseデータベース残してるから動くけど、その内消すかも。 コード比較 VuexFireの有無でのStoreのコードを比較してみます。 import Vuex from 'vuex'; import Vue from 'vue'; import { ADD_TODO, REMOVE_TODO } from './action-types'; Vue.use(Vuex); export default new Vuex.Store({ strict: process.env.NODE_ENV !== 'production', state: { todos: [], }, mutati
【Vue.js,Firebase】麻雀好きのエンジニアによる麻雀好きのためのサーバレスな麻雀成績管理PWAアプリをリリースした【個人開発】 - Qiita
【Vue.js,Firebase】麻雀好きのエンジニアによる麻雀好きのためのサーバレスな麻雀成績管理PWAアプリをリリースした【個人開発】Vue.jsWebサービスFirebase個人開発PWA 今までにない麻雀成績管理アプリをリリースしました！ https://t.co/jjpEyVcSHh 麻雀の成績管理アプリローンチしました！ 全ての麻雀好きのためになりますように！ — kooooohe@旅人 (@kooooohe_) 2018年11月5日 背景 雀荘に行くたびに麻雀の成績をほとんどの人が紙で書いている かくいう私もアプリを数個入れていたが、結局紙に成績をつけてしまっていた... 紙のUI,UXにアプリが勝てていないのか？ 元雀荘店員エンジニアとして、最新技術を駆使し、麻雀成績管理Appを作ることが私の責務である 機能要件 PWA 麻雀の得点を記録できる 得点の履歴が見れる 3人の点
Vue.js＋Firebase+Stripeをさわさわしてみるーその１
久しぶりにプログラミング言語の海をさまよっていると、何やら「Vue」という聞きなれないフレームワークが流行っているのだとか。なんでも、Reactさんがとってもフレンドリーになったイケメンのようなフレームワークだとか。 雑食系としては手を付けないわけにはいきません！というわけで早速さわさわしてみたのでちょっとまとめておきます。 やること Vue-cliを使ってアプリケーションを作ってみます。 + 認証とDBにはFirebaseを採用します。もちろん無料枠で！ + 外部APIとの連携についてもちょっとトライしてみます。jalanさんとyelpを使いたいと思います。 + せっかくなんで課金機能もちょちょいと組み込んでみましょう。stripeでいいかな。 開発環境はwindowsにubuntsuのっけてやってます。nodeとnpmが入ればぶっちゃけなんでもOKです。 ステップ1：vue-cliの準
退勤時間を記録するだけのサービスをVue.jsとFirebaseで作成した
作ろうと思ったきっかけ よく退勤時、いつも退勤時間を記録し忘れてオフィスを離れてしまうのです。翌日、会社に来てから 「あれ・・・？俺、昨日何時頃に退勤したっけ・・・？」 ってわからなくなる。 というか、退勤のときにIC端末に”ﾋﾟｯ”ってするんですけどね、何時に退勤したのかわからなくなるの。 （まあ、帰る前に勤怠管理システムに入力してから帰れよって話です けどねｗ） さて、そんなわけで、スマホにメモすればよくね？って思ったので、Google Keepとかにメモはしてたのです。 しかしね、スマホで”09/21 18:50”って入力するの、結構めんどくさいです。 だったら作ってしまえ！！！ってことで、作ることにしました。 実際に運用しているサービス→ https://workenddays.firebaseapp.com/ コードは後ほどGitHubに掲載考えています。 今回使用した技術 Vu
Vue.jsとfirebaseでクラウドメモアプリを作ってみた - Qiita
※追記 2018/09/23 PWA対応してみた！ なんか気づいたら前回の投稿から2年半が過ぎてた。やばい。 そしてあまりに仕事がなくて暇だったので、前々から気になってたVue＆firebaseで何か作ってみようと思った次第。 で、何となくメモアプリを選択した。 自分なりの要件 レスポンシブ対応 ログイン認証（メール・パスワード、Google認証） メモの追加、編集、削除 パスワード変更 パスワードリセット アカウント削除 上記に加えてMarkdown対応してもよかったけど、周囲には「Markdown？何それ？」って人（事務さんとか営業さんとか）の方が多いのでスルーした。あえてね。 成果物 ソース 感想 Vue楽しすぎぃ firebase便利すぎぃ 次はToDoアプリ作ろうかな。 参考 https://qiita.com/renowan/items/bf1747aabc874bfd85ab
Cloud Firestore with Vue.jsで簡単なメモアプリを実装する - Qiita
概要 以前に投稿した「Vue.jsで簡単なメモアプリを実装する 」に続く記事で、メモアプリのデータ管理をGoogleのCloud FirestoreというNoSQLデータベースを利用するように改修しました。 この記事の前半でCloud Firestoreを利用するまでの手順、後半でメモアプリをどのように改修したのかを説明します。 環境 Windows 10 Professional Node.js 8.11.1 Vue.js 2.5.16 Vuex 3.0.1 vue-router 3.0.1 firebase 4.13.1 Cloud Firebase Beta Visual Studio Code 1.23.0 参考 Cloud Firestore | Firebase Overview | Firebase Googleが運営するFirebaseというMBaasサービスがありますが、
Vue vuexでfirebaseのログイン保持 - Qiita
移行しました 最新のVue3で書き直しました！Zenn Vue3でFirebaseログイン 以下は2年前の情報です。 Vueチュートリアル vuexでfirebaseのログイン保持 Vue.jsでfirebaseのログイン実装の記事はよく見かけますが、単一コンポーネント内での処理ばかりでした。 なので全体でログイン状態を共有できるようvuexを導入したいと思います。 vuexにデータを入れると、どのコンポーネントからでもアクセスできます。 Vueでプロジェクトの作成からやりたいと思っています。 DEMOページ ・ログイン及びログアウトボタンを表示するコンポーネント ・ユーザー情報を表示するコンポーネント 以上の2つで、vuexのデータへアクセスしています。 環境 node 8.11.4 npm 5.6.0 vue 3.0.1 npm install -g @vue/cli npm inst
Vue.jsとWebSpeechAPIを利用して音声文字起こし補助サイトを作った話 - Qiita
音声を文字起こしを補助するサイトを作ってみましたので作るまでの経緯や作ってみた感想などをずらずらと書いてみたいと思います。 Vue.js(Nuxt.js)+Firebaseでサイトを構築しているため、お金がかかったところと言えば独自ドメイン取得のところだけでした。 サイト制作までの経緯 会議の発言を全部文字起こしする際や、誰かにインタビューを行った後に内容を文字起こしする際に使うと便利かなーと思って「モジロイ」というサイトを作ってみました。 モジロイ 現在はクローズしましたmm ※ 音声認識はPCのGoogle Chromeでしか利用できません。 書き起こしイメージ↓ 最近Vue.jsを触っていたことから「Vue.jsでサイトを作りたい！」欲が高まって制作を決意しました。 どんなものを作るかで一番悩んでいたのですが、常々と課題に感じている「会議の議事録取り」に視野を当ててみました。 元々議
Vue.js + Firebaseでポートフォリオを作ろう！ - Qiita
追記 この記事は公開から一ヶ月後くらいに、中身をだいぶ変えました。 前の記事が読みたい方はこちらからどうぞ。 今のコードの方が結構マシなはずなので、あまり需要は無いでしょうが...。 旧 https://qiita.com/sosumii/items/f097bf8b2209b9d75d1a/revisions/9 https://github.com/sosmii/hello-sosmii/tree/f4dc0f0295e5ffd569fb828e6b2e6559f5844874 作っていきましょう 突然ながらエンジニアのみなさま、ご自身の実力を市場にアピールできるような成果物をお持ちでしょうか？ 会社が信用できなくなった時の備えとして、良いチャンスを掴むためのきっかけとして、外から見える成果というのは用意しておいて損はありません！ 本記事は、私がサーバーサイド処理を組み込んだポートフォ
Vue.jsとFirebaseで本番環境、ステージング環境をなるべく節約して構築する - GAミント至上主義
yagish履歴書は、システム1人、デザイン1人、イラスト1人、計3人の小さなチームで作っていて、開発は非常に身軽なので、本番公開時もローカルの開発環境＋Firebase本番環境だけだった。 rirekisho.yagish.jp でもさすがに大きな変更を本番でやるのは怖いので、手間と費用をなるべく抑えつつ、Firebaseを使ったステージング環境を構築することにした。 開発環境はVue CLI 3で構築。 cli.vuejs.org 環境変数 これは3ファイルで分ける .env.production .env.development .env.stagingステージング環境について公式ドキュメントに書いてあるので、参考にする。 cli.vuejs.org .env.staging NODE_ENV=production VUE_APP_TITLE=My App (staging)ただNO
Vue.js + Firebase を使って爆速でユーザ認証を実装する - Qiita
最初に この記事はVue.js アドベントカレンダー#4 25日目の記事です。 この一ヶ月でVue.jsについてのナレッジが100記事増えたことになります。やったね！！ 2018/8/2 追記 現在では vue-cli の3.x.xがリリースされており、スキャフォールドからVueプロジェクト作成の工程が若干異なりますのでご留意ください。 この記事でやること バックエンドをFirebaseに丸投げしたユーザ登録 → サインイン → サインアウト までのチュートリアルです。 認証の実装は面倒 フロントエンドの技術を使ってちょっとしたアプリケーションを作った時、認証やユーザ管理を実装するのはそれなりに面倒かと思います。フレームワークの選定、DBは何使う?など決めなければならないこと、覚えなくてはならないことがたくさんありますね。 そこでBaaSを使います。 BaaSって？ Backend as
Vue.js（v2.x.）を使ってメモアプリを作ってみた - Qiita
* この記事では、説明のためのサンプルコードを書いていますが、Githubにあるコードとは似て異なります。ご注意ください。 環境 vue-router、vuex、Firebase を使っています。 vuefire はあえて使用していません。 vuex から Firebase を呼び出しています。 vue-router@2.x. vuex@2.x. vuex-router-sync@3.0.0 babel (es2015, stage-2) webpack webpack-dev-server firebase@3.6.2 lodash@4.17.x moment@2.17.x 画面遷移 vue-router を使い、３つの画面を管理しています。 - Index（タイムライン） - Viewer（ひとつのメモを見る） - Editor（メモを追加、編集） それぞれ、URLが個別に割り当てられ
vuefireでFirestoreとbindするときにハマったこと - Qiita
今回はvuefireでFirestoreをbindするときにすこし手間取ったので、それを共有したいと思います。 まず最初に結論から言うと、いままで存在していた$bindAsArray、$bindAsObject関数は無くなり、$bindに統合されました。 自分の場合は下記のエラーで異変に気づき、どうしても解決できず、issue立てたら教えてくれました。 You don't need to specify anymore if it's a collection or a document 🙂 , so it's just $bind: https://github.com/vuejs/vuefire/blob/firestore/examples/index.html#L113 examplesをみてれば一発だったようです（READMEに書いて・・）。 さて、ここからは簡単なfirest
vue.js+firebase+vuefireで作るチャット - Qiita
仕様 vue.js 2.5.13 firebase 2.3.2 vuefire 1.4.4 rails 5.1.4 ruby 2.3.0p0 (2015-12-25 revision 53290) でチャットアプリを作る。webでサーバの設定とかを気にせずチャットを作りたいなと思い、firebaseを用いることにした。 vuefireについて vuefireはvue.jsのdataとfirebaseをバインディングしてくれるもの。 やったこと vue.jsの導入 npm、webpackerを用いて導入。packフォルダ内にてjavascriptを記入していく。vue.jsは対象のidのものが先に読み込まれていないと発火しないのでbody閉じタグ前にjavascriptを記載する必要がある。 firebaseの導入 <!--firebaseのライブラリ読み込み--> <script src=
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - posva/vuexfire: Check
GitHub - vue-bulma/vuexfire-admin: A Vue / Vuexfire app with Firebase auth. Based on vue-admin, using vuex, vuexfire, vue-router and firebase as the backend.
GitHub - yuking11/mymo: クラウドメモアプリ「MyMo」
5分でvueのアプリを作りfirebaseにhostingする - Qiita
【開発部ブログ】Firebase Authenticationを使ったユーザー認証 - 音楽コラボアプリ nana