2018年5月

[Laravel]環境構築編その2 Laravelとそのバックエンド

福岡拠点の香月です。

Laravel環境構築編その2はLaravelのインストールまでの実践記です。
今回インストールする環境は次の通り

- - MySQL5.7
  - PHP7.2
  - Comporser
  - Laravelインストーラ2.0.1

MVCモデルのM（Model）としてMySQLを使用します。
Laravelはphpアプリケーションなのでphpを入れて、Laravel構築に必要なComposerも入れます。Laravelの最新版は5.6、これを構築するためのLaravelインストーラを最後に入れます。

環境は前回Vagrantで構築したCentOS上です。
Windowsのコマンドプロンプトを立ち上げて次のコマンドでCentOSを起動。

C:\vm\centos72> vagrant up

1	C:\vm\centos72> vagrant up

ターミナルソフトでローカルポート2222にsshでアクセスします。
以降の操作はターミナル上で行います。

事前準備としてyumレポジトリの有効／無効を切り替えることができるようにユーティリティをインストールしておきます。

# sudo -s
# yum install yum-utils

1 2	# sudo -s # yum install yum-utils

MySQL5.7のインストール

MySQLの公式からDOWNLOAD -> Yum Repositoryとたどり、今回のCentOS7用として「Red Hat Enterprise Linux 7」用のファイルをダウンロードし、インストールしていきます。
（A Quick Guide to Using the MySQL Yum Repository）

# wget https://dev.mysql.com/get/mysql80-community-release-el7-1.noarch.rpm
# rpm -Uvh mysql80-community-release-el6-n.noarch.rpm
# yum-config-manager --disable mysql80-community
# yum-config-manager --enable mysql57-community
# yum install mysql-community-server
# systemctl start mysqld
# systemctl enable mysqld

# wget https://dev.mysql.com/get/mysql80-community-release-el7-1.noarch.rpm

# rpm -Uvh mysql80-community-release-el6-n.noarch.rpm

# yum-config-manager --disable mysql80-community

# yum-config-manager --enable mysql57-community

# yum install mysql-community-server

# systemctl start mysqld

# systemctl enable mysqld

1行目で公式から最新のrpmファイルをダウンロードし、
2行目でyumレポジトリに追加します。
そのままインストールするとMySQL8.0がインストールされてしまうので、
3行目でレポジトリのMySQL8.0を無効にし、
4行目でMySQL5.7を有効にします。
5行目でインストール開始。
6行目で起動、
7行目でサービス登録です。

MySQLの初回起動時にはログファイルにrootの初期パスワードが出力されるので
それを使ってログインし、新しいパスワードを設定します。

# grep 'temporary password' /var/log/mysqld.log
2018-**-***** [Note] A temporary password is generated for root@localhost: XXXXXXXXX
# mysql -uroot -p
Enter password: <ここに XXXXXXXXX を入力>
mysql> ALTER USER 'root'@'localhost' IDENTIFIED BY '<ここに新しいパスワード>';

# grep 'temporary password' /var/log/mysqld.log

2018-**-***** [Note] A temporary password is generated for root@localhost: XXXXXXXXX

# mysql -uroot -p

Enter password: <ここに XXXXXXXXX を入力>

mysql> ALTER USER 'root'@'localhost' IDENTIFIED BY '<ここに新しいパスワード>';

PHP7.2のインストール

今回使用するLaravel5.6の公式ドキュメントでPHPの要件を確認すると、以下のようになっているので、それに合わせて拡張機能も一緒にインストールすることにします。またバックエンドのMySQLのための拡張機能も一緒にインストールします。

- - PHP >= 7.1.3
  - OpenSSL PHP拡張
  - PDO PHP拡張
  - Mbstring PHP拡張
  - Tokenizer PHP拡張
  - XML PHP拡張
  - Ctype PHP Extension
  - JSON PHP Extension

さらに、Laravel5.6の要件には書かれていませんが、zip拡張がないとLaravelインストールが失敗するため、これも一緒にインストールします。

PHPの公式ではソースしか公開されていませんが、yumレポジトリで使えるパッケージがRemi’s RPM Repositoryで公開されているのでそれを利用します。
CentOS用のURLからダウンロード、インストールします。

# yum install epel-release 
# wget https://rpms.remirepo.net/enterprise/remi-release-7.rpm
# rpm -Uvh remi-release-7.rpm
# yum-config-manager --enable remi-php72
# yum install php php-mbstring php-pdo php-xml php-pecl-zip php-mysql

