CSS・Javascript

Javascriptでforeachを使いたい時

PerlやPHPでよく使うeachをJavascriptで使う時はforを使う

var ar = new Array(“あ”,”い”,”う”,”え”,”お”);
for(var i in ar){
    document.write(ar[i] + ‘<br>’);
}

連想配列の時は

var ar2 = {‘あ’:’a’,’い’:’b’,’う’:’c’,’え’:’d’,’お’:’e’};
for(var i in ar2){
    document.write(i + ‘=’ + ar2[i] + ‘<br>’);
}

Javascriptで重複しないランダムな値を得る方法

配列の中から複数のランダムな値を取り出したい時、

配列の要素数からランダムな数を取得し、array[n]とするのは簡単だが、要素数が少ないと取り出した値がダブる場合がある。
ダブりを防ぐ方法として、取得した値を要素から削除していく方法もあるが、元の配列の順序をランダムに入れ替え、その配列から順に取り出すのが簡単。

ただし、要素数が多くなると、方法によって処理速度が変わる。
代表的な二つの方法。

■早い

Array.prototype.shuffle = function(){
    var i = this.length;
    while(i){
        var j = Math.floor(Math.random()*i);
        var t = this[–i];
        this[i] = this[j];
        this[j] = t;
    }
    return this;
}

■遅い

Array.prototype.shuffle = function(){
    var len = this.length;
    var ary = this.concat();
    var res = [];
    while(len) res.push(ary.splice(Math.floor(Math.random()*len–),1));
    return res
}

■使い方

var a = new Array(“あ”,”い”,”う”,”え”,”お”);
num = a.shuffle();
document.write(num[0]);

Google AJAX Feed APIで表示が遅くなる場合の対処方

Googleが提供している、別ドメインのRSSを取得することができる、Google AJAX Feed APIだが、
ページ全体の表示が遅くなることがある。
いくつかの原因はあるが、ひとつの方法として

<script type=”text/javascript” src=”http://www.google.com/jsapi?key=あなたのKey”></script>

タグをbody内の最後の方に書くと、ページ自体の表示を少し改善できる。

Google AJAX Feed API カスタマイズ:HTMLタグを使う

Google AJAX Feed APIを使ってブログパーツを作る(その4)
Javascriptだけを使って外部RSSを取得して掲載。

■カスタマイズ(innerHTMLを使ったタグ使用)

Javascriptサンプル

      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById(“feed”);
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement(“div”);
            div.appendChild(document.createTextNode(entry.title));
            container.appendChild(div);
          }
        }
      });

feed.load(function(result) {
        if (!result.error) {
            var container = document.getElementById(“feed”);
            for (var i = 0; i < result.feed.entries.length; i++) {
                var entry = result.feed.entries[i];
                container.innerHTML += “<a href='” + entry.link + “‘>” + entry.title + “</a>■” + entry.content + “<br />”;
            }
        }
    });

これで

タイトル■内容
タイトル■内容
タイトル■内容

タイトル■内容

となる。(タイトルにはリンク付)

Google AJAX Feed API カスタマイズ:内容の取得サンプル

Google AJAX Feed APIを使ってブログパーツを作る(その3)
Javascriptだけを使って外部RSSを取得して掲載。

■カスタマイズ(本文の取得)

Google AJAX Feed APIで取得できるのはタイトルだけではありません。
以下の要素を取得・表示できます。

日付「entry.publishedDate」
リンク「entry.link」
タイトル「entry.title」
内容(タグ有)「entry.content」
内容「entry.contentSnippet」

Google AJAX Feed API カスタマイズ:表示件数の変更

Javascriptだけを使って外部RSSを取得して掲載。

API keyを入手したらオリジナルのスクリプトの作成に入る。
元にのはサンプルコードの、この部分。

    <script type=”text/javascript” src=”http://www.google.com/jsapi?key=あなたのKey”></script>
    <script type=”text/javascript”>
    google.load(“feeds”, “1”);
    function initialize() {
      var feed = new google.feeds.Feed(“取得したいRSSのURL”);
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById(“feed”);
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement(“div”);
            div.appendChild(document.createTextNode(entry.title));
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);
    </script>

■設置方法

まず、<head></head>内に上記をペースト(KeyとURLは書き換え)
次に、表示したい場所に、<div id=”feed”></div>と記入。

間違いが無ければ、該当するRSSのタイトルが4件表示されるはず。

