1. spider.js¶

spider.jsは、JavaScriptライブラリであり、以下のような機能を持っています。

Ajaxによる非同期通信
XSLTを使ったXMLデータのインポート
JavaScriptによる半透明処理
回転・拡大・縮小処理
メソッドチェーンでJavaScriptメソッドを続けて実行可能
JavaScriptによるオブジェクトの移動
MP4動画やMP3・OGGなどの音声ファイルの再生
予め用意しているCanvasを使ったアニメーション
クリックやマウスオーバー、マウスアウトやマウスを動かす、マウスボタンが上がっている、マウスボタンを押しているなどを行った時のイベントメソッドの実装
キーボードのキーを押した時のイベント処理
Cookieの生成や取得や削除に関する処理の実施
外部のWebページを表示
CSSのコントロール
スライドショー機能
セレクトボックスの項目の選択で画像を表示させる機能
文字の縦書き表示
パラパラ漫画のようなアニメーションの実現
Webページが崩落する処理
文字列を近未来的な表現で表示
時刻、ブラウザの表示、スクリーンの表示を行う機能
Webページのタイトルに応じた外部スクリプトの呼び出し
画像の先読み
電子看板のような文字列の表示
背景色の一定時間毎の変化処理
ストップウォッチ機能
ブラウザの履歴処理を使ったページ処理
ページ上のリンクを配列として取得する処理
特定の時間毎にリロード
CSS Spritesを使った処理

1.1. spider.jsを使う¶

1.1.1. spider.jsの呼び出し方¶

HTMLのソースコードに<script type="text/javascript" src = "Spider/spider.js"></script>を記述して呼び出す。

1.1.2. load関数¶

ページを読み込んでから、処理を行います。spider.jsを使う場合には、必須の関数となっています。load関数の中に処理したい内容を関数として設定しておきます。:

load(() => {処理});

ライブラリを呼び出したら、HTMLソースコード内にscript要素を設定し、以下のように記述します。

load関数の中に処理を書いていくスタイルとなります。:

<script type="text/javascript">
load(() => {
  処理
});
</script>

外部スクリプトファイルを作成して、load関数で処理を書いていっても構いません。 xxx.js:

load(() => {
     処理
});

1.1.3. JavaScriptの関数・メソッド・プロパティのショートカット¶

JavaScript標準の関数、メソッド、プロパティ名は長いのでショートカットを定義しています。:

let ver = "20160202",
$w = window,
$d = $w.document,
$na = navigator,
$nan = $na.appName,
$nav = $na.appVersion,
$np = $na.platform,
$ua = $na.userAgent,
$ualc = $na.toLowerCase,
$npl = $na.plugins,
$nmt = $na.mimeTypes,
$sn = screen,
$int = parseInt,
$si = setInterval,
$ci = clearInterval,
$sti = setTimeout,
$cti = clearTimeout,
$host,$dbname,$user,$password,$table,
$db = "&host=" + $host + "&dbname=" + $dbname + "&user=" + $user + "&password=" + $password + "&table=" + $table;
let $stfl = ($ua.indexOf("firefox") || $ua.indexOf("opera") || $ua.indexOf("webkit")) ? "cssFloat" : "styleFloat";
let $lp = ("https:" == $d.location.protocol) ? "https://ssl" : "http://www";

1.1.4. Spiderクラス¶

Spiderクラスを生成することで、様々な機能をWebページにつけることが出来ます。:

let s = new spider("");
let s = spider(""); どちらを使っても構いません。

1.1.5. チェーンメソッド¶

spider.jsは、ほとんどのメソッドでチェーンメソッドに対応しています。＜例＞:

spider("display").font("10pt","#ffffff").date().infoB().infoS().matrixEffect();

以下のように書くことも出来ます。:

 spider("display")
.font("10pt","#ffffff")
.date()
.infoB()
.infoS()
.matrixEffect();

2. メソッド¶

2.1. require¶

requireメソッドは、JavaScript、CSS、PHP、CGIの外部ファイルを読み込みます。単独で呼び出したい時に使う事が多いです。:

spider("").require(JavaScript・CGI・PHP・CSSの外部ファイル名);

2.2. addElement¶

特定の要素に新しい要素を追加する:

spider("").addElement("div",document.body);

2.3. addListener¶

イベントハンドラを追加する:

spider("id").addListener("click",func,false);

2.4. removeListener¶

イベントハンドラを削除する:

spider("id").removeListener("click",func,false);

2.5. click¶

マウスでクリックしたり、スタイラスペンでタップすると処理を行うことが出来ます。:

spider(id名).click(function(){処理});

id名に「div0」なととした場合は「divエレメント」の1番目の物を指します。:

2.6. mouseover¶

マウスオーバーすると処理を実行出来ます。::: spider(id名).mouseover(function(){処理}); id名に「div0」などとした場合は「divエレメント」の1番目を指します。