GIFアニメからAPNGの時代に！ 次世代画像形式APNGを使いこなそう - ICS MEDIA
APNG（エーピング）とはアニメーションするPNG画像のことで、アニメーションGIFに取って代わる次世代の新しい画像形式です。もともとブラウザベンダーのMozillaが提案した規格で、ウェブサイトのアニメーション表現に利用できます。従来はアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなど品質面の制限が多いファイルフォーマットです。その制限を払拭してくれると期待されるのがAPNG形式です。 データ容量・品質から比較する画像形式〜APNGは容量が軽くて綺麗 上図ではアニメーションGIF・APNG(8bit・32bit)・PNG連番画像をデータ容量・データ品質でマトリクス図にしました。APNG 8bitはアニメーションGIFと同じ256色のサポートなのでAPNG 8bitの方がデータ容量は若干小さいものの、差はほとんどありませんでした。APNG 32bitは
Web Components普及の夜明け！？Polymer.jsを試してみた。 | OpenWeb
今、Google I/Oに来ています！ そこで参加したWeb Components in Actionというセッションで、以前から注目していたWeb Componentsについて、大きな動きがあったことを知りました。 Polymer.jsというライブラリにより、Web Components仕様の大部分が動作させられるだけではなく、様々なカスタムコンポーネントを既に利用可能とのことなのです！ ちなみに、Web Components仕様について多少詳しく知りたい方は、昔白石が書いたこちらの記事を参考にするといいんじゃないでしょうか。 Polymerのコードを取得 PolymerはGitHubでコードが公開されています。まずは適当な空ディレクトリに移動し、そのコードを手元にクローンします。 このコマンドを実行すると、Polymer本体だけではなく、依存しているいくつかのモジュールも同時にクローン
Web開発者に革命をもたらす！「Web Components」超入門 | 株式会社LIG
こんにちは。デザイナーの王です。 Webアプリはデスクトップアプリとは違い、まだまだ発展途上の技術のため、色んな所でまだ未熟な部分があります。デスクトップアプリでは当たり前のことでもWebアプリではできなかったりすることも多いのです。中でも、UIのコンポーネント化問題が以前から指摘されてきました。 通販サイトにある「購入ボタン」を例に説明すると分かりやすいと思います。 この手のボタンを作るには以下の手続きを要すると考えられます。 外観を整える CSS HTMLマークアップ クリックした際の挙動 JavaScript 何が厄介かというと、「再利用」が難しいというところなんですね。 例えば、同サイトの別のページで同じボタンを使いたい場合、js、CSS、HTMLを再度記述しなければなりません。しかも場合によってはHTMLのマークアップが非常に冗長化していることもある。 「購入ボタン」はあくまで一
入門 Webゲーム開発
TOPICS Web , Game , JavaScript 発行年月日 2014年03月 PRINT LENGTH 356 ISBN 978-4-87311-664-8 原書 The Web Game Developer's Cookbook FORMAT 本書は、JavaScriptライブラリとHTML5によるゲーム開発テクニックを解説するWebゲーム開発の入門書です。「HTML5ゲームエンジン」と称されるJavaScriptライブラリを、100種類を超える候補の中から厳選し、これらのエンジンと本書で紹介するツールを使って、ブラウザで動作するゲームを“手早く”開発していきます。また、本書の各章では、1つのゲームジャンルとそれを補助する1つのエンジンを合わせて解説しています。ゲームジャンルは主要な10種類を採り上げています。読者はエンジンの使い方を学ぶうちにそれらの共通点と相違点が分かる
HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ | ClockMaker Blog
HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ HTML5で3Dを実現するWebGL対応のフレームワークAway3D TypeScriptが10月に発表されました。WebGLで3Dを実現する類似ライブラリとしてMr.doob氏らが開発しているThree.jsが名前が知られていますが、Away3D TypeScriptは同等以上に高機能であり高いパフォーマンスを有しています。今回は公式サンプル(Githubでソースコードが公開されている)を通して、Away3Dでどのような表現が可能であるのか紹介していきます。 Away3Dとは Away3DはFlash Stage3Dでもっとも使われているフレームワークの一つです。アドビが提供するAdobe Gaming SDK(フレームワークやツールのパッケージ群)にもAway3Dは採用されています。
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
Canvas、WebGL、WebRTC、WebSocketなど、HTML5の花形スターとも言えるモテ系APIは、常に世間の注目を集めている。これらAPIを使いこなせるウェブディベロッパーはどこからも引っ張りだこだろう。しかし、注目度が低いながらも、今後のウェブを支える（かもしれない）最新のAPIが数多く存在する。このようなAPIは派手さが足りないゆえに話題になることもない。しかし、これら非モテ系のAPIも含めてHTML5だ。 本セッションでは、ありきたりのモテ系APIに飽きたマニアな貴方のために、普段は陽の当たらないAPIを一挙紹介する。もちろん、どれかのブラウザーに実装されているAPIのみだ。今から使おうと思えば使えないことはない。そして、W3Cにて仕様策定が始まって日が浅いため、明日にはどうなるか分からない。無くなるかもしれないし、大幅に変更されてしまうかもしれない。今覚えても役に立た
ティラノスクリプト｜スマホ対応のノベルゲームエンジン。無料
スマホ対応のノベルゲーム開発ツール。無料。 ティラノスクリプトを使えば、幅広い環境に向けてあなたのゲームを公開できます。 マルチプラットフォーム時代のゲーム開発をぜひ体験してください。 幅広い対応環境。Windows、Mac、iphone、アンドロイド、ブラウザゲームで発表できます。 無料。商用利用にも制限なし。さらに改造もOK！ ティラノスクリプトの作品数は20,000作品を突破！情報も充実しています。 初心者向けチュートリアルを試してみる あらゆる環境で動作し、多彩な配布方法が用意されています ティラノスクリプトで作られたゲームはあらゆる環境で動作します。 作品の配布方式も「Windowsアプリケーション」「MacOSアプリ」「iphoneアプリ」「Andoroidアプリ」「ブラウザゲーム」「ホームページ埋め込み」 「各種携帯ゲーム機、据え置き機」など、 多くのプレイヤーに作品を届ける
Fixture is under construction
Thank you for being patient. We are doing some work on the site and will be back shortly.
html5でアプリの壁を超える方法
制限 同時に再生できる音源は1ファイルのみ 再生できるタイミングはユーザイベントのハンドラ内だけ プリロード不可 OS自体のサイレントモードと連動せず BGMを流すだけならこんな方法も $('<div>BGMを再生しますか？</div>').appendTo('body').click(function () { $(this).remove(); (new Audio('bgm.mp3')).play(); }); $('body').on('click', 'a', function (e) { e.preventDefault(); $.get($(this).attr('href')).success(function (html) { $('body').html(''); $('body').append($(html).find('body')); }) });
導入 – Dart逆引きリファレンス | DevelopersIO
導入（Getting started） 1. HTMLにDartコードを埋め込みたい 下記のようにscriptタグを定義します。スクリプトタイプには「application/dart」を指定します。 <script type='application/dart' src='example.dart'></script> また、Dartエンジンを起動させる為に下記の記述が必要です。 <script type='text/javascript'> if (navigator.webkitStartDart) { navigator.webkitStartDart(); } </script> 2. プログラムの開始ポイントが知りたい Dartコードのプログラム開始ポイントはmainメソッドになります。 main() { // Dartコード } Dartコードではこのmainメソッドは必須のも
JavaScriptでファイル操作！？ File APIを使いこなそう
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。
createObjectURLがすごい件 - プログラムモグモグ
最近またLocal Player (Chrome Player)を実装しなおしています. 一応説明しておくと, Local Playerは, 完全にローカルで動作する音楽プレイヤーです. シンプルさを求め(実装がめんどくさいだけ), 操作しやすく(これは大事), 良い感じのプレイヤーです. 半年前に, ソースコードがスパゲッティになって, 開発を中断していましたが, 最近また書きなおし始めたのです. 音楽プレイヤーをブラウザー上で実装するのには, 音楽ファイルをJavaScriptで読み込まなければなりません. そこでHTML5ですよ！！！ <audio src="url/to/musicfile.mp3" type="audio/mp3" /> みたいな感じで, 音楽を再生できます. 詳細は他のページに譲ります. さて, 音楽ファイルを再生するには, ローカルファイルからurlをaudi
パズル、落ちものゲームに使えるHTML5/JavaScriptのゲームフレームワーク「LimeJS」 | MOONGIFT | オープンソース・ソフトウェア紹介を中心としたITエンジニア/Webデザイナー向けブログ
LimeJSはHTML5/JavaScriptによるWebゲームフレームワーク。パズルゲーム向き。 LimeJSはJavaScript製のオープンソース・ソフトウェア。Webベースのゲーム開発が熱い。その時、鍵になるのはJavaScriptだ。HTML5の登場によってWeb、JavaScriptでできることは大きく広がっている。今こそWebベースのゲーム開発を行う時だ。 並べる系のパズル ゲームと言ってもジャンルはとても幅広い。アクションもあれば、パズル、ノベル、シューティングゲームといった具合だ。一つのゲームエンジンが全て行える訳ではないので、開発したいゲームの種類に応じてエンジンを選ぶべきだ。パズル、落ちものゲームを作るならLimeJSが使えそうだ。 LimeJSはHTML5を使ったJavaScript製のゲームフレームワークだ。iOSでの利用も想定されている。デモに登録されているゲー
「誰でもゲーム作りを」ゲームエンジンのGameSalad、HTML5に対応 / GameBusiness.jp
利用者が増えているゲームエンジンの「GameSalad」はHTML5での出力に対応したと発表しました。 「GameSalad」はゲームエンジンというよりはゲーム開発ツールと呼んだ方がしっくりくる、「誰もがゲームを作れる」ことを目指したツール。プログラムスキルが無くてもコードを書かずに、ドラッグ＆ドロップを中心とした操作で素材を追加して、動きのパラメーターを設定していくだけで簡単にiOS向けゲームを開発する事が出来ます。今回新たにHTML5としてもゲームを出力できるようになりました。 開発したゲームはウェブサイトに埋め込んでプレイしてもらうことが可能。プラグインを必要としないWebGLを採用していることから、開発されたゲームを遊ぶプレイヤーにとっても嬉しいものとなります。GameSaladの公式サイトでは実際に制作された事例が紹介されています。『Zombie Drop』や『The Secre
WebベースのアクションRPGを開発するならば使いたいフレームワーク·RPG JS MOONGIFT
RPG JSはHTML5/JavaScriptによるWebベースのゲーム開発用フレームワーク。 RPG JSはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5を使ったゲームフレームワークが続々と登場している。ある程度汎用的なものもあるが、やはりゲームジャンルに合わせたフレームワークを選ぶのが大事だろう。 デモゲーム RPG（ロールプレイングゲーム）は常に人気の高いゲームジャンルだ。Webブラウザ上でできるRPGを自作したいならば使うべきはRPG JSだろう。 RPG JSはHTML5/JavaScriptで作られている。矢印キーとスペースで動いたり話しかけたりする。サウンドにも対応する。そして剣を装備するとAキーで振ることができる。NPCも数多くいて、話しかけるとゴールドを貰えたりする。聖剣伝説のようなアクションRPGになっており、どんどん攻撃をしかけていけるよ
「enchant.js」でゲームはどれくらい動くのか？ HTML5でゲームベンチマークを取ってみよう
「enchant.js」でゲームはどれくらい動くのか？ HTML5でゲームベンチマークを取ってみよう ライター：Veki 4月28日にenchant.jsを使用したゲーム制作の記事を掲載し，かなり大きな反響をいただきました。今回は，ゲーム制作の話ではありませんが，HTML5とJavaScriptでは，どれくらいのゲームパフォーマンスが期待できるのかというあたりについてまとめてみましたので参考にしてください。 さて，前回作ったサンプルプログラムを，最初にスマートフォンで実行してみたときは，あまりの遅さにちょっと衝撃を受けたのですが，PCでもWebブラウザを変えてみると，かなりばらつきが出ることが分かりました。JavaScriptのベンチマークテストはそれなりに行われているのでしょうが，実際のところ，どれくらい「ゲームに使えるか」という観点からのものは，ほとんどないようです，そこで，前回のゲー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
chrome-life.com
chrome-life.com
BrowserQuest
Mozillaの研究者ら、HTML5とJavaScriptでPDFレンダリングに成功 ネイティブプラグインは不要に？