system.js

「system.js」は乾陽亮設計事務所が作成したJavaScriptのライブラリです。
基本的な機能を下記に掲載しております。詳細は「system.js」を読み解いてください。ご意見は歓迎しますがご質問にはご対応できません。

system.jsには初期設定としてonloadに色々な関数が設定されています。onloadを上書きすると動かない機能があります。

新たにonload時に走らせたい関数がある場合は、「load.Set('関数名');」として、追加します。

system.jsの機能を停止するには、errorの値をtrueにします。タイムラインを持つほとんどの関数の処理が停止します。

Qはクエリを格納した連想配列です。例えば「http://xxxx.xx/?id=1111&class=2222」でアクセスしているページではQ['id']には「1111」が、「Q['class'」には「2222」が格納されています。

ENVは現在の閲覧環境状況を知るためのObjectです。ページ読込み完了時（onload）に全ての値を読込んでいますが、現在のスクロール位置などを調べる際には「ENV.Set();」として、必要な時点で再設定を行います。

ENV.Y

ページのY軸の表示位置

ENV.X

ページのX軸の表示位置

ENV.W

ウィンドウの幅の値

ENV.H

ウィンドウの高さの値

ENV.tH

コンテンツ全体の幅の値

ENV.tW

コンテンツ全体の高さの値

PIMG.set()は画像入れ替えを簡単に実現します。system.jsを読み込んだページには初期設定として自動的に組込まれます。以下のファイル名称の規則に従った画像の入れ替えを行います。

「imagefile-.jpg」など、ファイル名称の拡張子の前に「-」や「--（複数可）」が付いた<img>タグにマウスオーバーすると、「imagefile.jpg」などの「-」や「--（複数可）」が取れた画像と入れ替えます。
<a><img></a>として使う場合、画像の入れ替えを行うことが多いと思いますが、それを新たなJavaScriptの追記を必要とせずに実現します。

※ただし、「-」を削除した画像書類はページ読込みを完了してから読込まれます。ページをロード中は画像入れ替えは行われません。

OBJはObjectです。
OBJは「var sample = new OBJ('idname');」の様に各要素のidを宣言して使います。
OBJには様々な機能が追加されています。

OBJ.path

要素そのもの

OBJ.jss

要素のsytle属性

OBJ.flag

要素が宣言されており、存在するかどうかを返します。

OBJ.id

要素のid属性

OBJ.X

要素のX軸位置（left）

OBJ.Y

要素のY軸位置（top）

OBJ.W

要素の幅（style.width / paddingを除いた内寸）

OBJ.H

要素の高さ（style.height / paddingを除いた内寸）

OBJ.A

要素の透明度（0〜100%の間の値）

OBJ.Z

要素の前後関係（z-index）の値

OBJ.D

要素の表示・非表示（displayの値）を0または1として返します。

OBJ.V

要素の表示・非表示（visibilityの値）を0または1として返します。

OBJ.C

要素の表示範囲（clip:rect）の値を配列に格納して返します。

OBJ.seX()

要素のX軸位置（left）の値を変更します。

OBJ.seY()

要素のY軸位置（top）の値を変更します。

OBJ.setW()

要素の幅（width）を変更します。

OBJ.setH()

要素の高さ（height）を変更します。

OBJ.setA()

要素の透明度を0〜100%の間の値で変更します。

OBJ.setZ()

要素の前後関係（z-index）の値を変更します。

OBJ.setD()

要素の表示・非表示（displayの値）を0または1として変更します。

OBJ.setV()

要素の表示・非表示（visibilityの値）を0または1として変更します。

OBJ.setC()

要素の表示範囲（clip:rect）の値を変更します。

OBJ.setI()

要素の内容（innerHTML）の値を変更します。

CLASSはOBJを格納した配列を返します。
CLASSは「var sample = new CLASS('classame');」の様に各要素のclassを宣言して使います。CLASSには宣言したclass名を持つ要素がOBJ宣言された状態で格納されます。
つまりSAMPLEというクラス名が与えられた全ての背景色を「#ff0000」に変更する場合は以下のように記述します。

これらの機能はよりwebsiteに現実的に使用できることを目的として簡単な記述となるように作成しています。
なお、これらの機能の実行はページ読込み完了前に記述しても、ページ読込み完了時に実行します。つまりidnameのid名を持つ要素が読込まれていない時点でも、以下のようにHTMLヘッダに記述することが可能です。

なお、「Object」には上述のOBJ()でも、要素そのものでも、また要素のid属性名でも動くように設計されています。また、同一の要素に同一の関数を走らせても、処理が重複することはなく、後で呼び出された関数の値が上書きされます。
以下の例では、「idname」のid名を持つ要素は後に呼び出された0,100の位置に移動します。

scroll.Set()はウィンドウ表示位置をスムースに移動させるためのfunctionです。
scroll.Set(X,Y);として使用します。
なお、system.jsを読込んだページでは、#で指定したページ内リンクに常にこの「scroll.Set()」が組込まれます。例えば「<a href="#"PAGETOP>pagetop<a>」と記述すると、アンカー「#PAGETOP」の位置までスクロールします。
ただし、#で指定したページ内リンクの<a>タグにonclickが設定されている場合は上書きしません。

戻り値は常にfalseです。

move.Set()は要素をスムースに減速させながら移動させるfunctionです。
move.Set(Object,X,Y);として使用します。

sweep.Set()は要素の表示範囲（clip:rect）をスムースに減速させながら移動させるfunctionです。
sweep.Set(Object,top,left,bottom,right);として使用します。

trans.Set()は要素の不透明度をスムースに変化させるfunctionです。
trans.Set(Object,alpha);として使用します。
alphaの値は0-100%の値を指定します。

size.Set()は要素の大きさをスムースに変化させるfunctionです。
size.Set(Object,height,width);として使用します。

move.Set()、sweep.Set()、trans.Set()、size.Set()は組み合わせて使用することを前提に設計されています。これの関数は同じタイムラインで処理し、同時に実行してもできるだけ軽く処理するように設計しています。