Posted by アイ・エス・シーシステム事業部
on 2011年09月16日 in HTML,HTML5/CSS3,JavaScript/Ajax,技術,雑記


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

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

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

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

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

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

Posted by アイ・エス・シーシステム事業部
on 2011年08月10日 in HTML,WEB,技術,雑記


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

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

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

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

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

Posted by アイ・エス・シーシステム事業部
on 2011年06月11日 in Internet Explorer,WEB,ブラウザ,技術,雑記


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

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

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

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

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

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

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

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

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

Posted by アイ・エス・シーシステム事業部
on 2011年06月10日 in Google maps,JavaScript/Ajax,jQuery,WEB,WEBサービス,便利ツール,技術


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年前くらいか・・・

Posted by アイ・エス・シーシステム事業部
on 2011年06月07日 in HTML,JavaScript/Ajax,jQuery,WEB,WEBサービス,便利ツール,技術


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を選べば手っ取り早い雛形の完成です。

Posted by アイ・エス・シーシステム事業部
on 2011年05月25日 in ブラウザ,技術


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

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

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

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

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

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

ページトップへ戻る

Get Adobe Flash player