Google AJAX Feed APIでブログFeedを表示でけた。ありがたや。

javascriptで外部ブログのRSSフィードを表示させたいと思い、Google AJAX Feed APIが良さそうで、実験し、うまくいったのでメモです。

以下のサイトに詳しく書いてありました。ありがたや。
http://h2ham.seesaa.net/article/100840896.html

以下の本家サイトで、自分のサイトURLを入力してAPIキーを取得し、
http://code.google.com/apis/ajaxfeeds/
ソースコードにそのキーを入力。

そのコードを貼り付けたら、なんとすぐ表示されました。
「クロスドメイン対策」が必須だと思っていて気が重かったのですが、
スーパー簡単でした！

ありがたや。。。。。。 

bind,unbind(jQuery)

ある要素にbindしたクリックと実行されるfunctionを、指定回数以上のクリックがあれば取り除きたくて，いろいろやってやっとできたのでメモ。

 var num=0;
 $(".Click").bind("click.one",function()  
{$("#some").show().delay(4000).fadeOut(500);num++;
if(num>4){$(".Click").unbind("click.one");}});

これをbindの外で
 if(num>4){$(".Click").unbind("click.one");}
とかやっても反応が無いのが，自分にはまだ理由が分からない。

とりあえず、bind内で処理を書いたらうまくいったので，まあ良かったが。

