HTML5 を使ったシンプルな 2 D ゲームの作り方(スプライトを使った画像の切り替え)

前回に引き続き HTML5 を使用したシンプルな 2D ゲームの作り方の第 9  回めをお送りします。 どんなゲームを作るのかは 1 回目の記事の中に実際に動作するゲームが埋め込んであるのでぜひ遊んでみてください。なお、開発に必要な画像データは 2 回目の記事からダウンロードできますので、実際にゲーム開発を体験したい方はそちらから入手してください。 HTML5 を使ったシンプルな 2 D ゲームの作り方(序) HTML5 を使ったシンプルな 2 D ゲームの作り方(準備編) HTML5 を使ったシンプルな 2 D ゲームの作り方 (画像のロード) HTML5 を使ったシンプルな 2 D ゲームの作り方 (アニメーションの実装) HTML5 を使ったシンプルな 2 D ゲームの作り方 (矢印キーとタッチによる制御の実装) HTML5 を使ったシンプルな 2 D ゲームの作り方 (当たり判定の実装) HTML5 を使ったシンプルな 2 D ゲームの作り方 (複数のSpriteの生成) HTML5 を使ったシンプルな 2…

0

[実用HTML5API]マニフェストファイルを使用したキャッシュ(Application Cache)

前回の投稿でローカルストレージに画像ファイルを保存してキャッシュするという、いささか珍妙な方法を紹介しましたが、やはり HTML5 のキャッシュといえば Application Cache だろうということで、こちらの方法も紹介しておきます。(と、いうか普通はこっちが先ですね) ただし、この方法、残念なことに Internet Explorer 9 では動作しませんので、この機能を試すには Internet Explorer 10 の最新の DP か、その他のモダン Web ブラウザーをお使いいただければと思います。   Application Cache の使い方 Web コンテンツで Application Cache を利用するには、マニフェストファイルというものを用意し、キャッシュしたいファイルを列挙して記述します。 例えば以下のような、拡張子 appcache (※) というファイルを用意して、キャッシュさせたいファイルを記述します。 ファイル : myPage.appcache CACHE MANIFEST js/myPage.js css/myPage.css nextPage.htm img/one.png img/two.png img/three.png img/four.png img/five.png (※) アプリケーションキャッシュで使われるマニフェストファイルの推奨拡張子は、以前は .manifest でしたが現在は .appcache へと変更されています少し前のドキュメントでは .manifest ファイルが指定されていますが、内容的に異なる点はとくにありません。 キャッシュさせたいファイルは、より明示的に CACHE:…

0

ライブコーディングを補助するためのツール

早いもので、もう 2011 年も終わりですね。 年末年始になると新年会や忘年会、クリスマス・パーティーというように、何かと集まりごとが増え、おのずとライブ・コーディングを披露する機会も多くなってくると思います。 マイクロソフトでは、Visual Studio や Expression Web といった、HTML と JavaScript、およびCSS に対し強力な入力支援機能を持った製品をリリースしておりますので、それらを使用してライブ・コーディングを行うぶんにはそれほど苦労することはないでしょう。 しかし、現在の WebMatrix(※) や、テキストエディターでコーディングを行おうとすると、自力でコードをタイプしていく必要があります。 (※) WebMatrix 2 からは HTML5, CSS, JavaScritp に入力支援機能(インテリセンス)が提供されます。 タイプのスピードが猛烈に早く、技芸と呼べるほどの速度でコードを記述することができるのであれば、観客を退屈させずに済むでしょうが、そういった芸当は誰にでもできるというわけではありません。 また、そういたタイプの達人といえども SVG や Canvas で使用する数値データを、ミスすることなく短時間で記述していくことはほぼ不可能といってよいでしょう。 そういった問題にある程度の解決策を提供すべく、簡単な入力支援用のツールを作成しましたのでシェアさせていただきます。 ちなみに、このツールは、先日「HTML5 プログラミング生放送勉強会 第11回@大阪」に登壇させていただく際、デモで使用する MebNatrix2 のコードスニペット プラグインが、β 段階のためか、動作しなくなってしまい、同様の機能を持ったツールを、大阪行きの新幹線の中で作成したものに設定機能を追加したものです。 名前は特にありませんが、ここで「スニペットツール」という表記を使用してアプリケーションの機能説明を行いたいと思います。   スニペットツールについて スニペットツールは、アプリケーションのメニューを介して、あらかじめ用意しておいたテキストファイルの内容をクリップボードにコピー、または、任意のアプリケーションのエディター画面に貼り付けを行うものです。 スニペットツールが Window ハンドルを取得することのできるアプリケーションであれば、アプリケーションに対し貼り付けを行うことができます。 Windows ハンドルが取得できない場合は、クリップボードにデータを送ったままにしますので、アプリケーション側で貼り付けを行うことができます。   ダウンロードは以下から行ってください。   実行ファイルと設定ファイルのみ ソースコード (※) Windows 7…

