サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
大そうじへの備え
www.keynavi.net
ページ全体にイベントハンドラを設定することを考えます。 HTMLで記述する場合、<body onload="処理内容"> などと <body>タグ中に書くのが普通です。 一方、JavaScriptで行う場合 onLoadでは「window.onload=ハンドラ関数;」 とするのがもっとも一般的です。 ちょっと混乱しやすいのですが マウスが押された場合には「window」ではなく「document」を使い 「document.onmousedown=...」とします。 これらはイベントハンドラの登録：kl_addhandler() を使うと 「kl_addhandler(window,"onload",ハンドラ関数)」 「kl_addhandler(document,"onmousedown",ハンドラ関数)」となります。 以下に よく使われるイベントハンドラとその一般的な登録先を列挙しま
補足：Ctrl-I の利用 KeyNaviではデフォルトで「Ctrl-I/K/J/L」に「上下左右フォーカス移動」を 割当てています。「Ctrl-I」で「お気に入り」を表示したい場合は 「Ctrl-／」で「KeyNavi設定窓」を表示し フォーカスのキー割当で 当該部のチェックを外して下さい。 指定内容はクッキーに保存され次回アクセス時にも指定が反映されます。 再実行は不要です。
Webブラウザを業務システムに採用するケースが増えています。 しかし従来のC/S方式に比べると 「入力がメンドウ」「結果表示まで待たされる」「表現力が低い」 などの問題があります。 KeyNavi.Netではこれらの問題を解消し、 Webシステムの新しい形を提案しています。
KeyNavi.Net独自の視点から現在のWebがなぜ使いにくいのか考えてみました。 具体的な問題点を挙げ可能なものについてはその解決法を提案しています。
「NS,NN=Netscape Navigator」「IE=Internet Explorer」の略です。 リンクやフォームの各オブジェクトに対し HTMLで「accesskey="キー名"」を指定することにより ショートカットキーを設定できます。 しかしながら この動作はブラウザ毎に異なります。 例えばリンクの場合、 IE4,NS6,7では該当ページへ移動、IE5,5.5,6.0ではフォーカスのみ設定されます。 一方でフォームのsubmitボタンやresetボタン等では クリックが実行されます。 その結果accesskeyの利用ではブラウザ間、オブジェクト間で動作を揃えられず ユーザが混乱します。 実験＆アクセスキーの動作確認状況 この他に「accesskey」による指定では以下の点に注意する必要があります。
「NS,NN=Netscape Navigator」「IE=Internet Explorer」の略です。
//-------------------------------------- //kl_slx/y() //返り値：スクロール位置(ピクセル値) //-------------------------------------- function kl_slx(){ if(KL_NS4 || KL_NS6) return self.pageXOffset; if(KL_IE4 || KL_OP6) return kl_dbody().scrollLeft; } function kl_sly(){ if(KL_NS4 || KL_NS6) return self.pageYOffset; if(KL_IE4 || KL_OP6) return kl_dbody().scrollTop; } kl_dbody()とは。。。 IE6ではスタイルシートが標準モードの場合 「document.b
//----------------------------- //kl_target(e) //返り値：Focus中のオブジェクト //e：イベントオブジェクト //----------------------------- function kl_target(e){ if(KL_IE4 || KL_OP6) e=event; if(KL_NS4 || KL_NS6){ if(e.target) return e.target; }else{ if(e.srcElement) return e.srcElement; } return 0; }
右のキー割当表のように殆どの操作をキー入力で行えます。 また各リンクにはショートカットが設定されているので利用して下さい。
スタイルシートの指定で「position:fixed」 とするとオブジェクトの位置を固定できます。 スクロールしてもウィンドウ内の指定位置に表示され続けます。 とても重宝する機能なのですがWinIEでサポート外であるため 事実上使用が困難になっています。 一方、 JavaScriptのonScrollハンドラを使い レイヤー位置を固定することもできます。 しかしスクロールするたびにカクカク微小振動する問題が発生します。 フレームの場合はそういった問題がありません。 またフレームを使った場合、ページ移動時のチラツキがある程度 押さえられる点も優れています。 例えばメニューと本文の２つのフレームからなるページを考えます。 本文フレームが別ページに移動してもメニューフレームは そのまま表示されつづけチラツキが起きません。 ページ移動中も一貫して表示され続けます。
指定したウィンドウが閉じられていないか、利用可能かどうか調べるスクリプトです。 「window.open(url)」によって新しくウィンドウを開いた場合、 フレームを利用したページで別のフレームにアクセスしたい場合などに この関数が有効です。 目的のウィンドウが異なるサイトに移動した場合 ウィンドウの内部変数を参照したり設定しようとすると エラーになります。 これはセキュリティ的な配慮からなされるものです。 ウィンドウの位置制御(moveBy/moveTo)、サイズ変更(resizeTo/resizeBy)などの 関数の実行もエラーになります(IE6)。 そこで当該ウィンドウに何か処理をしたい場合、 １．閉じられていないか ２．アクセス可能か の両方を調べます。 アクセス可否を調べるにはアクセスエラーが出るはずのコードを「Try/Catch」文内で 実行し 成功したらアクセスOK、失敗した
一定の時間間隔で何かの関数を繰り返し実行したいというケースでは JavaScriptのタイマー関数が利用されます。 JavaScriptのタイマー機能について 例えば「id=setTimeout("実行文",時間)」で指定時間後に特定の動作をさせられます。 「clearTimeout(id)」で設定したタイマーをクリアします。 無限回実行では「id=setInterval("実行文",時間)」が使え 「clearInterval(id)」で停止します。 setTimeout(),clearTimeout()の問題点 先のタイマー関数には使いにくい面があります。 上記関数に渡す引き数は "実行文"の文字列か関数オブジェクトになるため 「eval("実行文")」の場合と同じくそれらの中で参照する変数は 大域的に定義されている必要があります。 function f(s,msec){ setTim
このページは普段ホームページを作っていて ブラウザのバグや独特？の仕様など、気が付いたことをまとめたものです。 すぐ試せるように できるだけ症状が出るサンプルを載せ、 その回避策についても触れるようにしました。 勘違いしているところ、或いは バグ回避のうまい方法があったらお知らせください :-)。 なお、ブラウザ名で特に指定が無いものはWindows版についての記述です。 バグだけ列挙しても とっつきにくいと思うので バグを避ける 「プログラミング作法」のページを作りたいと思っています。 「NS,NN=Netscape Navigator」「IE=Internet Explorer」「CSS=Cascading Style Sheets(スタイルシート)」の略です。
「IE=Internet Explorer」「NS=Netscape」「MZ=Mozilla」「OP=Opera」の略です。
ホームページをキー入力で便利＆快適に見られるKeyNavi(左図参考)をはじめ 新しいWebの形を提案しています。
KL_IDENTIFY_DONE=0; function kl_identify(){ //複数回呼ばれた場合に同じコードを再実行しないよう対策 if(KL_IDENTIFY_DONE) return; KL_IDENTIFY_DONE=1; //ブラウザを大まかに IE,NS4,NS6,Opera系に分類します while(1){ if(window.opera){ if(document.getElementById){ KL_OP6=1; break; } } else if(document.all){ KL_IE4=1; break; } else if(kl_isns4_raw()){ KL_NS4=1; break; } else if(document.addEventListener){ KL_NS6=1; break; } KL_AVAIL=0; return; } /
定義により 1[pc]=12[pt], 1[pt]=1/72[in], 1[in]=2.54[cm] なので 1[pc]=12[pt]=1/6(0.167)[in]=0.423[cm]=4.23[mm]となります。 また、Windowsでは通常96[dpi]なので16[px]、Macでは72[dpi]なので12[px]と 等しくなります。 Macでは[pt]と[px]が一致します。
JavaScriptの実行でエラーが発生した時に どこでどんなエラーが起きたのか知る必要があります。 以下のような操作をしておくとJavaScriptのエラーを拾えるようになり スクリプトのデバッグに役立ちます。
キーイベントの取得は 処理を行うハンドラ関数を定義し documentオブジェクトに登録することで可能です。 <script language="javascript"><!-- //イベント発生時に実行する関数：一般に返り値が「false」ならブラウザ側の割当て無視。// function my_down(e){ .....; return true/false; } function my_press(e){ .....; return true/false; } function my_up(e){ .....; return true/false; } //Netscape4.xでは下記が必要です。// if(KL_NS4){ document.captureEvents(Event.KEYDOWN); document.captureEvents(Event.KEYPRESS);
このページは普段ホームページを作っていて ブラウザのバグや独特？の仕様、 各ブラウザでの実装の違いなど気が付いたことをまとめたものです。 すぐ試せるように できるだけ症状が出るサンプルを載せ、 その回避方法についても触れるようにしました。 勘違いしているところ、或いは バグ回避のうまい方法があったらお知らせください :-)。 問題点だけ列挙しても とっつきにくいと思うので 「バグや互換性問題を避けるコーディング作法」 のページを作りたいと思っています。
KeyNaviの本体であるJavaScriptコードを開発に利用できます。 ブラウザ判別、キーイベント、レイヤー処理など良く使われる機能が 関数化されており手軽に利用可能です。 一般にJavaScript特有の問題としてブラウザ間互換性が挙げられます。 ユーザが使用するブラウザはInternet Explorer以外にも Netscape, Opera, Mozillaなど様々です。 KeyNaviライブラリは各ブラウザ、各バージョン間の差異を吸収し 開発者に共通のインターフェースを提供します。 これにより現在使用されている殆ど全てのブラウザに対応したスクリプトを ラクに記述できます。 また 各機能が１つのファイルにカプセル化されているため 将来新しいブラウザが登場した場合でも個々のHTMLのUpdateは不要です。 ライブラリファイルのUpdateだけで対応可能なので ページの保守コスト
標準モードの場合、IE6.0,Opera7.0,NS6+の各ブラウザでは テーブルの内部にも多くの属性を継承しますが 互換モードやモードの区別のないブラウザ(IE4-5.5,NS4)では異なります。 互換モード(デフォルト)の場合、IE6.0では font-familyのみ継承するようです。 モードの区別のないIE4-5.5,NS4も同様です。 一方 NS6.1,NS7.0,Opera7.0では color,font-style,font-weight,letter-spacing,line-height のうち幾つかを継承しています。 いずれの場合も互換モード(デフォルト)では テーブル内部にfont-sizeは継承していません(IE3.0以外)。
IE5.5については「if gte IE 5.5」は通るのに「if IE 5.5」が通らないようです。 「if IE 5.5000」などとピリオド以下4桁全て書くと通ります。
Webブラウザを業務システムに使った場合に起こりがちな 「入力が面倒」「応答が遅い」「低表現力」を解消。
ホームページの閲覧には様々なブラウザが使われています。 JavaScriptによる開発では古いバージョンも含め できるだけ多くのブラウザ(＝ユーザ) に対応することが望まれます。 しかしマイナーなブラウザに合わせた結果、 先進的な機能を使えなかったり或いは開発コストが増大するのも困ります。 どこかでうまく線引きしましょう。
次のページ
このページを最初にブックマークしてみませんか？
『Welcome to KeyNavi.Net!』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
