以前の記事で Homebrew を使って Docker のもろもろをインストールしたが、実はそのときインストールされたツールのバージョンが古く、それが原因で作業が少し詰まった。
そんなときは Homebrew の update である。
おもむろに
$ brew update
新しい FORMULA 、更新された FORMULA 、削除された FORMULA の一覧が表示されて Homebrew の update が完了する
Homebrew を update しただけでは、すでにインストールされているモジュールは新しくならない
$ brew upgrade [FORMULA]
で最新バージョンに upgrade する
今後 Homebrew を使うときは参照する FORMULA のバージョンも気にしたい
JSON Schema を勉強中であります。
その名の通り JSON でリソースそのものやリソースの操作まで表現できる面白いツールだと思います。
しかし、 JSON Schema は往々にして複雑になりがちで、書く量が多くなると typo も増えてきます。
そこで今回は JSON Schema のバリデーションに使えるツールをメモ程度に書いておきます。
まずは validate-schema コマンドから。簡単なバリデーションをしてくれる。
gem の json_schema パッケージに入っているのでインストール
$ gem install json_schema
Password:
Fetching: json_schema-0.6.0.gem (100%)
Successfully installed json_schema-0.6.0
...
1 gem installed
インストールできたらオプションに -d をつけて実行
これがバリデーションに通った例
$ validate-schema -d json_schema/directory/test.json
json_schema/directory/test.json is valid.
バリデーションに落ちるとこうなる
$ validate-schema -d json_schema/directory/test.json
json_schema/directory/test.json: Invalid JSON. Try to validate using `jsonlint`.
なんと別のツールを使って確かめろということなので、以下につづく。
さて、 validate-schema に jsonlint を使え、と言われたので早速インストールする
$ npm install jsonlint -g
npm http GET https://registry.npmjs.org/jsonlint
npm http 200 https://registry.npmjs.org/jsonlint
...
/usr/local/bin/jsonlint -> /usr/local/lib/node_modules/jsonlint/lib/cli.js
jsonlint@1.6.2 /usr/local/lib/node_modules/jsonlint
├── nomnom@1.8.1 (underscore@1.6.0, chalk@0.4.0)
└── JSV@4.0.2
インストールが完了したら早速チェック
$ jsonlint json_schema/directory/test.json
[Error: Parse error on line 20:
..."], } },
----------------------^
Expecting 'STRING', got '}']
今度はバリデーションに落ちる理由と場所を示してくれるのですぐに修正できる
だいたいバリデーションに落ちるときは , のつけ過ぎが多い
これらのツールで無駄にハマる時間をなくしたいものです。
今回は JSON Schema 単体のチェックだったので validate-schema コマンドが使い勝手悪く見えるので補足
もともとは、ある JSON データが JSON Schema に則っているかのバリデーションをするツールである
$ validate-schema json_schema/check.json test.json
test.json#/emotion: failed schema #/properties/emotion: embarrassment is not a member of ["pleasure", "anger", "sadness", "enjoyment"].
いま私は日本の Perl シーンにおける名立たるプログラマの方々の元で仕事させていただくという大変ありがたい立場にいるのですが、常々
** OSS に対する活動が成長の大きな糧になるからチャレンジすべし **
とアドバイスを受けています。
ところが初めてその言葉を受けてから既に1年以上経とうというのに何もしていない。これは本当にいかんと思ってとにかく CAPN に貢献してみようと。
そこで調べてみると PAUSE ID なるものが必要なようなので取得までの過程をここへメモします
PAUSE は The Perl Authors Upload Server の略称で、ここから CPAN へのアップなどするよう
ここ から登録を開始する
各項目に入力してアカウント申請を行う
full name の欄はそれっぽい名前じゃないとはじかれるが、後から変えられる
申請を行うと、しばらくしてアカウント発行の通知が登録したメールアドレスに届く
この通知は人によって届くまでの時間にばらつきがあるようだが、今回は申請したその日のうちに来た
通知にはパスワード変更ページへのリンクと暫定のパスワードが記載されているので、登録した ID と暫定パスワードで Basic 認証を突破してパスワードを設定する
アカウントが発行されると Edit Account Info というメニューへアクセスできるようになる
ここに
The email address [id]@cpan.org should be configured to forward mail to ...
という項目があるので、 [id]@cpan.org へのメールを受け取るメールアドレスを設定する
ここで設定しておかないと後々 [id]@cpan.org に対するメールが受け取れず不便を被るので要設定とのこと
Gravatar は Email アカウントにアイコンを紐づけて様々なサービスで使えるようにするサービスで、 GitHub などでも使われている
https://ja.gravatar.com/
Gravatar に PAUSE ID に紐づいたアドレスでアイコンを設定することで CPAN のアカウントへアイコンを設定することができる
[id]@cpan.org # 設定するメールアドレス
既に Gravatar のアカウントがある場合は「メールアドレスの追加」から上記アドレスを追加すればよい
新たに Gravatar のアカウントを取得する場合は注意が必要なようである。 @cpan.org のメールアドレスが前項の PAUSE ID 取得の際に自分のメールアドレスへ転送されるよう設定してからでないと、メールアドレスの認証が取れず、 Gravatar のアカウント取得に失敗するようだ。
{% img /images/cpan/gravatar.png %}
Gravatar の設定が済むと PAUSE アカウントに設定したアイコンが表示されるようになる
{% img /images/cpan/sojiro.png %}
さて、アカウントは取得した。後はコードを書いて上げるだけ。
やるしかないのです。
Web からデバイスのカメラを起動してみたいと思いたち、少し調べて見たことのメモ
以前のエントリ Node.jsを使ってWeb Serverを作ってみました で立てたサーバーで実験してみます
このコードに手を入れていきます
```javascript web.js var http = require('http'); var server = http.createServer();
server.on('request', function(request, response) { response.writeHead(200, {'Content-Type': 'text/html'}); response.write('
## コードの全体像
最終的なコードはこちら。かなり手抜きしてます
[こちら](http://python-gazo.blog.jp/html5/javascript/webcamera) を参考にさせていただきました
```javascript web_camera.js
var http = require('http');
var server = http.createServer();
var _html = (function () {/*
<!doctype html>
<html>
<head>
<title>Web Camera</title>
<script type="text/javascript">
function capCamera(){
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia;
window.URL = window.URL || window.webkitURL;
var video = document.getElementById("camera");
var localStream = null;
navigator.getUserMedia({video: true, audio: false},
function(stream) {
console.log(stream);
video.src = window.URL.createObjectURL(stream);
},
function(err) {
console.log(err);
}
);
}
</script>
</head>
<body>
<input type="button" value="Web Camera" onClick="capCamera()">
<br>
<video id="camera" width="640" height="480" autoplay="1" ></video>
</body>
</html>
*/}).toString().replace(/(\n)/g, '').split('*')[1];
server.on('request', function(request, response) {
response.writeHead(200, {'Content-Type': 'text/html'});
response.write(_html);
response.end();
});
server.listen(****, 'xxx.xx.x.xxx');
console.log('server listening...');
HTML の部分をみてみます
<body>
<input type="button" value="Web Camera" onClick="capCamera()">
<br>
<video id="camera" width="640" height="480" autoplay="1" ></video>
</body>
構成はボタンと、カメラからの映像をキャプチャする範囲の2つだけ
ボタンには capCamera() という関数が紐づけられています
次に JavaScript の部分をみてみます
function capCamera(){
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia;
window.URL = window.URL || window.webkitURL;
var video = document.getElementById("camera");
var localStream = null;
navigator.getUserMedia({video: true, audio: false},
function(stream) {
console.log(stream);
video.src = window.URL.createObjectURL(stream);
},
function(err) {
console.log(err);
}
);
}
ここで navigator インターフェースの getUserMedia() メソッドを使用しているのがわかります
navigator.getUserMedia ( constraints, successCallback, errorCallback );
| 引数 | 必須 / オプショナル | 説明 |
|---|---|---|
| constraints | 必須 | successCallback に渡されるLocalMediaStream オブジェクトがサポートするメディアタイプ。 |
| successCallback | 必須 | LocalMediaStream オブジェクトが取得できた場合、呼び出されるコールバック関数。 |
| errorCallback | オプショナル (Firefox では必須) | 呼び出しが失敗した際に実行されるコールバック関数。最近の Firefox では必須となっています。省略された場合、 NS_ERROR_XPC_NOT_ENOUGH_ARGS error がスローされます。 |
video, audio の二つの属性に対して真偽値を指定する
LocalMediaStream が引数として渡されるので window.URL.createObjectURL() メソッドにそのまま渡してオブジェクトの URL を取得する
このように取得したビデオストリームの URL を video の DOM に渡すことで video 領域にビデオを表示します
今回は横着して web_camera.js の中に HTML をすべてヒアドキュメントで記述しました JavaScript 内のヒアドキュメントに関してはちょっとしたテクニックがあるようなのでそれはまた次の機会に書こうと思います。
Web からデバイスのカメラを操作できるというのはとても面白いのですが、今回扱ったメソッドはまだまだ一部のブラウザでしかサポートされていないので、特にモバイルで使えるようになったらもっと面白くなるのに、という感想をもってこのエントリを終わります。
以前 初めてのYeoman (Grunt/Bowerを使ってみる) というエントリで Grunt を実行したときに
Warning: Command failed: /home/sojiro/yeoman/angular_fullstack/node_modules/open/vendor/xdg-open: line 584: xdg-mime: コマンドが見つかりません
と怒られたことがあったので xdg-open コマンドについて少し調べてみます
xdg-open の実体はシェルスクリプトである
すんなりインストールできるかと思いきや普段の CentOS に入れるのに手こずってしまった
どうやら Ubuntu との相性が良いようなので Vagrant で Ubuntu を立ち上げてそこでインストールしてみる
Vagrant で Ubuntu 環境をセットアップする
まずは box のインストールから
$ vagrant box add ubuntu http://goo.gl/8kWkm
==> box: Adding box 'ubuntu' (v0) for provider:
box: Downloading: http://goo.gl/8kWkm
==> box: Successfully added box 'ubuntu' (v0) for 'virtualbox'!
$ vagrant box list
centos64 (virtualbox, 0)
ubuntu (virtualbox, 0)
box がセットアップできたら立ち上げまで行ってしまう
$ mkdir ubuntu
$ cd ubuntu/
$ vagrant init ubuntu
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.
$ ls
Vagrantfile
$ vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Importing base box 'ubuntu'...
==> default: Matching MAC address for NAT networking...
==> default: Setting the name of the VM: ubuntu_default_1432117537476_54763
==> default: Fixed port collision for 22 => 2222. Now on port 2200.
==> default: Clearing any previously set network interfaces...
==> default: Preparing network interfaces based on configuration...
default: Adapter 1: nat
==> default: Forwarding ports...
default: 22 => 2200 (adapter 1)
==> default: Booting VM...
==> default: Waiting for machine to boot. This may take a few minutes...
立ち上がったら以下のコマンドで Ubuntu 環境に入り、インストールの準備が完了する
$ vagrant ssh
Welcome to Ubuntu 12.04.1 LTS (GNU/Linux 3.2.0-32-generic x86_64)
* Documentation: https://help.ubuntu.com/
System information as of Wed May 20 07:30:10 BRT 2015
System load: 0.0 Processes: 73
Usage of /: 11.7% of 7.87GB Users logged in: 0
Memory usage: 1% IP address for eth0: 10.0.2.15
Swap usage: 0%
Graph this data and manage this system at https://landscape.canonical.com/
New release '14.04.2 LTS' available.
Run 'do-release-upgrade' to upgrade to it.
ここからいよいよ Ubuntu に xdg-open をインストールしていく
最初から入ってたらラッキーだなーと思いつつ打ってみる
$ xdg-open
The program 'xdg-open' is currently not installed. You can install it by typing:
sudo apt-get install xdg-utils
思いがけず大ヒントが返ってきたので従う
xdg-utils は xdg-open を内包するパッケージである
$ sudo apt-get install xdg-utils
Reading package lists... Done
Building dependency tree
...
E: Unable to fetch some archives, maybe run apt-get update or try with --fix-missing?
エラーになってしまった
しかしまたヒントがあるので従う
$ sudo apt-get install xdg-utils --fix-missing
Reading package lists... Done
Building dependency tree
...
Extracting templates from packages: 100%
Preconfiguring packages ...
Selecting previously unselected package ttf-dejavu-core.
晴れてインストール完了
$ mkdir test
$ touch test/file
$ xdg-open test/
{% img /images/xdg_open/directory.png %}
$ xdg-open http://blog.sojiro.me
{% img /images/xdg_open/blog.png %}
$ xdg-open http://google.com
{% img /images/xdg_open/google.png %}
ブラウザはないが URL を指定すると CUI 上で Web ページが開ける
初めてのYeoman というタイトルでこれまで2つのエントリを投稿しました。
ここであらためて Grunt と Bower について書いておきます。
特に技術的なことはないです。
The JavaScript Task Runner
と公式サイトに書いてある。一言で言うと自動化、とも。
要するに予め決められたタスクをその通りに実行してくれるツールである。 （似たようなツールとして make や rake を使ったことがある）
そして js 界隈で話題のツールやプラグイン、フレームワークがどんどん移り変わって行くのと同様に Grunt も gulp にとって変わられると話題になっている。
しかしこれは自分でやりたいことを自動化したい場合の話であって、何か自分のやりたいことを他の人がやっていたら素直にその人の作ったタスクを使わせてもらえば良いわけである。
（そういう意味で他の人が作った設定に多少手を加えられるほどの理解はあると嬉しいかもしれないが、それは必要になったときで良い）
つまり Grunt でも gulp でも、自分がやりたいことを他の人が既にやっていればそれに乗っかれば良いし、他の人がまだやっていなければ、その時点で自分が一番書きやすい方法をつかって自動化すれば良い。
問題は自分にやりたいこと（自動化したいこと）があるかどうかであって、自分が自分以外の何者でもない以上、それはあるはずで、それに気づいてないとか、考え続けられないから僕はまだまだ三流以下ということなんですね。
フロントエンドのパッケージマネージャーで
みたいなものだと理解している
使い方も対して変わらないですね
ここまで Yeoman を見てきて Yeoman の要は yo のように思える
使う側の立場では雛形(generator)を選んで yo を実行したらやりたいことは既に決まっている
作る側としては最終的にどんな雛形を作るかが問題である
ここで雛形のルール（設定）を Grunt で規定し、フロントエンドを Bower で規定することをルールとしたら雛形もまとめやすいよね、ということか
なんだか雑なエントリになってしまった。。。
まずは Yeoman の恩恵をもっと受けまくってみます
以前のエントリ 初めてのYeoman (Yoを使った雛形作成) で yo を使い generator-angular-fullstack の雛形を作りました。
今回はこのとき作った雛形を Grunt を使って実際に動かしてみたいと思います。
Gruntがどんなものかはとりあえず使ってみてからと言うことで。
npm でインストールする
$ npm install -g grunt-cli
インストールされたことを確認
$ grunt --version
grunt-cli v0.1.13
grunt v0.4.5
OK.
インストールできたら早速 Grunt を実行してみる
今回は雛形作成時に生成された Gruntfile.js で規定されている serve タスクを実行する
$ grunt serve
Running "serve" task
Running "clean:server" (clean) task
Running "env:all" (env) task
Running "injector:sass" (injector) task
Missing option `template`, using `dest` as template instead
Injecting scss files (4 files)
Running "concurrent:server" (concurrent) task
Warning: Running "sass:server" (sass) task
Warning:
You need to have Ruby and Sass installed and in your PATH for this task to work.
More info: https://github.com/gruntjs/grunt-contrib-sass
Use --force to continue.
Aborted due to warnings.
...
何やら怒られた
You need to have Ruby and Sass installed and in your PATH for this task to work.
ということだそうなので Sass をインストールする。
$ yum install rubygems
$ gem install sass
もう一度トライ
$ grunt serve
Running "serve" task
Running "clean:server" (clean) task
Running "env:all" (env) task
Running "injector:sass" (injector) task
Missing option `template`, using `dest` as template instead
Injecting scss files (4 files)
>> Nothing changed
Running "concurrent:server" (concurrent) task
Warning: Error: File to import not found or unreadable: bootstrap-sass-official/vendor/assets/stylesheets/bootstrap.
Load paths:
/home/sojiro/yeoman/angular_fullstack/client/bower_components
/home/sojiro/yeoman/angular_fullstack/client/app
/home/sojiro/yeoman/angular_fullstack/client/components
on line 4 of client/app/app.scss
Use --trace for backtrace. Use --force to continue.
Aborted due to warnings.
...
また怒られた
Warning: Error: File to import not found or unreadable: bootstrap-sass-official/vendor/assets/stylesheets/bootstrap.
今回のエラーはよくわからなかったので少し調べると、 Yeoman 三種の神器の三つ目、 Bower が必要らしいのでインストールする
$ npm install -g bower
$ bower -v
1.4.1
雛形作成時に bower.json が生成されているのでここに記述されているパッケージをインストール
$ bower install
そして再度実行
$ grunt serve
Running "serve" task
...
Running "open:server" (open) task
Warning: Command failed: /home/sojiro/yeoman/angular_fullstack/node_modules/open/vendor/xdg-open: line 584: xdg-mime: コマンドが見つかりません
xdg-open: no method available for opening 'http://localhost:9000'
Use --force to continue.
Aborted due to warnings.
...
また怒られる
Warning: Command failed: /home/sojiro/yeoman/angular_fullstack/node_modules/open/vendor/xdg-open: line 584: xdg-mime: コマンドが見つかりません
xdg-open は引数に受け取ったものをよしなにアプリケーションを選択して開いてくれるコマンドらしい（未検証）
このコマンドが、指定されたオブジェクトを適切なアプリケーションで開くために mime タイプを取得するとき、 xdg-mime コマンドを使用するようである
今回は xdg-open URL とすることで指定したURL（localhost）をブラウザで開こうとしているようである
そもそもここで使っているサーバーはブラウザが入っていないリモートのサーバーなので、該当タスクをコメントアウトする。また、サーバーのURLもIPアドレスで指定するように設定ファイル(Gruntfile.js)を変更する。
$ vim Gruntfile.js
grunt.task.run([
'clean:server',
'env:all',
'injector:sass',
'concurrent:server',
'injector',
'wiredep',
'autoprefixer',
'express:dev',
'wait',
// 'open',
'watch'
]);
});
open: {
server: {
//url: 'http://localhost:<%= express.options.port %>'
url: 'http://xx.xxx.xxx.xxx:<%= express.options.port %>'
}
},
そしてまたまた実行
$ grunt serve
Running "serve" task
...
Running "watch" task
Waiting...
動いた！！
watch タスクまで問題なく進んだので早速ブラウザからアクセスしてみる
上記で Gruntfile.js に設定したアドレスにアクセスする。ポートは 9000番。
雛形アプリケーションのトップが表示された
{% img /images/angular_fullstack/top.png %}
Sign up 画面なども用意されている
{% img /images/angular_fullstack/sign_up.png %}
今回は何も考えずに Grunt と（はからずも）Bower を使ってみた。
それぞれがどのようなツールなのか次回はまとめてみたい。
Perl の REPL 環境である Reply というツールを教えてもらったので使ってみます。
REPL とは Read-Eval-Print Loop の頭文字を取った言葉であり、
プログラムを読み(Read)、評価し(Evaluate)、結果を出力(Print)することを繰り返す(Loop)という意味である。
この環境があればファイルにプログラムを書いて保存し、実行する、という手続きを踏まなくてもスクリプトを実行できる
この REPL の Perl 版が Reply と言うことだそう
Reply は CPAN からインストールする
$ cpanm Reply
--> Working on Reply
Fetching http://cpan.metacpan.org/authors/id/D/DO/DOY/Reply-0.37.tar.gz ... OK
Configuring Reply-0.37 ... OK
...
インストールできたら早速実行してみる
$ reply
/Users/sojiro/.replyrc not found. Generating a default...
0>
コンソールが立ち上がった
早速なにかプログラムを入力してみよう
0> print 'Hello Reply';
Hello Reply$res[0] = 1
1> 12 * 12
$res[1] = 144
なるほど単純なプログラムの動作が確認できた。今度は use してみる。
2> use UUID::Tiny;
3> my $id = create_UUID_as_string(UUID_V4);
$res[2] = '87b16a6b-c712-41b4-bf46-965eeb01d3f1'
4> print $id;
87b16a6b-c712-41b4-bf46-965eeb01d3f1$res[3] = 1
このように実行結果は記憶された状態で進むので簡単にプログラムの実行結果を知りたいときに重宝しそうである。
以前のエントリ、 初めてのYeoman (Yoを使った雛形作成) にて generator-angular-fullstack という雛形を使いましたが、この雛形は MEAN なアプリケーションの雛形、と呼ばれているそうです。
MEANとはどういう意味でしょうか？
MEAN は
これらの頭文字をとったもので、これらの技術を使ったサービスのことを言う
まだ使ったこともないので想像だが、（恥ずかしいので早く使いたい）
やっぱり使わないと上記のようなしょうもないことしか言えないので generator-angular-fullstack で作った雛形を少しずつ触りながら次回はもう少しまともなことを言えるようにします。
半年以上前のある夜、大先輩エンジニアの方に隠れ家的なオシャレな大人のBarに連れて行っていただきました。
その日はそれまでに既に結構飲んでいまして、本当に恥ずかしながらそこでお話した内容のほとんどは覚えていないのですが、一つだけ鮮明に覚えているのは、
** 「トークン」ってなに？ **
と私に説明を求められたことです。なにかを答えはしたのですが、かなり曖昧な答えになっていたと思います。
さらに最悪なのは、その後その大先輩が語られた内容を覚えていないことです。これは最悪です。次の日に「トークンって結局なんでしたっけ？」などとも聞けないのでそれ以来いろいろ考えてきたことを書きます。
Webの開発をしているとしばしばトークンというものが登場します
このトークンとはなにか、という話です
そもそもトークンなんて日本語はないのだから、トークンはトークン、という感じなのですが、あえて日本語にすると
** 「証」（しょう） **
という漢字一文字が合うのかな、と思います。
これらに共通するのは
ということではないでしょうか
特に「何かが書いてある」、という部分は様々な内容を持ち得ます
このように考えると「トークン」という言葉がしっくりくるのでは、と現在思っております。