07 | 2005/08 |  09

  1. 無料サーバー

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

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


Tigra Menuの解析(2)───Tigra MenuでJavascriptを学ぶ(5)

2.各部の解析(1)

2-1. MENU 項目

MENU項目はjsファイル内で定義されるが、それはメニュー構造を忠実に反映した配列となっている。

例えば次のようなメニューの場合、そのjsファイル内での記述は以下のようになる。


階層メニューの表示例

menu1    menu2     menu3
 ├menu1-1  ├menu2-1
 ├menu1-2  ├menu2-2-┬menu2-2-1
 ├menu1-3        ├menu2-2-2
             ├menu2-2-3

Tigra Menuによるmenu項目の登録例

var MENU_ITEMS = [
 ["menu1","http://url1",
   ["menu1-1","http://url1-1"],
   ["menu1-2","http://url1-2"],
   ["menu1-3","http://url1-3"]
 ],
 ["menu2","http://url1",
   ["menu2-1","http://url2-1"],
   ["menu2-2","http://url2-2",
     ["menu2-2-1","http://url2-2-1"],
     ["menu2-2-2","http://url2-2-2"],
     ["menu2-2-3","http://url2-2-3"]
   ]
 ],
 ["menu3","http://url3"]
]

メニュー階層の深さに配列次元が連動し、すなわち配列はメニューの階層構造をそのまま反映したものとなっている。

模式図的に書けば、この配列は以下のような構造となっているわけだ。

 1
  1-1
  1-2
  1-3
 2
  2-1
  2-2
   2-2-1
   2-2-2
   2-2-3
 3
--------------------------------------------------------

まず語らねばならぬことは、このような配列を見たのが初めてであるということだ。

それは恰もメニューそのものであるかのような、Javascriptによる配列表現であり、配列はメニューの構造を忠実に反映しているが故に、「構造的」なものとなっている。

次エントリイ につづく。

Tigra Menuの解析(1)───Tigra MenuでJavascriptを学ぶ(4)

Tigra Menuの解析(1)

1.全体構造

Tigra Menuの全体は、3つのJavascriptファイル、1つのCSSファイル及びmenuを表示するための1つのHTMLの、合計5つのファイルから構成される。

まず、JavascriptファイルとCSSファイルは全て外部化されてHTMLから呼び出されると共に、メニューはHTML内に埋め込まれたたった1つの次のインスタンス生成文により表示される。

new menu (MENU_ITEMS, MENU_POS, MENU_STYLES);
//MENU_ITEMSはメニュー項目であり、メニューの階層に対応した  子持ちの配列となっている。 //MENU_POS, MENU_STYLESはそれぞれが2次元配列であり1次元目は  連想配列となっている。

JavascriptとCSS内では、メニューの構造、メニュー各項目、Onmouseout時の色、Onmouseover時の色、Onclick時の動作、階層メニューの表示とその位置及び隠蔽、などが定められており、Javascript文は、(1)menuとmenu_itemの2つの大きなクラス定義、(2)メニュー項目とリンク先、各種イベント処理、メニュー項目の位置・色・表示/非表示等のための定数値を設定する連想配列に大別される。

そして先の2つのクラス内において、当該コンストラクタのメソッドとしてイベント処理関数が定義されている。

<Javascript文の構成>

menu.js      :メニューの構造を設定する
menu_items.js   :メニュー項目を設定する
menu_tpl.js    :メニューの装飾(位置、色等)を設定する

2.各部

次エントリイ につづく。

Tigra MenuでJavascriptを学ぶ(3)──コンストラクタ、クラス、インスタンス

 関数、変数、配列、オブジェクトとメソッド。
 これらの用語と意味はJavascriptの学びはじめの時点で一通り学習するのが常となっている。
 しかし、コンストラクタ、クラス、インスタンスについてはどうだろうか?
 言葉だけは聞いたことがあるが、実際にそれらの概念を理解し、縦横に使いこなせるような、そんな学習の出来る書籍やサイトがどれだけあるだろう?
 不勉強にしてこれまで、これらの概念の理解は全くと言って良いほど欠如していたし、もちろん利用することなどあり得なかった。
 しかし、大変スマートなTigraMenuに遭遇して、このままではいかん!可能な限りの知恵を付けてこそJavascriptを使いこなせるのだ、との認識に至った。
 そんなわけで、TigraMenuのソースコード解析を通じて、Javascriptの基礎の基礎を学習し直すことになったのである。

