プログラミング・開発

[Python]拡張モジュールをWin Debug版DLLで試すとエラー

福岡拠点の香月です。

Windows環境で動作するPython3.6.6の拡張モジュールをC++で作りました。
開発ツールはVisual Studio 2015です。
早速作成した拡張モジュールのDebug版を使ってみようとPythonインタプリタを起動してモジュールロードしたんですがﾞ………

C:\work\PythonExtension>python
Python 3.6.6 (v3.6.6:4cf1f54eb7, Jun 27 2018, 02:47:15) [MSC v.1900 32 bit (Intel)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> import spam
Fatal Python error: PyThreadState_Get: no current thread

C:\work\PythonExtension>python

C:\work\PythonExtension>python

Python 3.6.6 (v3.6.6:4cf1f54eb7, Jun 27 2018, 02:47:15) [MSC v.1900 32 bit (Intel)] on win32

Type "help", "copyright", "credits" or "license" for more information.

>>> import spam

Fatal Python error: PyThreadState_Get: no current thread

C:\work\PythonExtension>python

とこのようにエラーが発生してしまいました。インタプリタも強制終了しているようです。

これは拡張モジュールがDebug版なので、Pythonバイナリもデバッグ版を使う必要があります。python_d.exeがpython.exeと同じ場所にあるのでそれを使いましょう。
また、拡張モジュール名にも「_d」が必要です。Release版が「spam.pyd」ならDebug版では「spam_d.pyd」です。リネームで十分です。

C:\work\PythonExtension>python_d
Python 3.6.6 (v3.6.6:4cf1f54eb7, Jun 27 2018, 02:51:19) [MSC v.1900 32 bit (Intel)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> import spam
>>>

C:\work\PythonExtension>python_d

Python 3.6.6 (v3.6.6:4cf1f54eb7, Jun 27 2018, 02:51:19) [MSC v.1900 32 bit (Intel)] on win32

Type "help", "copyright", "credits" or "license" for more information.

>>> import spam

>>>

このようにFatal Python Errorは発生せずに続行できます。
Debug版でのデバッグをあきらめて、Release版に無理やりデバッグ情報をつけてデバッグしていた方、是非これをお試しあれ。

これに気付く前にVisual Studio 2017のドキュメントで次のようなものを見つけていました。
https://docs.microsoft.com/ja-jp/visualstudio/python/working-with-c-cpp-python-in-visual-studio?view=vs-2017
以下抜粋

警告

デバッグ構成の場合でも [C/C++] > [コード生成] > [ランタイムライブラリ] のオプションを常にマルチスレッド DLL (/MD) に設定します。これは、この設定がデバッグ以外の Python バイナリのビルドに使用されるためです。
マルチスレッドデバッグ DLL (/MDd) オプションを設定すると、デバッグ構成をビルドするときに、”C1189: Py_LIMITED_API は Py_DEBUG、Py_TRACE_REFS、Py_REF_DEBUG と互換性がありません” というエラーが表示されます。さらに、ビルドエラーを避けるために Py_LIMITED_API を
削除すると、モジュールをインポートしようとしたときに Python がクラッシュします (後で説明しますが、クラッシュは DLL のPyModule_Create の呼び出し内で発生し、出力メッセージは “Fatal Python error: PyThreadState_Get: no current thread (Python 致命的エラー: PyThreadState_Get: 現在のスレッドがありません)” です)。
/MDd オプションは Python デバッグバイナリ (python_d.exe など) のビルドに使われますが、拡張 DLL に対して選ぶと、やはり Py_LIMITED_API のビルドエラーになります。

でもこんなことする必要なく、python_d.exeを使うだけでOKですよー。

[Laravel]プロジェクトの作成

福岡拠点の香月です。

前回まででLaravel実行におけるインフラ整備が終わりました。
今回はLaravelプロジェクトの作成です。

環境は引き続きこちらで構築したCentOS上です。
Windowsのコマンドプロンプトを立ち上げて次のコマンドでCentOSを起動。

C:\vm\centos72>vagrant up

1	C:\vm\centos72>vagrant up

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

実行ユーザーはvagrantです。実行はホームディレクトリで行いました
プロジェクトを作成するには次のコマンドを実行します。プロジェクト名は「scoresheet」とします。

# composer create-project "laravel/laravel" scoresheet

1	# composer create-project "laravel/laravel" scoresheet

以下が出力されます。

Installing laravel/laravel (v5.6.21)
  - Installing laravel/laravel (v5.6.21): Loading from cache
　：
　：
> @php artisan key:generate
Application key [base64:qearp8v/iqgPEEoRZjcnwFlg5ge06kWWnsAScNSaWJg=] set successfully.

Installing laravel/laravel (v5.6.21)

- Installing laravel/laravel (v5.6.21): Loading from cache

　：

> @php artisan key:generate

Application key [base64:qearp8v/iqgPEEoRZjcnwFlg5ge06kWWnsAScNSaWJg=] set successfully.

カレントディレクトリに「scoresheet」というフォルダが作成され、そこにLaravelの構成ファイルが作成されます。

このコマンドでは最新バージョンがインストールされますが、プロジェクトによってはバージョンを指定してインストールしなければならないことがあります。例えば5.1をインストールする場合はこう。

# composer create-project "laravel/laravel=5.1.*" scoresheet

1	# composer create-project "laravel/laravel=5.1.*" scoresheet

バージョンの3桁目は必ず*にしましょう。
インストールされたバージョンは次のコマンドで確認できます。作成されたディレクトリに移動して実行しましょう。

# php artisan -V
Laravel Framework version 5.1.46 (LTS)

1 2	# php artisan -V Laravel Framework version 5.1.46 (LTS)

プロジェクトの作成コマンドとして本家サイトでは「# laravel new <プロジェクト名>」があります。しかしWindows環境では正しく動作しない報告が沢山あるようなので、「# composer create-project」コマンドで統一するのが良いようです。

次はWebサーバーの設定です。rootになって作成したディレクトリをWebサーバーのディレクトリの下に移動します。

# sudo -s
# mv /home/vagrant/scoresheet /etc/httpd/scoresheet

1 2	# sudo -s # mv /home/vagrant/scoresheet /etc/httpd/scoresheet

/etc/httpdはvagrantユーザーには書き込み権限がないため、rootで作業します。

ユーザーvagrantで/etc/httpdに移動して直接「composer create-project」コマンドを実行すればいいのでは？とも考えますが、vagrantには/etc/httpdへの書き込み権限がないためLaraveのプロジェクトの種ファイルであるhttp://cabinet.laravel.com/latest.zip のダウンロードに失敗してしまいます。

続けてLaravelホームをWebのルートにするためにhttpd.conを編集します。

# vi /etc/httpd/conf/httpd.conf

DocumentRoot "/etc/httpd/scoresheet/public"

<Directory "/etc/httpd/scoresheet/public">
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
</Directory>

# vi /etc/httpd/conf/httpd.conf

DocumentRoot "/etc/httpd/scoresheet/public"

Options Indexes FollowSymLinks

AllowOverride None

Require all granted

</Directory>

※厳密にはWebサーバーのディレクトリ以下に必ずしも移動させるひつようはありません。httpd.confの設定でLaravelディレクトリへのエイリアスを設定し、そこをDocumentRootに設定するのでもいいでしょう。

次にWebサーバーがLaravelのstorage、bootstrap/cacheディレクトリに書き込みできるようにパーミッションを調整します。

# cd /etc/httpd/scoresheet
# chmod -R 777 storage bootstrap/cache

1 2	# cd /etc/httpd/scoresheet # chmod -R 777 storage bootstrap/cache

最後にWebサーバーを再起動します。

# systemctl restart httpd

1	# systemctl restart httpd

再起動が完了したらホストOS（Windows）上のブラウザからルートにアクセスします。
http://localhost:8080/
Laravelロゴが表示されれば完成です。

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!!!」

テストをやる人がどういった視点でテストをするのか？５分間の解説付きで実演していました。
アカウントやパスワードのテキスト入力枠に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を起動。

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のインストールの予定です。

[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 '';

}

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

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

int SetupPixcelFormat(HDC hDC)
{
　　PIXELFORMATDESCRIPTOR pfd = {
　　　　sizeof(PIXELFORMATDESCRIPTOR), /* nSize */
　　　　1,                             /* nVersion */
　　　　PFD_DRAW_TO_WINDOW | PFD_SUPPORT_OPENGL | PFD_DOUBLEBUFFER, /* dwFlags */
　　　　PFD_TYPE_RGBA,                 /* iPixelType */
　　　　32,                            /* cColorBits */
　　　　0, 0, 0, 0, 0, 0, 0, 0,
　　　　0,
　　　　0,  0, 0, 0,
　　　　24,                            /* cDepthBits */
　　　　8,                             /* cStencilBits */
　　　　0,
　　　　PFD_MAIN_PLANE,                /* iLayerType */
　　　　0,
　　　　0, 0, 0
　　};

　　int pixelformat = ::ChoosePixelFormat(hDC, &pfd);
　　if (0 == pixelformat)
　　　　return FALSE;

　　if (!::SetPixelFormat(hDC, pixelformat, &pfd))
　　　　return FALSE;
　　return TRUE;
}

int SetupPixcelFormat(HDC hDC)

{

　　PIXELFORMATDESCRIPTOR pfd = {

　　　　sizeof(PIXELFORMATDESCRIPTOR), /* nSize */

　　　　1, /* nVersion */

　　　　PFD_DRAW_TO_WINDOW | PFD_SUPPORT_OPENGL | PFD_DOUBLEBUFFER, /* dwFlags */

　　　　PFD_TYPE_RGBA, /* iPixelType */

　　　　32, /* cColorBits */

　　　　0, 0, 0, 0, 0, 0, 0, 0,

　　　　0, 0, 0, 0,

　　　　24, /* cDepthBits */

　　　　8, /* cStencilBits */

　　　　PFD_MAIN_PLANE, /* iLayerType */

　　　　0, 0, 0

　　};

　　int pixelformat = ::ChoosePixelFormat(hDC, &pfd);

　　if (0 == pixelformat)

　　　　return FALSE;

　　if (!::SetPixelFormat(hDC, pixelformat, &pfd))

　　　　return FALSE;

　　return TRUE;

}

この部分って定型になっていて、気にしなくても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, i, sizeof(PIXELFORMATDESCRIPTOR), &pfd);

1	DescribePixelFormat(hDC, i, sizeof(PIXELFORMATDESCRIPTOR), &pfd);

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

 pfd = {
　　sizeof(PIXELFORMATDESCRIPTOR),       /* nSize */
　　1,                                   /* nVersion */
　　PFD_DRAW_TO_WINDOW                   /* dwFlags */
　　　　| PFD_SUPPORT_OPENGL
　　　　| PFD_DOUBLEBUFFER,
　　PFD_TYPE_RGBA,                       /* iPixelType */
　　32,                                  /* cColorBits */
　　8, 16, 8, 8, 8, 0, 8, 24,            /* R/G/B/A のビット位置 */
　　64, 16, 16, 16, 16,                  /* cAccum* のビット数 */
　　24,                                  /* cDepthBits */
　　8,                                   /* cStencilBits */
　　0,                                   /* cAuxBuffers */
　　PFD_MAIN_PLANE,                      /* iLayerType */
　　0, 0, 0, 0};

pfd = {

　　sizeof(PIXELFORMATDESCRIPTOR), /* nSize */

　　1, /* nVersion */

　　PFD_DRAW_TO_WINDOW /* dwFlags */

　　　　| PFD_SUPPORT_OPENGL

　　　　| PFD_DOUBLEBUFFER,

　　PFD_TYPE_RGBA, /* iPixelType */

　　32, /* cColorBits */

　　8, 16, 8, 8, 8, 0, 8, 24, /* R/G/B/A のビット位置 */

　　64, 16, 16, 16, 16, /* cAccum* のビット数 */

　　24, /* cDepthBits */

　　8, /* cStencilBits */

　　0, /* cAuxBuffers */

　　PFD_MAIN_PLANE, /* iLayerType */

　　0, 0, 0, 0};

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