ゼロからはじめる Microsoft Edge 用の拡張の作り方

8 月に公開される Windows 10 Anniversary Update に搭載されている Edge では拡張 (エクステンション) がサポートされています。 この機能はすでに Windows 10 Insider Preview の最新のビルドに搭載されている Edge でもお試しいただくことができます。 Windows 10 Anniversary Update 公開に先立ち、今回から 2 回に別けて、Windows 10 Insider Preview の Build 14379 を使用した Edge の拡張の作成方法について紹介します。 その前に Edge の拡張について簡単に紹介しておきましょう。 Microsoft Edge の拡張 Edge の拡張の目的は、機能名のとおり開発者によって 「Edge の機能を拡張」 = 「できないことをできるようにする」 ことです。 同様の目的を達成するための機能として、Internet Explorer 時代は ActiveX や Flash といったプラグインが使用されてきました。 これらネイティブコードによるプラグインは…

2

HTML5 を使ったシンプルな 2 D ゲームの作り方(効果音を鳴らす)

このシリーズまだやってたの!?、と声が聞こえてきそうなくらい前回から間が空いてしまいましたが約半年ぶりに HTML5 を使用したシンプルな 2D ゲームの作り方の第 10  回めをお送りします。 どんなゲームを作るのかは 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

2016 年 1 月 12 日でサポート終了となるバージョンの Internet Explorer でアクセスすると、その旨をひかえめに教えてくれるバーを表示するスクリプト

昨年の 8 月にアナウンスされ、すでに多くの方がご存じのとおり、来年 (2016) の 1 月 12 日からは、Internet Explorer のサポートポリシーが変更され、その Windows で動作する最も高いバージョンの Internet Explorer しかサポートされなくなります。 (※タイトルのサポート終了日付が間違っておりましたので修正しました。どうもすみません) 具体的には以下の組み合わせのものだけがサポートされるようになります。 Windows Internet Explorer 延長サポート終了 Windows Vista SP2 Internet Explorer 9 2017年 4 月 11 日 Windows Server 2008 SP2 Windows 7 SP1 Internet Explorer 11 2020年 1 月 14 日 Windows Server 2008 R2 SP1 Windows Server…

2

Web コンテンツを開発するための Node.js 簡易 Web サーバー

de:code 2015 にご参加された皆様、ありがとうございました。ご参加されなかった皆様も、そのうちスライドや動画が公開されると思いますので、ぜひご覧ください。 de:code が終わって、前回の記事の続きで「HTML5 を使ったシンプルな 2 D ゲームの作り方(複数インスタンスの生成)」を書こう、と思ったのですが、このシリーズを書いている間に build 2015 があり、その中で、Windows はもちろん、Mac、Linux 環境でも使用できるコーディングツール Visual Studio Code が発表されました。 そして、そのタイミングで公開された Visual Studio 日本チームブログの記事では、このブログの「「HTML5 を使ったシンプルな 2 D ゲーム…」の記事を紹介してくれているのですが、紹介文にはこう書いてありました。 「(Visual Studio 2013 Community / Visual Studio Code で解説していますが、Visual Studio 2015 でも大丈夫です )」 「(Visual Studio 2013 Community /Visual Studio Code で解説していますが、Visual Studio 2015 でも大丈夫です )」 (え、そうなの!?) ….すみません。Visual Studio Code…

0

HTML5 を使ったシンプルな 2 D ゲームの作り方 (当たり判定の実装)

去年末に出演した schoo (スクー) さんの授業で使用したサンプルアプリをもとにした、HTML5 を使ったシンプルな 2 D ゲームの作り方を紹介しています。 どんなゲームを作るのかは 1 回目の記事の中に実際に動作するゲームが埋め込んであるのでぜひ遊んでみてください。なお、開発に必要な画像データは 2 回目の記事からダウンロードできますので、実際にゲーム開発を体験したい方はそちらから入手してください。 HTML5 を使ったシンプルな 2 D ゲームの作り方(序) HTML5 を使ったシンプルな 2 D ゲームの作り方(準備編) HTML5 を使ったシンプルな 2 D ゲームの作り方 (画像のロード) HTML5 を使ったシンプルな 2 D ゲームの作り方 (アニメーションの実装) HTML5 を使ったシンプルな 2 D ゲームの作り方 (矢印キーとタッチによる制御の実装) 前回の記事では雪だるまをキーボードの矢印 (カーソル) キーで操作する機能を実装しました。 今回の記事では、降ってきた雪の結晶と雪だるまが当たったかどうか判断する処理を実装します。 当たり判定 「当たり判定」とは、文字どおりゲームにおいてキャラクター同士が衝突したかどうかを判断するもので、シューティングゲームのような、ユーザーがゲーム内のキャラクターを操作するタイプのゲームでは不可欠なものです。 当たり判定の方法はいろいろあり、形状が複雑なものに対し厳密に行おうとすると非常に大変です。また、実際のそこまでは必要がないということもあります。例えば、以下の図のアミカケの部分は、当たり判定をする単純な 3 つのパターンを示してしますが、X と Y の値で判断できる 1 や…

