What's New Qiita

20200310のvue.jsに関する記事は9件です。

  • 投稿日：2020-03-10T21:19:15+09:00

Vuetifyのv-data-tableで階層構造のデータを検索できるようにする

最近はAngularからVue.jsに浮気中の8amjpです。Vue.jsめっちゃ楽しいです。

v-data-tableコンポーネントを使う

さて、下記のようなデータがあるとします。
（ちなみにこのデータ、Zabbix APIで取得できるホスト一覧データから抜粋したものです）

[
    {
        "hostid": "1",
        "host": "Server 1",
        "description": "サーバ1号機",
        "parentTemplates": [
            {
                "name": "Windows Servers",
                "templateid": "1"
            },
            {
                "name": "Web Servers",
                "templateid": "2"
            }
        ],
        "interfaces": [
            {
                "interfaceid": "1",
                "ip": "192.168.1.1",
                "port": "80",
            }
        ]
    },
    {
        ....

よくあるタイプのJSONデータですね。parentTemplatesやinterfacesといった項目が配列になっており、その中に複数の子オブジェクトが格納されている……という階層構造になっています。

さて、このデータを、Vuetifyのv-data-tableコンポーネントを使って表示すると、こんな感じになると思います。

<template>
  <v-data-table :headers="headers" :items="items" :search="search">
    <template v-slot:top>
      <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line/>
    </template>
    <template v-slot:item.parentTemplates="{ item }">
      <div v-for="i in item.parentTemplates" :key="i.templateid">{{ i.name }}</div>
    </template>
    <template v-slot:item.interfaces="{ item }">
      <div v-for="i in item.interfaces" :key="i.interfaceid">{{ i.ip }}:{{ i.port }}</div>
    </template>
  </v-data-table>
</template>

<script>
export default {
  props: ['items'],
  data () {
    return {
      search: '',
      headers: [
        {
          text: 'ホスト名',
          value: 'host',
        },
        {
          text: '説明',
          value: 'description',
        },
        {
          text: 'テンプレート',
          value: 'parentTemplates',
        },
        {
          text: 'インターフェース',
          value: 'interfaces',
        },
      ]
    }
  },
}
</script>

階層構造のデータは、そのままだと表示できないので、item.<name>スロットを使ってv-forですべてのデータを表示したりします。便利ですねー。

カスタムフィルタを使う

さて、ここから本題。

v-data-tableは、データを簡単にフィルタリングするためにsearchプロパティが用意されています。
バインドされたテキストフィールドに文字を入力すると、その文字列が含まれる行のみをフィルタリングできます。よくある機能ではありますが、最初から用意されていると実装もとても簡単。

ところが、です。前述のデータで言うと、hostやdescriptionなどの項目はフィルタリングできるのですが、parentTemplatesやinterfacesの項目に含まれるデータはフィルタリングができません。例えば、「Windows」というキーワードを入力してもヒットしません。
理由はもちろん、文字列じゃないから。さすがに配列の中身までは検索してくれません。
こういう時こそカスタムフィルタの出番です。

標準のフィルタを確認する

まずは、標準のフィルタがどういう動きをしているのか確認します。

function defaultFilter(value, search, item) {
  return value != null &&
    search != null &&
    typeof value !== 'boolean' &&
    value.toString().toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) !== -1;
}

この中のvalueという変数に、JSONデータの「値」の部分が入るんですけど。
値が配列の場合でも、うまい具合に文字列に変換して渡すことで、なんとかなりそうな感じがします。

では実際にやってみましょう。v-data-tableのcustom-filterプロパティに独自のメソッドを追加することで、動作を上書きすることができるんです。
まずはcustom-filterプロパティを追加して、独自のメソッドを指定します。

  <v-data-table :headers="headers" :items="items" :search="search" :custom-filter="customFilter">

で、追加したメソッドで、フィルタリングの動作を上書きします。こんな感じで。

  methods: {
    customFilter (value, search) {
      return value != null &&
        search != null &&
        typeof value !== 'boolean' &&
        // value.toString().toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) !== -1;
        (typeof value === 'object' ? value.map(v => v.name).join('\t') : value)
          .toString().toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) !== -1;
    },
  },