追記：click.oneのようなnamespace(名前空間）をつけてやると、指定制御しやすくて便利。

モーダルフォーム実装のための学習メモ

モーダルダイアログボックスをつくりたいので、メモです。

これ、いい感じです。日本の方ですね。
http://blog.amunsnet.com/archives/2009/07/21223401.html

jQueryのUIにすでにあるんですね。http://jsajax.com/Articles/jQueryUIDialogModalForm/1275

ColorPicker.js(jQuery)の実装メモ

jQueryプラグインのColorPicker.jsを、開発者のサイトを見て、ちょっとカスタマイズしたのでメモです。
http://www.eyecon.ro/colorpicker/#about

リアルタイムに変更中の色や16進数の6ケタ数字が表示されるのがナイスです。

    $("#select_color").ColorPicker({
        color : $("#select_color").css("background"),
        onChange : function( hsb, hex, rgb ){
//span要素に■を入れ、色をリアルタイム変更。
            $("#color_test").css({color:"#"+ hex});
           $("#select_color").val("#"+hex);//#入りで16進数をリアルタイム表示
       },
        onSubmit: function(hsb, hex, rgb, el) {
            $(el).val("#"+hex);
            $(el).ColorPickerHide();
        },
        onBeforeShow: function () {
            $(this).ColorPickerSetColor(this.value);
        }
    })
    .bind('keyup', function(){
        $(this).ColorPickerSetColor(this.value);   
    });

フリーの日本地図データ

無料で、商用利用も可能な日本地図の白地図データがあったのでリンクメモです。

http://www.freemap.jp/japan/ja_kouiki_japan_big_scale_3.html

illustratorで各都道府県をオブジェクト化し、svg形式にして使えば、
Raphaelでいけそう。


http://www.freemap.jp/about_use_map.html
に商用利用も、使用許諾が必要ない旨も書いてあります。

素晴らしい。。

（無料版は、各都道府県の境目処理が簡易的なので、その作業は必要そうですね。。それにしてもありがたい。）

processing.js

Raphaelを最近習得中だが、
proccessing.jsもやはり素晴らしい感じ。
http://processingjs.org/

これから、proccessing.jsも学習しよう。。

SlidingGallery.jsの実装メモ（jQuery）

SlidingGallery（http://www.meadmiracle.com/SlidingGallery.aspx）
を実装した際の躓きをメモ。 

■class="start"をimgの内一つに書かないと、スライドが始まらない。
■"portrait"(横向き画像）の宣言はclass="portrait"ではなくlayout="portrait" !!(これでしばし悩んだ。。）

■あと、躓きではないが、
$('div.gallery img')
.slidingGallery({ container: $('div.gallery'),
'slideSpeed':'slow',
'Pshrink':shrinkFunc,'Lshrink':shrinkFunc,
'Pzoom':zoomFunc,'Lzoom':zoomFunc });
のように、オプションを色々書ける。
 面白や。

shrinkFunk,zoomFuncの変数は、先に宣言。(本家サイト参考。）
        var zoomFunc = function(dimension) {
            return dimension * 1.5;
        }
        var shrinkFunc = function(dimension) {
            return dimension * 0.5;
        }

containarオプション選択時は、
div.gallery{top:100px; left:0px; width:900px; height:500px;z-index:1000;}
みたいなことを適当に書くべし。

以上です。

(function(){ }(); にてこずった。

あるソースを見て、

var arg=something;

(function(A){
  処理;
})(arg);

みたいな書式はいったいなんだろう？としばし悩みました。

無名関数、というものの処理法の一つのようですね。

で、argをAに引数として渡し、処理を開始する、という感じなんですね。。

まだ理解が中途半端ですが、メモです。

javascriptの簡易的な書式、慣れると早くて便利でしょうが、最初は良く分からなくて困りますね。

マウス位置の取得と、動的表示。

jQueryで以下のようにすると、マウス位置を取得できて便利でした。
(http://api.jquery.com/mousemove/ 参照)

       $(function(){
            $("#canvas").mousemove(function(e){
            X=e.clientX;
            Y=e.clientY;
            });
        });

ラファエル上で取得した位置をグローバル変数で受け取り、以下のように使うと、動的に地図の場所名などが表示できて便利です。
        $("#"+state).css({display:"block",left:X,top:Y});

ラファエルの地図と同時に使っています。

Raphaelでクリッカブルマップ、やっと実装。

Raphaelで地図をクリッカブルにしようと思い、IE対策で苦労していた。
最終的に以下のフォーラム投稿が参考になったので、メモ。

http://groups.google.com/group/raphaeljs/browse_thread/thread/b2f6afcb16d06bbd/a2a1d338301f26c2?lnk=gst&q=map#a2a1d338301f26c2

st[0].onmouseup = function() {
      alert("");

};

のようにしてonmouseupで処理し、その中に実行したい関数を書けばOKだった。

(要するに、IEにおいては、attachEventしてのonclickやjQueryのclickでは、(on)mouseover ,mouseoutなどと並列処理ができなかったため、onmousedownかonmouseupにした、というわけです。）

SVGの解説サイト（英語）メモ。

SVGに関する分かりやすい解説（英語）があったので、メモ。

http://www.svgbasics.com/index.html

IE9でやっとIEもまともなSVG対応をしていくようなので、
これからがSVGの本番でしょうか。。

RaphaelとGoogle map APIの融合ライブラリ（cartgrapher.js)

Raphaelをベースにし、Google map APIを使用して、
エリアごとの人口分布地図や、
ツイッターユーザーの分布などを表示させる、といったことができるライブラリが公開されていた。

http://cartographer.visualmotive.com/

すごい。

jQueryのフォント装飾ライブラリ

http://www.iofo.it/jquery/fonteffect/

jQueryに、font-effectというフォントの装飾ライブラリがありました。
素晴らしい。。

フォント装飾に色々使えそうです。
ドロップシャドウや、グラデーション（gradient）など、リアルタイムで反映されるのがすごい。
a:hoverの疑似要素などにつかったらいいかも。。

前から「できたらいいなあ」と思ってたら、
やっぱ、あったんすね。

ありがたや。。

■追記
コメントの最後に「もうすぐ次のバージョンを出すから、今はコメントできなくしています」とありました。
もうすぐ次のバージョンが出るんですね。2010，6，10記す

角丸ライブラリ（liquid-canvas）、良さそう。

http://www.ruzee.com/content/liquid-canvas

これまでjQueryのcorner.jsという角丸ライブラリを使ってきましたが、
上記のliquid-canvasというライブラリはかなり良さそうで、使ってみたくなりました。

グラデーションがいい感じで使えるのが良さそうです。

IE6,7では、
$(document).ready()より
$(window).onload()の方が良いそうです。

jQueryのgoogle mapライブラリ

Google mapの案件があるので、jQueryで実装してみようと思い、検索。
ありました。
http://gmap.nurtext.de/documentation.html

Google map API keyを取得する必要があり、
sensor=trueかsensor=falseに変更する必要がありました。（それをしていないくて、はじめひっかかった。。）

で、適当に

みたいなブロックを作って、そのwidth,heightをcssで設定してやり、

headの中のjQueryコードに、
$("#gmap").gMap();
及び、緯度経度その他のオプションを書くとOKに。

ありがたいことで。。

RaphaelとjQueryの併用メモ

jQueryとRaphaelを併用したかったので、やり方を探していて、載っていたのでメモ。

http://groups.google.com/group/raphaeljs/browse_thread/thread/5d1afd18d3670d53/ca94967a53dc41c9?lnk=gst&q=jQuery#ca94967a53dc41c9

$(window).load(function() {
  // put your Raphaël draw code here

}); 

と記述すれば動く、というのでやってみたら動いた。

jQueryのDOM操作で、Raphaelが動かせるのはとてもありがたい。

画像回転プラグイン（jQuery＋CSS3）

http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

CSS3を併用して、jQueryで画像回転をさせるプラグインがありましたのでメモ。
画像回転をさせたかったので、実装してみます。。

Galleriaでfadeslide:trueにしたら、画像の位置がずれた。。

現在、原因を調査中です。
transition:fadeslideにしなければ、場所は大丈夫なのですが、なぜかfadeslideにするとずれます。。
左に。

困った。
いい動きをしてくれるのですが。

■追記　Firebugで見たところ、fadeslideを使わないと、position:relative;で自動的にleftの値を追加していますが、fadeslideにしたら、leftの値が常に0になっています。Firefoxで。
他のブラウザはどうかな。。
■追記２　IE8も同様だ。。

■追記３：非圧縮版のfadeslideを定義している場所を以下のようにしたら、一応大丈夫になりました。
        var widthnext = (params.next.width>350)?120:300;
を追加。


そして、params.nextの部分（スライドインして現れる処理部分）を以下のように変更。
        jQuery(params.next).css({
            left: width* ( params.rewind ? -1 : 1 ),
            opacity: 0
        }).animate({
            opacity: 1,
            left:widthnext* ( params.rewind ? -1 : 1 )
        }, {　以下略

消える部分は、スライド処理がイマイチ難しいので、
          jQuery(params.prev).css({
                opacity: 1
              //  left: 0 * ( params.rewind ? 1 : -1 )
            }).animate({
                opacity: 0
                //left:  width* ( params.rewind ? 1 : -1 )
            },{
とコメントアウトして、フェードアウトさせるようにしました。

とりあえずこれで、幅の長い画像、短い画像、両方がちゃんとだいたい中央にスライドインしてくれるようになり満足です。
ちなみに、画像の幅は300と670ぐらいの二種類、
ギャラリーの幅は900ぐらいです。pxで。

メモでした。