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

技術 - HTML5の記事一覧

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

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

もっと見る

26890?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f05%2fscreenshot2011-05-13-11.38.54_thumb

  • 2011/05/24

Google I/O 2011で利用されたHTMLプレゼンテーションテンプレート。

I/O 2011 SlidesはGoogle製のHTMLプレゼンテーションテンプレート。I/O 2011 SlidesはHTML5/JavaScript製のオープンソース・ソフトウェア。Googleの開発者会議とも言うべきGoogle I/Oが開催された。今年もまた新しい技術やサービスが次々と紹介され、整理が追いつかな...

26876?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f05%2fscreenshot2011-05-11-17.03.58_thumb

  • 2011/05/23

デスクトップ/スマートフォン双方に対応したJavaScriptの2Dゲームフレームワーク「ArcadeJS」

ArcadeJSはHTML5/JavaScriptを使った2D系ゲーム開発に利用できるフレームワーク。ArcadeJSはHTML5/JavaScript製のオープンソース・ソフトウェア。ソーシャルゲームが華やかな現在、ゲーム開発に取り組んでみたいと思っている人も多いだろう。だがそのためにはデザインが、キャラクターが…と...

26791?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f05%2fscreenshot2011-05-08-21.21.01_thumb

  • 2011/05/17

体感必須。WebGLの持つポテンシャルを知る「WebGL Samples」

WebGL SamplesはWebGLのデモアプリケーションが登録されているプロジェクト。WebGL SamplesはHTML5/WebGL製のオープンソース・ソフトウェア。HTML5の登場によって新しい技術がWebブラウザに取り込まれている。その中で最も可能性を感じさせる、だが使うのもなかなか難しそうに思えるのがWe...

26753?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f05%2fscreenshot2011-05-07-10.14.43_thumb

  • 2011/05/14

よく使うものをパッケージ。個人向けWeb開発で使えるPHPフレームワーク「G5 Framework」

G5 FrameworkはHTML5/CSS3/jQueryを組み合わせた各種ライブラリを内包したPHPフレームワーク。G5 FrameworkはPHP製のフリーウェア。ちょっとしたアイディアがわいた時にさくっと実装したい時にPHPはちょうどいい。あくまでも個人向けであればPHPファイル中にHTMLを書いていってしまっ...

26739?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f05%2fscreenshot2011-05-06-21.55.04_thumb

  • 2011/05/13

node.js製のWeb版iTunesフロントエンド「nTunes」

nTunesはnode.jsで作られたiTunes API接続型メディアサーバ。nTunesはJavaScript/node.js用のオープンソース・ソフトウェア。iOSをはじめ、iPodを利用している人であればiTunesをメディアサーバとして動画や音楽を管理していることだろう。機能は多いが、画面が巨大で動作が重たい...

26734?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f05%2fimg_0689_thumb

  • 2011/05/12

HTML5を使った音楽、動画を織り交ぜたインタラクティブな電子書籍を作成する「Laker」

LakerはHTML5をベースに画像や音楽、動画をインタラクティブに使った電子書籍を作成するためのフレームワーク。LakerはHTML5/Objective-C製のオープンソース・ソフトウェア。数年前まで一般の人が書籍を出版しようと思うのは相当困難なことだった。だが今では電子書籍があり、誰でも簡単に書籍を出版できるよう...

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

  • 2011/05/04

HTML5の魅力。Webブラウザ上で楽譜を表示し、MIDIを使って奏でる「ABC.js」

ABC.jsはWeb上で楽譜を表示し、演奏するJavaScriptライブラリ。ABC.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5によってWeb上の表現力は高まっている。SVGでベクター画像を描いたり、WebGLによって3Dオブジェクトを描き出すこともできる。Canvasを使うプロ...

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

  • 2011/05/03

マルチタッチを使ったWebブラウザゲームの開発に「JSTouchController」

JSTouchControllerはiOSのMobile Safari上でマルチタッチを認識するライブラリ。JSTouchControllerはHTML5/JavaScript製のフリーウェア(ソースコードは公開されている)。iOSの面白さは言うに及ばないが、技術的に見た時に欠かせない要素の一つがマルチタッチシステムで...