0

HTML5 を使ったシンプルな 2 D ゲームの作り方 (矢印キーとタッチによる制御の実装)

去年末に出演した schoo (スクー) さんの授業で使用したサンプルアプリをもとにした、HTML5 を使ったシンプルな 2 D ゲームの作り方を紹介しています。 どんなゲームを作るのかは 1 回目の記事の中に実際に動作するゲームが埋め込んであるのでぜひ遊んでみてください。なお、開発に必要な画像データは 2 回目の記事からダウンロードできまるので、実際にゲーム開発を体験したい方はそちらから入手してください。 HTML5 を使ったシンプルな 2 D ゲームの作り方(序) HTML5 を使ったシンプルな 2 D ゲームの作り方(準備編) HTML5 を使ったシンプルな 2 D ゲームの作り方 (画像のロード) HTML5 を使ったシンプルな 2 D ゲームの作り方 (アニメーションの実装) 前回の記事では Canvas に表示した画像にアニメーションを実装しましたが、今回はこれをキーボードの矢印キー (カーソルキー) と、画面のタッチでコントロールできるようにしたいと思います。具体的には雪だるまの画像を左右に動かす機能です。 なお、タッチによるコントロールは、モニターがタッチ対応のものでないと使用できませんのでご注意ください。   デバイスからのイベントの取得 キーボードや、タッチ対応の画面などからの入力を取得するには、それを受け取るためのイベントハンドラーを実装する必要があります。 キーボードのキーについてのアクションは kdown、keyup 等のイベントで、タッチは touchstart、touchend 等のイベントで取得することができるので、これらを使用してイベントハンドラーを定義していきます。   キーイベントの取得と判断 キーボードのキーを押下した際のアクションは、keydown イベントで取得することができますが、押されたキーを判断し、必要なキーのアクションを必要な処理に割り当てる必要があります。押されたキーを示すキーコードは、以下のようにイベントハンドラに渡された引数の which プロパティで取得できるので、これを使用して押されたキーの種別を判断することができます。…

0

HTML5 を使ったシンプルな 2 D ゲームの作り方 (アニメーションの実装)

去年末に出演した schoo (スクー) さんの授業で使用したサンプルアプリをもとにした、HTML5 を使ったシンプルな 2 D ゲームの作り方を紹介しています。 どんなゲームを作るのかは 1 回目の記事の中に実際に動作するゲームが埋め込んであるのでぜひ遊んでみてください。なお、開発に必要な画像データは 2 回目の記事からダウンロードできまるので、実際にゲーム開発を体験したい方はそちらから入手してください。 HTML5 を使ったシンプルな 2 D ゲームの作り方(序) HTML5 を使ったシンプルな 2 D ゲームの作り方(準備編) HTML5 を使ったシンプルな 2 D ゲームの作り方 (画像のロード) 今回の記事では、前回の記事で Canvas に表示した画像を動くようにしていきます。   Canvas のアニメーション Canvas でのアニメーションは、描画したオブジェクトのプロパティに現在位置と移動先の位置、時間あたりの移動量を指定で云々….というものではなく、もっと原始的な、わかりやすくいうとパラパラ漫画のようなものです。 描画要素をオブジェクトとして扱える SVG とは違い Canvas で描画された画像は、単なるビットマップ (絵) なので描画された要素を個別に指定することはできません。つまり、Canvas 上に UFO を描画した場合、表示の済んだ UFO をオブジェクトとして指定することはできません。たとえその UFO がアダムスキー型であろうが葉巻型であろうが、はたまたオーソドックスな円盤型であろうが、それだけを選択することはできないのです。なぜならそれは Canvas 上にビットマップで書かれた模様に過ぎないからです。 ではどのようにしてアニメーションを実現するのかというと、Canvas 全体を描画してはクリアし描き換えていくという方法で実現します。…

0

HTML5 を使ったシンプルな 2 D ゲームの作り方 (画像のロード)

