弊社開発の無料iPhoneアプリ、「脳トレ -計算10-」をご紹介します。

今回のアプリは算数のゲームですが、やや難しいかもしれません。

以下、詳細を説明してみます。

こんな感じです！

スタートボタンを押すとゲームが開始します。

式が成立するように、つまり足したり掛けたり引いたりして、結果が10になるように計算式をつくってください。昔、切符の数字を使って計算する遊びをしていたことがある人もいるかと思います。

ただしルールがあって、４つの数字はすべて使わなければいけません。

先程の例では、たとえば上のような式が正解となります。もちろん、9+(6-3-2) などでもOKです。

制限時間は90秒ですが、正解すると◯印が表示され制限時間が20秒加算されます。逆に間違えたりパスしたりすると10秒減ってしまいます。

時間を使い切るとランキング画面が表示されます。できるだけ高得点を目指してやってみてください！

開発ノート

今回ちょっと大変だったのが入力した計算式の解析部分です。

カッコを先に計算するとか乗除を優先して計算するなんていうルールをどうやって処理するかとか、式の構文として正しいかどうかという検証をしたりとか、なかなか厄介でした。

今すぐダウンロード

無料アプリですので、興味がおありでしたらぜひダウンロードしてみてください！…いや、ダウンロードしてくださいお願いします！！

脳トレ -計算10-
無料 リリース：2011/03/17

iPhoneアプリ最新作が公開されました！「Decision Roulette」をご紹介します。

今まで脳トレシリーズということでプチゲームばかり作っていましたが、今回はゲームではありません。

以下、詳細を説明してみます。

何のためのもの？

物事を決めにくい時ってありますよね？

たとえばランチのお店選びとか、買い物役をひとり選んだりとか…。そういう、何かひとつを決めないといけない！という局面で役立つのがこのアプリです！

起動すると上のような画面が出てきて、デフォルトの状態では８つの色からルーレットがランダムでひとつ選んでくれます。８つも選択肢いらないよ…っていう場合は上の切り替えボタンで色の数を変えられます。

あらかじめ、赤が中華、黄色がカレー、オレンジがイタリアン…のように決めておいてルーレットが止まったところに決めちゃうというジョークユーティリティアプリなのです！

こちらは４色の場合で…

こちらは２色になります。

ルーレットがスタートしだすと上のように８つのライトが順番に光っていき、そのうち止まります。

そうそう、肝心なことを書き忘れていました。ルーレットをスタートするには真ん中をタップしてもいいのですが、iPhone自体を机の上でくるっ！と回してもスタートできます。ためしてみてください！

今すぐダウンロード

無料アプリですので、興味がおありでしたらぜひダウンロードしてみてください！…いや、ダウンロードしてくださいお願いします！！

Decision Roulette
無料 リリース：2011/03/10

弊社脳トレアプリシリーズ最新作がリリースされました。「脳トレ -ブロック数え-」をご紹介します。

積み上げられたブロックを数えて、その数を入力していくだけのシンプルゲームです。

以下、詳細を説明してみます。

こんな感じです！

他のアプリ同様、まずは名前を入力する画面になります。

スタートボタンを押すと積み上げられたブロックが表示されます。

上の例だと13個ですので、下のボタンで13と入力して「OK」ボタンを押します。入力ミスした場合は「OK」の上のバックスペースキーで修正できます。

制限時間は30秒で、時間切れになるとそこまでで終了します。時間内に何問答えられたかでスコアが決まります。

ブロックの数について

見えない部分にもブロックがあるものとして考えないといけないので、単純にランダムで表示、というわけにはいきません。

そこで、以下のような考え方でブロックを配置しています。

• 下の段から配置していく
• 一番奥のブロックは必ず配置
• 手前から順にランダムで配置するかどうか決定
• 配置すると決定した場合でも親（自分の奥のブロック）が片方でも配置されていない場合は配置できない
• 一番外側の（親がもともと存在しない）場合は片側の親が存在するだけでOKとする
• 2段目以降も同じルールを適用するが、さらに下の段にブロックがない場合は配置できない

