カテゴリー: テクノロジー

抽選プログラムを開発しました

こんにちは。開発担当のマットです。
 
Sploutでは、ライトニングトーク大会を定期的にやっております。
メンバー全員が順番に5分間のトークをして、とても楽しい時間です。
 
ライトニングトーク大会をするには、発表順を決める必要があります。
今までは順番を決めるのにあみだくじを使ったりしていましたが、折角システム開発会社なので、順番を決めてくれる抽選プログラムを作ってみようと思いました。
 
一番簡単な方法はブラウザでJavaScriptを実行させるだけです。
Google Chromeを開き、右クリックして、「検証」>「コンソール」を押して、以下のスクリプトを貼り付けてEnterキーを押すと一瞬で順番を決めることができます。

超簡単ですが、面白くはないです。

Unityで面白いものを作ろう!

最近、Unityを学習しています。Unityは3Dゲームエンジンです(wikipedia) 。
これを使えば、何か面白い抽選プログラムを作れるではないかと!
 
考えついたのは「競馬」。

まずはプロジェクト開始。

とりあえず「Kuji」と名付けました。

プロジェクトに地面(Terrain)を入れる。

新規なUnityプロジェクトだと、カメラと照明しかないので、馬が走る地面をシーンの中に挿入する必要があります。
挿入して草のテキスチャーで塗りました。

次は馬の作成。

形を作る前に馬を象徴するゲームオブジェクトを作成します。

次はそのゲームオブジェクトの中に、複数のキューブで馬の形をなんとなく作り上げます。

色付けしましょう!

Unityでオブジェクトを色塗るには、Materialを作成すべきです。
Materialは「素材」という意味で、「色」だけではなく、「光沢」に関する色々な設定ができます。
とりあえず、2つのMaterialを作成し、馬の該当箇所に設定をしました。
片方はツヤ無しの馬毛。
他方はちょっとツヤ有りの鞍。

馬を走らせましょう!

Unityのアニメーション・システムで馬を走らせる動きを作るのは簡単です。

競馬場がないと・・・

簡単に壁と決勝線を地面の上に作りました。
馬もコピペして、サイズを調整。

馬にラベルを付ける。

誰がどの馬かわかりませんので、馬の上に名前ラベルを追加しました。

馬に個性を付ける。

次はスクリプトを作成して、馬のゲームオブジェクトに付属させました。
このスクリプトで、馬に付属しているMaterialの色やラベルの表記を設定できます。
これによって、馬をカスタマイズできるようになりました。

馬を並べましょう!

上記と同様に、馬のコピペだけでできました。
それぞれの馬の名前と色を設定します。
*この画像は数字を使っていますが、実際の抽選の時は参加するメンバーの名前を入れました。

最後の最後に「レース」のスクリプトを作成!

最後にとても簡単なレースのスクリプトを作成しました。
「Spaceキー」を押すと馬達が走り出します。
UnityのUpdateファンクションで、毎フレーム、それぞれの馬をちょっとずつ前に進める。しかし、毎フレーム進める距離はある範囲以内のランダム値です。それで、それぞれの馬の進み具合に差が発生します。

なお、決勝線にたどり着くと、走り止んで、その馬のラベルに書いてある名前が一覧に表示される。これで発表順を決めることができます!

まとめ

まだ学習中ですが、Unityで簡単にできることに驚きました。
上記の抽選プログラムの総合開発時間は2時間だけでしたのに、アニメーションを対応した3Dプログラムを一から作ることができました。
とても、有力なツールです!

これからも、色々面白いプログラムを開発してみたいと思います!

JuliaBoxではじめるJulia言語

Juliaとは

Juliaは2009年に開発の始まった比較的新しいプログラミング言語です。
Julia がどんな言語で何を目指しているのかについては、開発初期に書かれた「なぜ僕らはJuliaを作ったか」という文章が志高くてたいへん素晴らしいです。
たとえばこんな感じ。

