読者です 読者をやめる 読者になる 読者になる

MotomichiWorksBlog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

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 任意のパス

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

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

ホストマシン環境

ゲストマシン環境

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

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

vagrantその0025 Windows10でvagrantを使う - MotomichiWorksBlog

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

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 "./var/www/rails_projects", "/var/www/rails_projects", owner: 'vagrant', group: 'apache', mount_options: ['dmode=777', 'fmode=666']

Vagrantfileがあるディレクトリに var/www/rails_projects となるようにディレクトリを作成しておきます。

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

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

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

vagrant reload

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

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

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

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

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

git --version

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

sudo yum -y install sqlite-devel

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

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

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

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

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

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

$ 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のバージョンの一覧が出ます。

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

$ rbenv install 2.4.0
$ rbenv rehash
$ rbenv global 2.4.0

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

$ 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_projects/
$ mkdir sample_rails_project
$ cd sample_rails_project
$ bundle init

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

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

# gem "rails"

以下のコマンドを実行してrailsをプロジェクトにインストールします。

$ bundle install --path ../sample_rails_project_bundles/vendor/bundle

このとき指定するパスは、vagrantでホストマシンと同期しているディレクトリだとエラーになるので、ひとつ上の階層の ../sample_rails_project_bundles/vendor/bundle を指定しています。

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

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

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

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

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

bundle exec rails new .

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

次に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のスタートページが表示されました。

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

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

JSでテストコードを書く その0001 まずは記事を色々読んでみる

制作 javascript tdd_bdd

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

Mocha公式

Chai公式

概要が書かれている日本語のページ

以下の三つと、そこからリンクされているページを読んだら全く知識の無い状態からなんとなくわかってきました。

HTMLコーディング規約についてメモ

制作

はじめに

どこにあったか忘れたら嫌なのでメモしておきます。

参考リンク

HTML Best Practices

github.com