Tigra MenuでJavascriptを学ぶ(2)───連想配列

 配列の要素を特定するためには0から始まる整数値を利用することは周知のことだ。しかしarray("name")という配列の記述の仕方は知らなかった。
 これが実は連想配列だったのだ。言葉だけは聞いていたが実用に供したことはなかったそれに、TigraMenuのお陰で初めて遭遇したわけだ。
例えば、次のようになるらしい。
price["apple"] = 200 ;
price["orange"] = 100;
上の例では配列priceにおいて、それぞれ添字名 "apple" に 200を、添字名 "orange" に 100を代入している。

TigraMenuではこの連想配列がふんだんに利用されているのだ。

この続きを読む

Tigra MenuでJavascriptを学ぶ(1)

Tigra MenuでJavascriptを学ぶ

オンラインで階層メニューが作成できてしまう優れものサイトTigra Menuを元にして、Javascriptを更に学習する過程を記してみたい。

TigraMenuBuilder

1-まずはTigra Menuで階層メニューを作る

 オンラインで階層メニューを作成する

その存在は『HTML&スタイルシートデザインブック』(エビスコム著 ソシム株式会社)で知った。

そもそもこの書籍では階層メニューが「プルダウンメニュー」として紹介されているので、久しく階層メニューのことではない、と決めてかかっていた。最近ひょんな機会から見直してみて、実はフォームを使ったプルダウンメニューではなく、まさしく階層メニューの意味であることが分かったのだ。

まあそんな用語の定義と適切な使い方については脇に置くとして、早速Tigra Menuでテスト的に階層メニューを作ってみた。作成は極めて簡単に行えるので、お好みの深さの階層メニューが数分で完成してしまった。もちろん、配置、文字色、背景色、メニューアイテムのサイズ等のデザインは自在に変更可能だ。余りに容易に出来るので、作成手順について述べるまでもないだろう。

オンラインBuilderで階層メニューを作成し終えると、5つのファイル index.html、menu.css、menu.js、menu_tpl.js、menu_items.jsが出来上がる。これらを一括ダウンロードすれば、ローカルPC上あるいはウェブサイト上で直ぐに活用できる。

 出来上がった5つのファイルを分析する

まず、Tigra Menuによりオンラインで作成される階層メニューの最大の特徴は、階層メニュー部分に関するHTML文が皆目存在しないことだ。(正確に言えば作成した複数のJavascript文を呼び出すスクリプト文がHTML内にある。)Javascriptとcssだけで階層メニューを実現しているのである。階層メニューはJavascriptにより吐き出され、HTML文内に書き出される。このことは最大の特徴であるだけでなく、最大の驚きでもあった。何故ならば、これまでネット上で検索し遭遇した階層メニューは、悉くHTML文内に様々な要素を書き連ね、それをJavascriptで制御する仕組みのものであったからだ。

更に、驚異はそれだけではなかった。Javascript文が私にとって相当難しいのである。配列を縦横無尽に使い、かつthis命令を多用しているが故である。これまで学んできたJavascriptは、配列を使ったりthis命令を使うことは部分的にあったものの、全面的に悉く配列とthisで埋め尽くされたJavascriptには馴染んでいないため、Javascript文の解読そのものが出来ないでいるのだ。

従って、学習すると銘打っても現時点ではBuilderで作成されたJavascript文を眺めても皆目分からず、分析どころの話ではない。まず配列とthis命令についてきちんと学習することから始めなければならないのである。(;´д`)トホホ

Tigra Menuを知らなかったとは・・・・(;´д`)トホホ

(ブログパーツと言えるかどうか・・・)
 Tigra Menuの存在を今まで知らなかった。知らなかったその時の流れが恨めしい(爆笑)。
 Tirga Menuは知る人ぞ知るJavascriptのTip集サイト、それも階層メニュー(プルダウン形式、ツリー形式等)の技を満載した多くのツールを無料でダウンロード出来るだけでなく、オンラインで階層メニューが作れてしまう、大変優れたサイトである。
 このサイトの存在をもっと早く知っていれば、おそらくこの間悩んできた階層メニューにおけるちらつき問題に費やした時間は不必要だったはずだ。

 これからダウンロードした階層メニュー作成ツールを使って縦横無尽に階層メニューの奥義を極めてみたいと思っている。

