Firebugを使おう

Javascriptで開発する際、「プログラムが思った通りに動かない」といったことはよくあります。

実際、私もYahoo! UI LibraryやScript.aculo.usでも原因不明で動作しないことがあり試行錯誤に時間が費やされました。

その場合、デバッガでステップ実行させたり、変数の中身を確認したりする操作が必要になります。これらの機能を提供してくれるのが「Firebug」です。

FirebugはFirefoxの拡張機能であるため、Firefoxをインストールする必要があります。
http://mozilla.jp/firefox/

次にFirefoxを起動してFirebugをインストールしましょう。(IEではインストールできません。)
http://getfirebug.com/jp.html

「404 Page not found. 」と表示されていますが、右上のボタンでインストール開始します。

Firebug起動方法ですが、
１．FireFoxでデバッグしたページを開く。
２．メニューから「ツール」→「Firebug」→「Firebug を開く」を選択する。
デバッグコンソールが開くと正常にインストールされています。

詳しい使用方法は、まだ勉強中なので後ほど紹介します。

タグ：Ajax ステップ実行 デバッグ Firefox JavaScript Firebug

もっと簡単なアニメーション

以前にYahoo! UI Libraryを使用したアニメーションを紹介しました。今回はもっと簡単なアニメーション方法を紹介します。

まず今回使用するライブラリScript.aculo.usをダウンロードしましょう。現在の最新バージョンはscript.aculo.us 1.8.3 です。

解凍するとlibとsrcというフォルダが出来ます。この2つのフォルダにある９つのファイルをサーバにUPします。私の場合、libというフォルダを作りそこへUPしました。

ライブラリのロードは以下のようにして行います。
Script.aculo.usは、prototype.jsを使用しているのでこちらもロードしておきます。”?load=effects,dragdrop”は今回使用するライブラリファイルです。省略すると全ライブラリを読み込むため処理が重くなってしまいます。

<script src="/lib/prototype.js" type="text/javascript"></script> <script src="/lib/scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>

使用する画像を配置しましょう。画像以外でもOKです。

<div id="test1"> <img src="sample2.jpg" id="img1" width="200" border="0"></div>

後は簡単です。idをパラメータにしてにして関数を呼び出すだけです。関数によってはnewをつけないと動かなかったり、id以外のパラメータが必要だったりします。

サンプルページはこちらです。実際の動作はサンプルで確認してみて下さい。
画像が消えてしまった場合は、再読み込みして下さい。また、1回目はライブラリのロードに時間がかかり、アニメーションが重かったりします。これも再読み込みで改善されます。
http://www.skillworker.net/test/aculousAnim.html

１．フェードイン
画像をフェードインさせるため、最初にstyle="display:none;"を指定して画像を消しておきましょう。

<div id="test1" style="display:none;"> <img src="sample2.jpg" id="img1" width="200" border="0"></div>

フェードイン処理ですが、たったこれだけです。"test1"は先ほど付けたIDです。

Effect.Appear("test1");

実際細かいオプションを指定できるのですが、これだけでも充分なアニメーションが可能です。

２．フェードアウト
画像をフェードアウトさせます。

Effect.Fade("test1");

３．BlindUp
画像を下から上に消します。

Effect.BlindUp("test2");

４．BlindDown
画像を上から下に表示します。

Effect.BlindDown("test2");

５．ドラッグ＆ドロップ
ボタン押下後に画像をドラッグ＆ドロップできるようになります。

new Draggable("test2");

６．SlideUp
画像を下から上に消します。

Effect.SlideUp("test2");

７．SlideDown
画像を上から下にスライド表示します。

Effect.SlideDown("test2");

８．折りたたむ
画像を縦、横の順で折り畳んで消します。

Effect.Fold("test2");

９．縮小後消失
画像を縮小し消します。

Effect.Squish("test2");

１０．TVスイッチOFF
画像をテレビのスイッチをオフにした時の効果で消します。

Effect.SwitchOff("test2");

１１．落下後消失
画像を落下させて消します。

Effect.DropOut("test2");

１２．拡大アニメ表示
画像を拡大しながら出現させます。

Effect.Grow("test2");

１３．拡大アニメ消失
画像を拡大して消します。

Effect.Puff("test2");

１４．縮小後消失2
画像を縮小して消します。

Effect.Shrink("test2");

１５．点滅
画像を点滅させます。

Effect.Pulsate("test2");

１６．シェイク
画像を左右に小刻みに揺らします。

Effect.Shake("test2");

１７．移動アニメ
画像を現在の位置から指定した分移動させます。移動量は正数または負数を指定できます。

