IE9のサイトの固定をやってみた js編

msSiteModeActivateについて修正しました。

前回に引き続き、IE9ちゃんとWIn7ちゃんのあわせ技を攻略していきます。

JavaScriptを使って出来る事

  • スタートメニューに登録する
  • タスクバーのアイコンに小さいアイコンをオーバーレイ
  • オーバーレイしたアイコンを消す
  • オーバーレイしたアイコンを点滅させる。
  • タスクバーのアイコンを光らせる
    • メソッドはあるけど、動きません
  • サムネイルボタンの画像を変更する
    • タスクバーのアイコンでマウスオーバーすると出てくるボタンがサムネイルボタン
  • サムネイルボタンをクリックしたらページに何かしらを反映させる
  • ジャンプリストを作成する
  • ジャンプリストを削除する
  • jsonを取ってきてジャンプリストに表示する。

デモとかコードを見たほうが早い・・・

アプリかどうかを判断する

  • @returns {Boolean} trueならアプリになってる

window.external.msIsSiteMode();

スタートメニューに登録する

クリックイベントがないと動かなかった気がする

window.external.msAddSiteMode();

どうやってアプリが立ち上げられたか

  • @returns {Number} 0,1,2
  • 0 初回起動ではありません。
  • 1 ドラック&ドロップで固定したやつから起動しました。
  • 2 スタートメニューにjsで追加したやつから起動しました。

window.external.msIsSiteModeFirstRun(false)

アイコンをオーバーレイする

  • @param icoURL アイコンのURL
  • @param toolTip マウスを乗せたときのツールチップ

$add_overlay.click(function(e){
  e.preventDefault(); 
  window.external.msSiteModeSetIconOverlay(icoURL,toolTip);
});

オーバーレイしたアイコンを消す

$del_overlay.click(function(e){
   e.preventDefault(); 
   window.external.msSiteModeClearIconOverlay();
});

オーバーレイしたアイコンを点滅させる

表示と非表示をsetTimeoutで交互に行う。

$blink_overlay.click(function(e){
   e.preventDefault();
  var count = 6;
  var ms = 500;
  for(var i=0;i<count;i++){
    var j=i;
    if(i%2){
      setTimeout(function(){window.external.msSiteModeSetIconOverlay(icoURL,toolTip);},ms<em>j);
    }else{
    setTimeout(function(){window.external.msSiteModeClearIconOverlay();},ms</em>j);
    }
  }
});

タスクバーのボタンを光らせる

光らないけどね(なんでだろうか。)

ヒカッタァアアア

アプリ化したウィンドウからフォーカスが外れているときに実行するとタスクバーにあるアイコンが光る。

  • 最小化
  • 他のウィンドウを開いているとき
  • アプリ化したウィンドウ内で別のタブを開いている場合は点滅しない。
  • なのでウェブアプリなどで何かアクションがあった場合window.external.msSiteModeActivate();を使うことでユーザーに通知できる。
  • サンプルの場合はボタンをクリックしてウィンドウを最小化すると2秒後に光る。

setTimeout(function(){
 window.external.msSiteModeActivate();
},2000);

サムネイルボタンを作成する

  • @param icoURL アイコンのURL
  • @param toolTip マウスを乗せたときのツールチップ
  • @returns {Number} サムネイルボタンのID

  window.external.msSiteModeAddThumbBarButton(icoURL,toolTip)

サムネイルボタンのスタイルを作成する

  • @param buttonID ボタンのID
  • @param icoURL アイコンのURL
  • @param toolTip ツールチップ
  • @returns {Number} サムネイルボタンスタイルのID

window.external.msSiteModeAddButtonStyle(buttonID,icoURL,toolTip);

サムネイルボタンのスタイルを反映する

  • @param buttonID ボタンのID
  • @param styleID サムネイルボタンスタイルのID

window.external.msSiteModeShowButtonStyle(buttonID,styleID);

サムネイルボタンを表示する

window.external.msSiteModeShowThumbBar();

サムネイルボタンを複数変更する場合

$thumbIcoChange.click(function(e){
  e.preventDefault();
  (function(){
    for(var i=0;i<thumbBtn.length;i++){
      var styleID = window.external.msSiteModeAddButtonStyle(thumbBtn[i],icons[i],'サムネイルボタン_'+(i+1)+'です');
      window.external.msSiteModeShowButtonStyle(thumbBtn[i],styleID);
    }
  })();
});

サムネイルボタンにイベントをつける

document.addEventListener('msthumbnailclick',function(e){
  location.href = '#page_'+e.buttonID;
},false);

ジャンプリストを削除する

window.external.msSiteModeClearJumplist();

ジャンプリストを作成する

  • @param title ジャンプリストのタイトル

window.external.msSiteModeCreateJumplist(title);

ジャンプリストに追加する

  • @param title ジャンプリストのテキスト
  • @param url ジャンプリストのテキスト
  • @param icoURL ジャンプリストのテキスト

window.external.msSiteModeAddJumpListItem(title,url,icoURL);

ジャンプリストを動的に追加する

$createJumpList.click(function(e){
  e.preventDefault();<br />
  //一度ジャンプリストを空にする。しない場合は追加される。
  window.external.msSiteModeClearJumplist();
  window.external.msSiteModeCreateJumplist("追加されたにょろ★★★★★★");
  //最大5個まで表示される。
  for(var i=0;i&lt;5;i++){
      window.external.msSiteModeAddJumpListItem((i+1)+".これはジャンプリストです!!!!!!","http://jsdo.it/GeckoTang/jpTu",icons[i]);
  }
  window.external.msSiteModeShowJumplist();
});

jsonデータを取ってきて5件ジャンプリストに表示する。

$rankingJumpList.click(function(e){
  e.preventDefault();
  var reloadIcon = 'http://dl.dropbox.com/u/14028956/ie9/site/reload.ico';
  window.external.msSiteModeSetIconOverlay(reloadIcon,"読み込み中...");
  var icon = "http://androapp.jp/wp-content/themes/androapp/images/favicon.ico";
  var url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=0371a830783da87b5a140d750377503e&amp;_render=json';
  $.getJSON(url+'&amp;_callback=?').then(
    function(e){
      window.external.msSiteModeClearIconOverlay();
      var items = e.value.items;
      window.external.msSiteModeClearJumplist();
      window.external.msSiteModeCreateJumplist("Androappのフィード("+e.count+")");
      for(var i=0;i&lt;5;i++){
        window.external.msSiteModeAddJumpListItem(items[i].title,items[i].link,icon);
      }
      window.external.msSiteModeShowJumplist();<br />
    },
    function(e){
      window.external.msSiteModeClearIconOverlay();
      alert("フィードの読み込みに失敗したかも");
    }
  );
});


Tags: ,

 
 
 

One Response to “IE9のサイトの固定をやってみた js編”

  1. Gravatar of IE9のサイトの固定をやってみた metaタグ編 | </gecko> : げことじ。 IE9のサイトの固定をやってみた metaタグ編 | </gecko> : げことじ。
    26. 4月 2011 at 20:00

    [...] 長くなったのでJavaScriptでいろいろする方法は別エントリーにしました。 [...]

コメントをどうぞ