今すぐダウンロード

無料アプリですので、興味がおありでしたらぜひダウンロードしてみてください！…いや、ダウンロードしてくださいお願いします！！

脳トレ -ブロック数え-
無料 リリース：2011/02/25

ついに弊社開発のiPhoneアプリも3つめとなります。「脳トレ -瞬視記憶-」のご紹介です！！

一瞬だけ表示される数列をおぼえて入力するだけのシンプルゲームです。

以下、詳細を説明してみます。

こんな感じです！

あいかわらず、まずは名前を入力する画面になります。

スタートボタンを押すとゲーム開始です！

上の時計の画像が3,2,1とカウントダウンした後、上の画像のように一瞬だけ数字が表示されます。

上の例だと858ですので、下のボタンで858と入力して「OK」ボタンを押します。入力ミスした場合は「OK」の上のバックスペースキーで修正できます。

うまく覚えられず間違えた時点で終了となり、そこまでのポイントがランキングに登録されます。

今すぐダウンロード

無料アプリですので、興味がおありでしたらぜひダウンロードしてみてください！…いや、ダウンロードしてくださいお願いします！！

脳トレ -瞬視記憶-
無料 リリース：2011/02/18

弊社開発のiPhoneアプリ第２弾「脳トレ -記憶９-」のご紹介です！！

今回もシンプルなゲームアプリですが、前回の計算系ではなく記憶力が試される内容になっています。

以下、詳細を説明してみます。

こんな感じです

今回もまず名前を入力する画面になります。

スタートボタンを押すとゲーム開始です！

９つのボタンがあらわれ、どれかがランダムに光りますので、あとに続いてそのボタンを押します。

今まで押していたボタンはもちろん、正解するごとに１つずつ光るボタンが増えてきます。

こんな風に光ります。

第３弾

第３弾も実は審査中ですｗ

無料アプリですので、興味がおありでしたらぜひダウンロードしてみてください！…いや、ダウンロードしてくださいお願いします！！

脳トレ -記憶９-
無料 リリース：2011/02/18

手前味噌ですが、弊社開発のiPhoneアプリ「脳トレ -穴埋め計算-」が公開されたのでご紹介させていただきます！

内容は簡単な計算穴埋め問題なのですが、シンプルなので空き時間などに軽く遊べるのではないかと思います。

以下、詳細を説明してみます。

こんな感じです

起動すると、まず名前を入力する画面が表示されます。

デフォルトのままでも構いませんが、ランキングに残るのでお好きな名前をどうぞ。

Gameボタンを押し、スタートすると穴埋め問題がはじまります。

式が正しくなるように、＋ー×÷から選んでいき、10問正解した時点でおわります。そこまでの時間を競うというものです。

1位または10位以内に入ると、おめでとうメッセージが表示されます。

やった！！1位だ！

最初のプレイなので当たり前なんですけどね…

今後の展開

短期間で一気に作り上げたので、いろいろとアラはあるかもしれませんが、そこは大目に見て頂けると助かります…

今後は細かい調整もですが、twitterとの連携やネットワークランキングなども出来たらいいかな〜と思っています。

無料アプリですので、興味がおありでしたらぜひダウンロードしてみてください！…いや、ダウンロードしてくださいお願いします！！

脳トレ -穴埋め計算-
無料 リリース：2011/02/10

ものすごく久々の更新です。

最近使用している環境は専らMacで、VirtualBoxではなく開発環境もParallels Desktop上のLinuxを使うことが多くなりました。

EnableSendFileの設定などはもちろんVirtualBox同様必要なのですが、それ以前の問題としてアップデートを行ったところネットワークをブリッジに設定すると接続できなくなってしまいました…。

いろいろ調べたところ、設定ファイルを修正することで接続できるようになりました！その方法は以下の通りです。

config.pvs

まず、仮想マシンのファイルがあるフォルダをFinderで開きます。標準では、書類の中のParallelsフォルダになるかと思います。

