無職のプログラミング

Google App Engine の Python 開発用サーバーでちょこちょこプログラミングしている。

Pythonフレームワークとして webapp と Django とどっちを使おうか迷ったが、このエントリで
・Google App Engine では Django の素晴らしいO/Rマッピング機能が使えない
・webapp では Djangoテンプレートを使用できる
からwebappでいいんじゃないの みたいなことが書かれていたので、webappを使うことにした。
webappはシンプルなので、覚えることが少なくてすぐ使える。

4日間ほど Python/Google App Engine/webapp と格闘して
・フォームの<textarea>から入力した文字列を解析してデータストアに格納
・データストアのデータを元に出力データを算出・作成して表示
が何とかできるようになった。

Google App Engine で提供されているのは、リレーショナルデータベースではなくデータストアで、いろいろと制限がある。
GROUP BY が無いのは不便だ。それを前提としたデータ設計をしなきゃいけないってことだな。
データストア使用に関する注意点などを、そのうち調べてみよう。

サーバーサイドのプログラミングをしたいと思い、無料で使えるGoogle App Engineを使うことにした。
サポートしている言語は Java と Python のみ。(JRubyを使ってRubyを動かすようなこともできるみたい)
Javaの方が日本語情報が豊富そうだが、深く考えずに「スクリプト言語の方が自分にはいいかな」と Python を使うことにした。

そんなわけで昨日から Python の勉強。
「Python 入門」で検索して見つけた buzzword group siteのPython入門 と ニシキヘビを飼おう Python入門 をざっと読んでなんとなく概要をつかむ。
ブロックをインデントで表すのか。リストのスライスが面白いな。forループが独特だ。ぐらいのことがわかった。
次に、Python Japan User's Group の インスタント・パイソン を読む。
Pythonの奥深さが垣間見れた気がする。自分がメタクラスとか使う日は来るのだろうか。

本当は Python Japan User's Group の Python チュートリアル を読んで理解を深めたいのだが、その前に何か作ってみようと Python の実行環境を作ることにする。
Google App Engine の Python SDK には、ローカルで動く Python 開発用サーバーが用意されている。
スタートガイドの開発環境作成ステップに従い、
・Python 2.5.4をダウンロードしてインストール(python-2.5.4.msiをダブルクリックして指示に従うだけ)
・Google App Engine SDK for Pythonをダウンロードしてインストール(GoogleAppEngine-1.3.8.msiをダブルクリックして指示に従うだけ)
スタートガイドではコマンドプロンプトで Python 開発用サーバーを起動しているが、SDKに含まれている Google App Engine Launcher を使うと起動／停止以外にもいろいろできて便利。
スタートガイドのプログラムが実行出来ることを確認して今日は終了。

前回のブログから4日も日があいてしまった。
アルゴリズムをちょっと調べていて、迷路探索などに使われるA*(エースター)アルゴリズムを知った。
覚えて損は無いだろうから、JavaScriptでA*を組んでみることにした。

まず、A*を知ったこのページのソースコードをナナメ読みした。
第4回　できるだけ短いルートでゴールに到達する - 地球にやさしいアルゴリズム：ITpro

上記のページではA*についての詳しい説明が無かったので、エースターで検索して見つけた以下のページを読んで何となく理解した。
A*（A-star：エースター）探索アルゴリズム｜カンガルーハウス

二次元長方形の迷路から脱出するプログラムを作ってみた。
仕様はこのようにした。
「とにかく調べていない座標に移動する。調べた回数が同じ場合は、コストが小さい方に移動する」というコンセプト。
一応ソースを載せておく。
test_html.txt  astar_v1_js.txt
実行してみるとわかるが、本当の最短ルートを見つけられない。
また、次の座標は必ず現在地に隣接する座標のため、袋小路に入ると次のルートを探すのに時間がかかる。

そこで、上記の「できるだけ短いルートでゴールに到達する」で書かれていたソースコードを熟読。
いかに自分が理解しないでナナメ読みしてたかを実感。
仕様をこのように改良した。
改良と言うより、全く別物になっている。
ソースコードを載せておく。html は script src しか変えていないので略。
astar_v2_js.txt
いざ実行してみると、またまた本当の最短ルートを見つけられない。
袋小路に入った場合のループ回数は大幅に減った。

