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

技術 - HTML5の記事一覧

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

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

もっと見る

29084?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f08%2fscreenshot2011-08-26-10.57.53_thumb

  • 2011/09/06

拡張可能。プログラマー向けのHTMLプレゼンテーションツール「deck.js」

deck.jsはテーマ対応、拡張に対応したHTMLスライドツール。deck.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。HTMLを使ったスライド作成ツールも多数出回ってきた。そうしたソフトウェアを使うと、テキストエディタでどんどんスライドを作っておいて、見栄えのいいプレゼンテーションが行える...

29033?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f08%2fscreenshot2011-08-24-13.41.46_thumb

  • 2011/09/02

Webブラウザ、それもクライアントサイドだけで実現するテキストの音声読み上げ「speak.js」

speak.jsはHTML5を使ってクライアントサイドだけでテキスト音声読み上げを実現するJavaScriptライブラリです。speak.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。コンピュータの世界で常に望まれてきたのがテキストと音声の融合です。人が話せば音声を解析してテキストにし、逆にテ...

28968?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f08%2fscreenshot2011-08-19-12.20.14_thumb

  • 2011/08/31

Inkscape機能拡張。ドローデータをHTML5/Canvasへ出力「Ink2canvas」

Ink2canvasはInkscapeで作成したドローをHTML5/Canvasに保存するソフトウェア。Ink2canvasはInkscape用、Python製のオープンソース・ソフトウェア。オープンソースのイラストレーションソフトウェアとして有名なInkscape。数年前はまだまだ不安定だったが、最近ではずいぶん実用...

28956?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f08%2fscreenshot2011-08-19-11.23.48_thumb

  • 2011/08/31

クライアントサイドだけで作るスマートフォン最適化サイト「mobilize.js」

Mobilize.jsはデスクトップ向けのHTMLをJavaScriptで組み替えてスマートフォンに最適化された表示にするJavaScriptライブラリ。Mobilize.jsはHTML5/JavaScript製のフリーウェア(オープンソースとなっているがライセンスはなし。ソースコードは公開されている)。スマートフォン...

List

  • 2011/08/30

プレビューがあればさらに作りやすい。HTML5のスライド作成ソフトウェア「Editable HTML5 Slides」

Editable HTML5 SlidesはHTML5のスライドをプレビューを見ながら作成できるソフトウェア。Editable HTML5 SlidesはHTML5/JavaScript製のフリーウェア(ソースコードは公開されている)。最近はHTMLファイルをベースにしたプレゼンテーションを作成する人が増えてきた。動画...

28887?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f08%2fscreenshot2011-08-12-11.27.24_thumb

  • 2011/08/28

JavaScriptを使ってCanvasタグにUMLを描画「UmlCanvas」

UmlCanvasはCanvasタグを使ってUMLモデルを描画するJavaScriptライブラリ。UmlCanvasはHTML5/JavaScript製のオープンソース・ソフトウェア。2000年頃にもてはやされたUML。オフショア開発やエンタープライズでの開発では今も使われていると思うが、小規模なプロジェクトまではなか...

28768?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f08%2fscreenshot2011-08-08-9.42.54_thumb

  • 2011/08/23

PNGを解析してJavaScriptでPNGを描く「png.js」

png.jsはJavaScriptを使ってPNGを解析し、その結果をCanvasタグにレンダリングするライブラリ。png.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。Web上で扱われる画像のフォーマットと言えば、GIF/JPEG/PNGだ(WebPもあるか)。個人的な主観としてGIFはアニメ...

28730?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f08%2fscreenshot2011-08-03-14.40.31_thumb

  • 2011/08/20

小さいながらも多機能なWebブラウザ向けゲームエンジン「diggy」

diggyはパズル、シューティングゲームに使えるHTML5製のゲームエンジン。diggyはHTML5/JavaScript製のオープンソース・ソフトウェア。Webブラウザでゲームができるようになると、PCを使っていてちょっと空いた時間にゲームを興じれるようになる。そうなればグラフィックスやストーリーに富んだものより、カ...

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

  • 2011/08/19

そろそろ実用レベル。Webベース、HTML5製のマインドマップ「mindmaps」

mindmapsはHTML5で作られたマインドマップソフトウェア。ドラッグでのノード移動、カラー変更に対応。mindmapsはHTML5/JavaScript製のオープンソース・ソフトウェア。色々な情報が飛び込んできて、なかなか考えがまとまらない時にお勧めなのがマインドマップだ。情報をカテゴリに基づいて分類していけば、...

28663?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f08%2fscreenshot2011-08-03-9.53.20_thumb

  • 2011/08/17

HTML5製のスーパーマリオブラザーズ「Mario HTML5」

Mario HTML5はHTML5で作られたWebベースのスーパーマリオブラザーズ。効果音も出る。Mario HTML5はHTML5/JavaScript製のフリーウェア(ソースコードは公開されている)。ファミコン世代であれば誰しもが一度は遊んだことがあるであろうゲームがスーパーマリオブラザーズだ。2はディスクシステム...

28617?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f08%2fscreenshot2011-08-01-22.14.08_thumb

  • 2011/08/15

じっくり頭を悩ませよう。HTML5で作られたパズルゲーム「Bombada」