次に、対象となる仮想マシンのファイル（.pvmファイル）を右クリックし、「パッケージの内容を表示」を選びます。

その中のconfig.pvsをテキストエディタで開きます。

そのうち、以下のような記述があるはずなので、その部分を変更します。

<NetworkAdapter>
...
<ForceHostMacAddress>1</ForceHostMacAddress>
<DHCPUseHostMac>0</DHCPUseHostMac>
...
</NetworkAdapter>

私の環境では上記設定のみでうまくいきましたが、それでもだめな場合はDHCPUseHostMacも1に設定してみてください。

VirtualBoxにCentOSなどのLinux環境を構築し、そこへApacheやらデータベースサーバやらをインストールしてWebアプリの開発を行うことがよくあります。

その際に、ホストのディレクトリを共有フォルダ設定してマウントパスをApacheのDocumentRootに指定すると便利に開発できるかと思います。

・・・が、しかし、今日その設定を行ってみてブラウザで表示を確認してみたところ、なぜか静的コンテンツがまともに表示されません・・・。

まっしろになってしまったり、更新したはずなのに古いものが表示されたり・・・。一体原因はなんなんでしょうか。。

EnableSendfile

Apacheの設定ファイル、httpd.confのcache関係のモジュールをオフにしたりといろいろとやってみましたが、全く変化ありません。

あきらめかけていたのですが、Live HTTP Headersでヘッダを見てみたところ、静的コンテンツが、206 Partial Content というレスポンスになっていることが分かりました。

このレスポンスコードをたよりに色々と検索してみると、どうやら EnableSendfile ディレクティブをオフにすればよいらしいことが分かりました。

さらに、このディレクティブについて調べてみると、

ネットワークマウントされた DocumentRoot (例えば NFS や SMB) では、カーネルは自身のキャッシュを使ってネットワークからのファイルを 送ることができないことがあります。

とあり、まさに今の症状の通りでしたので設定してみると・・・。

うまくいきました！！

もし、同じような状況に直面している人がいたらお役に立てば嬉しいです。

普段、会社ではUbuntu 8.10を使っているのですが、なぜかFirefoxが遅い・・・。Firefoxが、というよりかはFirefoxで動かすJavascriptが遅い感じなのです。

ちょっと遅い感じがする、というレベルではなくAjaxを多用しているサイトとかだと止まるんじゃないかと思うほど分かりやすい遅さです。

調べてみると、ipv6系のネットワークの遅延についての記事はたくさん出るのですが、Javascriptが遅いという話はなかなか見つかりませんでした。

ビルドオプションがおかしいのかな？と思って、最適化ビルドされたSwiftfoxを試してみることも考えたのですがバージョンが3.0.4系で止まってしまっているので、自分でビルドしてみることにしました。

apt-getを駆使する

Ubuntuはdebian系のディストリビューションなので、ソースからビルドし最終的には.debファイルにしてパッケージ化しておき、公式リポジトリ側がバージョンアップしたら更新できるようにしたいと思います。

まず、ソースコードの取得について。

普通ソースコードは公式サイトからtarボールやsvn, cvsなどのバージョン管理ツールで取ってくることが多いと思いますが、debパッケージ管理されているアプリのソースは、以下のコマンドで取得できます。

カレントディレクトリにいろいろ展開されるので、専用にディレクトリを作成し、その中で行った方が良いです。

また、このソースをビルドするために必要なパッケージを一括でインストールすることもできます。

debuild

ビルドには、debuildというツールを使うのですが、この辺がちょっとややこしかったです。

apt-get sourceでソースを取ってくると、前述のように色々とファイルを取得して新しくディレクトリが作成されます。この中にソースやらが入っているのですが、debianというサブディレクトリができていると思います。

この、debianの中に重要なファイルとして、ビルドオプションなどが定義されたrules、バージョン情報が書かれたchangelog、依存関係が定義されたcontrolなどが存在していると思います。

まずはrulesを編集してビルドオプションを変更します（以下は変更箇所のみ）。

