vue.js 猫本 やって見た。属性のデータバインディング v-bindの修飾子
p58 のv-bindの修飾子でつまずいたのでまとめます。
サンプルを作ってもスクロールしたかどうかよくわからない。
サンプルは猫本を購入してください。
サンプルにはtext-content.prop scroll-top.propがサンプルとして挙げられてます。
私はこれを使うに当たってわからんが出ました。
javascriptでいうと、
- text-contentは
- scroll-topは
こちらで記述できるのでは?と何故ケバブケースで記述するんだろう?
こちらに答えがありました。
公式ドキュメントに答えが属性名は大文字、小文字を区別できません。大文字か小文字でねってことだそうです!区別したかったらケバブケースで記述する。
なるほど~。だから大文字の文字の直前を-で挟んで、小文字にしてるんですね。
そして.propをつけることで$elにプロパティを設定できるそうです。
そして動くサンプル。
firebaseとVue.js入門
前書き
WebBench という勉強会に参加してきました!
Firebaseでリアルタイムチャットを制作
2018/09/02 13:00〜
この講座ではfirebaseとjavascriptで簡単なアプリを作ることが目的でした。
自分はこのイベントで作ったものをvue.jsで作り直しましたのでご紹介させてください。
お品書き
・firebaseとは
・firebaseの設定
・vue.jsコードを記述
・firebaseで公開
firebaseとは
firebaseはgoogleが運営しているサービス
(2014年 後半 に買収)
Bassなどと呼ばれ、開発フェーズに置けるログインや分析やチャットなどいかに早く安全に作るかという目的
googleによるインフラ運用管理
マルチプラットフォームのサポート→ FirebaseAPIによる複数言語への展開が可能
プロダクト
Realtime Database → リアルタイムでの同期
Cloud Firestore → データベース
Authenication → パスワードや電話番号を認証
FirebaseAuth ソーシャルログイン
試した開発環境
macOS High Sierra バージョン10.13.6
$ firebase --version
4.2.1
$ node -v
v10.6.0
Firebaseを初める
Firebase Realtime Databaseのプロジェクトを作成
※ googleアカウントが事前に必要です。
事前にgmailでログインした状態にしてください。
ブラウザーより https://firebase.google.com を開きます。
右上の コンソールへ移動 をクリックします。
プロジェクトを追加
をクリックします。プロジェクトの追加画面の設定
プロジェクト名を入れます。 myFirstVueApp
地域/ロケーション アメリカ合衆国
から 日本
に変更します。
アメリカ合衆国横にある、鉛筆
をクリックする。
プルダウンより、 日本
に変更します。
CloudFirestoreのロケーション us-central
であることを確認します。
各種チェックを入れます。
Firebase 向け Google アナリティクスのデータ共有にデフォルトの設定を使用する done
測定管理者間のデータ保護条項に同意します。Google サービスの改善のためにアナリティクス データを共有する場合は同意する必要があります
プロジェクトを作成
ボタンをクリックします。
新しいプロジェクトの準備ができましたと表示されたら
次へ
ボタンをクリックします。
FireBase CLIのインストール
firebaseCLI は Firebaseプロジェクトの管理、表示、デプロイを行うためのツールです。
※ 事前にNode.jsをインストールしている必要があります。
- Node.jsがインストールされているとターミナルで以下のコマンドを入れるとバージョンが表示されます。
$ node -v
v10.6.0
※ バージョンが表示されない場合はnode.jsをダウンロードしてください。
- Firebase CLI のダウンロード
$ npm install -g firebase-tools
-g オプションでは グローバルインストールされpathが通ります。
- Google アカウントを使用してログインします。
$ firebase login
Already logged in as test@gmail.com
※ 違うアカウントでログインしていた場合ログアウトし、再度ログインし直す。
$ firebase logout
Logged out from test@gmail.com
- Allow Firebase to collect anonymous CLI usage and error reporting information?
匿名で情報を収集していいですか?と聞かれるのでY/n
をクリックします。
ブラウザが開いて、googleアカウントでログインします。
Firebase CLI が Google アカウントへのアクセスをリクエストしていますと表示されるので、
許可
ボタンをクリックします。Firebase CLI Login Successful と表示されFireBase CLIのインストールが完了しました。
プロジェクトの初期化
- 作業ディレクトリの作成と移動
ターミナルより、myFirstVue
というディレクトりを作成して移動します。
- 作業ディレクトリの中で、firebaseの設定
$ firebase init
You're about to initialize a Firebase project in this directory:
/Users/ユーザー名/myFirstVueApp
このディレクトリにFirebaseプロジェクトを初期化しようとしています。 このコマンドを実行すると、作業ディレクトリに、`firebase.json`構成ファイルが作成されます。 このファイルはCLIを使用して、サイトにデプロイするために必要です。
? Which Firebase CLI features do you want to setup for this folder?
このフォルダーにどのFirebase CLIの機能を設定しますか?
Press Space
to select features, then Enter to confirm your choices. (Press
矢印キー
で機能を選び、スペースキー
で選択。Enterキー
で機能を確定します。
◯ Database: Deploy Firebase Realtime Database Rules
◯ Firestore: Deploy rules and create indexes for Firestore
◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
- こちらを選択し、静的サイトを作ります。
◯ Storage: Deploy Cloud Storage security rules
Hosting: Configure and deploy Firebase Hosting sites Hosting(ホスティングとは) 今回使うFirebase Hostingは、静的ホスティングといい。ウェブアプリと静的コンテンツをコンテンツを配信できます。 ホスティングとはサーバーを借りて、そこにアプリを置き公開するまでの一連を指します。
? Select a default Firebase project for this directory: (Use arrow keys)
このディレクトリをデフォルトのFirebaseプロジェクトとして選択します:(矢印キーを使用)
- 先ほどプラウザー上で作ったFirebaseプロジェクトを選択します。
矢印キー
で選択してenterキー
で確定します。
[don't setup a default project]
❯ myFirstVueApp (myfirstvueapp)
[create a new project]
? What do you want to use as your public directory? (public)
あなたのパブリックディレクトリとして何を使いたいですか?
enterキー
で確定します。
Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
シングルページアプリケーションとして使用しますか?
yキー
をクリックしてenterキー
で確定します。
開発用ローカルウェブサーバーの起動する
$ firebase serve
ブラウザーからhttp://localhost:5000/を起動するとWelcomeサイトが表示され完成です。
サーバーの停止はcontrol + c
リアルタイムデータベース機能の組み込み
https://console.firebase.google.com より作成したプロジェクトをクリックします。
</>
マーク又は、左側のメニューにあるAuthentication → ウェブ設定
の順にクリックします。ウェブアプリにFirebaseを追加
が表示されたら、以下のスニペットをコピー
ボタンをしてコピーします。
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"></script> <script> // Initialize Firebase var config = { apiKey: "apiKey", authDomain: "projectId.firebaseapp.com", databaseURL: "https://databaseName.firebaseio.com", projectId: "projectID", storageBucket: "bucket.appspot.com", messagingSenderId: "id" }; firebase.initializeApp(config); </script>
vue.jsコードを記述
htmlソースがある場所は、作業ディレクトリ/public/
にindex.html
にあり、
HTML の一番下、他のスクリプトタグの前に、前の節でコピーしたスニペット貼り付けます。
- そのあと各々のアプリの部分を作り込見ます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Welcome to Firebase Hosting</title> <!-- update the version number as needed --> <script defer src="/__/firebase/5.4.2/firebase-app.js"></script> <!-- include only the Firebase features as you need --> <script defer src="/__/firebase/5.4.2/firebase-auth.js"></script> <script defer src="/__/firebase/5.4.2/firebase-database.js"></script> <script defer src="/__/firebase/5.4.2/firebase-messaging.js"></script> <script defer src="/__/firebase/5.4.2/firebase-storage.js"></script> <!-- initialize the SDK after all desired features are loaded --> <script defer src="/__/firebase/init.js"></script> </head> <body> <div id="app"> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> <button type="button" v-on:click="changeData">送信</button> </div> <script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"></script> <script> // Initialize Firebase var config = { apiKey: "コードが入ります", authDomain: "コードが入ります", databaseURL: "コードが入ります", projectId: "コードが入ります", storageBucket: "コードが入ります", messagingSenderId: "コードが入ります" }; firebase.initializeApp(config); </script> <!-- vue.js cdn --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message:'' }, created: function () { firebase.database().ref('test/').on('value',snapshot =>{ /* console.log(snapshot.val()) */ this.message =snapshot.val().text }) }, methods: { changeData: function () { firebase.database().ref('test/').set({text: this.message}) } } }); </script> </body> </html>
firebaseで公開
Databaseの設定
Firebase左側のメニューにある
Database
をクリックします。Realtime Database の項目を探して、
データベースを作成
をクリックします。Realtime Databaseのセキュリティルール画面が表示されたら、
テストモードで開始
を クリックします。最後に
有効にする
ボタンをクリックします。
ローカルサーバーを起動
ターミナルで、作業ディレクトリにいることを確認します。
$ firebase serve
ブラウザーで確認
firebaseにデータが追加されたか確認
ブラウザーより、プロジェクトのメニュー画面を表示します。
メニュー左側にある
Database
をクリックします。続いて、
データ
タブをクリックします。
すると、myfirstvueapp プラス(+) test と表示されプラスをクリックすると
データが入っていることがわかります。
ホスティング環境にデプロイ
できたアプリを公開してみます。デプロイとは公開するという意味です。
$ firebase deploy
完成したfirebaseのサイトを開く
$ firebase open hosting:site
https://アプリ名.firebaseapp.com
がブラウザーより表示され、テキストボックスの値を変更して送信ボタン
をクリックすると・・
再度、firebaseのDatabaseから確認すると変更が保存されていることがわかります。
github入門
gitHub入門
GitHub上のレポジトリをローカルにcloneし、ローカルレポジトリを製作します。
お品書き
事前準備
メールアドレスが必要です。
作業ディレクトリを作成する必要があります。
$ mkdir workdir
まずはともかくGitHubの登録
- ブラウザより
https://github.com
を開く
- 早速登録
Username → 表示名です。 あだ名ぐらいで大丈夫です。
Email → ログインする為のメールアドレスです。
Password → ログインする為のパスワードです。
Sign up for GitHub
ボタンをクリックします。
- Choose your personal plan 料金プランを設定します。
無料プランを使用するので、
Unlimited public repositories for free.
を選択します。
Continue
ボタンをクリックします。
- アンケートに答えます。
How would you describe your level of programming experience?
プログラミング経験は?
Very experienced → ベテラン経験者です。
Somewhat experienced → ややプログラミングを経験しています。
Totally new to programming → プログラミング初心者です。
What do you plan to use GitHub for? (check all that apply)
GitHubをどのように使う予定ですか?
Project Management → プロジェクトマネージメント
Design → デザイン
Research → 研究
Development → 開発
School projects → 学生
Other (please specify) → その他
Which is closest to how you would describe yourself?
貴方はどのような人物ですか?
I'm a hobbyist → 愛好家です。
I'm a student → 学生です。
I'm a professional → プロフェッショナルです。
Other (please specify) → その他
What are you interested in?
貴方は何に興味がありますか?
Submit
ボタンをクリックします。
- メールが送信されているので確認
Verify email address
をクリックします。
リモートレポジトリを作ります
New repository
ボタンをクリックします。Repository name
にプロジェクト名を入力します。Public
ボタンにチェックがあることを確認します。Initialize this repository with a README
リモートプロジェクトの説明を記載する README.md を作るために、
チェックを入れます。
Create repository
ボタンをクリックします。
ローカルレポジトリとリモートレポジトリを連携する為の情報の取得
Clone or download
ボタンをクリックします。
Clone with HTTPS
https://github.com/ユーザー名/レポジトリ名.git をコピーする
cloneでリモートレポジトリの情報をローカルに取得する
- ターミナルで作業ディレクトリに移動します。
$ cd workdir
git clone の引数は、先ほど取得したClone with HTTPSのURLを貼り付けます。
$ git clone https://github.com/ユーザー名/レポジトリ名.git
Cloning into 'レポジトリ名'... remote: Counting objects: 3, done. remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0 Unpacking objects: 100% (3/3), done.
- Finderでリモートレポジトリのクローンを確認します。
レポジトリ名/README.md があり、README.mdを確認するとGitHubのREADME.mdと同じことがわかります。
できたレポジトリ名のディレクトリにファイルをおく
GitHubにアップロードしたいファイルを起きます。
ユーザ名登録
GitHubのUser情報を登録します。
$ git config --global user.name "ユーザ名"
$ git config --global user.email ユーザーEメールアドレス
ローカルレポジトリの内容をインデックスに追加
ターミナル作業です。
できたリモートレポジトリ名のディレクトリに移動します。
$ git add .
又は
$ git add ファイル名(ディレクトリ名)
インデックスの状態を確認します
$ git status
On branch master Your branch is up to date with 'origin/master'.
Changes to be committed:
(use "git reset HEAD
new file: index.html
コミットする
$ git commit -m "first commit"
[master 1ede58e] first commit 1 file changed, 37 insertions(+) create mode 100644 index.html
ローカルレポジトリの変更内容をリモートレポジトリに反映する
$ git push
- githubの入力パスワードの入力が求められる
Password for 'https://ユーザー名@github.com':
Counting objects: 3, done. Delta compression using up to 4 threads. Compressing objects: 100% (2/2), done. Writing objects: 100% (3/3), 271 bytes | 271.00 KiB/s, done. Total 3 (delta 0), reused 0 (delta 0) To https://github.com/ユーザー名/レポジトリ名.git e61bcdb..a9496a9 master -> master
githubへgit pushしようとすると403エラーとなる
一つのmacで二つのユーザーでリモートレポジトリにpush使用とすると起きました
$ git push
remote: Permission to ユーザー名/レポジトリ名.git denied to ユーザー名. fatal: unable to access 'https://github.com/ユーザー名/レポジトリ名.git/': The requested URL returned error: 403
解決方法
$ git clone https://ユーザー名B@github.com/ユーザー名B/レポジトリ名
githubがログイン情報(ユーザー名・パスワード)を記憶しているのだと思います。この場合、URLにユーザー名を記載することで、別の資格情報を記憶させることができます。
ユーザー名Bは、pushしたい先のユーザーを記載します。