Sojiro’s Blog

This is nothing much.

「トークン」とはなにか

半年以上前のある夜、大先輩エンジニアの方に隠れ家的なオシャレな大人のBarに連れて行っていただきました。

その日はそれまでに既に結構飲んでいまして、本当に恥ずかしながらそこでお話した内容のほとんどは覚えていないのですが、一つだけ鮮明に覚えているのは、

「トークン」ってなに?

と私に説明を求められたことです。なにかを答えはしたのですが、かなり曖昧な答えになっていたと思います。

さらに最悪なのは、その後その大先輩が語られた内容を覚えていないことです。これは最悪です。次の日に「トークンって結局なんでしたっけ?」などとも聞けないのでそれ以来いろいろ考えてきたことを書きます。

トークンとはなにか

Webの開発をしているとしばしばトークンというものが登場します

  • Access Token
  • ID Token
  • JWT(JSON Web Token)
  • etc…

このトークンとはなにか、という話です

そもそもトークンなんて日本語はないのだから、トークンはトークン、という感じなのですが、あえて日本語にすると

「証」(しょう)

という漢字一文字が合うのかな、と思います。

  • 通行証
  • 身分証
  • 免許証
  • etc…

トークンの性質

これらに共通するのは

  • 誰かが発行し
  • 何かが書いてある

ということではないでしょうか

特に「何かが書いてある」、という部分は様々な内容を持ち得ます

  • 通行証には、ある場所を通ること、ある場所に到達することを許可する旨が書かれています
  • 身分証には、それを持っている人が誰なのか、それを示す内容が書かれています
  • 免許証には、誰に何をすることを許可するのかが書かれています

このように考えると「トークン」という言葉がしっくりくるのでは、と現在思っております。

初めてのYeoman (Yoを使った雛形作成)

前回 ‘Hubot –create’ は古い というエントリでYeomanを試してみたいと宣言したので試してみます。

Yeoman は以下の3要素で構成されているそうな

  • yo: 雛形作成ツール
  • Grunt: タスクランナー
  • Bower: フロントエンドパッケージマネージャ

今回は前回に引き続き yo を使ってみたいと思います。

前提としては yo をインストール済みであること。

1
$ npm install -g yo

また、 yo は npm のバージョン2.1.0以上が推奨なので必要に応じて npm もアップデートします。

1
npm update -g npm

generator-angular-fullstack を使ってみる

今回 yo で作成する雛形として generator-angular-fullstack を使ってみる

generator-angular-fullstack は MEAN なアプリケーションの雛形で、使い勝手が良いという噂

早速インストール

1
2
$ cd yeoman/angular_fullstack
$ npm install generator-angular-fullstack

インストールできたので実行してみる

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$ yo angular-fullstack
     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I create an AngularJS app with an Express server.

# Client

? What would you like to write scripts with? JavaScript
? What would you like to write markup with? HTML
? What would you like to write stylesheets with? Sass
? What Angular router would you like to use? uiRouter
? Would you like to include Bootstrap? Yes
? Would you like to include UI Bootstrap? Yes

# Server

? Would you like to use mongoDB with Mongoose for data modeling? Yes
? Would you scaffold out an authentication boilerplate? Yes
? Would you like to include additional oAuth strategies? Google, Facebook, Twitter
? Would you like to use socket.io? Yes

雛形作成を実行するといくつかインタラクティブに聞かれるので答える

今回は基本的に Yes と答えてみた

実行が終わると雛形ができていた

1
2
$ ls
Gruntfile.js  bower.json  client  e2e  karma.conf.js  node_modules  package.json  protractor.conf.js  server

つづく

次回は grunt を使って実際にアプリケーションを動かしてみる

参照

‘Hubot –create’ は古い

このブログで過去に何度かHubotについて書いたときに、新しいbotを作るときのコマンドは hubot --create bot_name だったのですが、このコマンドが非推奨になったようなのでメモ。

hubot –create が使えない