CFLAGS = -g -O3 -march=native
CXXFLAGS = -g -O3 -march=native

#
#   (中略)
#

    -enable-optimize="-O3 -w -march=native" ¥

そして、changelogの編集ですが、これはコマンドで行うことができますが、それにはdevscriptsパッケージが必要なのでインストールしておきます。

次に編集用のコマンドを実行しますが、これはdebianディレクトリの親ディレクトリをカレントにして行う必要があります（そうしないと、debian/changelogが無いと怒られます）。

debchangeを起動するとエディタの選択肢が出るので好みのものを選びます（私は1のviにしました）。

とりあえず、何もせずに保存してしまっても特に問題はないですが、分かりやすいようにコメントを入れたり、リポジトリが更新するであろうバージョン番号の採番方法と重複しないように修正を入れます（バージョンについては、一つ下のバージョンがリポジトリの最新バージョンなので、それに -0 とかを付加したものにしておけばいいかと思います）。

ここまでで一応準備は整ったので、最後にビルドコマンドを実行します。

しばらく時間が掛かると思いますが、そのうちプロンプトに戻るはずです。もしエラーが出たら、failedとか出ているはずなので・・・その時はrulesかchangelog（たぶんrulesのほう）の記述が間違っている箇所があるので修正後再度実行します。

debのインストール

ビルドが終わると、最初の作業ディレクトリ（今まで作業していたところの親ディレクトリ）に移動するとたくさんのdebファイルができていると思います。

Firefoxの場合は、firefox-3.0_3.0.7+nobinonly-0ubuntu0.8.10.1-0_i386.deb（バージョン番号によってファイル名が違います）というファイルが本体で、あとfirefox-3.0-gnome-supportとfirefox-3.0-brandingの2つのパッケージも入れておかないと依存関係が壊れているとか言われてしまうので要注意です。

インストールは普通のdeb同様、

という感じでいけます。

インストールしたが・・・

さて、上記でビルド済みのパッケージをインストールできたはずなんですが・・・。about:buildconfigを見てみても、ビルドオプションが全く変化なしでした。。。orz

速度的にも大して変化はないようなので正しくインストールできているのかどうか謎です。ただ、ビルド中のコマンドラインオプションに追加した最適化オプションなどは入っていたのは確認できたんですが・・・。

うーん、どういうことでしょう・・・？(?_?)

PHPを使って、アクセス解析結果やアンケートの集計結果などグラフを表示したいという機会は結構あるのではないかと思います。

しかし、何もないところからこれを作ろうとするとかなり骨が折れる上に、美しいグラフを作成するのは難しいのではないかと思います。

今回はオープンソースのライブラリを使って、比較的簡単にグラフを作成してみたいと思います。

pChart

まずはpChartというライブラリから。これはGPLライセンスのライブラリで、サーバサイドで画像を生成するタイプのものになります。動作には、GDサポートを有効にしたPHPが必要となります。

対応しているグラフの種類は、

• 折れ線グラフ
• 3次スプライン曲線
• プロットチャート
• 棒グラフ
• パイチャート

と、豊富に対応していて、生成されるグラフの品質もかなり高いです。

このライブラリは、データを表すpDataとグラフを表すpChartという二つのクラスを使って描画を行います。使い方は以下のような感じです（サンプルをちょっとだけ変えたものです）。

<?php
 // Standard inclusions
 include("pChart/pData.class");
 include("pChart/pChart.class");  

 // Dataset definition
 $DataSet = new pData;
 $DataSet->AddPoint(array(10,2,3,5,3),"Serie1");
 $DataSet->AddPoint(array("1月","2月","3月","4月","5月"),"Serie2");
 $DataSet->AddAllSeries();
 $DataSet->SetAbsciseLabelSerie("Serie2");  

 // Initialise the graph
 $Test = new pChart(380,200);
 $Test->setFontProperties("Fonts/VL-PGothic-Regular.ttf",8);
 $Test->drawFilledRoundedRectangle(7,7,373,193,5,240,240,240);
 $Test->drawRoundedRectangle(5,5,375,195,5,230,230,230);  

 // Draw the pie chart
 $Test->setFontProperties("Fonts/VL-PGothic-Regular.ttf",8);   

