おれんじりりぃぶろぐ

きっと何者にもなれないエンジニアのブログ

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>

関西Ruby会議06に行ってきた

関西Ruby会議06に行ってきた時の感想です。 立派な、るびーりすとになることを目標とはしてはいますが
なにせruby + railsを趣味ではじめて数週間程度のるびービギナーなので解釈間違いしているところもあると思います。

Overview | 関西Ruby会議06

Rubyにみるプログラミングスタイルの進化」

まず午前一発目の基調講演はあのるびーの父@matzさんです。

matzさんご自身のプログラミングスタイルの来歴とrubyが果たしてきたもの
そして今後のrubyについてのお話でした。

  • 高校生の時は俺の考えた最強のプログラミング言語を頭の中でコンパイルしていたw
  • 大学に入り情報、プログラミングについて語る仲間が出来たら言語を作りたいなんて圧倒的な少数派であることが発覚した。
  • テストは書きたくない→勝手にテストを作成、実行して欲しい。
  • 静的型付けが流行っていて悔しい。DRYに反するから型書きたくない。完璧な型推論があれば導入してもいいかも。
  • プログラマーはスキルを身につけると下層に潜っていく傾向がある。ライブラリの人もいれば、言語、OS、ハードへとどんどん潜っていく人もいるが、人それぞれ適切な場所で止まる。私の場合は言語だった。
  • 「私はCプログラマーです」
  • C以外でRubyを実装するとしたら? →Golangかな。
  • ソフトタイピングに注目している。
  • 公共系などお堅いところでrubyrailsを導入したい使いたい時、偉い人を説得するにはどうしたらいいか? → rubyの伝統性をしっかり伝える。あなたが幸せかどうかが重要で辞めたらどうですか(・・?)

午前はこれで終了。午後の部へ。

Railsガイドを支える技術」

Ruby on Rails チュートリアル:実例を使って Rails を学ぼう」や「Ruby on Rails ガイド:体系的に Rails を学ぼう」で大変お世話になっている@yasulabさんの発表です。

Railsガイドを支える技術 (30分版) // Speaker Deck

こういうコンテンツの作り方、有り方もあるのかと目から鱗な感覚でした。
ハイライト「今日に合わせて出版しました!」かっこいい(゚ロ゚;)

その他のどのセッションもビギナーでもある程度は楽しく聴くことができました。

以下に公開されている発表スライドがまとまっています!

matome.naver.jp

HHVMで性能テストもどきしてみた

HHVMをせっかくインストールしてみたので、今回は本当にHHVMは通常のPHPよりも速いのかの性能テストをしてみました。

環境

MacAirにVagrantで以下の環境を構築して比較を行ってみる。

  • ubuntu14.04 + nginx + HHVM(Hackコード)
  • ubuntu14.04 + apache2 + php5.5

(より本番環境を想定するとローカルサーバーは良くないのでは(・・?))

ソースコードはあんまりいいものが思いつかずFizzBuzz問題を使用することにした。
ループ回数を100, 10000, 1000000回で実施した。

fizzbuzz.php

<?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

結果の見方

f:id:orange_lily27:20150522111510p:plain

結果はこんな感じで返ってくる。それぞれの意味合いは以下のようになる。

結果 説明
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

f:id:orange_lily27:20150520115357p:plain
ローカルホストにアクセスして以上のように表示されれば成功。

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();

ローカルホストにアクセス。

f:id:orange_lily27:20150520140821p:plain

上記のように表示されれば成功。HHVMではphpinfo()を出力させるとHipHopと表示されるだけ。
ベンチマーク取る実験はまた今度。

Hack言語

ちなみに先ほど作成したファイルのHackとはHHVM上で実行できる言語。と言っても基本的にはPHPコードの冒頭を<?php<?hhに変更するだけでよい。但し、完全に互換性を持っているわけではない。HTML中に埋め込むことも出来ない。ファイル拡張子は.phpまたは.hh

参考

ドットインストールミートアップ@大阪に行ってきた

プログラミング学習サイトのドットインストールのミートアップが大阪で開催されるということで行ってきました。
どのような雰囲気なのか想像がつきませんでしたが、twitterで情報が流れてきたので申し込みをしてみました。

