08 | 2017/09 |  10

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

popupをフェードイン表示に(不透明度変化を導入)

それは透明化・不透明化関数の練習のためでもあった

透明化・不透明化はこのブログを設立した頃にはまだ、IEでしか出来ない状況だった。あるいはIE以外のbrowserにおけるその実現方法が分からなかった。

しかし、今回別件(要素の高さ取得)で要素の透明化の必要に迫られて調べてみたところ、IEだけではなくMozilla系、safari、Operaでもそれが可能であることを知った。(これはこれまでも何度も触れてきたWebサイト:youmos - 新しいWebビジネスや技術アイデアを活性化するWebマガジンのお陰である。ほぼ毎日新しいJavascript素材や海外の貴重なサイトの紹介が更新されているが、改めて深甚の感謝を献げたい。)

この結果望んでいた透明化・不透明化コードを書くことが出来たのだが、 Smooth Scroll を実現した今、改めて「ソフトなWeb表示の変化」に興味を抱いた。

一方、アメリカを熱狂させたらしい iPhone の紹介動画をいくつか見て、Apple社がそれで実現しているSmooth Scrollやソフトな表示の変化に、改めて強い関心を抱いた。

かくして、随所に設置しているmouseover時に表示されるpopupについて、それを表示する際に透明化から不透明化への変化を持たせたい、と思い始めた。

既にこのサイト上でそれを実現しているので、随所で表示されるポップアップが「ほゎ~っ」と表示されることはここで触れるまでもないだろう。

▲ToTop

ここでは、実現に当たっての苦労談を綴っておきたい

要素の透明化・不透明化について(検索キーワードは"Javascript opacity")検索すると沢山のサイトがヒットする。日本語サイトだけでも約50万件(2007/07/07_0100am時点)がリストアップされる。

そのヒットリストの上位5Webを覗いてみると先ほど触れたyoumosもあるし、数年前にも見かけた内容が、画像のフェードイン・フェードアウト - e-Webに収録されている。All AboutのYUIモーションopacity,Easing... - [JavaScript]All Aboutは、流行のAjaxを使った例として興味深い。

透明化・不透明化はsetTimeout関数を使用することになるが、その例を色々さがしてみても、殆どが setTimeout("function()",msec) のようにfunctionに引数を取っていない。その場合functionの対象要素や必要な引数は皆global変数として定義し、function()の外で値を設定する方法をとっている。しかしこの方法は一つや二つの要素を対象として利用する場合には支障がないが、沢山の要素を対象としてsetTimeout関数を使おうとする場合、引数として対象オブジェクトや透明度の数値をセットしたくなるのだ。何故ならばそうした方が汎用的な関数として利用しやすいからである。

名著『Javascript & DHTMLクックブック』(著者Danny Goodman)には、setTimeout内の関数に引数がある場合のコードの綴り方が書いてあるが(p.95)、何故そうするのか説明がなく応用を利かせることが難しい。

ところで、e-Webの方法はIE限定であるが、youmosで紹介されているスクリプトを使えば、FF、Opera、safariに拡張できるものであり、貴重な点はsetTimeout関数内に引数を取っている点である。その方法を採用すればおそらく巧く動くだろうと思う。但し、name属性はXHTMLでは非推奨なのでidを活用することになるだろう。しかし、よく考えれば透明化・不透明化のsetTimeout関数内で、getElementByIdで対象を取得するのは無駄に時間を要すると思う。だからこそ、最善の方法はAjaxを勉強してマスターする道もあるか、とまで考えたが、当面その時間が取れそうもない。かくして、id属性を活用するe-webの方法は採用せず、setTimeout関数内の関数に引数を取らない方法で透明化・不透明化を行った。

YUI(Yahoo! User Interface Library)を分析してみたが、理解には時間が掛かりそうだ

その上で、Ajaxマスターへと進むのがこの際の最善の道ではないかと思い、yuiをダウンロードしその内容を調査してみた。しかし、それらは余りに沢山のコードからなっており、内容を理解して使いこなすには膨大な時間が掛かりそうだ。YUIの内容を理解しないまま使えるだけ使う道もあるが、そのようなことはしたくない。

だからといって、たかが透明化・不透明化を行うために全てのYUIを理解するには、その内容はかなり膨大で難解である。

しかし、透明化・不透明化については、id指定した要素をsetTimeout関数を使って操作する点は変わらず、膨大な内容を理解してから使うほどのことはない、と言うのが結論である。

▲ToTop

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/508-54208f44

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
200707070126
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。