$Test->drawPieGraph($DataSet->GetData(),$DataSet->GetDataDescription(),150,90,110,PIE_PERCENTAGE,TRUE,50,20,5);
 $Test->drawPieLegend(310,15,$DataSet->GetData(),$DataSet->GetDataDescription(),250,250,250);  

 $Test->Render("pchart.png");

日本語を表示するためには、setFontProperties() で日本語に対応したフォントを指定する必要があります。メソッドに渡す文字列のエンコーディングをUTF-8にしておけば、表示されるはずです。

このライブラリの面倒な点は、画像サイズはいいとしても、描画するグラフの座標をすべて細かく指定する必要があるところです。全体の大きさを変えたい、という時はすべてのパラメータを変更していくか、あらかじめ各パラメータの数値を最初のpChartのサイズに対する割合（または差分）で変数に入れておくかしなければなりません。

計算でパラメータを求めるように変更したソースは以下のようになります。

<?php
 // Standard inclusions
 include("pChart/pData.class");
 include("pChart/pChart.class");  

 define("CHART_WIDTH", 380);
 define("CHART_HEIGHT", 200);

 define("CHART_MARGIN", 5);

 // Dataset definition
 $DataSet = new pData;
 $DataSet->AddPoint(array(10,2,3,5,3),"Serie1");
 $DataSet->AddPoint(array("1月","2月","3月","4月","5月"),"Serie2");
 $DataSet->AddAllSeries();
 $DataSet->SetAbsciseLabelSerie("Serie2");  

 // Initialise the graph
 $Test = new pChart(CHART_WIDTH,CHART_HEIGHT);
 $Test->setFontProperties("Fonts/VL-PGothic-Regular.ttf",8);
$Test->drawFilledRoundedRectangle(CHART_MARGIN+2,CHART_MARGIN+2,CHART_WIDTH-CHART_MARGIN-2,CHART_HEIGHT-CHART_MARGIN-2,CHART_MARGIN,240,240,240);
 $Test->drawRoundedRectangle(CHART_MARGIN,CHART_MARGIN,CHART_WIDTH-CHART_MARGIN,CHART_HEIGHT-CHART_MARGIN,CHART_MARGIN,230,230,230);  

 // Draw the pie chart
 $Test->setFontProperties("Fonts/VL-PGothic-Regular.ttf",8);
$Test->drawPieGraph($DataSet->GetData(),$DataSet->GetDataDescription(),CHART_MARGIN*10+(CHART_WIDTH-CHART_MARGIN*10)/3,CHART_HEIGHT/2-CHART_MARGIN*2,(CHART_WIDTH-CHART_MARGIN*10)/3,PIE_PERCENTAGE,TRUE,50,20,5);
 $Test->drawPieLegend(CHART_WIDTH-CHART_MARGIN*14,CHART_MARGIN*3,$DataSet->GetData(),$DataSet->GetDataDescription(),250,250,250);  

 //$Test->Render("pcharat.png");
 // direct output image
 $Test->Stroke();

これで、defineしている数値を変えるだけで全体の大きさが変わります。しかし、あまり直感的でないしコードが読みづらいですね・・。上記をラップしたメソッドを用意して自動的に値を伸縮させるとスッキリしそうですが。

あと、このライブラリの特徴としてpCacheクラスというのを使うことでデータをキャッシングして高速化することができるようです。

Open Flash Chart

これはLGPLのグラフライブラリで、Flashをつかった描画ができます。JSONを使ったデータをFlashに受け渡す構造になっているため、基本的にサーバサイドの言語はなんでも使えると思います。

グラフの種類は、

• 折れ線グラフ
• 棒グラフ（スタイルが何種類か）
• エリアグラフ
• パイチャート
• 散布図
• レーダーチャート

が使えるようです。描画部分はFlashなのでグラフの種類によってはアニメーションさせることもできます。

