最近、絵を書いてなかったけどちょこっとしたものでも楽しいですね。
]]>ですが、
そういったプラグインの多くはカスタマイズを考慮に入れていないため手をいれるのが難しいです。
特に圧縮されているスクリプトに修正を施すのはもう不可能〜。せっかく、制作のスピードを短縮するためのプラグインが、逆に時間を奪ってしまうこともあります。
なので案件に対応させたい時や制作時間短縮のために使用した時のために、Web上から自分にあったものを探すよりも、欲しいプラグインを作ってしまった方が良いでしょう。なにより仕様を自分のスタイルに合わせやすいですし、カスタマイズで色々備えておくことも可能になりますから。
今回作ったのはツールチップのプラグインです。リンクなど特定の部分にヒュッとでるあれですね。（余談ですけど僕はGoogle日本語入力つかってますが、ヒュッってところで単語予想の部分にヒュッケバインが入っていたのにびびりました。スパロボネタでわからない人すいません。）
aタグ内の要素を表示するツールチップ
ツールチップには色々な使われ方がありますが、リンク先の情報の表示や補足出来ていない情報をコンパクトにまとめる使い方が多いと感じます。
今回作ったのはテキスト情報を主に表示するためのツールチップです。
とりあえずサンプルはこちら。
さわってみるとわかると思いますが、割とシンプルなツールチップです。
スクリプトはこんな感じです。
javascript
$(function(){
var index,texts,nam,t,l,tp = $(".tip"),bd = $("body"),spd = 200,op_01 = {"opacity":0},op_02 = {"opacity":0.9},out = {"top":-9999};
function hover(nam,ele,atr,t,l){
appSt(nam);
var a = "."+nam+" "+ele,st = $("p.tip."+nam);
$(a).hover(
function(){index = $(a).index(this);onOver(a,st,atr,t,l);},
function(){st.animate(op_01,spd,function(){st.css(out)});});
}
function onOver(a,st,atr,t,l){
texts = $(a+":eq("+index+")").attr(atr);
st.stop(true, false).animate(op_02,spd).text(texts);
$(a).mousemove(function(e){st.css({"top":e.pageY-t,"left":e.pageX-l});})
}
function appSt(nam){bd.prepend("<p class='tip "+nam+"'></p>");tp.css(op_01);}
//5パターンのツールチップ実行
hover("t_01","a","name",-20,-10);
hover("t_02","a","href",-20,-10);
hover("t_03","a","name",120,0);
hover("t_04","a","name",50,0);
hover("t_05","em","title",50,-15);
})
各ツールチップ用毎のcss
//ツールチップの基本指定
p.tip { position:absolute; top:-9999px; z-index:10; padding: 0px; margin:0px; color:#fff; font-size:13px; font-weight:normal; color:#fff; background:none; }.tip.t_01 { width:220px; padding:5px 7px; font-size:14px; background:#000; border:1px solid #09C; }
.tip.t_02 { padding:5px 7px; font-size:11px; letter-spacing:2px; background:#000; border-bottom:5px solid #09C; }
.tip.t_03 { width:185px; height:74px; padding:10px 10px 30px 10px; font-size:14px; background:url(common/images/img_tip.png) no-repeat; }
.tip.t_04 { padding:8px 10px; color:#444; font-size:15px; background:#ccc; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#aaa), to(#ddd));
background:-moz-linear-gradient(0% 100% 90deg, #aaa, #bbb); -moz-border-radius:3px; -webkit-border-radius:3px; text-shadow:0px 0px 1px #fff; -webkit-box-shadow:1px 1px 1px #999; -moz-box-shadow:1px 1px 1px #999; }.tip.t_05 { width:220px; padding:10px 12px; color:#fff; font-size:14px; line-height:1.3em; background:#036; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#069), to(#036)); background:-moz-linear-gradient(0% 100% 90deg, #069, #036); text-shadow:-1px -1px 1px #025; -webkit-box-shadow:1px 1px 2px #666; -moz-box-shadow:1px 1px 2px #666; }
上記が今回作ったツールチップのjsとcssです。もちろん、これらを使用する前にはjQueryを読み込ませます。今回はjQuery1.4.2を使ってみました。このツールチップを作るとき、色々なパターンを実現出来る方がいいなと思い、CSSでの拡張性が高いものを目指しました。
入力した値をパラメータで受け渡す
表示までの大体の流れはこうなっております。
hover関数にパラメータを入れ宣言
↓
パラメータを変数に代入
↓
パラメータで指定した親クラスにツールチップのタグ要素をprependメソッドで記述
↓
hoverイベントのマウスオーバーで、まずタグ要素のプロパティを取得
↓
それをツールチップのタグ内に記述する
↓
animateメソッドで表示後、マウスムーブイベントでツールチップをマウスに追従させる
↓
マウスアウトになったら、animateメソッドでフェードアウトし、cssメソッドで画面外にツールチップを再配置
表示の流れはこんな感じです。雑な仕組みになっちゃっていると思いますが、実際のソースコードもちょっと見てみましょう。
var index,texts,nam,t,l,tp = $(".tip"),bd = $("body"),spd = 200,op_01 = {"opacity":0},op_02 = {"opacity":0.9},out = {"top":-9999};
ここはほとんど関数に必要な変数しかありません。ツールチップのアルファ値や、クラス名など基本の値を記述してあります。一番触る必要のない箇所ですね。
function hover(nam,ele,atr,t,l){
appSt(nam);//ツールチップのタグを埋め込む
var a = "."+nam+" "+ele,st = $("p.tip."+nam);
$(a).hover(
function(){index = $(a).index(this);onOver(a,st,atr,t,l);},
function(){st.animate(op_01,spd,function(){st.css(out)});});
}
hover関数は今回のスクリプトの中で、使用者が唯一記述するスクリプトになります。上記は関数を構成している記述です。（hoverイベントと名前がかぶるんで、ややこしかったですね・・・すいません。）
関数には5つのパラメータが存在しており、「nam」は親クラス、「ele」はマウスオーバーに対応するタグ要素、「atr」はツールチップに表示するタグのプロパティ、「t」と「l」はツールチップの座標の値です。親クラスのnamを指定させる理由はこのクラス名を組み合わせてツールチップのクラス名として利用するからです。
これらのパラメータを記述した命令をわかりやすくすると、こうなります。
hover("親クラス","クラス内のタグ要素","要素内のプロパティ",topプロパティ,leftプロパティ);
なので、「div#testのaタグにnameプロパティを取得したツールチップを表示させたい」時には、
hover("test","a","name",topプロパティ,leftプロパティ);
となります。topとleftの値だけは、表示するツールチップのサイズによりますので、流動的になります。
function appSt(nam){bd.prepend("<p class='tip "+nam+"'></p>");tp.css(op_01);}
hoverイベントの前に、実行されているappSt関数は指定した親タグ内にツールチップのタグを埋め込みます。パラメータのnamをpタグのクラスとして利用し、bodyタグの先頭に記述しているんですね。（prependメソッドはhtmlテキストの先頭に指定したテキストを追加するメソッドです。）
なのでもしnamが「test」というクラスで入力されていたら、ツールチップのクラスは「p.tip.test」という扱いになります。これでツールチップのタグに対してCSSを明確に指定することが出来ます。
$(a).hover(
function(){index = $(a).index(this);onOver(a,st,atr,t,l);},//マウスオーバー
function(){st.animate(op_01,spd,function(){st.css(out)})//マウスアウト
hoverのイベントにはマウスオーバーとアウトの関数をそれぞれ記述してあります。
index=の記述は、マウスオーバーしている要素が親クラスの中の何番目なのかを調べています。これによりそれぞれの要素内のプロパティを参照することができます。
マウスアウトすると、animateメソッドでフェードアウトし、そこからコールバック関数でツールチップ自体を-9999pxの位置に飛ばしています。もともと絶対配置なので、この辺は自由に座標をコントロールできます。
最後にマウスオーバーで実行したonOver()の関数ですが、
function onOver(a,st,atr,t,l){
texts = $(a+":eq("+index+")").attr(atr); //要素内のプロパティを参照
st.stop(true, false).animate(op_02,spd).text(texts); //フェードイン+テキスト挿入
$(a).mousemove(function(e){st.css({"top":e.pageY-t,"left":e.pageX-l});}) //マウス位置に追従
}
ここでは多くのパラメータを取得しています。aは親クラス内のタグ要素、stはツールチップに対応するクラス名、他は最初のパラメータと同じものです。
一行目は要素内のプロパティをまず参照しています。textsという変数にタグ要素から取得したプロパティを代入してます。
二行目はanimateメソッドでフェードイン処理を行っています。そこからメソッドチェーンでツールチップにテキストを入れ込んできます。
三行目はツールチップのカーソル追従処理です。ここではまずページ全体からマウスの座標を取得しています。これをマウスムーブイベント中ずっと行っています。
以上がスクリプトの内容です。サンプルで表示しているツールチップのスタイルが違うのは、親クラスの名前を使ってツールチップ自体がそれぞれのCSSを適用しているためです。
CSSでスタイルを分けるので、簡単に表示させたいツールチップの差別化が履かれると思います。ただ、まだ表示のエフェクトはフェードインという形になっているので、ここはちょっと改善したいですね。パラメータの受け渡しを使ってこういったツールチップを作ったのですがもうちょっと今後は変数名や値の名前まで気を使って、わかりやすいソースにしなければいけないと感じました。
今回のサンプルです。
今回の記事は西畑一馬さんの「jQuery基礎文法最速マスター」を参考にさせていただきました。
]]>ただ、明示型のアクセサメソッドはいかにもメソッドを使ってます！ってな感じな指定の仕方ですよね。前回のクラスで例えるとこんな感じ↓
student.setGPA( 値 );
普通のやり方ならば単純にプロパティに値を指定するだけになりますよね。
student._gpa = 値 ;
明示型アクセサメソッドのようにメソッドを使って値を入れるのも何ら問題はないですが、上記の単純な指定でやり取りすれば、実際にプロパティに値を指定している分、プロパティ値の流れがわかりやすくなります。
このアクセサメソッドでも厳密な指定をする際に、そういったシンプルな指定をしていみたい。そういう時に役に立つのが暗黙型アクセサメソッドです。
暗黙型アクセサメソッド
まずアクセサメソッドの明示と暗黙というのは、一体何に対してなのかという事ですが、これは「値の参照に対してメソッドを使っているかどうか」という事だと僕は解釈しています。明示型のアクセサメソッドは明らかにメソッドを使って値を扱っています。それに対して暗黙型アクセサメソッドは普通のプロパティの値指定とほとんど同じ記述になります。
Baseクラス
package {import flash.display.Sprite;
import flash.events.Event;
public class Base extends Sprite{
public function Base() {
addEventListener(Event.ADDED_TO_STAGE,init);
}
private function init(e:Event):void{
removeEventListener(Event.ADDED_TO_STAGE,init);
addOn();
}
private var student:GPA = new GPA();
private function addOn():void{trace("GPAオブジェクトのデフォルト値："+student.gpa);
student.gpa = 4 ;//入力の処理
}
}
}
GPAクラス
package {
public class GPA {
public function GPA() {
// constructor code
}
private var _gpa:uint = 3;
public function get gpa():uint {
return _gpa;
}
public function set gpa(value:uint):void {
if (value>4) {
_gpa=4;
} else if (value < 0) {
_gpa=0;
} else {
_gpa=value;
}
trace("値は更新されました。現在の値は："+_gpa);
}
}
}
上記が構成されているクラスの中身です。
Baseクラスの値の操作に注目して欲しいですが、プロパティの指定がとても普通な記述になってます。これが暗黙型の指定の仕方で、クラスを呼び出す方にはメソッドをプロパティのように扱う事が可能になります。（そういう風に見えます。）
GPAクラスはメソッドの記述を変更してあります。「get」「set」という記述を足してますね。呼び出す側には「gpa」の値で参照し、元クラスでは「_gpa」を操作しています。
これにより呼び出し側と呼び出し元のクラスそれぞれで違和感の無いプロパティの参照が可能になりますね。
実行結果はこちらです。
GPAオブジェクトのデフォルト値：3
値は更新されました。現在の値は：4
自分で案件を一から組む際には、致命的な事にはならないんですが、強引な印象は否めないですし他の人と組むときに親切じゃないですよね。（あと恥ずかしい・・・）
そんな時に使われるのが、アクセサメソッドというやり方です。
スクリプトで働く人間として、これは知らねばという事で記述を残しておきます。
実際どういう時に使うものなの？？
このメソッドを使うときは一体どんな時なのか？それはクラス内のプロパティの値を入力、出力する時です。たとえば、計算結果をプロパティの値にしたい、とか、現在のプロパティ値を呼び出してtraceで表示したいとか。
クラス内で定義したプロパティがパブリックであれば、正直どんな位置からでも簡単にアクセスする事が可能になります。ですが、それは厳密な指定とはかけ離れ、ミスを生み出す可能もあります。そういった適当な指定をしたくない時にアクセサメソッドは必要となります。
アクセサメソッドにはgetterとsetterという二つの要素があり、さらにこれがアクセサメソッドということを明示するタイプの型と暗黙型の二つの記述方法があります。
今回は明示型の記述です。クラスの構成はアクセサメソッドでプロパティの値を入出力するGPAクラスと、そのパブリックメソッドで実行のみを行うBaseクラスです。
明示型アクセサメソッド
Baseクラス
package {import flash.display.Sprite;
import flash.events.Event;
public class Base extends Sprite{
public function Base() {
addEventListener(Event.ADDED_TO_STAGE,init);
}
private function init(e:Event):void{
removeEventListener(Event.ADDED_TO_STAGE,init);
addOn();
}
private var student:GPA = new GPA();
private function addOn():void{trace("GPAオブジェクトのデフォルト値："+student.getGPA());
student.setGPA(4);//入力の処理はsetterのメソッド
}
}
}
GPAクラス
package {
public class GPA {
public function GPA() {
// constructor code
}
private var _gpa:uint = 3;
public function getGPA():uint {
return _gpa;
}
public function setGPA(value:uint):void {
if (value>4) {
_gpa=4;
} else if (value < 0) {
_gpa=0;
} else {
_gpa=value;
}
trace("値は更新されました。現在の値は："+_gpa);
}
}
}
上記が構成されているクラスの中身です。
見るとわかると思いますが、扱うプロパティ「_gpa」はプライベート型です。明示型はパブリックプロパティではなく、プライベートを使用します。とりあえず、その段階で安易なアクセスは不可能になりますね。
内部にif文なども含まれていますが、重要なのが入力と出力のメソッドがしっかりとわかれている事です。Baseクラスから入力するには「setGPA()」、出力する際には「getGPA()」を使用します。これによりプロパティの値の流れが、明確になるだけでなくイベントとも繋げやすくなりますね。
実行結果はこちらです。
GPAオブジェクトのデフォルト値：3
値は更新されました。現在の値は：4
「これであれが出来る！！」って感じのメソッドではないですが、使うと色々綺麗なソースになりそうなので覚えておきます。
暗黙型の記述もまたやります。
]]>/*jQueryでマウス座標を取得し表示する*/
var lefts,tops,axis;
function(){
$("html").mousemove(function(e){
axis = "( " + e.pageX + ", " + e.pageY + " )";
$("p").text(axis);
})
}
html上のマウス座標を取得し、pタグの中に座標を記述する関数です。FlashのようにaddEventListenerが無いからどうすのかと思ってましたが、普通にmousemoveメソッドを使うんですね。
axisは座標を格納するための変数で、mousemoveが働く毎にxy座標を取得しています。
pageXプロパティとpageYプロパティはイベントの発生した要素（この場合、html要素）の座標の値です。これらを使い、pタグにテキストとして入力してます。
]]>//javascript
function link_window(){
window.opener.location.href=' 表示させたいURL ';
window.opener.focus();
}
//HTML側
<a href="javascript:link_window()">リンクテキスト</a>
ポップアップ上での操作は今まで使ったいなかったので知りませんでした。地味な処理なんですが、知っていると割といいかも。
動きをより追求できるdelayメソッド
要素のアクションに遅延効果を追加出来るのがdelayメソッドです。animateメソッドとの相性はもちろん良いですが、アニメーションしないメソッドでも、メソッドチェーンをして特定の処理だけ遅らせるといった命令も実行可能になります。
使った感想はやっぱり、animateメソッドと組み合わせるといい感じです。
遅延効果自体はちょっとしたものなのですが、組み込むと今までよりリッチな演出を行うことができます。
例えば、特定の要素をフェードやスライドなどで表示を消すことは結構あると思いますが、その際に普通に指定をかけたら要素は全部一緒に消えてしまいます。
$("要素").fadeTo(1000,0)
//この場合、要素がpタグだったら、実行時に全てのpタグがフェードアウト
上記はフェードアウトの指定ですが、これを普通に指定しただけでは要素が数個存在していても一括でフェードアウトしてしまいます。これにdelayメソッドと幾つかの処理を行えば、要素のフェードアウトを各個ずらしながら実行することができます。
まず、一個ずつ処理を行うためのfor文を追加します。
for(i=0; i<要素の数 ;i++){$("要素").fadeTo(1000,0) }
これで要素の数だけ処理を行ってくれます。が、これだと処理は実行してくれますが、同じ要素全てに何度も行ってしまうことになります。なので処理の対象となる要素を限定させます。
for(i=0; i<要素の数 ;i++){$("要素:eq("+i+")").fadeTo(1000,0)}
先程の記述で、要素の箇所にeqフィルターを記述しました。
eqフィルターは記述順で要素を指定することができるjQueryの独自フィルターです。今回の場合、指定には変数のiが記述されています。iはfor文で1ずつ増えていくため、要素数の分まで一個ずつ処理を実行することが可能になります。
これで処理を各個順番に実行できるようになりました。最後にdelayメソッドを追加し関数化します。
function(){
var num = i * 要素間で遅らせる秒数 ;
for(i=0; i<要素の数 ;i++){$("要素:eq("+i+")").delay(num).fadeTo(1000,0)}
}
ここで追加しましたnumはフェードにかける遅延の秒数を代入するための変数です。例えば秒数を「2」とした場合、2個目の要素ならば4秒後に処理が開始され、10個目の要素なら20秒後に処理が開始されます。
そしてdelayメソッドにnumを指定すれば完了です。
今回のサンプルです。
]]>クラスは今まで、一般的なクラスしか使ってこなかったのでこういった新しいクラスに触れるのは楽しいですね。
2Dを3Dへ投影するPerspectiveProjectionクラス
パースぺくてぃぶぷろじぇくしょん・・・・中々長いクラス名です。
このクラスは、2D表示のオブジェクトを擬似的に3Dライクな表示に投影してくれるクラスです。CS4にはタイムライン上のオブジェクトのZ軸や、視野をいじったりできるパネルが追加されているかと思いますが、それらのプロパティを統括しているクラスがPerspectiveProjectionクラスです。奥行き、遠近感や消失点と呼ばれる要素を手軽に実現することができます。
消失点を定義するprojectionCenterプロパティ
このクラスを使用するときはまず、PerspectiveProjectionオブジェクトを作ります。そこからプロパティにアクセスします。PerspectiveProjectionオブジェクトはメインタイムライン(root)のtransform.perspectiveProjectionプロパティからアクセスしますので、こう記述します。
var obj:PerspectiveProjection = root.transform.perspectiveProjection;
これでオブジェクトを作成できました。現時点では消失点はステージの中心にあります。（stagewidth/2, stageHeight/2）消失点を自分で制御する場合はこう記述します。
_pro.projectionCenter = new Point ( x , y );
作成したオブジェクトにアクセスしてプロパティを指定するわけです。ただ、消失点の値はPointクラスですので、projectionCenter用のPointクラスオブジェクトを作った方がスマートです。
var _centerPro:Point = new Point( x , y );
_pro.projectionCenter = _centerPro;
視野角を指定するfieldOfViewプロパティ
fieldOfViewプロパティは3次元の視野角を指定出来ます。0〜180の数値で遠近法の変形と歪みの強さを決定します。カメラをやっている方ならわかりやすいですね。0に近いとオブジェクトの遠近感がかなり少なく、180に近くなればなるほど歪みが大きくなります。遠近感が強くなり魚眼レンズ効果が生まれてきます。
プロパティの値が大きい時、オブジェクトのz値が0より少ない(マイナスの値)ほど遠くにあるような感じになり、z値が大きいほど手前にあるような表示になります。ただ注意点として、扱いとしては0〜180の値になっておりますが、値に0と180を入力すると画面に何も出なくなるので注意してください。
視点からオブジェクトの距離を指定するfocalLengthプロパティ
focalLengthプロパティは視点からz軸上のオブジェクトとの距離を指定出来るプロパティです。基本的にはfieldOfViewプロパティを指定後、動的に計算されて値が生成されますが、こちらから明示的に指定することも可能です。色々さわってみてもいいですが、無理に使う必要もない気がしました。
wonderFlでforkしてみました。
使った感想
さわった感想としては、とても使い易かった感じです。ガリガリな3D表現はできませんが、ふわっとした浮遊感や奥ゆき感は簡単に実装できます。プロパティも少ないので、軽くソースを見ただけで覚えられるし、rotation系やPointクラスなどを使い色々出来そうですね。
追記 1つ注意
1つ書き忘れていました。このクラスは手軽に立体感を表現は出来ますが、実際に立体に変換されているのとは違います。その証拠に、それぞれのオブジェクトの表示は必ずaddChildで登録された順になっていると思います。一回転とかやろうとすると、ちょっと描画がおかしくなるので注意してくださいね。
]]>XMLファイルの読み込み
xmlファイルでも前に紹介した,loadメソッドでの読み込みは可能です。ですが、xmlファイルはそのまま読み込みを行ってしまっても表示に難があります。元々タグで情報を構築するデータですので、タグが少なく内容を厳選しない限りtxtファイルなどのように表示することは難しいでしょう。
では、実際どうするのかというと、今回はajaxメソッドを使用します。単なる文字情報としてではなく、階層を持ったタグ情報として取得するのです。
ajaxでXMLを読み込む
ajaxメソッドでxmlは取得できるのですが、取得するだけでは表示することはできません。取得の際にデータを加工する必要があります。まず、ajaxメソッドで情報を取得する記述です。
$.ajax({
url:"読み込むxmlファイル",
dataType:"xml",
success:function(data){ 読み込んだファイルに対する処理 }
})
上記の記述はxmlファイルを読み込むまでの処理です。urlにはloadメソッドの時と同様にファイルのパスを、dataTypeは今回はxmlファイルなので"xml"をそれぞれ記述します。そしてsuccessには読み込み成功時、読み込んだデータに対する処理を記述します。それで今回読み込むxmlファイルはこちらです。
<?xml version="1.0" encoding="UTF-8"?>
<datalist>
<entry>
<title>TXTファイルで更新</title>
<texts>txtファイルの読み込みはシンプルです。読み込まれたテキストが、そのまま要素の中に流し込まれます。改行とかは無視されちゃうんですけど、（多分やり方あると思うんですが、調べておきます。）簡単な更新情報はこちらで十分です。</texts>
</entry>
<entry>
<title>CSVファイルで更新</title>
<texts>csvファイルは上記二つとタイプが違います。もともとは表データで作られているため、見栄えも想像しにくいですよね。
csvは行ごとに読み込まれ、列ごとの要素間はカンマで区切られています。普通に読み込んでも正直これは使えないので、csvファイルの読み込みに関しては、表示の際に関数の指定する必要がありますね。（また今度やります。）</texts>
</entry>
<entry>
<title>HTMLファイルで更新</title>
<texts>htmlファイルがtxtファイルと違うのは内容がテキストではなく、HTMLタグで読み込まれるという事です。読み込み先のbodyタグ内の要素が、そのまま読み込まれる要素の中には位置されます。なので、読み込まれる要素内にあらかじめCSSで指定をかけておけば手軽に装飾済みの更新が可能になります。コーディングの作業に慣れている方には、これが一番楽かもしれませんね。</texts>
</entry>
</datalist>
かなり普通の形です。datalistという名前のタグの中に、各entryタグがあり、その中にtitleタグとtextsタグがセットになっているというブログ的な構造ですね。これを読み込みます。それで先程の記述でデータの取得は出来るようになったので、次は読み込んだデータを加工します。それをさっきの記述に足したのがこれです。↓
$.ajax({
url:"読み込むxmlファイル",
dataType:"xml",
success:function(data){//データを加工する処理
$("entry",data).each(
function(){
$("タグの内容を表示する要素").append("<em>"+$("title",this)
.text()+"</em>"+$("texts",this).text())
})
}
})
まず最初に、entryタグにeachメソッドを指定します。これによりentryタグの数だけ、処理が行われるわけですね。entryタグを抜き出したら、その中のタグをHTMLの表示場所に書き出していきます。
書き出すにはappendメソッドを使います。appdendメソッドは指定した要素に、タグやテキストを記述する事ができるメソッドです。今回の記述ではtitleタグをemタグに、textsタグは普通にテキストとして流し込むようにしています。
appendメソッドでは、<a>タグやその他のhtmlタグを記述できたり、テキストを変更する事ができるので、追加後の構造さえしっかり考えておけば今回の記述よりもかなり複雑な事が可能になります。
今回のサンプルです。
前回と今回の記事は、to-R / 西畑一馬氏のASCII.jpでの連載「web制作の現場で使えるjQuery UIデザイン入門」を大変参考にさせてもらっています。
]]>先日、みんなに大人気のjQuery最新バージョンが発表されました。今回リリースのjQuery1.4には何個も新機能が追加されています。僕はにわかjQuery使いですが、僕にも簡単に使えそうで、便利っぽい新しいメソッドが二つあります。
delayメソッド
delayメソッドは、fadeTo()やslideUp()メソッドのようなアニメーション系メソッドと組み合わせて使うみたいですね。今でのアニメーション系は組み合わせて使う事は出来ましたが、delayを簡単に組み込む事は出来ませんでした。
$('#foo').slideUp(300).delay(800).fadeIn(400);
上の例では「id="foo"」という要素にアニメーションをかけているのですが、slideUpした後に0.3秒delayをかけてfadeInにつなげています。
記述は今まで同様とてもシンプルなので流れがわかりやすいですね。個人的にはProgressionのSerialListクラスの書き方と似てきた気がする。
hasメソッド
hasメソッドは指定のセレクタ内に記述した要素があるか確認するメソッドです。もし要素が存在していれば、元のjQueryオブジェクトを返します。要素確認とその後の処理をチェインでひとまとめに出来、さらにtrueじゃない場合は処理が行われない・・・のかな？？
ちょっと試してみないとわからないですが、そうだったら結構汎用性高い気がします。
$('li').has('ul').css('background-color', 'red');
上の例はul要素を内包したli要素のみ、cssメソッドで背景を赤にする記述です。こちらもチェインに簡単に組み込めるのでわかりやすいですね。
特定の要素をチェックして、それを内包している親要素にのみメソッドを実行出来るので、内包するコンテンツが固定しずらいCMSとかに使ったりすれば、効果がありそう。
jQueryはブラウザ進化とともに高速化・多機能化が進んでいます。今年はjavascript2.0が新たに策定完了し、jQueryを含めjavascriptは一つ上の局面に進みそうですね。
今回は紹介しただけですが、他にも結構新しい機能が増えてますので、また書きます。サンプルも作ります。
package{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.display.Graphics;
import flash.utils.Timer;
public class BG extends Sprite{
private var bg_01:Sprite = new Sprite();
private var bg_02:Sprite = new Sprite();
private var bg_03:Sprite = new Sprite();
private var sizeW:uint = 400;
private var sizeH:uint = 200;
private var g01:Graphics = bg_01.graphics;
private var g02:Graphics = bg_02.graphics;
private var g03:Graphics = bg_03.graphics;
private var arr:Array;
private var a_num:uint;
private var r_num:int;
private var r_num2:uint;
private var prison:Object;
private var times:Timer = new Timer(1000);
public function BG():void{
addEventListener(Event.ADDED_TO_STAGE,init);
}
private function init(event:Event):void{
removeEventListener(Event.ADDED_TO_STAGE,init);
arr = new Array(bg_01,bg_02,bg_03);
a_num = arr.length;
Add_01();
Add_02();
Add_03();
Add_00();
}
////////////////////////////////////////////////////////////
private function Add_00():void{
r_num = Math.floor(Math.random() * a_num);
addChild(arr[r_num]);
prison = arr[r_num2];
arr.splice(r_num,1);
r_num2 = r_num;
times.addEventListener(TimerEvent.TIMER,addArr);
times.start();
}
private function Add_01():void{
g01.beginFill(0xff3300);
g01.drawRect(0,0,sizeW,sizeH);
g01.endFill();
}
private function Add_02():void{
g02.beginFill(0x0099cc);
g02.drawRect(0,0,sizeW,sizeH);
g02.endFill();
}
private function Add_03():void{
g03.beginFill(0x111111);
g03.drawRect(0,0,sizeW,sizeH);
g03.endFill();
}
////////////////////////////////////////////////////////////
private function addArr(Event:TimerEvent):void{
r_num2 = r_num;
arr.push(prison);
prison = arr[r_num2];
arr.splice(r_num2,1);
a_num = arr.length;
r_num = Math.floor(Math.random() * a_num);
addChild(arr[r_num]);
if (this.numChildren >= 2){
removeChildAt(0);
}
}
}
}
背景をランダムに変えるスクリプトの第一段階です。ちょっとサンプルとか今日は無理ですけど、メモがわりに載せておきます。
]]>
最近、絵を書いてなかったけどちょこっとしたものでも楽しいですね。
]]>gihyo.jpの「いま，見ておきたいウェブサイト第25回 2010年特別編 2009年の特徴，2010年の展望」を読みました。「特徴その3 "見えないもの"をどう見せる？」というコーナーで
「そのままのデータを見せてユーザーに理解してもらう時代は終わっている」
という一文がありまして、ちょっと考えさせられました。
この一文の「そのままのデータ」というのが、今までの普通にサイトに表示していたコンテンツなのだとすると、今後は「今まで見えなかった情報」を可視化（またはコンテンツ化）しなくてはならないという事ですよね。
ここで紹介されていたHondaのインターナビや、ナカノクエストみたいに、ナビの位置情報や政治家の活動内容・活動範囲など、普段あまり可視化しない情報を表現に落とし込む事が必要になるわけで。（ちなみに前者は斬新でプロダクトの内容にあったコンテンツに、後者は不透明だった活動内容が明確になりユーザーに理解しやすいになっています。）
そもそも可視化されづらい情報というのは、情報そのものの存在を忘れられているか、重要性が理解されてないかの理由で可視化に至らないのだと思います。
当たり前に存在していても、気付かず使われなかったり、コンセプトやプロダクトと結びつかないと使いづらい情報だったりするので、それらを利用するには、ユーザーを見据えたより入念なコンセプト共有やクライアントとの濃密なコンタクトが必要になると思います。
Web制作の現場で、コンセプトワークやデザイン・構築の手法が今よりも密接に結びつくようになってくるのは必然ですが、中でも情報のコントロール・再構築が上手に出来るクリエーターが必要になってきそう。僕は現在製作メインのポジションですが、インフォメーションアーキテクトと呼ばれる分野もしっかりと勉強しておいた方が絶対に良さそう。
サイトとアプリケーションの境が曖昧になり、クリエーターとして技術力が以前より必要されてきていますが、情報に着目し可視化する思考も常に磨いていかなくてはならないですね。
あとどうでも良いかもしれませんが、ナカノクエストのサイト。音楽流れているんですけど、ブラウザの別タブを選択した時止まるんです！サイト内のポップアップウィンドウで音が止まるとかならわかるんですが、別サイトを閲覧している時やURLを入力している時とか止まってくれるのが細やかで好きです！（コンテンツ自体も大好きですよ。）サイトのBGMとかって時に煩わしく感じてしまうこともあるんですが、こういったスマートな対応をされると、とても好感が湧きますね。
]]>文字置換を行うreplaceメソッド
前回書いた記事の延長の内容なのですが、外部ファイルの中には読み込んだ後に、内容と見栄えを整理しなくてはなりません。replaceメソッドは普段僕たちの使っているAdobe系アプリケーションなどで行っている検索置換的なプログラムを実行してくる便利なメソッドです。
$("置換を行う要素").html( $("置換を行う要素").html().replace( /置換対象の要素/ig , "置換える要素" ) )
上記のスクリプトが必要な記述です。ちょっとわかりづらいですけど、置換を行う要素とhtmlメソッドの処理が二回あります。形は違いますが、２連続で同じメソッドを記述する事になります。
htmlメソッドは指定した要素にhtml文字列を返す命令を行います。これによりhtmlタグの取得が可能なっているわけですね。
例えば、divタグ内から
を取り除き、代わりに「！！！」を置くには↓
例
$("div").html( $("div").html().replace( /<br />/ig , "！！！ ) )
↑となるわけですね。
]]>企業・商用サイトの制作の際、公開情報をクライアント側で編集したいという要望あったりします。CMSでの構築やXML読み込みといった選択肢がありますが、新着情報やちょっとしたコメントなど小規模なコンテンツの場合、制作・勉強コストのかかる技術は割に合いません。
そこで活躍するのが、jQueryのloadメソッドです。
（※loadメソッドはEvent処理の使われ方もありますが、ここでのloadメソッドはEvent処理の方じゃないですよ）
loadメソッドは少ない記述で外部のファイルの読み込みを可能にします。読み込めるファイルはtxt、html、csvなどがあります。↓が読み込みの記述です。イベントと合わせなければ、１行で終わるメソッドです。
$("読み込む要素").load("読み込むテキスト");
これらのファイルを使う利点は、何よりも手軽であるという事です。ファイルサイズ、確認可能なツール、学習コスト。制作に必要なツールなんて、txtファイルとhtmlファイルはメモ帳系のアプリケーションOKです。（ソフト配布サイトに行けばもっつ高性能で便利なやつも絶対ありますしね。）
csvファイルは少し聞き慣れていない方もいらっしゃると思いますが、こちらはエクセル等、表計算ソフト用のファイル形式です。txtファイルやhtmlファイルは、表示のために記述のルールを細かく指定することがありますが、csvファイルは表計算のソフトから書き出す事が出来るため、サイト更新に慣れていない方でもソフトのおかげで複雑な記述に対応しやすいのが魅力です。
txtファイルの読み込み
txtファイルの読み込みはシンプルです。読み込まれたテキストが、そのまま要素の中に流し込まれます。改行とかは無視されちゃうんですけど、（多分やり方あると思うんですが、調べておきます。）簡単な更新情報はこちらで十分です。
htmlファイルの読み込み
htmlファイルがtxtファイルと違うのは内容がテキストではなく、HTMLタグで読み込まれるという事です。読み込み先のbodyタグ内の要素が、そのまま読み込まれる要素の中には位置されます。なので、読み込まれる要素内にあらかじめCSSで指定をかけておけば手軽に装飾済みの更新が可能になります。コーディングの作業に慣れている方には、これが一番楽かもしれませんね。
csvファイルの読み込み
csvファイルは上記二つとタイプが違います。もともとは表データで作られているため、見栄えも想像しにくいですよね。
csvは行ごとに読み込まれ、列ごとの要素間はカンマで区切られています。普通に読み込んでも正直これは使えないので、csvファイルの読み込みに関しては、表示の際に関数の指定する必要がありますね。（また今度やります。）
読み込みの時の注意点！
三つともそれぞれに使い道のあるファイルですが、全てに共通する注意点があります。
１つは文字コードです。loadを使うときは「UTF-8」にしておいてください。設定に左右される問題ではありますが、ここは無難にいきましょう。
2つ目はファイルのパスです。読み込みたいファイルは絶対パスでも、相対パスでも大丈夫です。ですが、Ajaxというものはどうやらセキュリティー上の理由から読み込むためのHTMLファイルと同一のドメイン上にあるファイルしか取得できないみたいです。PHPを使用すれば、外部のドメインからファイルを取得出来るみたいですが、その際はセキュリティーにかなり気をつけないといけないです。
簡単なサンプルを作ってみました。こちらから
]]>png-8って一体どこで使うのかなーって思っていました。普通の写真やグラフィックはjpgで、それ以外はgifで書き出していました。ところが、どうやら256色の画像はpng-8で書き出した方が軽いみたい！
画像によっては、ファイルサイズが半分になります。そこから「ImaageOptim」というアプリケーションを使うことによって、さらにファイルサイズを下げる事ができるみたです。
「ImageOptim」はmacのアプリケーションですので、Windowsの場合は「OptiPNG」というアプリケーションを代わりに仕様してください。
いやーどこで使えばいいか、よく分かっていなかったけど凄く便利かも。
]]>