僕らが欲しい言語はこんな感じだ。まず、ゆるいライセンスのオープンソースで、Cの速度とRubyの動的さが欲しい。Lispのような真のマクロが使える同図象性のある言語で、Matlabのように分かりやすい数学の記述をしたい。Pythonのように汎用的に使いたいし、Rの統計処理、Perlの文字列処理、Matlabの線形代数計算も要る。シェルのように簡単にいくつかのパーツをつなぎ合わせたい。チョー簡単に習えて、超上級ハッカーも満足する言語。インタラクティブに使えて、かつコンパイルできる言語が欲しい。

そしてネット上での評判を見る限りでは実際そのような言語になりつつあるようです。曰く、簡潔で書きやすく実行速度も速い。
中でも目立つのは数学系の方々による賞賛の声です。曰く、数式を直感的に扱えてパッケージもそこそこ揃っていて可視化も容易、そしてなにより高速。

現時点のバージョンは0.6.2で活発に開発が進められています。逆に活発過ぎて仕様が安定しないという面もあるようですが。

JuliaBox ですぐにはじめる

Julia を実際に使ってみる場合、もちろん自分のローカルな環境にインストールしても構いませんが、前述の通り開発が活発なため最新を追っかけるのはなかなか大変です。また、環境によってはインストールが難しい場合もあるようです。

そこで、入門の間はJuliaBoxを使うことにします。
JuliaBox はブラウザで利用できる Julia のインタラクティブな実行環境を提供してくれます。その時々の最新版を利用できます。
Jupyter Notebook と統合されているため、データ分析などのようにコードを書きつつ記録を残すような作業に非常に便利です。もちろんコードの断片を実行しながらJuliaを勉強するのにも使えます。

Google,GitHub,LinkedIn のアカウントを持っていれば JuliaBox はすぐに使い始められます。
ログインしてみるとチュートリアルのドキュメント群が既に用意されています。

チュートリアルに含まれるコードはその場で実行して結果を見ることができます。

グラフ描くのも簡単です。

また、練習問題を解くコードをその場で書いて実行することもできます。
自分で書いたコードを保持した状態でドキュメントを更新することができるので、まさに自分のノートを作っていく感覚でチュートリアルを進めて行けます。

JuliaでFizzBuzz

ある程度までチュートリアルを進めたところで、Hello World よりもうちょっと手の込んだものということで FizzBuzz を作ってみました。
といっても、チュートリアルの制御構造の節で FizzBuzz のコード(if..elseを使った普通の解き方)が出てきます。また、FizzBuzz でちょろっとググったら関数型らしい解法も見てしまったので、それとも違う解き方を考えないといけなくなってしまいました。
そこで作ったのが以下のコード。


function fizzbuzz(n)
    all = Dict(i => string(i) for i in 1:n)
    fizz =Dict(i => "fizz" for i in filter(x->x%3==0, 1:n))
    buzz = Dict(i => "buzz" for i in filter(x->x%5==0, 1:n))
    fizzbuzz = Dict(i => "fizzbuzz" for i in filter(x -> x % 3 == 0 && x % 5 == 0, 1:n))
    merge(merge(merge(all,fizz),buzz),fizzbuzz)
end

function print_fizzbuzz(fizzbuzz)
    for key in sort(collect(keys(fizzbuzz)))
        println("$key => $(fizzbuzz[key])")
    end
end

Dictionary を merge するときに重複するキーがあれば後の方の値が使われることは merge のドキュメントで確認しています。


n が大きくなると破綻するのでダメなコードではあります。マクロを使った遅延シーケンスのパッケージがあるようなので、それを使っての改良は今後の課題としたいと思います。

知らないと損をするNginx設定

以前Ubuntuに最新のnginxをインストールという記事を書きましたが、今回はその後の特殊な設定について少しご紹介いたします。

プロキシされた環境で正しいIPを取得する

Nginxの前段にELB・バランサ等プロキシがあった場合、何も設定しないと正しいクライアントのIPがとれなくなります。
この場合は下記のような設定が必要となります。
例)
プロキシサーバが複数あり、IPが10.0.1.2、10.0.1.3だった場合
/etc/nginx/conf.d/realip.conf

set_real_ip_from 10.0.1.2;
set_real_ip_from 10.0.1.3;
real_ip_header X-Forwarded-For;