2

Web フォントとハートブレイク・カフェ

前回のブログ記事でお伝えしたとおり、セッションで使用するデモ用に、HTML5 + CSS3 を使った架空の喫茶店のページを作成しております。 その喫茶店の名は「ハートブレイク・カフェ」。 店のコンセプトは、「傷ついた街の天使が羽根を休める….、ということはどうでも良くて、前回の記事から、このサンプルに使用している ”いまどきの” Web 技術について紹介しております。 今日は Web フォントについて書きたいと思います。 「ハートブレイク・カフェ」のロゴは、画像ではなく  Web フォントの 「Lobster」 というフォントを指定して表示しています。 ちなみにこの「Lobster」というフォントは Windows には標準で含まれていませんが、Web フォントをサポートしている Web ブラウザーでアクセスすると、Windows はもちろん、Mac でも Linux でも「Lobster」 フォントが正しく表示されます。(※ コーヒーカップの絵は画像ですよ。)   Web フォントとは Web フォントは、クライアントにインストールされていないフォントであっても、Web からフォント提供することで、指定通りの字体の表示を行わせる技術で、CSS3 でサポートされています。(※) フォントというと、ほとんどの場合機種依存であり、異なるプラットフォームで同じ文字を表示をさせるには、形状が似たフォントを指定するなどの工夫が必要でしたが、 Web フォントを使用すると、こういった面倒はありません。 (※) 実は、Web フォントは CSS3 以前から存在しており、以前より CSS の @font-face から使用することができました。機能自体の実装もけっこう早くて、Internet Explorer では 4 の時代からサポートしていました。Web フォントの指定は CSS2.1 で廃止されていましたが、後方互換のためか多くの…

0

SQL Server のサンプル DB AdventureWorks 2008R2 SR1にデータベース AdventureWorks2008R2 が入っていない件

現在、PHP コードから SQL Server のレポート機能を使用するという記事を書いています。 CodePlex に SQL Server Reporting Services (SSRS) SDK for PHP なるものが用意されていてこれを使用します。 SQL Server Reporting Services (SSRS) SDK for PHP http://ssrsphp.codeplex.com/ さて、本日、パッケージの中に用意されているチュートリアルを使用してサンプルを作って動作確認しようと思ったのですが、内部のクエリーが使用している “AdventureWorks2008R2 というデータベースがみつからない” 旨のエラーが出て動作しませんでした。 サンプルデータベースは、CodePlex の Microsoft SQL Server Community Projects & Samples から落としてきた最新の AdventureWorks 2008R2 SR1 を使用しており、同ページのインストールされるデータベースの一覧にも “AdventureWorks2008R2” が記載されているので問題はないはずです。 Microsoft SQL Server Community Projects & Samples http://msftdbprodsamples.codeplex.com/ しかし、SQL Server…

0

“IIS 7 版 mod_info 的なもの” を jQuery Templatesで使う

