このJavaScriptフレームワークでHTML5は救われるかもしれない | readwrite.jp
HTML5はウェブ・ページをアプリのように動かし、そしてFlashに取って代わるはずだった。しかしパフォーマンスの問題で、アプリ開発者のHTML5導入は遅れてしまっている。 Famo.us社はこのギャップを埋めるためにスタートした小さな会社だ。同社は2Dと3Dの両方のエフェクトを高速表示するため、HTML5の遅延要素を本質的に回避する独自のフレームワークを開発した。このFamo.usによって、開発者はHTML5のパフォーマンスの問題に苦しむことなく、より短期間でクロスプラットフォームのアプリを開発することが可能となったのだ。 Famo.usの秘密はJavaScriptを利用していることだ。JavaScriptは極めて高速に動作し、既にあらゆるブラウザで広く使われている。Flashとは異なり、ブラウザ・プラグインをユーザーがダウンロードしたり、ブラウザメーカーがそれをサポートする必要もない。
JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」:phpspot開発日誌
Fabric.js Javascript Canvas Library JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」 canvasのネイティブAPIは若干分かりづらいという方も多そうですが、このライブラリを使えばオブジェクト指向で楽々Canvasプログラミングが出来そうです 単に便利にコーディングできるようになるだけでなく、オブジェクトをマウスで拡大や回転できるなどといった色々な機能も盛り込まれていて便利そうです ネイティブAPIだと、四角形を描画するのに、次のようなコードを書きます。 これが、Fabric.jsを使うと次のように、とても分かりやすくなります。fillRectの引数の順ってどうだっけ？と毎回リファレンスを牽く必要もなくなりますね 他にもドキュメントを参照すれば、CanvasをネイティブAPIで書く面倒さを理解できるはず デモページも結構充実しており
HTML5をすぐハイブリッドアプリとして試せる無料のツール「Monaca」を使ってみた
HTML5/JavaScriptで作成したアプリケーションをラップし、ネイティブアプリケーションとして扱える「ハイブリッドアプリケーション」は、高い生産性でモバイルアプリケーションを開発できるといったメリットから注目されています。 しかし実際に自分でハイブリッドアプリケーションを開発しようとすると、例えばiOS用ならMacOSのマシンを用意してPhoneGapの環境を整え、ビルドしたアプリケーションをいちいちiPadやiPhoneに転送して試すなど、それなりの手間がかかります。Publickeyでは以前からハイブリッドアプリケーションに注目して紹介してきたため、時間があれば自分でもHTML5とJavaScriptで作ったアプリケーションをハイブリッド化しみてみようと思いつつ、なかなか開発環境を整備するに至りませんでした。 そこで思い出したのが「Monaca」です。Webブラウザ上でHTML
美麗なグラフをSVGで描画できるJSライブラリ「dc.js」:phpspot開発日誌
dc.js - Dimensional Charting Javascript Library 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 次のような円グラフや棒グラフをオブジェクト指向の分かりやすいコードで描画出来ます。 円グラフのコード例。メソッドをチェーンさせて直感的にグラフを描画可能。 SVG対応していないブラウザでは描画できませんが、軽くてよさそうですね 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」
お客様の中にWebシンセプログラマはいらっしゃいませんか | g200kg Music & Software
そろそろWebベースのシンセサイザーもなんとか作れる環境が整いつつあるのですが、今のところはまだ、音源部とシーケンサー部をまとめてクローズドなアプリにするしかありません。今後を考えるとここをどうするかが課題です。 やはり複数の楽器を同期運転したいですよね！！ Web楽器のurlを指定してプラグインのように使う、というのができればなあ・・・ という事でまじめに考えて見た。 HTML5のpostMessageでクロスドメインの連携ができますので、ここにMIDIメッセージをのせてホストからWebシンセに送ります。パフォーマンスの問題もあるので今のところはやりとりするのはMIDIのみとして、音の出口はとりあえずそれぞれのWebシンセが WebAudioAPIなりを叩いて勝手に出します。 postMessageで送れるのは文字列のみなのでこんな感じのフォーマットにします。 "midi,90,3c,6
コードリーディングに最適！たった200行で作れるHTML5製テトリスのプログラミング学習ムービー - Chrome Life
みなさんは、フルスクラッチでテトリスを作ることができますか？ プログラマーといってもゲームを作る機会が少ないと、なかなかすぐには作れないと思います。 JavaScriptでなんとか作れそうな感じもしますが、すんなり実装はできない感じがします。 特にグラフィックやアニメーションをうまく使ったものを作るには、それなりの経験値が必要だと思います。 そこで、今回ご紹介するのが、教育目的で作られたHTML5製テトリスのプログラミング学習ムービーです。 HTML5 tetris - making of HTML5 tetris - making of 驚くべきことに、 たったの４５分でテトリスが完成！ それもフルスクラッチで、jQueryなどのライブラリーを一切使っていません。 Youtubeのムービーは早送りしていますが、動きを確認しながら実装しているのが分かります。 実際に、こちらでテトリスをプレ
SVGのグラデーションとJavaScriptとの連携
はじめに HTMLの周辺技術について解説する本シリーズですが、前回はSVGの様々な図形描画要素について解説しました。今回はWebデザインでも有用なSVGのグラデーション機能について解説します。また、JavaScriptからSVGの要素を操作する方法についても解説します。 サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。 グラデーションを使ってみる 前回はfill属性を使って図形を単色のベタ塗りを行いましたが、SVGではよりスタイリッシュな、Webページで多用されるグラデーションによる塗りつぶしも可能です。SVGでは線形グラデーション（linearGradient要素）と放射状グラデーション（radicalGradient要素）の2種類のグラデーションに対応しています。 グラデーションの使い方はやや複雑なので、まずはサンプルから見ていきましょう。以下のコード
HTML5 ファイルシステムAPI
従来のWebアプリケーションでは対応できなかったファイルI/Oによる永続化を実現するべく策定されたHTML5 File APIを概説する書籍です。File APIが実装されたGoogle Chromeを例に、ストレージの使用法、ファイルの読み書き、ドラッグ&ドロップ、ディレクトリ操作、URLを使った参照、同期APIなどのトピックを紹介します。なお本書はEbookのみの販売となります。 はじめに 1章 概要 ユースケース セキュリティ上の考慮事項 ブラウザのサポート 注意 2章 ストレージとクオータ ストレージの種類 一時ストレージ 永続ストレージ 無制限ストレージ クオータ管理API ストレージの追加要求 現在の使用状況のチェック 3章 作業の開始 ファイルシステムを開く エラーの取り扱い 4章 ファイルの処理 FileEntry ファイルの作成 名前によるファイルの読み取り ファイルへの
ローカルストレージに配列やオブジェクトを格納する | Chrome Extensions API リファレンス
ローカルストレージに配列やオブジェクトを格納する 拡張機能の設定などを保持しておくのに便利な localStorage ですが、記憶できる値は文字列だけです。 オブジェクトの格納を試そうとして、次のような結果になってしまった人もいるのではないでしょうか(自分です)。 var options = { prop1: "", prop2: 123, ... } localStorage['opt'] = options; ... var options = localStorage['opt']; console.log(options); [実行結果] [object Object] 一見オブジェクトが取得できたようですが、実のところ単に “[object Object]” という文字列が格納されていただけです。 このような場合、オブジェクトや配列もサイズが極端に大きくならないならば、JSON
JavaScript 3DレンダリングエンジンのThree.jsを試す
こんにちは。 KRAYアルバイトの浅海です。 今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。 半信半疑で使ってみたところ、たしかにThree.jsでは、3D特有の行列計算や数学的思考をせずとも、3Dを表示、操作することができました。 「ちょっとのプログラムで3Dができる。」 この面白さを皆さんに届けたいです。 目次 立方体を表示する 光をあてる テスクチャを貼り付ける マウスで回転させる マウスで移動させる クリック判定する Three.js web上には、HTML5のcanvasを利用した様々なサンプルページやアプリケーシ
スマホアプリの作り方【超まとめ】Web編：HTML5やjQuery MobileなどスマホWebアプリ開発に役立つ記事52選 - ＠IT
Web編：HTML5やjQuery Mobileなど スマホWebアプリ開発に役立つ記事52選 ＠IT編集部 2012/1/31（2013/2/28 改訂） iOS（iPhone／iPad／iPod touch）、Android、Windows Phoneなど、さまざまなスマートフォンのプラットフォームのアプリを作るための＠IT記事のまとめです。今後、順次更新・追加していきます。 開発者が登録したApp StoreやMarketplaceなどからダウンロードしてインストールするアプリ、もしくは、あらかじめインストールされているアプリは、「ネイティブアプリ」と呼ばれています。iOSやAndroid、Windows PhoneといったOS上で動き、マイクやカメラなどデバイスの機能を十分に使えるのが特徴です。作り方は、基本編やデザイン／グラフィック編で紹介した記事が参考になると思います。 一方で
ヤター！ウェブブラウザで動くシンセできたよー - aike’s blog
最近のHTML5やWebブラウザのAPIの進化はけっこうすごくて、普通にサウンドプログラミングもできるようになってきました。そんなわけでシンセサイザーアプリを作ってみました。 サウンドを扱う方法はいくつかあるみたいですが、Google Chromeで使えるWeb Audio APIがEQやディレイなどあらかじめ用意されていて良さげなので使いました。 http://aikelab.net/websynth/ まだ、バグもけっこうあるのでじょじょにブラッシュアップしていきます。 Chrome以外では動かないと思うので試せない人はこちらの動画をどうぞ。 Google API Expertが解説するHTML5ガイドブック 作者: 羽田野太巳,白石俊平,古籏一浩,太田昌吾 出版社/メーカー: インプレスジャパン 発売日: 2010/09/16 メディア: 単行本（ソフトカバー） この商品を含むブログ
JavaScriptでファイル操作！？ File APIを使いこなそう
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。
Android4.0にはHTML5 History APIが実装されていない - 愛と勇気と缶ビール
（※このエントリーは、「Androidのブラウザは本当のクソAdvent Calendar」の一日目の記事として書いています） 12/2に発売予定のGalaxy Nexusにも搭載される予定のAndroid4.0ですが、なんと標準ブラウザにHTML5 history APIが「実装されていません」。 2.2系、2.3系にはあったのに、なぜかなくなっています。 http://caniuse.com/#search=pushState ここに書いてある通り、実際にAndroid4.0のemulatorでHistory APIが「ない」ことが確認されています。4.0はスマートフォン向けの2系とタブレット向けの3系の合流、という立ち位置らしいですが、ブラウザに関してはHistory APIのない3系に寄ってしまっているのでしょうか…。 「お前の好きなAPIがなくなったくらいで騒ぐなよ」という人もい
Android風の簡単な通知を実現する「jQueryToast」:phpspot開発日誌
jQuery Toast Plugin Android風の簡単な通知を実現する「jQueryToast」 クリックすると次のようなAndroid風の通知がページ上に現れます。 次のように、.toastでメッセージとオプションを渡してあげるだけなのでalertみたいにお手軽に使うことができます。 Android用のHTML5ベースのアプリなんかでも使っても良さそうですね。 関連エントリ HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。 通知件数表示付きのメニュー実装jQueryプラグイン「Notification Menu」 HTML5のDesktop Notificationを簡単に実現するjQueryプラグイン「jwNotify」
HTML5, CSS3, jQueryを使用したフロントエンド開発用のフレームワーク -G5 Framework
CSSのキャッシュ対策 クロスブラウザ対応の角丸、ボックスシャドウ、不透明 ショートハンドCSS、再利用可能なclass ページ下部に固定表示されるSticky Footer CSS（Reset関連） リセットはHTML5ベースのEric Meyer's Reset Reloaded フォントのノーマライゼーション Webkit系ブラウザのフォントのスムージング フォーススクロールバー ラベルの一列化 クリック可能なインプット要素 スクリーンリーダー対応 IE7のイメージリサイジング 印刷時のスタイル X(HTML) クリーンなコード構造 コンテンツ幅は940px F型レイアウト 古いバージョンのIEからイメージツールバーの削除 最新のIEのレンダリングエンジン jQuey 1.5.2ベース（1.4.4も可） ページ上部へスムーズにスクロール HTML5のプレースホルダー機能 ナビゲーショ
複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」:phpspot開発日誌
複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」 2011年01月25日- jQuery File Upload Demo 複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」。 「Upload files」ボタンを選択するとダイアログが開き、複数ファイルを一括して選択。その後すぐアップロードが始まり、プログレスバーを通して進捗を表示、アップされたファイルのサムネイルも次のように表示してくれるという、ファイルアップロードのフルセットを提供してくれます。 アップされたファイルの横に表示されているごみ箱アイコンをクリックすればすぐさま削除も可能。 HTML5ベースなプラグインなのでFlashも不要です。 アップロードの受け口としてphpのソースも同
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://html5please.us/
Home
WebSocketことはじめ