うぇーい系の人しかいなかったどうしようなどと考えながら会場の本町へ。
当日会場についてみると30人弱の方々がいらっしゃったと思います。うぇーい系ではなかったです(笑)主催の田口さんの知り合いの方はほとんどいなかったようで、冒頭では誰が田口さんなのか分からない状態に。田口さんは写真はダメということでとてもシャイな方ですね(笑)
田口さんはアグレッシブな方であることは想像していましたが、想像以上というか斜め上なアグレッシブさをお持ちの方だと感じました。

最初はどういう人たちが集まったのか掴むことができず静かな雰囲気だったように思いますが、ドットインストールというキーワードを元に徐々に話は広がっていきました。プログラミングしている人に悪い人いない!何かのキーワードで繋がれているというのはちょっとした安心感です。
実際、参加者の方たちはかなり面白い人たちが集まったと思います。もちろんエンジニア系のお仕事をされている方もいらしゃいましたし、デザイン関係、学生、投資セミナーを広めているという方もおられました。
程度の差はあれどプログラミングに手を出す人というのは濃い人が多いのかな(汗)

ドットインストールの使い方も皆さん様々でした。もちろん普通に入門学習として使っている方、ソースコードをテンプレとして利用している方、特に理由はないけど見てる(笑)などなど

ちなみに私のドットインストールの使い方は、webのコピペなので触ったことあるけどイマイチ体系的に理解が及んでいない分野について学習をしています。bootstrapのような小物ツールを導入する時の学習にも使っています。環境構築の講座も人気なようなので、初心者はそこでつまづくのかな。

その他では学生という立場を活かし進路のことで悩んでいると伝えると、色々なお話を聞くことが出来ました。フリーランスで活躍されている方もいてなかなかそういう方とお会いする機会はないので貴重でした。

それ以外ではこんな感じのネタで話が盛り上がったと思います。ノリももちろんあるけど!

・株はやったほうがいい。

