ラベル HTML の投稿を表示しています。 すべての投稿を表示
ラベル HTML の投稿を表示しています。 すべての投稿を表示

2011年11月1日火曜日

第22回HTML5とか勉強会で発表してきました

第22回HTML5とか勉強会で発表してきました。

今回は初心者向けということで、
SVGってどんなことができるの?っていることを理解してもらおうと思い、
とにかく仕様の紹介をしようと思いました。
ちょっと、意図が伝えられなくて、一部の方からは難しかったというご意見をいただきました。
次回同じような機会があれば、その反省をふまえてもっとよい発表を行えればと思っています。

以下が発表に使用したスライドです。


動画も公開されているみたいです。



このような機会を与えていただいた白石さんをはじめHTML5とか勉強会のスタッフの皆様には
本当に感謝をしています。
ありがとうございました!

2011年7月20日水曜日

HTML5のpushState

HTML5には、
HistoryオブジェクトにpushState()とreplaceState()というメソッドが追加されました。

pushStateというのは、
Historyのリストに新しくエントリを追加してしまいます。
ページ遷移をしていなにのに、Hisotryが追加されるのです。

下記にコードを示します。
<html>
<head>
<script>
function push_history() {
  history.pushState("", "", "/example");
}
</script>
</head>
<body>
Hello, World!
<form>
<input type="button" value="button" onclick="push_history()" />
</body>
</html>

これにより、
現在のページが "http://foo.com/hello/index.html " だった場合、
ボタンをクリックするとURLが第3引数により、"http://foo.com/example" に変化しており、
戻るのリストをみると、1個Historyが追加されているのがわかります。
実際に戻るをクリックすると、URLバーが
"http://foo.com/hello/index.html "
に戻ります。

これで、ページを遷移していないのに、
Historyにエントリを追加して、URLを変更することができます。

Ajaxとこれを組み合わせた技術を "Pjax" と呼びますが、
これは別途まとめようと思います。

2011年1月10日月曜日

[android]androidのアプリをHTMLで作れるようにする

androidのアプリケーションから
ローカルに保存してあるHTMLを表示させるアプリのサンプルを作ってみました。
WebViewのaddJavascriptInterface()をつかえば、
Javascript から Androidのメソッドを呼び出すこともできます。

ローカルにおくためのHTMLは、
assetsフォルダに保存しておけば、file: でアクセスできます。
(assets/index.htmlだったら、file://android_asset/index.htmlでアクセスできる)

サンプルです。
HelloHTMLActivity.java

package jp.android.hellohtml;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.os.Vibrator;
import android.util.Log;
import android.webkit.WebView;
import android.widget.Toast;

public class HelloHTMLActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WebView wv = new WebView(this);
        wv.getSettings().setJavaScriptEnabled(true);
        MyJSObj jsobj = new MyJSObj(this);
        wv.addJavascriptInterface(jsobj, "myobj");
        setContentView(wv);
        
        wv.loadUrl("file:///android_asset/index.html");
    }
    
    class MyJSObj {
     private Context context;
     
     public MyJSObj(Context c) {
      this.context = c;
     }
     
     public void showToast(String str) {
      Log.d("tag", str);
      Toast.makeText(context, str, Toast.LENGTH_LONG).show();
     }
     
     public void vibration() {
      Vibrator vibrator = (Vibrator)getSystemService(VIBRATOR_SERVICE);
      vibrator.vibrate(2000);
     }
    }
}
addJavascriptInterface()は第1引数はjavascriptにバインドしたいオブジェクト、
第2引数はjavascriptでアクセスするオブジェクトの名前を指定します。

今回は、MyJSObjのメソッドにアクセスできるようにします。
showToast() はただのtoastの表示、
vibration() は2秒間振動します。

Vibratorを使うときは、
android.permission.VIBRATE
の設定を忘れずに。

index.html

<html>
<head>
<title>test content</title>
<script type="text/javascript">
  function showText() {
    myobj.showToast("test");
  }
  function vibration() {
    myobj.vibration();
  }
</script>
</head>
<body>
<div>hello</div>
<input type="button" value="toast" onclick="showText();" />
<input type="button" value="vibe" onclick="vibration();" />
</body>
</html>

実行結果

実行結果はただのHTMLですが、
toastをクリックすればtoastがでて、
vibeをクリックすれば、きちんと2秒間振動することを確認しました。

2010年11月21日日曜日

第12回「HTML5とか勉強会」に参加してきました。

