PHPカンファレンス福岡2018

先週末に開催されたPHPカンファレンス福岡に参加したのでその感想を簡単に。
https://phpcon.fukuoka.jp/2018/

PHPカンファレンス福岡は今年で4回目。
もともと東京で行われたPHPカンファレンスに参加できなかった人が「PHPカンファレンス福岡」とつぶやいたことから有志が集い福岡で開催が決定したというのが興味深いですね。
弊社はブロンズスポンサーとして出資しています。

朝から夕方まで開催されていて、主に初心者向けのセッションが多くありました。
また、MySQLやコンテナ技術などPHPに関係しないセッションも多く、Webアプリ全般技術勉強会みたいな感じでした。

「skaffold を使って Kubernetes してみた」

Kubernetes(くーべねてぃす)のセッションです。
オープンソースの「コンテナオーケストレーションシステム」で、Dockerが正式採用したのを皮切りに、AWS、MS Azureも次々に正式対応をしたということが説明されており、事実上の標準になったのではないか、ということでした。
今後コンテナを使って開発/勉強を行うときには合わせて使ったほうがよさそうです。

「0から始めるLaravel相談会」

匠の技を倣うならドキュメントを読め!
特にLaravelのドキュメントは良く書かれており、英文も単語を抜き出して読み進めればわかるはずだ!
みたいなセッションでした。
確かにオリジナルドキュメントは大事ですね。

「Testing Live!!!」

テストをやる人がどういった視点でテストをするのか?5分間の解説付きで実演していました。
アカウントやパスワードのテキスト入力枠にhtmlのタグ付き長文を入力する、表記ゆれが気になる~、などあるあるだけどついついおろそかにしがちなことをテスターの心情を交えながら説明されてて、面白かったです。

各セッションのスライドの多くは「Speaker Deck」にアップされています。
https://togetter.com/li/1237797

セッション以外にもスポンサー企業ブースが併設されていていました。
ノベリティ有り、コーヒーサービスありでゆっくり見て回れるようになっていました。

参加者全員に配られたバッグや先着で配られたTシャツもよかったです。

[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を起動。

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

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

MySQL5.7のインストール

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

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

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

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からダウンロード、インストールします。

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

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

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

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

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

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

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

Composerのインストール

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

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

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

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

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

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

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

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

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

福岡拠点の香月です。

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

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

    • 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タブのコマンドを実行します。

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

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

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

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

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

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

apacheのインストール

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

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

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

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

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

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

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

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

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

[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

 

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

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

1) 領域確保

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


2) スケール設定

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


3) 軸の描画

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


4) 補助線の描画

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


5) データ値の描画

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

これで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ファイルを出力します。

クライアント側で保存した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を追加します。

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

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

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

OpenGLが使うピクセルフォーマット

WindowsアプリでOpenGLを使ってプログラムを組む時の初期化処理の一環で、次のようにピクセルフォーマットを設定してやる必要があります。これを紹介しているサイトはいくつも見つかりますが、これが一体なにを示しているのか?まで解説しているところがないので調べてみました。

この部分って定型になっていて、気にしなくてもOpenGLプログラミングできますが、一度気になると調べたくなる性分なので仕方ない。

ここで使っているAPIの1つ目はChoosePixelFormat()です。このAPIはアプリを動作させるPC上で使用可能なピクセルフォーマットの番号を返してくれます。第一引数のhDCにはOpenGLで描画するウィンドウのデバイスコンテキストを指定します。第二引数のpfdにはPIXELFORMATDESCRIPTOR 変数のアドレスを指定します。前処理として、このPIXELFORMATDESCRIPTOR のメンバ変数に値を設定してやる必要があります。

nSize
PIXELFORMATDESCRIPTORのサイズ。Windows APIでよくやる手法です。nVersion
絶対1です。

dwFlags
ここで使用目的を指定します。OpenGLではこうです。
(0x01)PFD_DOUBLEBUFFER – ダブルバッファリングで描画高速化
(0x04)PFD_DRAW_TO_WINDOW – ウィンドウに対する描画
(0x20)PFD_SUPPORT_OPENGL – OpenGLサポート

iPixelType
PFD_TYPE_RGBAでRGBAでの使用を宣言します。
もう一つPDF_TYPE_COLORINDEXがありますが、こちらは使いません。

cColorBits
使用する色のビット数を指定します。
8bit – 白黒
24bit – RGB(赤緑青)
32bit – RGBA(赤緑青+透明度)

これを実行すると入力に応じて適切な番号が返ってくるので、これをSetPixcelFormat()に渡してデバイスコンテキストが使用するピクセルフォーマットとして設定するわけです。

ちなみにそのPCでどのようなピクセルフォーマットが使用可能かを取得するAPIも存在します。

DescribePixelFormat(hDC, 0, 0, NULL);でそのPCにあるピクセルフォーマットの個数が返ります。あとは第二引数にその番号を入れてやれば情報を取得することができます。ChoosePixelFormat() で帰ってきた番号を入れることで、OpenGLで使うピクセルフォーマットの内容も分かります。私の環境ではこうなっていました。