Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

vue.js 2.x その0003-01 トランジション効果 簡単なフェードインとフェードアウトをやってみる

正規表現 vuejs javascript

参考にさせて頂いたページ

transitionについて

動的コンポーネントについて

サンプルコード

以下のような感じで書いてみました。

<style>
.hoge-enter-active,
.hoge-leave-active {
  transition: opacity 2s
}
.hoge-enter,
.hoge-leave-to /* hoge-leave-to クラスはバージョン 2.1.8 以降でのみ利用可能 */ {
  opacity: 0
}
</style>

<div id="transition-app">
  <h1>Vue.jsの練習 静的なページ</h1>
  <button v-on:click="fade">click here</button>
  <transition name="hoge">
    <div v-show="state.contentIsShow">トグルするコンテンツ</div>
  </transition>
<!--/#transition-app--></div>

<script src="js/vue.js"></script>
<script>
  var fadeApp = new Vue({
    el: '#transition-app',
    data: {
      state: {
        contentIsShow: true,
      },
    },
    methods: {
      fade: function(){
        this.state.contentIsShow = !this.state.contentIsShow;
      },
    },
  });
</script>

サンプルコードについて

公式サイトにあるように、以下の条件のいずれかに当てはまるタグをtransitionタグで囲うことでenteringとleavingのトランジション効果が得られるということらしいので、サンプルコードではv-showを使ってみました。

  • 条件付きの描画 (v-if を使用している)
  • 条件付きの表示 (v-show を使用している)
  • 動的コンポーネント (v-bind:is を使用している)
  • コンポーネントルートノード (Component root nodes)

サンプルコードの場合は以下のような感じで動くようです。

トランジション効果が起こる直前や起こっているとき、完了した直後などに色々なクラスが付与されます。
そのクラス名については、公式ページを参考にするのが良いと思います。

デフォルトでは、v-leave-toなどのv-を接頭辞としたクラスが付与されますが、のようにnameを付与することでhoge-leave-toなどの任意の接頭辞にすることができます。

他にもありますが、vue.jsのトランジション効果により、例えば以下のようなクラスが付与されます。

  • .v-enter-active
  • .v-leave-active
  • .v-enter-to
  • .v-leave-to

vue.js 2.x その0002 v-forで表示しているリストの並べ替え

制作 vuejs javascript

参考にさせていただいたページ

sortについて

v-forについて

ソースコードサンプル

すごく適当にデータを用意して、以下のように書いてみました。

<div id="sort-app">
  <h1>Vue.jsの練習 静的なページ</h1>
  <nav>
    <div><button v-on:click="sort('id')">id順に並べ替え</a></button>
    <div><button v-on:click="sort('rice_and_bread')">ごはんとパンの合計価格順に並べ替え</a></button>
    <div><button v-on:click="sort('rice_only')">ごはんの価格順に並べ替え</button></div>
    <div><button v-on:click="sort('bread_only')">パンの価格順に並べ替え</button></div>
  </nav>
  <ul>
    <li v-for="item in state.items">
      【{{item.name}}】 id:{{item.id}} 合計額：{{item.priceRiceAndBread}}円 ごはん:{{item.priceRice}}円 パン:{{item.priceBread}}円
    </li>
  </ul>
<!--/#sort-app--></div>

