JQuery | Branberyheag!! Lab

[メモ]JQuery1.4の新機能のまとめその２

02/4

isaoJavaScript JavaScript, jQuery No Comments

jQuery1.4の新機能を1.4だけに14個
http://tech.kayac.com/archive/jquery-1.4-new.html

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

01/20

isaoJavaScript, library jQuery No Comments

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

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

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

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

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

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

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

01/16

isaoJavaScript, library jQuery No Comments

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

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

JQTouch
http://www.jqtouch.com/

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

01/11

isaoJavaScript, library, wordpress, アイデア JavaScript, jQuery, 作品 1 Comment

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

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

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

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

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

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

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

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

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

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

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

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

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

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

safariでHTML上に画像サイズを取得する際の注意点

11/25

isaoJavaScript jQuery No Comments

画像サイズをjavascriptで取得できるのに、safariだけが取得できずにいた。
できないのは、ブラウザの仕様ぽかったので、どうすれば回避できるかいろいろと調べていた。

解決方法を見つけた。(JQueryの場合)

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//![CDATA[
$(function(){
$("#hoge").bind("load", function(){
alert($("#hoge").width());
alert($("#hoge").height());
});
});
//]]
</script>
<img id="hoge" src="1855886406_808c951ac5_b.jpg" />

全部読みこんだらイベントを発動させる方法がいいみたい。
この辺って、なんかActionScriptに似ているよね。

<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript”>
//![CDATA[
$(function(){
$("#hoge").bind("load", function(){
alert($("#hoge").width());
alert($("#hoge").height());
});
});
//]]
</script>
<img id=“hoge” src=“1855886406_808c951ac5_b.jpg” />

IE6でpngを対応させる（ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader）

11/12

isaoJavaScript jQuery, Tips No Comments

IE6は、ブラウザとしては一番古いのにまだシェアとしてまだまだ高い。無視してもいいんだけど、放置しておくのもいかがのものかと思う。

IE6でPngを対応させる方法して

*html #logo a{
 background-image: none;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/common/logo.png", sizingMethod="crop");
}

これが一番てっとり早い方法だと思う。対応させたい画像のパスだけど、これはHTML上を基準にして考えているようだ。それと「sizingMethod」は、画像をどのような形で作った。
IE6のみ対応ということで「*html」を使っている。これは、ファイルを別シートにしてIEのコメントハックを使うという方法もある。

参考記事
IE6対応！jQueryで透過PNGのロールオーバーを作る

Branberyheag!! Lab