# yum install epel-release

# wget https://rpms.remirepo.net/enterprise/remi-release-7.rpm

# rpm -Uvh remi-release-7.rpm

# yum-config-manager --enable remi-php72

# yum install php php-mbstring php-pdo php-xml php-pecl-zip php-mysql

1行目でremi-release-7.rpmのインストールに必要なモジュールを事前にインストールします。
2行目でパッケージをダウンロードし、
3行目でレポジトリを追加。
4行目でレポジトリのPHP7.2を有効にし、
5行目で必要なモジュールを含めてインストールします。
この4行目のPHP7.2の有効化を忘れると、CentOSのbaseレポジトリにあるPHP5.4がインストールされるので注意しましょう。
これで必要なものが全部入りました。php -m と打って必要なPHPの拡張モジュールが入っているか確認できます。

mbstringも入ったのでPHPの日本語の設定を行っておきます。

vi /etc/php.ini
expose_php = Off
date.timezone = Asia/Tokyo
mbstring.language = Japanese
mbstring.internal_encoding = UTF-8
mbstring.http_input = pass
mbstring.http_output = pass
mbstring.encoding_translation = Off
mbstring.detect_order = auto
mbstring.substitute_character = none
mbstring.func_overload = 0

vi /etc/php.ini

expose_php = Off

date.timezone = Asia/Tokyo

mbstring.language = Japanese

mbstring.internal_encoding = UTF-8

mbstring.http_input = pass

mbstring.http_output = pass

mbstring.encoding_translation = Off

mbstring.detect_order = auto

mbstring.substitute_character = none

mbstring.func_overload = 0

今回Webサーバーにはapache2.4を使用しています。PHPの公式ドキュメントのApache2.x系へのインストールを見ると、apacheの設定ファイルにPHP7用のモジュールをロードするための設定の追加が必要と書かれています。

httpd.conに以下の行の追加が必要
LoadModule php7_module modules/libphp7.so

1 2	httpd.conに以下の行の追加が必要 LoadModule php7_module modules/libphp7.so

しかしそこはパッケージインストールの良いところ、yumでのインストールで以下のファイルが作成され、設定が行われています。

/etc/httpd/conf.modules.d/15-php.conf
#
# PHP is an HTML-embedded scripting language which attempts to make it
# easy for developers to write dynamically generated webpages.
#

# Cannot load both php5 and php7 modules
<IfModule !mod_php5.c>
  <IfModule prefork.c>
    LoadModule php7_module modules/libphp7.so
  </IfModule>
</IfModule>


<IfModule !mod_php5.c>
  <IfModule !prefork.c>
    LoadModule php7_module modules/libphp7-zts.so
  </IfModule>
</IfModule>

/etc/httpd/conf.modules.d/15-php.conf

# PHP is an HTML-embedded scripting language which attempts to make it

# easy for developers to write dynamically generated webpages.

# Cannot load both php5 and php7 modules

LoadModule php7_module modules/libphp7.so

</IfModule>

LoadModule php7_module modules/libphp7-zts.so

</IfModule>

これを有効にするために、apacheを再起動します。また、これが正しく動作しているか確認するためにDocumentRootにファイルinfo.phpを追加します。

# systemctl restart httpd
# touch /var/www/html/info.php
# vi /var/www/html/info.php
---- info.php ----
<?php
phpinfo();
?>

# systemctl restart httpd

# touch /var/www/html/info.php

# vi /var/www/html/info.php

---- info.php ----

<?php

phpinfo();

追加が完了したら動作確認のために、ホストOS（Windows）上のブラウザからこのファイルのURLを打ち込みます。http://localhost:8080/info.php

この画面が出れば成功です。mbstringの欄も設定どおりになっていることも確認できます。apacheでは起動時にphp.iniを読み込むため、php.iniを編集した際は必ずapacheを再起動します。

Composerのインストール

こちらも公式ページの「Getting Started」と「Download」ページの記述に沿ってインストールします。引き続きrootでの作業です。

# php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
# php -r "if (hash_file('SHA384', 'composer-setup.php') === '544e09ee996cdf60ece3804abc52599c22b1f40f4323403c44d44fdfdd586475ca9813a858088ffbc1f233e9b180f061') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
Installer verified
# php composer-setup.php
# php -r "unlink('composer-setup.php');"
# mv composer.phar /usr/local/bin/composer

