ITエンジニア/デザイナ向けにオープンソースを毎日紹介

技術 - HTML5の記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

26347?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f04%2fscreenshot2011-04-06-14.26.50_thumb

  • 2011/04/18

新しい動画のあり方?JS/HTML5によるインタラクティブな動画プレーヤ「Cacophony」

CacophonyはHTML5/JavaScriptによるインタラクティブな動画作成実行環境。CacophonyはHTML5/JavaScript製のオープンソース・ソフトウェア。動画を作ろうと思うと、動画レコーダーやスマートフォンを使ってリアルを記録するのが一般的だ。しかしこうやって作られたものは一つの作品であって、...

26316?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f04%2fa72ae8e7f859d72b0619a9015771af0c

  • 2011/04/15

HTML5の魅力を知る。クライアントサイドオンリーの音楽プレーヤ「Player」

PlayerはHTML5を使って作られたクライアントサイドだけで動作するMP3プレーヤ。PlayerはHTML5/JavaScript製のフリーウェア(ソースコードは公開されている)。HTML5を使ったサンプルアプリケーションが次々に登場している。やはりHTMLとJavaScriptという開発環境の用意が殆ど何もいらず...

26303?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f04%2fimg_0522_thumb

  • 2011/04/14

スマートフォン向けWebサイトを作る際に導入検討したいJavaScriptフレームワーク「Wink toolkit」

Wink toolkitはスマートフォン向けWebサイトを構築するためのJavaScriptフレームワーク。Wink toolkitはJavaScript製のオープンソース・ソフトウェア。スマートフォンではこれまでのデスクトップ向けの開発手法とは大きく異なる部分がある。まず画面サイズの制限が大きく、マウスのようなデバイ...

26278?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f04%2f1cd23a73b0a65a3866a4174b34a97eeb

  • 2011/04/13

画像の保護に。JavaScript/Canvasを使って動的に電子透かしを入れる「watermark.js」

watermark.jsはHTML5/Canvasを使って画像に動的に透かしを入れるソフトウェア。watermark.jsはJavaScript製のオープンソース・ソフトウェア。ECサイトやメディアサイトでは画像に透かしを入れて表示している場合がある。社名や自社のロゴを載せることで、転載を防止または抑制する仕組みだ。画...

List

  • 2011/04/08

高度なゲームも作れる。HTML5/Canvasフレームワーク「CasualJS」