2 回前の記事から、去年末に出演した schoo (スクー) さんの授業で使用したサンプルアプリをもとにした、HTML5 を使ったシンプルな 2 D ゲームの作り方を紹介しています。どんなゲームを作るのかは 1 回目の記事の中に実際に動作するゲームが埋め込んであるのでぜひ遊んでみてください。 HTML5 を使ったシンプルな 2 D ゲームの作り方(序) HTML5 を使ったシンプルな 2 D ゲームの作り方(準備編) さて、前回は Visual Studio 2013 でのプロジェクトの作成と必要なファイルの追加方法などを説明しましたが、3 回目となる今回は、いよいよ HTML タグと JavaScript コードを記述していきます。 Visual Studio でのプロジェクトの作成やファイルの追加、ゲームで使用する画像の入手が済んでいない方は、2 回目の記事の内容に従い準備を行ってください。   Canvas のタグの記述 実際のゲームを描画して動かすための Canvas タグを body 内に記述します。 Visual Studio ではコードスニペットという機能により canvas とタイプし、キーボードの [Tab] キーを押下するだけで canvas タグが追加されます。 続けて属性を追加します。以下の各属性を設定してください。 属性 値…

0

気軽に Web コンテンツを書くためのエディタ

新年あけましておめでとうございます。 昨年は、Windows 8 リリースに向けての準備に始まり、リリースを終えて一年が終るという、私にとっては本当に Windows 8 一色の一年でした。 Windows 8 は、リリースされたとはいえ、その新しい UI 上で動作する Windows ストア アプリはまだまだ少ない状況ですので、今後も引き続き、Windows ストア アプリの開発に関する情報をお届けしていく予定です。 もちろん、Windows ストア アプリだけでなく Internet Explorer 10 や、たまには IIS8 の情報も出していければ、思っておりますのでご期待ください。   さて、年が明けて第一回めの投稿となる今回のネタですが、Windows 8 には全く関係ない、自作ツールの紹介です。 実は、3 年ほど前まで、外部のブログで、数回の記事にわけてテキスト エディタを開発し、C# と Windows デスク トップアプリケーションの作り方を学ぶ、というのをやっておりました。 そのブログは最終回の直前で、私の業務内容が変わったこともあり、そのまま中断していたのですが、先日そのブログを読んでいたという方から「最終回の記事を書いてほしい」というリクエストがあり、つい一昨日、お正月明けの勢い(?)を借りて最終回の記事を投稿した次第です。 その際に、当時作成したテキストエディタのソースを引っ張りだして来て、Visual Studio 2012 でのコンバートと、細かいコードの調整を行ったのですが、使ってみるとなかなか使い勝手がよく、ちょうど手軽に Web コンテンツを書くツールも欲しかったこともあり、その記事を投稿後に本格的に自分用に機能を追加してみた次第です。 さすが、自分用に作っただけあって、使い勝手はすこぶる良いです(笑) 使い方の紹介と、ソースコードもダウンロード可能としますので、興味のある方はそのまま使うなり改造して使うなりしてみてください。 以降は、このテキスト エディタの機能の紹介になります。 メモ帳との違い テキストの編集機能は メモ帳 とまったく変わるところはありませんが、それ以外でさまざまな変換機能、入力支援機能などが追加されています。 これら機能のほとんどは、このテキストエディタのメニュー [ツール] –…

1

[IIS]画像のフォーマットとサイズを変換して返すサービス

久しぶりに IIS についての記事を書きます。 先日、上司と話しをしていたら、Windows ストア アプリを作ってくださっているパートナーさんが、「IIS には画像のフォーマットやサイズを変換してくれるサービスがないのでわざわざ別のサーバーを立てている」との話を聞きました。 .NET の Bitmap クラスを使用したことがある人であればご存知の通り、画像のフォーマットの変換もサイズの変更も Bitmap クラスを使用すれは簡単に実現することができます。 IIS は .NET Framework で動作する ASP.NET のアプリケーションサーバーの機能を持っているので、その機能を組み込むことなどはわけはありません。 それこそ、鼻をほじりながらでも可能です。 ということで、今回は、私が実際に鼻をほじりながら(少しだけですが)作った、画像を変換するサービスのサンプルを紹介します。   IIS 7.x で画像のフォーマットとサイズを変換して返すサービスを作成する 今回の画像変換サービスを作成するにあたり、仕様は以下としました。 仕様 渡された URL の画像を取得し、加工した画像をレスポンスする パラメーターは元となる画像の 「URL」 と、変換する「画像フォーマット」、変換後の「幅」と「高さ」 幅、高さいずれかのパラメーターがない場合は画像のフォーマット変換のみ行う フォーマットが指定されていない場合は処理を行わない エラーの際にはなにもレスポンスを返さない (画像は抜けた状態となる) 開発は Visual Studio 2010、もしくは 2012 で行います。 プロジェクトは、シンプルにしたいので [Web サイト] で行い、ページを返す必要はないのでジェネリックハンドラを使用します。 具体的な手順は以下の通りです。 手順 Visual Studio を起動   メニュー…

0