# php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

# php -r "if (hash_file('SHA384', 'composer-setup.php') === '544e09ee996cdf60ece3804abc52599c22b1f40f4323403c44d44fdfdd586475ca9813a858088ffbc1f233e9b180f061') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

Installer verified

# php composer-setup.php

# php -r "unlink('composer-setup.php');"

# mv composer.phar /usr/local/bin/composer

ComposerのインストールはPHPの構文をphp -rで処理させて実行するように記述されているので、その通りにやります。深い意味はないと思いますけど。
1行目でインストーラーをダウンロードし、
2行目でダウンロードしたものが正しいかハッシュ値の比較、
3行目の「Installer verified」で比較結果が正しいことが示されています。
4行目でインストーラー実行し、
5行目でインストーラーを削除しています。
ここまでで同じフォルダに「composer.phar」が出来上がっているので、6行目で全ユーザーにパスが通っている/usr/local/binに「composer」という名前で配置します。

Laravelインストーラのインストール

いよいよLaravelです。Laravelはそれを使用するユーザーごとにインストーラをインストールすることが求められています。

# exit
# composer global require "laravel/installer"
# vi ~/.bash_profile
----- .bash_profile -----
PATH=$PATH:$HOME/.local/bin:$HOME/bin:$HOME/.config/composer/vendor/bin
-------------------------
# source ~/.bash_profile

# exit

# composer global require "laravel/installer"

# vi ~/.bash_profile

----- .bash_profile -----

PATH=$PATH:$HOME/.local/bin:$HOME/bin:$HOME/.config/composer/vendor/bin

-------------------------

# source ~/.bash_profile

1行目でrootからvagrantユーザーに戻ります。
2行目でLaravelの最新をインストールし、
3行目で.bash_profileの編集を開始し、PATH=の行の最後に「:」をつけて、続けてLaravelのbinディレクトリを追加します。
7行目で設定を再読み込みして完了です。

正しくLaravelインストーラが実行できるか確認します。

# laravel -V
Laravel Installer 2.0.1

1 2	# laravel -V Laravel Installer 2.0.1

バージョンが表示されればOK。

ということでインフラ構築はここまで。ありがとうございました。

[Laravel]環境構築編その１インフラ

福岡拠点の香月です。

LaravelはPHPのWebアプリケーションフレームワークです。
今後これの勉強を兼ねて不定期にLaravelの記事を書いていきたいと思います。

まずは環境構築編その１としてインフラ構築について実践記です。
用意する環境は

- VirtualBoxとVagrantを使ってVM（仮想マシン）を構築
- ホストOSはWindows 10
- ゲストOSはCentOS 7.2
- ゲストOS上にapache2.4を導入

となります。では早速行ってみよう。

VirtualBoxのインストール

Oracleのホームページから最新版をダウンロードします。
この時の最新版は5.2.8。PlatformのWindowsのところを見ると64bit版しかない模様。ダウンロードしたらインストーラを実行します。選択肢はすべてデフォルトのままでOK。サクッといきます。

Vagrantのインストール

続いてVagrant。これはVirtualBox上にVMを簡単に作成してくれるすごいツールです。これをVargarnのホームページから最新版をダウンロードして実行します。
この時の最新版は2.1.1。こちらも64bit版を選択。
選択肢らしい選択肢はないのでデフォルトのままインストールします。

仮想マシンを作成：CentOS7.2

ではここから仮想マシンの作成です。
仮想マシンはVagrantのboxと呼ばれるデータが公開されており、ここから目的に合致したboxを選択して仮想マシンを作成します。
公開サイトの検索窓で「bento/centos」と入力して表示されるなかからCentOS7.2を選択します。（「bento」は「弁当」なんですね。）

詳細サイトにはこのboxの使用方法が書いているので、newタブに書かれている通りにコマンドを実行することになります。

まずはWindowsのエクスプローラで好きな場所にフォルダを作成し、そこをVM作業フォルダとします。C:\vm\centos72としましょう。コマンドプロンプトでそのフォルダに移動し、上記newタブのコマンドを実行します。

C:\vm\centos72> vagrant init bento/centos-7.2
C:\vm\centos72> vagrant up

1 2	C:\vm\centos72> vagrant init bento/centos-7.2 C:\vm\centos72> vagrant up

