Branberyheag Lab

コミュニティサイト「すきなばしょ」をリリースして１ヶ月くらい。

参加してくれている人たちもちょっと増えたが、投稿してくれるまでにはなかなか至っていない。原因として考えられるのは、投稿フローの面倒臭さなのかなと思った。
実際問題、カスタムフィールドでかなりの確率で躓いていた。気軽さと早さという点では、ものすごいかけているこのサイト・・・Wordpressで構築してしまったので、しょうがないちゃー、しょうがない。

少しでも気軽に、素早く投稿するために、iPhoneとAndroidの補助機能「メール de 投稿」を作ってみた。
現在位置を取得して、そのまんま投稿できるシステムがあるから、それを補助する機能は、Javascriptで作っちゃえ～と思った。

でも、すごい簡単に位置情報って取得できるのね。しかも、デスクトップでも位置取得できるしすごいね。

それと、実機テストをしていないのが、少し心配。。。もし、おかしかったら、お知らせください。多分、大丈夫のはず。

「メール de 投稿」

今日の投稿で100回目を迎えた。マメに投稿すると早いもんですね。

コミュニティサイト「すきなばしょ」をプレリリースした。

制作期間は2ヶ月くらい。まぁ、仕事をしながら進めてきたので時間はかかってしまったけどやっとリリースまでこぎつけた。

サイトコンセプト
「ユーザー同士が好きな場所を共有して、実際に行ってまた共感する。」
言葉的にはおかしいかもしれないけど、あえてこの言葉を使った。好きな場所は、誰にでもあります。それを大切にして、誰かにこの気持ちを共感したいことってあるのかな～と思いました。

あと、教育テレビで私が小さいときに放映していた「たんけん　ぼくのまち」という番組があってそのなかでは自分の町を探検して、自分の町ではどんなことことが起きているのかなどを探検して最後は素敵な地図にする番組。
これが私は大好きで去年から自分のすきなばしょを地図に書き込んで共有したいという気持ちがあった。

結局、いろんな思いはあったけど、ブログという形で落ち着いてしまった。

技術的なことについて
バックエンド部分はWordPressを使っています。自分で作ろうと思ったけどゼロから勉強して作るまでに飽きてしまいそうだったこともあって今回は諦めた。

フロントエンドにはJqueryライブラリーを主に使ってGoogle Maps APIをコントロールしている。あとは、親ウィンドウから子ウィンドウへのデータ受け渡しも実現している。記事に書いてある、地図のプリント部分はデータの受け渡しはJavascriptのみで行っている。

あとは、Google Mapsにadsenseを埋め込んで広告表示をしている。これも前回の記事で説明している。

追加機能について
携帯電話やスマートフォンからメール投稿できるようにしようかと考えている。

携帯電話の場合は、GPS搭載携帯だと、簡単にメールに取得できるようなので、メール送信時に経緯と緯度とタイトル、写真をメールで送るだけで投稿できる仕掛けを実装予定。
あと、携帯電話での閲覧とiphoneでの最適化をめざす。
JavaScriptで実装したスクロールバーのwindowサイズを変更したときの挙動がどうもおかしい・・・原因は分かっているけど解決策がない。ブラウザウィンドウとコンテンツの大きさを比べているんだけど、どうやらコンテンツ全体の長さがちゃんと取得できていないらしい。
これも早めに修正したい。

よかったら、コミュニティサイト「すきなばしょ」に気軽に参加してください。
いろんな人の意見を聞きながら運用していきたいと思っています。

正式リリースまでは、もう一息。
IE6のブラウザ対策（最新バージョンへのアップグレードの案内を表示）が残っている。
正式リリースは来週になりそう。。。

すきなばしょ
http://www.sukinabasho.com/

Jqueryでスライドショーをプラグインを使わずに作る場合は、まずは頭の中でどのようにすればスライドショーを作れるか考えることが大事だと思う。

ul,liタグで画像を並べておいてそれをCSSで同じ位置に持ってくる。それを表示したい画像だけ表示させて、他は隠しておく。順番に画像を表示させる。
ここで、問題になるのは一番最初と最後の要素をどうやって検出するかがだと思う。私の場合は、classタグにフラグを立てておく方法をとる。最初にきたら、一番最初へ戻るようにプログラムすればいい。表示の時は、フェードイン、フェードアウトにするかを決めておいたほうがいい。CSSで表示非表示にするとJqueryで制御しようとするとうまく動作しなくなってしまう。Javascript側で制御するかCSS側で制御するくらいは決めておいたほうがいい。

作ったものは、こちら。

今後のことを考えると、クラスファイル化をしたい。それとsetInterval()とclearInterval()をクラスファイルで定義すると動かなくなるのか考えたいと思った。
今回は、関数に置き換えて作っている。まだまだ経験不足である。

