[NS] お知らせ:「コナミコマンド」を実装しました. に感動してしまった。

さっそく自分でもJavaScriptでの実装を試みたところ、以外と使えそうなので公開。

var KONAMI = function() {
  var command_list = [];
  var disabled = false;
  var permit_key = ' 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  var func_key = {
     8: 'back',  9: 'tab',    13: 'enter',    16: 'shift', 17: 'ctrl', 18: 'alt',
    27: 'esc',  33: 'pageup', 34: 'pagedown', 35: 'end',   36: 'home',
    37: 'left', 38: 'up',     39: 'right',    40: 'down',  46: 'delete'
  };

  var make_key = function(key) {
    if (!key) return ['up','up','down','down','left','right','left','right','b','a'];
    if (typeof(key) == 'string') key = key.split(',');
    var temp = [];
    for (var i = 0, len = key.length; i < len; i++) temp = temp.concat(parse(key[i]));
    return temp;
  };

  var parse = function(key) {
    for (var i in func_key) if (key == func_key[i]) return [key];
    var arr_char = key.split('');
    for (var i = 0, len = arr_char.length; i < len; i++) {
      if (permit_key.indexOf(arr_char[i]) == -1) arr_char[i] = '*';
    }
    return arr_char;
  };

  var kc2char = function(kc) {
    if (kc >= 48 && kc <= 57) return String.fromCharCode(kc);
    if (kc >= 96 && kc <= 105) return String.fromCharCode(kc-48);
    if (kc >= 65 && kc <= 90) return String.fromCharCode(kc+32);
    if (!!func_key[kc]) return func_key[kc];
    return (kc == 32) ? ' ' : '*';
  };

  var check_key = function(evt) {
    if (disabled) return;
    if(/input|textarea/i.test((evt.target||evt.srcElement).tagName)) return;

    var c = kc2char(evt.keyCode);
    if (c.length == 1 && evt.shiftKey) c = c.toUpperCase();
    
    for (var i = 0, len = command_list.length; i < len; i++) {
      var command = command_list[i];
      if (!command.cache) command.cache = [].concat(command.key);
      
      if (command.cache[0] == '*' || command.cache[0] == c) {
        command.cache.shift();
        if (command.cache.length == 0) {
          command.action();
          command.cache = [].concat(command.key);
        }
      } else if (c == 'shift' || c == 'ctrl' || c == 'alt') {
        continue;
      } else {
        command.cache = [].concat(command.key);
        if (command.cache[0] == c) command.cache.shift();
      }
    }
  };

  if (document.addEventListener) { document.addEventListener('keyup', check_key, true); }
  else if (document.attachEvent) {
    document.attachEvent('onkeyup', check_key);
    var unload = function(){ document.detachEvent('onkeyup', check_key); window.detachEvent('onunload', this); };
    window.attachEvent('onunload', unload);
  }

  
  return {
    command: function(action, key) { command_list.push({ action:action, key:make_key(key) }); },
    disabled: function() { disabled = true; },
    enabled: function() { disabled = false; }
  };
}();

KONAMI.command(function(){ window.open('mailto:hoge@fuga') }, 'mail to hoge');
KONAMI.command(bookmarklet_1, 'book,enter,1');

jQueryを少し触ってみた。いろいろと試しながら遊んでいたらなんだかゲームっぽいのができた。

逃げるゲーム.

マウスで逃げて下さい。

使用されている画像は、弊社製品AirOneにおける『ミーティング』を示す画像と、『出欠の返事がまだですよ！』を示す画像です。

自分的にはこの画像に追われるのは慣れっこですが、精神的にくるものがあります。

AirOneでもこんな感じに、画像が追ってきて捕まったら出欠返信フォームが自動的に開いてしまうような機能をつけるといいのかも。

ソース.

なにかの参考になるかもしれません。

var daaaaaah = function(){ $('#hoge').animate({ left:0 }) };
$('#hoge').animate({ left:100 }, daaaaaah); // -> 1
$('#hoge').animate({ left:200 });           // -> 2
$('#hoge').animate({ left:300 });           // -> 3

LDRizeを自分用にカスタマイズしたものが意外と評判よかったので公開します。

• 11562.user.js用のパッチ
• パッチ適用済みLDRize.user.js
  

主な特徴

• 『i』キーを押すと、iframeでその場にページを開きます

• iframe内のページはSpace, Shift-Spaceキーでスクロールできます
• 1番目の項目は自動で開いてFeeling Lucky♪ （Googleのみ有効）
  

[ScreenShot]

メモ書き

• iframe内に開いた異なるドメインのサイトは、セキュリティ上JavaScriptによる操作はできない
• 今回はスクロールしたいだけだったので、以下のような感じでおk

addEventListener(document, 'keydown', function(e){
    if(e.keyCode == 32){
        $('_iframe').contentWindow.focus();
        setTimeout(function(){ window.focus() }, 0);
    }
}, false);

• ただし上のはカレント項目がiframeで開かれているときのみ発動させる
• I'm Feeling Luckyがウザい人はLDRize.initの最後の一行を削除でおk
• 以下のパッチを各自よくみて、自己責任でお願いします
  

:ldrize.patch

*** 11562.user.js	2007-10-31 01:20:50.000000000 +0900
--- ldrize.user.js	2007-10-31 01:23:38.000000000 +0900
***************
*** 16,21 ****
--- 16,22 ----
  	  'S-j' : 'NextPage',
  	  'S-k' : 'PrevPage',
  	  'v'   : 'View',
+ 	  'i'   : 'Iframe',
  	  'p'   : 'Pin',
  	  'o'   : 'Open',
  	  'l'   : 'List',
***************
*** 31,36 ****
--- 32,38 ----
  	  'NextPage'       : 'Scroll next page',
  	  'PrevPage'       : 'Scroll prev page',
  	  'View'           : 'Open in current tab',
