node.jsとWebSocketを使ってアクセスログをリアルタイムにビジュアル化·maptail.js MOONGIFT
maptail.jsはアクセスログをリアルタイムに地図上へマッピングするソフトウェア。 maptail.jsはJavaScript/node.js製のオープンソース・ソフトウェア。node.jsに注目が集まっている。様々なソフトウェアが日々開発されていて、そのどれもが新しい技術を積極的に取り入れている。例えばHTML5だ。 こんなに奇麗に HTML5を使えばどんなことができるのか、それは実際にできあがったものを見てみるのが一番分かりやすいはずだ。その例として紹介したいのがmaptail.jsになる。MapとTailを組み合わせたこのソフトウェアはnode.js/HTML5を知る上できっと面白いはずだ。 maptail.jsを起動する時には何らかのログファイル（通常はアクセスログ）を指定して実行する。そうするとアクセスログをリアルタイムに解析し、IPアドレスから位置情報を取得して地図上にマッ
HTML5製。二台のロボットを操るアクションゲーム·Robots Are People Too MOONGIFT
Robots Are People TooはHTML5/JavaScriptで開発された横スクロール型アクションゲーム。 Robots Are People Too（以下RAPT）はHTML5/JavaScript製のオープンソース・ソフトウェア。ここ半年ほど、熱い話題と言えばHTML5とゲームだ。今まではFlashベースでしかできなかったようなゲームがHTML5を使えばJavaScriptで実装できるようになる。 ゲーム画面 HTML5に対応したブラウザであれば、スマートフォンでも使えるのが魅力だ。パズルゲームやシューティングゲームなど様々なゲームが開発されている。今回紹介するのもその一つ、アクションゲームのRAPTだ。 RAPTは赤と青、二つのロボットを操作して遊ぶゲームだ。矢印キーまたはASDWしか使わないので誰でも簡単に操作が覚えられるだろう。ゴールまでいけば完了で、敵キャラに対し
HTML5だからこそ。Canvasタグを使って幾何学模様を描く·Turtle Wax MOONGIFT
Turtle WaxはCanvasタグを使ってJavaScriptで幾何学模様を描くライブラリ。 [/s2If] Turtle WaxはJavaScript製のオープンソース・ソフトウェア。HTML5が本格化する中で、見逃せない機能の一つがCanvasタグだ。実験的な試みが色々行われているが、これまでFlashで行っていたような操作がJavaScriptだけで実現できるようにさえなっている。 デモ1 これまでグラフィックスを描こうと思うとFlashを使うか、画像を作成するかのどちらかしか選択肢がなかった。だがCanvasを使えばクライアントサイドでレンダリングができるようになる。幾何学模様を描くならばTurtle Waxに注目したい。 Turtle WaxはJavaScriptを使って幾何学模様を簡単に描くことができるライブラリだ。デモとして四角やその四角を回転させて描く図形が紹介されてい
HTML5の可能性。HTML5+WebSocketによる株式取引システム·Emte Trading MOONGIFT
Emte TradingはHTML5とWebSocketを組み合わせた株式取引システム（現状ではデモ）。 [/s2If] Emte TradingはPython/web2py製のオープンソース・ソフトウェア。インターネットが普及し、個人がオンライン上で利益を上げるための仕組みも幾つか登場している。ヤフオクのような物品販売もあれば、株式取引に代表されるトレーディングもある。 緑と赤のグラフが描かれる トレーディングのシステムは一般的には横軸に時間、縦軸に金額が表示され、徐々に右に進んでいくグラフが使われている。だが今回紹介するのはそうした見慣れたグラフではない手法を使った株式取引システムのEmte Tradingだ。 Emte Tradingは現状はコンセプトレベルのソフトウェアであり、実際に取引ができる訳ではない。とはいえ非常にユニークな描画を行うソフトウェアであり、見ているだけでも面白い
HTML5で進化したフォーム機能 ここが違う！サンプルで見るHTML5（5）
はじめに この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。 過去の連載も読む 第1回：HTML5が注目を浴びる理由とは？ 第2回：HTML4から変化したHTML5のマークアップ 第3回：HTML5で再定義された要素と属性 第4回：HTML5で実現できるマルチメディア系機能 新たに導入されたフォームコントロール これまでウェブにおける入力フォームコントロールは、非常に限られたものしかありませんでした。皆さんがよくご存じのテキスト（パスワード）入力フィールド、ラジオボタン、チェックボックス、セレクトメニュー、テキストエリア、ファイル選択です。お問い合わせフォームであれば、ほとんどのシーンで十分といえるでしょうが、ウェブアプリケーションにおいては、不足してい
MOONGIFT：Canvasを使ったJavaScriptゲームフレームワーク「xc.js」
xc.jsはJavaScript製のオープンソース・ソフトウェア。ローカルからWebへ流れる勢いが止まらない。HTML5の登場によって、その勢いがさらに強まっている。Webアプリケーションも良いが、個人で需要が強そうなのはゲームではないだろうか。 デモゲーム 3Dのように高スペックを必要とするゲームも良いが、もっとシンプルなゲームはすぐに遊べるので広く受け入れられる。オブジェクトの干渉が伴うようなシンプルな2Dゲームを作ってみたいならばxc.jsを使ってみると良さそうだ。 xc.jsはCanvasタグを使い、Webベースでゲームを作るためのフレームワークを提供する。イベントをリッスンしたり、シーンを挿入したり切り替えたりしてゲームを作り上げる。画像を読み込んで表示することも可能だ。全てCanvasタグ上に描画する。 デモのゲームとして小さな円が動き回るというのが公開されている。盤の中をクリ
iPhone/iPadに対応したマップ/タイル表示ライブラリ·Tile5 MOONGIFT
Tile5は地図およびタイル表示を行うiOS用Webサイト向けライブラリ。 [/s2If] Tile5はJavaScript/HTML5製のオープンソース・ソフトウェア。HTML5を試してみたいと思うならば、モバイルから開始するべきだろう。さらに言えば表示領域の大きいiPad向けサイトをHTML5で作ってみることをお勧めする。対象を限定すれば既存サイトへ与える影響も大きくない。 地図表示 iOS向けのサイトを開発する時に一から開発する必要はなくなってきている。既に多数のライブラリやテーマが存在する。それらを必要に応じてピックアップして組み合わせるだけで素敵なサイトができあがる。地図や写真を扱うならTile5を使ってみよう。 Tile5は主に二つの機能がある。一つは地図表示のライブラリだ。iPad対応になっているライブラリで、左側に地図サービスの切り替えや機能切り替えが行える。ルート表示やピ
HTML5でマインドマッピング·Mind Notes MOONGIFT
Mind NotesはGoogle App Engine/Java上で動作するマインドマッピングシステム。 MOONGIFTはこう見る マインドマッピングをオンラインサービス化しているサービスは幾つか存在する。Mind Notesの利点はオープンソース・ソフトウェアである点になるだろう。またHTML5で実装されているので、iPadのようなスマートフォンからでも操作できるのが利点だ。恐らくそのこともあってキーボード主体ではなくマウス主体になっているのだろう。 現状では他のサービスに比べると機能的に見劣りするが、今後に期待したいところだ。ノードへのデータ追加がうまくモジュール化されれば、他のサービス（WikipediaやFlickrなど）とも連携しやすくなるはずだ。 Mind NotesはGoogle App Engine/Java用のオープンソース・ソフトウェア。日々多数のアプリケーションが
複数人で同時に書けるnode.js製ホワイトボード·whiteboard MOONGIFT
whiteboardはWebSocketを使ったリアルタイムドローソフトウェア。 whiteboardはnode.js/JavaScript製のオープンソース・ソフトウェア。node.jsが熱い。サーバサイドJavaScriptという珍しさもあって、先進的な技術を試すのにぴったりな環境となっている。HTML5を使ったソフトウェアはとても多い。 Safariでお絵描き HTML5と言えば多数の新機能を備えているが、最も特殊なものとしてはWebSocketが挙げられるかも知れない。使い勝手が難しいが、新たなWebの可能性も見いだせそうだ。そんなWebSocket + node.jsで開発されたのがwhiteboardだ。 whiteboardは複数人同時に編集が可能なホワイトボードシステムだ。マウスでクリックして線を引くことが出来る。その内容はリアルタイムに別なブラウザに反映される。クリアボタ
アプリ化もサポートしたHTML5のスマートフォンフレームワーク·Jo MOONGIFT
JoはHTML/JavaScript製のオープンソース・ソフトウェア。HTML5が隆盛になっている。まだ時期尚早という声もあるが、モバイルについてはWebKitベースが大勢とあって、実用レベルになってきているのではないだろうか。 ポップアップ そんな中必要になるのが、フレームワークだろう。フレームワークを使うことで、実践的なWebアプリケーションが容易に構築できるようになる。その先兵として紹介したいのがJoだ。 JoはWebKitベースで動作するHTML5フレームワークだ。そのため、iOSやAndroidはもちろん、SafariやGoogle ChromeさらにDashboard Widgetでも利用が可能だ。HTMLはあまり記述せず、JavaScriptによって画面のレンダリングを行うのが特徴だ。 リスト選択 そのため、スクリプトベースでWebアプリケーションの開発が可能になる。デザイン
Node.jsで開発されたマルチプレーヤオンラインゲーム·Orona MOONGIFT
OronaはNode.jsで開発されたマルチプレーヤ対応のタンクゲームです。 OronaはJavaScript/Node.js製のオープンソース・ソフトウェア。ここ数ヶ月、Node.js界隈が非常に盛り上がっている。パッケージ管理を行うnpmや、HerokuでもNode.jsがサポートされており、開発する準備は整いつつある。 複数人で遊べるタンクゲーム サーバサイドJavaScriptにおいて、最も可能性が高いと思われるエンジンになってきている。その発展は留まる所を知らず、ついにゲームの世界まで足を踏み入れようとしている。それがOrona、タンクゲームソフトウェアだ。 OronaはHTML5で開発されたソフトウェアで、ローカルでサーバを立てて複数人で参加して遊べるようになっている。なおローカル版で試した所、Google Chromeでは表示されるがSafari/Firefoxでは表示されな
Canvasを活用するJavaScriptライブラリ·LibCanvas MOONGIFT
LibCanvasはJavaScript製のオープンソース・ソフトウェア。JavaScriptは速度、機能ともに進化している。メールやカレンダーのようなオンラインとの親和性の高いものはもちろん、画像編集をはじめ様々なアプリケーションがWeb化している。 ソリティアデモ 今後スマートフォンなどでHTML5が積極的に取り入れられてくれば、JavaScriptの利用機会はさらに増えるはずだ。そんな時には一からJavaScriptを組むのではなく、多様なライブラリを使うことになるだろう。そこで覚えておきたいのがLibCanvasだ。 LibCanvasはCanvasタグを使うことで表現力を向上するJavaScriptライブラリだ。MooToolsをベースに開発されている。デモの中には物理エンジンのように多数のオブジェクトが関連して動作するものや、カードゲームのデモもある。 アステロイドのデモ ソリ
恐ろしい…JavaScriptでFPS·Cottage MOONGIFT
CottageはHTML5/JavaScript製のオープンソース・ソフトウェア。ゲームのジャンルは無数に存在するが、PC系で人気が高いジャンルの一つがFPS（First Person Shooting）だ。DOOMシリーズが有名なジャンルで、筆者もハマっていた覚えがある。 動作は軽快 プレーヤの視点がキャラクターの視点と同一であるため、よりリアリティがまし、臨場感が味わえる。グラフィックスが向上するにつれてハイスペックなPCが必要になっているが、もっと手軽に遊ぶならCottageが期待できそうだ。 CottageはCanvasを使ったグラフィックス、サウンドエンジンとなっている。HTML5を使っているが、ExplorerCanvasを使っているのでIE7/8でも利用可能となっている。特にFPS専門という訳ではないが、デモアプリはFPSとなっている。 このデモでは弾は撃てない 矢印キーでの
【レポート】HTML5の機能を知るための15のデモンストレーション | エンタープライズ | マイコミジャーナル
Tech Drive-in - Technology, Linux, Ubuntu FTW 主要ブラウザの対応が進んでいることもあり、HTML5の技術を活用したデモンストレーションサイトが増えている。現在主流の技術と互換性が高いことから、すでにHTML5を採用すべきという意見もある。ブラウザの更新頻度は早まる傾向にあり、HTML5/CSS3の対応は日進月歩で進んでいくことになるとみられる。 HTML5やCSS3のデモンストレーションサイトやテクニック紹介ブログはこれまで何度も取り上げてきた。15 HTML5 Demos Showcasing Prowess of HTML5 Over Adobe Flash - Tech Drive-inにおいて、HTML5デモンストレーションサイトがまとめられており参考になる。中にはこれまでマイコミジャーナルで取り上げたサイトも含められている。紹介されて
HTML5を使ったプレゼンテーション·Nerine MOONGIFT
NerineはHTML5/JavaScript製のオープンソース・ソフトウェア。プレゼンテーションの基本と言えばPowerPointだろう。だがあまりにも多く見せられたせいか、個人的にはあのツールの持つ独特な雰囲気が好きではない。エンジニアを中心に別なツールを利用する人が増えている。 プレゼンの一コマ 例えばMac OSXのKeynoteであったり、Googleドキュメントのプレゼンテーション、PDFなど様々なツールを使ってプレゼンテーションを行っている。固有の技術に束縛されない自由さが欲しい人はNerineを使ってみるといいだろう。 NerineはHTML5製のプレゼンテーションツールだ。道具は一切問わないので、テキストエディタを使ってプレゼンテーションを作ることもできる。矢印キーでスライドを入れ替え、競り上がってくるようなイフェクトや、キーを押すごとに表示を追加するようなイフェクトもで
HTML5で遊べるパックマン·Pacman MOONGIFT
PacmanはHTML5/JavaScript製のフリーウェア（ソースコードは公開されている）。2010年05月頃にGoogleが公開し、話題になったオンラインで遊べるパックマン。あまりにみんなが遊ぶもので、負の経済効果がもの凄かったらしい。 普通に面白い そこから派生するように多数のJavaScriptだけで遊べるゲームが開発された。今回紹介するPacmanもその一つで、特徴としてHTML5を使って作られている。その分動作ブラウザは限定されるが、HTML5のデモとして興味深いソフトウェアだ。 Googleのようにロゴ風になっている訳ではなく、旧来のパックマンに近い画面になっている。OGGファイルが用意されており、音が鳴るようになっているが筆者環境では食べている時の音が鳴らなかったのでプレー中はとても静かだ。 動作は軽快でプレーをする時にnキーを押す以外は矢印キーだけで操作が進められる。ゲ
HTML5製のWebベースウィンドウライブラリ·ChromeKit MOONGIFT
ChromeKitはHTML5/CSS3/JavaScriptによるフリーウェア（ソースコードは公開されている）。HTML5の登場によってWebブラウザの可能性があがれば、おのずとWebアプリケーションに対するニーズも高まっていくはずだ。その過程にはWeb OSのような可能性もある。 ローカルアプリケーションのようなウィンドウ表示 Webブラウザ上でまるでローカルOSのようなインタフェースを実現しようと思った時に必ず必要になるのがウィンドウ表示だ。まるでデスクトップのようなインタフェースを実現したい時に使えそうなのがChromeKitだ。 ChromeKitはHTML5/CSS3/JavaScriptの組み合わせで作られているウィンドウライブラリだ。Mac OSXライクに左側にボタンが並んだウィンドウで、ドラッグアンドドロップで移動することができる。重なりによってウィンドウの色が変わる仕組
iPhone向けWebサイトを作るのに最適なテンプレート&JavaScript·moobile MOONGIFT
moobileはHTML/JavaScript製のフリーウェア（ソースコードは公開されている）。iPhone/Androidを中心とするスマートフォンのシェア拡大は留まることを知らない。モバイルネットワークが発展している限り、この流れは止まることはないだろう。Webサイトを提供する上でもスマートフォンは欠かせない存在になる。 ボタンバー ネイティブアプリを提供する手もあるが、もっと容易なのが最適化されたWebサイトを提供することだ。そもそもネイティブアプリを提供するほどのニーズがないサービスもあるはずだ。そこで使えるのがmoobileになる。 moobileはiPhoneやAndroidといったWebKitベースに対応したWebサイトフレームワークだ。HTML5で作成されているのが特徴だ。フォームやボタン、ボタンバーなどのUIをテンプレート化している。これを使えば最適化されたWebサイトが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本語で学べるHTML5関連資料15個まとめ : 二十歳街道まっしぐら
HTML5 Security Cheatsheet