サイト内検索:

HTML5の最近のブログ記事

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.

マウスが何かの上に乗った時の状態をHoverというのですが、そのHover時に使えるビジュアル効果集です。

Hover.css

こういうCSSは世の中に既にたくさんあるんでしょうけど、個人的にはこれだけ知っていればもういいんじゃないか、と思いました。

その場ですぐに試せますので是非体験してみてください。

MITライセンスです。

Hover.css - A collection of CSS3 powered hover effects

REAL SAMURAIは2014年2月25日、Adobe Flashで作成したアプリケーションの画面をHTML5に変換するクラウド型サービス「MAKE5」(写真)を発表した。
HTML5の知識を必要とせずにFlashをHTML5に変換するエンジン機能と、変換後のHTML5を配信するWeb基盤の機能を兼ねている。

FlashをHTML5に変換/配信するクラウドサービス、REAL SAMURAIがベータ版を開始

気になる費用ですが、

Adobe Flash ProfessionalからMAKE5を利用するためのエクステンションは無償。MAKE5によるコンテンツ変換結果のプレビューは無償。コンテンツ変換後のHTML5を実際にWeb配信基盤上に置いてアクセス可能な状態にするエクスポート料金は、1コンテンツ当たり6000円で、維持費は月額2000円(1カ月の配信回数が101万回以上に達した場合は追加料金が必要)。

変換そのものは無料のようです。ですよね、どれぐらい完全にコンバートできるかわからないし責任とれませんからね。

で、変換したものがOKだったら変換料金が6000円。で変換したものはMAKE5のWebサーバーからしか配信できないということでそこの配信料で稼ぐというモデルのようです。

とはいえ、ブラウザで変換済みHTML5を表示させちゃえばあとはコピーしちゃえばいいんじゃないかと思いますが、まあ月額2000円だったらそんな手間かける必要もないか、って思わせる価格帯がいいですね。

ということで、いつか利用する場合があるかもしれない、ということで。

Skycons is a set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas tag.

Skycons

ということで以下の10個のお天気に使えるアイコンです。アニメーションします。

Skycons

形状を変更するのはちょっと面倒ですが、色を付けたりは簡単にできそうなので、なにかのお仕事でお天気アイコンが必要になった、なんて時に利用してみるとよいかもしれません。

ちなみにこのアイコンは先日「世界最高のデザインのお天気予報サイト」とすごく話題になった「Forecast」というサイト用に作成されたアイコンだそうです。

Forecast

Forecastにまだアクセスしたことがない人は是非試してみて下さい。
(ファーレンハイト(華氏)をセルシウス(摂氏)に変更するのはページの右上でできます)。

さらにちなみに、このアイコンは以下のサイトにインスパイアされたそうです。アニメーションが必要ない、って人はこっちでもよいかもです。こんな感じのアイコンです。

Climacons%20%E2%89%A1%20Climatically%20Categorised%20Pictographs

Climacons

GoogleのChromeの最新版で以下のサイトにアクセスしてみてください。

HTML5 Face Detection

最新版じゃないと

「Please go to about:flags in Google Chrome and enable the "MediaStream" flag.」

というメッセージが表示されるのでアドレスバーに「about:flags」って入力してMediaStreamというフラグをenable(有効)にしてみてください。

最新版のChromeだと「Please allow access to your camera!(カメラへのアクセスを許可して下さい)」って聞いてくるのでOKします。MacBookだと標準の内蔵カメラがOnになります。

で、顔検知です。

ええ、顔を検知しています。

それにしてもまさかこんなデモだとは!どっかから「テッテケテー♪」って音楽が流れてきそうです。

いやー、なんかこう心が折れたよ・・・。

米Adobe Systems Incorporatedは25日(現地時間)、Web開発のための新しいソースコードエディター「Brackets」を発表した。

Adobe、HTML/CSS/JavaScriptでできた次世代コードエディター「Brackets」を発表

WindowsとMacで利用できるようです。

Brackets」は、HTML/CSS/JavaScriptなどの編集に特化したオープンソースのソースコードエディター。「Brackets」自身がHTML/CSS/JavaScriptで構成されており、開発にも「Brackets」が利用されているというのが興味深い。

そんなわけでダウンロードしてみました。

https://github.com/adobe/brackets/downloadsにアクセスして今だったらbrackets-sprint-10.zipというのをダウンロードして解凍するとbinフォルダ内にwinとmacがあるのでどっちか選んで起動させればOKです。

また、これまでのテキストエディターにはない斬新な機能を搭載している。たとえば、HTMLタグの上にカーソルを合わせて[Ctrl]+[E]キーを押せば、当該要素のスタイルをインラインで編集することが可能。外部スタイルシートにも対応しており、わざわざファイルの切り替えを行わなくて済む。本機能は"Quick Edit"と呼ばれており、JavaScriptで利用すれば関数のインライン編集も可能だ。

ああ、これは確かに便利だな。こういうのを体験するとどうしてこれまでのHTMLエディタにはこういう機能がなかったんだろう、って思いますよ。