<script src="js/vue.js"></script>
<script>
  var sortApp = new Vue({
    el: '#sort-app',
    data: {
      state: {
        items: [
          {name: 'セット商品0', id: 0, priceRiceAndBread: 410, priceRice: 110, priceBread: 300},
          {name: 'セット商品1', id: 1, priceRiceAndBread: 550, priceRice: 350, priceBread: 210},
          {name: 'セット商品2', id: 2, priceRiceAndBread: 380, priceRice: 180, priceBread: 200},
          {name: 'セット商品3', id: 3, priceRiceAndBread: 610, priceRice: 200, priceBread: 410},
          {name: 'セット商品4', id: 4, priceRiceAndBread: 440, priceRice: 320, priceBread: 120},
        ],
      },
    },
    methods: {
      sort: function(action_type){
        switch (action_type) {
          case 'id':
            this.state.items.sort(function(a,b){
              if(a.id < b.id) return -1;
              if(a.id > b.id) return 1;
              return 0;
            });
            break;
          case 'rice_and_bread':
            this.state.items.sort(function(a,b){
              if(a.priceRiceAndBread < b.priceRiceAndBread) return -1;
              if(a.priceRiceAndBread > b.priceRiceAndBread) return 1;
              return 0;
            });
            break;
          case 'rice_only':
            this.state.items.sort(function(a,b){
              if(a.priceRice < b.priceRice) return -1;
              if(a.priceRice > b.priceRice) return 1;
              return 0;
            });
            break;
          case 'bread_only':
            this.state.items.sort(function(a,b){
              if(a.priceBread < b.priceBread) return -1;
              if(a.priceBread > b.priceBread) return 1;
              return 0;
            });
            break;
          default:
        };
      },
    },
  });
</script>

vue.js 2.x その0001 カスタムフィルタ(Custom Filters)を登録する基本サンプル

制作 vuejs javascript

参考にさせて頂いたページ

ソースコードサンプル1

ソースコードサンプルは以下の通り。

<div id="filter-app">
  <input type="text" v-model="message">
  <div>{{message | reverse}}</div>
<!--/#filter-app--></div>

<script src="js/vue.js"></script>
<script>
Vue.filter('reverse', function (value) {
  console.log(value);
  return value.split('').reverse().join('');
})

var filterApp = new Vue({
  el: '#filter-app',
  data: {
    message: 'message',
  }
});
</script>

ソースコードサンプル1について

まずv-model="message"でdata.messageとバインディングしています。vue.jsのよくある記述です。

{{message | reverse}}は、ただdata.messageの値を出力するのではなく、フィルターを通した結果を出力しています。

newする前に、Vueコンストラクタにfilterを登録しています。
公式サイトにあるように、第一引数はfilterIDを文字列で渡して、第二引数は関数オブジェクトです。
第二引数として渡した関数の引数valueは上記した{{message | reverse}}のmessageが入ってきます。

その後でnewしています。

ソースコードサンプル2

newするときにfiltersプロパティを定義する記述方法は以下の通り。

<div id="filter-app">
  <input type="text" v-model="message">
  <div>{{message | reverse}}</div>
<!--/#filter-app--></div>

<script src="js/vue.js"></script>
<script>
var filterApp = new Vue({
  el: '#filter-app',
  data: {
    message: 'message',
  },
  filters: {
    reverse: function(value) {
      console.log(value);
      return value.split('').reverse().join('');
    }
  }
});
</script>

終わりに

vue.js 1.x まで使えた組み込みのフィルタは使えなくなったので、そのあたりのことは参考にさせて頂いた以下のページに書いてあったりしました。

今回はここまで。

railsその0001 vagrantでrails5の環境構築をする

制作 vagrant rails ruby

参考にさせて頂いたページ

全体的なインストール手順について

はじめに

ポイントとしては、手順のなかにある以下のコマンドを実行するときに

bundle install --path 任意のパス

ホストと同期しているディレクトリをパスに指定するとエラーが出るらしい。ということです。

今回の環境(インストーラーなど)

ホストマシン環境

Windows10
vagrant_1.8.4.msi
VirtualBox-5.0.24-108355-Win.exe

ゲストマシン環境

vagrant upまでやってみてexitする

以前、以下の手順でvagrant upまでやって、ゲストマシンからexitしました。

vagrantその0027 Windows10にvagrant_1.9.7_x86_64.msiでインストールしなおしてvagrant sshまでやってみる - Motomichi Works Blog

ポートフォワーディング設定

localhost:3000でrailsのスタートページが閲覧できるようにvagrantの設定をしておきます。

Vagrantfileの

# config.vm.network "forwarded_port", guest: 80, host: 8080

の行を以下のようにします。

config.vm.network "forwarded_port", guest: 3000, host: 3000

