詳解版はこちら => http://www.slideshare.net/You_Kinjoh/html5-open-web-platformRead less
![HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/95bd358cd403981ced3c495f211f88afea03fb34/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2F20131018coretechexpostfacto-131019082845-phpapp02-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
リッチコンテンツという言葉が以前から存在するように、最近はテキストや画像だけでなく、動画や動画のストリーミング配信を用いたコンテンツが多いですね。 只、一概に言えませんが、動画コンテンツはファイルサイズやトラフィックの問題から、外部サービス(YoutubeやUSTREAM)を使うケースが大半かと思います。 そういった背景もあり、HTML5で追加されたVideo要素にはこれまで注目していませんでした。 (仕様が標準化段階であり、ブラウザ毎に異なる動画形式でファイルを用意する煩雑さも要因の一つ) さて、冒頭からVideo要素のネガティブな面ばかり取り上げましたが、メリットも勿論存在します。 今回はそんなVideo要素を中心にご紹介します。 Video要素とは 既にご存知かと思いますので誤解を恐れず簡単に説明すると、 ブラウザ単体で(Flash PlayerやQuickTimeなどプラグインを必
HTML5 vs ネイティブ。モバイルアプリはどちらで開発するべき?(前編) Google I/O 2011 モバイルアプリケーションを開発する方法として、JavaやC/C++などのプログラミング言語とSDKを用いてネイティブアプリケーションとして開発する方法以外に、HTML5/CSS/JavaScriptを用いて開発する方法が登場してきています。 この2つのアプリケーション開発にはどのような違いや利点があるのでしょうか? Androidを題材にして解説したセッション「HTML5 versus Android: Apps or Web for Mobile Development?」がイベントGoogle I/O 2011で行われました。 HTML5でモバイル開発を行う利点 Reto Meier氏(左)、Michael Mahemoff氏(右)。
「deviantART Muro」はHTML5で作られたドローツールです。 かなり色んな描き方が可能で、フィルタやレイヤーも備わっています。 ブラシ機能はアカウント取得後、購入が可能です。 動作もスムーズでかなり使えるんじゃないでしょうか。 以下に使ってみた様子を載せておきます。 まず「deviantART Muro」にアクセスしましょう。 アクセスすると、真っ白なキャンバスがありますので、自由にお絵かきできます。 線の種類は最下部のメニューより選べます。 最上部には、フィルターがあったり。 PROモードにすると、右側にレイヤーが表示されます。 ブラシ機能は購入して利用できるようですね。 描いた絵は画像として保存することができます。 deviantARTこんなの作ってたんですねー。 FlashじゃなくHTML5で作られた画像ツールはいろんなところで登場していますね。 (本記事で紹介したサイ
Responsive bar charts in HTML and CSSBuilding flexible data visualizations for international sites Speed vs. Duration - A use case for mixed unit divisionLearn how to solve the CSS animation challenge of varying speeds across different screen sizes. This post introduces a technique using atan2() and tan() for unitless viewport width calculations and provides practical examples.
8. Flash HTML5 Adobe - Wallaby http://labs.adobe.com/technologies/wallaby/ Google - Swiffy http://swiffy.googlelabs.com/ OpenSource - Smokescreen http://smokescreeen.us - FlashForward https://github.com/ken39arg/FlashForward/ iOS Flash HTML5 http://www.gree.co.jp/news/press/ 2011/0711.html (DeNA) - ExGame http://www.broadtail.jp/tec/exgame.html CLOQUE- FLAML http://flaml.jp/
このコーナーでは、JavaScriptから図を描くことができるCanvasについて解説します。 Canvasとは Canvasとは何か、そしてCanvasで何ができるのかを事例を踏まえて分かりやすく解説します。 Canvasの使い方 実際に、Canvasをどうやって使いこなすのかを、サンプルを通して解説していきます。 いろいろな図形を描く Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 色を指定する このコーナーでは、Canvasで描く図形に色を指定する方法を紹介します。またCanvasでは指定した色に透明度を与えることも可能ですので、その方法についても紹介していきます。 線形グラデーションを指定する このコーナーでは、Canvasで描いた図形にグラデーションを指定する方法
■<video>タグで動画を埋め込む 現在、インターネット上で動画が提供される場合には、Flashなどの独自フォーマットを利用するのが一般的です。 こうした独自フォーマットの動画を再生するには、 それぞれのフォーマットを再生するのに必要なプラグインを、ブラウザに追加インストールする必要があります。 HTML5では、任意の動画フォーマットを文書に埋め込むための<video>タグが追加されています。 この<video>タグを使用することで、ユーザーにプラグインをインストールしてもらうことなく、 HTMLからシンプルに動画を扱えるようになります。 感覚的には<img>タグで画像を扱うような感じです。 <video>タグで文書に動画を埋め込む場合には、例えば以下のように記述します。 とてもシンプルです。 ■ユーザー環境への配慮 <video>タグは、旧いブラウザではサポートされていない場合がありま
Hey guys. Today I’m going to teach you how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. Why a hover-based interface? you might ask. Well, with the popularity of touch-based web applications simplifying the way that people can use sites on mobile devices, I think that there’s room for us to look into ways of making it even easier for people to use sites in
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く