1行目で初期化処理がはしり、作業フォルダに「Vagrantfile」が作成されます。
2行目でCentOS7.2用のboxがダウンロードされ、VirtualBox用仮想マシンを展開、実行開始となります。

これで仮想マシンが作成され、CentOS7.2が起動しました。簡単。
次は一度止めてapacheにホストOSのブラウザからアクセスするためにポートフォワーディングの設定をします。
仮想マシンを停止するコマンドはこう！

C:\vm\centos72>vagrant halt

1	C:\vm\centos72>vagrant halt

止まったら作業フォルダにあるVagrantfileをエディタで開いて、以下の行を有効にしましょう。

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

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

　　　　↓

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

これでブラウザから「http://localhost:8080/」を開くと、CentOS上のポート80番で待ち受けているapacheが反応してくれます（apacheのインストールまだこの後）。ホストOSですでにwebサーバーを実行している場合にポート番号の重複を防ぐことができます。

では再びCentOSを起動しましょう。

C:\vm\centos72>vagrant up

1	C:\vm\centos72>vagrant up

今度はboxをダウンロードする必要はないためすぐにCentOSが起動します。

apacheのインストール

次はCentOS上にapacheをインストールします。
PuTTYなどターミナルソフトでローカルポート2222にsshでアクセスします。
ユーザー名、パスワードは「vagrant」となっています。打ち込みましょう。

無事ログインできました。
※sshのデフォルトポートは22でこのCentOSでも22で動いています。ターミナルソフトで2222でアクセスするのは、Vagrantでは「2222」->「22」へのポートフォワーディングが常に有効なためです。

CentOSではyumコマンドを使ってソフトをインストールできます。ソースからビルドするより簡単ですね。ユーザーrootで実行します。

# sudo -s
# yum install httpd

1 2	# sudo -s # yum install httpd

途中いくつか確認が求められるので「y」で続行するとインストール完了です。
次のコマンドでapacheを起動して

# systemctl start httpd

1	# systemctl start httpd

ブラウザから「http://localhost:8080」にアクセスしてみましょう。

ページを表示できました。
もしここで表示できない場合、上に戻ってポートフォワーディングの設定を確認してください。

CentOSを再起動してもapacheが実行されるようにしておきます。

# systemctl enable httpd.service

1	# systemctl enable httpd.service

これでインフラは完成しました。はず。

次回はPHP、Comporser、Laravelのインストールの予定です。

よく使うウィンドウズのショートカット

福岡拠点の野田です。GWは晴れ間もありましたが、ここ数日雨が続いていて梅雨が気になる今日この頃です。

今回はよく使うWindowsのショートカットを紹介したいと思います。
よく使うWindowsのショートカットといえば、ctrl + alt + delete がよく知られていますが、ほかにどんなものがあるかご存知ですか？

以下は、私がよく使うWindowsのショートカットです。

その１： ctrl + esc

アプリを開きたいときにスタートボタンをマウスで押すのは、面倒ですよね。そのまま開きたいアプリ名を入力するとアプリ検索をして実行することができます。cmd と入力すればコマンドプロンプトが、excel と入力すればエクセルを検索されるので、そのままエンターを押下すると開くことができます。

その２：windowボタン + L

席を外すとき、画面ロックをかけるのは面倒なもの。このショートカットを使えば楽々です。トイレに急がなければならないときもばっちりです。

その３：windowボタン + P

プロジェクターに映像が出ない！そんなときに使うコマンドです。出番は少ないですが、勉強会などでプレゼンするときは心強い味方です。

その４：windowボタン + tab

alt + tab を使った画面切り替えや alt + shift + tab の切り替え戻しパターンもよく使いますが、画面の開いた順にさかのぼりたいときはこれが良いと思います。

その５：windowボタン + D からの alt + F4

複合技です。デスクトップ表示してから alt + F4 を押すとシャットダウン/再起動ダイアログを表示することができます。window を開いているときに閉じるコマンドとして有名な alt + F4 ですが、デスクトップ表示している状態でこの技を使うとシャットダウンすることができます。

番外編

alt + space からの n 押下。
いま開いている画面を最小化したいときに使います。
そこのあなた！Youtubeを見ていて隠したい時に使っちゃいけないですよ！

ショートカットキーを使うことで作業効率も上がると思います。
何か良いコマンドを見つけたら是非教えていただければと思います。

[JavaScript]D3.jsでグラフを書こう！