vagrant環境内とホストマシンのディレクトリを同期設定とディレクトリの作成

Vagrantfileの

# config.vm.synced_folder "../data", "/vagrant_data"

の行を以下のようにします。

config.vm.synced_folder "./my_app", "/var/www/rails_project/my_app"

Vagrantfileがあるディレクトリに my_app ディレクトリを作成しておきます。

ホストマシンのこのディレクトリが、ゲストマシンの /var/www/rails_project/my_app と同期されることになります。

Vagrantfileの設定変更を反映してディレクトリを同期する

以下のコマンドでVagrantfileの編集内容を反映します。

vagrant reload

ゲストマシン内の/var/www/rails_project/my_appディレクトリはこのとき作成されて、同期されます。

yumで色々インストールする

まず仮想環境にログインします。

vagrant ssh

参考ページにならって、以下のコマンドを実行しました。

sudo yum install -y gcc-c++ patch readline readline-devel zlib zlib-devel libyaml-devel libffi-devel openssl-devel make bzip2 autoconf automake libtool bison git vim

以下のコマンドでgitがインストールされたことが確認できました。

git --version

rbenvでrubyをインストールする

参考ページにならって、以下のコマンドを実行しました。

git clone git://github.com/sstephenson/rbenv.git ~/.rbenv

以下のように表示されて /home/vagrant/ にcloneされました。

Initialized empty Git repository in /home/vagrant/.rbenv/.git/

参考ページにならって、続けて以下のコマンドを実行しました。
パスを通したり、ruby-buildをインストールします。

$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ source ~/.bashrc
$ exec $SHELL -l
$ git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
$ cd ~/.rbenv/plugins/ruby-build
$ sudo ./install.sh
$ rbenv install -l

インストール可能なrubyのバージョンの一覧が出ます。

続いて以下のコマンドでrubyをインストールします。

$ rbenv install 2.4.1

が、2017年2月には大丈夫だったと思うのですが、2017年5月に同じ手順でやったら以下のエラーが。

Downloading ruby-2.4.1.tar.bz2...
-> https://cache.ruby-lang.org/pub/ruby/2.4/ruby-2.4.1.tar.bz2
error: failed to download ruby-2.4.1.tar.bz2

BUILD FAILED (CentOS release 6.7 (Final) using ruby-build 20170405-4-g365dd1f)

CentOS7にRails環境を整えるまで①−２（rbenv編） - Qiita を参考にさせて頂いて、ログを確認します。

まずは以下のコマンドでログファイルのファイル名を確認します。

$ ls /tmp/

次にログファイルの内容を確認します。 ログファイル名はご自身の環境にあわせてご確認ください。

$ cat ruby-build.20170505140334.2859.log

を実行してみたら以下のように表示されました。

curl: (35) SSL connect error

ということで、CentOS6.xのlibcurlが古くてcurl: (35) SSL connect errorが発生する件 - Qiitaのページを参考にさせていただきました。

以下のコマンドを実行しました。

$ sudo rpm -Uvh http://www.city-fan.org/ftp/contrib/yum-repo/city-fan.org-release-1-13.rhel6.noarch.rpm
$ sudo vim /etc/yum.repos.d/city-fan.org.repo

enabled=1のところを下記のように0に編集しました。

[city-fan.org]
name=city-fan.org repository for Red Hat Enterprise Linux (and clones) $releasever ($basearch)
#baseurl=http://mirror.city-fan.org/ftp/contrib/yum-repo/rhel$releasever/$basearch
mirrorlist=http://mirror.city-fan.org/ftp/contrib/yum-repo/mirrorlist-rhel$releasever
#enabled=1
enabled=0
gpgcheck=1
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-city-fan.org

次に以下のコマンドを実行してlibcurlをアップデートしました。

sudo yum update --enablerepo=city-fan.org libcurl

ようやくrubyのビルドが実行できます。

$ rbenv install 2.4.1
$ rbenv rehash
$ rbenv global 2.4.1

以下のコマンドで正常にインストールできているか確認します。

$ ruby -v
$ which gem
$ which ruby