先週、マイクロソフトが .NET jQuery Extensions として開発を進めてきた機能が公式な jQuery のプラグインとして公開されました。 これについて詳しい説明は、同僚の井上( 章 )  のブログで見ていただくとして、このプラグインの中に jQuery Template というものがあります。 これは JavaScript オブジェクトに、HTML ドキュメントの <script> タグ内であらかじめ HTML で定義しておいた UI ( テンプレート ) を適用して描画してくれるという、いわゆるクライアントレンダリングの機能です。 これについての詳しい説明も、同僚の井上( 章 )  のブログで見ていただくとして (オイ)、このブログでは、以前の記事で紹介した “IIS 7 版 mod_info 的なものをサービスとして使用するツール” から JSON でデータを取り出し、描画するサンプルを紹介します。 と、言っても、実際の HTML を記述すると長くなってしまうので、以下の SkyDrive からダウンロードしていただくことになるのですが。 じつは、 この記事で紹介している XSL を使用したページの描画は、InternetExplorer ではうまく行えませんでした。 しかし、今回の jQuery Templates を使用したページは、他のブラウザでも正しく描画されます。( いまさらなんですが汗…

0

IIS 7 版 mod_info、mod_status 的なもの

最近、イベントの登壇やらドキュメントの作成やらで、とんとコードを書く機会が無かったのですが、久々にひとつ書くことができました。 今回作成したのは Apache における mod_info や mod_status のようなものです。 作成に至った経緯はほかでもありません。 現在、IIS の師匠、奥主さんと二人で 『インターネット Web サーバー構築ガイドライン (ドラフト版) 』 というのを書いているのですが、その作業中に、奥主さんより、“Apache には動作状況を Web ブラウザから確認できる mod_info や mod_status というのがあるんだけと、IIS にはないみたいだから作って” と依頼されたためです。 そう、IIS7 では “ないものは作ってしまえ” ということが可能なのです。 というわけで、作成することになったのですが、いまさら Apache と同じものを作ってもあんまりクールじゃないなぁってことで、”IIS  における、IIS ユーザーのための、IIS による状態報告ツール” といういうことで IIS の構造に合わせて作成してみました。 また、情報の出力形式についても、人間だけでなく、アプリケーションからも使用できるようにしようということで、コンテンツの出力正式に複数のフォーマットをサポートするようにしました。 具体的には以下のような機能を持っています。   各 IIS オブジェクトのリソース状況のブラウザ表示 IIS 7 の構造に合わせ、”サーバー本体”、”Web サイト”、”アプリケーションプール”、”ワーカープロセス” に分かれて現在の状態が表示されます。またページ内のリンクをクリックすることで、目的のオブジェクトのさらに詳細な情報にアクセスすることができるようになっています。 図 : IIS リソース情報画面 たとえば、ワーカープロセスのページでは、現在処理を行っているリクエストの簡単な内容なども確認することができます。…

1

IIS7 Web フォーム認証を使用したアクセス権の設定

IIS 7 では、ASP.NET Web フォーム認証が Web サイトの標準的な認証方式して使用できるようになっています。 Web フォーム認証が提供しているのは、一見、ログイン際の認証/承認の機能だけのように見えますが、実は下位ディレクトリ各々に対する “アクセス制御” の機能も提供しています。 “アクセス制御” の機能を使用すると、ログインが完了したユーザーアカウントの中から、さらに”見せたい人にだけ見せる” ということが可能になります。 この機能はさまざまなことに利用できます。 たとえば、管理者専用のディレクトリを用意して管理用ページを配置したり、会社で使用するのであれば、部署ごとにディレクトリを用意して、セキュアなグループ専用ページを配置したり、コンシューマー向けのサービスであれば、プレミアム会員向けのディレクトリを用意して、お宝コンテンツを配置したり、といったことが可能です。 この”アクセス制御” は、.NET ユーザーアカウントごとの個別設定も可能ですが、”役割″ (ASP.NET では “ロール” と表される) というセキュリティグループ的なものを利用して、複数のユーザーアカウントをグループ単位でまとめて管理するといったことも可能です。 今回はこの “アクセス制御” の設定方法をご紹介します。   ユーザーアカウントへのアクセス制御 Web フォーム認証が正常に動作している Web サイトにおいては、[承認規則] の設定のみで、ユーザーアカウントごとのアクセスのアクセスの制御を行うことができます。 設定手順は以下のとおりです。 IIS 管理ツールを起動 IIS 管理ツール画面左のツリービューを展開し、Web フォーム認証が適用されているサイトの内の、目的のディレクトリを選択 画面中央の[機能ビュー] から[承認規則] アイコンをダブルクリックして[承認規則] の設定画面を表示 [承認規則]のリストで、”すべてのユーザー” に対する “許可” の設定を選択し、画面右の [操作] パネルの [削除] リンクをクリックして削除 [操作] パネルの [許可規則の追加] リンクをクリック [許可の承認規則の追加]…

0

IIS7 ".NET ユーザー" アカウントをブラウザから作成するには?

既に多くの方がご存じのとおり、IIS7 では ASP.NET Web フォーム認証が、Web サイトの標準的な認証方式として使用することが可能となっています。 当然、Web フォーム認証で使用する .NET ユーザー アカウントも IIS7 の管理ツールで作成可能です。 この .NET アカウントの作成には、アカウントを使用しているユーザーがパスワードを失念してしまった場合に自らパスワードのリセットを行うための "質問" と "回答" を設定する必要があります。 しかし、通常の場合、IIS 管理ツールを使用してこの作業を行うのは Web サイトの管理者です。 つまり、この状況では、先日の記事で書いたように、Web 管理者は、アカウントを払い出す各々のユーザーの "お母さんの旧姓" とか、"最初のペットの名前" などを把握している必要があるのです。 もしかしたら私の見識が狭いだけなのかもしれませんが、すべての Web サーバー管理者が、各ユーザーに対し、"ねぇ、キミが最初に飼ったペットの名前を教えてくれるかな? ちなみにうちは団地だったからペットは飼ったことがないんだよね、テヘっ" なんてフレンドリーに訊ける状況というのはなかなかないような気がします。 とくに "お母さんの旧姓" なんてのは、訊く人によってはシリアスな問題をはらんでいそうなので、通常業務にスリルを持ち込みたいという向こう見ずな冒険心でも抱かないかぎりはなかなか気が進まないところです。 では、"質問" と "回答" は、管理者が用意したものを使用し、忘れん坊のユーザーがパスワードを失念した際には、リセット作業を行えば良い、という意見もあるでしょう。 一見これは優れたアイディアに見えますが、数々のアカウント作成、パスワードのリセット作業を繰り返していくなかで、管理者はやがてこう思うことでしょう。 いったい誰のための "質問" と "回答" なんだよ? と。 また、.NET ユーザー アカウントは、Web サイト / アプリケーション ごとに独立して作成されているので、それらすべてに対してのアカウント作成からバスワードのリセットまでの作業を担うというのは、管理者にしてみればなかなか笑顔ではいられない状況です。…

0

IIS7 ".NET ユーザー" によるパスワードのリセット

前回の記事で IIS7 の Web フォーム認証で使用する ".NET ユーザー アカウントのパスワードの変更方法" について書きましたが、今回はパスワードのリセット方法について書きたいと思います。 ところで自らパスワードをリセットしなければならないシチュエーションとはいつでしょう? 多くの場合は、パスワードを忘れてしまった場合です。 人は忘却の生き物です。日々、さまざまなことを忘れていきます。 若いころの情熱や夢、かつて強く信じていた大切なもの、連れ合いの誕生日や記念日、そしてなによりも大事なパスワードさえも、いつのまにか気持ちよく忘れてしまうものなのです。 パスワードを忘れてしまったばあい、多くは管理者にパスワードのリセットを依頼する必要があります。 つまりは、他人の余計な仕事を増やしたうえに、リセット作業が完了するまで自らの人生の貴重な時間を無駄に過ごすことになりがちなのです。 IIS7 がサポートする .NET のメンバシップには、パスワードの失念に因るこういった多大なる損失を回避するための機能が備えられています。 それが .NET ユーザーのための、.NET ユーザーの手による、.NET ユーザーのパスワードリセット機能なのです。 この機能は、".NET ユーザー" アカウント作成の際に設定した "質問" に、おなじく設定した "回答" を入力することで、パスワードを新しいパスワードで上書きし、さらには、その新しいパスワードをアカウント作成時設定したメールアドレスに送ってくれるという、なんとも親切心にあふれた機能なのです。 (と、ここまで書いていて、前回の記事で書いた "前出のメッセージボックスに表示されているメッセージの内容に対する以下の "謎" が、たちどころに氷解" というのは、この機能のことだと気が付いたしだい) この機能の実装も、パスワードの変更機能と同じく、ノンコーディングで実装できます。 具体的な手順は以下の通りです。 .NET ユーザーのリセットページの作成 ================================ テキストエディタに以下のタグを貼り付け、PasswordRecovery.aspx と名前を付けて保存し、Web フォーム認証が設定されている IIS7 の Web サイト/仮想ディレクトリに配置します。 <html> <head runat="server">     <title></title> </head> <body>…

0