「Canvas」と一致するもの

KineticJSを使ってHTML5 Full Canvasのアプリを作る: 「単純スクロール」編

  • 投稿日:
  • by dai-shi

HTML5 Canvasのみを使ってどこまでスマホアプリが作れるのか挑戦中です。 題材はRSSリーダーです。RSS Pipesの補完機能として考えています。

前回に続き、スクロールを実装しました。

その前に、テキストの配置について補足します。前回は、setOffsetを使いました。ちょっと分かりにくかったので、ループの中でy座標をインクリメントするように変更し、背景の高さもあわせて大きくするようにしました。詳しくはコードを参照してください。

さて、本題のスクロール処理についてです。スマホを想定しているので、スクロールバーではなく、タッチ（ドラッグ）スクロールです。はじめは、touchstart/mousedownイベントを使って自力でスクロール処理を書いてみましたが、スクロールするたびにdraw()で再描画をしたところ、とても遅くなってしまいました。

そこで、KineticJSが用意しているDrag&Dropの仕組みを使う方法に変更しました。この方がすっきり書けました。どこまで細かい制御ができるかはこれからのお楽しみです。

コードはこんな感じです。

var layer = new Kinetic.Layer({
  draggable: true,
  dragBoundFunc: function(pos) {
    var newY = pos.y;
    if (newY > 50) {
      newY = 50;
    }
    var minY = -50 - rect.getHeight() + stage.getHeight();
    if (newY < minY) {
      newY = minY;
    }
    return {
      x: this.getAbsolutePosition().x,
      y: newY
    };
  }
});

想像していたより、スクロールがスムーズではありません。Canvasを直接操作した場合と比較していませんが、KineticJSのオーバーヘッドがそれなりにあるのでしょうか。

実行結果はスクリーンショットでは見せられないので、 下記からどうぞ。ただし、数日間以内には新しいバージョンになってしまいます。

http://canvas-rss-reader.herokuapp.com/

全コードはこちらです。

https://github.com/dai-shi/canvas-rss-reader/tree/3d370b3386b7f46116b892ac4cf37d5282d3910a

ところで、スマホで試したら、最後までスクロールできないみたいです。また、スクロールも遅いです。早速、課題浮上かもしれません。続く。

KineticJSを使ってHTML5 Full Canvasのアプリを作る: 「RSS取得」編

  • 投稿日:
  • by dai-shi

だいぶ間が空いてしまいましたが、HTML5を使ってどこまでスマホアプリが作れるのか、挑戦しようと進めています。しかも、フルキャンバスで。

題材はRSSリーダーです。RSS Pipesの補完機能として考えています。

前回はHellow Worldを表示するところまででした。今回は、RSSを取得してテキスト表示してみました。ただし、まだスクロールできません。当然クリックもできません。

RSSはjQueryを使って読み込むことにしました。コードはこんな感じです。

$.ajax({
  type: 'GET',
  url: rssurl,
  dataType: 'xml',
  success: function(xml) {
    var $xml = $(xml);
    var items = [];
    $xml.find("item").each(function() {
      var $this = $(this);
      var item = {
        title: $this.find("title").text(),
        link: $this.find("link").text(),
        description: $this.find("description").text(),
        pubDate: $this.find("pubDate").text()
      };
      items.push(item);
    });
    updateRssContent(items);
  },
  error: function() {
    alert('failed to get the rss: ' + rssurl);
  }
});

updateRssContent()でキャンバスにかきますが、座標も自分で計算しないといけません。

function updateRssContent(items) {
  $.each(items, function(index, item) {
    var text = new Kinetic.Text({
      x: 5,
      y: 5,
      text: item.title,
      fontSize: 12,
      fontFamily: 'Arial',
      fill: '#aaaaff'
    });
    text.setOffset({
      y: -index * (text.getHeight() + 5)
    });
    layer.add(text);
  });
  layer.draw();
}

setOffsetを使うよりいい方法があるのではないかと想像しますが、まだ探していません。

実行結果はこんな感じです。

実行結果20130519

最新版はherokuでも実行可能です。

http://canvas-rss-reader.herokuapp.com/

今回は、GitHubにコードをアップしました。

