Hatena::ブログ(Diary)

techlog RSSフィード

理解というものは、つねに誤解の総体に過ぎない
 「スプートニクの恋人」とか「かえるくん、東京を救う 」より

こちらになりました → http://sadah.hatenablog.com/

2013-04-30

[][]福島でHTML5について話してきた

html5jの遠征で福島に行ってきた。「HTML5ではないサイトをHTML5へ」というタイトルでお話させていただいた。


HTML5ではないサイトをHTML5

僕の資料はこちら。九州やHTML5とか勉強会で話した内容を最新化したもの。


仕事でやってるサービスは、ちょっと前まではHTML5じゃなかったけど、いろいろやってHTML5化しているところ。それについていろいろ話させてもらった。

試行錯誤中で、まだまだ道半ばだけど、とにかく一歩は踏み出している。


写真とか

一眼持って行かなかったから画質が悪いけど、雰囲気は伝わるかなと。


f:id:j7400157:20130420101838j:image:w640

みんなで記念撮影。


f:id:j7400157:20130420154344j:image:w640

自分のセッションが終わって、パネルディスカッションが残っているにも関わらず飲み始める。


f:id:j7400157:20130420190010j:image:w640

懇親会!美味しかった。


f:id:j7400157:20130430004251j:image:w640

懇親会からのラーメン。味噌にんにく!背景にカエルさんが。


f:id:j7400157:20130430004244j:image:w640

どうしてこうなった。行きの新幹線では桜が見えたけど、帰りは一面雪景色でびっくりした。


まとめ

参加者全員が自己紹介をする時間があって、ちょっとびっくりした。でも、これすごくよかった。マイクが回ってきて、みんなその場で立って簡単な自己紹介をする。

初参加が4割くらいいるって聞いていたけど、みんな乗りがよくて自己紹介が楽しかった。

おやつタイムでは美味しい豆大福をいただいた。お弁当でお腹いっぱいだったけど、食べてしまった。


僕のセッションは1月に作った資料をベースに、その都度ブラッシュアップしたり、最新化したり、内容を削ったり、増やしたりしてる。今回はけっこう削ったつもりだったけど、30分の持ち時間を7分もオーバーして、それに気付きつつ平然と話してしまった。ごめんなさい。けっこう反省しています。


自分が話したいことではなく、相手が聞きたいと思うようなことを意識して、なるべく伝えることを最大化したいと思って話した。

うまくいったかわからないけど、終わったあとにかわいい女の子がとても参考になりましたと言ってくれたので、すべてオーケー :)


やっぱり遠征は楽しい。また機会があれば、いろいろなところに行きたい。

2013-04-29

[][]2ヶ月まえに、九州と第36回HTML5とか勉強会で話したこと

あまりにも、時間が経ってしまったけど、いちおう記録として。

九州

2013/2/9 - 2013/2/10に九州に行ってきた。

HTML5 Carnival FukuokaHTML5カンファレンス 宮崎 に、html5j スタッフ & スピーカーとして参加した。


僕の資料はこちら。


こっちにも書かせていただきました。

この遠征に同行できて、発表できたのは、ほんとうによかった。いろいろ大きな意味を持つ出来事だった。

東京では何度か発表していたけど、それとは全然違う場だった。アウェーってこんなにも違うのか、ということを実感できた。もっと具体的に書きたいけど、書き始めると終わらないくらい長くなってしまって終わらないので割愛。

関係ないけど、iBooks Authorのプレゼンや、githubのエントリを通じて、僕のことを知っている人がいて感動した。

なにかしらのアウトプットしてると、いいことあるね。


第36回 HTML5とか勉強会

2013/2/18の第36回 HTML5とか勉強会で話してきた。

資料はこちら。九州での資料にいろいろ手を加えたもの。基本的な構成は同じだけど、中身はけっこう変えたつもり。

HTML5とか勉強会で話すのは久しぶりだった。1年ぶりくらい。

さっくるが素敵な記事にまとめてくれてる。


まとめ

もっと早くエントリを書きたかったけど、燃え尽きてたり、疲れ果ててたりして無理だった。