+ 	  'Iframe'         : 'Open in iframe',
  	  'Pin'            : 'Pin',
  	  'Open'           : 'Open pinned items or current item',
  	  'List'           : 'Toggle pinned items list',
***************
*** 199,204 ****
--- 201,207 ----
  		  }
  
  		  LDRize._enable = true;
+ 		  document.addEventListener('keydown', LDRize.focusOnIframe, false);
  		  document.addEventListener('keypress', LDRize.handleKey, false);
  		  document.addEventListener('mousemove', function(){LDRize.invisibleRemove(LDRize.invisiblelist)}, true);
  		  LDRize.initCommand();
***************
*** 216,221 ****
--- 219,225 ----
  		  css += LDRize.setCSS();
  		  css += LDRize.initSpace();
  		  if(css != '') addStyle(css);
+ 		  if(window.document.URL.match(/http:\/\/.*google.*\/.*/)) LDRize.viewCurrent('iframe');
  	  }
    },
    initBindCommand : function(){
***************
*** 224,229 ****
--- 228,235 ----
  	  LDRize.bindNextPage  = LDRize.scrollNextPage;
  	  LDRize.bindPrevPage  = LDRize.scrollPrevPage;
  	  LDRize.bindView  = function(){LDRize.viewCurrent('here')};
+ 	  LDRize.bindIframe  = function(){LDRize.viewCurrent('iframe')};
+ 	  LDRize.bindIframeFocus  = LDRize.iframeFocus;
  	  LDRize.bindPin   = LDRize.attachPin;
  	  LDRize.bindOpen  = LDRize.openPinned;
  	  LDRize.bindList  = LDRize.togglePinList;
***************
*** 758,763 ****
--- 764,771 ----
  	  if(LDRize.css_highlight_link) css += "\n.gm_ldrize_link {" + LDRize.css_highlight_link + "}";
  	  if(LDRize.css_highlight_pinned) css += "\n.gm_ldrize_pinned {" + LDRize.css_highlight_pinned + "}";
  	  css += ".gm_ldrize_invisible { visibility:hidden; }";
+ 	  css += ".gm_ldrize_iframe { border:3px ridge #6f6 !important; }";
+ 	  css += ".gm_ldrize_iframe iframe { width:100% !important; min-height:200px !important; border:none !important; }";
  	  return css;
    },
  
***************
*** 1091,1101 ****
--- 1099,1133 ----
  		  LDRize.scrollNext();
  	  }else if(type=='here'){
  		  window.location.href = url;
+ 	  }else if(type=='iframe'){
+ 		  if(!LDRize.current_parapraph) return;
+ 		  var node = LDRize.current_parapraph.lastChild;
+ 		  if(!node || (node.nodeType == 1 && node.className.match(/gm_ldrize_iframe/))) return;
+ 		  if(url.match(/.pdf$/)){ LDRize.viewCurrent('here'); return; }
+ 		  var div = document.createElement('div');
+ 		  div.setAttribute('class', 'gm_ldrize_iframe');
+ 		  var iframe = document.createElement('iframe');
+ 		  iframe.style.height = (window.innerHeight - LDRize.current_parapraph.offsetHeight - 25) + ' !important;';
+ 		  iframe.src = url;
+ 		  iframe.addEventListener('load', function(){ window.focus() }, false);
+ 		  div.appendChild(iframe);
+ 		  LDRize.current_parapraph.appendChild(div);
  	  }else{
  		  window.open(url);
  	  }
    },
  
+ // space
+   focusOnIframe : function(event) {
+ 	  if(event.keyCode != 32) return;
+ 	  if(/input|textarea/i.test(event.target.tagName)) return;
+ 	  if(!LDRize.current_parapraph) return;
+ 	  var node = LDRize.current_parapraph.lastChild;
+ 	  if(!node || node.nodeType != 1 || !node.className.match(/gm_ldrize_iframe/)) return;
+ 	  node.firstChild.contentWindow.focus();
+ 	  setTimeout(function(){ window.focus() }, 0);
+   },
+ 
  // ?
    toggleHelpMessage : function(){
  	  return (LDRize.hideHelpMessage() || LDRize.showHelpMessage());

Tumblrがv3になった(?)ため、JSAction版のShareOnTumblrでエラーがでます。

投稿しようとするとPost failed.と怒られて投稿できなくなってしまいました。

ぐぐっても見当たらないのでソース見てみたらpostするURLが変わっているだけっぽかったので、そこ書き換えてみたら動いた。

『params.v = '3';』はなくても動きましたが一応つけておきます。

ShareOnTumblr.js:. ７２２行目付近

//	postByXHR('http://www.tumblr.com/publisher/save', params, onload, onerror);
	params.v = '3';
	postByXHR('http://www.tumblr.com/share', params, onload, onerror);

配布元が修正されるまで、とりあえず。

最近GoogleReaderを試しているのですが、
ざっと使って見たところ大きな不満点は『スペースキーのスクロールをLDR風にしたい』ってぐらいで、
後は思っていた以上に使いやすくていい感じです。
『*1, *2, *3, ...』のようなタグを作っておけばLDRのレートちっくな機能も簡単に実現できます。

ということで書いた修正スクリプトが割といい感じだったので公開しておきます。

• grspacekey.user.js

単純にkeydownイベントを追加するだけでは他の機能とバッティングしてしまうし、
かといってイベント伝搬を止めてしまうのは問題外なので、
今回は頑張って難読化されたJavaScriptコードを追いかけて改変してみました。

Googleの難読化されたJavaScriptと戦うための戦略

# 最近上記アカウントでひっそりとブログを始めましたが、よい成果物ができたときにはありえるえりあでも公開します。