福岡拠点の野田です。今日は、データ解析に欠かせない可視化を支援するツールとして、D3.jsの使い方を紹介します。

可視化をするとき、棒グラフだったり、線グラフを出力することが多いと思います。Python、Rなどを使った画像出力ももちろん簡単に実現できるのですが、凝った複雑なグラフを出そうとするとき、D3.jsで描くSVGの柔軟性には目を見張るところがあります。SVGは、Scalable Vector Graphicsの略でベクター情報のイメージデータになります。そのため、拡大しても非常に高精細に表示することができます。また、CSSやJavasciptでイベント制御も可能なため、凝った動きのあるグラフを実現できます。

D3.jsの最新版は、ver5.1.0(2018/05/02時点)になります。ver3.xからver4.xにアップデートした際に大きく変更があったため、今回は個人的にもなじみのあるver3.xでの使い方を紹介します。

使うためには、HTMLヘッダーに以下を組み込むだけ。とても簡単です。

ver3.x

<script src="https://d3js.org/d3.v3.min.js"></script>

1	<script src="https://d3js.org/d3.v3.min.js"></script>

ちなみにver5.xでは以下のような感じです。

<script src="https://d3js.org/d3.v5.min.js"></script>

1	<script src="https://d3js.org/d3.v5.min.js"></script>

ここからは、ver3.xでの記述例になります。
以下のような流れでグラフを表示します。

1) 領域確保

グラフを表示する領域を確保します。軸に値を表示するため、マージンを確保します。

    var margin = {top: 30, right: 100, bottom: 40, left: 50};
    // 領域確保
    var svg = d3.select("body").append("svg")
        .attr("width", (width + margin.left + margin.right))
        .attr("height", (height + margin.top + margin.bottom))
        .append("g")
        .attr("transform", 
            "translate(" + margin.left + "," + margin.top + ")");

var margin = {top: 30, right: 100, bottom: 40, left: 50};

// 領域確保

var svg = d3.select("body").append("svg")

.attr("width", (width + margin.left + margin.right))

.attr("height", (height + margin.top + margin.bottom))

.append("g")

.attr("transform",

"translate(" + margin.left + "," + margin.top + ")");

2) スケール設定

値の描画変換を行うスケール(基準となる物差し)を指定します。のちにデータ描画でも使います。

    // スケール設定
    var xScale = d3.time.scale() //時系列の場合、d3.time.scale()を使用
        .domain([new Date(minX), new Date(maxX)])
        .range([0, width]);

    var yScale = d3.scale.linear()
        .domain([minY, maxY])
        .range([height, 0]);

// スケール設定

var xScale = d3.time.scale() //時系列の場合、d3.time.scale()を使用

.domain([new Date(minX), new Date(maxX)])

.range([0, width]);

var yScale = d3.scale.linear()

.domain([minY, maxY])

.range([height, 0]);

3) 軸の描画

スケールをもとに軸を描画します。

    // X軸設定
    var xAxis = d3.svg.axis()
        .ticks(24) // 区切りの数
        .scale(xScale) // X-スケール
        .orient("bottom") // 軸の表示位置
        .tickSize(6, -height) // 区切り線のサイズ
        .tickFormat(function(d,i){ // 区切りの値
             // １年以内の場合
             // var fmtFunc = d3.time.format("%Y/%m");
             // １か月以内の場合
             var fmtFunc = d3.time.format("%m/%d");
             // １日以内の場合
             // var fmtFunc = d3.time.format("%H:%M");
             return fmtFunc(d);
        });

    // X軸を描画。
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .append("text")
        .attr("y", 30)
        .attr("x", width + 10);

    // Y軸設定
    var yAxis = d3.svg.axis()
        .ticks(16) // 区切りの数
        .scale(yScale) // Y-スケール
        .orient("left") // 表示位置
        .tickSize(6, -width); // 区切り線のサイズ

    // y軸を描画。
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("y", -10)
        .attr("x", -10)
        .style("text-anchor", "end")
//        .text("Y軸タイトル")
        ;

// X軸設定

var xAxis = d3.svg.axis()

.ticks(24) // 区切りの数

.scale(xScale) // X-スケール

.orient("bottom") // 軸の表示位置

.tickSize(6, -height) // 区切り線のサイズ

.tickFormat(function(d,i){ // 区切りの値

// １年以内の場合

// var fmtFunc = d3.time.format("%Y/%m");

// １か月以内の場合

var fmtFunc = d3.time.format("%m/%d");

// １日以内の場合

// var fmtFunc = d3.time.format("%H:%M");

return fmtFunc(d);

});