Effect.MoveBy("test2", 100, 50);

この場合、横100縦50移動させます。

１８．透明度アニメ
画像の不透明度を変化させます。

new Effect.Opacity("test2", { from:1.0, to:0.0 });

この場合、透過度を1.0から0.0に変化させています。

逆も可能ですね。

new Effect.Opacity("test2", { from:0.0, to:1.0 });

１９．アニメ組み合せ
複数のアニメーションをまとめて実行します。

new Effect.Parallel([ 　　new Effect.MoveBy("test2", 300, 300), 　　new Effect.Scale("img2", 50) ]);

Effect.Scaleは、指定サイズに拡大縮小（100が等倍）します。この場合、画像を縦横300移動しながら、50%に縮小します。

２０．スクロール
指定したIDまでスクロールさせます。

new Effect.ScrollTo("test3");

まだまだ色んなことが出来るようですが、今回はここまでにします。

この記事で参考にした書籍です。

10日でおぼえるAjax 入門教室

タグ：Script.aculo.us アニメーション JavaScript 使い方 prototype.js Ajax

ソーシャルブックマーク

ソーシャルブックマークとは？オンラインブックマークとも呼ばれ、ユーザが他のユーザにブックマークを公開し共有できるサービスです。

まず自分のブックマークに自ブログを追加しましょう。

SEO的に効果はあまり期待できないようですが、ブログにブックマークボタンをつけるとユーザが簡単にブックマークできるため再訪率が上がります。

それにブックマークを多く集めるとブログの信頼度が上がります。

ブックマークボタンの配置方法を調べてみました。

・Yahoo!ブックマーク


・FC2ブックマーク


・Livedoorクリップ
Livedoorブログしかダメなようですね。

・はてなブックマーク
ブログごとに異なるようです。



以下は、ホームページやブログにボタンは配置できないようです。
・フロッグ
・gooブックマーク

と、いろいろ探しているといいのを見つけました。

・AddClips
1つのボタンで32サービス(20のソーシャルブックマークと12のRSSリーダー)に対応します。


とにかくダメ元で配置してみましょう。

タグ：SEO ブックマーク 配置 配置方法 クリップ ボタン アイコン

楽天アフィリエイト

またまた楽天アフィリエイトで収入が発生しました。

23,920 円でゴルフ場を予約して頂いたので239円(1%)ですが、この1%という料率は安いでしょうか？Amazonだと3%くらいです。

いいえ、決して安くはありません。

なぜなら、クリック回数がたったの４回なのです。4回クリックさせるだけで、収入が発生しているのです。Amazonでは１０回クリックされても買ってくれません。

自分なりに楽天アフィリエイトのメリットを考察してみました。

１．楽天会員に登録すれば審査なしで利用できる
２．最低支払金額1ポイント（報酬は楽天スーパーポイント）
３．再訪問有効期間３０日

　クリックされれば、そのユーザが30日以内に他の商品を買っても報酬になります。

４．楽天市場でネットショッピングする人が多い。
５．高額商品が売れている。
６．圧倒的な商品数を誇っている

このうち３～６が大きいでしょう。もちろん報酬がポイントや料率が低いというデメリットもあります。

しかし、楽天市場という大きなブランド力が使えることが大きいです。

この楽天市場の強さの秘密は無料レポートが配布されていますので、一度目を通してみるとよいでしょう。




また、楽天ブログを開設すると、単に商品を紹介するだけで相当のアクセスを集めることが出来ます。ブログ更新時間によってもアクセスが変わってくるので１日３回ほど時間を空けて更新するとよいでしょう。

So-netブログや楽天ブログのようにブログ間のコミュニケーションが充実したブログは更新だけでアクセス数が稼げます。

楽天アフィリエイトの攻略方法は、楽天ブログでとにかくアクセスを集め少しでも多くクリックしてもらうことに尽きます。

---

<PR>儲かる株式投資講座始まりました。

タグ：アフィリエイト 儲かる 秘密

ブログで改行されない場合

ブログを書いていて気になったのメモしておきます。

ブログによっては改行がうまく表示されない場合があります。もちろん改行を<BR>に変換するにしている場合です。

Seesaaブログでよく発生しているのですが、改行の次に空白をいれると改行が消されるようです。改行や空白を大量に入れ記事を見せなくするイタズラ防止のため？

その他にリッチテキストエディタの仕様で「Shift」＋「Enter」で改行するか、改行を２つ入れると改行されるようです。しかし、ブラウザによっては、正常に表示されない場合があります。

 とりあえず、以下のURLを参考にすればうまく表示されましたのでメモしておきます。

http://oshiete.goo.ne.jp/qa/2823362.html

