分12345678今回解説するeffects.jsは,Script.aculo.usの代名詞ともいえる,魅力的な演出効果の数々を提供するライブラリです。Webサイトをよりドラマティックに彩るこれらの演出効果は,当初から新鮮な驚きを持って迎えられ,現在に至るまで,Web2.0なデザインを実現するのに欠かせないものとなっています。Web開発によく使われるライブラリとして,Ajaxjanの調査では,2006年,2007年ともに圧倒的なシェアを誇り,最新の調査では,jQuery,Prototypeに次いで第3位にランクインしました。その反面,遅い,重いと敬遠されている機能でもあります。いった不満の声は開発者たちにも届いており,不満を解消するための様々な最適化が施されています。今回の解説の見どころは,演出効果の実現方法もさることながら,そういった速度的なボトルネックを解消するために,いったいどんな最適化が行われているか,という点です。それには,evalでループ内不変式を削除する,というテクニックが使われています。effects.jsの内部構造として,まず,すべての演出効果の基礎となるEffect.Baseというクラスがあり,それを継承する単純な8種類の演出効果があります。今回の解説ではこの土台部分を解説します。次回の解説では,それらの複合からなる18種類の演出効果のコードを解説します。それではコードを見ていきましょう。0011:1~11行目は,著作権表示です。0026:};0027:0028:/*--------------------------------------------------------------------------*/0029:12~28行目のparseColorは,Stringクラスのメソッドで,'rgb(...)'や'#xxx'という形式で表現された文字列を,'#xxxxxx'という形式の文字列に変換する関数です。変換できない場合は,通常は,元の文字列を返しますが,引数を与えることで,変換できない場合にそれを返すようにできます。16行目で,'rgb(128,255,0)'といった指定を扱います。文字列が'rgb('で始まっているかを調べます。17行目で,その場合は,続く文字列を','で区切って,色の指定を取り出します。18行目で,それぞれの色の指定について,parseIntで整数として読み込み,Prototype.jsのtoColorPartを使って16進数表記の文字列にして,結合し,'#xxxxxx'という形式の文字列にします。20行目で,'#8F0','#80FF00'といった指定を扱います。文字列が'#'で始まっているかを調べます。21行目で,文字列が4文字ならば'#abc'という形式なので,3つの文字をそれぞれだぶらせて'#aabbcc'という形式にします。22行目で,文字列が7文字ならば,そのまま使います。25行目で,変換が成功したかを調べ,失敗していたら,元の文字列か1番めの引数を返します。}).flatten().join('');0035:};0036:30~36行目のcollectTextNodesは,与えた要素の子孫ノードをたどって,テキストノードを集めて,それらの文字列を結合して返す関数です。31行目で,要素の子ノードをたどります。ここでは,要素のchildNodesを,Prototype.jsの$A関数を使って配列にしてから,collectメソッドを使っています。32行目で,テキストノードは,nodeTypeが3です。テキストノードならその内容の文字列を返します。33行目で,さらに孫ノードがあれば,それをたどるように,collectTextNodesを再帰的に呼びます。34行目で,それらをflattenで配列をつぶして結合し,要素の子孫ノードが持っていた文字列を全て集めます。}).flatten().join('');0043:};0044:37~44行目のcollectTextNodesIgnoreClassは,collectTextNodesと同様の動作をしますが,40行目にあるように,2番めの引数で指定されたクラス名を持つノードを無視するところが違います。element;0050:};0051:45~51行目のsetContentZoomは,要素のフォントサイズを変えることで,表示の大きさを調整する関数です。倍率をパーセントで与えます(100で等倍⁠)⁠。47行目で,要素のCSSのfontSizeプロパティの値を変えることで,表示の大きさを調整します。48行目で,Safariブラウザには,window.scrollBy(0,0)で再描画を促します。'';0054:};0055:52~55行目のgetInlineOpacityは,要素の透明度を取得して返します。取得に失敗した場合は''を返します。53行目で,要素のCSSのopacityプロパティの値を取得して返します。取得に失敗した場合は''を返します。}0063:};0064:0065:/*--------------------------------------------------------------------------*/0066:56~66行目のforceRerenderingは,Safariでfloat属性と透明度が絡んだときに,要素が正しくレンダリングされないバグを回避するための関数です。学部生のときにSchemeの素晴らしさを知ったのをきっかけに,関数型言語の世界へ。JavaScriptに,ブラウザからすぐに試せる関数型言語としての魅力と将来性を感じている。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。