node.jsのExpressを試す

Expressとはnode.js用のMVCフレームワークです。
いわゆるMEANスタックと呼ばれているもののEです。
詳しくは下記の公式サイトをご覧下さい。

Express公式サイト
http://expressjs.com/
1. インストール

npm install express

2. 実行ファイルの作成

vi app.js

node.jsで書いたコードとExpressで書いたコードを比較すると
下記のようになる

var express = require('express');
var app = express();

app.get('/', function (req, res) {
    res.send('Hello Express!!');
});

app.listen(3000);

console.log('Server running at http://localhost:3000/');

参考:node.jsバージョン

var http = require('http');

http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello Node!!');
}).listen(3000);

console.log('Server running at http://localhost:3000/');

まずはルーティングの機能。node.jsで記載するより通常のJavaScriptの開発に近いイメージで実装することが出来る。
今回の例は短いコードなので有り難みが少ないですが、実際に業務で使うコードになると有り難みが増すかと思います。

詳細はマニュアルを参照
http://expressjs.com/4x/api.html
3. 実行

node app.js

4. http://localhost:3000/
にブラウザでアクセスすると
「Hello Express!!」と表示される

node.jsを試す

MEANスタックまずはnode.jsを試します。
node.js用MVCフレームワークのMEANのE、Expressについては次回書こうと思います。
今回はNから。

オフィシャルサイトは
https://nodejs.org/

日本ユーザーグループは
http://nodejs.jp/

node.jsは今まで正直ざっくりサーバサイドJavascriptってぐらいの認識だったんですが、少しわかってきてもやっぱりサーバサイドJavaScriptって認識は間違いではなかったようです。

かなり雑に言いますが、node.jsがwebサーバにもスクリプト言語にもなってるんです。

まずはインストールしてみましょう。

brew install node

これだけでインストール完了。
ほんと便利な世の中だ・・・

で、hello.jsという名前で下記のコードを記述

var http = require("http");

http.createServer(function(request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("Hello Node!!");
  response.end();
}).listen(8888);

これをコンソールから

node hello.js

として実行する。
ブラウザで
http://localhost:8888
にアクセスすると
なんと
「Hello Node!!」と表示されます。
ね?サーバとスクリプトでしょ?

gulpでcssを監視して自動で圧縮しmin.cssを作成する

今日は気分を変えてタスクランナーを試したいと思います。
タスクランナーといえばGruntとかgulpが有名ですが、
node.jsで動くgulpが後発で使いやすそうなのでこちらで試してみます。
環境はmac os X yosemite 10.10.5

まずはnode.jsをインストール

brew install node.js

バージョンを確認

node -v

gulpをグローバルにインストール

npm install -g gulp

作業ディレクトリの作成と移動

mkdir gulp_test
cd gulp_test

package.jsonの作成

npm init

gulpをローカルにインストール

npm install -D gulp

プラグインをローカルへインストール
gulp-cssminとgulp-renameをインストール

npm install -D gulp-cssmin gulp-rename

gulp-cssmin:cssを圧縮するプラグイン
gulp-rename:名前を変更するプラグイン

gulpfile.js の作成。
package.jsonと同階層に手動でgulpfile.jsを作成し、下記のように記述

var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');

gulp.task('cssmin', function () {
  gulp.src('css/*.css')
  .pipe(cssmin())
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest('css'));
});

gulp.task('watch', function() {
    gulp.watch('css/*.css', ['cssmin'])
});

gulp.task('default', ['cssmin','watch']);

実行

gulp

実行中は該当のディレクトリ内のcssに変更を加えると
自動でmin.cssという拡張子で同名の圧縮cssファイルが作成、更新される。

Yii2でMaterial Design Liteを使う

Bootstrapって便利ですよね
でも、たまには違うデザインテンプレートを使いたい気持ちに駆られることがあります。
そんなときにちょっと試してみたのが、
Googleが作ってるMDL(Material Design Lite)
これをYii2で使うための設定をメモ

まずはnode.jsをインストール

brew install node.js

バージョンを確認

node -v

続いてbowerのインストール