CasualJSはCanvasタグを使ったアニメーション/ゲーム作成用JavaScriptフレームワーク。CasualJSはJavaScript/HTML5製のオープンソース・ソフトウェア。JavaScriptはHTML5の登場によって大きく花開こうとしている。位置情報の利用、ストレージ、WebSocket(今は切り離...

25995?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f03%2fscreenshot2011-03-15-13.14.26_thumb

  • 2011/03/23

サーバとクライアントで互いのメソッドを呼べるnode.js用ライブラリ「nowjs」

nowjsはリアルタイムWebアプリケーションを手軽に実行できるnode.js用ライブラリ。nowjsはJavaScript製/node.js用のフリーウェア(ソースコードは公開されている)。node.jsではWebサーバとクライアントが同じJavaScriptによって開発できるのがメリットになっている。とは言え全く同...

25923?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f03%2fscreenshot2011-03-11-11.50.20_thumb

  • 2011/03/18

勉強会やセミナーに。動画と別コンテンツを連携させるHTML5動画フレームワーク「Popcorn.js」

Popcorn.jsは動画と別なコンテンツを連携させるHTML5ビデオフレームワーク。Popcorn.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。Webサービスの説明動画や、勉強会の内容など動画をWebサイトに掲載するケースが増えている。そんな時には動画以外の資料も一緒に掲載したいと思うはず...

25920?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f03%2fscreenshot2011-03-11-11.43.572_thumb

  • 2011/03/18

ドラッグアンドドロップ、プログレスバー表示に対応したアップロードライブラリ「File Uploader」

File UploaderはD&Dをサポートし、複数ファイルのアップロードとプログレスバー表示に対応したライブラリ。File UploaderはHTML5/JavaScript製のオープンソース・ソフトウェア。Webブラウザの操作で最も面倒なのがファイルのアップロードではないだろうか。一つのファイルしか指定できないイン...

25894?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f03%2fscreenshot2011-03-10-0.08.31_thumb

  • 2011/03/17

Adobeがついに動く。FlashファイルをHTML5に変換するユーティリティ「Wallaby」

WallabyはFlashのflaファイルを読み込み、HTML5/JavaScript/CSSに変換するソフトウェア。WallabyはAdobe製のフリーウェア。FlashはJavaアプレットが歩んでいた道を順調に突き進んでいた。特に爆発的に広まったのは動画プレーヤとして注目を集めた時だろう。全く順風満帆だったのに、変...

25838?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f03%2fscreenshot2011-03-03-10.30.09_thumb

  • 2011/03/15

空間を自由に泳ぎ回ってチャットする「Rumpetroll」

Rumpetrollは空間を自由にさまよいつつチャットするソフトウェア。HTML5/WebSocket製。RumpetrollはRuby/HTML5製のフリーウェア(ソースコードは公開されている)。インターネットを使うときは基本的に一人で行う場合が多い。そのため一人だと寂しいと感じてしまう。だからチャットやフォーラムと...

List

  • 2011/03/14

JavaScriptでタイムラインベースのアニメーションを実現する「mashi」

mashiはJavaScriptベースのタイムライン指定のアニメーションを実現するツールキット。mashiはJavaScript製のオープンソース・ソフトウェア。Webブラウザ上でアニメーションを実現しようと思うと、技術的に候補にあがるのがアニメーションGIF、Flashそして動画だろう。どれもあまり動的に作り出すもの...

25825?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f03%2fscreenshot2011-03-02-15.45.04_thumb

  • 2011/03/14

これがWebメーラーと驚くほどのUIを持ったWebアプリケーション「ukijs mail」

ukijs mailはMac OSX標準ライクなUIをもったWebメーラー。ukijs mailはRuby製、HTML/JavaScript用のオープンソース・ソフトウェア。Mac OSXにはメールというメーラーがデフォルトで入っている(非常に分かりづらいネーミングだ)。特に足りない点もなく、OSデフォルトとあって他の...

25782?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f03%2fscreenshot2011-02-28-15.41.41_thumb

  • 2011/03/11

この表現は凄い。ダイナミックに変化するテキストイフェクト「gui-dat」

gui-datは流体のようなイフェクトを文字に対して行うJavaScriptライブラリ。gui-datはHTML5/JavaScript製のフリーウェア(ソースコードは公開されている)。Flashや画像を使えばできることをテキストベースでやることに意義がある。テキストであれば検索もできるし、システム連動もしやすい。サイ...

25763?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f02%2fscreenshot2011-02-28-11.01.02_thumb

  • 2011/03/10

テキストファイルからHTML5のプレゼンテーションを生成する「KeyDown」

KeyDownはMarkdown記法を使ってテキストファイルからHTML5のプレゼンテーションを生成する。KeyDownはRuby製のオープンソース・ソフトウェア。個人のエンジニア、デザイナーが集まる勉強会ではあまり凝ったプレゼンを見る事が少ない。むしろHTMLやKeyNoteなどを使ってカジュアルに作られる方が多いの...

25713?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f02%2fscreenshot2011-02-25-15.40.00_thumb

  • 2011/03/07

Webの体験を一歩未来に。OpenALをHTML5で実現する「WebAL」

WebALはWebブラウザで音楽を3D化する、OpenALをポーティングしたJavaScriptライブラリ。WebALはHTML5/JavaScript製のフリーウェア(ソースコードは公開されている)。ゲームにおいてグラフィックスと同じくらい欠かせない重要な要素が音だ。音楽によって臨場感を出したり、よりゲームの世界に入...

25670?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f02%2fscreenshot2011-02-23-21.37.14_thumb

  • 2011/03/04

HTML5を使ってこんなことも。Googleマップ風の画像ビューワー「Bigshot」

Bigshotは巨大な画像をタイル状に分解し、Googleマップのようなビューワーで閲覧するソフトウェア。BigshotはHTML5/Java製のオープンソース・ソフトウェア。デジカメが高性能化するのに伴って、撮影できるサイズが大きくなっている。とは言え写真を閲覧するディスプレイのサイズは決まっているので、大きな写真で...

25666?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f02%2fscreenshot2011-02-23-17.13.04_thumb

  • 2011/03/04

HTML5/Canvasによる妙技。クライアントサイドで画像にイフェクト「CamanJS」

CamanJSはCanvasタグを使いクライアントサイドで画像にイフェクトを施すライブラリ。CamanJSはHTML5/JavaScript製のオープンソース・ソフトウェア。オンラインで画像を扱うケースは多々ある。ユーザ向けのWebサイトで画像をアップロードしてもらうといったこともあるだろう。画像はテキスト以上のインパ...

25617?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f02%2fscreenshot2011-02-21-15.09.26_thumb

  • 2011/03/02

これは面白い。WebSocketを使ったWebベースのターミナル「ws-io」

ws-ioはWebSocketとI/Oを組み合わせることでWebベースのターミナルを実現する。ws-ioはRuby製のオープンソース・ソフトウェア。HTML5で新しく登場した機能は幾つもあるが、その中でも特殊な位置にあるのがWebSocketではないだろうか(仕様からは切り離されているが)。これまでになかったソケット通...

25584?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f02%2fscreenshot2011-02-18-14.00.22_thumb

  • 2011/03/01

HTML5+Canvasタグによるアニメーションユーティリティ「gury」

guryはjQueryを使ったCanvasタグ用JavaScriptユーティリティ。HTML5向け。guryはjQuery/HTML5/JavaScriptによるオープンソース・ソフトウェア。HTML5の登場以来、期待が高まっているのがCanvasタグを使った図形描画だ。これまでは画像やFlashでしか作れなかったよう...

25485?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f02%2fscreenshot2011-02-15-9.58.23_thumb

  • 2011/02/24

スマートフォン向けサイトのデバッグに。JavaScriptを使ってiPhoneと対話する「iPhone JS Console」

iPhone JS ConsoleはWebSocketを使って母艦とiPhone間でJavaScriptを対話的に利用するソフトウェア。/s2IfiPhone JS ConsoleはWebベース、iPhone用のフリーウェア(ソースコードは公開されている)。スマートフォン向けのサービス提供を考える上で、ネイティブアプリ...