・システムを作って文化や法律を動かしていけたら夢があるね(´-`).。oO

田口さんとはあまり長い時間はお話できませんでしたが、人生の一発逆転ツールはプログラミング、アプリを作れ!というお話がとても印象的でした。アプリ開発の講座を充実させる予定だそうです。

・自分が何を面白いと感じるかはやってみないと分からない、色々やってみるしかない

最後はさくらインターネットの方とお話出来たので使っています!と謎アピールをしておきました。

2014-10-16 22.23.38

マチアソビ@徳島に行ってきた

マチアソビは徳島という僻地でアニメ制作会社のufotableさんを中心とし、毎年ゴールデンウィークと10月の3連休に行われるアニメイベントです。アニメ以外にも漫画、ゲーム、ライブなどさまざまな催しものが期間中に行われます。

マチアソビ公式サイト

マチアソビGIGAZINE記事

2014-10-12 20.17.46

今年は台風の影響で当初の3日日程が短くなり2日間になりそのうちの1日だけに参加しました。通常は眉山の山頂にメインステージが行われますが、今年は天候の都合で徳島文化会館へ変更されていました。ぼっちスターなのでもちろん一人で行ってきました。

朝イチの高速バスで徳島へ移動をしました。朝イチイベントはアイマスステージ。まあ、今回は定員もあるし入れないよね。Pのパワーが凄い。これだけ熱のこもったコンテンツを作り上げるのは凄いことだなとあらためて思いました。

その後無事に会場に入ることが出来て、いくつかのステージを見ることができました。急遽、文化会館に会場に変更されたことがありお世辞にも運営は褒められたものではなかったですね。まあ、それもマチアソビです。

個人的に一番面白かったのはサイコパストークショーでした。

以下、記憶に残っているメモです。多少も違っているかもしれません。

エイベックスライブ

  • 福原さん四国4県言えた
 

Fate/staynigntトークショー

  • 第2話は演出がフィーバーしすぎて4分くらい放送時間をオーバーしてしまった
  • 完全盤は円盤特典だけではなくみんなに見てもらえる形で提供したい、みんなにやさしいアニプレックス
  • はじめのうちのアフレコ収録ではなぜかタイムバーが見えず心の目を使って皆声を当てていた
  • アーチャー渾身のシーンはちりとりと箒をキャッチするところ
  • 「問おう」が1話の途中の部分で出てくるところがStaynightのミソ
 

楽園追放トークショー

  • 楽園追放は東映プリキュアのEDのCG技術を他のことに活かせないかという技術ありきなところからスタートした
  • 構想から時間が掛かった分飛躍的技術が向上し調度良い時期に制作をすることができた
  • 当初は顔の表情は手描きのテクスチャーでやる予定だった
  • SFというオーダーはあったが、ここまで自由にやれた作品は初めて(虚淵
  • 虚淵脚本だけど人が死なない
  • 水島×虚淵だけど劇場をがっくりして出てくることはない、カップルで見ても大丈夫!
 

サイコパストークショー

  • 宜野座さんは過去に自分がお付き合いしていると思っているだけで実は勘違い、誰ともお付き合いした経験はない
  • 但し宜野座さんは監視官だったという立場上、他人に頼る必要はなくサイコパスの色相を保つことが出来ていたということ、胸を張った処女童貞がこの世界では増えるだろう
  • サイコパスとギルクラには18禁用のゲームを出そうかという計画があったがポシャった
  • サイコパスの世界は最善の選択をシステムが行ってくれるとても楽で素晴らしい世界、ただし選択権はない
  • 間違ったシステムだけどそれを守るために奔走する警察の話はどうですか?という虚淵さんの雑談からサイコパスの方向性が決まった
  • 狡噛と朱ちゃんの間には尊敬の念はあっても恋愛感情はないんじゃないかな
  • サイコパスの世界ではシビュラが自分に一番最適なムラムラ解消方法を提示してくれるので常に賢者モードである
  • 2期の敵はマキシマさんとは間逆なタイプ
  • 鈴木萌(鍋木萌?)に注目してほしい
ドミネータが導入されるかは分かりませんが、サイコパスの世界のような何も考える必要がない選択肢のないレコメンドというのは近いうちに実現されていくような気がしました。
私はエンターテイメントを作っている立場ではありませんが、ライブのようなちょっと特殊な空間やいつも見ている好きなアニメ作品を別の角度見れることはとても楽しく刺激になりました。 

マーベラス1dayインターンに行ってきた

ゲーム会社であるマーベラスさんの1dayインターンシップに参加してきました。社名変更でAQLはとれたみたいです。ゲームはそこそこ好きという程度で熱中するほどではないのですがモノづくりに興味がありゲーム業界というものをとりあえず一度覗いて見たく参加をさせてもらいました。

 

今回は夜行バスで奈良から東京へ移動。元々、寝付きが良くない体質なのであんまり眠れないとは思ってはいましたが、予想通りに眠れない。今回は1日頑張ればということで何とかなりましたが、本番の就活ではキツイかもしれません。地方学生にとっては報酬よりも交通費の方が魅力的に映るのかもしれないです。

 

そして、マーベラスの本社がある品川シーサイドに到着。午前中は会社説明と会社見学というお決まりの流れで、午後には今流行りの?unityを使って簡単なゲーム作りを行いました。午後の部のゲーム作りでは予め土台のコードが用意され、そこに機能追加を施していくという作業でした。周りは専門学校生も多く、ほぼ初めてunityを触った身としてはアワアワ状態に(T_T)ただ癖は多いものの最終的には課題の追加実装を数個はこなすことが出来たので、やはりunityはゲーム作りのハードルを下げてくれるツールであることは実感できました。

 

1日だけの日程だったからか社員の人もけっこうな人数がサポートについてくれたように思います。質問時間も多く取っていただけました。勿論質問の返答内容も重要なわけですが、答え方や人柄、雰囲気から抽象的で言葉では伝わらない部分が少しは見えた気もします。こういった部分は時間が長ければ長いほどバレていくものですからね。そういう意味では1dayというのはちょっと短い気もしますが、いくつか企業を見て回るとすればギリギリのラインのように思います。

 

ソースコードも持ち帰って良いとのことでしたので、糞コードしか書けない私にとっては(そこまで複雑コードでなくても)プロの方々の書いたコードはとても参考になり、勉強させて頂きました。

とりあえず3ds買おう!