新しいbotを作ろうとして hubot --create コマンドを打つと以下のように怒られた

1
2
3
4
5
6
$ hubot --create test_bot
'hubot --create' is deprecated. Use the yeoman generator instead:
    npm install -g yo generator-hubot
    mkdir -p test_bot
    yo hubot
See https://github.com/github/hubot/blob/master/docs/README.md for more details on getting started.

ところがseeとなっているREADMEファイルは存在しない模様…

yo と generator-hubot とは何か

よくわからないが yogenerator-hubot をインストールしろと言われているのはわかるので調べてみる

yo と generator-xxx

yoはYeomanというGoole社が開発した統合開発ツール群に属するツールの一つで、「雛形作成ツール」であるらしい

そしてその雛形は “generator-xxx” という形でさまざま用意されており、そのHubot版が generator-hubot と言う訳である

つまり上記エラーメッセージは

  • 雛形作成ツールである yo と、Hubotの雛形である generator-hubot をインストールし
  • 新規ディレクトリ上で yo を実行してHubotの雛形を作るべし

ということのようである

yo と generator-hubot のインストール

指定された通り以下のようにインストールする

1
$ npm install -g yo generator-hubot

(余談:私の場合はNode.jsのインストールされたpathとnpmのrootが違っていたため少々上手くいかなかった。エラーメッセージは素直によく読むべきだ。。。)

yo の実行

インストールが成功したら、新しいbotのディレクトリを作ってそこで yo を実行する

1
2
3
$ mkdir test_bot
$ cd test_bot
$ yo hubot  # これは generator-hubot の雛形を作る、という意味

yo hubot を実行するとHubotのAAが表示され、いくつかのやり取りが立ち上がる

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
$ yo hubot
                     _____________________________
                    /                             \ 
   //\              |      Extracting input for    |
  ////\    _____    |   self-replication process   |
 //////\  /_____\   \                             /
 ======= |[^_/\_]|   /----------------------------
  |   | _|___@@__|__
  +===+/  ///     \_\ 
   | |_\ /// HUBOT/\\
   |___/\//      /  \\
         \      /   +---+
          \____/    |   |
           | //|    +===+
            \//      |xx|

? Owner: sojiro
? Bot name: slack-test-bot
? Description: Slack Bot test
? Bot adapter: (campfire) slack
? Bot adapter: slack
   create bin/hubot
   create bin/hubot.cmd
   create Procfile
   create README.md
   create external-scripts.json
   create hubot-scripts.json
   create .gitignore
   create package.json
   create scripts/example.coffee
   create .editorconfig
                     _____________________________
 _____              /                             \ 
 \    \             |   Self-replication process   |
 |    |    _____    |          complete...         |
 |__\\|   /_____\   \     Good luck with that.    /
   |//+  |[^_/\_]|   /----------------------------
  |   | _|___@@__|__
  +===+/  ///     \_\ 
   | |_\ /// HUBOT/\\
   |___/\//      /  \\
         \      /   +---+
          \____/    |   |
           | //|    +===+
            \//      |xx|
...
...

各項目それぞれデフォルト値が設定されており、なにも入力せずEnterを押していくとその通りになる

今回はSlack用のbotだったので Bot adapter: の欄で slack と入力した

他にも用途に合わせてadapterが用意されているようである

この yo 実行により、Hubotの雛形が作成され、 hubot --create と同様にセットアップが完了する

なおかつadapterを予め設定できる分、セットアップが楽になっている

最後に

今回はHubotに絡んで偶発的に yo を知りましたが、かなり便利そうなのでYeoman含めて今後も使ってみたいところです

参照

Slack BotをHeroku上で動かす

HUBOTを使ったSlack Bot作成メモで作ったSlack Botをローカル以外の環境で動かしたくなったのでHeroku上で動かせるようにしてみます。

あらかじめHerokuにSign upしておきます。

Heroku Toolbelt のインストール

HerokuのCLIツールであるHeroku Toolbeltをインストールします

今回はMacを使っているのでこちらからダウンロード&インストールしました