やっぱり泊まりで一緒に行動すると、仲良くなれる気がする。あるいは一緒に空港のベンチで切羽詰まってスライドを作っていると、仲良くなれる気がする。たぶん。他の講演者の方々ともいろいろな話ができてよかった。

2013-04-07

[][][]Chromeの新しいレンダリングエンジン「Blink」について読んだもの

読んだものをあとからまた探すことになりそうなので、リンクだけだけどまとめとく。これ以外にも読んだものもあるけど、あとから読み返しそうなものだけピックアップした。


Google関連

まずは Chromium の Blink のページ。

Blink's Mission:

To improve the open web through

technical innovation and good citizenship

GoogleのChromium Blog。それにしてもびっくりした。


Blink Developer FAQ

BlinkのDeveloper FAQ。

そしてえーじさんによる翻訳。

FAQはちょこちょこ追加されるのかな。以下の翻訳はなかった。抄訳すると、たぶんこんな感じのことが書いてある?ちゃんと原文見てね。

  • どんなことをChromeに期待するべき?
    • 高速なDOMとJSエンジンを提供する
    • プラットフォームを安全に保つ
    • パフォーマンスのためのリファクタリング
    • よりパワフルなレンダリングとレイアウトをできるようにする

  • これはDart VMやNative Clientを載せるための戦略?

そんなことないよ。新機能に関する強力なガイドラインを制定している。Googleで開発された技術や標準も、他で開発された技術や標準も、このガイドラインに従う。


もちろん。


  • OperaはChromiumを採用するって最近アナウンスしたけど、どうなるの?

OperaはBlinkを採用する予定で、Bruce Lawsonが彼のblogで言及している。


その他

GoogleWebkitの開発に関わってきた人のGoogle+の投稿。

すごくいい文章で、これからのBlinkが楽しみになる。


WebKitからフォークに至った経緯や、Blinkの概要について。Googleの外の人(ひとつはmyakuraさん)からのエントリ。

こういう経緯を知るのもけっこう好き。毎日自分が使っているものが、どんなふうにできて、どんなふうになろうとしてるのか、ある程度わかる。

Your Blink Questions Answeredのmyakuraさんのメモ。


いつも、わかりやすくてすてき。


まとめ

一気に読んだら、なかなかの分量だった。

月並みな感想しかでてこないけど、これからどうなるんだろうね。OperaはChromiumを採用するし、ChromeWebkitをフォークしてBlinkを作るし、MozillaはServoを発表したし。

どんどん仕様はでてくるし、どんどん新しい機能が追加されるし(DevToolsの進化が速すぎる!)、あんまり追いつけてないけど、すごく楽しい。

なにより僕の作っているものは、ブラウザがないと見れないからね。

2013-02-02

[][][]Java♡HTML5 Night で話してきた

f:id:j7400157:20130131205540j:image

Java ♡ HTML5 Nigtht で「JavaとHTML5のこれまで」と「WebSocket概要」について話してきた。


Java & HTML5 History

HTMLのスライドはこちら。

1993年からの20年を振り返ってみた。資料作りながら、感慨深い思いだった。JavaとHTML5を合わせてみてみると、なかなか楽しかった。

Javaの歴史については、こんなサイトがあった。英語だけど。HTML5でパララックスなサイト。ソースを覗くとbodyにはdivとimgしかなかったw

Java 5 が2004年で、ジェネリクスや拡張forループが入ったのはもう9年前かと。同年WHATWGが発足している。

2011年には、Java SE7がリリースされ、HTML5がLast Working Draftになった。いろいろ動いた年だった。

Java も HTML も停滞していた時期があったけど、いまはどんどん変わっていくので、これからが楽しみ。


WebSocket on Glassfish

HTMLのスライドはこちら。

Glassfishを使ったWebSocketのサンプルをライブコーディングしてきた。あとはnode.jsでのWebSocketのサンプルも紹介した。

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package websocket.sample;

import javax.websocket.Session;
import javax.websocket.WebSocketEndpoint;
import javax.websocket.WebSocketMessage;

/**
 *
 * @author sada
 */
@WebSocketEndpoint("/echo")
public class NewClass {
    @WebSocketMessage
    public String echo(String message, Session session){
        return session + " "  + message;
    }
}

これはほぼ最小限のサンプルだと思う。受け取った文字列を返すだけのechoサーバ。