用意されているクラスライブラリはPHPのほか、

• Ruby
• .Net
• Perl
• Java
• Python
• Google WebToolkit

と、多くの言語に対応されています。

このライブラリは、前述のとおりデータをJSONで受け渡すので、サーバサイドでのJSON生成コードとFlashへ受け渡すためのJavascriptコードの2つが必要となります。

まず、JSON生成部分は以下のようになります。

// ランダム値のデータを用意
srand((double)microtime()*1000000);
$data = array();
for( $i=0; $i<10; $i++ )
  $data[] = rand(2,9);

require_once('OFC/OFC_Chart.php');

$title = new OFC_Elements_Title("テスト");

// ここのオブジェクトの選び方でグラフの種類が決定される
$bar = new OFC_Charts_Bar_3d();
$bar->set_values( $data );
$bar->colour = '#D54C78';

$x_axis = new OFC_Elements_Axis_X();
$x_axis->set_3d( 5 );
$x_axis->colour = '#909090';
$x_axis->set_labels( array(1,2,3,4,5,6,7,8,9,10) );

$chart = new OFC_Chart();
$chart->set_title( $title );
$chart->add_element( $bar );
$chart->set_x_axis( $x_axis );

上の例では、OFC_Charts_Bar_3d クラスを使っていますが、これを変更することによってグラフの種類をいろいろと変えることができます。

Javascript側はJSONデータを設定して決められた関数でFlashに受け渡すだけです。

<script type="text/javascript" src="js/json/json2.js"></script>
<script type="text/javascript">
function open_flash_chart_data()
{
    return JSON.stringify(data);
}

// toPrettyString() メソッドでJSON形式のコードがreturnされてくる
var data = <?php echo $chart->toPrettyString(); ?>;
</script>

また、上記のようにスクリプトベースで値をセットするのではなく、あらかじめJSON形式のデータをファイルに入れておき、GETパラメータで ?ofc=ファイル名 としても読み込むことができるようです。ファイル名のところはphpのようなサーバサイド生成できるスクリプトでもOKなので、同じグラフでデータだけ切り替えたい場合等に便利に使えそうです。

Google Chart API

Googleが公開しているグラフ生成APIです。自サーバへの負荷なし、プログラミングの知識もなしでグラフが使えるというのが最大のメリットでしょうか。

このAPIをPHPでさらに簡単に扱うことができるクラスライブラリを発見したので、使ってみることにしました。

使い方は本当に簡単で、以下のように書くだけです（最初の画像のような表示になります）。

include( 'GoogChart.class.php' );

/** Create chart */
$chart = new GoogChart();

// Set graph data
$data = array(
			'IE' => 46.94,
			'Firefox' => 40.68,
			'Safari' => 4.32,
			'Chrome' => 4.22,
			'Opera' => 3.03,
			'その他' => 0.78
		);

// Set graph colors
$color = array(
			'#99C754',
			'#54C7C5',
			'#999999',
		);

// Setup chart attributes
$chart->setChartAttrs( array(
	'type' => 'pie',
	'title' => 'ブラウザ利用比率',
	'data' => $data,
	'size' => array( 230, 150 ),
	'color' => $color
	));

// Print chart
echo $chart;

連想配列のデータを作ってグラフのインスタンスに渡すだけで、以下のようなGoogle Chart API用の img タグが生成されます。

http://chart.apis.google.com/chart?cht=p&chtt=%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E5%88%A9%E7%94%A8%E6%AF%94%E7%8E%87&chd=t%3A46.94%2C40.68%2C4.32%2C4.22%2C3.03%2C0.78&chl=IE%7CFirefox%7CSafari%7CChrome%7COpera%7C%E3%81%9D%E3%81%AE%E4%BB%96&chs=230×150&chco=99C754%2C54C7C5%2C999999&chm=&chf=a%2Cs%2Cffffff

今回紹介したライブラリは3種類とも、それぞれ特徴が異なるので用途によって使い分けるのがいいかな、と思います。