08 | 2008/09 |  10

  1. 無料サーバー

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

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


スポンサーサイト

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

My jQuery Plugin : animated Popup 改訂版

このエントリイの改訂履歴など
  • 初稿:2009/04/19
  • 完結:2009/04/23
  • 第 1 回改訂:2009/04/25 right、bottom 指定をやめ全て left 又は top に統一した。
  • 第 2 回改訂:2009/04/26 画像も表示できるように引数処理を修正した。またポップアップ表示ボックスの色味を自在に操れるように引数を1つ追加した。これらによりこのプラグインの使いやすさが向上した。
  • 第 3 回改訂:背景やボーダーの色が思うように変化しないバグを修正

残念ながら IE ではここで説明するプラグインは動きません。

その理由は IE8 のエラーメッセージに拠れば「 jquery.js のアニメーション関連コードに問題有り 」と表示されるのですが、Firefox、Opera 及び Windows 版 safari で問題なくこのページのアニメーションが表示されるので、エラーメッセージ自体のエラーではないかと思われます。

つまりIE8の標準モードにおけるバグではないかと推測しています。

IE でも動くよう改訂するつもりですが、上のような理由ですので対応策が見つかりません。

ここで言う Animated Popup とは

ポップアップ表示をアニメーションメソッドを使って行うことを意味しています。例えば極小の点から一定の幅と高さを有する表示ボックスをズームポップアップし、それを消すときにはズームアウトするような、そんなポッップアップです。

Windows Vista でウィンドウ開閉時に行われるような、あのようなズームイン/アウトをポップアップ表示/隠蔽にも取り入れてみたいと思い立ち 4月11日頃に作成を開始しました。

何はさておき、その実例を示すことが先決でしょう。

下のボタンをクリックするとあるいはその近傍に、あるいは画面中央に、あるいは画面右下に、あるいは指定してある位置 {left:100px,top:200px} に、ポップアップがズームイン/アウトされます。表示する際のポップアップサイズは順に300、350、400、500px に、またアニメーションに要する時間はそれぞれ 1200、600、1600、2000 ミリ秒に設定してあります。

 クリックした位置の傍にポップアップ表示します。

クリックすると画面の中央にポップアップ表示します。

クリックすると画面の右下にポップアップ表示します。

クリックすると指定してある位置にポップアップ表示します。

クリックすると画面の中央に或るサイトの或る写真をポップアップ表示します。写真出典元は フォトライブラリ です。

▲ToTop

Animation と Easing

Easing は Animation 動作速度を変化させる「加速度メソッド」のことで、元々 Flash ツールである Acrion Script の Tween クラスの加速度メソッドとして誕生したようです。(半可通の知識しか持ち合わせていないので「ようです」としておきます。)

この Easing 関数が jQuery プラグインとして提供されているので、早速それを導入し、このページでは敢えて動きの激しい easeOutElastic を使用しました。本来、文字を表示するには変化の激しい elastic は相応しくないでしょうが、Easing を初めて使用した記念として「激しい」ものを選択してみたのです。

因みに、George Smith 氏により提供されているプラグイン「Easing Plugin」は、10種類あり、各々に3つの効果(easeIn、easeOut、easeInOut)を持たせて Easing 関数が定義されているため、都合 30 種類の easing 関数があります。→ Plugins | jQuery Plugins

その Easing の各々の動きの違いを示したサイトとして興味深いのは、flash ムービーですが easing_demo が実に分かりやすく有益です。これによりそれぞれの Easing がどんな挙動をするのか一目瞭然に理解できます。easing 関数内の代数式がグラフ化されていることも非常に有益です。

そこで、このデモサイトをまねて、このページ上で実現しているアニメーションポップアップに対して 32 種類の Easing 効果を適用するリストボックスを設置してみました。easing_demo に比べて文字表示の場合には各 easing の差異がわかりにくいのですが、まあそれはご愛敬ということで...。

下のリストボックスの説明
  • アニーメーションポップアップの表示位置は 「 画面中央 」 としました。
  • Easing に要する時間はそれぞれの関数の差異が分かり易いように長めに設定しました(2秒)。
  • jquery.js に組み込まれている linear と swing の 2 つの Easing 関数もリストアップしたので都合 32 種類の easing 関数が登録されています。
  • 別の easing 関数を選択する前に表示されているポップアップを隠蔽する必要はありません。自動的に前の表示を消して、新たな表示を行います。
補足:上の リストボックスに係るスクリプトの説明

このページのソースコードを表示すれば分かることですが、jquery.js を使って初めて form を扱ったので、記録を残すために敢えてここに記します。

■アイテムが選択された際の処理を行うスクリプトコード
$("#sel665").change(function(){
 var index = this.selectedIndex,
   selEasing = this.options[index].value,
   txt="これは easing 関数: "+selEasing+" を使って<br />表示/隠蔽するアニメーションポップアップです。";
 $(this).animatedPopup(txt,["c","c"],2000,selEasing,{width:"400px"});
});
html説明
selectタグに id="sel665" と size=10を、最初の option タグに非選択属性 disabled="disabled" を、二番目の option タグに初期値 selected="selected" を設定しました。
Javascript 説明
  • 要点は selectタグの jQuery インスタンスに change イベントを登録することです。
  • まずリストボックスから選択されたアイテムのインデックス番号を変数に代入し、その値を使って options 配列から選択されたアイテムの value 値を取りだし、最後にポップアップ文を構成します。
  • 以上の僅か 3 つの変数を定義するだけで準備は完了。後は適切な引数付きで animatedPopup メソッドを登録するだけです。

以上の簡単なコードによって、リストボックス内の項目が選択されたその瞬間に発生する change イベントにより、イベントハンドラーが起動されて必要な処理を行います。

▲ToTop

作成した Animaeted Popup の仕様

  • 作成した Animaeted Popup は jquery.js のプラグインとして組み込める形式としました。
  • Animaeted Popup の呼び出しは次の書式で行います。jQuery(expr) はjQueryインスタンスならば何でも構いません。
    jQuery(expr).animatedPopup(contents, layout, duration, easing, options, options2);
  • <引数の説明>
     * contents: Strings in Animated Popup
     * layout: displaying position of Animated Popup
     * 	       text,ex. ["c","t"] (It means :left="center",top="top")
     *         or object,ex.{left:"100px",top:"200px"}
     *         or {left:"center",top:"100px"}
     * duration: durating time of animation(msec), ex.500 or "slow" etc.
     * easing: easing name (text), ex."easeInOutQuad","easeOutBounce",..32通りの指定が可能
     * 但し 32 種類を利用するには Easing Plugin を組み込む必要がある。
     * このサイトで利用している jquery.js には Easing Plugin を組み込み済みです。
     * options: Add CSS Object to Popup DIV, ex.{width:"400px",・・・}
     * options2: Add CSS Object to Popup DIV's CLOSE Bar, ex.{background:"midnightblue",・・・}
     * 全ての引数にはデフォルト値が設置済みなので複数の任意の引数が省略されても誤動作しません。
     * 何も引数がない場合、その旨を表示する animatedPopup を画面中央に表示します。

▲ToTop

作成した Animaeted Popup の Javascript コード

コードは長めになりました。説明を含めて 190 行あります。

ここでその全てを掲載しブロックごとに解説を加えることとします。

