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 ゲームの作り方 (画像のロード) 今回の記事では、前回の記事で 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

Facebook や Twitter で紹介した、開発に役に立ちそうなリンク集(2015年 1 月~3月編)

Facebook や Twitter(@osamum_MS) でシェアした開発に役立ちそうなリンクなどを毎月紹介する予定だったのですが、業務との兼ね合いなどから前回のまとめから 3 ヵ月も経ってしまいました。 昨今は、数年前とは比較にならないくらいに技術の刷新が早く、接する情報も増えておりますので私自身の忘備録も兼ねております。 皆様のお役に立てれば幸いでございます。   Web 制作全版 ウェブ・コンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0   最近、「アクセシビリティ」という言葉をちらほら眼にするようになったので、こういうものがあるということだけでも覚えておくといいかも。 History of the user-agent string   ほうほう、これはまた資料性がありそう。 今どきの Web サイト制作が楽になる! すごい無料 HTML テンプレート素材 25 個まとめ   JavaScript のフレームワークとか CSS のフレームワークがアツいけど HTML のテンプレートってあんまり聞かないけどどうなんだろう? いま Web サイトを作るときにおさえておきたい10のこと(2015年版)   いままで internet Explorer 向けに Web を作ってたのに突然 Web 標準とかクロスブラウザとか言われても困る、そんな人たちのために心を込めて書きました。溢れるテキストと愛を君に。 Web制作者はチェックしておきたい、 面白いアイデアを使った最近のWebサイトのまとめ -2015年2月   アイディアだけでも参考になりますね。それにしてもコスリさんって毎度おもしろいネタ見つけてくるよなー。すごいなー。…

0

いま Web サイトを作るときにおさえておきたい10のこと(2015年版)

Internet Explorer は、バージョン 9 から Web 標準準拠へと舵を向けました。 Internet Explorer 9、Internet Explorer 10 と、2 つのバージョンを経て、最新の Internet Explorer では、他のモダンブラウザと比較しても顕色のない Web 標準ブラウザーとなっています。 そのため、それまでの長い間 Internet Explorer で Web システムを作成してきた企業のお客様にも、これから Web システム作成される際には、 Web 標準に準拠するようにお願いするわけですが、多くのお客様から「それってどうやんの?」というご質問をいただきます。 W3C と ECMA の仕様に合致したマークアップとコードを書くだけであれば、バリデーションツールを使って検証しながらそれらを記述していけば良いのですが、ご存じのとおりそれだけでは実際の使用に耐えるものはまず出来上りません。 上記の点を鑑み、今回は、Web 標準に準拠し、かつ複数のモダンブラウザと互換が取れ、モバイルデバイスにも対応した Web ページをどのように作成していくか、最低限おさえておきたい件について 10 のポイントにまとめてみました。 「はじめて作る人にもわかるように」ということで、なかり初歩的で当たり前なものも含めているので、本職の人は おさらいと思ってご覧いただければと思います。   そのまえに : クロスブラウザー、スマートフォン対応の Web サイトを、低コストでもっとも簡単に実現する方法   Web 標準準拠はともかくとして、各 Web ブラウザーとの互換がとれ、スマートフォンにも対応した Web サイトを手っ取り早く作るには CMS…

1

初心者歓迎! Visual Studio 2013 によるフロントエンド Web 開発チュートリアル

「Visual Studio での Web 開発 は ASP.NET の開発を意味しておりフロントエンド Web の開発はできない」、―と、思われがちですが、そんなことはありません。完全にクライアントサイドに閉じたフロントエンド Web の開発を Visual Studio を使用して行うことができます。 今回は、Visual Studio 2013 を使用して、どのようにフロントエンド Web の開発を開始するかについて紹介します。   Visual Studio 2013 とは? Visual Studio はマイクロソフトの提供する開発製品スイートです。スイートとは、複数の製品をまとめたものであり、Visual Studio は Visual C++、C#、VB.NET、Visual Web Developer、その他で構成されています。わかりやすくいうと、開発製品版のマイクロソフト Office のようなものです。 Visual Studio は、Windows プラットフォーム用のプログラムであればデスクトップ用はもちろん、ハードウェアと密接な関係するデバイスドライバーや、POS や、カーナビゲーションシステムといった、組込み用 Windows 上で動作するアプリケーションから Web ブラウザーで動作する Web アプリケーションまで開発することができます。Visual Studio 2013 Update 2 からは、Android、iOS の用のアプリも開発ができるようになっています。 Visual…

0

Visual Studio 2013 に同梱されている Windows シミュレーターを直接起動する方法

