もともと、Appleが主にDashboardウィジェットの描画のためにWebKitに導入したCanvas API。サンプルコードと見比べながら、効率良く学習しよう Canvas APIの基礎 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。今回はHTML5のcanvas要素で使える2次元描画コンテキスト、俗にいう「Canvas API」を取り上げます。 Canvas APIは、もともとAppleが主にDashboardウィジェットの描画のためにWebKitに導入したものです。それがFirefoxやOpera、Internet Explorer（9以降）に実装され、現在はW3Cによって標準化が進められています。JavaScriptのメソッドで直接図形を描画するのが特徴で、ビットマップ画像の加工や、ゲームのようなインタラクティブ性の高いアプリケーションに向
【第24回 HTML5とか勉強会レポート】 108もあるぞ！ HTML5の要素数：D89クリップ（36） 現在、HTML5の要素数は108ある。その中から、注目のAPI、FileSystem API、Web Audio API、Geolocation APIができることをチェックしよう！ FileSystem API、Web Audio API、Geolocation API 2011年12月26日、ソフトバンクモバイルで「第24回 HTML5とか勉強会」が開催されました。HTML5とか勉強会は、HTML5に関心のあるエンジニアやコーダー、デザイナ向けの勉強会です。今回は特定のテーマに沿った形式ではなくオムニバス形式で、主にエンジニア向けのセッションでした。 セッションではいくつかのサンプルが紹介されました。サンプルの動作確認はGoogle Chrome 16で行っています。Google
Filer.jsはHTML5のファイルシステムAPIを体感するWebアプリケーションです。 HTML5のAPIの一つ、ファイルシステムAPIを体験できるのがFiler.jsです。新しいWebの可能性を存分に知ることができます。 デモです。まずディレクトリをインポートします。 インポートしました。ディレクトリはマウスでたどれます。 アイコンまたはリスト表示をサポートしています。 画像やHTMLであればプレビューができます。通常のファイルはプレビューできませんがダウンロードはできます。 リスト表示です。 ログを表示しています。 Filer.jsではWebブラウザ上でディレクトリやファイルを作成することもできます。しかし実際のファイルシステム側には影響されませんのでご注意ください。また新しいフォルダやファイルをローカルに作っても反映されないようです。 Filer.jsはHTML5/JavaScr
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。
連載目次 従来、JavaScriptでは、以下のようなメソッドを利用して、操作対象の要素を特定していた。 getElementByIdメソッド：IDの値をキーにノードを取得する。 getElementsByTagNameメソッド：要素名をキーにノードを取得する。 getElementsByClassNameメソッド：class属性の値をキーにノードを取得する。 しかし、この方法で複雑な構造のHTML文書から要素を取り出す場合、コードが複雑になりやすいという課題もあった。例えば、以下は従来のgetElementXxxxxメソッドを利用した要素の取得例だ。 上記のJavaScriptコードでは、奇数番目の要素を特定するために全てのインデックス番号をif文で判定させている。ほかにも属性値やclass属性によって要素を絞り込むならば、同じような判定式を書いた経験が読者諸氏にもあるだろう。「もっと簡
mchainはHTML5のWeb SQL DatabaseにおいてjQuery風にメソッドチェーンを使えるようにするライブラリ。 mchainはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5はこれまでのWebアプリケーションのあり方を大きく変える可能性があると思っている。その一つとして期待しているのがWeb SQL Databaseだ。Webブラウザ内でRDBMSが利用できる技術だ。 デモのTodoアプリ これをうまく使えば、最初に必要なデータをダウンロードして後はクライアントサイドだけで加工して完了したらアップしてもらうような仕組みが作れるようになる。そんな面白い技術を手軽に扱えるようにするJavaScriptライブラリがmchainだ。 mchainは基本的にWeb SQL Database APIをmchainでラッピングしているだけで使い方は変わらない
米Microsoftは米国時間2010年12月21日、HTML5仕様の検証サイト「HTML5 Labs」を開設した。策定過程の仕様に基づく機能やサービスを試験提供し、HTML5にかかわる開発作業などを支援する。 この検証サイトでは、World Wide Web Consortium（W3C）やInternet Engineering Task Force（IETF）、Ecma International（ECMA）といった標準化団体で検討中のHTML5仕様を試験する。現在、Web向け双方向通信プロトコル「WebSockets」とデータベース機能「IndexedDB」を提供している。 今後、試験サービスの更新や新たな仕様の実装に取り組む。Microsoftは、用意されているAPIなどを実際に使用し、有用かどうかなどの意見を、同社や各標準化団体に伝えるよう協力を呼びかけた。 HTML5は、We
かなり前（SDK1.3.4-5)の頃の話題なのですが、Google App Engine でCometを実現するAPIが試験的に導入されました。デモとしてAndroidのロボットが動くやつを見た人も多いでしょう（http://dance-dance-robot.appspot.com/）。 現在、Channel APIは申請し承認されたサーバ（application-id）でのみ利用可能ですが、開発環境では実装して動かしてみることができます。appengine 周辺の人達は出た当初に色々と試しているわけですが、自分も試しにゲームが出来るレベルまで使ってみようと、実装してみました。 題材は囲碁ですが、９路盤という９×９の入門用の盤面としてみました。たまたま囲碁に興味を持ったのでやってみようという流れです。 尚、ソースコードはGoogle Codeで公開しています。 http://code.g
DaVinciPad開発で学んだこと（GAE/J編） 白石俊平@OpenWeb Technology 自己紹介(1/2) 株式会社OpenWeb Technology代表 Google API Expert (HTML5) / html5-developers-jp管理人 著書に「HTML5&API入門」があります。 自己紹介(2/2) AppEngine、あんまり詳しくありません(^^; アプリの要件を満たすのが最優先だったので・・・ 今日は、ぼくの個人的なAppEngine開発経験を発表・共有させてください。 DaVinciPad DaViniciPadとは プライベートなメモ機能と、マルチポスト機能を組み合わせたサービス Chrome/Safari Extensionとして提供中 「思いついたことを、好きな場所にすぐメモできる」 DaViniciPadとは プライベートなメモ機能と
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
