wakasa.org

Google Docsのスプレッドシートにあるデータを簡単に読み込むJavaScriptを作りました。
これで、サーバサイドのプログラムをまったく使わずにJavaScirptだけでデータなりを読み込んで表示することが簡単になります。
あと、Spreadsheets自体はExcelなど多様のフォーマットに対応してますので、あまりWebの知識がない人でも簡単にデータを保持してサイトで表示することができるようになります。

読み込み専用
http://wakasa.org/project/jquery/gspreadsheets.js

Postも対応
http://wakasa.org/project/jquery/jquery.gspreadsheets.js
※非同期通信部分でjQueryを利用しているので、jQueryのプラグインになります

使い方は以下の感じで。

---

- 取得 -

---

※jQuery版の例なので、単体版の場合は$.を削除してください。

$.gspreadsheets.load("[Spreadsheetsのkey]","[シート名]",[読み込んだデータを返す時のfunction]);

まずSpreadsheetsの設定で右上にある「共有」から「ウェブページとして公開」を選んで公開します。

$.gspreadsheets.load("pUueo43_joGIIz68KkRF-Tw","default",getDataEnd);

とした場合に
http://spreadsheets.google.com/ccc?key=pUueo43_joGIIz68KkRF-Tw&hl=ja
のdefault指定したシートを読み込んで、getDataEndに返します。
シート名は、通常１番目がdefaultになりますが公開設定によりいろいろかわります。
シート番号に関しては１シート目は[od6]、2シート目は[od7]....というルールで名前がつくようです。どうして６スタートなのかは不明です。
このシート番号は「ウェブページとして公開」の「公開の詳細設定」で見る事ができます。
返ってくる内容は１列目に名前を付けたものがkeyになってるオブジェクトが配列になって返ってきます。

[
{"タイムスタンプ":"","name":"","lat":"","lng":"","address":"","explanation":""},
{"タイムスタンプ":"","name":"","lat":"","lng":"","address":"","explanation":""}
]

---

- 送信 -

---

$.gspreadsheets.post("[Spreadsheetsのkey]",[送信データ],[送信データとの関連づけ],[送信後に呼び出されるfunction]);

これに関しては少々トリッキーな方法で、Spreadsheetsをまずフォーム化します。 Spreadsheetsの上部に「フォーム」とあるので、それでアンケートフォームを作成します。 で、フォームが完成後、フォームのソースを見て、[entry.0.single]などの文字列を探して、それと１行目の名前の関連付けをメモします。 http://spreadsheets.google.com/viewform?key=pUueo43_joGIIz68KkRF-Tw&hl=ja だと下記のようになります。

var sendData={}; var typeData = { name:"entry.0.single", lat:"entry.1.single", lng:"entry.2.single", address:"entry.3.single", explanation:"entry.4.single" }; $('input[type="text"]').each(function(){ sendData[this.name] = $(this).val(); }); $.gspreadsheets.post(seetid,sendData,typeData,sendDataEnd);

こっちはトリッキーすぎて使い勝手が激しく悪いのであまり使われないと思いますが、一応作っておきました。

ふと見つけたBalsamiq Mockupsを使ってみた。

http://www.balsamiq.com/products/mockups/desktop

これはAIRで作られているサイトのモックデザインを作るアプリで、ペーパープロトタイプみたいな形のものをサクサク作ろうというものです。
もちろんAIRなので、AIRのランタイムがあるMacでもWinでも使えます。データはXMLフォーマットで書きだせるし環境に依存しなく共有できるし、何らかしらツール作ればこれでモック作ってそれっぽいHTMLを吐き出したり、MXMLとかにしちゃってFlexで！みたいな事もできるかもしれません。

実際にやってみると、紙に書いてあーでもないこーでもないとかしてると、微妙にサイズ調整したいときにまた書くすか！となるので、その辺が個人的にコピペしてーとか思ったりしてたので、何も考えずとりあえず置いていけるのは便利な気もします。
ただ、この手のツールは他にもあったりしていくつか使ってましたが、Javaのアプレットでなんか変に重かったり、特殊なインタフェースで慣れれば早いんだろうが、そこまでの域に達する前に辞めたりとしてました。
ですが、これはなかなか使いやすい。何がどうっていうことはないのですが、なんか使いやすいのです。
たとえば、なんの気なしにサイズ変更すると

という感じで、今変更してるサイズが表示されたり

という感じで、CSV的な感じでカンマ区切りして適当に入力すればデータが入ったり、結構深く考えなくてもそれっぽいものがザクザク作れる感じです。
デフォルトでは日本語通らない（フォントに文字がないだけ）なので[View -> UseSystemFont]にチェックを入れるのをお忘れずに。

