そこで今回、このMecabをさくらレンタルサーバーで実行できるようインストールしました。また、PHPからMecabを実行するよう拡張モジュールも同時にインストールします。

• ※さくらレンタルサーバーのスタンダード以上（telnetができるもの）が対象です

ダウンロード

以下を全てダウンロードします。私は一旦windowsでダウンロードして、ftpでサーバーにUPしました。

• Mecab本体（mecab-0.97.tar.gz）
• Mecab用辞書（mecab-ipadic-2.7.0-20070801.tar.gz）
• php用拡張モジュール（php-mecab-0.3.0.tgz）

インストール

今回、インストールフォルダは、以下のフォルダを作成し、ここに全てのモジュールをインストールしました。以下、ダウンロードしたzipファイルは全てoptディレクトリにUPしてあるものとします。また、ログインユーザ名をusernameとしています。

• /home/username/opt

Mecabのインストール

1. cd /home/username/opt
2. tar zxfv mecab-0.97.tar.gz
3. cd mecab-0.97
4. ./configure --prefix=/home/username/opt
5. make
6. make check
7. chmod z+x install-sh
8. make install

インストールが完了したら、以下のコマンドで簡単なテストが可能です（ヘルプが表示されます）。

• /home/username/opt/bin/mecab -h

Mecab辞書のインストール

1. cd /home/username/opt
2. tar zxfv mecab-ipadic-2.7.0-20070801.tar.gz
3. cd mecab-ipadic-2.7.0-20070801
4. ./configure --prefix=/home/username/opt --exec-prefix=/home/username/opt
   --with-mecab-config=/home/username/opt/bin/mecab-config
5. make
6. make install

他のサイトの方はmecab-configなどは指定しなくてもインストールできているようですが、私の環境ではconfigure実行時に--prefix、--exec-prefix、--with-mecab-configと3つの引数を指定しないとうまくインストールができませんでした。

また、--with-charset=utf8などのように文字コードの変更を設定できるようなのですが、私の環境ではこの設定もうまくいかずデフォルトのEUCのままになっています。まぁ、このあたりはエンコードで処理可能なのでとりあえずはこのままで進めます。

php-mecabのインストール

php-mecabのインストールは若干苦戦しました。まずphpizeというコマンドが通らない。これはphpのbinまでのパスを全て指定することで実行可能です。

• cd /home/username/opt/php_mecab-0.3.0
• /usr/local/php-5.2.6/bin/phpize

しかし、phpizeを実行すると今度はautoconfが見つからないというエラーが出ます。この解決にはログインシェルの設定ファイルに環境変数を設定することで解決しました。

• vi /home/username/.cshrc
• ※以下の環境変数を追加
  • setenv PHP_AUTOCONF /usr/local/bin/autoconf259
  • setenv PHP_AUTOHEADER /usr/local/bin/autoheader259

設定ファイルを編集し終わったら環境変数を設定し直します（もしくは再ログインでもOK）。

• source ~/.cshrc

これでphpizeを実行すればconfigureファイルが作成されるようになります。