まず、変数value（=JSONデータの「値」）の型をtypeof演算子で判定します。
で、objectだった場合は配列とみなし、.mapメソッドで配列内のnameプロパティのみを抽出して、タブ文字で連結して単一の文字列にしています。
このように、単一の文字列にしてしまうことで、検索ができるようになります。
（当然ながら、typeofでobjectが返ってきても、配列じゃない場合もあるんですけど。その辺は使用するデータに応じて各自いい感じに処理を分岐してくださいね（丸投げ））

ついでに、interfaces配列内のipプロパティも検索対象に含めたい場合は、こんな感じでどうでしょうか。

        (typeof value === 'object' ? value.map(v => v.name || v.ip).join('\t') : value)
          .toString().toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) !== -1;

完成

完成品はこちらです。わーい。

<template>
  <v-data-table :headers="headers" :items="items" :search="search" :custom-filter="customFilter">
    <template v-slot:top>
      <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line/>
    </template>
    <template v-slot:item.parentTemplates="{ item }">
      <div v-for="i in item.parentTemplates" :key="i.templateid">{{ i.name }}</div>
    </template>
    <template v-slot:item.interfaces="{ item }">
      <div v-for="i in item.interfaces" :key="i.interfaceid">{{ i.ip }}:{{ i.port }}</div>
    </template>
  </v-data-table>
</template>

<script>
export default {
  props: ['items'],
  data () {
    return {
      search: '',
      headers: [
        {
          text: 'ホスト名',
          value: 'host',
        },
        {
          text: '説明',
          value: 'description',
        },
        {
          text: 'テンプレート',
          value: 'parentTemplates',
        },
        {
          text: 'インターフェース',
          value: 'interfaces',
        },
      ]
    }
  },
  methods: {
    customFilter (value, search) {
      return value != null &&
        search != null &&
        typeof value !== 'boolean' &&
        (typeof value === 'object' ? value.map(v => v.name || v.ip).join('\t') : value)
          .toString().toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) !== -1;
    },
  },
}
</script>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-10T21:12:32+09:00

Vue CLIのバージョンが上らず困った件

概要

vue create を実行するために、Vue CLIのバージョンをあげようとしたらすごく初歩的なミスで躓いたので、同じようなミスをしてしまった人のためにメモしておきます。

vue create したい

nakanohatonoMBP:~ hayato$ vue create vue-chatkit
  vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
  You may want to run the following to upgrade to Vue CLI 3:
  npm uninstall -g vue-cli
  npm install -g @vue/cli

Vue CLIのバージョンが古い。３以上じゃないとダメらしい。

@vue/cli の更新（再インストール）

言われた通り、
"npm uninstall -g vue-cli" と "npm install -g @vue/cli" を実行。

nakanohatonoMBP:~ hayato$ npm uninstall -g vue-cli
up to date in 0.062s