bundlerをインストールする

参考ページにならって、以下のコマンドを実行しました。

$ gem install bundler --no-rdoc --no-ri
$ rbenv rehash

railsのインストール

ここからは Vagrant で Ruby on Rails 4 の環境構築 - Qiita の「Rails のインストール」あたりから参考にさせて頂いて進めます。

MySQLを使用する場合はさきほどのページがよさそうです。

$ gem install rails
$ rbenv rehash
$ rails -v
$ which rails

正常にインストールできたことが確認できました。

バージョンを指定しない場合、最新バージョンがインストールされるので、5.0.1がインストールされました。

bundle installでプロジェクトにrailsをインストールする

$ cd /var/www/rails_project/my_app
$ bundle init

するとGemfileが作成されるので、参考ページにならってGemfileを編集します。

以下の行のコメントを解除します。

# gem "rails"

bundle installコマンドを実行してrailsをプロジェクトにインストールしますが、このとき指定するパスは、vagrantでホストマシンと同期しているディレクトリだとエラーになるので、ひとつ上の階層にvendorディレクトリを作成して、 ../vendor/bundle を指定しています。

$ su
vagrant(パスワード入力)
# mkdir ../vendor
# chmod 777 ../vendor
# exit
$ bundle install --path ../vendor/bundle

同期しているディレクトリを指定した場合は以下のようなエラーが出ると思います。

Text file busy @ unlink_internal - ./siteconf20170728-2850-1xca5va.rb

Gem files will remain installed in /var/www/rails_project/my_app/vendor/bundle/ruby/2.4.0/gems/nio4r-2.1.0 for inspection.
Results logged to /var/www/rails_project/my_app/vendor/bundle/ruby/2.4.0/extensions/x86_64-linux/2.4.0-static/nio4r-2.1.0/gem_make.out

An error occurred while installing nio4r (2.1.0), and Bundler cannot continue.
Make sure that `gem install nio4r -v '2.1.0'` succeeds before bundling.

In Gemfile:
  rails was resolved to 5.1.2, which depends on
    actioncable was resolved to 5.1.2, which depends on
      nio4r

「ホストマシンと同期しているディレクトリにbundle installするとエラーになる」件については解決策が以下のページに書いてありました。

RailsのプロジェクトをVMで共有した際にbundle installでこける問題 - Qiita

rails newしてアプリケーションを作成する

引き続き「Vagrant で Ruby on Rails 4 の環境構築 - Qiita」を参考にrailsプロジェクトを作成します。

bundle exec rails new .

参考ページにあるとおり、Gemfileを上書きするか確認されるのでYでenterします。

以下のようなエラーが出ました。

Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

    current directory: /var/www/rails_project/vendor/bundle/ruby/2.4.0/gems/sqlite3-1.3.13/ext/sqlite3
/home/vagrant/.rbenv/versions/2.4.1/bin/ruby -r ./siteconf20170505-15415-4si8oi.rb extconf.rb
checking for sqlite3.h... no
sqlite3.h is missing. Try 'brew install sqlite3',
'yum install sqlite-devel' or 'apt-get install libsqlite3-dev'
and check your shared library search path (the
location where your sqlite3 shared library is located).
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

上記のメッセージにあるとおり、yumでsqliteをインストールして、bundle installします。

sudo yum -y install sqlite-devel
bundle install

次にrailsサーバーを起動します。

bundle exec rails s

以下のエラーが出ました。

Gem Load Error is: Could not find a JavaScript runtime.

Gemfileの以下の行のコメントを解除します。

# gem 'therubyracer', platforms: :ruby

以下のコマンドでtherubyracerをインストールします。

bundle install

今度はrailsサーバーが起動できるはず。

bundle exec rails s

localhost:3000にブラウザでアクセスすると、railsのスタートページが表示されました。

この記事はとりあえずここまでですが、vagrantでの開発では「railsその0002 vagrant+rails5の環境でmodelやcontrollerのファイルを編集しても反映されない問題を解決する - Motomichi Works Blog」のような問題が発生したので認識しておくと良さそうな気がします。