11/18に、第12回「HTML5とか勉強会」に参加してきました。
いつも気が付いたら満員だったのですが、念願の初参加です!
今回は素晴らしいスピーカーの皆さまでした!感激でした!
(あと、英語だったので、あんまり理解できないところも多々。。。orz)

Paul Irish: The State of HTML5 : Inaugural Address
http://wde2010-pi.appspot.com/#slide1

HTML5関連技術について、一通りのデモを見せてくれました。
Audio data APIとWebGLを組み合わせたもののデモは秀逸でした。
WebGLで書いたビリヤードゲームで、玉のぶつかった音とかをAudio Data APIで表現したり。
もう、HTML5でゲームやらアプリやらを作れる時代が来ていることを実感。
SVG Filterなんかも紹介。
ライブラリとして、
HTML5の対応状況を調べてくれる modernizer.js  http://www.modernizr.com/
無駄なスクリプトのロードを防いだりしてくれるスクリプトローダーの
yeonope.js http://yepnopejs.com/
を紹介していました。

Bruce Lawson: WAI-ARIA
http://www.slideshare.net/brucelawson/bruce-lawsonhtml5ariajapan

WAI-ARIAというアクセシビリティの仕様のお話。
WAI-ARIAを描けば、例えば、ディスプレイがないデバイスでも音声などで補助してくれる、
そういうことを実現するための仕様です。
WAI-ARIAはHTML5と組み合わせることが可能で、
roleという属性を使って、"navigation"とか"banner"とかその要素の
役割を書くことができるようです。
HTML5には<nav>とか、<header>とかセマンティクスが用意されていますが、
対応したデバイスを考えてWAI-ARIAも組み合わせて書くべし。
あとは、要素にwebSRTを指定して、動画に字幕をつけるデモもしてました。

Jonathan Stark: jQuery Mobile + PhoneGap
http://www.slideshare.net/jonathanstark/building-mobile-apps-with-html-css-and-javascript-4807782

モバイルのWebを書くにはどうするかという話。
モバイルのwebを書くためのライブラリとして
  • iUI
  • jQTouch
  • Sencha Touch
  • jQuery Mobile
を紹介。
jQTouchのライブコーディングは非常におもしろかった。
WebアプリとNativeアプリを組み合わせるための
PhnoeGapの紹介もしてくれました。

Michael Fellinger: Canvas implementation using CoffeeScript

Coffee Scriptという
Ruby/Pythonライクで、
書いたコードをJavaScriptに変換してくれるスクリプト言語を紹介してくれました。
存在は知っていましたが、いじったことはなかったので、
あとでいじってみようと思いました。
詳細は下記で。Web上で動かすこともできます。
http://coffeescript.org

懇親会でのライトニングトークも面白かったです。



このようなすばらしい勉強会を企画してくれた主催者の皆様に感謝!
また行きたいな!

2009年8月17日月曜日

NodeListとHTMLCollection

HTMLDocumentには、document.imagesとかdocument.formsとか、DOM Treeからある要素のみを返すアクセッサがあります。

それとは別に DOM Coreには getElementsByTagName() というメソッドがあります。

これらは同じものだと勘違いしていたのですが、document.xxx はHTMLCollection, getElementsByTagName() は NodeListを返します。


で、HTMLCollection は NodeListを継承しているわけではないのです。

ま、HTMLCollection は NodeListと同じ属性とメソッドを持っているので、JavaScriptから見れば同じとみなしていいのかもしれませんが、どうも違和感が。。。

2009年8月15日土曜日

event handler content attributes

onXXXといったイベントハンドラを書ける属性がありますが、

HTML4.01のときは、この属性がかける要素が決まっていました。
HTML4.01のIntrinsic events
これが、HTML5だと、Global attributesとして定義されているので、すべての要素に書けます。

ということは、そのイベントハンドラが呼ばれるかどうかは、その要素にイベントを発火させられるかどうかということになります。

だから、「この要素にこのイベントハンドラを書けるのか」という質問されると、「この要素はフォーカスが当たるからonfocus/onblurが書ける」とか、そういった説明をしなければいけません。
これが、HTML5の要素はかなりあるので、意外と面倒くさいです。

ちなみに、実はHTML4.01では<img>要素にonload属性は書けませんでした。
(書いてあるコンテンツは結構あるみたいですが。)

でも、HTML5では、どの要素にもonload属性が書けるようになったので、リソースをロードする<img>要素ではloadイベントが発火するので、onloadイベントハンドラは呼ばれるのは正しい仕様です。

<img>要素の例を考えると、HTML5の考え方のほうが自然なのかもしれませんね。