JSでボタンを押すと音が鳴る実装
ボタンを押すと音声が流れるサンプルです。
HTML
<!-- ボタンの設置 --> <input type="button" value="再生" onclick="ring()"> <!-- 音声ファイルの読み込み --> <audio id="tts"> <source src= "audio/sample.mp3" type="audio/mp3"> </audio>
JavaScript
<script type="text/javascript">
function ring(){
document.getElementById("tts").load();
document.getElementById("tts").play();
}
</script>
HHVMで性能テストもどきしてみた
HHVMをせっかくインストールしてみたので、今回は本当にHHVMは通常のPHPよりも速いのかの性能テストをしてみました。
環境
MacAirにVagrantで以下の環境を構築して比較を行ってみる。
- ubuntu14.04 + nginx + HHVM(Hackコード)
- ubuntu14.04 + apache2 + php5.5
(より本番環境を想定するとローカルサーバーは良くないのでは(・・?))
ソースコードはあんまりいいものが思いつかずFizzBuzz問題を使用することにした。
ループ回数を100, 10000, 1000000回で実施した。
<?php
for($i = 1; $i < 1000000; $i++){
if($i % 15 == 0){
print("FizzBuzz\n");
}else if( $i % 3 == 0){
print("Fizz\n");
}else if( $i % 5 == 0){
print("Buzz\n");
}else{
print($i."\n");
}
}
Hackのコードは冒頭の<?phpの部分を<?hhに変更するだけでよい。
Apache Bench
ab - Apache HTTP server benchmarking tool - Apache HTTP Server Version 2.4
Apacheをインストールするとデフォルトでくっついてくる
サクッとお手軽に負荷テストができるApache Benchというものがあるので今回はこれを使う。
AB(Apache Bench)の使い方
ab -n リクエストの総数 -c クライアント数（ユーザー数）
ab -n 100 -c 100 http://192.168.33.10/hello.php
結果の見方
結果はこんな感じで返ってくる。それぞれの意味合いは以下のようになる。
| 結果 | 説明 |
|---|---|
| Concurrency Level | クライアントの数、-cの後の値が返ってくるはず |
| Time taken for tests | 接続時間 |
| Complete requests | 成功したリクエストの数 |
| Failed requests | 失敗したリクエストの数 |
| Requests per second | 1秒当たりに処理できるリクエスト数 |
| Time per request(mean, across all concurrent requests) | 1リクエスト当たりの処理時間 |
Concurrency Levelを徐々に増やしていき、Failed requestsが発生した時点がそのサーバーの処理限界ということになる。
測定結果
HHVMと通常のPHP環境それぞれにFizzBuzzのループ回数を増やしていき、以下のコマンドを5回づつ実施した。
ab -n 250 -c 250 http://192.168.33.10/fizzbuzz.php
それぞれのRequests per secondの結果を以下に示す。
100ループ
| HHVM + nginx | PHP + apache2 | |
|---|---|---|
| 1回目 | 507.72 | 548.80 |
| 2回目 | 506.23 | 543.82 |
| 3回目 | 509.12 | 542.11 |
| 4回目 | 505.88 | 546.89 |
| 5回目 | 507.35 | 544.71 |
| 平均値 | 507.26 | 545.27 |
同じくらいかどちらかというと通常のPHPの方が処理速度が速いことが分かる。
1万ループ
| HHVM + nginx | PHP + apache2 | |
|---|---|---|
| 1回目 | 564.48 | 230.76 |
| 2回目 | 565.06 | 232.59 |
| 3回目 | 564.84 | 228.59 |
| 4回目 | 562.77 | 231.54 |
| 5回目 | 558.20 | 236.23 |
| 平均値 | 563.07 | 231.94 |
通常のPHPがループ回数を100倍したことにより処理速度が1/2以上落ち込んでいる。一方で、HHVMの方は100ループの時よりも100000ループの方が処理速度が変わらないどころかちょっと速いという謎の結果になった。
100万ループ
| HHVM + nginx | PHP + apache2 | |
|---|---|---|
| 1回目 | 572.52 | 2.62 |
| 2回目 | 558.95 | 2.64 |
| 3回目 | 570.53 | 2.65 |
| 4回目 | 567.62 | 2.67 |
| 5回目 | 559.75 | 2.83 |
| 平均値 | 565.87 | 2.68 |
ここまでループ回数を増やすとHHVMの方が圧倒的に速い。200倍以上速いことになっている。それとHHVMの特徴として目につくのはループ回数を増やしても性能がほとんど変化していないということである。
HHVMを使ってみた
HHVMをインストール、実行してみた時の備忘録。
HHVM(Hip Hop Virtual Machine)とは(?_?)
ヒップホップとか名前からしてふざけている気がするけど、HHVMはFacebookが開発を行っているプロジェクト。レガシーPHPコードをHHBC(Hip Hop Byte Code)に変換してVM(仮想マシン)上で実行して爆速化しようぜということ。たぶん。
HHVMインストール
今回はubuntu14.04にインストールを行った。
レポジトリを追加してインストールする。
sudo apt-get install software-properties-common sudo apt-key adv --recv-keys --keyserver hkp://keyserver.ubuntu.com:80 0x5a16e7281be7a449 sudo add-apt-repository 'deb http://dl.hhvm.com/ubuntu trusty main' sudo apt-get update sudo apt-get install hhvm
nginxをインストール
apache2でもできるみたいだけどFastCGIが標準でついていなくて面倒臭そうなので、チュートリアルに従ってnginxをインストールする。
sudo apt-get install nginx
ローカルホストにアクセスして以上のように表示されれば成功。
nginxの設定
以下のシェルスクリプトを実行するといい感じにnginxとhhvmが関連付けられるみたい。
sudo /usr/share/hhvm/install_fastcgi.sh
HHVMの設定
nginxのドキュメントルート/usr/share/nginx/htmlに、中身もファイル名も空の.hhconfigファイルを作成する。
sudo touch .hhconfig
.hhconfigを作成したディレクトリで、hh_clientを実行する。
hh_client
nginxとhhvmを再起動させる。（インストールが完了した時点で勝手に起動している）
sudo service nginx restart sudo service hhvm restart
そして以下のようなHackファイルを作成する。
info.php または info.hh
<?hh echo phpinfo();
ローカルホストにアクセス。
上記のように表示されれば成功。HHVMではphpinfo()を出力させるとHipHopと表示されるだけ。
ベンチマーク取る実験はまた今度。
Hack言語
ちなみに先ほど作成したファイルのHackとはHHVM上で実行できる言語。と言っても基本的にはPHPコードの冒頭を<?phpを<?hhに変更するだけでよい。但し、完全に互換性を持っているわけではない。HTML中に埋め込むことも出来ない。ファイル拡張子は.phpまたは.hh。