ここまで確認できたら、ドットインストールの「http://dotinstall.com/lessons/basic_rails_v2」とかをやると良いかもしれないです。

ctrl+c でrailsサーバーを止めます。

GoogleAPIその0002 JavaScriptでSearchConsoleAPIからデータを取得する

googleapi 制作

参考にさせて頂いたページ

Google Search Consoleについて

サーチコンソール（Google Search Console）の使い方と登録方法教えます

APIにリクエストする為のコードについて

Sites: list  |  Search Console API (Webmaster Tools API)  |  Google Developers

認証とか基本的なこと

以前の記事で、People APIからのデータ取得を例にやりました。

GoogleAPIその0001 JavaScriptでデータを取得するための認証とか基礎 - MOTOMICHI WORKS BLOG

プロパティの追加と所有権の確認(Google Search Consoleを使う)

APIとかいう前にWEBからGoogle Search Consoleを使ってみます。

Google Search Consoleとかを検索して、ページにアクセスし、以下の手順を実行します。

  • プロパティの追加
  • 所有権の確認

すると自分のwebサイトを登録して、それに紐づくデータが色々と閲覧できます。

このあたりは下記のページを参考にさせて頂きました。

サーチコンソール（Google Search Console）の使い方と登録方法教えます

これらのデータをAPIで取得したいと思います。

Google Search Console APIの有効化

以前の記事でPeople APIを有効化したように、Google API Consoleのページにアクセスして、今回はGoogle Search Console API APIを有効化します。

GoogleAPIその0001 JavaScriptでデータを取得するための認証とか基礎 - MOTOMICHI WORKS BLOG

有効化すると、以下のようなプルダウンから、メソッドのリストが確認でき、ON/OFFできます。

f:id:motomichi_works:20161119180344p:plain

一応文字に起こすと以下の通りです。

  • webmasters.searchanalytics.query
  • webmasters.sitemaps.delete
  • webmasters.sitemaps.get
  • webmasters.sitemaps.list
  • webmasters.sitemaps.submit
  • webmasters.sites.add
  • webmasters.sites.delete
  • webmasters.sites.get
  • webmasters.sites.list
  • webmasters.urlcrawlerrorscounts.query
  • webmasters.urlcrawlerrorssample.get
  • webmasters.urlcrawlerrorssample.list
  • webmasters.urlcrawlerrorssample.makeAsFixed

ソースコードを書く

以前の記事で書いたPeople APIで紹介したコードから、少し変更と追記をします。

スコープを追加する

半角スペース区切りで、複数のAPIに対してスコープを設定できるようです。

var scopes = 'profile https://www.googleapis.com/auth/webmasters.readonly';

readonlyじゃない場合は以下のような感じで書くようです。

https://www.googleapis.com/auth/webmasters

リクエストしてデータを取得する記述

webmasters.sites.listメソッドの例です。

        gapi.client.load('webmasters', 'v3', function() {
          console.log('webmasters v3 loaded.');

          var request = gapi.client.webmasters.sites.list({
            resourceName: 'sites'
          });

          request.execute(function(resp) {
            console.log(resp);
          });

        });

このコードについて

公式ドキュメントのページによると、

Sites: list  |  Search Console API (Webmaster Tools API)  |  Google Developers

以下のURLにリクエストするように書いてあったので、、

GET https://www.googleapis.com/webmasters/v3/sites

resourceName: 'sites'と書いています。

おまけ

Analytics APIの場合はscopesに半角スペース区切りで以下の文字列を追記します。

https://www.googleapis.com/auth/analytics.readonly

GoogleAPIその0001 JavaScriptでデータを取得するための認証とか基礎

googleapi 制作

参考にさせて頂いたページ

公式のGoogle People APIサンプル(認証して、Google People APIを使用するサンプル)

はじめてのアナリティクス API: ウェブ アプリケーション向け JavaScript クイックスタート

Google API Console のアカウント作成とログイン

まずは Google API Consoleのアカウントを作成してログインします。