BombadaはWebベースのパズルゲーム。デスクトップやスマートフォン、iPadに対応している。BombadaはHTML5/JavaScript製のオープンソース・ソフトウェア。ゲームが苦手な筆者でも現状のWebブラウザ上で行われるゲームであれば十分に楽しめる。それくらい操作がシンプルで、かつアイディアに満ちたものが...

28599?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f08%2fscreenshot2011-07-31-21.40.43_thumb

  • 2011/08/14

どんな場面で使えるか。Webベースのヒートマップ生成ライブラリ「HeatCanvas」

HeatCanvasはCanvasタグを使ったWebベースのヒートマップライブラリ。HeatCanvasはHTML5/JavaScript製のオープンソース・ソフトウェア。大量のデータが位置情報と結びついている時、ビジュアル化に最適な手法と言えばヒートマップではないだろうか。Webサイトのクリック情報を投影したりするの...

28591?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f08%2fscreenshot2011-07-31-21.35.22_thumb

  • 2011/08/13

WebブラウザごとのHTML5対応状況を調べる「haz」

hazはWebブラウザごとのHTML5/CSS3対応状況を表示するWebユーティリティ。hazはHTML5製のフリーウェア(ソースコードは公開されている)。HTML5の登場によって、Webの標準化が進みこれまでにあったようなWebブラウザごとの方言や互換性維持の手間が減る。そう思われているが実際にはそう簡単ではない。G...

28563?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f07%2fscreenshot2011-07-30-19.45.36_thumb

  • 2011/08/11

無茶し過ぎ。クライアントサイドでWebサイトのスクリーンショットを作成「html2canvas」

html2canvasはHTML5/Canvasを使って任意のWebサイトのスクリーンショットを作成するソフトウェア。html2canvasはHTML5/JavaScript製のオープンソース・ソフトウェア。これはまた…非常に面白い、トリッキーなソフトウェアが出たものだ。Webサイトのサムネイル表示はニーズが高いサービ...

28558?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f07%2fscreenshot2011-07-30-19.41.39_thumb

  • 2011/08/11

スーパーマリオ風ゲームを作るなら。HTML5用2Dスクロールアクションゲームフレームワーク「melonJS」

melonJSはHTML5を使った2Dスクロールアクションゲームを開発するためのJavaScriptフレームワーク。melonJSはHTML5/JavaScript製のオープンソース・ソフトウェア。登場から何十年もたった今もスーパーマリオブラザーズの人気は高い。キャラクターによる所が大きいが、2Dスクロールのアクション...

28299?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f07%2fscreenshot2011-07-17-13.58.58_thumb

  • 2011/07/29

スマートフォン対策。HTML5+JavaScriptでQRコードを動的に生成「JS HTML5 QRCode Generator」

JS HTML5 QRCode GeneratorはCanvasタグを使ってQRコードを生成するJavaScriptライブラリ。JS HTML5 QRCode GeneratorはHTML5/JavaScript製のオープンソース・ソフトウェア。スマートフォン向けのコンテンツが増えたこともあって、Web上でQRコードを...

28200?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f07%2fscreenshot2011-07-11-10.26.02_thumb

  • 2011/07/27

HTML5のvideoタグにさらなる魅力を。指定時間からの再生と字幕機能を追加「Cuepoint.js」

Cuepoint.jsはHTML5のvideoタグにキューポイントと字幕機能を追加するJavaScriptライブラリ。Cuepoint.jsはHTML5/JavaScript製のフリーウェア(ソースコードは公開されている)。HTML5から新たに加わったvideoタグ。動画をHTML標準の技術だけで閲覧できるようになるの...

28258?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f07%2fscreenshot2011-07-14-16.08.23_thumb

  • 2011/07/27

みんなが好きな場面はどこだろう。動画上で投票できる動画プレーヤ「HTML5 Video Voting」

HTML5 Video Votingは動画と投票システムを組み合わせた動画プレーヤ。HTML5 Video VotingはHTML5/JavaScript製のオープンソース・ソフトウェア。多くのWebプログラマーはFlashが苦手だ。デザインとスクリプト言語が組み合わさっているため、両方を習得する必要があるのが原因と思...

28121?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f07%2fscreenshot2011-07-08-12.14.33_thumb

  • 2011/07/21

HTML5を使えばこんな芸当も。異なるブラウザウィンドウ間でボックス移動「CrossBrowse」

CrossBrowseは異なるブラウザ間でのボックス移動を行うHTML5のデモ。CrossBrowseはnode.js/JavaScript製のフリーウェア(ソースコードは公開されている)。HTML5が普及する中で様々な試みがなされている。まだレガシーなブラウザシェアが高いために実験的な要素が大きいが、それゆえに失敗を...

28033?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f07%2fscreenshot2011-07-04-11.03.24_thumb

  • 2011/07/17

ネット接続デバイスが多様化しているからこそ。HTML5のマルチデバイス対応Webフレームワーク「Joshfire Framework」

Joshfire Frameworkはテレビやタブレット、デスクトップなどマルチデバイスに対応したWebフレームワーク。Joshfire FrameworkはHTML5/node.js/JavaScript製のオープンソース・ソフトウェア。インターネットに接続するデバイスはとても多様化している。はじめはデスクトップだけ...