本当の最短ルートを見つけるべく、コスト算出部分だけ仕様を変更
ソースコードは以下のとおり。
astar_v2_1_js.txt
晴れて本当の最短ルートを見つけることができたが、スタート地点からしらみ潰しに探索している感じだ。
探せばもっと効率が良いA*実装例がありそうだが、必要になったときに調べよう。

お手本のソースコードを熟読する前に自分であれこれ考えてみたので、理解が深まった気がする。
この記事に載せた3つのソースコードを書くのに3日間かったけど。

自分のソースコードから、変な書き方 や 好ましくない書き方 を少しでも減らしたい。
また、できるだけ見やすいソースコードを書きたい。
誰かにレビューしてもらえればいいのだが、残念ながらそのような環境ではない。

お手本のようなものはないかと探したら、Google JavaScript Style Guide を見つけた。
a = {...} の後は必ずセミコロンをつける や、new Array( ) は使用しない などが理由とともに書かれている。
また、push( ) で配列の要素を追加するよりもインデックスを指定して追加する方が高速 といったTIPSも少し書かれている。

これをお手本にしてこれからJavaScriptのソースコードを書いてみよう。
でも JsDoc や Closure Compiler 向けの記述は今のところ考えないでおこう。

Google JavaScript Style Guide に沿ってソースコードをチェックするGoogle製JavaScript文法チェッカーがあるようだが、windowsで使うのはちょっと面倒みたいなので、今はチェックツールは使わないでおく。

ここ数日はドキュメントを読んでばかりなので、明日こそは何かコーディングする。

10月からJavaScriptばかりやっている。
そろそろサーバーサイドのプログラミングした方がいいのかな。
必要になったらやろう。

引き続きゲームを作りたいと思っているが、具体的なイメージが湧かない。
コンセプトは「気軽にできて、プレイにあまり時間がかからないもの」
時間がかかるゲームは、作るのも時間がかかるし。

とりあえず、今日はダラダラと ジャンル別ゲームの作り方とアルゴリズムまとめ のRPGとシミュレーションの項を読んだ。
リンクをたどって見つけた 良い乱数・悪い乱数 が興味深かった。
ゲームのジャンルによっては、乱数の精度がゲームバランスに大きく影響するのか。

イメージが湧くまでいろいろと調べてみるかな。
ソーシャルゲームと言われるものをやったことが無いので、ちょっとやってみようかどうしようか。
一人でやると楽しさがわからなそうだけど。

前回の記事に書いた掛け算九九の特訓ページを改良して、答えを入力できるようにした。
こちら → かけ算九九のとっくん（答えを入れる）

答えを入力する部分以外にも、答えを判定して間違えた問題を一覧表示する処理などを追加したので、意外と時間がかかった。
キーボードで答えを入力する機能と、音を出す機能追加で公開が半日遅れた。

今まで覚えた知識だけで作ったので、特にブログに書くことが無い。

それにしても見た目がショボいし、メニューがゴチャゴチャしている。
デザインをちょっと勉強した方がいいかなぁ。

8月に小学校低学年向け計算練習ページを作ったときに、「かけ算九九のも作って」と言われていたのだが、やっと掛け算九九の特訓ページを作った。

こちらからどうぞ　→　作ったもの一覧ページ

問題と答え表示、かかった時間一覧画面は、前回作った足し算引き算プログラム(の共用部分)を使ったので時間はかからなかったのだが、メニュー画面の作成に時間がかかった。
チェックボックス、ラジオボタン、セレクトボックスの値を取得したり操作したりする方法をいちいち調べた。
また、一度設定した項目をCookieに保存して、再度ページを開いたときに反映するようにした。
今回初めてJavaScriptでCookieを使ったが、思ったよりも簡単だった。暗号化とかしない単純な使い方だからだろう。

前回作った足し算引き算プログラムも、細かいところをチョコチョコと修正した。
「作ったもの一覧ページへ戻る」以外は、小学二年生までに習う漢字だけ使うようにした。

今回作ったのは問題と答えを表示するだけなので、次は答えを入力できるようにしよう。

8月に作った 懐かしの記憶力ゲーム を音が出るように修正した。
ついでにいろいろと修正したので、作業内容を書き出してみる。