https://github.com/dai-shi/canvas-rss-reader/tree/42ddd815e88304c6217c8c5f9f978d97c39fc34a

そう、プロジェクト名もcanvas-rss-readerにしました。

しかし、キャンバスを使うとあたりまえですが文字列選択ができないですね。JavaScriptでクリップボードって制御できるのでしょうか。

http://www.w3.org/TR/clipboard-apis/

このあたりをウオッチすることになるのでしょうか。

KineticJSを使ってHTML5 Full Canvasのアプリを作る: 「Hello World」編

  • 投稿日:
  • by dai-shi

RSS Pipesの一機能として、スマホ向けのRSSリーダーみたいなものを作ってみようかと思います。

まずは、KineticJSの勉強をしているところです。 HTML5 Canvas KineticJS Tutorials を参考にしながら作っていきます。

HTMLのコードを説明します。

初めに、KineticJSの読み込みます。

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.2.min.js"></script>

試しに使う場合はこのままでいいでしょう。デプロイするときはローカルに持ってこようと思います。

次に、自分のスクリプトを読み込みます。

<script src="test.js" defer="defer"></script>

deferを指定しておくことで、HTMLのロード後に読み込まれます。

空のbodyにIDを指定しておきます。

<body id="container"></body>

こうしておくことで、KineticJSのstageをbodyの直下に作ります。

さて、ちょっとだけCSSが必要です。

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

これを指定しないと、Canvasの周りにマージンができてしまって、Full Canvasになりません。また、overflowを指定しないと、ChromeやFirefoxでスクロールバーが出てしまいました。

続いて、本題のJavaScriptのコードを説明します。

KineticJSのステージを作ります。

var stage = new Kinetic.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

widthとheightを表示領域一杯にすることで、Full Canvasとなります。

レイヤーを作ります。

var layer = new Kinetic.Layer();

表示領域一杯の四角形オブジェクトを作ります。

var rect = new Kinetic.Rect({
  x: 0,
  y: 0,
  width: stage.getWidth(),
  height: stage.getHeight(),
  fill: 'black'
});

黒にしてみました。

Hello Worldの文字オブジェクトを作ります。

var text = new Kinetic.Text({
  x: stage.getWidth() / 2,
  y: stage.getHeight() / 2,
  text: 'Hello World!',
  fontSize: 30,
  fontFamily: 'Arial',
  fill: 'lightgray'
});

ステージのサイズから計算して中央に配置しています。x,yは文字オブジェクトの左上の座標です。そこで、ちょっとずらして文字オブジェクトの中心に合わせます。

text.setOffset({
  x: text.getWidth() / 2,
  y: text.getHeight() / 2
});

最後に、四角形オブジェクトと文字オブジェクトをレイヤーに追加して、そのレイヤーをステージに追加して、終わりです。

layer.add(rect);
layer.add(text);
stage.add(layer);

これで、Canvasのみを使ってHello Worldを表示するページを作ることができました。アプリと呼べるようになるまでにはまだまだかかりそうですね。

実行結果はこんな感じです。

コードはGistにアップしておきました。 https://gist.github.com/dai-shi/5404537

HTML5でフルキャンバスのスマホ向けRSSリーダーでも作ってみよう

  • 投稿日:
  • by dai-shi

RSS Pipesの一機能として、スマホ向けのRSSリーダーみたいなものを作ってみようかと思います。

RSSリーダーなんて世の中にたくさんあるので、普通のものを作っても面白くありません。そこで、勉強がてらHTML5でスマホアプリにしてみようと考えました。しかも、フルキャンバスで。canvasというのはグラフィック用の機能ですが文字も書けるわけで、それですべてを作ったら面白いのではないかと思いました。

さて、HTML5 Canvasは何年か前に少しだけ触りましたが、最近はライブラリも充実しているのではないでしょうか。検索してみると、

HTML5のcanvasを劇的に使いやすくするJavaScriptライブラリまとめ5つ

を見つけました。また、stackoverflowで、

Current State of Javascript Canvas Libraries(2012)?

を見つけました。使ってみないと分からないだろうと思いますが、これらの情報から、KineticJSを試してみることにしました。

今日のところはここまで。これから少しずつ進捗を書いていけたらいいなと思っています。