2か月ほど、ずっとかかりきっりで作っていたFilmGeneratorというツールを作っていた。これを元にオンラインツールだけではなくAIRにも反映するつもりだったけど、途中で作るのを諦めようと思った。

コンセプトとして、デジカメで撮った写真を気軽にFilmのような色合いに変換できればいいなぁと思った。そこから開発を始めた。Flash player10を利用して、Flashのみで画像の読み込みと保存ができるようにした。

色調は、Color MatrixとTwennerを使ってサクっと作るつもりだった。
だけど、楽して作ろうと思ったのがそもそもの間違い。案外難しかった。それもどうにか乗り越えてLomo Filterというクラスを作って、適用しようと思ったら、保存すると適用されるのにプレビューでは全然適用されなかった。

あとは、次々と読み込み、保存をしたかったので、ファイル読み込み時には、今まであったデータを削除したかった。だけど、これもうまくいかなかった。
ダラダラと進まないので飽きてきたというのもあった。

反省点は以下の３つ。まだまだあるんだけどね・・・

• 機能を絞ることによって、使う側が難しいことを考えないでいろいろとできるツールを作りたかったこと。
• フィルムのようにアウトプットするまで見せないでおくというコンセプトもツールという視点と使いやすさという視点からでは、使えないツールになってしまうこと。結局、プレビュー画面を付けてしまった。
• 技術不足だったこと。

また、やる気が出たらまた再開したいと思う。
こういう止め方は本当は嫌なんだど、次に作りたいものもあるので、そっちをがんばるぞ。

FilmGenerator
http://lab.branberyheag.com/film/

今回こんなものを作ってみた。

twitterが最近、また流行りだしたのでtwiiter APIを使ってFlashコンテンツを作ってみた。「twitter ant」っていう名前を付けてみた。

twitter APIからは、最新のつぶやき20件をXMLで取得して、蟻に見立てた棒を配置して、自動でウロウロさせている。棒（蟻）にカーソル合わせるとユーザの顔が表示される。クリックするとつぶやいた内容やどこに住んでいるのかユーザのメッセージが見れる。名前の下にある「Detail」をクリックすると別ウィンドウが開いて、twitterのページに遷移するようになっている。

XMLは、PHPでプロキシーを作って、そこからtwitterへRequestをとばしている。

今回「twitter ant」を作ってユーザのつぶやき部分は、クラスファイルから呼び出している。画面ごとに定義する場合にもクラスファイルは必要だと思った。同じスクリプトを作らないようにすることを考えて、機能としての切り分けてクラスや関数を使い分けた。

解決できなかったことが２点ほどある。flash上の画面サイズを取得しているのにも関わらず、ロゴマークが配置がずれてしまった。つぶやきを見るときに半透明なスクリーンがかかるんだけど、spriteに色をつけて、大きさは画面サイズを取得している。配置する場所（座標）を0,0に関わらず、大きい画面で見るとズレてしまう現象に遭遇した。今回、ASファイルのみで作ったためか要領わからなかったこともあった。
ここがどうしてもわからない。何かあるんだろうか。。。

まだまだ、修行足りない。もっとガンガン作らないとね。

関連リンク
「twitter ant」
画像を配置時に位置がずれる件

FlexとAction script3.0を触り始めて、作りたいものを作ってやろうと思っていきなりflickr APIを使って作ったのが「Drop flickr」っていうコンテンツ。

構想は結構前からあったんだけど、Flash CS3で最初作ろうと思ったんだけど結局作りたいものを作れる知識がなかったために断念。それから１年くらい経ってまたリベンジした。今回はFlexということもあってUI周りはこれで作って、スクリプトは関数の組み合わせで作った。本当は、クラスファイルで作るのが一番なんだけど、今回はリハビリと最初ということもあって関数で作った。

Hello Wolrd的なところもあって細かい部分が適当になってしまっている。
技術的には、BOX2D flashというライブラリーとflickr APIが使えるライブラリーをのふたつを使っている。

サーバにあげて気づいたんだけど、クロスドメイン用のスクリプト入れないといけないことに気づいた。かなり焦ったけど、調べたらすぐに事例があってよかった。あと、ダブルクリックでflickrサイトに画面遷移させたかったけど、メソッドを見つけられなかった。それとBOX2Dではなぜか正方形の生成ができなかった。なので、今回は丸のみで作った。結構、ライブラリーって理解していないと難しいもんだね。

とにかく、いろいろといじって遊んでください。
やっとリリースできたので、次のコンテンツを作ろうと思う。

Drop flickr
http://flickr.branberyheag.com/dropflickr/

–
追記
検索後、もう一度検索する場合は、右上のボタンをクリックすると検索窓が表示されます。
再検索用のボタンの配置がイマイチだと思う。