https://toolbelt.heroku.com/osx

1
2
3
$ heroku version
heroku-toolbelt/3.34.0 (x86_64-darwin10.8.0) ruby/1.9.3
You have no installed plugins.

コマンドラインからHerokuにログイン

HerokuにSign upしたときのIDとPasswordでコマンドライン上からHerokuにログインする

1
2
3
4
5
$ heroku login
Enter your Heroku credentials.
Email: sojiro@example.com
Password (typing will be hidden):
Authentication successful.

hubotのディレクトリをGitHubにpush

HerokuにはGitHubを通じてデプロイするようなのでhubotのあるディレクトリをGitHubにpushしておく

1
2
3
4
5
6
$ cd ~/git/hubot/my_slack_bot/
$ git init
$ git add .
$ git commit -m 'initial commit'
$ git remote add origin git@github.com:your_name/slack_bot_repository  # 自分で用意したslack bot用のGitリポジトリ
$ git push origin master

Herokuにデプロイ

Herokuにアプリケーションを作る

このときstackにcedarを指定する。アプリケーションの名前は指定しないとHerokuが勝手に名前をつけてくれる。

1
2
3
4
5
$ heroku create --stack cedar
Creating random_name... done, stack is cedar-10
https://random_name.herokuapp.com/ | https://git.heroku.com/random_name.git
Git remote heroku added
updating...done. Updated to 3.35.0

ここまできたらいよいよデプロイ

1
2
3
4
5
6
7
8
9
$ git push heroku master
Counting objects: 16, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (13/13), done.
Writing objects: 100% (16/16), 6.58 KiB | 0 bytes/s, done.
Total 16 (delta 0), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
...

Herokuに設定を追加

HerokuにHubotとSlackの設定を追加していく

ここではHUBOTを使ったSlack Bot作成メモで払い出されたものを指定する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# HUBOT_SLACK_TOKENの設定
$ heroku config:add HUBOT_SLACK_TOKEN=xxxx-123456789-abcdefghijklmnopqrstuvwxyz
Setting config vars and restarting random_name... done, v4
HUBOT_SLACK_TOKEN: xxxx-123456789-abcdefghijklmnopqrstuvwxyz

# SlackのTeam設定
$ heroku config:add HUBOT_SLACK_TEAM=your_team_name
Setting config vars and restarting random_name... done, v5
HUBOT_SLACK_TEAM: your_team_name

# Botの名前の設定
$ heroku config:add HUBOT_SLACK_BOTNAME=your_bot_name
Setting config vars and restarting random_name... done, v6
HUBOT_SLACK_BOTNAME: your_bot_name

# HerokuアプリのURL設定
$ heroku config:add HEROKU_URL=http://random_name.herokuapp.com
Setting config vars and restarting random_name... done, v7
HEROKU_URL: http://random_name.herokuapp.com

HerokuのWebプロセスの起動

最後にHerokuのWebプロセスを起動する

1
2
$ heroku ps:scale web=1
Scaling dynos... done, now running web at 1:1X.

SlackにBotが現れれば成功!

今回はRedisを使わなかったのでHerokuのaddon設定やクレジットカードの登録無しでいけました

参照

初めてのVagrant

仮想環境構築ツールのVagrantが便利らしいという噂を聞いて使ってみたところ確かに便利でした。

以前VirtualBox上での環境構築に手間取った経験があったのでこれは今後も積極的に使って行きたいと思い、最初の手順をメモします。

前提として今回仮想化ソフトとしてはVirtualBoxを使うのでインストールされているという前提で以下を書きます。

Vagrantのインストール

まずはVagrantをインストールする

https://www.vagrantup.com/downloads.html

こちらのダウンロードフォームから使っているOSに合ったものをダウンロードすればOK

ダウンロードしたファイルをポチポチやってインストールが完了するので以下のコマンドで確かめる

1
2
$ vagrant --version
Vagrant 1.7.2

boxの追加