animatedPopup プラグインの全コード
  1:(function($){
  2:$.fn.extend({
  3:animatedPopup: function(contents,layout,duration,easing,options,options2){
  4:/*
  5: * <Example of Implementation>
  6: * jQuery("p").animatedPopup("And I love you so. Yesterday. Yellow Submarine.",
  7: *   ["c","b"],800,"swing",{width:"300px"})
  8: *
  9: * <arguments explanation >
 10: * contents: Strings in Animated Popup
 11: * layout: displaying position of Animated Popup
 12: *      text,ex. ["c","t"] (It means :left="center",top="top")
 13: *      or object,ex.{left:"100px",top:"200px"}
 14: *      or {"left":"center","top":"100px"}
 15: * duration: durating time of animation(msec), ex.500 or "slow" etc.
 16: * easing: easing name (text), ex."easeInOutQuad","easeOutBounce",...
 17: * options: Add CSS Object to Popup DIV, ex.{"width":"400px",・・・}
 18: * options2: Add CSS Object to Popup DIV's Title DIV, ex.{background:"midnightblue",・・・}
 19: *
 20: * <history>
 21: * released 2009/4/22 ver0.1
 22: * update 2009/4/25 ver0.2, 2009/4/26 ver0.3
 23: */
 24: var jQInst=$(this), winWH = {width:$(window).width(),height:$(window).height()},
 25:  errFlag,lcr,tcb,xName,yName,m=[],addValue={x:0,y:0},isImg,
 26:  mousePos={left:0,top:0},xCenter=$(window).width()/2,yCenter=$(window).height()/2;
 27:  // CSS 既定値は width 値が contents により変わるので、関数化しインスタンス毎に設定する。
 28: var defaultCSS =function(){
 29:  isImg = contents.match(/.*((<img.+src.+)|(<object.+)|(<embed.+)).*/i);
 30:  return {
 31:   "color":"white","font-weight":"bold","margin":0, "padding":"19px 5px 5px 5px",
 32:   /* 画像の場合ここで width を決めては駄目*/
 33:   "width": (isImg && isImg[1]) ? null : "300px",
 34:   "background-color":"royalblue", "border":"5px plum ridge", "text-align":"center",
 35:   "display":"block","visibility":"visible"
 36:  }
 37: }
 38: /* ポップアップに使用するCSS値を設定する*/
 39: var popupCSS = $.extend(true,defaultCSS(),options || {});
 40: /* closeBar CSS値も容易に変更できるように設定する */
 41: var closeBarCSS = function(){return $.extend(true,{
 42:  "position":"absolute","zIndex":"1001","text-align":"center",
 43:  "opacity":0.75,"top":0,"left":0,"width":"100%","cursor":"pointer",
 44:  "font-size":"small","lineHeight":"1.2em","background-color":"midnightblue"
 45: },options2 || {})};
 46:
 47: // bind onmousemove event on document
 48: mousePos.oX = 4; mousePos.oY = 16; //マウスカーソルからの離隔距離
 49: $(window).mousemove(function(e){
 50:  mousePos.left = (jQuery.browser.msie ? window.event.clientX - document.body.clientLeft : e.clientX) + mousePos.oX;
 51:  mousePos.top = (jQuery.browser.msie ? window.event.clientY - document.body.clientTop : e.clientY) + mousePos.oY;
 52: });
 53:
 54: // error 処理関数(後に拡張できるように関数にしておく)
 55: var errFunc = function(){ errFlag=true; return function(){return}}
 56:
 57: // animatedPopup の配置位置算出関数
 58: var getPos = function(layout){
 59:  if (layout && layout.constructor!= Object && layout.constructor!= Array ){
 60:   alert("配置は2つのテキスト:例 \"Center\",\"Top\" 、または\nオブジェクト形式:例 {left:\"10px\",top:\"100px\"} で指定してください。");
 61:   errFunc()();
 62:  }
 63:  var setPos = layout;
 64:  if (setPos.constructor==Array) {
 65:   var chk1 = /^((l.*)|(c.*)|(r.*))/.exec(setPos[0].toLowerCase());
 66:   var chk2 = /^((t.*)|(c.*)|(b.*))/.exec(setPos[1].toLowerCase());
 67:   if (chk1 && chk2){
 68:    lcr = chk1[2] && "left" || chk1[3] && "center" || chk1[4] && "right";
 69:    tcb = chk2[2] && "top" || chk2[3] && "center" || chk2[4] && "bottom";
 70:    xName = (lcr!=="right") ? "left" : "right";
 71:    yName = (tcb!=="bottom") ? "top" : "bottom";
 72:   } else {
 73:    if (!chk1 && !chk2) {
 74:     alert("左右上下 \""+ setPos[0] +" , "+ setPos[1] +"\" 共に指定が間違っています。\nやり直してください。");
 75:    } else if (!chk1 && chk2){
 76:     alert("左右の指定 \""+ setPos[0] +"\" が間違っています。\nやり直してください。");
 77:    } else if (chk1 && !chk2 ){
 78:     alert("上下の指定 \""+ setPos[1] +"\" が間違っています。\nやり直してください。");
 79:    }
 80:     errFunc()();
 81:   }
 82:  } else if (typeof setPos!=="string" && setPos.constructor==Object) {
 83:   for (name in setPos){
 84:    name=name.toLowerCase();
 85:    if (name=="left" || name=="right") {xName = name;lcr=name}
 86:    if (name=="top" || name=="bottom") {yName = name;tcb=name}
 87:   }
 88:   if (xName==null || yName==null){
 89:    alert("left、right、top、bottom 以外の\n指定は無効です。やり直してください。");
 90:    errFunc()();
 91:   }
 92:   // 位置指定値が "left" のように文字で為されたときの対応
 93:   if (!setPos[xName].match(/\d+/))
 94:    m[0] = setPos[xName].toLowerCase().match(/^(left|center|right)$/);
 95:   if (!setPos[yName].match(/\d+/))
 96:    m[1] = setPos[yName].toLowerCase().match(/^(top|center|bottom)$/);
 97:   if (!setPos[xName].match(/\d+/) && m[0]===null || !setPos[yName].match(/\d+/) && m[1]==null){
 98:    alert("配置指定値が間違っています。\nやり直してください。");
 99:    errFunc()();
100:   }
101:   addValue={
102:    x :( m[0] ? ((m[0]==="center") ? xCenter :0) : parseInt(setPos[xName])),
103:    y :( m[1] ? ((m[1]==="center") ? yCenter :0) : parseInt(setPos[yName]))
104:   };
105:  } else if(layout){
106:   alert("配置指定が無効です。やり直してください。"); errFunc()();
107:  }
108:  var obj={};
109:  obj[xName]= ((lcr==="center") ? xCenter : 0) + addValue.x;
110:  obj[yName]= ((tcb==="center") ? yCenter : 0) + addValue.y;
111:  return obj;
112: };
113:
114:$(function(){
115: // popup 表示用の div 要素タグの作成
116: if (!$("#dispElem").size()) {
117:  $("<div id='dispElem'></div>").css({
118:   position:"absolute",display:"none",zIndex:"1000"
119:  }).appendTo(document.body);
120: }
121: var disp=$("#dispElem");
122:
123: // Popup 隠蔽用×タグの作成
124: if (!$("#xMark").size()){
125:  $("<div id='xMark'>CLOSE</div>").append("<div style='width:13px;float:right;margin-top:-1em;'>×</div>").appendTo(disp);
126: }
127: var xMark = $("#xMark").css(closeBarCSS());
128:
129: // STEP1:*************** 表示前に popup エレメントの高さを測定する
130: var getElemWH= function(){ // 表示 popup サイズ算定
131:  // popup 表示前に横幅と文字数に応じた高さを計測する(非表示描画で測定)
132:  contents = contents || "ポップアップする内容が指定されていません。<br />やり直してください。";
133:  disp.html(contents).css($.extend(true,popupCSS,{"visibility":"hidden","height":null}));
134:  if(isImg && isImg[1]) disp.css("width",null);
135:  return {
136:   iW: popupCSS.width=(options && parseInt(options.width) || defaultCSS().width && parseInt(defaultCSS().width) || disp.width()),
137:   iH: popupCSS.height=disp.height(),
138:   oW: disp.outerWidth(),oH: disp.outerHeight()
139:  }
140: }
141:
142:  // 幅/高さが極小の要素 css 値を設定する。これにより拡張/縮小を演出する。
143:  // またここで初めてスクロールされていた場合の変動値を配置px値に追加する。
144: var shrinkCSS=function(){
145:  var scrLeft=$(window).scrollLeft(),scrTop=$(window).scrollTop(),
146:   obj={"width":"1px", "height":"1px", "border":"0px", "padding":"0px","margin":"0px"};
147:  if (!layout){
148:   obj.left=mousePos.left+scrLeft+"px";
149:   obj.top=mousePos.top+scrTop+"px";
150:  } else {
151:   var pos = getPos(layout);
152:   if (errFlag) return;
153:   obj.left=((xName=="left")-(xName=="right"))*pos[xName]+
154:    (xName=="right")*winWH.width + scrLeft+"px";
155:   obj.top=((yName=="top")-(yName=="bottom"))*pos[yName]+
156:    (yName=="bottom")*winWH.height + scrTop+"px";
157:  }
158:  return obj;
159: }
160:
161: var hideElem = function(e){ // popup 要素をアニメーション隠蔽する
162:  disp.empty().animate(shrinkCSS(),{queue:false,duration:duration,easing:easing});
163: }
164: var animaElem = function(e){
165:  $(":animated").queue('fx',[]).stop(); // 登録済みのアニメを全て削除停止する
166:  var doneShrink = shrinkCSS(); // この関数内で1回だけ起動する
167:  if (errFlag) return;
168:  // STEP2:***************
169:  var elemWH = getElemWH(); //エレメントサイズ計測実行
170:  if (!layout){ // 画面からはみ出さないように CSS 値を調整
171:   if (winWH.width < mousePos.left+elemWH.oW)
172:    popupCSS.left = winWH.width + $(window).scrollLeft() - elemWH.oW +"px";
173:   if (winWH.height < mousePos.top+elemWH.oH)
174:    popupCSS.top =  winWH.height + $(window).scrollTop() - elemWH.oH +"px";
175:  } else { // popup をセンター配置する場合の CSS 設定
176:   popupCSS.left = parseInt(doneShrink.left) -
177:    ((lcr==="center" || m[0] && m[0]==="center") ? Math.round(elemWH.oW/2) : (xName==="right") ? Math.round(elemWH.oW) :0) +"px";
178:   popupCSS.top = parseInt(doneShrink.top) -
179:    ((tcb==="center" || m[1] && m[1]==="center") ? Math.round(elemWH.oH/2) : (tcb==="bottom") ? Math.round(elemWH.oH) :0) +"px";
180:  }
181:
182:  // STEP3:*************** 極小要素を指定されたアニメーション起動位置に配置
183:  // dispElem の幅と高さを1pxにして所定位置に配置する(但し非表示描画)
184:  disp.empty().css(doneShrink);
185:  // STEP4:*************** 表示アニメーション
186:  disp.html(contents).append(xMark.css(closeBarCSS()))
187:   .css({visibility: "visible",display:"block"})
188:   .animate(popupCSS,{queue:false,duration:duration||"slow",easing:easing||"swing"});
189:  // STEP5:*************** × クリック時に隠蔽アニメーションを起動する。
190:  // ここで隠蔽関数を起動するようにしておかないと、複数回ボタンがクリックされた
191:  // 場合に隠蔽操作ができなくなる。理由は未解明。
192:  xMark.click(hideElem);
193: }
194: jQInst.click( errFlag ? function(){errFlag=false; $(this).unbind("click");} : animaElem );
195:}); // End of "DOMReady function"
196:} // End of "animatedAlert function"
197:}); // End of "Extend function"
198:})(jQuery);