※real_ip_headerはプロキシサーバから送られてくるヘッダを指定します。ほとんどの場合はX-Forwarded-Forです。
これで$remote_addrへクライアントIPが入るようになります。
また、この場合どのサーバを通って来たかは$realip_remote_addrに入っています。※Nginx 1.9.7以降

参考
http://nginx.org/en/docs/http/ngx_http_realip_module.html

Nginx + PHP-fpm環境でNginx設定でPHP設定をする。

ちょっと何を言っているかわからなくなっていますが、これにより特定のロケーションのみ設定を加えることができます。
下記ではphp.iniやini_setで設定するような値である「memory_limit」「post_max_size」「upload_max_filesize」を設定しています。

Location /foo {
    fastcgi_pass unix:/var/run/php-fpm.sock;
    include fastcgi_params;
    fastcgi_param PHP_VALUE 'memory_limit = 256M \n post_max_size = 250M \n upload_max_filesize = 200M';
}

参考
http://nginx.org/en/docs/http/ngx_http_fastcgi_module.html#fastcgi_param

今回は少しマイナーな設定を紹介してみました。
お役に立てれば幸いです。

Webブラウザの呼び声(自動音声)

Web Speech APIを使うことでWebブラウザを喋らせることができます。
ブラウザを利用したWebアプリケーションであれば簡単にユーザーに通知する手段を増やすことが可能です。

例えば、

  • Webサイト上に書かれたテキストを読んでもらう。
  • 特定の座標に到着したことを知らせる。
  • 音声認識機能も併用してGoogle Homeの再発明。

などなど、組み合わせ次第でいろいろ遊べそうです。
 
自動音声ですが全くの機械声という訳でもなく、割と自然な感じに読み上げてくれます。
環境依存とはいえ、これがブラウザさえあればいつでも利用できるなんて素晴らしい。
 
さっそく時報でもやってもらおうと思います。
 
環境
Android 7.1.1
Chrome 63

上のコードをブラウザで表示したスクリーンショットがこちら

 
startを押すと、時刻を5秒ごとに喋ってくれます。
音量調整しかありませんが、音程や速度の調整もできます。
 
注意しなければいけないのは、speechSynthesis.speak を呼んだ回数だけ読み上げてくれるところ。(どんどんスタックする)
連続で呼び出すような処理が入ってしまうと延々同じ文章を読み上げられ軽くホラーな体験になります。
 
また、例にもあげましたが、Web Speech APIの主要機能の一つに音声認識があります。
それも組み合わせてとてもとても頑張ればAIブログ、AI進捗管理システムも作れるかもしれません。
 
APIのより詳細な情報はこちら。
Web Speech API – Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_API

 
ちなみにですが、時報自体は別の方法でも実装可能です。
Web Speech APIは調整できる幅が狭いのですが、必要なものは揃っていて細かいことを考えなくても形になるという点で非常にお手軽です。
 
まだドラフトなのが残念ですが、実用性の高い機能だと思うので今後の更なる発展と可及的速やかな本採用をお祈り申し上げます。

Cordovaを使ってみました!

こんにちは。開発担当のマットです。

最近、AndroidとiOSのアプリ開発をしています。
作っているアプリがiOS端末(iPhoneやiPad)とAndroidのネイティブ機能を使うので、iOS版とAndroid版を別々に作成しました。

もちろん、アプリを2つのプラットフォームで作ることは手間が掛かりますが、iOSとAndroidの力を完全に引き出すには必要です。

しかし、単純でウェブサイトのようなアプリケーションを作ろうと思ったら、二つのネイティブなアプリを作るより、簡単な方法が沢山あります。私はその簡単な方法を一つ試してみましたので、ご紹介したいと思います。

開発環境

この記事にて、iOSとAndroidのアプリをビルドします。

・iOSのアプリをビルドするには、XcodeがインストールされているMacが必要です。
・Androidのアプリをビルドするには、Android Studioをインストールする必要があります。Android StudioはWindows、Mac、Linux、全てにインストールすることができます。

Cordova