APIに関する設定をする「API Manager」のページが表示されます。

色々と設定をする

プロジェクト作成

  • 「プロジェクト作成」ボタンをクリックします。

f:id:motomichi_works:20161022230437p:plain

  • モーダルが表示され、「My Project」とデフォルトで入力さていたので、そのまま作成しました。

f:id:motomichi_works:20161022230549p:plain

OAuth同意画面

  • 「OAuth同意画面」タブをクリック
  • 「認証情報を作成」ボタンをクリック

f:id:motomichi_works:20161022231516p:plain

  • メールアドレス欄は自身がログイン中のメールアドレスを選択します。
  • サービス名は適当に「サンプルサービス」と入力しました。
  • あとは省略可能とのことなので、何も入力せず「保存」をクリックしました。

f:id:motomichi_works:20161022232522p:plain

「承認URL」の設定と「OAuthクライアントID」の取得

  • 「認証情報」タブをクリックします。
  • 「認証情報を作成」ドロップダウンから「OAuthクライアントID」を選択します。

f:id:motomichi_works:20161022233103p:plain

f:id:motomichi_works:20161022235154p:plain

  • クライアントIDの横にあるアイコンをクリックして、テキストファイルにコピペしておきます。これは後でJSを書くときに使用します。
  • クライアントシークレットは今回は使用しません。
  • クライアントID、クライアントシークレットは後からでも確認できるので安心です。
  • 「OK」をクリックします。

f:id:motomichi_works:20161023001157p:plain

  • 登録が完了すると以下のような感じになります。

f:id:motomichi_works:20161023001208p:plain

APIキーの取得

  • 「認証情報」タブをクリックします。
  • 「認証情報を作成」ドロップダウンから「OAuthクライアントID」を選択します。

f:id:motomichi_works:20161023002514p:plain

  • APIキーの横にあるアイコンをクリックして、テキストファイルにコピペしておきます。これも後でJSを書くときに使用します。