Vagrantでは仮想環境それぞれの設定をboxという単位で管理する

現在管理しているboxの情報は vagrant box list で確認できる

1
2
$ vagrant box list
There are no installed boxes! Use `vagrant box add` to add some.

最初はboxが何もインストールされていないのでこのような結果

boxは自分で作成することもできるが、既に誰かが作ってくれたものを取り込むこともできる

http://www.vagrantbox.es/

こちらのサイトでは有志が様々なboxを提供してくれているので今回はこちらを使わせていただくことにする

リストからインストールするboxを決めたら、以下のコマンドで追加する

1
$ vagrant box add 名前 boxファイル

今回はインストールするboxをcentos64という名前で管理するために以下のようにした

1
2
3
4
$ vagrant box add centos64 http://developer.nrel.gov/downloads/vagrant-boxes/CentOS-6.4-x86_64-v20131103.box
==> box: Adding box 'centos64' (v0) for provider:
   box: Downloading: http://developer.nrel.gov/downloads/vagrant-boxes/CentOS-6.4-x86_64-v20131103.box
==> box: Successfully added box 'centos64' (v0) for 'virtualbox'!

vagrant box list コマンドで確認するとcentos64という名前でboxがインストールされたことがわかる

1
2
$ vagrant box list
centos64 (virtualbox, 0)

仮想環境を立ち上げる

boxを追加したら早速そのboxを使って仮想環境を立ち上げる

今回は ~/virtual_machines/centos64/ というディレクトリでこの仮想環境を管理することにする

まずは vagrant init コマンドで環境立ち上げの準備をする

1
2
3
4
5
6
$ cd ~/virtual_machines/centos64
$ vagrant init centos64
A `Vagrantfile` has been placed in this directory. You are now
ready to `vagrant up` your first virtual environment! Please read
the comments in the Vagrantfile as well as documentation on
`vagrantup.com` for more information on using Vagrant.

このinitコマンドを打つことで Vagrantfile が作られ、VirtualBox上にも仮想環境が現れる

Vagrantfile ではこの仮想環境の設定を規定している

ここまで準備が完了したらいよいよ環境を立ち上げる vagrant up コマンドを使う

1
2
3
4
5
$ vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Importing base box 'centos64'...
==> default: Matching MAC address for NAT networking...
...

VirtualBox上で仮想環境が立ち上がっていることを確認できたら成功

仮想環境の状態は vagrant status コマンドでも確認できる

1
2
3
4
5
6
7
8
9
$ vagrant status
Current machine states:

default                   running (virtualbox)

The VM is running. To stop this VM, you can run `vagrant halt` to
shut it down forcefully, or you can run `vagrant suspend` to simply
suspend the virtual machine. In either case, to restart it again,
simply run `vagrant up`.

立ち上げた仮想環境に入る

立ち上げた仮想環境に入るのは非常に簡単で、管理ディレクトリ上で vagrant ssh コマンドを打てばよい

1
2
$ vagrant ssh
Welcome to your Vagrant-built virtual machine.

後は通常通り好きなように仮想環境を使える

ネットワークの設定をする

今回立ち上げた環境では主にWebサービスの開発を行いたいのでローカルからこの環境にアクセスするための設定をする

ネットワークの設定は Vagrantfile に規定されているのでこのファイルを変更する

1
2
3
4
5
$ vim Vagrantfile
$ cat Vagrantfile
...
config.vm.network "private_network", ip: "192.168.33.10"
...

private_networkの設定をしている行のコメントアウトを外すことでIP 192.168.33.10 でアクセス可能になる

Vagrantfile の設定を変更したら vagrant reload コマンドで設定をリロードしてやる必要がある

1
2
3
4
5
6
$ vagrant reload
==> default: Attempting graceful shutdown of VM...
==> default: Clearing any previously set forwarded ports...
==> default: Clearing any previously set network interfaces...
==> default: Preparing network interfaces based on configuration...
...

決まった操作の設定