▲ToTop

animatedPopup プラグインの解説

その意味や役割から幾つかのブロックに分けて解説します。

第Ⅰブロック(#1-22)

まず最初のブロックは、このメソッドの引数を定義しそれらを解説している部分です。

無名関数による起動と DOMReady 関数の利用(#1、#100)

このプラグインでは、一般的方法に倣って全体を無名関数で括り、即実行するようにしました。またポップアップ表示やポップアップ消去のための絶対配置 div 要素を追加し、かつそれらに様々なメソッドを適用する必要があることから、必要最小限の範囲を DOMReady function で括りました。

$.fn.extend クラスメソッドの利用(#2)

これにより、jQuery インスタンスのメソッドとして animatedPopup 関数を登録します。

animatedPopup 関数の引数(#3-18)

引数は6つあります。第一引数はポップアップボックス内に表示する文字列で、第2引数 layout は様々な方法でポップアップ位置を指定できるよう工夫し、第2引数を指定しない場合には、起動元 jQuery インスタンスが指し示す要素の近傍にポップアップするように設計しました。

第5及び第6引数も工夫しました。extend メソッドの2つめの使い方、つまり「 オブジェクト拡張 」を利用して、popup 要素のデフォルトCSS を設定しておくと共に、options で自在にそれを変更できるようにしました。幅や色、ボーダーの色と幅等々気分自由に変更することが出来るようにすることが目的であり、それを達成しました。

なお、この方法は jquery.js の Ajax ブロックで採用されていますのでそれを参考に考案しました。

▲ToTop

第Ⅱブロック(#24-45)

このブロックは、ローカル変数を定義している部分です。

■変数定義部分(再掲)
 24: var jQInst=$(this), winWH = {width:$(window).width(),height:$(window).height()},
 25:  errFlag,lcr,tcb,xName,yName,m=[],addValue={x:0,y:0},isImg,
 26:  mousePos={left:0,top:0},xCenter=$(window).width()/2,yCenter=$(window).height()/2;
 27:  // CSS 既定値は width 値が contents により変わるので、関数化した。
 28: var defaultCSS =function(){
 29:  isImg = contents.match(/.*((<img.+src.+)|(<object.+)|(<embed.+)|(<iframe.+)).*/i);
 30:  return {
 31:   "color":"white","font-weight":"bold","margin":0, "padding":"19px 5px 5px 5px",
 32:   /* 画像の場合ここで width を決めては駄目*/
 33:   "width": (isImg && isImg[1]) ? null : "300px",
 34:   "background-color":"royalblue", "border":"5px plum ridge", "text-align":"center",
 35:   "display":"block","visibility":"visible"
 36:  }
 37: }
 38: /* ポップアップに使用するCSS値を設定する*/
 39: var popupCSS = $.extend(true,defaultCSS(),options || {});
 40: /* closeBar CSS値も容易に変更できるように設定する */
 41: var closeBarCSS = function(){return $.extend(true,{
 42:  "position":"absolute","zIndex":"1001","text-align":"center",
 43:  "opacity":0.75,"top":0,"left":0,"width":"100%","cursor":"pointer",
 44:  "font-size":"small","lineHeight":"1.2em","background-color":"midnightblue"
 45: },options2 || {})};
jQuery インスタンスの取得(#24)

まず最初にこのプラグインの呼び出し元となる jQuery インスタンスを取得します。

DOMReady 関数内で jQuery インスタンスを呼び出そうとしたのですが、関数内では this は window オブジェクトを参照してしまうため、前もってここで取得しておくことにしました。

表示中の window の幅と高さの取得(#24)

これは jquery.js で定義されているクロスブラウザな便利なメソッドをそのまま活用しました。

これらの値を取得する意味は、画面の中央や左や右にピタリと寄せて配置する場合に利用するためです。

ポップアップ窓のデフォルト CSS 設定(#28-37)

ボーダーやパディング、そして色と背景色──これらの初期値を定めておかないとその都度思案し確定し指定しなければなりません。これはいかにも面倒なので既定値を設定しました。options で特に指定しなければ既定値が適用された popup 窓が表示されるわけです。

実は画像や動画にも対応させるために、最終段階でこのブロックを大きく改変しました。

#29 では正規表現を利用して img タグ、object タグ、embed タグ、あるいは iframe タグ文字列が第一引数 contents に含まれるかどうかをチェックします。そしてそれらのいずれかが含まれる場合には、デフォルト値としての画像サイズを設定しないこととしました。(#33)

これは引用先のCSS設定を反映する場合があったので、敢えて width 値を定めずにおいて、引用先サイトの padding 設定値なども反映した outerWidth 値を取得するためです。

実際に表示するポップアップ窓の CSS 値の指定(#38-39)

これには extend メソッドの2つめの機能である"ボブジェクト拡張"を利用しました。

optionsで任意の CSS 値を与えれば、デフォルトCSSを上書きしてユーザーの要望通りの表現を実現することが出来ます。また ||{} により options が指定されなかった場合にデフォルト値を利用するように工夫しました。

ポップアップ窓上辺の CLOSE バー CSS 値の指定(#40-45)

これも extend メソッドの"ボブジェクト拡張"を利用しました。

options2で任意の CSS 値を与えれば、デフォルト値を上書きしてユーザーの要望通りの表現を実現することが出来ます。また ||{} により options2 が指定されなかった場合にデフォルト値を利用するように工夫しました。

その他の変数(#25-27)

重要な役割を果たすローカル変数をここで定義しました。

addValue は配置位置がピクセル指定された場合のそのピクセル値を格納します。

mousePos はイベント発生要素の近傍にポップアップを配置する場合に必要となるマウスカーソルの現在値を所得するための変数です。

xCenter、yCenter は画面中央に配置するために必要な値で、それぞれ横方向の画面中央位置、縦方向の画面中央位置を取得します。

▲ToTop

第Ⅲブロック:マウス move イベントの登録とエラー対応(#4752)

第2引数 layout を指定しない場合に、マウスカーソル近傍にポップアップさせるためには、マウスの動きを常に Javascriptが 「監視」 しその位置を取得していなければなりません。そのためのイベント登録を行う部分です。これにより document の任意の箇所においてマウスカーソルの動きを常駐監視し、その位置を取得することになります。

 47: // bind onmousemove event on document
 48: mousePos.oX = 4; mousePos.oY = 16; //マウスカーソルからの離隔距離
 49: $(window).mousemove(function(e){
 50:  mousePos.left = (jQuery.browser.msie ? window.event.clientX - document.body.clientLeft : e.clientX) + mousePos.oX;
 51:  mousePos.top = (jQuery.browser.msie ? window.event.clientY - document.body.clientTop : e.clientY) + mousePos.oY;
 52: });
 53:
 54: // error 処理関数
 55: var errFunc = function(){ errFlag=true; return function(){return}}

ここでも IE が、IE だけが特殊な方法を採用しており、そのために面妖な設定をしなければならないのはユーザーにとって不幸なことです。早く IE のユーザー比率が低下することを願ってやみません。IE8 の登場によりその願いはまた叶うことなく先送りされてしまいましたが、中長期的には IE 固有の仕様は消え去る運命にあることは間違いないでしょう。

実際、後のエントリイで触れましたが、IE8 では少なくともスタイル設定に関しては Web 標準準拠に切り替わりました。これは 1 社だけで頑迷に固執し続けてきた奢りが、10年来のブラウザ戦争の中でやっと崩れ去ったことを意味しており、記念すべき歴史的事件と言って差し支えないでしょう。

#54 のエラー対応は「関数を返値とする」特殊な関数を利用します。これにより返値は return 値を有する関数となるので、errFunc()() のようにして、返値である関数を呼び出し先で実行することによりトップレベルにおいて return 値を返すことが可能となります。

ここに最初の括弧は errFunc 関数を実行するため、2つめの括弧は errFunc 関数の返値としての関数を実行するためです。#61 など随所で活用しています。

▲ToTop

第Ⅳブロック:ポップアップ配置位置の設定メソッド(#57-112)

このブロックはたった1つのメソッド登録ですが長大になりました。しかし、様々な指定方法に対応するために必要不可欠な部分であり、長くなってしまったのはエラー処理をふんだんに盛り込んだためでもあります。

#59-62 は最初のエラー処理です。

不適切な layout 指定があった場合の警告表示とコード進行停止を指定しています。

#64-82 は layout が配列だった場合の処理です。

#65-72 で、left、le あるいは l だけでも受容するように指定文字を簡略化できるように工夫し、所定の文字が与えられた場合には、それらを left、center、right、top、bottom の文字列に変換しています。

lcr には left、center、または right の文字が入力され、tcb には top、center、または bottom が代入されます。

また、xName には left か right が、yName には top か bottom が代入されます。

#73-81 は配列指定が適切ではなかった場合のエラー処理です。

#82-107 は layout がオブジェクト指定された場合の処理です。

#83-87では layout オブジェクトを走査して、配置指定に係る定義値を取得し、変数に代入します。捜査の結果必要な文字がなければ #88-91 でエラー処理します。

#92-100 は 配置指定が px 値ではなく "center" などの文字列で行われた場合の処理です。

#93-97 で配列 m に横方向と縦方向の配置指定文字列を代入し、layout が適切な指定でなければ、#97-100 でエラー処理します。

#101-107 では縦横方向の配置指定値を取得します。

二項演算子を活用して、センター配置か否か、及び px 指定値がある場合の2つのケースから値を取得します。

エラー発生時には空オブジェクトを返すようにしました。

#108-110 ではここ迄の処理で確定した配置用変数を活用して CSS 値を設定します。

センター配置の場合のみ画面中央位置を取得し、その他は指定されていればピクセル値を代入します。

▲ToTop

第Ⅴブロック:ポップアップ用 div 要素の作成(#111-134)

ブラウザにとってポップアップ用要素が用意できなければ何も始められないため、これ以降は DOMReady 関数で括ります。

popup 表示用の div 要素タグの作成(#115-120)

2回目以降の animatedPopup 起動時に dispElem が重複設置されないように 116 行でこのノードの存在確認を行います。もし存在すれば、改めて変数 disp に当該ノードを参照する jQuery インスタンスを登録します。

存在しない場合には、タグ要素を CSS 設定値を含めて作成し、その後に jQuery インスタンスを作成し変数に代入します。

この CSS 設定では絶対配置、非表示、レイヤー順を指定し、ポップアップを自在に配置できるように、また body 部に追加した時点ではそれが表示されないよう準備します。

popup 隠蔽用×印タグの作成(#123-127)

ポップアップ用 div 要素の右上にこのポップアップを隠蔽するためのバツ印を用意しました。ここでも二重登録しないようにこの要素の存在確認を行います。

更に×印だけではマウスカーソルをその位置にフィットする手間が面倒なので、隠蔽クリックを受け入れる箇所を点から線に拡張して、タイトルバー形式にしました。

▲ToTop

第Ⅵブロック:アニメーション用の諸関数定義(#129-193)

ここ迄でアニメーションポップアップのための準備が終わりました。愈々、動きのあるポップアップ表示や隠蔽操作のための関数を定義します。

ポップアップする要素の高さのサイズを測定する getElemWH 関数

まず第一引数 contents が未指定の場合の対応を 132 行で行いました。未指定の場合には所定の文章( || の右側の文章 )を用意しておき、これを animetedPopup 関数を使ってポップアップします。

文字列をポップアップする場合特に、その要素サイズを「表示前に」如何にブラウザに知らせるかが課題となります。文字列の文字数が固定されていても、文字の横幅は一定ではないので内容によってはサイズは変わりますし、一般にポップアップ表示を行う文字列は長さは不定・可変です。そのためブラウザは、幅が指定されていなければ表示領域一杯の幅が指定されたものと見なし、或いは要素の幅が指定されている場合にはその幅で要素を表示しますが、ブラウザはこれらのいずれの場合においても、要素表示前にはその要素の高さを認識しません。

別のエントリイで不定型ボックスサイズを表示する前にブラウザに認識させる方法について詳細に触れましたが、このプラグインで採用した方法は、自前で考案した透明化してサイズを測定する方法ではなく、jquery.js で利用されている visibility 属性を利用する方法を採用しました。

jquery.js で採用している表示前サイズ計測方法は、1. position : absolute、2. display : block、3. visibility : hidden とすることにより、「絶対配置のブロック表示状態にしてそれを表示させない」状態を作るものです。(jquery.js: css 関数内の #773 で呼び出される #735-748 の swap 関数)

なお、このプラグインで実際に必要となるのは outerHeight と innerHeight なのですが、この際無意味ですが4つのサイズを測定しておくようにしました(苦笑)。

またinnerHeight については、代入式を iH のプロパティ値とすることにより、同時に 2 つのプロパティに値を取得させました。

ポップアップボックスの拡張/縮小を演出する shrinkCSS 関数

アニメーションを演出するために幅と高さが極小のスタイル値を設定します。これによりアニメーションの始点と終点の位置と要素の表示状態を取得します。

またアニメーションの始点/終点を取得するためには、縦横のスクロール状態を Javascript インタープリタに認識させなければなりませんから、この関数内でスクロール値を取得します(#145)。

後述するように、クリック時のイベントハンドラー内から、shrinkCSS 関数を呼び出して、そのときのスクロール値を取得します。

次にこの関数内から #151 で getPos 関数を呼び出していますが、これにより画面内の左右上下中心のどの位置に配置するか、あるいはマウスカーソルの近傍に配置するかを確定します。

エラーフラグが立っている場合にはコード進行を止めます。(#147)

#153-156で right や bottom 指定された場合に left や top に変換しています。

right / bottom 指定された値をleft / top に変換する計算式は、最後の最後まで苦労を重ねました。getPos 関数からの戻り値は、right / bottom 指定のママですが、#153-156 においてこれらを left / top に変換します。この結果 shrinkCSS 関数からの戻り値は left / top のみとなります。

popup 要素をアニメーション隠蔽する hideElem 関数

これはいわば逆アニメーションで、animaElem 関数で表示したポップアップを縮小しながら隠蔽します。最初にコンテンツを削除してから shrinkCSS 関数をよびだし、かつこのアニメーションを待ち行列に登録しないよう queue 値を false にします。

なお、shrinkCSS 関数でエラーが発生する可能性がありますが、hideElem 関数は、必ずanimaElem 関数が走行した後にしか起動されず、animaElem 関数内において shrinkCSS 関数にエラーが発生した場合の処理は記述されています。エラー発生時には hideElem 関数呼び出しまで到達しませんので、当該関数ではエラー処理を必要としません。

アニメーションポップアップ表示を行う animaElem 関数

ここでは次のような様々な処理を行っています。1.登録アニメーションの削除と停止(#165)、2. この関数内で一回だけ shrinkCSS 関数を呼び出し、結果を変数に記録(#166)、この返値が空の場合の処理(#167)3.画面からポップアップをはみ出させない処理(#170-174)、4.画面センターに配置する場合、あるいは right / bottom が指定された場合の、ポップアップサイズと表示位置の調整(#176-180)、4.アニメーションの始点設定(#184)、5.アニメーション表示(#186-188)(ここでも隠蔽処理同様に待ち行列には登録しません。)、そして 6.ポップアップ窓の隠蔽ハンドラー呼び出しです(#190-192)。

ここでの要点は以下の点です。

  • ポップアップ要素を画面外にはみ出させない処理のために必要となる要因は、画面サイズ、スクロール値及びポップアップ要素のサイズです。
  • アニメーション待ち行列の扱いは、全てのアニメーションを非登録としました。当然ですが登録してしまうと、二度目以降の animatedPopup() 起動時において、最初以降から直前までの以前に利用したアニメーションが順次起動してしまうためです。
  • 179行で、duration や easing が指定されなかった場合のデフォルト値を設定しました。
  • ポップアップの隠蔽はクリックイベントを登録して行いますが、表示関数の中から行うようにしました。連続してクリックしてポップアップさせた場合に、クリックしてもそれを消せない場合が発生したためです(原因は不明)。

▲ToTop

第Ⅶブロック:クリックイベントの登録(#190)

最後の処理です。要素タグへのクリックイベント登録では、エラー発生時に登録済みクリックイベントを削除するようにしました。ここで最初にして最後ですが errflag 値を利用します。

イベントハンドラー内で使用した $(this) は click が jQInst のメソッドですから、jQInst を参照します。

スポンサーサイト

Vista 上で標準ユーザーモードで起動する Sleipnir2 の多重起動方法について

それは Vista 固有の問題

Sleipnir2 の多重起動は動画コンテンツを見る場合などに必要となる。さて、XP上でのそれは何ら問題はなかったのだが、Vista 上においてはオプション設定ダイアログ内の多重起動の項がグレイアウトしてしまって操作できない。従って通常にsleipnirを起動した場合には多重起動設定を行うことが出来ない。

そこで検索をかけたところ、多くのブログでこの問題が言及されていることが分かり、更に複数のサイトを見て問題を解決することが出来た。

後のためのメモとして以下にその解決方法をまとめておきたい。

幾つかのサイトから得られた打開策は次の3つである。

  1. 特権レベル 管理者としてこのプログラムを実行する(Vistaで多重起動が設定できません - Fenrir User Community
  2. XP ( Service Pack 2 )互換モードで実行する(どこで調べても分からなかった、vista(32bit)でsleipnir(2.7.2)の多重起動ができないのを自己解決した件。 | kimihiko Tech
  3. \Sleipnir\binフォルダの中に「Sleipnir.MultiInstance」と言うファイルがあること(sleipnirで、同時に複数の窓を開きたい -OKWave

ここに第 1 の方法では sleipnir2.8.2 においては目的を達成できなかった。そのことは第 2 の解決策を記しているブログサイト(kimihiko Tech)でも述べられているとおりだ。

次に第 2 の策を講じてやっと解決することが出来た。但し、第1の方法と第2の方法を同時に履行する限り、という条件付だ。「管理者として」かつ「XP SP2 互換モードで」 sleipnir を走らせるのである。こうすれば多重起動が可能となる。しかし互換モードで走らせている点に僅かながら不満が残る。

更に第 3 の方策であるが、第 2 の策を講じた後に Sleipnir.MultiInstance ファイルの存在を確認したところ確かに存在していた。そこで最終的に次のことを行った。

▲ToTop

Vista 上で標準ユーザーモードで起動する Sleipnir を多重起動する方法

まず XP 互換モードでsleipnirを起動し、多重起動設定を指定してsleipnirを終える。

sleipnirを再起動すれば多重設定が可能となっているので、念のために Sleipnir.MultiInstance 存在していることを確認した上で、sleipnir の XP 互換モード起動設定を解除する。

その後 sleipnir を再起動してからオプション設定ダイアログを見てみると、多重起動設定項目はグレイアウトしてしまうが、オンになった状態でグレイアウトしていることが分かる。つまり、\Sleipnir\binフォルダの中に「Sleipnir.MultiInstance」と言うファイルがあれば、XP互換モードで起動しなくても、一旦設定済みの多重起動は有効になるのだ。

ということならば、別に XP 互換モードで起動してから多重起動を設定し、再び互換モードを解除する必要はないことになる。テキストファイル Sleipnir.MultiInstance を所定のフォルダに保存してから、標準ユーザーモードで Sleipnir2 を起動すればよいのである。

これが Vista 上での Sleipnir2 多重起動の最も簡単な設定方法であろう。

Youtubeなどの動画コンテンツをローカルPCに保存するアプリについて

花盛りの無料動画共有サイト

ほんの数年はIT界では1世代に相当する。

YouTube が登場した頃はアダルトを含む怪しい動画が沢山投稿され、多くのコンテンツそのものがダークであった。同時に著作権問題でも米国で度々話題を浚っていた。それでも、否それ故に、非難の声を上回るユーザーの増加がデファクトスタンダードよろしく、存在感を高めていった。

そのポテンシャルに目を付けた Google 社が買収したことに象徴される如く、その後の youtube はダークな側面を大きく削ぎ落とし、著作権にも一定配慮した装いの元に大きく飛躍したと言えるだろう(例えば「10分間制限」──米動画サイトYouTubeが「10分間制限」、海賊行為撲滅の切り札になるか)。まだグレーまたはダークな著作権に係る問題を内包しつつあるが、今やこの世の春を謳歌している。

動画投稿サイトあるいは動画共有サイトの現状を概観すれば、YouTubeニコニコ動画の有名どころを筆頭に、多数の様々なサイトが鎬を削っている。

国内外の動画投稿サイトはこちら(無料動画共有サイトを徹底比較)で総覧できるが、このサイトに掲載されている動画投稿サイト数は、国内22、海外28、計50サイトにのぼる。

そして当然の如く、これらの多数の動画サイトを縦横に検索するためのサイト(例えば、動画検索サイト Woopie)も登場し、春に一層の彩りを添えている。

更に、「 国内外70サイト、8000万本の動画を一度に検索! 」と銘打っている動画検索ならTAGGY において、「 j-drama 」で検索すると、何と日本のテレビで放映されたドラマを丸ごと視聴し、ダウンロード出来てしまうのには驚く。

それらの"ドラマ丸ごとファイル"は 殆ど動画共有サイト veoh 上のものだ。

この veoh はアメリカにおいて著作権訴訟の被告となり、連邦地裁で勝利した経緯があるようだが( Veoh訴訟の判決がYouTubeその他に意味するもの :2008 年 8 月 28 日)、後に別エントリイで触れる著作権上果たしていかがなものか、と思われる事態が大っぴらに蔓延しているとも言えるし、だからこそ日本政府が動き出さざるを得なくなっていると見ることも出来よう。

▲ToTop

ローカル PC に保存して何度も楽しむために

さて、多数の動画投稿サイトに無数の動画が投稿されているが、多くのユーザーにとっては一度垣間見るだけのコンテンツが大部分であろう。しかし同時に、ローカルPCに保存して何度もみたいコンテンツも存在する。

そこで動画コンテンツを保存するアプリケーションが必要となってくるが、今を時めく動画保存アプリケーションと言えば、Craving Explorer だ(「切望」という名称は作者の意気込みの反映だろう)。

このソフトは Vector の「最新週間総合ダウンロードランキング」で 3 週連続 1 位を獲得している人気ソフトで、そのインターフェースとユーザビリティの良さは他の類似ソフトを大きく引き離している。それこそ「切望」されたアプリケーションと言っても過言ではないだろう。

WinBiulder を使ってVistaPE を作る(1)

折角だから VistaPE を作ってみたい。

CD ブータブルな Vista を作ってみようと思い立った。それは過去に BartPE 作成にチャレンジし、実際にそれを職場で使ってみて重宝したためであり、また BartPE は卒業した感があるので、次のチャレンジターゲットとして興味を抱いたからでもある。

PC-Japan に一年以上前からしばしば登場して来た Windows AIK + WinBuilder → VistaPE の存在は、Vista マシンを導入する前の XP 使用時代においても知っていた。故にチャレンジしようかという思いはあったのだが、実際の必要性が薄い割には割ける時間がなかなか確保できないため、終ぞ実行には至らなかった。

しかし、8月中旬に Vista マシンを新規に導入し、その設定が一段落した今、次のチャレンジとして VistaPE をターゲットにしてみたい、との思いに至ったである。

実は Vista マシンには、Acronis True Image Home 11 をインストールしているので、My PC のために自家製リカバリ CD を必要とする訳ではない。VistaPE は今の環境下では不必要である。にも拘わらず VistaPE 作成にチャレンジするのは、偏にその甲斐があると思うからである。

▲ToTop

PC-Japan では最小限の機能に絞り込んだ Vista PE 作成にしか触れていないが・・・

関連WEBサイトを探索したところ、流石に BartPE に比して関連サイト数は圧倒的に少ないが、いくつか参考になるものがあった。そしてそれは最小限 VistaPE ではなく、一般的というか普通に組み込むべきアプリを想定したものだ。そこでそれ( VistaPEを作ってみよう )を参考にして、My VistaPE を作ってみた。

VirtualPC 2007 で走行させた My VistaPE

試しということもあり、さしあたり Vista DVD からではなく敢えて Windows AIK を使って作成してみた。それ故に IE も日本語も組み込めなかったが、一作目として作成した VistaPE の、Virtual PC 2007 上での起動画像は以下の通りとなった。

MyVistaPE 起動画面 in VirtualPC2007

▲ToTop



・・・・・

IE8 ベータ2 導入

IE7の、余りの javascript 実行速度の遅さに嫌気がさしていた

数々の書籍でも指摘されているが、IE7は Firefox3 や Opera9、safari3 などの「モダンブラウザ」に比べて、Javascript 実行速度が余りにも遅すぎる。それは数倍の時間を要するといって良いだろう。

そのためここ半年くらい Firefox をベースにスクリプトの実行テストを行うようになっていたし、Webサーフィンも trident エンジンの sleipnir ではなく、また Gecko エンジンに切り替えたsleipnirでもなく、Firefox で行うようになってきていた。

そこに IE8ベータ版が登場し、これまでの遅い Javascript 実行速度の改善が図られたことを知った。ベータ1の段階では不具合が色々あったようなので、IE8への切り替えは控えたが、最近になってベータ2が出たことを契機に、IE8ベータ版に切り替えてみた。

その結果確かに Javascript 実行速度は改善され、それほど他のブラウザに比して遅いとは感じないほどまでになった。

しかしそれでも尚、IE8を直接使う気には到底なれない。何故ならば sleipnir に慣れ親しんでしまった時間の長さが、今更IEに戻ることを許さないのである。

▲ToTop

早くもバグ報告が...

「IE8 Beta 2」で見つかった問題点--公開から一夜明け:ニュース - CNET Japan にあるように、公開された(8/29)翌日にはバグが報告されている。

またマイクロソフト社のサイト( Windows Internet Explorer 8 ベータ 2 リリース ノートします。 )には相当数の「既知の問題点」がリストアップされている。

ベータ版なのだから当然と言えば当然のことなのかもしれない。早急なベータ版からの昇格を見守りたい。

私が経験した範囲でバグと思われる動作として次のことがあげられる。

Sleipnir2 を使用していてファイルをダウンロードした後のことだ。当該ダウンロード頁を閉じようとすると、強制的に sleipnir を終了せざるを得なくなるのである。

IE7使用時にはこのようなことはなかったので、これもバグであろうか?



・・・・・

Windows Vista カスタマイズ(1)───カスタマイズツールあれこれ

XP の場合のカスタマイズツールは、様々な書籍も出ているし、あれこれ言い古された感があるが、Vista のそれについては使っていなかったため、これまで全く気にもとめていなかった。しかし Vista を導入してしまった以上、これからは改めて知見を得なければならない。

そこで、実際に活用した、あるいは活用している Vista カスタマイズツールについて適宜まとめていこうと思う。

尚、すでに Vista カスタマイズに係る多数の書籍が出版されているので、屋上屋を重ねるつもりはなく、あくまでも私にとって意義のあるカスタマイズに限定したいと思う。

すなわち、スタートメニュー・エクスプローラ・userフォルダなどに関する初期的なカスタマイズについては割愛する。

関連ウェブサイト

各論に入る前に、まずは Web サイト情報から。

本日「 Vista カスタマイズ 」でグーグってみると 240 万件のサイトがヒットした。(参考:XP カスタマイズでは271万件がヒット)。ここではそのベスト5を覗いてみた結果をメモっておく。

Windows Vistaの高速化&カスタマイズ
サイトタイトル通り、Vista カスタマイズ情報が満載されている。しかしながら、様々な設定変更方法が羅列されているだけで、便利ツールを使って一遍にまとめてカスタマイズするという発想はない。
Vistaの高速化
その名の通り Vista 高速技 が35本掲載されている。その内容は 1.サイトとかなり重複しているが、一覧で項目が見られるので1.サイトよりも使いやすい。
Windows Vistaを自分好みにカスタマイズする10+の方法 - builder by ZDNet Japan
このサイトの記事は今年1月に書かれたまま更新されていない。このため 4月15日に公開された SP1 には対応していないし、例示されるダイアログは全て英語表示のままとなっている。
このため取っつきにくい面があるが、基礎的なカスタマイズ項目について丁寧に説明しているので参考になる。
viptop @Wiki - Vistaでカスタマイズ
このサイトはカスタマイズというよりも、各種ツール紹介というべきものだ。
Vistaマニアへようこそ!
Q & A サイト。超初心者向けだ。

▲ToTop

カスタマイズツールを使う

さて、上記のカスタマイズ情報サイトは皆、個々のカスタマイズを個々別々に行う説明となっている。あるいは registry を直接弄り、あるいはスタートボタンからコマンドを辿ってなど、その手順は様々だが、とにかく個々の設定変更ををそれぞれバラバラに行う方法を解説している。

しかし、カスタマイズはまとめて行った方が後の管理がしやすいし、また誤操作による誤作動も防ぎやすい。そこでカスタマイズツールの活用が好ましいと考える。

というわけで、以下に、実際に使ってみた Vista カスタマイズツールについてメモを記しておきたい。

MZ Vista Force

まず筆頭に掲載したいカスタマイズツールは MZ Vista Force である。

XP の場合にはマイクロソフト純正のカスタマイズツール:Tweak UI が存在したが Vista の場合TweakVI なる製品があるらしいが無料版は余り多くの機能を有していない。その代替策として活用出来そうなツールがVista Forceである。スキンデザインもすっきりしていて、使い勝手もよい。カスタマイズツールのまず第一にこれを記しておきたい。なお、このソフトの存在はこちらのサイト(「Mz Vista Force」で激重なVistaの動作速度をグーンと向上 :教えて君.net)で知った。

このアプリが素晴らしいのは、その機能の豊富さである。たくさんのカスタマイズ項目があり「 カスタマイズの百貨店 」と言っても過言ではない。パフォーマンス、ネット接続設定最適化、registry最適化、レジストリデータバックアップ、スタートアッププログラム管理、Windowsサービス管理、メモリ最適化等々、カスタマイズ出来る項目が”天こ盛り”なのである。

残念ながら日本語化ツールはないようなので、英語表示だけであるが、helpも充実しているので何とか使っていける、と思っている。

▲ToTop

いじくるつくーる

今や古典的存在といっても良いこのツールは、「窓の手」Vista 対応版が登場しない中で、My Vista PC に最初に導入した made in Japan カスタマイズツールである。

60 項目近い設定変更項目があり、それぞれの項目において詳しい説明書きと多くの設定項目があるので、こちらも「 カスタマイズの百貨店 」といって良いだろう。

Vista Force と比べると CPU 関係のカスタマイズはないが、一方、右クリック項目の追加など是非活用したい項目も結構あるので、併用したいと思う。スキンデザインは全く洗練されておらず、すっきりデフラグと同一の作者による作品であることから、スキンに余り労力を割かない姿勢は共通していると言えよう。いわば”質実剛健な ”ツールだ。

Comfortable PC ( Ver 2.3 )

このソフトの存在は今回初めて知った。Ver 2.2 迄は Vista 非対応だったが、2.3になって管理者モードで実行する場合には Vista でも動くようになったようだ。但し Vista 対応はまだ一部であって、今後のバージョンアップを待たないと多くの事は出来ない仕様だ。

にもかかわらず、カスタマイズ出来る機能はかゆいところに手が届く内容となっているので、前2者のカスタマイズツールと併用して使っている。

▲ToTop

Vista 上での古典的アプリケーションの設定と利用

Vistaエントリイリスト in this Blog

Vista 不完全対応アプリケーションのセッティングと利用のための UAC の設定

結論としてどのような UAC 設定にしたのかといえば、以下の通りである。

  • UACは無効化しない。デフォルトの有効のままとする。
  • その上でローカルセキュリティポリシィを操作して次のようにプロンプト動作をデフォルトから変更する。
    • 管理者承認モードでの管理者に対する昇格時のプロンプト動作:確認を要求しないで昇格する
    • 昇格のプロンプト時にセキュリティで保護されたデスクトップに切り替える:すべての昇格要求は、対話ユーザーのデスクトップで行われます。
  • 替わりに「プロセス監視ツール」を導入する。具体的には「Bill2's Process Manager」( 無効にしたUACの機能はプロセス監視ツールで補う :教えて君.net )をインストールして常駐させ、起動時の属性設定を一度だけ行う。

すなわち、基本的にUACは有効にしたまま、第一に昇格プロンプト表示を停止してしまい、第二に暗転する制限されたデスクトップを使用せず(デスクトップのキャプチャ等が出来なくなるから)、第三に替わりにプロセス監視ツールによってアプリインストール時と起動時に、そのセキュリティを手動で確認して設定するようにした。

尚、上記のように設定を変更すると、UACを無効にはしていないのに(つまり、管理者を含めすべてのユーザーを標準ユーザーとして実行する、というデフォルト設定はそのままに)、セキュリティセンターを開くと「 UAC が無効になっている」との警告が発せられる。プロンプトを表示させず自動昇格するようにしたことや暗転デスクトップを不使用にしたために、このように表示されるだと思われる。正確さを欠いた警告表示ではあるが、より安全側の警告としたとも解釈出来るかもしれない。

さて、このエントリイでは、Vista 非対応または不完全対応と思われる幾つかのアプリの設定と利用について、実際の利用結果を踏まえて具体的に取り上げてみたい。

ここで取り上げるアプリは XP 利用時に多用してきた以下の「古典的な」ツールである。どれも皆きわめて汎用的で大変便利な基礎的アプリである。

  • Media Player Classic 6.4.9.0-MPC HomeCinema v1.1.613.0 (2008)
  • clcl 1.1.2(2005)
  • Area Editor 1.11(2008.8)

Media Player Classic 6.4.9.0-MPC Homecinema v1.1.613.0 (2008)

ホームシネマ向けに改良されたバージョン MPC の最新バージョンは、「 MPC Homecinema 」なる別名が付けられている。またこのバージョンは Vista 対応である。

さて、このバージョンの MPC ではオプション設定の一部に、 Vista 用として新たに「管理者として実行するためのボタン」が設けられた。これにより標準ユーザーとして起動した場合でも当該ボタンをクリックして設定する内容は管理者として実行する事になるわけで「 Vista 対応 」の面目躍如ということだろう。

ただし、それにも拘わらず、通常の起動方法で、つまり標準ユーザーモードで起動して「日本語表示への切り替え」を設定しても、その設定変更は次回起動時には反映されないことに留意しなければならない。

つまり、一時的に管理者として起動して言語変更を行う必要があるのである。

これも管理者として実行しない標準ユーザーモードの為せる技であり、面倒といえば面倒なことである。セキュリティ強化による標準ユーザーモード導入は、賛否両論が今後も続くだろう、と思われる。何故ならばそれは決してユーザーフレンドリイではないからである。

<参考>Media Player Classic 6.4.8.3jp (2005)

Vista非対応の、少し前のバージョンの場合には、UAC に係る設定がデフォルトのままでも、問題なく「利用する」ことは出来る。標準ユーザーのままで、視聴したいファイルをドラグアンドドロップして実行できるのだ。しかし、オプション設定変更しようとするとすると、その途端に躓いてしまう。「管理者としてこのプログラムを実行する」モードでこのアプリを再起動しない限り何も設定できないのである。

だとすると、常に「管理者としてこのプログラムを実行する」ように設定しておけば良いと直ぐに思いつくが、事はそう簡単ではない。管理モードでこのアプリを起動すると今度はドラグアンドドロップが効かなくなってしまうのだ。

以上から次の結論に至った。

オプション設定するときには一時的に管理者として実行し、ファイルを play するときには標準ユーザーモードで起動すればよい。

ここに後者の場合には普通にアプリを起動すればよく、前者の場合にはプログラムファイルを右クリックして、表示されるリストから「管理者としてこのプログラムを実行する」を選択しクリックすればよい。

但し、管理者として実行する場合には、「管理者承認モードでの管理者に対する昇格時のプロンプト動作」がデフォルトのまま、つまり「同意を要求する」となっている場合には、資格情報の確認プロンプトが表示されてしまう。コレガいちいち五月蠅いと感じれば昇格時のプロンプト動作を「確認を要求しないで昇格する」に変更してしまえばよいわけだ。

▲ToTop

clcl 1.1.2(2005)

2005/2/11、つまり Vista 登場の 2 年以上前にリリースされたこのアプリの場合、特徴的な動きを見せたと言えるだろう。

Vista デフォルト値のままで、何ら支障なく設定出来、かつ利用できるのである。

設定時も利用時も昇格時のプロンプト動作は表示されないし、資格情報を求められることもない。

最も頻繁に利用する優れたクリップボードユーティリティであるだけに、このアプリが XP 時代と全く同様に利用できることは大変喜ばしい限りである。

▲ToTop

Area Editor 1.11(2008.8)

このアプリは本家サイトを見るとVista対応と明記されているが、デフォルトのインストールのままでは決してそのようには使えなかった。

UAC を有効にした状態で何度もインストール/アンインストールをやり直したが、デフォルト値のまま C:\Program Files フォルダにインストールする限り、スクリプトエラーが出てしまって使い物にならないのである。UAC を無効化すれば問題なく使用できたが、それでは Vista 対応で使用したとは言えない。

そこで「 管理者承認モードでの管理者に対する昇格時のプロンプト動作」を「確認を要求しないで昇格する」と変更してみたが、問題は解決しなかった。

また XP 互換モードで起動してもいっこうに問題は解決しないのである。

ブログエントリイ投稿時には必ず使用し、バックアップを取る設定にしているからこそ重宝して使ってきたアプリであるだけに、どうしても活用し続けたい要求が強かったため、何が何でも使い倒したいと切望し、あちこちのサイトを見ていろいろと調査してみた。

この件では本家サイト( AreaEditorとは(AreaEditor) - アイデアマンズ株式会社 )は全く頼りにならなかった。「1.11は Vista 対応」と明記しているのに、今回私が経験したような運用上の問題、つまり Vista 上で使う場合の問題点については一言も触れていないのである。

重宝するアプリだけにサイトの貧弱さには呆れかえってしまった。

結果として解決策をやっと見いだしたのだが、その解決策は全く関係のない次のサイトから得た知見によるものだ。( Windows Vistaの UAC 対策について

このサイト内に C:\Program Files フォルダ内ではなく C:\ 直下にインストールする回避策が例示されているのだ。この方法でC:\AareaEditorフォルダに再インストールしたところ、全く問題なくあっさりと利用できるようになったのだ。

「 安全な場所にインストールされている UIAccess アプリケーションの昇格のみ 」の指定をデフォルトのまま「 無効 」にしているのに、C:\Program Files フォルダ内にインストールするとうまく作動しないのである。

使えるようになるまでに多くの時間を割かれてしまっただけに、恨めしい思いが強く、このソフトの本家サイトに対して強い苛立ちを覚える。!

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

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