// X軸を描画。

svg.append("g")

.attr("class", "x axis")

.attr("transform", "translate(0," + height + ")")

.call(xAxis)

.append("text")

.attr("y", 30)

.attr("x", width + 10);

// Y軸設定

var yAxis = d3.svg.axis()

.ticks(16) // 区切りの数

.scale(yScale) // Y-スケール

.orient("left") // 表示位置

.tickSize(6, -width); // 区切り線のサイズ

// y軸を描画。

svg.append("g")

.attr("class", "y axis")

.call(yAxis)

.append("text")

.attr("y", -10)

.attr("x", -10)

.style("text-anchor", "end")

// .text("Y軸タイトル")

;

4) 補助線の描画

必須ではないですが、指定することでぐっとクオリティがアップします。

    // ライン関数を定義
    var line = d3.svg.line()
        .x(function(d) {return xScale(new Date(d["x"]));})
        .y(function(d) {return yScale(d["y"]);});

    // X軸の基準線を作成
    var baseLine = [
        [{x: minX, y:0},{x: maxX, y:0}],
    ];

    for (xi = 0; xi < baseLine.length; xi++) {
        var baseRecord = baseLine[xi];
        svg.append('path')
            .attr({
                'd': line(baseRecord),
                'stroke': '#999',
                'stroke-width': 1,
            });
    }

    // Y軸のtickからX軸に平行な区切り線を描画
    var diff = (maxY - minY) / (svg.selectAll("g.y g.tick")[0].length - 1);
    for (yi = minY + diff; yi < maxY; yi = yi + diff) {
        var guideRecord = [
            {x: minX, y: yi},
            {x: maxX, y: yi}
        ];
        svg.append('path')
            .attr({
                'd': line(guideRecord),
                'stroke': '#aaa',
                'stroke-width': 0.2,
            });
     }

// ライン関数を定義

var line = d3.svg.line()

.x(function(d) {return xScale(new Date(d["x"]));})

.y(function(d) {return yScale(d["y"]);});

// X軸の基準線を作成

var baseLine = [

[{x: minX, y:0},{x: maxX, y:0}],

];

for (xi = 0; xi < baseLine.length; xi++) {

var baseRecord = baseLine[xi];

svg.append('path')

.attr({

'd': line(baseRecord),

'stroke': '#999',

'stroke-width': 1,

});

}

// Y軸のtickからX軸に平行な区切り線を描画

var diff = (maxY - minY) / (svg.selectAll("g.y g.tick")[0].length - 1);

for (yi = minY + diff; yi < maxY; yi = yi + diff) {

var guideRecord = [

{x: minX, y: yi},

{x: maxX, y: yi}

];

svg.append('path')

.attr({

'd': line(guideRecord),

'stroke': '#aaa',

'stroke-width': 0.2,

});

}

5) データ値の描画
線グラフだったり、点グラフだったり、棒グラフなどデータを描画します。今回は、線グラフを扱います。

    d3.csv(csvUrl, function(data){
		// 線を描画
        var trackWidth = 0.5;
        var strokeColor = 'none';
        var strokeWidth = 1;
        var color = '#666';

        var line = d3.svg.line()
            .x(function(d) { return xScale(new Date(d[targetDate])); })
            .y(function(d) { return yScale(d[target]); })
            .defined(function(d) { return d[target]!=null; })
            .interpolate("linear"); // 線の形

        svg.append("path")
            .attr("d",line(data))
            .attr("fill", strokeColor)
            .attr("stroke", color)
            .attr("stroke-width", strokeWidth);
	});

d3.csv(csvUrl, function(data){

// 線を描画

var trackWidth = 0.5;

var strokeColor = 'none';

var strokeWidth = 1;

var color = '#666';

var line = d3.svg.line()

.x(function(d) { return xScale(new Date(d[targetDate])); })

.y(function(d) { return yScale(d[target]); })

.defined(function(d) { return d[target]!=null; })

.interpolate("linear"); // 線の形

svg.append("path")

.attr("d",line(data))

.attr("fill", strokeColor)

.attr("stroke", color)

.attr("stroke-width", strokeWidth);

});

これでCSVを読み込むと以下のようなグラフを表示することができるようになります。