node install bower -g

バージョンを確認

bower -v

Yii2がインストールされているディレクトリへ移動

cd yii

Material Design Liteをインストール

bower install material-design-lite --save

vendor/bower/material-design-liteがあることを確認

yii/vendor/yiisoft/yii2/web/JqueryAsset.php
を元に該当箇所をMaterialDesignLiteに適した形で修正し、
MaterialDesignLiteAsset.phpを作成

frontend/assets/AppAsset.phpに

public $depends = [
    'yii\web\MaterialDesignLiteAsset',
];

追記

これでfrontend側でMDLが呼び出されるようになった。
backendで使う場合はbackend/assets/AppAsset.phpに
上記frontendと同じ設定でOK

Laravelインストーラでプロジェクト作成に失敗する

環境
windows7 pro 64bit
PHP5.6.8
Laravel5.1.7

上記の環境でLaravelの開発環境を構築中にハマッたのでメモ

まずはHomesteadをインストール
http://readouble.com/laravel/5/0/dev/ja/homestead.html
ここは問題なし。

続いてLaravelのインストール、オフィシャルの手順通り
http://readouble.com/laravel/5/1/ja/installation.html

このインストール方法はComposerを使うよりも多少早いです。

という言葉を信じてLaravelインストーラを使ってインストールを完了。
特にエラーなどは出ずに最後まで完了。

しかし、その後ブラウザでの確認を行うと
「connection refused」エラーで表示されず・・・
Homestead.yamlの設定がおかしいのかと思いまずはここを確認。
・・・問題なさそう
次にnginxのconfファイルとかを確認・・・
ここも問題なし(自動生成されるしそりゃそうだ)

しょうがないので、インストール手順を公式以外でチェックする。
公式以上に正しい情報なんてあるのかと思いつつ・・・
ん?あった!?
https://laravel10.wordpress.com/2015/02/13/laravel%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB/

laravelインストーラにバグがあるとの情報!
composerでプロジェクト作成を行ってくださいとのこと。
早速やってみると・・・

composer create-project laravel/laravel --prefer-dist PROJECT_NAME

