カテゴリー:HTML5

リスト表示へ

HTML5を基礎から学べる『すべての人に知っておいてほしい HTML5 & CSS3 の基本原則』を執筆しました

2012年10月22日 12:35

『すべての人に知っておいてほしい HTML5 & CSS3 の基本原則』という本を執筆させて頂きました

前回の『すべての人に知っておいてほしい スタイルシートデザインの基本原則』に引き続き、『すべての人に知っておいてほしい HTML5 & CSS3 の基本原則』という本を執筆させていただきました。(前回の記事概要はこちら

今回自分は、Chapter7の「Canvasを使って作るインタラクションのあるグラフ」を担当させて頂いただきました。

概要としては、Canvas内に描かれたものに mouseovermouseoutclick などのイベントを設定してインタラクションを持たせるグラフを作る、というものです。
これを通してCanvas内に描かれたものにイベントを付与して、ユーザと対話可能なCanvasの作り方を学んでもらえればと思って執筆しました。

今回はここの箇所だけで多くは書いていませんが、その分、サンプルに力を入れいてるのでぜひサンプルをダウンロードして色々と触ってみてください。

目次

  • ■Chapter 1 マークアップ言語としてのHTML5
  • ■Chapter 2 CSS3時代のWebデザイン
  • ■Chapter 3 CSSアニメーションを極める
  • ■Chapter 4 HTML5&CSS3のテクニック
  • ■Chapter 5 Webアプリの機能を取り入れる
  • ■Chapter 6 Flashライクなデザイン
  • ■Chapter 7 Webデザインの実践

サンプル画像

HTML5でスマホをコントローラにするゲームを作ってみた

2011年10月27日 09:00

Canvasゲームをカスタマイズ

ゲーム自体は以前作ったものをそのまま使いました。

今回作ったスマホコントローラ版

http://edo-m18.me:9000/

以前作ったものをカスタマイズして、弾を打つ部分と自機を移動する部分を、関連付けたスマホから操作できるようにしてみたものです。
これはあくまでアイデア、ってことで快適にプレイできるまでは作りこんでいません(; ´Д`)
ただ、特にプラグインなどを使わずともここまでできる、というのは非常に面白いなと思いました。

Node.jsを使って実装

今回、WebSocket部分はNode.jsを使って実装しました。
最近Node.jsにハマりすぎてプライベートではNode.jsしか触ってませんw
やはりサーバサイドとクライアントサイドが同じ言語、というのはとても実装しやすいですね。Node.jsおすすめです。
ちなみに最近、Node.js関連については別ブログで記事を書いてます。まだ全然記事数が少ないですが、興味がある方はぜひ。→ EBLOG Branch

機能説明

簡単に機能を説明すると、Node.jsのSocket.IOモジュールを使ってWebSocketを使えるようにします。
その後、Socket.IOのversion0.7? から追加されたnamespaceを使ってPCで見ている画面とスマホ画面を結びつけます。

最初にPCでアクセスするとスマホでアクセスするためのID入力が求められるので適当なアルファベットでIDを入力します。
するとそのIDを元にスマホでアクセスするURLが表示されるので、そのURLにスマホでアクセスします。

すると画面には「tab to shoot!」という文字しか出ませんが、タップで弾を発射、加速度センサーで自機の移動ができるようになります。
横向きに持ち、左右に傾けることで自機を動かすことができるようになっています。

若干タイムラグが発生しますが、ゲーム画面のコントローラとしてスマホを使うのは面白なーと思って作ってみました。
※まだ全然調整していないので、Androidでは動いてません。現状はiOSオンリーです。

1