Javaでこれだけ短いコードでWebSocketが使えるって、なかなかすごい。


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script>
            $(function(){
                var host = "ws://localhost:8080/WebApplication3/echo";
                var socket = new WebSocket(host);
            
                socket.onmessage = function(message){
                    console.log(message.data);
                }
                $("#sendBtn").on("click",function(){
                    message = $("#message").val()
                    socket.send(message);
                });
            });
        </script> 
    </head>
    <body>
        <h1>Hello World!</h1>
        <input type="text" id="message" />
        <button id="sendBtn">send</button>
    </body>
</html>

細かいことはこっちに書いた。

これまでもTomcatやJettyでWebSocketを仕えたけど、こうやってアノテーションベースで書けるとすごく便利。そもそもこのコードはServletでさえないし。

JavaでWebSocketのクライアントも書けるから、いろいろ活用できるところは多いと思う。なかなか楽しい。


いろいろ

Node.jsの環境構築とサンプルを動かすまで。(Macのみ)


資料は reveal.js を使って作った。PDF出力もできるので、PDFにしたものをSlideShareに上げている。HTMLの資料もあげたいけど、バギー過ぎるのでとりあえず、PDFで。


まとめ

僕が初めてプログラムを書いたのはJavaだった。大学に入ってから、授業で書いた。それから10年以上ずっとJavaを使っていた。仕事だけじゃなく、趣味としてもJavaを書いていた。

Java Hot Topicには何回も参加したし、ここでもJavaのことをいろいろ書いていた。

いまはJavaを書いてないけど、今回の勉強会のために書いてみて、Javaも変わっていってるんだ、ということを感じた。

Javaを使わなくなってから、まさかこんなふうに話をする機会があるとは思わなかった。嬉しかったし、とても光栄なことだった。エンジニアをやっていると、いろいろなところで繋がるな、と。


自分より詳しい人がたくさんいて緊張した。でも懇親会で楽しそうに話してましたねって言われて、それが嬉しかった。話している技術の楽しさが伝わるといいなと思ってやっていたので。

2013-01-21

[][]Node.jsでWebSocketのサンプルを動作させるまで

Node.jsの環境構築から、WebSocketのサンプルを動作させるまでを書く。ちょっとはまったりしたので、そういうところも含めて書いておく。書いておかないと、自分がまたはまりそうなので。

インストールしたのは以下のバージョン。

  • nodebrew 0.6.2
  • node.js v0.8.18
  • websocket.io 0.2.1

Node.jsのインストール

brewで入れてみた。これは失敗。

# brew install node

nvmを使うべきだったか、とつぶやいたら、こもりさんが nodebrew がいいと教えてくれた。

brewで入れたやつは uninstall した。

# brew uninstall node

nodebrewのreadmeを見ながらインストール。

# curl https://raw.github.com/hokaccha/nodebrew/master/nodebrew | perl - setup

zshを使ってるので、.zshrcにパスを追加する。

export PATH=$HOME/.nodebrew/current/bin:$PATH
export NODEBREW_ROOT=$HOME/.nodebrew

反映させる。

# source ~/.zshrc

nodebrew が入った。

# nodebrew
nodebrew 0.6.2
...

node.jsのバージョンを確認する。

# nodebrew ls-remote
v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6  
...
v0.8.0    v0.8.1    v0.8.2    v0.8.3    v0.8.4    v0.8.5    v0.8.6    v0.8.7
v0.8.8    v0.8.9    v0.8.10   v0.8.11   v0.8.12   v0.8.13   v0.8.14   v0.8.15
v0.8.16   v0.8.17   v0.8.18   

v0.9.0    v0.9.1    v0.9.2    v0.9.3    v0.9.4    v0.9.5    v0.9.6    v0.9.7

0.8系は安定版、0.9系は開発版なので、0.8系の最新をインストールする。

# nodebrew install v0.8.18

インストールはこっちのコマンドのほうがよかったかも。

nodebrew install-binary <version>   Download and install a <version> (binary file)

node.js 入ったかな。入ってる。

# nodebrew ls-all
...
local:
v0.8.18
...

デフォルトのnode.jsを指定する。

