dai-shi動画は便利ですね。身体的な技を習得する場合もそうですが、最近ではプログラミングも動画で習得するようですね。自分は使っていませんが、ドットインストールは便利そうです。スクリーンキャストをテキストベースで行いたいと思いました。ターミナルだけで手軽にやろうと。ttyrecというツールを使いました。Ubuntuではaptでインストールできます。ttyrec実行すると新しいシェルが始まるのでそこで一通り作業してexitすると、全て記録されています。ttyplayで実行できます。再生中に速度も変えられるので便利。2倍速くらいでもついていけます。ttyrecで録画したスクリーンキャストをwebにアップする方法を調べました。playterm.orgというサイトにアップするjsttyplayというライブラリを使う初めはお手軽なplayterm.orgを使うつもりでしたが、一つだけ難点が。試してないから確かではないのですが、一度アップすると削除ができない様子なのです。自分で制御したくて、jsttyplayを使うことにしました。jsttyplayはライブラリなのでいろいろ手を入れないと使えません。Webサイトが必要です。pagesを使いました。gh-pagesブランチにjsttyplayをコピーして、test.htmlを参考にHTMLを書きました。不具合もいくつかあって、Rewindボタンが動かない(バグ修正した)PlayPauseボタンの動作が不明(非表示にした)fontが相対パスなので、ディレクトリが異なると読み込めずttyrecordファイルのURLがハードコードされているなどが気になりました。あと、注意点がいくつかあります。ターミナルのサイズを記録時と再生時で同じにする必要がある。これは、ttyrecの制限。playterm.orgでは80x24を標準としている。TERM=xtermでは途中で固まった。TERM=vt100だと大丈夫。ttyplayは問題ないので、これはjsttyplayの制限。これらをクリアして見事ttyrecで記録したスクリーンキャストをWebに載せることができました。Canvasで動いているようです。ターミナルをエミュレートしている感じでしょうか。このシンプルさがいいです。再生速度変更ボタンはありませんが、簡単に作れそうです。そのうち暇ができたらちょっと改造してみようかと思いました。興味がある方はお試しください。Canvasのみを使ってどこまでスマホアプリが作れるのか挑戦中です。Googleリーダがなくなるから、それの代替として作ろうと始めましたが、Googleリーダの期限までには完成しそうにありません。今日は、RSSの記事のリンクを開く機能を作りました。CanvasではHTMLは表示できません。iframeを使うことで表示しました。iframeの表示はjQueryを使いました。JavaScriptを使っていると、DOM操作はちょっと古びたものに感じます。RSSのリンクを開くためのボタンも作ってみました。右上の方に矢印のアイコンを置いて、それを押すとiframeが開きます。DataをKineticのpathで読み込みました。コードはこんな感じです。0.43});全コードはこちらです。https://github.com/dai-shi/canvas-rss-reader/実行サンプルはこちらです。http://canvas-rss-reader.herokuapp.com/未読既読の機能までできたら、とりあえずは使えるようになるかと思うのですが、どうでしょう。Canvasのみを使ってどこまでスマホアプリが作れるのか挑戦中です。今回は、フリックで横スライドに挑戦しました。時間が空いてしまったのは、どうやって実装するかイメージがわかなかったからです。試行錯誤した結果、比較的満足いくものになりました。普通のスマホアプリと同じくらいの操作性を目指しつつ、KineticJSの機能をフル活用して少ないコーディングで実現することです。横スライドも、縦スクロールと同様にドラッグ&ドロップの機能を活用しました。正確にはフリックを判定しているわけではなく、ドロップ後の位置でスライドするかどうか判定しています。使ってみると、直感と異なることもあるのですが、それは今後の課題ということで。今回、Canvasでアプリを作る時に意識をしているのは、軽快さです。普通に作ったアプリより軽く感じるWebアプリを作れるのかがポイントです。自分のスマホではかなり軽快にスライド動作ができるようになっています。他のスマホではどうなのか気になります。お持ちのスマホで試してみてください。下記の実行サンプルをスマホのブラウザで開くだけです。http://canvas-rss-reader.herokuapp.com/全コードはこちらです。https://github.com/dai-shi/canvas-rss-reader/この時点のコードを参照するには、本日のコミットを参照してください。上記実行サンプルは、今後最新版に変わっていってしまいますので、ご注意を。大切な発見を書くのを忘れていました。TweenのonFinishは呼ばれないことがあってはまりました。Tweenでノードを動かしている時に、ドラッグ&ドロップをすると、終了時にonFinishが呼ばれませんでした。setTimeoutを使うことで解決しました。KineticJSのバージョンは、4.5.2です。この仕様が将来のバージョンでどうなるかは不明です。Canvasのみを使ってどこまでスマホアプリが作れるのか挑戦中です。以前、RSS取得を実装したので、今回はそれっぽく表示してみることにしました。RSSのタイトルと概要をリスト表示するだけです。一つのアイテムあたりに80pxの高さを使いました。KineticJSなのかCanvasなのか分かりませんが、フォントサイズをpxで指定するため、手軽にレイアウトできました。スクロール処理もちゃんと動き、上々です。改行の処理が甘いですね。甘いというレベルではなくおかしいですね。このあたり、Canvasでアプリを作るときのつらさかもしれません。はまりそうなので、今回は手を出さないことにしました。今回は実行結果のスクリーンショットをとりました。全コードはこちらです。https://github.com/dai-shi/canvas-rss-reader/実行サンプルはこちらから。http://canvas-rss-reader.herokuapp.com/どのRSSフィードを表示するかもクエリパラメータでURL指定できるのですが、詳しい話はまた今度にします。Canvasのみを使ってどこまでスマホアプリが作れるのか挑戦中です。スクロールの処理を実装しています。KineticJSでできるだけ簡単にやろうと考えて、ドラッグ&ドロップのイベントをつかってやりました。スマホで使うには、やはり慣性スクロールが重要です。正しい呼び方は知りませんが、あの指を離してもしばらくスクロールしているあれです。まじめに物理シミュレーションをしようかとも思ったのですが、使いやすければいいだろうということで感覚的にパラメータ調整しました。KineticJSではここらあたりが限界でしょうか。ちなみに、iPhoneの複数のアプリでスクロール操作を試してみましたが、アプリによって挙動が違うことに気づきました。Safariではスクロールが止まるのが早いですが、Twitterではしばらくスクロールしています。今まであまり意識していなかったので気づかなかったです。あと、スクロール途中にタッチして止めることが相当重要だとうことを再認識しました。コードは少し長くなってしまったので載せません。特記するポイントはないです。バウンスするところと組み合わせるのがすこしやっかいでした。全コードはこちらです。https://github.com/dai-shi/canvas-rss-reader/実行サンプルはこちらから。http://canvas-rss-reader.herokuapp.com/うまくいったらライブラリ化したいと思いつつも、今は決めうちのコードになっています。Canvasのみを使ってどこまでスマホアプリが作れるのか挑戦中です。今回は、スクロール時のバウンスに挑戦です。スクロールの端で戻るやつです。米特許商標局、アップルのバウンススクロール特許は無効と予備的判断。対サムスンでも争点こんなニュースになっているやつです。KineticJSにはTweenという機能があって、スムーズな動きが簡単に表現できます。ちなみに、Tweenというのは、http://en.wikipedia.org/wiki/Inbetweeningのことのようですね。見ながらやったのですが、一つはまったことがあります。最初にどのドキュメントをみたのか定かではありませんが、今日までKineticJSのv4.4.2を使ってました。このバージョンではチュートリアル通りのコードを実行するとエラーになります。最新のv4.5.2を使ったら解決しました。コードはこんな簡単に書けてしまいました。tween.play();});今回も、実行結果はスクリーンショットでは見せられないので、下記からどうぞ。アニメーション系はスクリーンショットは使えませんね。動画にするのは手間がかかりすぎる気がします。http://canvas-rss-reader.herokuapp.com/全コードはこちらです。https://github.com/dai-shi/canvas-rss-reader/tree/adfe56808e98da9936c690b85bd169aabca4bb13コミットの日付を見れば分かるでしょうということで、次回からはコミット指定のURLの記載は省略します。Canvasのみを使ってどこまでスマホアプリが作れるのか挑戦中です。前回の結果、スクロール動作が遅いことが気になりました。KineticJSを使うとノードの操作やイベント処理などは格段に使いやすくなるものの、描画という点ではオーバーヘッドになっているようです。ノード数が増えれば増えるほど遅くなるのでしょう。http://www.html5canvastutorials.com/kineticjs/html5-canvas-shape-caching-with-kineticjs/に画像としてキャッシュすることで、高速化する方法が記述されていたので試してみました。その結果、だいぶ改善されました。これなら実用に耐えそうです。逆にノード毎のイベントハンドラーが使えないことになります。KineticJSですが、活用できていないことになってしまうのかもしれません。このあたりは引き続き考えてみましょう。コードはこんな感じになりました。数日間以内には新しいバージョンになってしまいます。昨日のバージョンはたった1日の公開でした。http://canvas-rss-reader.herokuapp.com/全コードはこちらです。https://github.com/dai-shi/canvas-rss-reader/tree/9061aeab3ab034beca7fdaa9a472d3f3225671d5必要であれば、このコミットをチェックアウトして自力で走らせることもできます。Canvasのみを使ってどこまでスマホアプリが作れるのか挑戦中です。題材はRSSリーダーです。Pipesの補完機能として考えています。前回に続き、スクロールを実装しました。その前に、テキストの配置について補足します。前回は、setOffsetを使いました。分かりにくかったので、ループの中でy座標をインクリメントするように変更し、背景の高さもあわせて大きくするようにしました。詳しくはコードを参照してください。本題のスクロール処理についてです。スマホを想定しているので、スクロールバーではなく、タッチ(ドラッグ)スクロールです。はじめは、touchstart/mousedownイベントを使って自力でスクロール処理を書いてみましたが、スクロールするたびにdraw()で再描画をしたところ、とても遅くなってしまいました。そこで、KineticJSが用意しているDrag&Dropの仕組みを使う方法に変更しました。この方がすっきり書けました。どこまで細かい制御ができるかはこれからのお楽しみです。コードはこんな感じです。}});想像していたより、スクロールがスムーズではありません。Canvasを直接操作した場合と比較していませんが、KineticJSのオーバーヘッドがそれなりにあるのでしょうか。数日間以内には新しいバージョンになってしまいます。http://canvas-rss-reader.herokuapp.com/全コードはこちらです。https://github.com/dai-shi/canvas-rss-reader/tree/3d370b3386b7f46116b892ac4cf37d5282d3910aところで、スマホで試したら、最後までスクロールできないみたいです。スクロールも遅いです。課題浮上かもしれません。dai-shiだいぶ間が空いてしまいましたが、HTML5を使ってどこまでスマホアプリが作れるのか、挑戦しようと進めています。題材はRSSリーダーです。Pipesの補完機能として考えています。Worldを表示するところまででした。今回は、RSSを取得してテキスト表示してみました。スクロールできません。クリックもできません。RSSはjQueryを使って読み込むことにしました。コードはこんな感じです。}});updateRssContent()でキャンバスにかきますが、座標も自分で計算しないといけません。layer.draw();}setOffsetを使うよりいい方法があるのではないかと想像しますが、まだ探していません。実行結果はこんな感じです。最新版は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/このあたりをウオッチすることになるのでしょうか。Pipesの一機能として、スマホ向けのRSSリーダーみたいなものを作ってみようかと思います。KineticJSの勉強をしているところです。参考にしながら作っていきます。HTMLのコードを説明します。初めに、KineticJSの読み込みます。src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.2.min.js"></script>試しに使う場合はこのままでいいでしょう。デプロイするときはローカルに持ってこようと思います。次に、自分のスクリプトを読み込みます。defer="defer"></script>deferを指定しておくことで、HTMLのロード後に読み込まれます。空のbodyにIDを指定しておきます。id="container"></body>こうしておくことで、KineticJSのstageをbodyの直下に作ります。Canvasになりません。overflowを指定しないと、ChromeやFirefoxでスクロールバーが出てしまいました。続いて、本題のJavaScriptのコードを説明します。KineticJSのステージを作ります。Canvasとなります。Kinetic.Layer();表示領域一杯の四角形オブジェクトを作ります。'black'});黒にしてみました。Worldの文字オブジェクトを作ります。'lightgray'});ステージのサイズから計算して中央に配置しています。x,yは文字オブジェクトの左上の座標です。そこで、ちょっとずらして文字オブジェクトの中心に合わせます。2});最後に、四角形オブジェクトと文字オブジェクトをレイヤーに追加して、そのレイヤーをステージに追加して、終わりです。Worldを表示するページを作ることができました。アプリと呼べるようになるまでにはまだまだかかりそうですね。実行結果はこんな感じです。コードはGistにアップしておきました。Pipesの一機能として、スマホ向けのRSSリーダーみたいなものを作ってみようかと思います。RSSリーダーなんて世の中にたくさんあるので、普通のものを作っても面白くありません。そこで、勉強がてらHTML5でスマホアプリにしてみようと考えました。canvasというのはグラフィック用の機能ですが文字も書けるわけで、それですべてを作ったら面白いのではないかと思いました。Canvasは何年か前に少しだけ触りましたが、最近はライブラリも充実しているのではないでしょうか。検索してみると、HTML5のcanvasを劇的に使いやすくするJavaScriptライブラリまとめ5つを見つけました。Libraries(2012)?を見つけました。使ってみないと分からないだろうと思いますが、これらの情報から、KineticJSを試してみることにしました。今日のところはここまで。これから少しずつ進捗を書いていけたらいいなと思っています。