・効果音の作成
正解時の音は横スクロールジャンプゲームのクリア音と同じだが、それ以外の効果音は以前の記事で紹介したテキスト音楽「サクラ」を使って作った。
(以前の記事で不正解時の効果音を作っているが、それは使わずに作り直した)
音色や音符は単純で、例えば不正解時の効果音は
なのだが、実際にゲームしながら音量や音の長さを調整するのに時間がかかった。
点滅するボックスごとにすべて異なる効果音を作ったので、合計10個の効果音を調整するのは面倒だった。

・音を出す部分のプログラミング
IE 以外は HTML5 Audio で、IE は HTML5.Audioライブラリ を使って音を出すようにした。
横スクロールジャンプゲームのソースコードを流用したので、大して時間はかからなかった。

・画面レイアウト修正
音を出すボタンと音量ラジオボタンを追加するためにレイアウトを変更した。
position: absolute にしていたのを float で作り直したので、音を出す部分のプログラミングよりも時間がかかった。

・ボックス点滅／クリック処理修正
ボックスをクリックすると音が出るのだが、同じボックスを連打すると同じ Audio オブジェクトに対して play() するため、1回目の音しか出ない。
連打した時もちゃんと音を出すのは大変そうなので、同じボックスが連続で点滅しないようにプログラムをいじった。
連打すると必ず不正解になるため、2回目の音が聞こえなくても気にならない。
あと、ボックス点滅処理でクロージャを使っていたのだが、普通の関数を使うように修正した。心なしか処理が軽くなった気がするが、計測してないので多分気のせい。

・その他細かい部分修正
ボタンを押してください／点滅中／ボックスをクリックしてください のメッセージを表示するようにした。
ボタンを押してください以外のときは、スタートボタンのクリックイベントを解除した。
ボックスをクリックした回数を表示するようにした。
ハイスコアを超えた場合、スコアを赤く表示するようにした。
説明文を書き直した。

効果音の再生直後にボックス点滅アニメーションをするようにプログラミングしているのだが、負荷が高いときなどは音と点滅のタイミングが合わない。
別々のAudioオブジェクトで再生しているからだろうか。

このゲームを作ったのは8月4日でほぼ3ヶ月前なのだが、ソースコードを見返してみて、自分はあまり成長してないなぁと思った。

Flash 経由で音声再生する JavaScript ライブラリ HTML5.Audio を使って、この前作ったゲームを Internet Explorer8以下でも音が出るようにした。

HTML5.Audio ライブラリは IE だけで使用し、それ以外のブラウザは HTML5 Audio オブジェクトを使用するようにした。
2通りの方法で音を出すためソースコードが複雑になるかと思ったが、分岐が必要なのは Audio オブジェクトの作成と音量変更時だけで、修正箇所も大して多くは無かった。

HTML5.Audio ライブラリを使う際の注意点を簡単にまとめる
・swfobject.js は swfobject project から最新バージョンをダウンロードして置き換えた方がいい。
・volume 属性の値を変えた場合、再生中なら pause() して play() 後に反映される。
・loop 属性が true の場合、ループしても currentTime は0に戻らずに加算されていく。ループして currentTime が duration を超えた場合、 pause() して play() すると再生されないので、pause() 後に currentTime = 0 にする必要がある。

せっかくなので8月に作ったゲームも音が出るようにしようと思う。
変更歴を保存するために、バージョン管理ソフトを使うことも考えなきゃいけないかな。

Internet Explorer8以下でも音を出すようにしようと、Flash 経由で音声再生するライブラリを探した。
HTML5のAudioオブジェクトみたいに使える HTML5.Audio を使うことにした。
(属性の設定方法が違うため、HTML5 Audioオブジェクト用のソースコードをそのまま使うことはできない)

ダウンロードしてテストプログラムを作って動かした。
ローカルでは IE でも Firefox でもちゃんと動く。
でも @PAGES にアップしたら、Firefox では動くけど IE では動かない。
IE の開発者ツールを使って調べたところ、swfobject.js でswfのオブジェクトをきちんと作成できてないようだ。
swfobject - Project Hosting on Google Code から最新バージョンをダウンロードして置き換えたら IE でもちゃんと動いた。
あっさりと書いてるけど、テスト開始から「swfobject.js が怪しい」に到達するまで4時間かかった。

明日はこの前作ったゲームを IE でも音が出るようにしよう。