http://oshiete.goo.ne.jp/qa/2502759.html

http://miyazakiweb.seesaa.net/article/117898000.html

タグ：改行されない seesaa ブログ

もう少しYahoo! UI Library

　前回はわかり易い様にボタンにアニメーション動作を割り付けました。実際にはホームページを表示したタイミングでアニメーションをさせたいことが多いと思います。そこで、今回はイベントを使ってみたいと思います。

イベントを処理するには、eventモジュールを読み込む必要があります。

YUI().use('event', function(Y){});

ただし、animモジュール読み込んだ場合は、eventモジュールも自動的にも読み込まれるようです。

イベントの種類やイベント発生時の処理の内容(イベントハンドラ)は、on()で設定します。loadはページが読み込まれたタイミングで発生するイベントです。第2パラメータには、イベントハンドラを指定します。

Y.on('load', function(){});

　ページが読み込まれDOM(Document Object Model)の準備が出来たタイミングでアニメーションさせたい場合はdomreadyを使用します。

Y.on('domready', function(){});

で、前回のテスト２を改良したスクリプトは以下になります。

<script type="text/javascript" language="JavaScript"> <!-- 　　YUI().use('anim', function(Y){ 　　　　Y.on('load', function(){ 　　　　　　(new Y.Anim({ 　　　　　　node: '#myPhoto', 　　　　　　duration : 5.0, 　　　　　　from : { opacity : 0.0 }, 　　　　　　to : { opacity : 1.0 } 　　　　})).run(); 　　}); }); //-->

　ここでまた壁にぶち当たったのですが、最初に画像の透明にしておかなければいけません。ブラウザ毎に透明度の設定方法が異なるのです。

ブラウザ	プロパティ	設定値の範囲
Internet Explorer	filter:alpha(opacity=値)	0～100 (整数値)
Firefox2	mozOpacity=値	0～1.0 (小数値)
Safari(Firefox3)	opacity=値	0～1.0 (小数値)

私の調べたところこのようになっていると思われます。

すべてのブラウザに対応するためには、すべて設定しちゃえばいいのです。

<div> <img src="sample.jpg" width="300" height="455" id="myPhoto" style="filter: alpha(opacity=0); -moz-opacity:0.0; opacity:0.0"> </div>

これで出来ました。

http://www.skillworker.net/test/YuiAnim2.html

タグ：Yahoo! UI Library YUI アニメーション

まじめにYahoo! UI Library

今回は画像の座標を動かしてみましょう。基本は前回までと同じ要領です。

前回のテスト２に座標(450, 400)から(100,100)まで移動する処理を追加してみましょう。

YUI().use('anim', function(Y){ 　　Y.on('load', function(){ 　　　　(new Y.Anim({ 　　　　　　node: '#myPhoto', 　　　　　　duration : 5.0, 　　　　　　from : { xy : [450, 400], opacity : 0.0 }, 　　　　　　to : { xy : [100, 100], opacity : 1.0 } 　　　　})).run(); 　　}); });

たったこれだけでOKです。

ではサンプルでテスト３ボタンを押してみましょう。

http://www.skillworker.net/test/YuiAnim1.html

フェードインしながら画像が動きましたね。

　テスト４～８ですが、YUIに付属しているのサンプルコードを使用したものです。YUIで何が出来るかは以下のフォルダ内のサンプルコードを実際に動かしたほうがわかりやすいです。

examples/

　テスト４～８の動作の説明だけ行っておきます。テストボタン押下前には、再読み込みを行って下さい。コードについては、ブラウザのソース表示で見て下さい。

■テスト４
　画像が消えちゃいます。

■テスト５、６
　テスト５またはテスト６ボタン押下後にマウスで任意の場所をクリックしてみて下さい。画像がその位置に移動しましたね。テスト５と６では移動の仕方が異なります。

■テスト７、８
　これらもテスト４と同じく画像が消えますが、違いがわかるように画像下に文字を配置しています。

　このようにYUIを使用するとサイトの画像にアクセントをつけることが出来ます。

タグ：Yahoo! UI Labrary YUI アニメーション

YUIはYahoo! UI Labraryだった

　前回簡単に使用できるといったことを多少後悔しつつ、なんとかサンプルを動かすことが出来ました。手軽さという面では他のJavaScriptライブラリには及ばないようです。
　しかし、YUIは大規模サイトで使用されている実績もあり、非常に動作が安定しています。また充実したUI部品と豊富な機能を備えています。

http://www.skillworker.net/test/YuiAnim1.html