f:id:motomichi_works:20161023002841p:plain

  • 名前は任意ですが初期値のまま「API キー 1」にしました。
  • ラジオボタン「HTTPリファラー(ウェブサイト)」を選択します。
  • "このHTTPリファラー(ウェブサイト)からのリクエストを受け入れる"の項目は例として「*example.com/*」ですが自身のドメインに合わせて設定してください。
  • 保存をクリックします。

f:id:motomichi_works:20161023004418p:plain

使いたいAPIを有効化する

  • 例として Google People API です。
  • 「ライブラリ」をクリックして、フォームに「people」と入力すると、候補が出てくるので「Google People API」をクリックします。

f:id:motomichi_works:20161023010425p:plain

  • 「有効にする」をクリックします。

f:id:motomichi_works:20161023010900p:plain

  • ここで有効化することで、JSから以下のような感じで Google People API の バージョン1 がJSONを返してくれるようになります。htmlソースの全容はのちほど紹介します。
        gapi.client.load('people', 'v1', function() {
          var request = gapi.client.people.people.get({
            resourceName: 'people/me'
          });
          request.execute(function(resp) {
            var p = document.createElement('p');
            var name = resp.names[0].givenName;
            p.appendChild(document.createTextNode('Hello, '+name+'!'));
            document.getElementById('content').appendChild(p);
          });
        });

index.htmlの作成とその記述内容

<!--
  Copyright (c) 2011 Google Inc.
  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at
  http://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.
  To run this sample, set apiKey to your application's API key and clientId to
  your application's OAuth 2.0 client ID. They can be generated at:
    https://console.developers.google.com/apis/credentials?project=_
  Then, add a JavaScript origin to the client that corresponds to the domain
  where you will be running the script. Finally, activate the People API at:
    https://console.developers.google.com/apis/library?project=_
-->
<!DOCTYPE html>
<html>
  <head>
    <title>Say hello using the People API</title>
    <meta charset='utf-8' />
  </head>
  <body>
    <p>Say hello using the People API.</p>

    <!--Add buttons to initiate auth sequence and sign out-->
    <button id="authorize-button" style="display: none;">Authorize</button>
    <button id="signout-button" style="display: none;">Sign Out</button>

    <div id="content"></div>

    <script type="text/javascript">
      // Enter an API key from the Google API Console:
      //   https://console.developers.google.com/apis/credentials?project=_
      var apiKey = 'YOUR_API_KEY';
      // Enter a client ID for a web application from the Google API Console:
      //   https://console.developers.google.com/apis/credentials?project=_
      // In your API Console project, add a JavaScript origin that corresponds
      //   to the domain where you will be running the script.
      var clientId = 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com';
      // Enter one or more authorization scopes. Refer to the documentation for
      // the API or https://developers.google.com/identity/protocols/googlescopes
      // for details.
      var scopes = 'profile';
      var auth2; // The Sign-In object.
      var authorizeButton = document.getElementById('authorize-button');
      var signoutButton = document.getElementById('signout-button');
      function handleClientLoad() {
        // Load the API client and auth library
        gapi.load('client:auth2', initAuth);
      }
      function initAuth() {
        gapi.client.setApiKey(apiKey);
        gapi.auth2.init({
            client_id: clientId,
            scope: scopes
        }).then(function () {
          auth2 = gapi.auth2.getAuthInstance();
          // Listen for sign-in state changes.
          auth2.isSignedIn.listen(updateSigninStatus);
          // Handle the initial sign-in state.
          updateSigninStatus(auth2.isSignedIn.get());
          authorizeButton.onclick = handleAuthClick;
          signoutButton.onclick = handleSignoutClick;
        });
      }
      function updateSigninStatus(isSignedIn) {
        if (isSignedIn) {
          authorizeButton.style.display = 'none';
          signoutButton.style.display = 'block';
          makeApiCall();
        } else {
          authorizeButton.style.display = 'block';
          signoutButton.style.display = 'none';
        }
      }
      function handleAuthClick(event) {
        auth2.signIn();
      }
      function handleSignoutClick(event) {
        auth2.signOut();
      }
      // Load the API and make an API call.  Display the results on the screen.
      function makeApiCall() {
        gapi.client.load('people', 'v1', function() {
          var request = gapi.client.people.people.get({
            resourceName: 'people/me'
          });
          request.execute(function(resp) {
            var p = document.createElement('p');
            var name = resp.names[0].givenName;
            p.appendChild(document.createTextNode('Hello, '+name+'!'));
            document.getElementById('content').appendChild(p);
          });
        });
        // Note: In this example, we use the People API to get the current
        // user's name. In a real app, you would likely get basic profile info
        // from the GoogleUser object to avoid the extra network round trip.
        console.log(auth2.currentUser.get().getBasicProfile().getGivenName());
      }
    </script>
    <script src="https://apis.google.com/js/api.js?onload=handleClientLoad"></script>
  </body>
</html>

Google People API からデータを取得してみる

  • 「Authorize」ボタンをクリックすると、「クライアントID」「APIキー」をもとに認証が行われます。
  • サインイン状態であれば、makeApiCall()関数が実行されます。
  • gapi.client.load()メソッドの引数として、API名とそのバージョン、コールバック関数を渡します。

参考までにエラーが出ていたときの話

  • 400エラーが出ていたときは、認証の際に送信する「クライアントID」または「APIキー」の値が間違っていました。
  • 403エラーが出ていたときは、Google People API が有効化されていませんでした。

おまけ

React.jsその0006 FluxとReduxも合わせて考えていくので記事を集めて読んでみる

制作 reactjs

参考にさせて頂いたページ

reactjs/redux の GitHub

reactjs/react-redux

FluxとReduxについてざっくり概要

Reduxについて入門ながらも詳細

react-reduxを使うサンプルコード

react-redux 公式のサンプルコード

その他

公式のサンプルコードを動かしたり、読んでみる

以下のURLにあるコードをコピペしていくと、「TODOをstateに追加して描画するアプリケーション」が動くようになった。

Example: Todo List · Redux

読んでみると、一通り基礎的な使い方はわかってきた。