I/O 2011 SlidesはGoogle製のHTMLプレゼンテーションテンプレート。 I/O 2011 SlidesはHTML5/JavaScript製のオープンソース・ソフトウェア。Googleの開発者会議とも言うべきGoogle I/Oが開催された。今年もまた新しい技術やサービスが次々と紹介され、整理が追いつかないという人も多いのではないだろうか。 スライド表示 そんなGoogle I/O 2011の中で使われたスライドはHTML5製だ。テンプレートがI/O 2011 Slidesとしてオープンソース化されているので誰でも利用できる。 I/O 2011 Slidesは角丸のシンプルなスライドで矢印キーやスペース、マウスクリックでスライドを切り替えることができる。単純に文字を表示する他、CSSでサイズや色を変えたりクリックするたびにリストの項目を表示していくと言ったこともできる。 画

LakerはHTML5をベースに画像や音楽、動画をインタラクティブに使った電子書籍を作成するためのフレームワーク。 LakerはHTML5/Objective-C製のオープンソース・ソフトウェア。数年前まで一般の人が書籍を出版しようと思うのは相当困難なことだった。だが今では電子書籍があり、誰でも簡単に書籍を出版できるようになっている。それこそ旧来のしがらみがない分、身軽だ。 iPad用表示 電子書籍を出版しようと思った時に問題になるのはそのデザインや文書の作り方だろう。だが心配は無用だ。HTML5を使って柔軟に作成できるフレームワーク、Lakerがある。 LakerはBakerをカスタマイズし、より多機能な電子書籍を作成できるフレームワークだ。HTML5を使うのはそのままだが、縦スクロールで長い1ページを表示し、横スクロールで次のページに切り替えられるようになっている。縦の長さが可変なのは

nTunesはnode.jsで作られたiTunes API接続型メディアサーバ。 nTunesはJavaScript/node.js用のオープンソース・ソフトウェア。iOSをはじめ、iPodを利用している人であればiTunesをメディアサーバとして動画や音楽を管理していることだろう。機能は多いが、画面が巨大で動作が重たいのが難点だ。 トップ そのため音楽などのデータはメディアサーバ中に、操作は外部から行いたいと思ったことがあるはずだ。それをnode.jsを使って実現するのがnTunesだ。 nTunesはnpmでインストールできるソフトウェアで、立ち上げると8888番ポートでWebサーバが立ち上がる。後はWebブラウザからアクセスすると簡単な一覧が表示される。音楽や動画の再生、音量の調整、トラック一覧の閲覧といった機能がある。 音楽再生 音楽や動画は操作しているWebブラウザ側で再生される

WebGL SamplesはWebGLのデモアプリケーションが登録されているプロジェクト。 WebGL SamplesはHTML5/WebGL製のオープンソース・ソフトウェア。HTML5の登場によって新しい技術がWebブラウザに取り込まれている。その中で最も可能性を感じさせる、だが使うのもなかなか難しそうに思えるのがWebGLだ。 アクアリウム WebGLによってWebブラウザ中で3Dオブジェクトをレンダリングできるようになった。その内FPSのようなゲームまで出てくるかもしれない。そんなWebGLのもつポテンシャルを感じたいならWebGL Samplesを触ってみよう。 WebGL Samplesは10種類を越えるWebGLのサンプルが登録されている。水槽に中に魚を描いたり、柔らかなオブジェクトが融合したり離れたりするもの、3Dアバター、地球のような惑星に隕石が次々と落下していくものなど様

What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe

モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS

LimeJSはHTML5/JavaScriptによるWebゲームフレームワーク。パズルゲーム向き。 LimeJSはJavaScript製のオープンソース・ソフトウェア。Webベースのゲーム開発が熱い。その時、鍵になるのはJavaScriptだ。HTML5の登場によってWeb、JavaScriptでできることは大きく広がっている。今こそWebベースのゲーム開発を行う時だ。 並べる系のパズル ゲームと言ってもジャンルはとても幅広い。アクションもあれば、パズル、ノベル、シューティングゲームといった具合だ。一つのゲームエンジンが全て行える訳ではないので、開発したいゲームの種類に応じてエンジンを選ぶべきだ。パズル、落ちものゲームを作るならLimeJSが使えそうだ。 LimeJSはHTML5を使ったJavaScript製のゲームフレームワークだ。iOSでの利用も想定されている。デモに登録されているゲー

Page flip effectはHTML5とJavaScriptを使った電子書籍風ページ送りのサンプルソフトウェア。 Page flip effectはHTML5/JavaScript製のフリーウェア（ソースコードは公開されている）。電子書籍が騒がれているが、最も大事なのはもちろんコンテンツだ。そして次に大事なのは見せ方になってくるだろう。電子書籍らしさがなければいけない。 このようにページ送りされる とは言え電子であろうとも書籍を読んでいる、と感じられる機能は大事なようだ。具体的に言えば、ページを捲っている感覚だ。指をスライドさせてページ送りをするだけでなく、ページがカールするような感覚、それをHTML5で実現するのがPage flip effectだ。 Page flip effectはGoogle Chrome Teamが以前に作った「20 Things I Learned Abo

Treesaver.jsはHTML5/JavaScriptを使った電子雑誌を作成するためのフレームワーク。 Treesaver.jsはPython製、HTML5/JavaScript用のオープンソース・ソフトウェア。電子書籍は決して遠い存在ではない。誰でも自由に作成、発信できるコンテンツになってきている。ePubを作るのも大して難しいことではない。 サンプルの表紙 コンテンツは既に多数ある訳で、次に問題になるのは見せ方だ。これまでのWebページとは大きく違い、ただ上からずらずらと並べていけばいい訳ではない。しかしそんな見せ方についても既にライブラリが存在する。その一つがTreesaver.jsだ。 Treesaver.jsはHTML5/JavaScriptを使い、テキストや画像、動画と言ったメディアを織り交ぜた電子雑誌を作成することが出来るソフトウェアだ。Treesaver.jsはコンパイ

StreamieはHTML5/node.jsで作られたWebブラウザベースのTwitterクライアント。 StreamieはHTML5/node.js製のオープンソース・ソフトウェア。去年、今年と新しい技術がどんどん花開いている。一つはHTML5、もう一つはnode.jsだ。どちらもわくわくするようなソフトウェアが登場してきている。まだまだ一般的でないだけに、何ができるのかが興味深い。 タイムライン HTML5の仕様からは外れているが、WebSocketを使ってリアルタイムに更新されるWebアプリケーションも興味深い。そうした面白い技術を組み合わせつつ、こちらも人気が高いTwitterアプリにしたのが今回紹介するStreamieだ。 StreamieはOAuthを使って認証を行い、リアルタイムに更新されるTwitterクライアントだ。リプライやダイレクトメッセージ、タイムライン、ツイートな

CSS3のテクニックはさまざまなものがありますが、その中からまさに今、そして次のプロジェクトに使用したくなるテクニックを紹介します。 The Bright (Near) Future of CSS [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 はじめに Styling HTML5 Classing like HTML5 Media Queries Styling Occasional Children Styling Occasional Columns RGB Alpha Color HSL and HSL Alpha Color Shadowy Styles Multiple Backgrounds 2D Transforms はじめに ここでフォーカスするのは、今、そして近い将来に使用するであろうスタイリングのテクニックです。HTML5の要素のスタイリング