タグ: HTML5

HTML5とFlash 機能比較

投稿者:isc_blog

これってHTML5で出来てる!? すげーなー
ってサイト多くなって来ましたね!

でも、Flashで作ったほうが良かったり・・・そもそもHTML5では出来なかったり、逆にFlashでは出来なかったり・・・っていうのをまとめてくださっているサイトがありましたのでご紹介します。

Flashだとここまでできる! HTML5とFlashの機能比較

こちらの記事でも書いてありますが、HTML5っていっても結局ブラウザ依存なわけで・・・
今のところ、HTML5だと・・・っていうより「現状このブラウザだと・・・」っていう感じになってしまっています。

ブラウザ間のHTML5対応が充実してこないと比較出来るものではない・・・かもしれません。

しかし、この記事内で紹介されている↓↓このサイトすごいな・・・
http://www.audiotool.com/

2011年9月16日

HTML5でのページめくりがすごい

投稿者:isc_blog

こんな記事があったのでびっくりしました。
HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル|PHP SPOT 開発日誌

ここで紹介されている本をめくっているような動きはFLASHではなくHTML5で作られているそうです。

上記のリンクから実際に見てみて下さい。

DEMOを元にサンプルを作ってみましたが日本語もOK(UTF-8)でページの追加は<section>から</section>までをコピペすればどんどん増やせます。
↓サンプル
サンプル

参考URL:
Create a page flip effect with HTML5 canvas ※本家英語サイト
※上記のデモページ

2011年8月10日

Internet Explorer 10 Test Drive・・・IE10プレビュー版

投稿者:isc_blog

いつの間にかIEも10が出るんですね・・・
Google Chromeもバージョンアップが早いと思っていましたが
IEもなかなか・・・・

Internet Explorer 10 Test Drive
こちらからIE10 プレビュー版がダウンロード出来ます。

それから@ITの記事 特集:IE10(プレビュー版)概説(前編) によると

IE9と共存できるため、既存の環境に影響を与えることなく、操作を試せる。ただし、IE8と同時に動かすとエラーが出ることがあるため、注意が必要だ。詳しくは、リリース・ノート(英語)を参考にしてほしい。

とのことなので気をつけてください。
IE6,7はどうなのかわかりません。

また、セキュリティについても全く考慮されていない!?とのこと
※前述の特集:IE10(プレビュー版)概説(前編)より引用

なお、IE10 PP1には、基本的なブラウズ機能のみが提供されており(その外観は次の画面のように、中央のWebページ表示部分と上部のメニューバーで構成されている)、セキュリティ機能を含むほとんどの機能が省略されている。そのため、日常的に使用する場合は、セキュリティ・リスクがあることを理解したうえで利用してほしい。

とにかく一度試してみたい・・・
なにか不具合があってもほとんど確認用にしかIEを使っていないのでいいかな・・・

・・・という訳でダウンロード&インストール

2011年6月11日

HTML5で緯度経度測位するサンプル google maps geocode使用

投稿者:isc_blog

HTML5 Demo: geolocation を見てやってみようと思いました。
で、ボタン押したら・・・的なことを盛りこんでみました。(ちょっとテキトーなのでソースが綺麗じゃないのはご容赦ください)

geocode サンプルはこちら

ソースはこれだっ!
[html]
<meta charset="utf-8">
<title>測位!</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var lat = "";
var lng = "";
function success(position)
{
var s = document.querySelector(‘#status’);
if (s.className == ‘success’)
{
return;
}
s.innerHTML = "ここだっ!ちがうかっ!";
s.className = ‘Success’;
var mapcanvas = document.createElement(‘div’);
mapcanvas.id = ‘mapcanvas’;
mapcanvas.style.height = ‘100%’;
mapcanvas.style.width = ‘100%’;
document.querySelector(‘#map’).appendChild(mapcanvas);
lat = position.coords.latitude;
lng = position.coords.longitude;
alert(‘Latitued: ‘+lat);
alert(‘Longitude: ‘+lng);
var url="http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lng+"&sensor=false";
alert(‘Google Map API: ‘+url);
//Get Json Request Here
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"You are here!"
});
}
function error(msg)
{
var s = document.querySelector(‘#status’);
s.innerHTML = typeof msg == ‘string’ ? msg : "failed";
s.className = ‘Fail’;
}
//Jquery Code
$(document).ready(function()
{
$("#check").click(function()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(success, error);
}
else
{
error(‘Not supported’); //HTML Support
}
});
});
</script>
<input type=’button’ id=’check’ value=’測位!’/>
<div id="status">読込中・・・</div>
<div id="map"></div>
[/html]
※ソースは文字コードUTF-8で保存してください。

