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

技術 - HTML5の記事一覧

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

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

もっと見る

32175?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f11%2fscreenshot2011-11-18-15.30.43_thumb

  • 2011/11/27

Google製のFlash to HTML5機能拡張「Swiffy Extension for Flash Professional」

Swiffy Extension for Flash ProfessionalはFlash CS向けの機能拡張で、FlashファイルのHTML5エクスポートを実現します。数ヶ月前にGoogleがリリースしたFlashファイルをHTML5に変換するサービスがSwiffyです。それをさらに発展させてFlashの機能拡張とし...

31943?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f11%2fscreenshot2011-11-13-10.22.09_thumb

  • 2011/11/22

HTML5を使ったオンラインドキュメンタリー「One Millionth Tower」

One Millionth Towerはカナダ国立映画庁作成のHTML5製オンラインドキュメンタリーです。HTML5やWebGLを使って何ができるのか、色々思い描きつつもなかなか実際に取り組むのは困難です。そこでOne Millionth Towerをぜひ見て欲しいと思います。カナダ国立映画庁作成によるOne Mill...

30556?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f10%2fcaf8b8c70eeab9536e61582267f3cc511

  • 2011/10/21

UMLなんて…と言わずに試してほしい。JavaScriptで描画する「jsUML2」

jsUML2はJavaScript、Canvasタグを使ってUMLを描画するソフトウェアです。2000年くらいの登場以降、一気に花開くかと思ったUMLですが、エンタープライズの開発くらいでしか聞かれなくなってしまいました。設計段階で全てを表すのはなかなか難しいですが、多数の人たちが開発に関わるならば現状システムをUML...

30505?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f10%2fscreenshot2011-10-12-11.21.37_thumb

  • 2011/10/21

なぜ?CanvasではなくCSS3を駆使して描くドローライブラリ「Donatello」

Donatelloは幾何学模様をJavaScript/CSS3で描くドローライブラリです。HTML5を利用すればこれまで画像やFlashを使わざるを得なかった描画がJavaScriptとCSSを組み合わせて実現できるようになります。どれくらい奇麗なグラフィックスを描けるのか、さらにそれをいかに手軽に実現できるかを知るの...

30445?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f10%2fimage004_thumb1

  • 2011/10/19

Webとネイティブのいいとこどり。HTML5をラッピングしたAndroidアプリの参考に「html5webview」

html5webviewはHTML5を積極的に取り入れたAndroidアプリを作るサンプルです。スマートフォンはHTML5を積極的に使っていくのに最適なデバイスとなっています。HTML5を積極活用すればネイティブアプリ並のWebアプリケーションも実現できます。そんなHTML5型Androidアプリを作ってみるなら参考に...

30430?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f10%2fscreenshot2011-10-11-16.22.39_thumb

  • 2011/10/19

Webブラウザ上でデモをする際に。HTML5/JavaScriptコードをその場で実行「CoderDeck」

CoderDeckはWebスライドツールに組み込んで使えるソフトウェアで、表示しているコードをそのまま実行して結果を確認できるJavaScriptライブラリです。プログラマーの技術系プレゼンテーションにおいてコードのデモを見せて、その実行結果もその場で実演する時があります。そんな時、もし実行言語がHTML5/JavaS...

30282?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f10%2fscreenshot2011-10-06-19.51.31_thumb

  • 2011/10/16

WebMに対応した動画ライブストリーミングサーバ「stream.m」

stream.mはWebMフォーマットをライブ配信するストリーミングサーバです。動画のストリーミングサーバを構築するのは大変ですが、stream.mはFFMPEGと組み合わせてHTML5タグを使ったストリーミングサーバを構築できます。実際に動画を表示している所です。元にしている動画はWebMフォーマットになります。こち...

29856?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f09%2fscreenshot2011-09-22-14.48.16_thumb

  • 2011/10/04

面白い!Ruby/Pythonなど多数のプログラミング言語をWebブラウザ上で実行する「repl.it」

repl.itはWebブラウザ上で多数のプログラミング言語を実行し、その結果を確認できるソフトウェア。repl.itはHTML5/JavaScript製のオープンソース・ソフトウェア。プログラミングの学習はどこで行うのが良いだろうか。書籍を購入する人もいれば、オンラインのチュートリアルを見る人もいる。いずれの場合もロー...