SVGは、HTMLと同じくXMLで記述されるDOM(文書オブジェクトモデル)の1種です。イベント処理も差し込むことができるため、HTMLと同様な感覚で動的処理を扱えるのは強みと思います。D3.js自体、jQueryなどと同様、DOM操作するための言語とも言えます。慣れが若干必要ですが、凝ったグラフの描けるは大きな魅力です。

これを機会にぜひ触れてみてください。

[PHP]ExcelでUTF-8のCSVが文字化けしないようにBOMをつけよう！

福岡拠点の香月です。

この記事はブラウザからダウンロードするCSVファイルをWebサーバー上で作成するようなPHPプログラムを開発している人向けのトピックです。

ExcelをインストールするとCSVファイル（Comma-Separeted Values）がExcelに関連づきます。テキストエディタでCSVファイルを開く場合と違い、Excelで開くと列が揃って見やすいという利点があります。やったー！

Excelやその他WindowsのアプリでCSVファイルを作成した場合、日本語も問題なく扱えます。保存して改めてExcelで開いても正しく表示されますよね。
しかし、WebからCSVファイルをダウンロードしてExcelで開いた場合に、稀に日本語が文字化けしていることがあります。

サーバー上で次のようなプログラムを組んでcsvファイルを出力します。

$content = '';
$content .= '番号,名前,将来の夢';
$content .= '1,太郎,サッカー選手';
$content .= '2,華子,パティシエール';

$content = '';

$content .= '番号,名前,将来の夢';

$content .= '1,太郎,サッカー選手';

$content .= '2,華子,パティシエール';

クライアント側で保存したcsvファイルをExcelで開くと…

残念ですね。これはCSVファイルの文字コードの違いが問題です。
Windowsのアプリでファイル保存した場合、文字コードはほぼShift-JISとなります。対して近年のWebサーバーで扱う文字コードはほぼUTF-8となっており、CSVファイルもUTF-8であることが多いでしょう。で、このUTF-8の文字コードですが、コード表上はアルファベットや記号（日本語を含む2バイト文字以外）はShift-JISと同じコード範囲を使用しています。つまり、アルファベットや記号だけで書かれたUTF-8のファイルは、Shift-JISのファイルと全く同一ということになります。
日本語Windows上のExcelでCSVファイルを読み込む場合、UTF-8とShift-JISの区別がつかないため、ExcelさんはShift-JISとして読んでしまい、日本語部分が文字化けしてしまう、ということになります。

この問題はUTF-8のCSVファイルの先頭に「BOM」をつけて出力することで回避することができます。先ほどのプログラムの先頭をこうしてBOMを追加します。

$content = pack('C*', 0xEF, 0xBB, 0xBF);
$content .= '番号,名前,将来の夢';
$content .= '1,太郎,サッカー選手';
$content .= '2,華子,パティシエール';

$content = pack('C*', 0xEF, 0xBB, 0xBF);

$content .= '番号,名前,将来の夢';

$content .= '1,太郎,サッカー選手';

$content .= '2,華子,パティシエール';

クライアント側で保存したcsvファイルをExcelで開くと…

正しく日本語で表示させることができました。

ちなみにこのBOMはユニコードの種類によってコードが決まっています。
ユーティリティ関数としてこのような関数を1つ作っておくと便利ですよ。

function get_bom($code)
{
    if ($code == 'UTF-8') return pack('C*', 0xEF, 0xBB, 0xBF);
    else if ($code == 'UTF16BE') return pack('C*', 0xFE, 0xFF);
    else if ($code == 'UTF16LE') return pack('C*', 0xFF, 0xFE);
    else if ($code == 'UTF32BE') return pack('C*', 0x00, 0x00, 0xFE, 0xFF);
    else if ($code == 'UTF32LE') return pack('C*', 0xFF, 0xFE, 0x00, 0x00);

    return '';
}

function get_bom($code)

{

if ($code == 'UTF-8') return pack('C*', 0xEF, 0xBB, 0xBF);

else if ($code == 'UTF16BE') return pack('C*', 0xFE, 0xFF);

else if ($code == 'UTF16LE') return pack('C*', 0xFF, 0xFE);

else if ($code == 'UTF32BE') return pack('C*', 0x00, 0x00, 0xFE, 0xFF);

else if ($code == 'UTF32LE') return pack('C*', 0xFF, 0xFE, 0x00, 0x00);

return '';

}

月	火	水	木	金	土	日
	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