最近はGoogle様のおかげで簡単ですね。

その昔、某携帯用のナビゲーションを開発する仕事があってその際は緯度・経度の計算から地図の描画までスンゴイ計算して~ごにょごにょして~なんとか切り出した画像がこれです・・・的な感じでした。
なつかしい・・・けどたかだか6年前くらいか・・・

2011年6月10日

15秒でHTML5のプロジェクトを始めるテンプレート生成サイト

投稿者:isc_blog

Initializr というサイトで
15秒でHTML5のテンプレート的なコードを生成出来てしまいます!

こんな感じで・・・・

【HTML&CSS】
サンプルページにするとサンプルページのコードがくっついてきます。

【Javascript】
jQueryのminバージョンを付けて!

【Compatibility】※互換性
Modernizr!・・・ってモダンブラウザ的なことだろう・・・ と思う。

【Server Configuration】
サーバーコンフィグ・・・いらない

【Analytics】
いらないかな・・・・


この設定で作った物をダウンロードしたページ・・・

中身のコードはこんな感じ・・・(抜粋)
[html]
<!doctype html>
<!–[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]–>
<!–[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]–>
<!–[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]–>
<!–[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–> <html lang="en" class="no-js"> <!–<![endif]–>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title></title>
<meta name="description" content="">
<meta name="author" content="">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css?v=2">

<script src="js/libs/modernizr-1.7.min.js"></script>
</head>
<body>
<p class="info">Your HTML5 project is almost ready! Please check the <a href="TODO.txt">TODO list</a>.</p>
<div id="header-container">
<header class="wrapper">
<h1 id="title">Your title</h1>
<nav>
<ul>
<li><a href="#">Some</a></li>
<li><a href="#">navigation</a></li>
<li><a href="#">links</a></li>
</ul>
</nav>
</header>
</div>
<div id="main" class="wrapper">
<aside>
<h3>Something aside</h3>
</aside>
<article>
<header>
<h2>Your article heading</h2>

    ・
    ・
[/html]

冒頭に[if IE]の嵐がっ!
モダンブラウザ対応した証拠ですね。
No Contentsを選べば手っ取り早い雛形の完成です。

2011年6月7日

クロスブラウザはもう 古い! という記事の紹介

投稿者:isc_blog

アットマークアイティでこんな記事を発見。
常に考えていたことで共感が持てたのでご紹介します。

クロスブラウザはもう 古い! HTML5+CSS3時代の プログレッシブ・エンハンスメント

内容はサイト制作やWebシステム開発を行う際に常に問題になってくる「クロスブラウザ対応」の進化型論のような感じ

今までは「どのブラウザで見ても同じように表示されること」を目指して制作してきたものですが
これからは「より適した環境」を用意したユーザーには最適な表示をしてあげよう!という考え方にシフトしていくだろう…していかなければいけないということですね。

現況IE(インターネットエクスプローラー)においてはInternetExplorer6を本家であるMSさえも消し去ろうとしています。
それなのにIE6での表示をサポートする理由はもはや無いんですよね。
なのに、いまだに「システム要件」に対象ブラウザ(IE6)って…

個人的には違和感を覚えていたところなのでこの記事はスカッとしました。
※この記事に関しては投稿者の主観に基づいたものです。会社としての総意ではありません。

2011年5月25日