仮想環境を立ち上げた後、Webサーバーの設定など毎回やる操作がある場合はそれらを予め記述しておいてVagrant側で実行することができる(provisioning)

まずは Vagrantfile に設定を追加する。設定する行は config.vm.provision の行。

元々コメントアウトで記述があるようにインラインで Vagrantfile 内に直接書くこともできるが、以下のように設定することで外部ファイルに書き出すこともできる

1
config.vm.provision :shell, :path => "provision.sh"
provision.sh
1
2
3
4
sudo yum -y install httpd
sudo service httpd start
sudo chkconfig httpd on
...

Vagrantfile を設定したら忘れず vagrant reload

その後provisionの実行は以下のコマンド

1
$ vagrant provision

参照

Octopressのページに「もっと見る」を設定する方法

今回はOctopressで生成したページにいわゆる「もっと見る」リンクを設定する方法をメモします。

「もっと見る」の場所を指定する

記事の内容としてトップページで表示させる範囲が決まったら、その直後に「もっと見る」リンクを設置します。

設置方法は以下のコメントを記事内の「もっと見る」リンクを設置する箇所に記述するだけです。

1
 <!-- more -->

「もっと見る」以降の記事内容はトップページ上では省略されます。

「もっと見る」リンクは個別記事ページにリンクしています。

リンクの文言を変更する

上記で設定したリンクはデフォルトでは「Read on →」と表示されます。

リンクの文言は _config.yml ファイルの項目 excerpt_link で管理されています。

従って以下のように設定することでリンクの文言が「もっと見る」となります。

1
excerpt_link: "もっと見る"

Github PagesとOctopressで作ったブログに独自ドメインを設定する

本ブログをリニューアルしたついでに新しくドメインを取ってこのブログに適用してみた。

Github PagesとOctopressを使ったブログへの独自ドメイン設定のメモとして残しておく。

やるべきこと

今回は blog.sojiro.me というサブドメインを使うことにしたので、やるべき手順は以下の2つのみ。

  • DNSホストにGithub Pagesのドメインを向いたCNAMEレコードを追加する
  • ブログのソースに CNAME ファイルを追加する

Node.jsを使ってWeb Serverを作ってみました

Node.jsを使って簡単なWeb Serverを作ってみた際のメモ。

今回使うNode.jsのバージョン

1
2
$ node -v
v0.10.32

Web Serverオブジェクトの準備

Node.jsにはWeb Serverの機能を備えたオブジェクトが用意されている

1
2
var http = require('http');
var server = http.createServer();

Nodeの http モジュールを読み込んだ後、 createServer() メソッドでWeb Serverオブジェクトを取得できる

初めてのMongoDB

NoSQLの流れを汲むMongoDBを初めて使ってみるにあたり、基本的な操作をまとめてみる。

基本的な用語

  • データベース(database)
  • コレクション(collection)
  • ドキュメント(document)

データベース

MySQLなどのRDBMSにおけるデータベース、という言葉とほぼ同じ意味として使われる。 データ管理の大元となる単位。

コレクション

RDBMSにおけるテーブル(table)に相当するもの。 MongoDBはスキーマレスなので、テーブルのように厳格なスキーマが決まっている訳ではなく、特定の対象に対するデータの集まり(正にコレクション)と言える。

ドキュメント

RDBMSにおけるレコード(record)に相当するもの。 各コレクションを構成する要素であり、BSONと呼ばれるJSONライクな形式で記述される。

AWSのLinuxにMongoDBをインストール

AWSで借りたサーバーにmongoDBが入っていなかったのでインストールした手順

YUMの設定

パッケージ管理システムであるYUMにmongoDB用の設定を追加する

1
$ sudo vim /etc/yum.repos.d/mongodb.repo
/etc/yum.repos.d/mongodb.repo
1
2
3
4
5
[mongodb]
name=MongoDB Repository
baseurl=http://downloads-distro.mongodb.org/repo/redhat/os/x86_64/
gpgcheck=0
enabled=1

これでYUMにmongoDBのリポジトリが追加される