ウェブページで縦書きを実現するJavaScriptライブラリ「nehan」

No Comments

これ、面白いね。

和の雰囲気を出す、サイトなんかにすごい似合うと思う。
やっぱり縦書きの文章を見るとなぜか安心する。

オススメ。

ehan

ゲーム用JQuery「GameQuery」

No Comments

gameQueryはJavaScript製/jQueryプラグインのオープンソースだそうだ。
試してみたけど、案外スムーズな動きにビックリした。デモでやってみたほうがいいかもしれない。

gameQueryを使ったオンラインゲームが出てきそうだ。昔、AJAXを使ったオンラインゲームがあったのを思い出した。いろんなゲームジャンルが作れそう。

ストリートファイター系ゲームまで!ゲーム用jQueryプラグイン「gameQuery」CommentsAdd Star
http://www.moongift.jp/2010/03/gamequery/

JQuery1.4リリース!!だって

No Comments

JQuery1.4がリリースされたぽい。
気づいていたけど、「すきなばしょ」のサイトリリースやちょっとした修正をしていたせいで、なかなか情報収集ができなかった。

バージョンが上がってさらにスピードがあがったそうだ。

14 Days of jQuery」を見るとパフォーマンスが1.3より早くなっている。メソッド系「.append()」や「.html()」やAttributes系の「.attr()」や「.css()」の処理速度も上がっている。

また、ちゃんと読んでいないけど、新しいメソッドもできている。
※よーく読んでからブログに書いてみようと思う。

とにかくこれだけパフォーマンスが上がると使わないというのは、とても損だと思う。

1.3と1.4でだいぶ仕様が違うみたい。ただ、ある程度は、互換性があるぽい。
この辺は、気をつけないといけない。

Webサイト・WebシステムをIPhone専用UIを実現する「JQTouch」

No Comments

IphoneやIpodTouchのUIをPCサイトのウェブサイトやウェブシステムに適用するのに、丁度いいライブラリだと思う。JQTouchは、JQueryのプライグインとして動作するぽい。Webkitで動くようなので、試す場合は、safariで見た方がいい。

これなら、Iphoneユーザーにとっても慣れているUIなので、使いやすくなるかもしれない。

JQTouch
http://www.jqtouch.com/

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

1 Comment

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

No Comments

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

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

作ったものは、こちら

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

Flexにおけるディープリンクの付け方

No Comments

Flexでの構築でウェブアプリケーションやインタラクティブコンテンツを作る際、必ず課題としてあがってくるのが、ページごとのリンク(ディープリンク)だと思う。

ちょっと前のFlashコンテンツだと各階層ごとにリンクがなくてブックマークしても結局はトップページから目的のページへまた画面遷移しないといけない。これって、ユーザに負担をかけてしまい、離脱率が高くなってしまう。

そこで、各ページにリンクを付ける機能が More

[AS3]SiONの活用方法

No Comments

Action Script3のLibrary:SiONを見つけてすごく感動したけど、シンセを作れると思っていたけど、それ以外どうやって活用すれば良いのかずっと、考えていた。

ボタンのマウスオーバ時の効果音とか・・・そういうしか見つからなかった。
でも、効果をあらかじめ用意しないでFlash上で生成できるっていうのが一番魅力っていうことに気づいた。

まだ、実験していないからなんとも言えないけど、これだったらmp3を読みこまなくてもいいからファイルサイズを小さくできるのかもしれないしね。あと、ちょっとしたシンセなのでかなり無機質な音の作りこみもできる。

参考サイト
note.x
(UI Sound with SiON)

http://blog.r3c7.net/?p=406N

[AS3]Tweener 開発終了って・・・

No Comments

Tweenerの開発が終了したようだ。
いろんな動きのできるアニメーションで、しかも簡単に扱えるので使っていこうと思った時に開発終了って。ガックリ。

ん~、違うライブラリーか開発終了したTweenerを使うしかないのかな。
でも、全く違うTweenerの開発をするって書いてあったので、それに期待しようかな。

今、開発しているコンテンツはTweenerを使っている。とりあえず、これを使うつもり。

Tweenerの開発者のコメントを日本語訳されているものがあるので、見たほうがいいかも。

Link:
Tweenerの終焉

[AS3.0][Flex3]Portfolio Visualizer

No Comments

portfoliovisualizer

前に紹介した「SpringGraph Flex Component」を使って、自分の職務経歴書をビジュアライズしてみた。きちんと関わったプロジェクトを入れるとすごくリッチな感じになると思う。ただ、公開しているのでプロジェクト名は、ふせてある。
会社のロゴをダブルクリックすると関わったプロジェクトが出てくる。

今回、Flex独特のPreloaderを使わずに自分で作ったものに切り替えている。
これは、MXML上でクラスを定義しておくとよいみたい。この辺は、そのうちメモしようと思っている。

Flexだけでここまでのビジュアライズができると楽しいと思う。

Portfolio Visualizer
http://lab.branberyheag.com/portfolio/

Older Entries Newer Entries