Branberyheag!! Lab » 作品

お仕事用サイト「Branberyheag!!.jp」をローンチしました〜

isao — Sat, 13 Aug 2011 22:23:43 +0000

お仕事用サイト「Branberyheag!!.jp」を公開。

最初は、自分のポートフォリオサイトを作るつもりなかったのですが、段々、システムが出来上がってくると、いい感じの完成度になってしまって、これを単純に公開するのも勿体ないなと思って、自分用のサイトにしてみた。

技術的な話をするとWordPressでできていて、カテゴリー、ページ、記事というようなシンプルな構成でできあがっている。ただ、ページ遷移は、なくてJQueryのload()を使って、HTMLを呼び出している。戻る、進むボタンを有効にするため、ハッシュタグをURLに組み込んで、あとはプラグインでの処理を行っている。

あとは、スライドショーは、Arrayに画像のパス、サイズをつっこんで、ページおくりしたときに呼び出している。DOMを操作して、消えたり出したりするよりは、処理が速いような気がする。

これを作ったときにいろいろとTipsが溜まったので、ネタを公開していきたい。

これ、フェーズ１なんで、もう少し手直しと機能を追加する予定。

以前やった、クライアント案件で、この技術を使えばもっといいものができたとこれを作りながら思った。いつか修正したいけどね。関連した記事

「instagram Wall」を作った

isao — Wed, 30 Mar 2011 06:58:15 +0000

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

フロントエンド側のみで生成しているので、取得できるデータに限界はあるけど、できることで作ってみた。
ポヒュラーというカテゴリーの写真をスクロールが下までくると自動で新しい写真のみを取得して生成している。
取得するたびに同じ写真を表示するのも嫌だったので、生成する前に同じ写真があるかを検索して、生成している。

追加で付け足しかったのが、お気に入りの写真を一時保存したかった。
これは、Webストレージを使ってやってみようと思って、今、作っているところ。

あとで、詳しい仕組みを書こうと思う。関連した記事

【すきなばしょ】メール de 投稿リリース？

isao — Fri, 12 Feb 2010 11:00:33 +0000

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

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

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

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

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

「メール de 投稿」関連した記事

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

isao — Mon, 11 Jan 2010 14:55:39 +0000

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

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

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

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

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

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

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

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

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

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

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

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

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

すきなばしょ
http://www.sukinabasho.com/関連した記事

Jqueryでスライドショーを作るときのコツ-実装編-

isao — Sat, 07 Nov 2009 16:39:47 +0000

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

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

作ったものは、こちら。

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

失敗作:FilmGenerator

isao — Mon, 19 Oct 2009 15:05:24 +0000

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

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

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

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

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

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

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

FilmGenerator
http://lab.branberyheag.com/film/関連した記事

twitter APIを使ったFlashコンテンツ（twitter ant）

isao — Wed, 26 Aug 2009 15:56:54 +0000

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

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とflickr APIで遊んでみた

isao — Mon, 13 Jul 2009 03:42:09 +0000

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/

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