さらに、編集中のソースコードをWebブラウザーでプレビューし、変更・保存をすぐさま反映させることのできる"Live Preview"機能も搭載している。ソースコードの保存・ブラウザーのリロードといった手間を省くことができるので便利。現在のところ対応ブラウザーは「Google Chrome」に限られるが、今後対応を拡大していくとのこと。

これも便利ですね。まあ、こういうのを実現するのは前からありましたけど。

その他、JSLintによる構文チェックにも対応しているのでHTMLソース書きながらミスを見つけることも容易です。

といった感じでいろいろ面白いのですが、1つのアプリケーションとしてみるとちょっとまだ誰でも直感的に使えるレベルにはなっていないですね。とりあえず頭の中にあるものを形にしてみた、って感じでしょうか。

で、これをベースにAdobeクオリティでDream Weaverを越えるエディタとしてリリースされるといいなあ。

詳しくは以下のビデオで。

Adobe Developer Connectionに掲載された記事です。

In this article, I discuss how to detect a user movement using a webcam stream in JavaScript.

JavaScript motion detection | Adobe Developer Connection

ということで、WebCamを使って得られた画像からその動きを検知してアプリに反映させる、といったアイディアの仕組みとそのデモが紹介されています。

まあ、まずはデモを見てみれば何ができるかがわかるかと思います。

デモ

このデモはDEV版よりも最新機能が搭載されているGoogle Chrome Canaryで "Media Stream" をenableにしないとだめ、と書かれているんですが、もっと深く体験してみたい人はそういう環境で試してみてください。

これが一般化するとWebCam使って自分の手で楽しめるFruit NinjaとかCut the Ropeみたいなものが作れますね。

Fruit Ninja HD App

カテゴリ: ゲーム

価格: ¥250

Cut the Rope App

カテゴリ: ゲーム

価格: ¥85


とりあえずPCからアクセスするとこんな感じ。

なのですが、PCからだとうんともすんとも動かないのでURLをiPhoneに転送します。こんな時昨日書いた「Appleの「メッセージ」アプリは自分から自分にメッセージが送れるんですね。」の方法で「メッセージ」アプリを使ってiPhoneに転送すると便利です。ああ、Mac使っててよかった。

で、メッセージを使って転送されたURLをクリックしてブラウザを起動させてみると・・・おお!これはすごい!ちゃんとClearのようなUIになっている!

PCからもアクセスできる、ということなのでHTMLソースを見てみるとZepto.jsというモバイル端末向けのJSフレームワークを使って作られているようです。

肝心のメインのJavaScriptはとてもminimizeされてて読みにくいのですが、興味のある方は分析して勉強してみるといいかもしれません。

というかもうちょっとしたらClear的UIを実現する汎用JSライブラリが登場するような気がするけどw

Clear App

カテゴリ: 仕事効率化

価格: ¥85


iOSやAndroidで人気な「Cut the Rope」というゲームがあるのですが、それのフルHTML 5版が公開されたようです。

Cut the Rope

おや?なぜかIEのロゴが・・・。

Behind the scene」というこれの背景について説明しているページを見てみると、

To do this, Microsoft's Internet Explorer team partnered with ZeptoLab (the creators of the game) and the specialists at Pixel Lab to bring Cut the Rope to life in a browser. The end result is an authentic translation of the game for the web, showcasing some of the best that HTML5 has to offer: canvas-rendered graphics, browser-based audio and video, CSS3 styling and the personality of WOFF fonts.

ということでHTML5への移植に関してゲーム開発元のZeptoLabとマイクロソフトが協力して作業を進めたようです。

で、この「Behind the scene」が無駄に長文で読むの結構面倒なのですが、iOSのObjective-CからHTML 5への移植に関してあれこれ書いてますのでそっち系に興味がある方は読んでみてください。OpenGL ESじゃあれこれ面倒なアンチエイリアス処理された線(ライン)もCanvas使えばとても簡単に実現できた、なんて話は結構面白いかと思います。

またネイティブアプリに対してパフォーマンスがどうか、みたいな話も面白いですが、利用したツールのお話がまた興味深かったりします。マイクロソフトから「Visual Web Developer 2010」なんてもんが出てるんですね。ああ、これIISとかASP.netとかって単語見てスルーしてたやつかあ。

This is a really robust web editor with autocompletion for JavaScript and CSS.

なるほど、エディタとして利用するのもよいかもしれませんね。エディタとして使うにはヘビーかもしれませんけどw

ということで、結局マイクロソフトの宣伝なのかもしれませんが、HTML 5版の「Cut the Rope」は遊んで単純に面白いのでゲームとしてお楽しみください。

Cut the Rope App

カテゴリ: ゲーム

価格: ¥85

Cut the Rope(Android Market)

【過去記事】

COTOBACO

2011年アルファブロガー受賞

新着DVD

モバイル

Powered by Movable Type 6.0.3

ブログ内検索

BlogPeople ReviewMe!

このサイトのレビューとか応援コメントを書いてもらえると励みになります。

Affi☆List for Amazon

バナー広告

このアーカイブについて

このページには、過去に書かれたブログ記事のうちHTML5カテゴリに属しているものが含まれています。

前のカテゴリはGoogleです。

次のカテゴリはJavaScriptです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。