2009年11月

さていつまで根気が続くかわかりませんが、
CanvasとJavaScriptでRPGっぽいものを作る企画の第2弾です。

前回は箱庭に閉じ込められてた勇者ですが、
世界が広がりました。

ただ、スクロールやマップ端での処理とかが非常に適当なのです。
※ 一応見た目には普通に見えるようにしたつもり・・・

世界

いやぁこんな一部分でも結構苦労するんだから、
ゲームを一つ作りあげるのって大変だなぁ。

さて、再びJavaScriptでゲームです。

といっても戦闘シーンを作るのは飽きたので、
RPG風のなんかを作ってみたいと思います。

それでは、旅立ちです。

旅立ち

まだ四角形の中を歩くだけです。
これからいろいろ弄っていきます。

どうも、引き続きJetpackに興味津々なtnantokaです。

突然ですが、JavaScriptにはデータの保存（永続化）ができないという弱点があります。
なので、ちょっとでもユーザ情報を持ったりするプログラムを書こうとすると、
サーバサイドスクリプトの力を借りるはめになります。

PerlもPythonもPHPもRubyも書けない僕にとって、
これは非常に困る問題です。

なので、HTML5のlocalStorageにはとても期待しています。
といっても使用策定も実装の追いつきもまだまだ先のこと。

そんな中調べてみたら、Jetpackには"storage.simple"なる
永続化機能があることを知りました。

早速試しにFeatureを作ってみました。

Jetpack Memo

説明

ちょっとしたメモを保存するJetpack Featureです。

使い方は、以下の通りです。

まずはメモの保存。
右下の鉛筆アイコンをクリックするとプロンプトが表示されます。
そしたら、「key,メモ」と入力してOKを押せば保存できます。
※ keyはなんでもいいですが、忘れたらそのメモとはお別れです。
　（/Users/xxx/Library/Application Support/Firefox/Profiles/yyy.default/jetpack/zzz/に残ってると思いますが・・・）

お次はメモの取り出しです。
左端に表示されているメモ帳アイコンをクリックすると、
またまたプロンプトが表示されます。
先ほどのキーを入力すると、メモ帳アイコンのすぐ右に保存した内容が表示されます。

と、まぁこれだけのしょぼいものです。
勉強中なのでご了承下さい。

参考

• Jetpack APIリファレンス | Screw-Axis
  storage,slidebarの説明がわかりやすいです。
• Jetpack・JEPのSlidebarに仕様変更 - まめ畑
  slideBarの新しい仕様について。（知らなかったのでハマりました・・・）
• jetpackのstorage.simpleで保存したデータを消す方法 - まめ畑
  今回は使いませんでしたが、stragemのデータを消す方法です。
• [JavaScript] dataスキームURI生成（画像データのBase64変換）
  お手軽dataURI作成。
• Vicuna - アイコン
  毎度のことですが、wuさんのアイコンを使わせてもらいました。

Firefox Developers Conference 2009 - アドオンで Web の未来を切り開く！（#fxdevcon2009）
に行ってきました。

セミナーの内容は資料とかどっかにあがるだろうし、誰かが書いてくれると思うので、
そちらを参考にしてもらうとして、ここでは仕入れた情報を生かしてプログラミングしてみます。

というわけでJetpackingです。

パラレルでやってたはてなの方を聞いてたんで、「3分Jetpacking」は聞けませんでしたが、
せっかくきっかけをもらったのでやります。

作るのはMake Linkの簡易版みたいなやつ。
bornneet.comやtnantoka.netかどうかを判断して、
内部/外部リンク用のaタグをクリップボートにコピペするだけです。

はい、僕専用です。

それでは、はじまりはじまり。

準備する

参考サイトの通りです。

・・・じゃあんまりなので、軽く説明を。

Mozilla Labs Jetpack | Exploring new ways to extend and personalize the Web
から、アドオンをインストールすれば終了です。
以降、再起動不要のアドオン開発が始まります。

※ Firebug最新版だとなんかうまく動きません。
　上記サイトに従ってfirebug-1.4X.0a27を入れたら大丈夫でした。
　b3でもいけました。（2009/11/10）

作る

さて、作っていきます。

といっても「about:jetpack」にアクセスして、
Developのところにあるテキストエディタで試しながら作ればいいだけです。

んで、できたのがこれ↓
（Firefoxでクリップボードが簡単に操れて便利！！bookmarkletだとFlash使わないとできないもんなぁ。）

// これやらんとmenu/clipboardが使えない
jetpack.future.import('menu'); 
jetpack.future.import('clipboard'); 

jetpack.menu.context.page.add({
	label: 'External Link',
	command: function() {
	
		var url = jetpack.tabs.focused.contentDocument.location.href;
		var external = '" class="external" target="_blank" title="新しいウィンドウで開きます"';
		
		if(url.search('bornneet.com') != -1 
			|| url.search('tnantoka.net') != -1
			|| url.search('tagget.org') != -1 
			|| url.search('bornneet.blog.shinobi.jp') != -1) {
		
			external = '"';	
			
		}
	
		jetpack.clipboard.set('>a href="' + url + external + '<' + 	
			jetpack.tabs.focused.contentDocument.title + '>/a<');
	}
});

たったこれだけで、コンテキストメニューからリンクコピペ機能が使えます。
（menuやclipboardの機能はimportを書かないと動かないので注意です。）

僕以外には全く役に立ちませんが、
External Link
からインストールできます。

以上です。
いやぁ、噂通りお手軽にいろいろできそうですねぇ。
これからもちょっとした困り事があったら作ってみようと思います。
（bookmarkletでできないことでも諦めなくてよくなる！）

参考サイト

Jetpackチュートリアル | Screw-Axis
about:jetpackのtutorialの日本語訳＋α。わかりやすいです。

Image Editor Jetpack
コードを見ればJetpack 0.6の使い方が一目で分かるAza Raskinさんの作品。
今日の講演でもこれを使ったデモ（live coding）をしてくれました。
ちなみに、男前です。

Firefox 拡張を jQuery で書く！ Jetpack を使ってみた。 - IT戦記
公開用htmlとかのわかりやすい説明。

追記 2009/11/08 23:30

こんな感じになります。

さて、そろそろいつもの飽き癖が出てきましたが・・・。
とりあえずキリのいいところまでは、ということで、
HP表示と、勝ち負け判定をつけました。

ダメージ

モチベーションも下がってきたので、戦闘シーン作りはこれで一旦終わり。
次は何をしようかなぁ？