Wikipediaによりますと、Cordovaは「オープンソース(Apache 2.0 License)のモバイルアプリケーション開発フレームワーク。」

Cordovaの特徴ですが、

モバイルデバイスのカメラ、GPS、加速度センサーなどにアクセスするためのAPIを追加することにより、JavaScript、HTML、CSSといったウェブアプリケーション開発の技術でモバイルアプリケーションを開発することができるのが特徴である。

簡単に言いますと、ウェブサイトのようなものをHTML、Javascript、CSSで作れば、Cordovaはそのウェブサイトをモバイルアプリケーションに変換してくれる。
なお、Javascriptで特別のファンクションを呼び出すと、ネイティブアプリケーションのネイティブ機能(カメラ、GPS、加速度センサー、など)を利用することができます。

 

使ってみよう

まずは、Cordovaをダウンロードしました。
詳細は https://cordova.apache.org/ でも書いてありますが、コマンド実行でインストールします。

なお、Cordova自体をインストールする前に、node.jsをインストールする必要があります。まだインストールされていない場合、https://nodejs.org/ja/からダウンロードして、インストールしてください。


では、コマンドプロンプトから以下のコマンドを実行してください。
npm install -g cordova

インストールが完了されたら、Cordovaのアプリケーションを作成するコマンドを実行しましょう。例として「MyCordovaApp」というアプリケーションを作成する。
なお、アプリケーションの bundle ID (アプリを特定するID)もこの時点で設定しましょう〜。
cordova create MyCordovaApp com.example.myCordovaApp MyCordovaApp
                                  (ディレクトリー名 Bundle ID アプリ名

次は、作ったディレクトリーに移動する(MyCordovaApp)。
今回、iOS版、Android版、ブラウザー版を作ってみます。
cordova platform add browser
cordova platform add ios
cordova platform add android

なお、以下のコマンドを実行すると、対応されているプラットフォームの一覧が表示されます。今回の記事の範囲外となりますが、BlackberryやOSXやWindowsのアプリも作れるようです。
cordova platform

ところで、Cordovaの準備ができました。
さて、簡単に何かを作ってしまおう。

初めてのCordova

アプリケーションディレクトリーの中にwww/index.htmlというファイルがあります。
これがアプリケーションの最初に表示されるページとなります。
空白のページではなく、既に内容が入っています。ちょっと変更してみましょう!

bodyの部分に以下のHTMLが入っている。

以下に変更してみました。

なお、非ASCII文字も入れちゃっているので、headに以下のmetaタグも追加しました。

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

そして、ファイルを保存!

各プラットフォームにビルド!

コマンドプロンプトに戻って、以下のコマンドを実行すると、追加されているプラットフォームのファイルが更新されます。
cordova build

XCodeでMyCordovaApp/platforms/ios/を開くとiOSアプリケーションをビルドできます。
Android Studios で MyCordovaApp/platforms/android/を開くとAndroidのアプリケーションをビルドすることができます。
なお、cordova run browser だけでウェブページを確認することができます。

今回、作ってみたものをスクリーンショットで撮ってみました。

まとめ

Cordovaで簡単に多くのプラットフォームに対応できることはとても便利だと思います。
特に、HTML,CSS,Javascriptに経験が深いウェブ系の開発者の場合、Cordovaの利用により、複数のプラットフォームに対応しているアプリを迅速に開発できると思います。

しかし・・・
個人的意見にすぎませんが、Cordovaやこのようなマルチプラットフォームサービスは、開発オプションの中間に位置していると思います。

完全にウェブサイトのようなモバイルアプリを作成したい場合、iOSやAndroidが提供するWebViewを利用する方がいいかもしれません。
その反面、多くのネイティブ機能を使いたい場合、手間は掛かりますが、ネイティブのアプリケーションを作ると、そのプラットフォームにより適している製品を作れると思います。

でも、「あまり手間を掛けずに、ウェブサイトに近くて、カメラやGPSのようなネイティブ機能を利用するが、依存しない複数のプラットフォームに対応したアプリケーション」を作りたいと思う場合は、ぜひ使ってみてください。