15パズルのアプリをGAEで作ってみた

Webアプリケーションを作るために、Google App Engineを使ってみた。手始めに、15パズルのサイトを作成してみた。

こんな画面。

ほとんど静的ファイルのみを表示しているだけなので、Webアプリと呼べるようなものではないが、「Hello World」を画面に表示するよりは、いろいろと学ぶことが多かった。
Google App Engineの公式スタートガイドに沿って、基本的なアプリケーションの作成手順の習得を試みた。

デプロイというか、ファイルのアップロードをコマンドライン

$ appcfg.py update (アプリケーションID)

で実行したら、1時間ぐらいプロンプトが返ってこなかった。ファイル総数が63で、合計ファイルサイズは400KB程度なのだが、そんなにかかるものなのか、とpsコマンドで確認したら全くコマンドが動作していないようだったので、アップロードだけは、WindowsにインストールしたGAE Launcherで行った。数秒でアップロードは完了(だけど最初は、Launcherの"Add New Application"画面で"Parent Directory"を登録するときに、アプリケーションフォルダを指定してしまい、どうやっても
Hello World!としか表示されず焦った)。
15パズルの基本動作はJavaScriptで記述した。参考文献は下の本。はじめてJavaScriptを学ぶには、とても良い本だと思う。

JavaScriptプログラミング入門 第2版
JavaScriptプログラミング入門 第2版大津 真

オーム社 2006-09-23
売り上げランキング : 189924


Amazonで詳しく見る
by G-Tools
HTMLの記述には、下記の文献を参考にした。特に、フレームの記述のところ。
標準HTML,CSS & JavaScript辞典 XHTML 対応
標準HTML,CSS & JavaScript辞典 XHTML 対応岳志納 かのう 井川 はるき

インプレスジャパン 2008-09-02
売り上げランキング : 242120


Amazonで詳しく見る
by G-Tools
最初ログイン画面を作ったのだが、少し面倒なことになってしまったので、取っ払った。フレームで表示するHTMLファイルに対して、テンプレートをどう使うかで引っかかってしまった。この点は今後の課題だな。
今後の修正ポイントとしては、

  • CSSを利用して見た目をきれいに。
  • パズルの絵を増やす。
  • 15枚のパネルをシャッフルするときのアルゴリズムの検討(ランダムに表示位置を変えるだけのシャッフルだと、解けない場合があるから)。
  • ログイン画面を導入する。

がある。