■カスタマイズ(取得件数/表示件数の変更)

      var feed = new google.feeds.Feed(“取得したいRSSのURL”);
      feed.load(function(result) {

      var feed = new google.feeds.Feed(“取得したいRSSのURL”);
      feed.setNumEntries(10);
      feed.load(function(result) {

これで「取得件数/表示件数」が10件になる。

Google AJAX Feed APIを使ってブログパーツを作る(その1)

レンタルブログやレンタルホームページといった、PerlやPHP等のプログラムが使えないサイトの中に、外部にある他のサイト(他ドメイン)で公開されているRSSを、Javascriptのみを使って掲載する方法。

通常Javascriptでは別ドメインのファイル(RSS)を取得すること(クロスドメイン処理)は難しいので、Googleが提供しているGoogle AJAX Feed APIを使う。

Google AJAX Feed
http://code.google.com/apis/ajaxfeeds/

■API Keyの取得

Googleのアカウントでログインし、Sign up for the Google AJAX Feed API
http://code.google.com/apis/ajaxfeeds/signup.html
にアクセス。規約を読みチェックを入れたら、掲載するサイトのURLを入れて、「Generate API Key」をクリック。

Thanks for Signing up for a Google AJAX Feed API key!
と共に以下の情報が提供される。

Your key is:あなたのAPI key

This key is good for all URLs in this directory:あなたが入力したURL

サンプルコード
Here is an example web page to get you started:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
    <title>Google AJAX Feed API – Simple Example</title>
    <script type=”text/javascript” src=”http://www.google.com/jsapi?key=あなたのKey”></script>
    <script type=”text/javascript”>
    google.load(“feeds”, “1”);
    function initialize() {
      var feed = new google.feeds.Feed(“http://www.digg.com/rss/index.xml”);
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById(“feed”);
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement(“div”);
            div.appendChild(document.createTextNode(entry.title));
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);
    </script>
  </head>
  <body>
    <div id=”feed”></div>
  </body>
</html>

FLASHを使わずページ内でスライドショーを表示(Smooth SlideShow編)

サイト内でFLASHを使わずにスライドショーを表示させるのは、様々なライブラリが提供されるようになったので、割と簡単にデザインセンスの高いものが作れるようになったが、多くのスライドショー用ライブラリは、背景に元のページが暗く表示され画面内にポップアップするような形のものが多い。

今回、ページ内の一部でそのままスライドショーをさせたかったので、
その条件を満たすものを選び設置することにした。

いくつかの選択肢はあるが、『Smooth SlideShow』

トップページにあるように、ページ内でのスライドショーが可能。

■導入・設定

以下のサイトにアクセスし、ダウンロード
JonDesign’s Smooth SlideShow

これからはMoo.fx版がお薦め。

解凍したファイルを以下の階層でアップロード

スタイルシート及びJavascriptファイル
js/slideshow/jd.slideshow.css
js/slideshow/mootools.release.83.js
js/slideshow/mootools.release.83.uncompressed.js
js/slideshow/showcase.slideshow.js
js/slideshow/timed.slideshow.js

マニュアル操作用画像ファイル他
js/slideshow/img/fleche1.gif
js/slideshow/img/fleche1.png
js/slideshow/img/fleche2.gif
js/slideshow/img/fleche2.png
js/slideshow/img/loading-bar-black.gif

読み込むのはこんな感じ
<script src=”js/slideshow/mootools.release.83.js” type=”text/javascript”></script>
<script src=”js/slideshow/timed.slideshow.js” type=”text/javascript”></script>
<link rel=”stylesheet” type=”text/css” href=”js/slideshow/jd.slideshow.css” media=”screen” />

表示させたい場所に以下のように記載
<div class=”timedSlideshow jdSlideshow” id=”mySlideshow”></div>
<script type=”text/javascript”>
countArticle = 0;
var mySlideData = new Array();
mySlideData[countArticle++] = new Array(
‘images/001.jpg’,
‘http://www.yahoo.co.jp’,
‘Item 2 Title’,
‘Item 2 Description’
);
mySlideData[countArticle++] = new Array(
‘images/002.jpg’,
‘http://www.google.co.jp’,
‘Item 3 Title’,
‘Item 3 Description’
);
</script>
<script type=”text/javascript”>
function startSlideshow() {
var slideshow = new timedSlideShow($(‘mySlideshow’), mySlideData);
}
addLoadEvent(startSlideshow);
</script>
</div>

FLASHを使わずページ内でスライドショーを表示させたい時

サイト内でFLASHを使わずにスライドショーを表示させるのは、様々なライブラリが提供されるようになったので、割と簡単にデザインセンスの高いものが作れるようになったが、多くのスライドショー用ライブラリは、背景に元のページが暗く表示され画面内にポップアップするような形のものが多い。

今回、ページ内の一部でそのままスライドショーをさせたかったので、
その条件を満たすものを選び設置することにした。

いくつかの選択肢はあるが、『YUI-based Slideshow』

トップページにあるように、ページ内でのスライドショーが可能。
また
Sliding
Squeezing
Fading
の三種類の効果を使うことができる。

■導入・設定

以下のサイトにアクセスし、ダウンロード
YUI-based Slideshow
Download YUI version 2.5.2,

YUIで使うのは以下no5ファイル
yahoo.js
dom.js
event.js
connection.js
animation.js
これらはyuiフォルダに入れjsフォルダにアップロード

slideshow.js
jsフォルダにアップロード

読み込むのはこんな感じ
<script type=”text/javascript” src=”js/yui/yahoo.js”></script>
<script type=”text/javascript” src=”js/yui/dom.js”></script>
<script type=”text/javascript” src=”js/yui/event.js”></script>
<script type=”text/javascript” src=”js/yui/connection.js”></script>
<script type=”text/javascript” src=”js/yui/animation.js”></script>
<script type=”text/javascript” src=”js/slideshow.js”></script>

<link type=”text/css” rel=”stylesheet” href=”js/slideshow.css” />

表示させたい場所に以下のように記載
frame_1〜3のような書き方でも、frame_4の書き方でもいい。

<div id=”yui-sldshw-displayer2″ class=”yui-sldshw-displayer” style=”width:400px;height:300px;”>
<img id=”frame_1″ class=”yui-sldshw-active yui-sldshw-frame” src=”http://www.hoge.com/img001.jpg” />
<img id=”frame_2″ class=”yui-sldshw-active yui-sldshw-frame” src=”http://www.hoge.com/img002.jpg” />
<img id=”frame_3″ class=”yui-sldshw-active yui-sldshw-frame” src=”http://www.hoge.com/img003.jpg” />
<div id=”frame_4″ class=”yui-sldshw-active yui-sldshw-frame”>
<img src=”http://www.hoge.com/img004.jpg” />
</div>
</div>

効果の設定・ループの設定はこんな感じ。

<script type=”text/javascript”>
YAHOO.util.Event.addListener(window, “load”, function() {
slideshow2 = new YAHOO.myowndb.slideshow(“yui-sldshw-displayer2”,{effect: YAHOO.myowndb.slideshow.effects.fadeOut});
slideshow2.loop();
});
</script>

ツールチップの表示にoverlibを使う。

OVERLIBは、記事中の用語でちょっと説明をしたい時に使われる、いわゆるツールチップ(Tooltip)を表示させるJavaScriptライブラリ。

いろいろなサイトで様々なツールやスクリプトが公開されているが、『overlib』はHTMLタグが使えたり、背景色や文字色、文字サイズ、背景画像、などの細かい設定が可能。

また、表示の設定で、マウスアウトで自動的に消えるようにする他、「閉じる」にマウスオーバーするまで表示させておくことができるため、ポップアップされる文章内にリンク用のAタグを使ってURLを表示させ、ジャンプしてもらうことも可能となる。

■設置と設定
http://www.bosrup.com/web/overlib/
に行き、最新版をダウンロード。
ファイルを解凍すると多くのファイルがあるが、通常の場合は
overlib.js
overlib_mini.js
のどちらか一つのファイルをアップロードするだけでいい。

次に、表示させたいページに

<div id=”overDiv” style=”position:absolute; visibility:hidden; z-index:1000;”></div><script language=”JavaScript” src=”overlib.js”><!– overLIB (c) Erik Bosrup –></script>

を埋め込む。body内であれば、場所はどこでも構わない。
※overlib.jsを「js」フォルダ等に入れている場合は、「src=”overlib.js”」の部分は「src=”js/overlib.js”」

あとは、表示させたい部分に

<a href=”javascript:void(0);” onmouseover=”return overlib(‘文字の説明’);” onmouseout=”return nd();”>マウスを重ねてみてください</a>

マウスを重ねてみてください

クリックで表示させたい場合は、
a href=”javascript:void(0);” onclick=”return overlib(

マウスオーバー(マウスが重なると自動的に表示)にしたい場合は、
a href=”javascript:void(0);” onmouseover=”return overlib(

背景に画像を使わない場合、余白の設定ができないが、cssで追加すればいい。

■説明文内でリンクを使いたい場合

<a href=”javascript:void(0);” onmouseover=”return overlib(‘この部分でタグの利用が可能>br>改行もできる。’, STICKY, CAPTION, ‘タイトル’);” onmouseout=”nd();”>マウスを重ねてみてください</a>