nodebrew use v0.8.18
node -v
v0.8.18

これで node.js のインストールはおしまい。


websocket.io

WebSocketを使いたいので websocket.io を入れる。これは失敗。

# npm install websocket.io

コマンドを実行したディレクトリにインストールされるとこもりさんが教えてくれた。

websocket.io を uninstall する。

# npm uninstall websocket.io

npmのヘルプを確認する。なるほど。

# npm help install
In global mode (ie, with -g or --global appended to  the  command),
it  installs  the  current package context (ie, the current working
directory) as a global package.

もう一度 websocket.io をインストールする。

# npm install -g websocket.io
...
> ws@0.4.20 install /Users/sada/.nodebrew/node/v0.8.18/lib/node_modules/websocket.io/node_modules/ws

入った。いい感じ。


WebSocketを使う

サーバのコードはこんな感じ。ブロードキャストできるechoサーバという感じ。

var ws = require("websocket.io");
var server = ws.listen(8888,
  function () {
    console.log("ws start");
  }
);

server.on("connection",
  function(socket) {
    socket.on("message",
      function(data) {
        console.log("message " + data);
        server.clients.forEach(
          function(client) {
            client.send(data);
          }
        );
      }
    );
  }
);

こちらのコードを参考にさせていただきました。


ws.jsというファイル名で保存して実行する。エラーがでる。

# node ws.js

module.js:340
    throw err;
          ^
Error: Cannot find module 'websocket.io'
    at Function.Module._resolveFilename (module.js:338:15)

websocket.io が見えてない。ちょっと調べて、ファイルの先頭にこれを追加した。

require.paths.push('/Users/sada/.nodebrew/current/lib/node_modules');

実行する。require.pathsは無くなったから、NODE_PATHを使えと怒られる。

# node ws.js

Error: require.paths is removed. Use node_modules folders, or the NODE_PATH environment variable instead.
    at Function.Module._compile.Object.defineProperty.get (module.js:386:11)

NODE_PATHを使う。これを .zshrc に追記した。

export NODE_PATH=$HOME/.nodebrew/current/lib/node_modules

反映させる。

source ~/.zshrc

実行する。できた。

# node ws.js
ws start

クライアント側のHTMLとJSはこんな感じ。サーバにデータを送る、サーバから受け取ったデータを console.log に流すだけ。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script>
  $(function(){
    var host = "ws://localhost:8888/";
    var socket = new WebSocket(host);
    console.log(socket.readyState);

    socket.onopen = function(){
      console.log(socket.readyState);
    }
    socket.onmessage = function(message){
      console.log(socket.readyState + " " + message.data);
    }
    socket.onclose = function(){
      console.log(socket.readyState);
    }
    $(window).unload(function() {
      socket.onclose();
      console.log(socket.readyState);
    })

    $("#sendBtn").on("click",function(){
      message = $("#message").val()
      socket.send(message);
    });
  })
  </script>
</head>
<body>
  <h1>Hello World!</h1>
  <input type="text" id="message" /><button id="sendBtn">send</button>
</body>
</html>

まとめ

node.js はいろいろなツールのプラットフォームになってきているから、インストールしなきゃなと思ってた。去年くらいから。ちょうどWebSocketを扱う機会があったので、node.jsをインストールしてみた。

いろいろ調べながら、ここまで大体1時間くらい。多少は前提知識があったのでこれくらいで済んだ。全くのゼロからだと、ちょっと大変かもしれない。

こもりさん、いろいろ教えてくださってありがとうございます。Thanks [twitter:@cipher].


多少はまったけど、それでもかなりスムーズに環境構築できた。nodebrewやnpmなど、node.jsを便利に使う環境がかなりそろっていて助かる。

環境構築が終わっていれば、いろいろさらっと試せる。これまではnode.js使うものだと、ちょっと面倒だなーと思ってしまうことがあったけど、これからはさくっと試してみようと思える。いろいろ使ってみたい。


ちゃんと勉強しないとねぇ。

サーバサイドJavaScript Node.js入門
清水俊博 大津繁樹 Jxck 小林秀和 佐々木庸平 篠崎祐輔 高木敦也 西山雄也
アスキー・メディアワークス
売り上げランキング: 56,759