29820?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f09%2fscreenshot2011-09-20-17.49.54_thumb

  • 2011/10/02

注目!Flash CS風のUIでHTML5のタイムラインアニメーション作成「Radi」

RadiはHTML5対応のタイムラインベースのアニメーション作成ソフトウェア。RadiはMac OSX用のフリーウェア(β版中につき無料)。Webブラウザ上でインタラクティブでタイムラインベースのアニメーションを作ろうと思ったらFlashを使うのが一般的だ。しかしそれはHTML4までだ。HTML5になればCanvasタ...

29723?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f09%2fscreenshot2011-09-18-10.51.59_thumb

  • 2011/09/27

多彩なウィジェットで高品質なWebアプリケーションを素早く構築「Kendo UI」

Kendo UIはデスクトップやスマートフォン、タブレットに対応したUIフレームワーク。Kendo UIはHTML5/CSS3/JavaScript製のオープンソース・ソフトウェア。WebのUIは表現力がとても高く、自由度が高い。それは良いことでもあるし、悪いことでもある。束縛が何もないために自由に発想できる反面、デザ...

29706?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f09%2fscreenshot2011-09-18-10.26.51_thumb3

  • 2011/09/27

Webブラウザ上でviクローンを実現「Web vi」

Web viはCanvasタグを使ったWebブラウザ上で動作するviクローン。Web viはHTML5/JavaScript製のオープンソース・ソフトウェア。Webブラウザ上で動作する高機能なテキストエディタが出てきて欲しい、それは皆が願っていることではないだろうか。Webブラウザでもっと自在にテキストが書けるようにな...

29676?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f09%2fscreenshot2011-09-17-17.04.56_thumb

  • 2011/09/26

HTML5でゲーム開発をはじめたい人は注目「HTML5 Game Dev」

HTML5 Game DevはHTML5でゲームを開発し、そのノウハウを蓄積するプロジェクト。HTML5 Game DevはHTML5/JavaScript製のオープンソース・ソフトウェア。iOS/Androidにはじまり、モバイル向けのゲーム開発が熱い。とは言え、Web開発で培ってきたナレッジがそのままゲームに活かせ...

29632?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f09%2fscreenshot2011-09-15-16.36.32_thumb

  • 2011/09/24

次世代型WYSIWYGエディタ。見たままにコンテンツを編集する「Mercury Editor」

Mercury Editorは実際に表示された内容をそのまま編集できるWYSIWYGエディタ。Mercury EditorはHTML5/JavaScript製のオープンソース・ソフトウェア。Webサイトを運営していると、一部のデータを変更したいというニーズは必ず発生する。全てを自動化できる訳はなく、アイコンやラベルの変...

29431?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f09%2fscreenshot2011-09-07-20.08.13_thumb

  • 2011/09/18

あの機能が使えるかどうか。HTML5/CSS3の機能単位の判別ライブラリ「Modernizr」

ModernizrはHTML5/CSS3を機能単位で実装状況を判断するJavaScriptライブラリ。ModernizrはJavaScript製のオープンソース・ソフトウェア。数年前まではブラウザによって動く機能、動かない機能というのがあった。それらを吸収するライブラリとしてPrototype.js/jQueryなどが...

29330?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f09%2fscreenshot2011-09-05-14.21.53_thumb

  • 2011/09/15

ノームの戦うEmberwindをHTML5+WebGLへポート「Emberwind」

Emberwindは同名ゲームをHTML5+WebGLへポーティングしたゲーム。Operaチームが開発している。EmberwindはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5の技術の一つ、WebGLはWebベースで高度なグラフィックスを描くためのAPIだ。だがどんなグラフィックスを描け...

29298?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f09%2fscreenshot2011-09-05-10.55.07_thumb

  • 2011/09/13

メソッドチェーンを使えばWeb SQL Databaseも簡単に「mchain」

mchainはHTML5のWeb SQL DatabaseにおいてjQuery風にメソッドチェーンを使えるようにするライブラリ。mchainはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5はこれまでのWebアプリケーションのあり方を大きく変える可能性があると思っている。その一つとして期待し...

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製のフリーウェア(オープンソースとなっているがライセンスはなし。ソースコードは公開されている)。スマートフォン...