１．まずアニメーションということで画像を一枚用意します。
　myPhotoというタグをつけましょう。YUIをいうかダイナミックHTMLは、このIDに対して操作を行います。

<img src="sample.jpg" width="300" height="455" id="myPhoto">

２．animモジュールの読み込み

YUI().use('anim', function(Y){～});

第2パラメータはモジュールの読み込み完了時に呼び出されるコールバック関数です。

３．コールバック関数の処理を追加
　どのエレメントにどのような動作を行わせるかを指定して、アニメーションオブジェクトを作成します。エレメントの指定はIDを指定します。今回はnode:'#myPhoto'です。
　どのように動作させるかは、from（開始値）とto（終了値）にそれぞれCSS(Cascading Style Sheets)のプロパティ名と値を指定します。まずopacityプロパティを使用して透明度を変化させて見ましょう。
　opacityプロパティは、要素の透過度を指定するプロパティです。0は完全透過で、1は完全不透過です。

new Y.Anim({ 　　node: '#myPhoto', 　　from : { opacity : 0.0 }, 　　to : { opacity : 1.0 } })

上記サンプルでは、myPhotoというIDに対して、opacityを0～1に変化させるというものです。

作成したアニメーションオブジェクトを動かすにはrun()メソッドを使用します。

function(Y){ 　　(new Y.Anim({ 　　　　node: '#myPhoto', 　　　　from : { opacity : 0.0 }, 　　　　to : { opacity : 1.0 } 　　})).run(); }

では、サンプルでテスト１ボタンを押してみて下さい。スクリプトの警告が表示された場合許可してください。

http://www.skillworker.net/test/YuiAnim1.html

では次にアニメーションの時間を指定してみましょう。
　duration は、変化が起きるとき、どれくらいの時間をかけて変化するのか、その時間を "秒数" で指定します。

YUI().use('anim', function(Y){ 　　(new Y.Anim({ 　　　　node: '#myPhoto', 　　　　duration : 5.0, 　　　　from : { opacity : 0.0 }, 　　　　to : { opacity : 1.0 } 　　})).run(); });

サンプルでテスト２ボタンを押してみて下さい。画像が5秒かけて浮かび上がってきましたね。

タグ：YUI Yahoo! UI Library アニメーション

YUIって誰？

ではありません。

 Yahoo! User Interface Libraryを紹介したいと思います。現在の最新バージョンは３で以下からダウンロードできます。Full Developer Kitをダウンロードして解凍して下さい。

YUI 3 — Yahoo! User Interface Library

YUIとは、Yahoo!で使われている公開ライブラリーを使いやすくするためにYahoo!が作成した、ユーザーインターフェイス構築のためのコンポーネント集です。今回は簡単そうなアニメーション機能を使ってみたいと思います。

YUIのアニメーション機能を使用すると、誰でも簡単に？Flashのようなアニメーションサイトが作れます？

まずは、簡単に使い方を見ていきましょう。

１．モジュールを読み込む
　scriptタグでライブラリー本体を読み込みます。

<script type="text/javascript" src="build/yui/yui.js"></script>

 
もしくは、ヤフーのサーバーからYUIを直接読み込む場合は以下の様にします。

<script src="http://yui.yahooapis.com/3.0.0pr1/build/yui/yui.js" type="text/javascript"> </script>

但し私の方では、これだとうまく動かないのでbuild配下をサーバにアップロードして使用しています。

　使用するモジュールをuse()メソッドを使いスクリプト内で指定します。

YUI().use(読み込むモジュール名, .... , コールバック関数)

コールバック関数はモジュールの読み込み完了時に呼び出されます。
また、モジュールは複数指定することが出来ます。

例．

YUI().use('event','node', 'anim', function(Y){ ～ })

ここまでで準備完了です。

具体的なアニメショーンの方法は次回説明します。

タグ：YUI JavaScript Yahoo! User Interface Library

15分SEO

SEO（Search Engine Optimization）の最も基本ですが、まだ行ったいない人はやっておきましょう。15分で出来ます。

まず、上位表示させたいキーワードを決めます。

１．ページタイトルにキーワードを含める
HTMLファイルの<head></head>タグ内の<title>~</title>に全角32文字以内のタイトルを含める。20～24文字が最適です。

２．キーワードを１つ以上含んだ文章をページに追加する
　最低限1回以上、10回以上キーワードを含むのが理想的です。

３．Yahoo、Googleにサイトを登録申請する
　GoogleにURLを追加する
　・http://www.google.co.jp/addurl/

　Yahoo!検索エンジン用ロボットの巡回先へ推薦する
　・http://submit.search.yahoo.co.jp/add/request/

タグ：SEO キーワード Google登録