SpyguardをインストしたらPCがおかしくなった!

 リアルタイムでスパイウェアの侵入を監視するソフト=Spywareguard(以下SG)をインストールしたら、PCがおかしくなってしまった。
 具体的には、WindowsXP起動時に、Explorerがread出来ないというエラーメッセージが出るようになり、かつSGが動いているにも拘わらず、システム領域にアイコンが表示されなくなってしまった。しかもWindowsXP終了に要する時間がかなり長くなってしまった。
 あれこれと模索し、まず原因はSGにあると特定し、次にSGそのものを除去するしかないと判断したものの、アンインストールしようと思ったら、「起動中なので削除できない。まずはSGを止めろ」と警告が来て、アンインストール出来ない状態となってしまった。しかも、通知領域にSGのアイコンはないのだ。
 仕方なく、(1)msconfigにてスタートアップリストを表示し、SGをスタートグループから削除し、(2)再起動してから、SGをアンインストールし、(3)三度再起動したところ、やっと先のエラーメッセージが出なくなった。
 インストール当初は問題なく作動していたのだが、Updateした途端におかしくなったので、Updateデータに何か悪意のあるファイルが入っていたのかも知れない。
 いずれにせよ、セキュリティを高めようとしたのに、逆に裏切られてPCがおかしくなり、それを修復するために1時間以上の時間を費やす羽目になったことは、実に恨めしい限りだ。
 もう二度とSGは入れないぞ~~!!!

この続きを読む

これは便利だ───RoboForm

Sleipnir2がネットサーファーを熱くさせている昨今であるが、そのInstall時におまけでRoboFormがインストールされる。

もちろんRoboform単独で入手可能であり、利用も可能である。

