もっさり日記

だらだらと。

出社3日目

7/1から渋谷で働き始めてはや3日経ちました

業務はvue.jsメインの案件に入ったもののまだ設計段階でそこまでやる事がなくて地味に手持ち無沙汰ではあります。

今は環境揃えたり社内ツール覚えたりですね。

 

昨日プロジェクトテンプレがあがってきたのでソースと設計見つつ本腰入れてく感じかな?

 

とにかくあまり経験のないFWなんでこれを機にツヨツヨになりたいところです

Nuxt.js + Firebase

勉強がてらなんちゃってToDoアプリ作成
ドキュメント読みながら2時間くらいなのでかなり雑です。

todonuxt.firebaseapp.com

途中で見つけたアイコン生成ツールがすごく可愛くて
こっちでアイコン作るほうが楽しくてちょっとやばかったのは秘密
charat.me

【vue.js】やってて色々覚えたこと。

最近vue.jsを勉強し始めて案件にもこっそり採用しました。
色々とハマったりもしたけど快適になってきた。
サヨナラKnockout.js(`;ω;´)

1.地味にハマったビルド時のパス
単体.vueファイルとかビルドされると読み込まれるけど、リリース時に
出力先設定しとかんと /js/xxxxx.jsとかになって読み込めない場所だったりする。
vue.config.jsに下記設定でとりあえず回避

baseUrl: process.env.NODE_ENV === 'production' ? '././' : '/'

あとでかく。

【Firebase】Hosting & Realtime Database

ちょっと興味があったのでHostingとRealtimeDatabaseを利用してチャットを作成しました。
ドキュメントを読んで勉強してある程度動くまでで5時間程度
ついでにPWAの設定をいれてスマホのホーム画面にアイコン置けるようにもしました。
所々ハマったりもあったのでメモ程度に残しておきます。

・Firebaseの導入
参考サイトは沢山あるのでそちら参照してください。

Google認証の導入
最初はポップアップ型にしてたのですがポップアップブロックされて面倒なので
リダイレクト型にしました。
その際、何も考えずに作ったら無限ループしてしまって悲しみ。
下記のサンプルのまんまで正常に動くようになりました。
github.com

・PWAの導入
下記サイト参考にさくっといけました。
qiita.com

ちなみにアイコンは下記サイトで生成、なかなか( ・∀・)イイ!!
hatchful.shopify.com

こんなアイコンが秒速でつくれました(*´∀`*)
f:id:kaipu1224:20190111112437p:plain

・チャットデータの同期
昔チャット作った時は結構苦労したのですが、簡単にできすぎてヤバイですね。
チャットの削除とかはないので今回は追加時のみで大丈夫でした。

// コメントが投稿された時のコールバック
var chatDbRef = firebase.database().ref().child("chat");
chatDbRef.on("child_added", function(snapshot, key){
  // 1件単位で届くのでコメント一覧に適宜登録してく
}

・できあがった画面は以下の通り
ログイン画面
f:id:kaipu1224:20190111113641p:plain

チャット画面(テストに付き合ってもらった友人の情報は隠させてもらいます。)
f:id:kaipu1224:20190111113622p:plain

機能面はまだ全然足りてないですが、徐々に増やして遊びたいと思います。