nakanohatonoMBP:~ hayato$ npm install -g @vue/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
/Users/hayato/.nodebrew/current/bin/vue -> /Users/hayato/.nodebrew/current/lib/node_modules/@vue/cli/bin/vue.js
> fsevents@1.2.11 install /Users/hayato/.nodebrew/current/lib/node_modules/@vue/cli/node_modules/fsevents
> node-gyp rebuild
No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.
gyp: No Xcode or CLT version detected!
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack    at ChildProcess.onCpExit (/Users/hayato/.nodebrew/node/v13.3.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack    at ChildProcess.emit (events.js:219:5)
gyp ERR! stack    at Process.ChildProcess._handle.onexit (internal/child_process.js:274:12)
gyp ERR! System Darwin 19.0.0
gyp ERR! command "/Users/hayato/.nodebrew/node/v13.3.0/bin/node" "/Users/hayato/.nodebrew/node/v13.3.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/hayato/.nodebrew/node/v13.3.0/lib/node_modules/@vue/cli/node_modules/fsevents
gyp ERR! node -v v13.3.0
gyp ERR! node-gyp -v v5.0.7
gyp ERR! not ok 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/@vue/cli/node_modules/fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 install: `node-gyp rebuild`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1
+ @vue/cli@4.2.3
updated 1 package in 35.557s

Vue CLIのバージョンが上がったっぽい！

Vueのバージョン確認

nakano-hayatonoMacBook-Pro:~ hayato$ vue --version
2.9.6

変わってない。。

install時のログを再確認してみる

/Users/hayato/.nodebrew/current/bin/vue ->
/Users/hayato/.nodebrew/current/lib/node_modules/@vue/cli/bin/vue.js

Vueのいるパスが変わってるっぽい。

環境変数（.bash_profile）に新しいVueのいるパスを追加

"export PATH=~/.nodebrew/current/lib/node_modules/@vue/cli/bin" を追加。

nakanohatonoMBP:~ hayato$ vi .bash_profile 
nakanohatonoMBP:~ hayato$ cat .bash_profile 
export PATH=~/.rbenv/shims:/usr/local/bin:$PATH
eval "$(rbenv init -)"
export PATH=/usr/local/opt/mysql@5.6/bin:$PATH
 export PATH=~/.nodebrew/current/lib/node_modules/@vue/cli/bin
 export PATH=$HOME/.nodebrew/current/bin:$PATH
 export PATH=~/.nodebrew/current/bin:$PATH
 export PATH=$HOME/.pyenv/shims:$PATH
nakanohatonoMBP:~ hayato$ source .bash_profile

nakano-hayatonoMacBook-Pro:~ hayato$ vue --version
@vue/cli 4.2.3

Vueのバージョンが上がった！が・・・

linuxコマンドが使えなくなる・・・

nakanohatonoMBP:~ hayato$ ls
-bash: ls: command not found
nakanohatonoMBP:~ hayato$ which
-bash: which: command not found

.bash_profileを再確認してみる

Finderで環境変数を確認　→　：PATH＄の記述が足りなかった
スクリーンショット 2020-03-10 20.29.02.png
追加した "export PATH=~/.nodebrew/current/lib/node_modules/@vue/cli/bin" の末尾に"：PATH＄"の記述が足りなかった・・・
そのため、追加パスがPATHに代入される以前に代入されていたパスたちが、追加パスで上書きされてしまっていた。
スクリーンショット 2020-03-10 20.29.16.png
"export PATH=~/.nodebrew/current/lib/node_modules/@vue/cli/bin" の末尾に"：PATH＄"の記述を追加。

sourceコマンドが使えない　→　ターミナルをあげなおせばOK

まだlinuxコマンドが使える状態じゃないのでsourceコマンドが使えず、環境変数の反映ができずにパニック。

nakano-hayatonoMacBook-Pro:vue_app hayato$ source ~/.bash_profile 
env: bash: No such file or directory

→先輩にターミナルの再起動で反映されることを教えてもらい救われる。

無事にlinuxコマンド復活。
vue createも使えるようになった。
環境変数について理解するいい機会になった。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-10T20:11:24+09:00

RailsのViewからVue.jsのModalを表示させてみた

画像のように、一覧画面で詳細を開くボタンで詳細画面を開くときに、Railsのviewは使用せずVue.jsのModalで表示することを試みた。
何とか実装出来たが、JSはjQueryから入門したこともあり結構大変だったのでメモとして残しておく。
スクリーンショット 2020-03-10 19.41.40.png

環境

Ruby 2.6.5
Ruby on Rails 6.0.0
Vue.js 2.6.11

ここではRailsやVueの設定は省略し、Railsのwebpackerでvueのインストール、セットアップが完了していることを前提として書いていく。

やりたい事

冒頭の通り、詳細を開くボタンをクリックしたときに詳細画面をVue.jsのModalで開きたい。
しかし、今までRailsの中でVueを使った事はあっても、Vueインスタンスがどのタイミングで生成されるかなど無知であったため、最初はどうやるのかイメージがつかなかった。
jQueryからJavascriptに入門したので、なかなか生のJSを書く機会がなかった。

Rails側

Modalを開く部分はBootstrapを使うことにした。
参照: https://getbootstrap.com/docs/4.0/components/modal/

上記のURLを参考にして、BootstrapだけでModalを開けるようにしていく。

view/users/index.html.slim

thead
  tr
    th id
    th 名前
    th email
    th tell
    th
tbody
  - @users.each do |user|
    tr
      th = user.id
      td = user.name
      td = user.email
      td = user.tell
      td 
        / Vue側にuser_idを渡すために、data属性にuser_idを持たせている
        button.btn.btn-info.btn-modal data-target="#full-width-modal" data-toggle="modal" data-user_id="#{user.id}" 詳細を開く

/ Modalのコンポーネント部分。ここにVueのtemplateをマウントさせる。
#full-width-modal.modal.fade tabindex="-1" role="dialog" aria-hidden="true" aria-labelledby="full-width-modalLabel" data-keyboard="false" data-backdrop="static"
  #showUser
    = javascript_pack_tag 'users'

Vue.js側

次にvueインスタンスを生成させていく。
javascript/packs配下にusers.jsを作成し、コードを記述

javascript/packs/users.js

import Vue from 'vue'
// packs配下にcomponentsディレクトリを作成し、その中にcomponentを格納している
import ShowUser from './components/ShowUser.vue'

// ボタン要素をgetElementsByClassNameで配列として取得
const btnModals = document.getElementsByClassName('btn-modal')

// for文で各ボタン要素を取り出し
for(let btnModal of btnModals) {
  // 取り出したボタン要素に対し、addEventListenerでボタンクリックされた時にvueインスタンスを生成させる
  btnModal.addEventListener('click', () => {
    new Vue({
      el: '#showUser',
      render: h => h(
        ShowUser, {
          // componentにpropsでuser_idを渡している
          props: {
            userId: Number(btnModal.getAttribute('data-user_id'))
          } 
        }
      )
    })
  })
}

ここまで出来たら、あとはShowUser.vueを書いていけば終わり。
Modalを閉じるときはどうすればいいの？となりそうだが、単純に閉じるボタンのアクションにthis.$destroy()を仕込んであげれば大丈夫。
modalを閉じる処理をbootstrapのjQueryではなく、Vue側で書いてあげないといけないので、そこも含めて次回の記事で頑張って書いていく。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-10T14:47:20+09:00

Vue、FirebaseでツイッターのAuthを使ったログイン機能を追加する

はじめに

入社までの間でいろいろなところに出かけようと思っていたが、このご時世むやみに出かけるのも怖い。
おとなしく家でなにか作ろうと思ったので、前から気になっていたFirebaseを使ってみたのでそのまとめ。

到達目標

FirebaseでTwitterアカウントを使ったユーザー認証を実装

Firebaseの登録

まず、Firebaseとはなにかということですが、いろいろな機能を提供しているバックエンドサービスです。
詳しくはここがわかりやすかったので知りたい人は見てください。

利用するために登録をしましょう。
Firebase
1.png
使ってみるを押します。
そうすると下の画面になるのでプロジェクトを作成を押してプロジェクトを作成しましょう。
2.png
プロジェクト名を入力し、規約に同意し、続行をクリックします。
続いてGoogle アナリティクスを導入するかの選択ですが、そのまま導入でいいと思います。
Google アナリティクスはアクセス解析ツールです。
次に進み地域を日本に設定し、2項目の規約に同意しプロジェクトを作成を押します。
3.png
しばらく待つと、ダッシュボードに飛びます。
4.png
この画面になればFirebaseの利用登録は終了です。

Twitter APIの使用準備

続いて、TwitterAPIの使用準備です。
これをすることで、FireBaseで使用できるログインオプションのTwitterが使えるようになります。

利用準備

Twitter Developers
5.png
右上のログインを押して、APIを使えるようにするユーザーでTwitterにログインします。
ログインするともとのページに戻ってきて、ログインの部分が変わっています。
このApplyをクリックします。
6.png
そうしたら、Apply for developer accountをクリックします。
7.png
下の画面に移動したら左から2列目の2段めにある「Building tools for Twitter users」を選択しましょう。
9.png
APIを使えるようにするアカウントが表示されているか確認します。
10.png
アカウントの部分に赤字でなにか書いてあり、リンクがあったらリンクを押してください。
これはアカウントに電話番号が登録されていない場合に表示されます。
設定したら戻って来て更新してください。
その後下の国を選ぶ部分を日本に選択し、「What would you like us to call you?」の部分は開発者アカウントをなんと呼びますか？とのことなので、ニックネームでもなんでもいいので登録します。
続いて利用目的の登録です。
「In your words」は、APIをどういった使い方をするかを説明します。
200文字以上ないと通らないので頑張ってください。
その後も各内容の説明をガリガリ書いていきます。
必要ないものはチェックを消して、書かないようにします。

次に進むと各内容の確認が出てくるので、内容に間違いがなければ進みます。
利用規約の確認が出てくるので同意して進みます。
そうすると登録したメールアドレスに確認のメールが来るので、リンクに飛んで認証しましょう。

Appの作成

登録がおわったら再度Twitter Developersにアクセスしアプリの作成を行いましょう。
11.png
右上のメニューからAppsを選択します。
12.png
Appsのページに飛ぶので、Create an appをクリックしてアプリを作成しましょう。
アプリの名前、説明、ページのURL、コールバックなど入力します。
このとき「Enable Sign in with Twitter」にチェックを入れましょう。
自分はページのURLとコールバックが決まっていなければとりあえずQiitaのマイページのURLを入力しておきました。
進むと注意事項が書かれたモーダルが表示されるので、確認してCreateを押します。
アプリが作成できたら「Keys and tokens」をクリックしてConsumer API keyを確認しましょう。
13.png
このあとFirebaseの設定で使用するのでひかえておいてください。

firebaseの設定

Firebaseに戻ってログイン方法（Auth）を設定します。
14.png
先程作成したFirebaseのダッシュボードに行き、左のメニューから「開発⇛Authentication」をクリックします。ログイン方法が出てくるのでクリックしてツイッターを有効にします。
ここに先程ひかえたAPI Tokenを入力します。
下に出ているコールバックURLをコピーしておき保存を押します。
Twitterの方に戻り、先程作ったAppを編集しコールバックの欄にコピーしたURLを入力します。
これで準備は終了です。

Vueプロジェクトの作成

早速Vueのプロジェクトを作っていきましょう！
下のコマンドを実行してプロジェクトを作成します。
Vueが入ってない方は入れておいてください。

コンソール
vue create プロジェクト名

<!--終わったら-->
cd プロジェクト名
npm install -s firebase

Firebaseのダッシュボードに行き左メニューの上の方にある歯車マークを押します。
「settings」が開かれるので、下の方にある「Firebase SDK snippet」のスクリプトをコピーします。

Vueのファイルを編集していきます。
まず、VueでFirebasaeを使えるようにします。

main.js
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import firebase from 'firebase' // 追記

Vue.config.productionTip = false

// Your web app's Firebase configuration
const firebaseConfig = { // 先ほどコピーしたもの
  apiKey: '***************************',
  authDomain: '***************************',
  databaseURL: '***************************',
  projectId: '***************************',
  storageBucket: '***************************',
  messagingSenderId: '***************************',
  appId: '***************************',
  measurementId: '***************************' 
}
// Initialize Firebase
firebase.initializeApp(firebaseConfig)　// 追記
firebase.analytics()　// 追記

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

続いてHomeにログインボタンを作り、ユーザー情報を取得しましょう。

./src/views/Home.vue
<template>
  <div class="signin">
    <h2>Sign in</h2>
    <button @click="signin">Signin</button>
  </div>
</template>

<script>
import firebase from 'firebase'

export default {
  name: 'Signin',
  methods: {
    signin: function () {
      const provider = new firebase.auth.TwitterAuthProvider()
      firebase.auth().signInWithPopup(provider)
        .then(
          result => {
            if (user) {
              console.log(result.user)
            } else {
              alert('有効なアカウントではありません')
            }
          })
    }
  }
}
</script>

一通り設定が終わったので動作を確認しましょう！

コンソール
npm run serve

ブラウザでhttp://localhost:8080/ にアクセスすると以下のような画面が出ると思います。
15.png
Signinを押すとTwitterの連携の確認が出て来ると思います。
うまく認証できればコンソールにユーザー名やトプ画のURLなど様々な情報が取得できていると思います。

終わりに

とりあえず、FirebaseとVueを使ってTwitterのAuth認証で作ったWebアプリにログイン機能をつけることができました。
ここからいろいろな機能を追加していきWebアプリを作っていこうと思います。

参考にさせていただいた記事など

Vue.jsとfirebaseを使ってTwitter認証してみた【ユーザー名・プロフ写真の取得と表示・ログイン状態維持の方法も併せて】@nekoGorilla様
認証付きの簡易チャットを作る！-基礎から学ぶ Vue.js様

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-10T14:47:20+09:00

Vue、FirebaseでツイッターのOAuthを使ったログイン機能を追加する

はじめに

入社までの間でいろいろなところに出かけようと思っていたが、このご時世むやみに出かけるのも怖い。
おとなしく家でなにか作ろうと思ったので、前から気になっていたFirebaseを使ってみたのでそのまとめ。

到達目標

FirebaseでTwitterアカウントを使ったユーザー認証を実装

Firebaseの登録

まず、Firebaseとはなにかということですが、いろいろな機能を提供しているバックエンドサービスです。
詳しくはここがわかりやすかったので知りたい人は見てください。

利用するために登録をしましょう。
Firebase
1.png
使ってみるを押します。
そうすると下の画面になるのでプロジェクトを作成を押してプロジェクトを作成しましょう。
2.png
プロジェクト名を入力し、規約に同意し、続行をクリックします。
続いてGoogle アナリティクスを導入するかの選択ですが、そのまま導入でいいと思います。
Google アナリティクスはアクセス解析ツールです。
次に進み地域を日本に設定し、2項目の規約に同意しプロジェクトを作成を押します。
3.png
しばらく待つと、ダッシュボードに飛びます。
4.png
この画面になればFirebaseの利用登録は終了です。

Twitter APIの使用準備

続いて、TwitterAPIの使用準備です。
これをすることで、FireBaseで使用できるログインオプションのTwitterが使えるようになります。

利用準備

Twitter Developers
5.png
右上のログインを押して、APIを使えるようにするユーザーでTwitterにログインします。
ログインするともとのページに戻ってきて、ログインの部分が変わっています。
このApplyをクリックします。
6.png
そうしたら、Apply for developer accountをクリックします。
7.png
下の画面に移動したら左から2列目の2段めにある「Building tools for Twitter users」を選択しましょう。
9.png
APIを使えるようにするアカウントが表示されているか確認します。
10.png
アカウントの部分に赤字でなにか書いてあり、リンクがあったらリンクを押してください。
これはアカウントに電話番号が登録されていない場合に表示されます。
設定したら戻って来て更新してください。
その後下の国を選ぶ部分を日本に選択し、「What would you like us to call you?」の部分は開発者アカウントをなんと呼びますか？とのことなので、ニックネームでもなんでもいいので登録します。
続いて利用目的の登録です。
「In your words」は、APIをどういった使い方をするかを説明します。
200文字以上ないと通らないので頑張ってください。
その後も各内容の説明をガリガリ書いていきます。
必要ないものはチェックを消して、書かないようにします。

次に進むと各内容の確認が出てくるので、内容に間違いがなければ進みます。
利用規約の確認が出てくるので同意して進みます。
そうすると登録したメールアドレスに確認のメールが来るので、リンクに飛んで認証しましょう。

Appの作成

登録がおわったら再度Twitter Developersにアクセスしアプリの作成を行いましょう。
11.png
右上のメニューからAppsを選択します。
12.png
Appsのページに飛ぶので、Create an appをクリックしてアプリを作成しましょう。
アプリの名前、説明、ページのURL、コールバックなど入力します。
このとき「Enable Sign in with Twitter」にチェックを入れましょう。
自分はページのURLとコールバックが決まっていなければとりあえずQiitaのマイページのURLを入力しておきました。
進むと注意事項が書かれたモーダルが表示されるので、確認してCreateを押します。
アプリが作成できたら「Keys and tokens」をクリックしてConsumer API keyを確認しましょう。
13.png
このあとFirebaseの設定で使用するのでひかえておいてください。

firebaseの設定

Firebaseに戻ってログイン方法（Auth）を設定します。
14.png
先程作成したFirebaseのダッシュボードに行き、左のメニューから「開発⇛Authentication」をクリックします。ログイン方法が出てくるのでクリックしてツイッターを有効にします。
ここに先程ひかえたAPI Tokenを入力します。
下に出ているコールバックURLをコピーしておき保存を押します。
Twitterの方に戻り、先程作ったAppを編集しコールバックの欄にコピーしたURLを入力します。
これで準備は終了です。

Vueプロジェクトの作成

早速Vueのプロジェクトを作っていきましょう！
下のコマンドを実行してプロジェクトを作成します。
Vueが入ってない方は入れておいてください。

コンソール
vue create プロジェクト名

<!--終わったら-->
cd プロジェクト名
npm install -s firebase

Firebaseのダッシュボードに行き左メニューの上の方にある歯車マークを押します。
「settings」が開かれるので、下の方にある「Firebase SDK snippet」のスクリプトをコピーします。

Vueのファイルを編集していきます。
まず、VueでFirebasaeを使えるようにします。

main.js
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import firebase from 'firebase' // 追記

Vue.config.productionTip = false

// Your web app's Firebase configuration
const firebaseConfig = { // 先ほどコピーしたもの
  apiKey: '***************************',
  authDomain: '***************************',
  databaseURL: '***************************',
  projectId: '***************************',
  storageBucket: '***************************',
  messagingSenderId: '***************************',
  appId: '***************************',
  measurementId: '***************************' 
}
// Initialize Firebase
firebase.initializeApp(firebaseConfig)　// 追記
firebase.analytics()　// 追記

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

続いてHomeにログインボタンを作り、ユーザー情報を取得しましょう。

./src/views/Home.vue
<template>
  <div class="signin">
    <h2>Sign in</h2>
    <button @click="signin">Signin</button>
  </div>
</template>

<script>
import firebase from 'firebase'

export default {
  name: 'Signin',
  methods: {
    signin: function () {
      const provider = new firebase.auth.TwitterAuthProvider()
      firebase.auth().signInWithPopup(provider)
        .then(
          result => {
            if (user) {
              console.log(result.user)
            } else {
              alert('有効なアカウントではありません')
            }
          })
    }
  }
}
</script>

一通り設定が終わったので動作を確認しましょう！

コンソール
npm run serve

ブラウザでhttp://localhost:8080/ にアクセスすると以下のような画面が出ると思います。
15.png
Signinを押すとTwitterの連携の確認が出て来ると思います。
うまく認証できればコンソールにユーザー名やトプ画のURLなど様々な情報が取得できていると思います。

終わりに

とりあえず、FirebaseとVueを使ってTwitterのOAuth認証で作ったWebアプリにログイン機能をつけることができました。
ここからいろいろな機能を追加していきWebアプリを作っていこうと思います。

参考にさせていただいた記事など

Vue.jsとfirebaseを使ってTwitter認証してみた【ユーザー名・プロフ写真の取得と表示・ログイン状態維持の方法も併せて】@nekoGorilla様
認証付きの簡易チャットを作る！-基礎から学ぶ Vue.js様

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-10T13:40:19+09:00

Veturを入れてるのにコード補完が効かない

〜ときは設定を見直そう！

vlsを導入

Vue Language Serverを入れましょう

npm i -g vls

Extensionsの設定

Visual Studio CodeのExtensionsからVeturの設定を開く
スクリーンショット 2020-03-10 12.02.51.png

導入したvlsのパスを設定
スクリーンショット 2020-03-10 12.05.29.png

テンプレート補完にチェックを入れる
スクリーンショット 2020-03-10 12.06.34.png

これで<template>内部の変数やコンポーネントでコードジャンプ補完が効くはず！
SFCに色がついただけで満足している方は要チェック！
ちなみに読み方はビーターらしい

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-10T11:16:03+09:00

Vueでできそうでできないこと(1) あるケースでのv-model

はじめに

入力パーツがたくさんある場合、templateにバラで書くと長くなるのでv-forで回して生成したくなりますが、そこでv-modelをループ変数に基づいて動的に作ろうとすると、やりたいようにできないことがあります。

できる方法があればぜひ教えて下さい！

うまくいくケース

このようにv-modelの参照先が階層化されていてトップが固定のliteralで書ける場合は特に問題がありません。

<template>
    <div>
        <div v-for="key1 in level1" :id="key1">
            <span>{{ key1 }}</span>
            <div v-for="key2 in level2" :id="key2">
                <input v-model="form[key1][key2]">
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            form: {
                tokyo: {
                    prop1: 0,
                    prop2: 0,
                },
                osaka: {
                    prop1: 0,
                    prop2: 0,
                },
            },
            level1: ["tokyo", "osaka"],
            level2: ["prop1", "prop2"],
        };
    },
};
</script>