RoboFormはパスワード管理, フォーム記入, パスワード生成, 自動ログイン等を可能とする多機能なブラウザプラグインアプリだが、これはこれまでの同様な機能のアプリに較べて、操作性において極めて優れている。(ロボフォームの機能: フォーム記入、自動フォーム記入、フォーム保存

これまでも、IE専用のECOIE2という自動ログインツールや、汎用的なプライベート情報管理ソフトであるIDManagerを使ってきた。しかし前者はIE以外には使えないし、後者は一々登録作業を別に行わなければならなかったし、自動ログインする作業も手間が掛かった。ロボフォームはそれらの全ての欠点を補って余りある機能と操作性を有しているのだ。

知る人ぞ知るRoboFormだった(?)、いや私だけが知らなかったのだろう。何故ならばRoboFormは下に引用(RoboForm本家サイトから)したように、各種の賞を受賞しただけではなく、一般紙やパソコン専門誌で高い評価を得ているし、あのvectorからもダウンロードできるのだから。



30-day Money Back GuaranteeBetter Business Bureau

"「Webサイトへのログインという用途に限れば、最も効率よく使いやすいソフトといってよいのではないだろうか。」 "
ベクター

"最も素晴らしいことは、良くできたプログラムだと言うことだ。"
PCマガジン

"Easy to use and without any hidden spyware... Innovative, lean, useful product."
Wall St Journal

"It Knows All Your Passwords (But Promises Not to Tell)".
NY Times

"The Best of 2003 -- Most Practical Program. I highly recommend it."
CNET Download.com

"Best web enhancement."
People's Choice Award-2004

RoboForm has long been a leader in the field of password management and form filling software.
MorningStar Advisor


なお、vectorの評価(VECTORによる「AI RoboForm PICKUP」記事)は一面的と言わざるを得ない。Webログイン時のメリットしか評価してないが、名前の由来(Form用Robot)からも明らかなように、フォーム記入時(例えばブログ上におけるコメント作成時)にも大いに役立つことをきちんと評価すべきだ。

いずれにせよ、Sleipnir2との同梱によって、RoboForm利用者は急激に増えるに違いない。

またしてもWindowsXPを再インストール!

 またしてもWindowsXPに支障を来した。今度は全く起動しないのだ。
 正確に言うと、スイッチオンの後「設定読み取り中」迄進んだ後、次に表れるべき背景画像が全く表示されず、その先に一向に進まないのだ。
 昨晩、prefechファイルを全て削除したので、これが原因かとも思って見たが、そもそもそれで起動しなくなるのは理屈が通らない。実際半日掛けてWindowsXPが起動する状態に修復・復帰した後に、prefechフォルダを空にしても問題なく、WindowsXPが起動したのだから、この削除は不具合の原因ではなかったことになる。
 では原因はなにか? 何故WindowsXPが起動しなくなってしまったのか?
 その原因は皆目思い当たらない。WindowsXPの設定に影響するような作業は昨晩は何もしなかったからだ。昨晩問題なく起動してアプリを利用し、問題なく終了したのに、今朝スイッチを入れたら、全く起動しなくなってしまった。このことから類推できる原因はだただ一つ───ウィルス感染に他ならない。
 ウィルス定義ファイルは常に最新状態に更新していたというのに、それでも侵入されてしまったとしか考えられない。どんなウィルスだったのか再インストールしてしまった今知るよしもないが、二度と同じ事が起きぬよう対策を打たねばなるまい。
 それは、今度もし同じ事態が起きても、バックアップユーティリティを使って作成したブータブルバックアップDVdから、現在のCドライブ全体を即座に復帰できるようにしておくしかないだろう。

DVD-Rが1枚130円足らず!

 (適当なスレッドテーマがないので「パソコン情報」に投稿)
 昨日ヤマダ電機に行き、DVD-Rが1枚辺り130円足らずで売られていることに驚いた。1円当たり36メガバイトの計算になる。しかもそれはバルク品ではなくTDK製であり、わざわざ日本製とも書いてある。速度も8倍速まで対応しているれっきとした製品だ。
 ほんの2年前にはCD-Rがその程度の値段で売られていたのでなかったか?
 感覚的な判断であるが、フロッピイ1枚が100円の時代から、対FD記録容量3264倍のDVD-Rが130円になるまでに10年は経過していないかもしれない。
 急速な技術革新の威力を目の当たりにした一例と言えよう。

自治体広報もブログ利用

 甲斐市は自治体の広報ツールとしてブログを採用したそうだ。(甲斐市 Blog News 出典:iJAMP時事通信社)
 早速覗いてみた。写真入りで地元の話題が分かる点は評価できるだろうが、ユーザビリティの点から一点だけ苦言を呈したい。それはフォントサイズが小さすぎることだ。
 閲覧者の年代層をどの様に想定しているにせよ、自治体の住民を第一優先に考えるべきだから、当然小さい文字を好む若者もいれば、大きな文字でないと苦痛を感じるお年寄りもいる。
 この場合どちらを優先させるべきかは自ずと明らかだ。「大は小を兼ねる」がその逆ではない。
 折角の試みがフォントサイズの小ささ故に「馴染めない」と離反されては残念だろう。
 なお、トラックバックを受け入れない仕様としている点は理解できなくもない。スパムトラックバックが登場し増えているようだから、この対応は無難だろう。

この続きを読む

Javascript関連サイトリスト

 Javascript関連サイトリスト(since 2005/07/25)


総合的サイト
小技特集サイト

この階層メニューは或るサイトからの転用である。元にしたサイトではちらつきはないのだが、我がサイトではちらつきが出てしまう。別の階層メニューでもちらつきでさんざん悩まされたが、「ちらつき問題」が常につきまとっている!


結局ちらつき防止対策としてタイマーをセットせざるを得なかった。出来ればタイマーなんて面倒なことはしたくなかったのであるが、万策尽きた感があり、最後の最後の手段として採用せざるを得なかった。

しかし、元にしたサイトでは、タイマーなんて使わないでちらつきが発生していないのに、どうしてであろうか?

tableのセル内にdivタグを配置すればちらつかない、というような「文法」があるのであろうか?!?!

詳しい方のお知恵を拝借したい次第である。


そんなわけでリストを作成するどころではなく、またしても階層メニューで行き詰まってしまっているのであった・・・。

それに敢えてリストを壱から作らなくても、こんなにすばらしいサイト(「J.O.Y.」)があるのだから、今更不必要かも知れない───と落ち込んでいるのであった。

 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が開きます。