あっさりブラウザに表示された・・・
まさか公式のインストーラにバグがあるとは夢にも思わずかなりの時間を浪費してしまった。
でもなんとか解決出来てよかった
ララ帳(https://laravel10.wordpress.com/)さんに感謝

Yii2のDB Migrationを使ってテーブル作成 その3 -batch insert-

Yii2のDB Migration最終回!
最後はデータのinsertを行います。
データを1つずつinsertしてもいいんですが、
通常1つだけデータをinsertするってことはないので、
初めからBatch Insertを行います。
通常のSQLでいうバルクインサートです。
記述方法は

     $columns = array('id',
       'title',
       'content',
       'sub_table_id'
     );
     $values = array(
       array(1,
         'Title1',
         'これは1つ目',
         1,
       ),
       array(2,
         'Title2',
         'これは2つ目',
         1,
       ),
     );
     $this->batchInsert('tablename', $columns, $values);

をその2で作成したファイルに追記

<?php

use yii\db\Schema;
use yii\db\Migration;

class m150620_123401_create_tablename_table extends Migration
{
    public function up()
    {
        $this->createTable('tablename', [
            'id' => Schema::TYPE_PK,
            'title' => Schema::TYPE_STRING . ' NOT NULL',
            'content' => Schema::TYPE_TEXT,
            'sub_table_id' => Schema::TYPE_INTEGER,
        ]);
        $this->addForeignKey('fkey_tablename_sub_table_id', 'sub_table', 'sub_table_id', 'sub_table','id');
        $this->createIndex('tablename_title_index', 'tablename', 'title');
     //データinsert
     $columns = array('id',
       'title',
       'content',
       'sub_table_id'
     );
     $values = array(
       array(1,
         'Title1',
         'これは1つ目',
         1,
       ),
       array(2,
         'Title2',
         'これは2つ目',
         1,
       ),
     );
     $this->batchInsert('tablename', $columns, $values);
    }

    public function down()
    {
        $this->dropTable('tablename');
    }
}

これで初期テーブル作成コマンド用のファイルの準備が完了しました。
あとは下記を実行すると・・・

yii migrate/to m150620_123401_create_tablename_table

テーブルが作成されて、外部キー制約、インデックス、データまで準備されちゃてます!
しかも、このファイルでDB作成用のSQLは不要!
いやー便利便利。

Yii2のDB Migrationを使ってテーブル作成 その2 -index,外部キー制約-

Yii2のDB Migrationのその2。
今回はindexの貼り方、外部キー制約の設定、データ投入を行う。
前回の記事で作成した
m150620_123401_create_tablename_table.phpというファイルを触っていきます。

<?php

use yii\db\Schema;
use yii\db\Migration;

class m150620_123401_create_tablename_table extends Migration
{
    public function up()
    {
        $this->createTable('tablename', [
            'id' => Schema::TYPE_PK,
            'title' => Schema::TYPE_STRING . ' NOT NULL',
            'content' => Schema::TYPE_TEXT,
            'sub_table_id' => Schema::TYPE_INTEGER,
        ]);
    }

    public function down()
    {
        $this->dropTable('tablename');
    }
}

現在は上記のようにテーブルの作成と削除だけが設定されています。
まずは外部キー制約の設定を行います。
外部キー制約で使うカラムsub_table_idを追加しています。
今回の例ではsub_tableのidを対象に設定します。

$this->addForeignKey('fkey_tablename_sub_table_id', 'tablename', 'sub_table_id', 'sub_table','id');

外部制約キーの名前(任意)、自身のテーブル名、自身のカラム、制約対象テーブル名、制約対象カラムの順に記載します。
この一文をcreateTableの下に追記します。

<?php

use yii\db\Schema;
use yii\db\Migration;

class m150620_123401_create_tablename_table extends Migration
{
    public function up()
    {
        $this->createTable('tablename', [
            'id' => Schema::TYPE_PK,
            'title' => Schema::TYPE_STRING . ' NOT NULL',
            'content' => Schema::TYPE_TEXT,
            'sub_table_id' => Schema::TYPE_INTEGER,
        ]);
        $this->addForeignKey('fkey_tablename_sub_table_id', 'sub_table', 'sub_table_id', 'sub_table','id');
    }

    public function down()
    {
        $this->dropTable('tablename');
    }
}

次にtitleにindexを貼ってみましょう。

$this->createIndex('tablename_title_index', 'tablename', 'title');

indexの名前(任意)、テーブル名、対象のカラムの順に記載します。
この一文をcreateTableの下に追記します。

<?php

use yii\db\Schema;
use yii\db\Migration;

class m150620_123401_create_tablename_table extends Migration
{
    public function up()
    {
        $this->createTable('tablename', [
            'id' => Schema::TYPE_PK,
            'title' => Schema::TYPE_STRING . ' NOT NULL',
            'content' => Schema::TYPE_TEXT,
            'sub_table_id' => Schema::TYPE_INTEGER,
        ]);
        $this->addForeignKey('fkey_tablename_sub_table_id', 'sub_table', 'sub_table_id', 'sub_table','id');
        $this->createIndex('tablename_title_index', 'tablename', 'title');
    }

    public function down()
    {
        $this->dropTable('tablename');
    }
}

これでindexが作成されます。

Yii2のDB Migrationを使ってテーブル作成 その1 -createTable-

最近Yii2を触っているので遊びながらやったことをメモ。

Yii2でサイト構築する際にまず行うこと・・・
DBのテーブル作成を行う人が多いと思います。
SQLをバージョン管理してもいいんですが、
折角なのでDB Migrationを使ってコンソールからコマンド叩いてテーブルを構築します。
※DBは作成済みでyiiコマンドを実行出来る状況になっていることが前提

yii migrate/create create_tablename_table

上記コマンドを実行すると
m150620_123401_create_tablename_table.phpというファイルが
@app/migrations以下に作成されます。
ファイル名は作成日時を使って

m<YYMMDD_HHMMSS>_<Name>.php

となってます。
このファイルを開いてみると

<?php

use yii\db\Schema;
use yii\db\Migration;

class m150620_123401_create_tablename_table extends Migration
{
    public function up()
    {
    }

    public function down()
    {
        echo "m150620_123401_create_tablename_table cannot be reverted.\n";
        return false;
    }
}

このファイルを修正していきます。

<?php

use yii\db\Schema;
use yii\db\Migration;

class m150620_123401_create_tablename_table extends Migration
{
    public function up()
    {
        $this->createTable('tablename', [
            'id' => Schema::TYPE_PK,
            'title' => Schema::TYPE_STRING . ' NOT NULL',
            'content' => Schema::TYPE_TEXT,
        ]);
    }

    public function down()
    {
        $this->dropTable('tablename');
    }
}

これだけです。
up()がテーブル作成時に使用されるfunction
down()がテーブル削除時に使用されるfunctionになっています。

テーブルを作成するにはコンソールから

yii migrate/to m150620_123401_create_tablename_table

これでtablenameっていうテーブルが作成されます。
カラムはidがプライマルキー、titleがSTRINGでNOT NULL、contentがtextになっています。

テーブルを削除するにはコンソールから

yii migrate/down

このコマンドで最も最近作成されたテーブルが削除されます。
ちなみにこのコマンド実行するとどのテーブルを削除するか確認する画面が出てくるので、
削除対象のテーブルを確認してから削除を実行出来ます。

SpotifyのAPIを試す

日本ではサービスの開始が始まる始まると言いながら全く始まりそうにないSpotifyですが、APIは日本からも普通に使えたりします。
音楽好きとしては日本からの利用がこんなにあるんだよ!ってアピールして日本でのサービス開始を促したいところ(大げさ)

https://developer.spotify.com/web-api/

ここから利用出来るAPIを探してきます。
この中でもSpotifyにどんだけのアーティストが登録しているのか気になります。
なので、ここはSearch for an Itemってのを試します。

https://developer.spotify.com/web-api/search-item/

試しに

https://api.spotify.com/v1/search?query=a*&offset=0&limit=1&type=artist

を投げると

{
“artists” : {
“href” : “https://api.spotify.com/v1/search?query=a*&offset=0&limit=1&type=artist”,
“items” : [ {
“external_urls” : {
“spotify” : “https://open.spotify.com/artist/1vCWHaC5f2uS3yhpwWbIA6”
},
“followers” : {
“href” : null,
“total” : 3941093
},
“genres” : [ “big room”, “edm”, “electro house”, “house”, “progressive electro house” ],
“href” : “https://api.spotify.com/v1/artists/1vCWHaC5f2uS3yhpwWbIA6”,
“id” : “1vCWHaC5f2uS3yhpwWbIA6”,
“images” : [ {
“height” : 686,
“url” : “https://i.scdn.co/image/886965d33b3e1e469d24f3a8e44374b1e19d3055”,
“width” : 1000
}, {
“height” : 439,
“url” : “https://i.scdn.co/image/b34ff69e37a8e5ceed9568b1e817b88d6c2691dd”,
“width” : 640
}, {
“height” : 137,
“url” : “https://i.scdn.co/image/5a4f940347ac9bc42405a3c66531b7c1cb25efa0”,
“width” : 200
}, {
“height” : 44,
“url” : “https://i.scdn.co/image/3e77006dc092166fee8b9004e4e1e1fabc045d93”,
“width” : 64
} ],
“name” : “Avicii”,
“popularity” : 94,
“type” : “artist”,
“uri” : “spotify:artist:1vCWHaC5f2uS3yhpwWbIA6”
} ],
“limit” : 1,
“next” : “https://api.spotify.com/v1/search?query=a*&offset=1&limit=1&type=artist”,
“offset” : 0,
“previous” : null,
“total” : 469391
}
}

とAviciiさんが返されました。
ついでに検索した「a」がつくアーティストの総数はなんと「469391」!!(2015/06/07現在)
すごいさすがSpotify。
で、結局何が言いたかったかと言うと
「早く日本でもサービスを開始してください。お願いします。Spotifyさん!」ってことです。