Branberyheag!! Lab

HTML5では、カスタムできる属性がある。

書式は

<h1 data-hoge="hoge">タイトル</h1>

というような感じでかけるようだ。かなり便利でしょ！

参考サイト

http://havelog.ayumusato.com/develop/html/e158-html5-custom-data-attribute.html

属性を作るにはルールがあって、最初「data-」をつけないといけない。

HTML5で作るんだったらぜひ、これを使ってみたい。

HTML5/CSS3/Javascriptで作る「Phone Gap」というネイティブアプリが作れるツールがあるみたい。
「Titanium Mobile」とは違い、Webアプリを作る感覚で、簡単に変換してくれるツール。

ノリ的には、HTML/Javascriptで作るAdobe AIRみたいなようなものだ。カメラやファイル、位置情報などの端末の機能にもアクセスできるので、JAVAやObject-Cなどで作ったようなアプリが作れるみたい。

ゲームや簡単ツールを作るには、いいアプリケーションなのかもしれない。

なんか作ってみようかな。

関連リンク

• Notobi
• HTML5のモバイルアプリを“ネイティブアプリ化”する「PhoneGap」が正式版に。オンラインでの変換サービスも発表

Raphael.jsでSVGをグニュグニュと動かしたいと思って、いろいろとやってみた。

アニメーションメソッドがいくつかあって、これがまたかなりパワフルというか分かりやすい。
種類として、２つあるようだ。
※間違っていたら、ごめんなさい。

More

Raphael.jsは、JavaScript用のグラフィックライブラリ。

SVGで出力になるようで、Canvasに比べて扱いやすいと思う。

More

Canvasを本気で勉強したくて、この本を買った。 More

前に作った、instagram Wallに保存（メモ用）機能を付けたくていろいろと調べてみたので、メモ。

Web Storageは、特定のドメイン内だったら、どこからでも呼び出せるみたい。
※語弊があるとあれなので、ローカルストレージは、オリジン単位での保存になる。
プロトコル+ドメイン+ポート番号での保存になる。

Cookieみたいな概念とはちょっと違うけど、同じ名前での保存は、上書きになってしまうので、注意が必要。

保存は

<pre><code>window.localStorage.setItem(キー名, 内容)</code></pre>

読み込みは、

<pre><code>window.localStorage.getItem(キー名)</code></pre>

フォームで書きかけのデータ保存や一時的に保存が必要な場面で使えると思う。

参考
サーバー不要で保存できる「Web Storage」の使い方

instagram Wallを作ったけど、技術的な解説。

More

instagram APIを使いたかったので、「instagram Wall」を作った。

More

正直は、Web Worker使わないだろう・・・って思っていたけど、計算などロジックをやらせて、結果だけをメインのJavascriptでやらせるのが良いんだろうなって、思った。
Web Workerは、DOMの処理はできないので、本当純粋に演算しかできないようだ。ただ、並行処理になるので、フロントエンドでユーザーのイベント処理をしながら、なんらかの計算をさせることができるのは、かなり魅力的なことだと思う。

Web Storageも魅力的な機能のひとつ。
ブラウザにデータ保存ができるので、これも魅力的。最終的には、サーバサイド側でのデータ保存になるのだと思うけど、一時保存などではものすごい役に立つと思う。
ここまで、処理用のスクリプト・保存処理するスクリプト・イベントを管理するスクリプト（インタラクティブのスクリプト）・そして、これらを全体を管理するスクリプトというきれいな分け方ができる。
Webアプリケーションを作る環境は整ってきているし、あとはアイデア次第で、ものすごい可能性を秘めている。

ただ、ビジネス用のアプリケーションを作りにしろ、Webサービスを作るには、バックエンドの必要性が高まってくる。
多分、アプリを使って関わってくる人が１人称、またはデータが消えても問題ないようなアプリだったりする場合は、フロントエンドだけで良いのかもしれない。

スマートフォンで、ペットをブラウザ上で飼う、Webアプリだったらフロントエンドだけでアプリ開発できるとおもう。

こうやって書いていると俺も今つくっているサイトを仕上げたい。

Google  Chrome Team が作った「20 Things I Learned About Browsers and the Web」という素晴らしいサイトがあるんだけど、そのページをめくる感じがものすごくいい感じ。
これ、Canvas を使って表現されている。マウスイベントでアニメーションを使っているため、ロジック自体は複雑になっていると思う。

実は、これを自分でつくろうと思っているいろいろと試してみたけど、結局、駄目だった。（時間が切れ）
これを今作っているサイトに取り入れようと思って、いろいろと試してみた。

このページめくりに関して、参考になる記事があったので、メモ。

More