経緯 私Google系はド素人だったのでハンズオン勉強会に参加した所短時間でスムーズにざっくり理解できた気がするので自分なりに整理するために記事にしました。（開催元には許可頂いてます） 参加した勉強会 こちらの勉強会に参加しました。案内のとおり、若手エンジニアが多く私浮いてた気がしますが全く気にしてないです。若い世代のエンジニアと交流すると私もがんばらなきゃという気になります。 ハンズオンスライドがとてもわかりやすかったです。このスライドの手順さえあれば1時間で簡単に作れます。 こういうの作るの大変だけど自分自身勉強になるんだよね。 おそらく、Googleが提供しているここのFirebaseWebCodelabのチュートリアルから翻訳とカスタマイズして作成したんだと思います。 完成イメージ こんなのが作成できます。Google認証も簡単に実装できちゃう。 アプリの構成 作成するチャットアプ
github https://github.com/ebatetsu/firebase_vue_chat Firebaseプロジェクト作成 https://console.firebase.google.com/?hl=ja ここからプロジェクトを作成 Vue.jsの開発環境構築 Vue CLIを使用するのでインストール $ npm install -g vue-cli 任意のディレクトリでプロジェクトフォルダ作成 $ vue init webpack [project_name] とりあえず全部EnterでOKです。 ディレクトリ移動 $ cd [project_name] パッケージをインストールする $ npm install sassで書きたかったら $ npm install sass-loader node-sass --save-dev ローカルサーバー起動 $ npm ru
Firebaseは、Googleが運営しているBaas(Backend as a Service)です。最近人気のサーバレスアプリケーションが簡単に作れることで有名です。ちなみに「サーバレス」とは、別にサーバーを使わないという意味ではなく、サーバーを意識しないで開発できることを言います。 今回、Firebaseの知見がだいぶ集まってきたので、今までで勉強になったサイトや記事などをまとめました。ちなみに、私がフロントエンドをVue.jsで構築しているため、Vue.jsよりの情報になっているのでそこは気をつけてください。 Firebase公式ドキュメント Qiita 個人ブログ 書籍 ドットインストール（動画） まとめ Firebase公式ドキュメント https://firebase.google.com/docs/guides/ いきなりのド直球ですが、この公式ドキュメントを見なくては始ま
絵描きとかUXとかやりつつフロントもやってる「ゆき」です。ポートフォリオサイトは10年くらい前にMoveableTypeで作ったきり。最近流石に「これでフロントやってますとか言ったら絶対次転職できなくね？」と危機を感じたので0から作り直しました。 サイト： https://pf.nekobooks.com/ ソース： https://github.com/yuneco/portfolio 機能・性能・運用を考えて作った結果、VueとFirebase(Web)の機能を一通り使ったサイトが出来上がりました。これからちょっと凝ったポートフォリオサイトを作りたい方向けに、どういう目的でどの機能を使ったのか、その時のポイントはなんだったのかを共有します。 2019.4.18追記 春なので期間限定1で桜が咲くアニメーションを追加してみました。単体のアニメーションはテストページで試せます。複雑に見えるか
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