• /usr/local/php-5.2.6/bin/phpize (今回は成功）

続いてconfigureを実施します。

• ./configure --with-php-config=/usr/local/php-5.2.6/bin/php-config --with-mecab=/home/username/opt/bin/mecab-config

他のサイトの方は引数を指定しないでも通るようですが、私の環境では辞書と同様引数がないと通りませんでした。以上の手順をふまえ、php-mecabのインストール手順をまとめると次の通りです。

1. シェル設定ファイルに環境変数をセット
   1. vi /home/username/.cshrc
   2. setenv PHP_AUTOCONF /usr/local/bin/autoconf259
   3. setenv PHP_AUTOHEADER /usr/local/bin/autoheader259
2. source ~/.cshrc
3. cd /home/username/opt
4. tar zxfv php_mecab-0.3.0.tgz
5. cd php_mecab-0.3.0
6. /usr/local/php-5.2.6/bin/phpize
7. ./configure --with-php-config=/usr/local/php-5.2.6/bin/php-config
   --with-mecab=/home/username/opt/bin/mecab-config
8. make
9. make install

以上でphp-mecabnのインストールは完了です。

php.iniの設定

php-mecabは拡張モジュールとして読み込む必要があり、拡張モジュールの設定はphp.iniに記述します。しかし、レンタルサーバーの環境では大元のphp.iniファイルを編集することはできません。

さくらのレンタルサーバーでは、各ユーザが独自のphp.iniの設定をできるようになっているのでそのphp.iniにmecabの設定を記述します。

1. 会員メニューにログインし、サーバー設定のページを表示
2. [アプリケーションの設定]の[php設定の編集]を開く
3. php.iniファイルパスに以下のパスを記述し[保存する]を選択
   1. extension_dir=/home/username/opt/php_mecab-0.3.0/modules/
   2. extension=mecab.so

以上でphp.iniの設定が完了します。これでphpからMecabを利用可能になります。

サンプルの作成

phpを用いたMecabのサンプルを作成しました。

サンプルはこちら

• はてなからrssを取得
• rssの中身を解析
• 解析結果を表示

Mecabを使うことで最新の記事情報を解析して人気キーワードのデータを集めたり、SEOなどに利用できそうです。こんなにすごいものをフリーで提供していただいて本当に感謝したいです。

＜参考＞

• Mecab
• php_mecab-0.3.0
• php_mecab関数リファレンス
• さくらの500円レンタルサーバで MeCab を使う
• ウノウラボ - PHPとMecabでキーワード自動リンクを実装する
• MeCab PHP extension moduleを使ってみた

• イベント処理（ボタンの入力に対する処理）
• タイマー（アニメーション）
• 画像表示
• 音楽再生

これだけできるようになると、少しはアプリと呼べるものができるようになります。それでは拡張を行っていきます。

イベント処理

まずはボタンの入力に対する処理を追加します。 ボタンのイベントに対する処理はprocessEventというメソッドで実現します。

サンプル１を見る

ここでのポイントは

• processEvent内で十字ボタンイベントによる描画座標(x, y)の更新
• getWidth(), getHeight()による描画サイズの取得
• clearRect()による描画エリアのクリア
• repaint()による文字列の再描画

となります。描画のクリアをするためにあらかじめ画面のサイズを取得し、画面を一度クリアします。その後、文字列の描画位置を更新し再描画することで文字の描画位置の更新します。

タイマー（アニメーション）

先ほどのイベント処理だとボタンを一回押した時のイベントしか取得できず、何度もボタンを押しなおす必要があります。ボタンを押しっぱなしにした状態で描画位置を変更させるためにはタイマー機能を利用します。タイマー機能は、一定時間毎のイベントを処理することでアニメーションやゲームのスクロールなど色々と応用することもできます。

タイマー機能を実現するには、ShortTimerというクラスを使用します。このクラスは一定時間毎にタイマーイベントを発生させます。

サンプル２を見る

ここでのポイントは

• タイマーを定義するためのstart()メソッドの追加
• メインクラス”HelloWorld”からのstart()メソッドの呼び出し
• processEvent()内でのタイマー処理の追加

となります。タイマーから発生されたイベントをprocessEventで受け取り一定時間毎の処理を定義しておくことでアニメーションなどの機能を実現できます。今回はHelloWorldの文字列の描画位置を一定時間毎に移動させることで文字列が動いているようにしています。 

画像表示

続いて画像の描画を行います。画像の描画には、MediaImage、Imageという２つのクラスを使用します。また、表示するImage（gifファイル）をあらかじめresフォルダに保存しておく必要があります。

サンプル３を見る

ここでのポイントは

• MediaImage.getImage()による画像の読み込み
• MediaImageのuse()による画像の使用宣言
• drawImage()による画像の表示
• 読み込み時のtrycatchによるエラー処理
• 終了時の解放処理

となります。gifファイルはプロジェクトにあるresファルダ内に保存しておくようにしてください（ここにおいて置かないとimageを参照した時点でプログラムが落ちます）。

画像の表示の際に、画像を画面中央に表示するため画像サイズを取得するようにしています。また、KEY_SOFT_2ボタンを押したときに終了するようイベントを追加しました。

音楽再生

音楽の再生も画像表示の処理とほとんど同様の手順で実現できます。音楽の再生にはMediaSound、AudioPresenterという２つのクラスを使用します。音楽の再生にはmldと呼ばれるドコモ専用の音楽ファイルを使用します。このファイルもあらかじめresフォルダに保存しておく必要があります。

サンプル４を見る

ここでのポイントは

• MediaManager.getSound()による音楽データの読み込み
• mediaSoundのuse()による音楽データの使用宣言
• AudioPresenter.getAudioPresenter()によるAudioPresenterの取得
• AudioPresenterのsetSound()による使用宣言
• AudioPresenterのplay()による音楽再生

となります。また、画像と同様エラー処理も実施します。音楽はstart()時点で自動的に演奏されるようにしています。また数字の１を押した際に再生し直すようにイベントを追加しました。

アプリの公開

アプリを作成したら実際に公開してみます。プロジェクトのbinフォルダの下にjarファイル、jamファイル、htmlファイルができているのでこの３つのファイルをサーバーにUPします。UPしたhtmlファイルを携帯から見に行けば作成したiアプリのウンロードが可能です。

今まで行った拡張をまとめたものをアプリとして作成しました。以下のQRコードを見に行くとiアプリをダウンロードできます。また作成したプロジェクトのzipも置いてあります（F706iにて動作確認）。

• サンプルをダウンロード

画像、音楽は以下のサイトからお借りしました（もし問題がある際は削除しますのでご連絡ください）。

• 「ケロ⑨ destiny」に絵をつけてみました（ニコニコ動画）
• Music Load様

以上でiアプリの拡張が完了しました。iアプリの作成も一通りやってみるとそれほど難しくないですね。ただ、本格的なアプリの作成を考えるとデータサイズやプログラムの制約が多く、また機種依存の処理なども考慮しなくてはならないので面倒ではあります。

しかも、auやソフトバンクのアプリとは全く互換性がないので（泣）、全キャリア対応を考えると頭の痛いことになります。今のところ、個人的な趣味アプリを作成する程度しかできませんね。

今後、googleのAndroidなど開発環境が普及していくことで互換性の問題も変わっていくかもしれません。そうなれば個人による携帯アプリの開発も普及していくかもしれません。

＜参考＞

• ITmarks(環境準備)
• J2SEとDoJadで愛アプリ（サンプル作成） 

Eclipseの環境設定

前回の作業でアプリケーションのインストールは全て完了しました。しかし、このままだとEclipse上からDoJaの開発ができないので、Eclipseでの環境設定を行います。

まずEclipseを実行します。初回だとワークスペースの指定などありますが、これは自分の好きなフォルダを指定して構いません。また、最初の画面では”ようこそ”というタブが開いているかもしれませんが、特に必要ないのでタブを閉じておきます。

[ウィンドウ]メニューから[設定]を選択します。 左側の一覧にある[DoJa-5.1 Environment]を選択してください。このページの[DoJa-5.1のインストール先]の項目をDoJaをインストールしたパスに変更してください。（当環境では”D:\Program Files\iDKDoJa5.1″）

以上でEclipseからDoJaの開発ができるようになります。

新規プロジェクトの作成

続いてプロジェクトを作成していきます。

1. [ファイル] - [新規] - [プロジェクト]を選択
2. リストの中から[Java]のフォルダを開き[DoJa-5.1プロジェクト]を選択し[次へ]を選択
3. プロジェクト名を”HelloWorld”と入力し[終了]を選択

以上でプロジェクトの作成が完了しました。

新規クラスの作成

続いてクラスを作成します。

1. 左端にあるパッケージエクスプローラ画面を選択状態する
2. [プロジェクト] - [DoJa-5.1] - [ソースファイルの新規作成]を選択する
3. ソースファイル名の項目に”HelloWorld”と入力し[OK]ボタンを選択する

以上でプロジェクトのsrcに新しくHelloWorld.javaというファイルが追加されます。ダブルクリックすると画面にソースコードが表示されます。これでクラスの作成が完了しました。

ソースコードの修正

表示されたコードを見ると、いくつかクラスが定義されています。このままでも実行可能ですが、せっかくなのでHelloWorldという文字を画面に表示させるプログラムに修正します。以下のソースコードを入力してください（コピー＆ペーストする場合、全角スペースを変換してください）。

import com.nttdocomo.ui.*;
//==============================================
// HelloWorld
//==============================================
public class HelloWorld extends IApplication
{
　　MyCanvas myCanvas;
　　public void start(){
　　　　myCanvas = new MyCanvas();
　　　　Display.setCurrent(myCanvas);
　　}
}
//==============================================
// myCanvas
//==============================================
class MyCanvas extends Canvas
{
　　public void paint(Graphics g){
　　　　g.drawString(”Hello World!”, 10,10);
　　}
}

プログラムを修正したらソースコードを保存してください。以上でソースコードの修正は完了です。

プログラムの実行

ソースコードの修正が完了したら、いよいよプログラムを実行します。

1. [実行] - [構成および実行]を選択
2. 左の一覧から[DoJa-5.1アプリケーション]をダブルクリック
3. プロジェクトの項目に”HelloWorld”と入力し[実行]を選択する

以上でiアプリのアプリケーションが実行されます。表示された画面のうち、メインディスプレイの画面に”Hello World!”という文字が表示されているか確認してください。

プログラムの実行がうまくいかなかった場合、以下の設定が行われているか確認してください。

1. JDKのbinへのPATHが環境変数に定義されているか
2.  [ウィンドウ] - [設定] - [DoJa-5.1 Environment]ページのDoJa-5.1のインストール先に正しいインストールパスが設定されているか
3. [プロジェクト] - [DoJa-5.1] - [ADF/トラステッド動作設定]を選択し、ADF設定の中のAppClassが”HelloWorld”に設定されているか

ADFのクラス名の設定は、クラス作成の際に自動的に設定されるようですが、もし設定がない場合は自分で設定が必要となります。

上記の設定を見直してもうまく動かない場合、アプリケーションのインストールに問題がある可能性があります。アプリケーションのインストールから再度確認してみてください。

• ※cygwinというプログラムをインストールしていると、JDKの環境変数の設定の際に問題が発生することがあるようです。その際はcygwinの環境設定を外してから実行してみてください。

以上でiアプリのサンプルプログラムの作成は完了です。次回は画像の表示、音楽の再生を実施します。

そこで、今回は自分も使っているドコモのiアプリを作成してみることにしました。まずはiアプリ開発のための環境を準備します。

開発アプリのDownLoad

iアプリの開発環境を作るためには以下のアプリケーションが必要となります。以下のアプリケーションを全てダウンロードしてください。

• JDK(1.4.2_17)　（J2SDK/J2RE - 1.4の欄 から選択）
• Eclipse3.2
• Eclipse3.2 日本語化パッチ
• DoJa(5.1)

JDKはJavaアプリの開発環境、DoJaはiアプリの開発環境です。EclipseはJava用の統合開発環境（IDE）のため必須ではないですが、あると開発が楽になるのでインストールすることにします。

• ※JDKは1.5以降のバージョンではうまく動きませんでした。DoJaが対応していないようです。
• ※Eclipseの3.4でもうまく動きませんでした。こちらもDojaが対応していないようです。

開発アプリのインストール

 ダウンロードが完了したら、それぞれインストールしていきます。

JDK(1.4.2_17)

JDK(1.4.2_17)はダウンロードしたexeファイルをそのまま実行するだけです。インストール完了後に大事な作業があります。それはJDKのbinへのPATHを環境変数で定義することです。これをしないとJavaアプリが実行できないので注意してください。

環境変数の定義方法

１．マイコンピュータを右クリックして[プロパティ]を選択

２．上のタブから[詳細設定]を選択

３．下にある[環境変数]のボタンをクリック

４．ユーザー環境変数の[新規]ボタンをクリック

５．[変数]の項目に”PATH”と入力

６．[変数値]の項目JDKのbinへのパスを入力
 　（当環境では”D:\Program Files\Java\j2sdk1.4.2_04\bin”）

Eclipse3.2／日本語化パッチ

Eclipseのインストール作業はダウンロードしたzipファイルを解凍するだけです。他に特別な作業はありません。日本語化パッチも同様に解凍してeclipseの解凍フォルダに全てのファイルを上書きコピーするだけです。同じフォルダ内で解凍した場合、自動的に上書きされます。

ただし、DoJaのインストール時にeclipseのフォルダパスを参照させる必要があります。デスクトップなどで解凍した場合は、適当な位置に移動するようにしてください。（私の環境では”D:\Program Files\eclipse”に移動）

DoJa(5.1)

ダウンロードしたzipファイルを解凍し、DISK1というフォルダにあるsetup.exeを実行します。

１．インストール先を選択する（当環境では”D:\Program Files\iDKDoJa5.1”）

２．セットアップタイプで[カスタム]を選択する

３．NetBeansの選択を解除し、Eclipseに選択があるのを確認する

４．Eclipseのインストール先を指定する（当環境では”D:\Program Files\eclipse”）

この時点でDoJaによるiアプリの開発ができるようになります。また、DoJaにはインストールフォルダのappsの中に”CarRace”というサンプルが付いているので実行できるか確認してください。 

以上で開発環境の準備は完了です。次回はEclipseで実際に開発していきます。

javascriptでテトリスを作成しました。ゲームを作成するとなるとjavascriptでは難しいかと思いましたが、javascriptでも十分に作成することができました。

テトリスを作成するために必要となる処理は、次のようになります。

• 入力キーのチェック（回転、移動、Pauseなど）
• ピース操作（作成、配置、移動、回転、衝突判定など）
• 自動落下（時間毎のループ処理）
• ライン削除
• ゲームオーバーの判定
• 描画処理
• スコア等の表示（今回はライン削除数を表示）

テトリスを作成するに当たり一番大変なのがピースを操作する処理です。 特に衝突判定は処理が複雑で作るのが大変でした。

• javascriptテトリスを見る
• javascriptテトリス 関数一覧

テトリスを作成したきっかけ

テトリスを作成したのは565バイトテトリスというものを知ったのがきっかけです。javascriptでわずか7行ほどでテトリスを作っているのを知り自分でも作って見ようと考えました。

今回のテトリス作成でゲーム性を出すために必要となる処理をいくつか追加しました。

• 一定時間毎にピースの落下速度を早くする
• ポーズ中に画面をブラインドする
• 削除ライン数の表示

しかし、まだ十分でない機能もあります。

• カベ付近で回転がうまくできない
• スコア計算がない
• ライン削除のエフェクトがない
• プレイ時間がない

これらについてはある程度割り切って作成したため仕方ないですが、今後の課題として取り組んでいければと思います。

その他にもスコアのランキング登録などを行っていくとよりｹﾞｰﾑ性が高くなると思います。WEB上で何かゲームを作成するとなるとFlashが一般的かもしれませんが、Javascriptでもかなりのことはできるようです。

今回のテトリス作成で、落ち物パズルの基本的な仕組みが分かるようになりました。プログラミングを始めたいと思ったときや、何かを作りたいと思ったときにJavascriptを選ぶというのは有効な選択肢の１つと言えそうです。

• javascriptテトリスを見る
• javascriptテトリス 関数一覧

＜参考＞

• テトリスの作り方
• わずか565バイトテトリスのプログラミング解説
   

http://netadguide.yahoo.co.jp/info/rate/

１ヶ月のサービス全体の平均PV数が４５０億だそうです。トップページだけでも45億PVになるそうです。さらにすごいのは、各ページにおける広告掲載料金とPV数が公開されているところです。

保障インプレッション数（表示数）に応じて単価が変わっていき、100万impsだと0.5～2円程度、4000万impsだと0.2～0.9円程度というように変化していきます。これを金額にすると、100万impsだと50～200万円、4000万impsだと800万～3600万円。

トップページのPV数が45億PVなので1日平均1.5億PV。トップページの一番右上に表示される通常サイズのバナーの単価が1円/impsとすると、1日で1.5億になりますね（実際はランダムで表示されるので1/10程度でしょうが）。

1週間Yahooのトップページにバナー表示すればかなりの宣伝効果にはなると思いますが、それだけで1億円以上のお金が必要になります。おそるべしWeb広告収入。それよりもさらに影響力を持っているのがgoogleのアドセンス広告収入です。ネット業界トップの企業は本当にすごいとしかいいようがありません。

前回 Ajaxサンプル集を作ったときの内容を少し発展させjQueryを用いてRSSリーダーを作成しました。

作成したRSSリーダーでは、

• RSSのURL登録（クッキー使用）
• RSSのリストを折りたたんで表示
• RSSのリストをドラッグ可能
• 選択したリストを最前面に表示
• リストのカラム数を変更

など色々な処理ができるようになっています。

今回はPHPでRSSの処理を行い、ユーザーインターフェイス上の処理をjavaScriptで行うなど色々な技術を使って作成しました。色々と初めて行う処理が多かったのですが、非常に勉強になりました。

ｊQuery RSSリーダーを見る

RSSリーダーを作成したきっかけ

このRSSリーダーを作成したのは、効率のいい情報収集ができないかと考えたのがきっかけです。いくつものサイトを横断することなく一度に多くの情報を見ることができれば時間収集の時間も短縮されると思い作成しました。

このRSSリーダーは一度に多くの情報を表示することを一番の主眼として作成しています。そのため文字サイズや文字間隔はかなり小さく設定しています。

ぱっと見た感じではWebページだとは思えないようなデザインなので（Excelに似ている！？）、仕事中に見ていてもきっと目立ちません。visitedサイトは黄色のマーカーっぽくしてどこを見たかを分かりやすく表示したつもりです。

今回はじめてWebアプリケーションらしいものを作成したのですが、それなりに使えるサイトになったのではないかと感じます。

RSSリーダーで学んだ技術

• PearのRSSでRSSデータを扱う
• PearのCache_LiteによりRSSのデータをキャッシュで保持する（1時間）
• 保持していたキャッシュを使用する
• クッキーにRSSを保存する（PHP, Javascript両方から実施）
• 保存されているクッキーを使用する
• リストの折りたたみ処理
• z-indexによるリストの表示順（前面に移動）の処理
• CSS全般（U/Iを実現するための設定色々）

全体的にWeb上でU/Iの向上を実現するための処理が多いですね。ユーザーの使い勝手向上はどんな分野でも使える技術なので、今後も色々と学んでいきたいと思います。

ｊQuery RSSリーダーを見る

追記（2008.04.21）

ニコニコ動画にはRSSがないかとおもっていましたが、URLの後に”?rss=feed”のようにRSS用のqueryキーを入れればRSSが取れるようです。

例）総合ランキングの場合

http://www.nicovideo.jp/ranking/mylist/daily/all?rss=feed

RSSリーダーでニコニコ動画の一覧を作っても面白いと思います。 

＜参考＞

• Pear RSS導入
• Pear Cache_Lite導入（Holiday Programing Guide）
• Pear Cache_Lite導入（PHPプロ）
• jQuery リストの折りたたみ
• jQuery クッキー用ライブラリ
• Yahoo ニュースRSS
• はてなブックマーク
• unnecessary words

WordPressはPHPで作成されているのでコードを読んでいけばどのファイルで何をしているかがわかります。また、ブログ管理ツール内で大抵のことができるので、デザインの修正などもブラウザ上でほとんど処理することができます。

変更した内容は、

• デザインテンプレートを変更
• 「続きを読む」の表記を変更
• サイドバーの表示内容を変更
• フォントサイズを変更

などほとんど簡単なものばかりですが、CSSの構成やPHPを勉強するのにもWordPressは役立ちます。

デザインテンプレートのサイトに行くとデザインテンプレートが豊富にあり、しかも非常によくできています。設定も簡単でダウンロードしてきてcontentのthemesというフォルダに保存すれば管理画面上ですぐにデザインを変更することができます。

ただし英語のテンプレートを使用すると、日本語での表示には合わないものもあるのでカスタマイズは多少必要になると思います。

Aptanaでコーディング

AptanaはWeb開発用のIDEです。Aptanta Studioと呼ばれる単独のIDEとEcripseのプラグインの2種類が提供されています。今回はAptanaStudioをインストールして使ってみました。

Aptanaには無料版と有料版があります。無料版といえども機能は非常に豊富でHTMLやCSS, javascriptの色分け、入力アシスト、エラー部の自動表示などの機能が用意されています。

またプラグインとして、

• PHP
• Ruby on Rails
• Adobe AIR
• Apple iPhone Development

などの開発環境もインストールすることができます。 

Aptanaを利用することによる一番のメリットは、なんといってもエラー自動検出機能です。javascriptの構文チェックなどを記述している最中に自動で検出してくれるので、入力ミスがほぼなくなります。

Firebugによるデバッグ

Firefoxにはアドオン機能としてFirebugと呼ばれるデバッグ機能があります。Firebugを使うとjavascriptにブレークポイントを置いてステップ実行したり、変数の中身を確認することができます。

また、HTMLやCSSの構成を見たり、直接編集することもできます。

AptanaとFirebugで開発効率アップ

今回、初めてjavascriptでプログラムを作成しました。迷路プログラムは最初テキストエディタで作成していたのですが、コードの入力ミスなどがあるとプログラムが動かず、エラー部を探すのが大変で非常に不便でした。

元のプログラムがVBだったのでコード変換もすぐにできるかと思っていたのですが、ちょっとした記述ミス(returnがReturnになっているなど）でプログラムが動かなくなるのでエラー自動検出機能は非常に重宝します。

今までAptanaやFirebugなどのツールを知らなかったのですが、一度この機能を使ってしまうと手放せなくなるほど貴重なツールといえます。

それにしても、javascriptの機能はすごいです。AptanaやFirebugなどの開発ツールとjQueryなどのjavascriptのライブラリが普及してきたこともあって、非常に開発は簡単になってきていると感じます。

サーバーサイドで動くjavascriptについても徐々に話が出ているようなので、javascriptは今後ますます需要が高まってくるかもしれません。 

＜参考＞

• AptanaStduio ダウンロード
• Aptana説明(@IT)
• FirebugとAptana(@IT)
• サーバーサイドJavaScript Aptana Jaxer紹介(Gihyo.jp) 

前回VBで作成した迷路プログラムをjavascriptで作成してみました。

１マスごとの四角をDIVタグで定義し、それぞれのDIVタグを絶対座標で表示することで迷路を表示しています。

作成したDIVタグの背景色を変更していくことで迷路の作成＆探索過程をアニメーションとして表現しています。

迷路のサイズを大きくするとかなり処理が重くなりますのでjavascriptを実行する際はサイズに注意するようお願いします。

• 迷路プログラム（javascript版）
• 迷路プログラム 関数一覧