ただ、名前の変更がなんか不意になったり、設定いじってたら対象のオブジェクトが移動してたり、[ButtonBar]のみ文字入力確定がEnterなので変換＝確定になったり、微妙に不便ではありますが。あと値段が79ドルという勢い的に手が出しずらい金額なのもちょっと厳しいです。この金額のままではなく、9.9ドルだと最低限のオブジェクトしかなくて、39ドルだと適当に使えるやつがあって・・みたいな形にでもしてくれればまだいいのですが。
それと、残念なのがリンク系がないので、ここ押したらこのモックページにみたいな動作サンプルは作れないようなので、ここ押したらどこいくんだっけな・・と複数ページを作ってる時に管理が面倒になりそうです。まぁそれは別の仕様書なりで管理してくような感じになった方がいいのでしょうけども。

Googleさんのシステム完全依存ですが、昼飯抽選サイトを作りました。
昼飯を毎度ワンパターンだなーとか思いつつも、結局同じ店に行くあなたへ送るサイトです。

デザインとかアレな感じなのと、緯度経度とれないやつはアラートというショボショボでいじらないといけないですが・・。

http://wakasa.org/project/hirumeshi/
※気に入らない時は上にこっそり、かつ大胆にある次へをクリック

とりあえず、データはGoogleDocsから拾ってきています。
デフォルトは私の勤務先である五反田方面で、データは同僚と更新してますがしょぼいです・・。
まだまだ登録が甘いのでそこはご了承を。
http://spreadsheets.google.com/ccc?key=pUueo43_joGIIz68KkRF-Tw&hl=ja

これだけだとショボなのですが、シートの切り替えが可能にしています。
たとえば、適当ですが立ち食いそばだけチョイスしたシートを作り、それだけを抽選することが可能です。
http://wakasa.org/project/hirumeshi/?pUueo43_joGLlO8N5y-1NMw

なので、自分だけのシート作って自分だけのデータで抽選できます。
データ多すぎて結局ヒットしないとか、カテゴリ絞りたいとかならシート新しく作れ！という男らしい仕様です。絞り込みとか、前に選んだやつ出してくれなんかさせません。（逆切れ）

で、下記に方法書いときます。

1. シートを[name,lat,lng,address,explanation]で作る。
   ※たぶんnameだけあればいけるはず


2. 共有をクリックする


3. ウェブページとして公開


4. ドキュメントを公開をクリック
   ※変更が加えられると自動的に再公開するにチェックいれると自動公開なので便利


5. シートのIDがURLにあるので、key=後をコピー


6. http://wakasa.org/project/hirumeshi/?[ここにkey後を張る]にアクセス

とりあえずまだまだイケテないですが、もうちょっと改善します。
問題があったら教えてくださいませ。

p.s.
本当はフロントからも追加登録できるようになっているんですが、FFでエラーしてしまうので、とりあえず保留状態。

福本伸行先生著書の「賭博黙示録カイジ」や「アカギ」などでおなじみの "ざわ…" を表示するjQueryのプラグインを作りました。

http://wakasa.org/project/jquery/zawa/

ざわ…っとなるようなサイトを作った時にぜひご利用ください。

jQueryでコナミコマンドを簡単に実装できるプラグインを作りました。

http://wakasa.org/project/jquery/konamicmd/

やばい！！明日までに裏コマンドをサイトに実装しないといけない！とかそういう時にぜひ！

知人からこれすごくね？と送られてきたURL。
小学１年生４月号
※最新号のページなので月によってかわってしまいますが。
なんだこれは・・どこでもゆびピアノ！？

で、その２時間後には手元にあったわけで。

構造は単純。
各指部分にボタンがついてて、そこが押されると各音階の音が鳴るという仕組み。
指のサイズとケーブルが子供向けなのがなんだが、でも、それなりにきっちりとはめたらそれっぽくできる。
ある意味すげぇ。

で、我が子に持たせてみました。もちろん小学１年生の該当の年とは違いますが。
曲を弾くとかそういう概念はないものの、好きなケーブルとボタン押したら音が鳴るというので堪能のご様子。

これを使って演奏するライブでも開催されたらぜひいってみたい。

まだまだいけてない部分が大量にありつつ、直さないと思ってるのですが、
とりあえず1月の中旬に作ったバージョンを公開しておきます。

http://wakasa.org/project/hataraita/hata.air

どうやらかなりバグってるらしく、出勤したはずの日が抜けてたり、終了時間がおかしかったりしています・・。
根本的に直そうとしてFlexに移行中ですが、慣れないFlex作業に手間取って進んでおりません。

急いで作れよって自分に言い聞かせるってことで、とりあえず公開しときます。

p.s.
Flexで透過ウィンドウってどう作るんだ。。。。。。どうしても下地が消えない。。。