うまく行かないケース

では上記のformの内容を1段上げてみるとどうでしょう。

<template>
    <div>
        <div v-for="key1 in level1" :id="key1">
            <span>{{ key1 }}</span>
            <div v-for="key2 in level2" :id="key2">
                <!-- this[key1][key2]に行ってほしい -->
                <input v-model="[key1][key2]">
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            tokyo: {
                prop1: 0,
                prop2: 0,
            },
            osaka: {
                prop1: 0,
                prop2: 0,
            },
            level1: ["tokyo", "osaka"],
            level2: ["prop1", "prop2"],
        };
    },
};
</script>

エラーは出ませんが、値も変わりません。
内部的にどういう解釈になっているのか追っかけていないのでわかりませんが、とりあえず動作しません。

まとめ

上記のように、dataのトップレベルのプロパティ名を動的に指定する方法が見つかりませんでした。

通常はとりあえず1段下げれば回避できるのですが、
例えばvuexのストアの中にある値をv-modelで使いたい場合get/set形式のcomputed propertyにするのがよくありますが、computedは階層化できないので、1段下げることができません。

実は回避方法はひとつ見つけていて、このように遠回りにthisを置き換えると動きます。

<input v-model="$vnode.componentInstance[key1][key2]">

ただちょっと変化球ですしずっと使えるかどうかもわからないので、ストレートなやり方があったら教えて下さいませ。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-10T10:35:07+09:00

nuxtでfirebase hostingにデプロイまで

自分の備忘録用サクサク書きます

Firebaseツールのインストール
npm install -g firebase-tools

firebase ログイン
firebase login

nuxtプロジェクト作成
$ yarn create nuxt-app <project-name>
or
$ npx create-nuxt-app <project-name>

動作確認
cd <project-name>
npm install or yarn
yarn dev
http://localhost:3000にアクセス！

firebase init hosting
What do you want to use as your public directory?
→dist
Configure as a single-page app (rewrite all urls to /index.html)?
→N

yarn build
yarn generate
firebase deploy

URLを確認できれば成功

テスト環境の追加　firebaseからプロジェクト選択
firebase use --add

環境を切り替える
firebase use name

環境の設定ファイルは.firebaserc。nameを忘れたら、ここをみて確認できます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-10T08:32:21+09:00

vueでfullcalender + localstorage

概要

vueでfullcalender + localstorageやって見た。

閃き

calenderに、localstorage使えば、アプリになるんじゃね。

写真

image.png

成果物

https://embed.plnkr.co/plunk/4zb0FyCd3Y5RPFTHFg7O

以上。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