Visual Studio 2013 をインストールすると Windows ストア アプリの動作を検証するための Windows シミュレーターがインストールされます。 (Visual Studio 2013 に同梱されている Windows シミュレーター) Windows シミュレーターは、使用している Windows をプログラム中でシミュレートしてくれるので、Windows ストア アプリの検証だけでなく、Web ページの表示の検証や、タッチイベント動作検証にも使用することができます。 しかし、ちょっとシミュレーターで Web サイトを見てみたいといった際に、いちいち Visual Sudio IDE を起動して、なんらかのプロジェクトを作成するか開くかしてシミュレーターで実行、などとしていては、なかなか面倒です。残念ながら Windows シミュレーターを直接起動するためのメニューやショートカットは用意されていませんので、この記事では Windows シミュレーターを直接起動するためのショートカットを作成する方法にについて紹介します。   Windows シミュレーターの場所 Windows シミュレーターは、Visual Studio 2013 の場合は、以下のパスになります。 "C:\Program Files (x86)\Common Files\Microsoft Shared\Windows Simulator\12.0\Microsoft.Windows.Simulator.exe"   ショートカットの作成 Windows シミュレーターのショートカットの作成はいくつかの方法でできますが、マウスの右ボタンクリック時に表示されるコンテキストメニューを使用した方法を紹介します。 具体的な手順は以下のとおりです。 以下のフォルダを開きます。 C:\Program Files…

0

Facebook や Twitter で紹介した、開発に役に立ちそうなリンク集(2014年 12 月編)

Facebook や Twitter(@osamum_MS) でシェアした開発に役立ちそうなリンクなどを毎月紹介します。 昨今は、数年前とは比較にならないくらいに技術の刷新が早く、接する情報も増えておりますので私自身の忘備録も兼ねております。 皆様のお役に立てれば幸いでございます。   Internet Explorer 関連 Announcing the redesigned F12 developer tools interface http://blogs.msdn.com/b/ie/archive/2014/12/09/announcing-the-redesigned-f12-developer-tools-interface.aspx 先日のアップデートで更新された Internet Explorer F12 開発者ツールの変更点、本家IEブログに記事が載ってマス。   JavaScript 関連 Get WinJS http://try.buildwinjs.com/?utm_content=bufferb4bbc&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer#get WinJS が NuGet から入手できるようになりましたよ。 AngularJSTodo Sample for Tools for Apache Cordova https://code.msdn.microsoft.com/AngularJS-TODO-Sample-for-b651512a/ WinJSTodo Sample for Tools for Apache Cordova https://code.msdn.microsoft.com/WinJS-TODO-Sample-for-17295485 BackboneJSTodo Sample for Tools for Apache…

0

Web 製作者のための Visual Studio Community 2013 インストールガイド

先月 (2014 年 11 月) 行われたマイクロソフトの開発者向けイベント Connect(); で発表があったとおり、有償製品である Visual Studio Professional と同等の機能をもった無償(※)の Visual Studio Community 2013 が即日公開されました。 (※)企業での使用は制限付きとなります。詳しくは以下のページの「Visual Studio Community FAQ」の項をご参照ください。 http://www.microsoft.com/ja-jp/dev/products/community.aspx 開発製品スイートである Visual Studio は、サーバーサイドを含めた強力な Web 開発の機能を持っており、それら機能を提供するツールは、純粋な Web のフロントエンド開発にも利用することができます。 今回の記事では、Visual Studio Community 2013 の入手とインストール方法、Web 製作の役に立つプラグインについて紹介します。 Visual Studio Community は、以前からある Express とは異なり、さまざまな制限が解除されているため HTML + JavaScript を使用する開発者の可能性を Web ブラウザーの外へと押し広げてくれることでしょう。   これまでの無償版 Express との違い Visual Studio の無償のエディションとしては、以前から…

1

Facebook や Twitter で紹介した、開発に役に立ちそうなリンク集(2014年 10~11月編)

Facebook や Twitter(@osamum_MS) でシェアした開発に役立ちそうなリンクなどを、せっかくだかに毎月まとめていこう、と思ったものの、暇がなくて二か月まとめての投稿です。 前回作ってみたら、個人的には意外なほど役に立ちました。昨今は覚えきれないほどの情報に接しているので、こういうの作っておくといいかもしれません。 リンク先はさまざまにサイトにわたるので、時間の経過とともにリンク切れになるかもしれませんが、何卒ご了承くださいませ。   Internet Explorer 関連 Internet Explorer and the Windows 10 Technical Preview http://blogs.msdn.com/b/ie/archive/2014/10/01/internet-explorer-and-the-windows-10-technical-preview.aspx Windows10 Technical PreviewにおけるInternetExporerの記事が投稿されておりますよ。 バージョン別セキュリティ既定値一覧表 http://msdn.microsoft.com/ja-jp/ie/cc844005#tbl2_ie9ie10 InternetExplorer のバージョン別セキュリティ既定値一覧表。 社内システムが利用しているIEをバージョンアップした場合、強化されたセキュリティ設定によって使用できていた機能が動かなくことがあるので、これを見て確認。 Dev Feedback on Windows Platform Development https://wpdev.uservoice.com/forums/257854-internet-explorer-platform Internet Explorer 専用の Feedback ページができましたよ。 「こんな機能つけてよ~」っていう要望も可。 Web 開発者の皆様からの建設的なご意見をお待ちしております Enterprise Site Discovery Toolkit for IE11 を発表 http://blogs.msdn.com/b/ie_ja/archive/2014/10/29/announcing-the-enterprise-site-discovery-toolkit-for-ie11.aspx IEブログ(本家)にInternetExplorer11の新しい機能が発表されてる! Making it easier for…

0