List

  • 2011/05/02

Web上で画像にイフェクト。WebGLを使ったデモアプリケーション「WebGL Filter」

WebGL FilterはWebGLを使ったWebベースの画像イフェクトソフトウェア。WebGL FilterはHTML5/JavaScriptのフリーウェア(ソースコードは公開されている)。HTML5では様々な新しい機能をWebの世界に提供する。その一つとして知っておきたいのがWebGLだ。GPUを使ったグラフィカル...

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

  • 2011/04/30

RPGや2Dスクロールアクション対応。スマートフォン向けWebブラウザベースのゲーム開発に「enchant.js」

enchant.jsは主にスマートフォン向けのゲームを開発する際に使えるJavaScriptライブラリ。enchant.jsはJavaScript製のオープンソース・ソフトウェア。かつてはゲームを開発するためには専用の機器が必要だった。パソコンでも開発できるようになり、さらにFlashを使ってWebベースでゲームが開発...

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

  • 2011/04/29

HTML5で作られたリッチなUIの音楽プレーヤ「Speakker」

SpeakkerはHTML5で作られたリッチなUIの音楽プレーヤ。SpeakkerはHTML5/JavaScript製のオープンソース・ソフトウェア。ミュージシャンや楽器を演奏する人などは自分のサイトで楽曲を公開する。その際にはMP3ファイルをそのまま置くのではなく、格好いいプレーヤと一緒に配置するのが聴いてもらうため...

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

  • 2011/04/28

2Dアクションゲームに使える。Canvas + JavaScriptのゲームライブラリ「jsGameSoup」

jsGameSoupはHTML5/JavaScript製のオープンソース・ソフトウェア。ここ数年ゲームの人気が高まっている。それまでのグラフィカルで高速に動作するリッチなものではなく、モバイルデバイスでも動作する軽量でシンプルなアプリが好まれる。落ちるゲーム凝ったゲームは開発にお金も工数もかかるだろうが、ごくシンプルな...

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

  • 2011/04/26

画一的なプレゼンテーションにさよならを。HTML5/JavaScript/CSS3によるプレゼン「CSSS」

CSSSはHTML5/JavaScript/CSS3で作られたWebベースのプレゼンテーションテンプレート。CSSSはHTML5/JavaScript/CSS3によるオープンソース・ソフトウェア。最近はHTMLやJavaScriptを使って作られたプレゼンテーションが増えている。JavaScriptでキーの動きに合わせ...

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

  • 2011/04/22

必見。スマートフォン対応、WebベースのHTML5オーサリングソフトウェア「Maqetta」

MaqettaはIBMからDojoに寄贈されたWebベースのHTML5対応オーサリングソフトウェア。MaqettaはWebベース、Java製のオープンソース・ソフトウェア。HTMLのオーサリングツールと言えばDreamweaverをはじめとしてローカルソフトウェアで行うのが一般的だ。だがその結果をレンダリングするのはW...

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

  • 2011/04/22

Firefox4の実力を知る。HTML5/CSS3による惑星情報「The Planetarium」

The PlanetariumはFirefox4のデモとして作られたCSS3の実演ソフトウェア。The PlanetariumはHTML5/JavaScript製のフリーウェア(ソースコードは公開されている)。技術的にどれだけ面白かろうが、ぱっと見て分かるものでないとインパクトが薄れてしまう。逆に言えば見た目の迫力があ...

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

  • 2011/04/19

リストやテーブル主体のスマートフォン最適化サイトに「ChocolateChip-UI」

ChocolateChip-UIはHTML5製のスマートフォン最適化サイト用フレームワーク。ChocolateChip-UIはHTML5製スマートフォン用のオープンソース・ソフトウェア。スマートフォンはこれまでのデスクトップ型に比べると圧倒的に画面サイズが小さい。そのためWebサイトのデザインを行う上で注意すべきことが...

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サイトやメディアサイトでは画像に透かしを入れて表示している場合がある。社名や自社のロゴを載せることで、転載を防止または抑制する仕組みだ。画...