Loox Uと初音ミクで行こう！

一人暮らししてる僕のコダワリ

2012-01-22T20:31:00.000+09:00

駄話

非常にどうでもよい駄話でございます
僕は一人暮らししてもう五年近くになりますが、その間ずっとコダワッてるささいなことがあります。
それをちょっくら書きだしてみようと思います

ラーメンは鍋から食べない
テレビは買わない
調味料の在庫は切らさない
必ず朝に果物を食べる

非常にどうでも良いコダワリでした。
オチ？
無いよ

MinGWの64bitをインストールする

2011-12-10T14:16:00.001+09:00

メモ

MinGW64bit版をインストールしたのでメモ

手順

MinGW64bit版をダウンロード
MSYSをダウンロード
C:/Users/ユーザ名/直下にMinGWディレクトリ作成
1で取得したzipファイルをそのディレクトリに展開
2.で取得したexeを実行し、パス入力が聞かれるので、C:/Users/ユーザ名/MinGWを入力
スタートメニューから、MSYSを起動する

MSYSのバージョンが古いが気にしない。

参考
PENGUINITIS - MinGW 64 bit 版のセットアップ

今日からあなたも使える！？　uupaa.js入門！

2011-12-08T12:00:00.000+09:00

前書き

JavaScript Advent Calendar 2011(フレームワークコース) 8日目担当 ArcCosineです。
JavaScriptのフレームワークは数多く存在しますが、国内産で優秀な機能を持つuupaa.js(Ver0.8)についての解説もどきを書きたいと思います。
本エントリでは最後のTipsにHTML5のCanvasを用いているため、IEでは正常に表示できない可能性がありますが、仕様ですのでご了承ください
OperaかGoogle ChromeかFirefoxかSafariでの閲覧を強くおすすめします。
excanvas.js?(∩ ﾟдﾟ)アーアーきこえなーい

uupaa.jsとは

uupaa.jsは、uupaaさん(Webサイト:latest log)が作成されたJavaScriptのフレームワークです。
uupaa.jsの特徴は幅広いブラウザをサポートしつつ、最新の機能で差異のある部分を美味しく吸収してくれ、尚且つjQueryやprototypeよりも高速という点を上げることができます。
さらに、無駄を省き、エレガントな表現が出来るように色々と拡張が施されているのも特徴の一つです。
導入実績はよく知らないのですが、uuCanvas.jsがgooの歌詞サービスで使用されています。
(サンプル：夏色ゆず歌詞情報 - goo 音楽)
なお、このページはJSで右クリック死ね死ね処理をしているので、ハックしてやろうとか思わないほうが懸命です。

なにはともあれ使ってみる

uupaa.jsはgooglecodeで公開されていますので、そこから直接チェックアウトしましょう。
svnコマンドが搭載されていましたら、


svn co http://uupaa-js.googlecode.com/svn/trunk/0.8/

でソースを手元にチェックアウトできます。
TortoiseSVNがある方はそちらを使ってみてください。

uupaa.jsをビルドする

uupaa.jsはビルドして使います。これが少しハードルを上げているかもしれませんが、実はめっちゃ簡単です。
ビルドにはPHP、Java Runtime、.NET Framework が必要です。
PHPのインストールはXAMPPが一番手っ取り早いかもしれません。
その他は、公式サイトから普通に落とせば問題なく使えると思います。
build手順ですが、buildディレクトリに移動してdos.batを実行し、以下のコマンドを叩けばuupaa.jsをビルドできます

upa

この場合、全部いりのuupaa.jsが出来上がります。
場所は/js/以下に未圧縮版のcatfood.jsと圧縮版のuupaa.jsの2つが生成されます。
テストするときは、catfood.jsを使うならばデバッグしやすいかもしれません。
詳細は、公式ドキュメントを御覧ください
BuildTool - uupaa-js - build/upa.php はプリプロセスとMinifyを施し最適化された.jsファイルを生成します - JavaScript Library for Casual Creator

ビルドが……、ビルドが面倒です、安西先生……

はい。そんな方は直接code.google.comのスクリプトを読み込みましょう。
以下のコードをHTMLの中に適当に差し込みましょう


<script src="http://uupaa-js.googlecode.com/svn/trunk/0.8/src/uupaa.js" type="text/javascript"></script>

やったね、あーくちゃん！uupaa.jsが簡単に使えるよっ。
おいやめろ

実際に動かしてみる

今回は以下の3つを簡単なコードで実験してみたいと思います。

DOMを生成する
Styleを変えてみる
hoverイベントを簡単に

どれも、jQueryや普通のJavaScriptでも出来ることですが、uupaa.jsだとこう書けるよ！って感動を皆様にお伝えしたいと思います

DOMを生成する

では、まずDOMを生成してみましょう。

よくあるJavaScriptの書き方


//entry point
document.addEventListener("DOMContentLoaded",  init, false );

//initialize
function init(){
 domNormal();
}

function domNormal(){
 var dom = document.getElementById("dom");
 var ul = document.createElement("ul");
 var li1  = document.createElement("li");
 li1.appendChild(document.createTextNode("list1"));
 var li2  = document.createElement("li");
 li2.appendChild(document.createTextNode("list2"));

 ul.appendChild(li1);
 ul.appendChild(li2);

 dom.appendChild(ul);

 var btn = document.createElement("input");
 btn.setAttribute("type","button");
 btn.setAttribute("value","Click");
 btn.addEventListener("click", function(){
  var res = document.getElementById("result");
  res.innerHTML = "Hello, Normal DOM World!";
 },false);
 //I'm very tired...

 dom.appendChild(btn);
}

うんざりする長さですね。
これをuupaa.jsで書くとこんなに短くなります。

スマートなuupaa.js


uu.ready(function(uu){
 var nodeArray = [
  uu.ul(
   uu.li("list1"),
   uu.li("list2")
  ),
  uu.click( uu.input({type:"button",value:"Click"}), function(){
   uu.id("result").innerHTML = "Hello, uupaa DOM World!";
  })
 ];
 uu.add( nodeArray,uu.id("dom"));

});

なんという事でしょう。あれほど長かったコードがこんなに短く！！
nodeArrayで生成する順番を書くというトリッキーな書き方が良いですね！
また、見て分かるように、uuオブジェクトはDOMを返してくれるので、appendChildとかinnerHTMLを使いたいな、と思った時に思考停止で使える点が他のライブラリ(主にjQuery)と違います

実際に動くコードです

スタイルを変えてみる

では、次に簡単にスタイルを変えてみましょう。

よくあるJavaScriptの書き方


//entry point
document.addEventListener("DOMContentLoaded",  init, false );
//initialize
function init(){
 domStyle();
}

function domStyle(){
 var styles = document.getElementById("styles");

 var btn = document.createElement("input");
 btn.setAttribute("type","button");
 btn.setAttribute("value","CSS");
 btn.addEventListener("click", function(){
  var styles = document.getElementById("styles");
  styles.style.margin = "10px";
  styles.style.padding = "25px";
  styles.style.border= "3px solid #fcc";
  styles.style.width = "50px";
  styles.style.height = "50px";
  styles.style.backgroundColor = "#ccf";
 },false);

 styles.appendChild(btn);

}

やっぱり、長くて見づらいという特徴がありますね。
uupaa.jsを使ってもっと楽をしましょう！

スマートなuupaa.js


uu.ready(function(uu){
 uu.add( uu.click( uu.input({type:"button",value:"CSS"}), function(){
   uu.css( uu.id('styles'),{
    m: 10,
    p:25,
    b: '3px solid #fcc',
    w: 50,
    h: 50,
    'background-color': '#ccf'
   });
  }), uu.id('styles')
 );
});

一瞬なんじゃこりゃああ？！と叫ぶ方がいらっしゃるかもしれませんが、実はuupaa.jsは内部的に隠しプロパティを持っています。
今回のケェスですと、marginはmにpaddingはpと省略することが出来るんですね。
他のプロパティについても知りたい方はuucssfix.dbって文字列を探すと幸せになるかもしれません

実際に動くコードはこちらです。

hoverイベントを簡単に

hoverって真面目に実装すると面倒なんですよね。
mouseout、mouseenterイベントをチェックして、さらに親要素から出てきたのか、子要素から出てきたのかなど厳密なチェックが必要だったりします。
jQueryでも似たように.hoverというイベントがありますが、uupaa.jsの場合は、uu.event.hoverでその処理を行なっています。
コードを見ていただくと分かるのですが、hoverイベント処理の第二引数で「enter」状態をチェックします。jQueryよりもfunctionの数が減り、本当に必要な分だけのコーディングで済むってのが素敵ですね。


uu.ready(function(uu){
 var canvas = uu.canvas(width = 768,height = 128);
 canvas.id = "uucan";
 function renderImages(ctx)
 {
  var icons = ["001_blogger.png","002_facebook.png","003_heart.png","004_mail.png","005_rss.png","006_twitter.png","007_wordpress.png"];
  for( var i = 0,len = icons.length; i<len; i++ )
  {
   var one = icons[i];
   var img = new Image();
   (function(pos){
    img.onload = function(){
     ctx.drawImage( this, pos*128, 0, 128, 128);
    }
   })(i);
   img.src = "icons/" + one;
  }
 }
 var ctx = canvas.getContext('2d');
 renderImages(ctx);

 uu.add( canvas, uu.id("canvas") );
 uu.event.hover( canvas,  function(evt,enter){
  var alpha = 1.0;
  if( enter ){
   alpha = 0.1;
  }
  var ca = document.getElementById("uucan");
  var ctx = ca.getContext('2d');
  ctx.globalAlpha  =  alpha;
  ctx.clearRect(0,0,768,128);
  renderImages(ctx);
 });
})

実際に動くコードはこちらです。hoverすると画像が半透明になります。

最後に

uupaa.js使ったのはめちゃくちゃ久しぶりでしたが、改めてその機能の素晴らしさを実感しました。
uupaaさんは日本を代表するJavaScripterの一人である事に間違いありません。
JavaScript使いの方は是非是非uupaa.jsを使ってuupaa.jsSUGEEEEEEEEEEEE!!!!!!!!!!!を体験してみてください！
明日は、taiju (id:jdg) さんです。
それでは良い終末を
以上です。

JavaScriptで遊ぼう　20分間クッキング♪(初心者向け)

2011-12-08T11:30:00.001+09:00

前書き

JavaScript Advent Calendar 2011(オレ標準コース) 8日目担当 Arc Cosineです。
今回は、プログラム未経験な方でも楽しくJavaScriptで遊べるようにという願いを込めて書きます。
※IE6,IE7,IE8では今回のプログラムは動きません。下記に記載されています推奨ブラウザをご利用ください。

JavaScriptの開発環境を整える

プログラム言語を何か始める場合、開発環境を整えなければいけません。
その点、JavaScriptは現在最も開発環境を整えるコストが低い言語と言えます。
なぜならば、用意するのがブラウザとエディタだけで良いからです
まずブラウザを用意しましょう。
これはどのブラウザを用意しても良いのですが、私のお勧めはOperaかGoogle ChromeかSafariかFirefoxです。

どれでもお好きなブラウザをインストールしてください。
ちなみに、上記のブラウザで開発環境を構築する敷居が一番高いのはFirefoxです。
なぜならば、Firefoxをインストールする＋Firebugをインストールするという手順が必要だからです。
とはいえ、Firebugのインストールはワンクリックですので、さほど面倒ではありません。
それ以外のブラウザは標準で開発用ツールがついてきますので、特に何か余計な物をインストールする必要はありません。

次にエディタを用意しましょう。
エディタは何でも良いです。メモ帳でも良いですし、秀丸でも良いです。VimやEmacs、さらにはVisual StudioやEclipseといった有名なエディタを使うのも手でしょう。
Windowsユーザならば初めてのエディタはEmEditorかサクラエディタなんかが良いのではないでしょうか。

以上で、開発環境の構築は完了です。ね、簡単でしょ？

適当にHTMLを作る


<!DOCTYPE HTML>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>初めてのJavaScript</title>
</head>
<body>
 <div id="result"></div>
 <script type="text/javascript">
 //ここにコードを書く
 </script>
</body>
</html>

上のコードをコピーしてエディタに貼りつけて、適当な名前をつけましょう。
first.htmlとかsample.htmlとかmofmof.htmlとかお勧めです。
//ここにコードを書く
とコメントされている所にコードを書いていきます。

小学生でも理解できるコードを書く

まずは、足し算をしてみましょう。折角なので、今日の日付を足してみましょうか。
2011+12+8 = 2031ですね。
さて、そんな暗算はともかく、JavaScriptでコードを書くと以下のようになります


var total = 2011 + 12 + 8;
var result = document.getElementById("result");
result.innerHTML = total;

上記のコードをコピペして、先ほどのコメントされてる箇所に貼り付けて保存しましょう。
その状態で先ほど保存したHTMLファイルをブラウザで開いてみましょう。
どのブラウザも普通にドラッグ＆ドロップすれば、ブラウザで見ることができます。
間違ってもダブルクリックとかしちゃいけません。
2031という数字が見えましたか？
もし、ちゃんと表示されなかったら、Ctrl+Shit+Iを押しましょう。
或いは、右クリック→要素を検証を選択して下さい。
開発ツールが表示されますので、どんなエラーが出てるのかチェックしましょう。
コンソールとかエラーというタブがあると思いますので、それをクリックして、メッセージを読んでみてください。
分からない単語が出てれば、その言葉を検索すれば解説ページが出てくると思いますので、それをよく読んでコード修正しましょう。

正直、この辺はちょろいですね。

少しレベルアップ

では、次にこれを可変出来るようにしましょう。
可変と言っても、大したことはありません。
数字を入れたらひたすら足すという処理をするだけです。
まずHTMLを修正します


<!DOCTYPE HTML>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>初めてのJavaScript</title>
</head>
<body>
 <input id="box" type="text" />
 <input id="send" type="button" value="add" />
 <div id="result"></div>
 <script type="text/javascript">
var total = 2011 + 12 + 8;
var result = document.getElementById("result");
result.innerHTML = total;
 </script> 
</body>
</html>

はい。ボタンと入力ボックスが出てきましたね。
このボタンを押したときに、入力された数字がresultの中に表示されるように修正しましょう。
コードは下記のようになります


var total = 0;
var send = document.getElementById("send");
send.addEventListener("click",function(){
var box = document.getElementById("box");
var n = Number(box.value);
total += n;
var result = document.getElementById("result");
result.innerHTML = total;
},false);

急に長くなったり見たこと無い文字が出てきたりして、めまいを起こしたかもしれませんが、踏ん張ってください。
ここが耐えどころです。ここを耐えて理解できれば、JavaScriptの20%くらいは理解したと言えます。20%は言い過ぎちゃうん……？
さて、何をしてるのか順を追って読んで行きましょう。
1行目はtotal変数に初期値である0を入れています。
2行目はidがsendの要素、つまりボタン要素を取得しています。
そして、3行目から9行目がボタンをクリックした時の処理を書いています。
idがboxである要素、つまりテキストボックス内に入れられた値を数字化して、totalに足すだけの簡単な内容です。

プログラムに初めて接すると、この辺が一番かったるい上に、微妙にわかりづらい所なのかもしれません。
そこで、覚えて欲しいルールなのですが、基本的に、プログラムは上から順に実行されるという点です。
暗黙の了解と言っても過言ではありません。
(もちろん、関数やGOTO(笑)によって、ジャンプする事もありますが、それは後々覚えれば良いです)
そのルールに則って読んでいけば必ずプログラムがどう動くか理解することができますので、頑張って読んで行きましょう。
これは僕個人の意見ですが、処理する順序で書かれてないコードは読みづらくてしょうがないなと感じます。
ある一定のレベルを超えるとわざとそういう書き方をしていると理解できるようになりますし、そちらの方がスマートなケースも多いです。
とはいえ、読みやすさを重視する場合、僕はなるべく処理順で書くように努力しています。

さらにレベルアップ

では、最後にこの処理をオブジェクト化してみましょう。
コードは下記のようになります


function OREORE(){
 this.init();
}
OREORE.prototype = {
 total : 0,
 init: function(){
  this.send = document.getElementById("send");
  this.box = document.getElementById("box");
  this.result = document.getElementById("result");
  this.addEvent();
 },
 addEvent: function(){
  var _self = this;
  this.send.addEventListener("click", function(){ _self.getTotal() } , false);
 },
 getTotal: function(){
  var n = Number(this.box.value);
  this.total += n;
  this.result.innerHTML = this.total; 
 }
}
new OREORE();

急にわからなくなったかもしれません。
ですが、良く見てみると先ほどのコードと似通った形になってる事が分かります。
ここでは細かな解説はしませんが、この書き方をじっと眺めてみて、なんでこういう書き方をしてるのだろうかと考えてみてください。
そして、例えば


OREORE.prototype = {

の行を


OREORE = {

と書き換えるとどうなるのか
とか


new OREORE();

の部分を


OREORE()；

に書き換えるとどうなるかなどと色々実験してみましょう。
他にも、var _self = thisと書いてある行は何故_self変数へ代入しているのかとか考える事はいっぱいあります。
変化が分からない場合は、console.logを使って、変数の値を書きだしてみると良いでしょう。
最初のうちは理解出来ない事が多いのですが、こういう短いコードから読み解いていくとJavaScriptが面白く感じるようになります。

最後に

実は、このコード、バグが含まれています。
それは、数字以外の文字(例えばoとかpとかeとかrとかa)を入力すると、NaNと表示されてしまいます。
なぜそうなるのか、原因を突き止めてみてください。
また、数字だけでは物足りないので、文字を足して表示していく場合にはどうすれば良いのでしょうか。
これらを解決するだけでも十分楽しめます。

たった20行程度のコードでもここま「遊ぶ」事が出来るJavaScriptって面白いですよね！
ぜひ、これを機にJavaScriptで遊んでみてください。
きっと新しい楽しみを見つけることが出来ると思います。
明日はpush_backさんです。
以上です。

ArcCosineはスケジュール登録を覚えた

2011-12-03T20:00:00.000+09:00

Bloggerってすげー

結構長い間Blogger使っていますが、今までロクにスケジュール機能使っていませんでしたが、今度のアレの為に試してみました。
普通に対応してて、結構感動しています。
なんか、これからブログ書くのが楽しみでたまらないでゲソ。

Keyaction cancelerを更新しました。

2011-11-28T03:56:00.001+09:00

必要は発明の母

数日前に書いたkeyaction cancelerに対するはてブコメントで
id:hokorobi あぁ、勘違いしていた。Operaのキー設定を優先するんだと思っていたけど逆だ。Googleリーダーでも 1, 2 をタブ切り替えのまま使いたいんだけどどうやるんだろう？というのがありましたので、ああ、なるほど。デフォルトアクションを優先させたいのね。よしよし。と思って書きました。
発想は単純です。Webでキーアクションを割り当てる場合、大抵keydownイベントにイベント関連付けしてますので、Web側のkeydownイベントをpreventDefaultすればいいのです。
ちゃんと賢いOpera好きなプログラマがいれば、そんな適当なコードは書きませんが、それで9割のブラウザの場合、Web側の想定の動きをするので、それで満足しちゃうサービスが多いのも仕方がありませんね
keyupにイベントつけてるサイトもありますが、そこまで変態的なイベント操作は知りません＞＜

お待ちかねのコード


// ==UserScript==
// @name      keyaction canceler
// @namespace http://looxu.blogspot.com/
// @include   http://www.tumblr.com/*
// @include   http://www.pixiv.net/member_illust.php?mode=manga*
// @include   http://mail.google.com/*
// @include   https://mail.google.com/*
// @include   http://www.google.com/reader/*
// @include   https://www.google.com/reader/*
// @author    Arc Cosine
// @version   2.0
// ==/UserScript==
(function(win,doc){

 //You can add more domain and key.
 var PressConf = {
  'www.tumblr.com': 'JK',
  'www.pixiv.net': 'JK',
  'mail.google.com' : 'G',
  'www.google.com' : 'G'
 };

 //You can add more domain and key.
 var DefActionConf = {
  'www.google.com' : '12'
 };

 function actionCancel(data, conf ){
  var eve = data.eve.event || data.eve;

  if( /INPUT|TEXTAREA/.test(data.tag) ) return;
  var keyList = conf[location.host];
  var key = String.fromCharCode(data.key).toUpperCase();
  if( keyList.indexOf(key) < 0 ) return;
  if( eve.ctrlKey || eve.altKey ) return; //if press Ctrlkey  or Altkey then ignore event
  data.eve.preventDefault();
 };

 win.addEventListener('keypress', function(e){
  var data = {
   'eve' : e,
   'tag' : e.target.tagName,
   'key' : e.which
  }
  actionCancel(data, PressConf);
    },false );

 for( var host in DefActionConf ){
  if( location.hostname.indexOf(host) != -1 ) {
   win.opera.addEventListener('BeforeEventListener.keydown',function (e) {
    var data = {
     'eve' : e,
     'tag' : e.event.target.tagName,
     'key' : e.event.keyCode
    }
    actionCancel(data, DefActionConf);
   },false);
  }
 }

})(window,document);

こんな感じです。githubにもUPしてますので、そっちから落とす人はそちらからどうぞ。
https://github.com/ArcCosine/userscript
以上です

Favstar.fmが重い

2011-11-28T00:59:00.001+09:00

みんな大好きFavstar

Twitterが好きでふぁぼり・ふぁぼられが好きな人は、Favstar.fmを結構な確率でチェックしてるのではないでしょうか。
ところが、最近のFavstar.fm重くないですか？
調べた所、どうやらad-maker.infoサーバが重い模様。
ここで、Operaユーザならばコンテンツブロックに追加するという思考パターンになりますので、その思考で行きましょう。
ブロックする手順は下記の通り

Favstar.fmにアクセスした後、適当な所で右クリックして、コンテンツのブロックを選択
右上の詳細設定をクリック
コンテンツのブロックウインドウが出ますので、追加ボタンをクリック
そこに、「http://admin.ad-maker.info/*」を入力

僕の体感ですと、ブロックする前は15秒くらいかかっていたのが、ブロック後は5秒くらいで表示される感じです。
あくまでも体感ですし、適当な感覚ではありますが、確実に早くなると思いますので、ヘビーにFavstar.fmをチェックされてる方は試してみてください。
以上です。

vim+zsh+Cygwin環境を構築したので、メモ

2011-11-25T01:55:00.001+09:00

Cygwinで遊びたいっ

Cygwinで遊びたい季節ですよね(どういう前ふりなの……？)
いますぐコマンドプロンプトを捨てて、Cygwinを使うべき１０+の理由 - ブックマクロ開発に
上記エントリに影響されて、早速Cygwin環境を構築したのでその覚書を。
構築環境はWindows7 Professional 64bit版です。

ダウンロード先

Cygwin本家
本文中のsetup.exeをクリックするとダウンロードが始まります。
とりあえず、Dドライブ直下にインストールしました。
これは自分の環境に合わせて適当にしましょう。

インストールするファイル類

最小構成インストールでも問題ありませんが、以下のソフトを入れておくと捗ります。

vim
zsh
git
gcc4
wget
bzip2
perl
ruby
python
php

日常作業をする分にはこれだけあれば十分では無いでしょうかね。

apt-cygのインストール


wget http://apt-cyg.googlecode.com/svn/trunk/apt-cyg
chmod +x apt-cyg
mv apt-cyg /bin/apt-cyg

このエントリではapt-cygの出番が殆ど無いけれども、これがあれば毎度毎度setup.exeを起動しなくて良くなるので、非常に大事。

minttyの設定

右クリックからOptionsを選択すしましょう
LooksのTransparencyはMed.かHigh.がお勧めです。個人的にはHigh.が好き。
対応していればGlassもいいかもしれません。
CursorはデフォルトではLineになっていますが、僕はBlockが好きなので、それにしました。
Textは後でも変えられるのでそのままに。
Localeは、ja_JP、Charcter setはUTF-8にしました。
後は特に変更した箇所はありません。
一つ前のエントリに書いたように、minttyの起動オプションを適当に設定しましょう。最大化素敵。

細かい設定等

.screenrcはこんな感じ。escapeがC-aでもC-zでもC-tでも無く、C-kな僕は異端派。


#UTF-8を使う
defutf8 on
defencoding utf8
encoding utf-8 utf-8

#escape
escape ^Kk

startup_message off
autodetach on
vbell off

caption always "%-w%10L>%{=b bw}%n %t%{-}%+w%-0="
hardstatus alwayslastline "%H%=%Y/%m/%d %02c"
shelltitle "$ |shell"
shell $SHELL

zshrcはこんな感じ


# 文字コードの設定
export LANG=ja_JP.UTF-8


# ヒストリの設定
HISTFILE=~/.histfile
HISTSIZE=10000
SAVEHIST=10000

autoload -Uz compinit
compinit
autoload colors
colors
alias ls='ls -pla'

# like vim
bindkey -v


# history search
autoload history-search-end
zle -N history-beginning-search-backward-end history-search-end
zle -N history-beginning-search-forward-end history-search-end
bindkey "^P" history-beginning-search-backward-end
bindkey "^N" history-beginning-search-forward-end

# aut cd
setopt auto_cd
setopt auto_pushd

#環境変数
export CYGWIN=tty

.minttyrcはこんな感じ。
フォントはMigu 2Mにしてますが、ここはお好みで。これをそのままコピペするとうぎゃーってなっても責任取れませんｗ


BoldAsFont=no
FontHeight=14
Columns=80
Rows=20
Locale=ja_JP
Charset=UTF-8
Transparency=medium
CursorType=block
Font=Migu 2M
BoldAsColour=no
RightClickAction=paste
CursorColour=0,255,0
IMECursorColour=255,0,0
Term=xterm-256color
FontHeight=14
Columns=80
Rows=20
Locale=ja_JP
Charset=UTF-8
Transparency=medium
CursorType=block
Font=Migu 2M
BoldAsColour=no
RightClickAction=paste
CursorColour=0,255,0
IMECursorColour=255,0,0
Term=xterm-256color

.vimrcはこんな感じ


""
" For Cygwin Version _vimrc
" Since 2011.11.24

""""""""""""""""""""""""""""""
"内部エンコーディングの設定
""""""""""""""""""""""""""""""
"if has('gui_running') && !has('unix')
  set encoding=utf-8
"endif
"scriptencoding cp932

"filetype off
filetype on
filetype indent on
syntax enable


"行番号表示
set number

"バックアップは邪魔臭いので要らない
set nobackup

"クリップボードへコピー
set clipboard=unnamed

"for vundler

set nocompatible               " be iMproved
filetype plugin indent off     " required!

if has('vim_starting')
 set runtimepath+=~/.vim/bundle/neobundle.vim/
 call neobundle#rc(expand('~/.vim/bundle/'))
endif

NeoBundle 'Shougo/neocomplcache'
NeoBundle 'Shougo/vimshell'
NeoBundle 'Shougo/unite.vim'
NeoBundle 'Shougo/git-vim'
NeoBundle 'Shougo/vimproc'
NeoBundle 'Shougo/vimfiler'
NeoBundle 'tpope/vim-surround'
NeoBundle 'thinca/vim-quickrun'
NeoBundle 'mattn/zencoding-vim'
NeoBundle 'mattn/webapi-vim'
NeoBundle 'kana/vim-smartchr'
NeoBundle 'koron/chalice'

filetype plugin indent on     " required!


"For vimfiler
let g:vimfiler_as_default_explorer = 1


"Zen Coding用
let g:user_zen_settings = {
\'lang': "ja"
\}


"for smart char
"inoremap <expr> = smartchr#one_of(' = ', ' == ', ' === ', '=')

" 演算子の間に空白を入れる
"inoremap <buffer><expr> < search('^#include\%#', 'bcn')? ' <': smartchr#one_of(' < ', ' << ', '<')
"inoremap <buffer><expr> > search('^#include <.*\%#', 'bcn')? '>': smartchr#one_of(' > ', ' >> ', '>')
"inoremap <buffer><expr> + smartchr#one_of(' + ', '++', '+')
"inoremap <buffer><expr> - smartchr#one_of(' - ', '--', '-')
"inoremap <buffer><expr> / smartchr#one_of(' / ', '// ', '/')
" *はポインタで使うので、空白はいれない
"inoremap <buffer><expr> & smartchr#one_of(' & ', ' && ', '&')
"inoremap <buffer><expr> % smartchr#one_of(' % ', '%')
"inoremap <buffer><expr> <Bar> smartchr#one_of(' <Bar> ', ' <Bar><Bar> ', '<Bar>')
"inoremap <buffer><expr> , smartchr#one_of(', ', ',')
" 3項演算子の場合は、後ろのみ空白を入れる
"inoremap <buffer><expr> ? smartchr#one_of('? ', '?')
"inoremap <buffer><expr> : smartchr#one_of(': ', '::', ':')

" =の場合、単純な代入や比較演算子として入力する場合は前後にスペースをいれる。
" 複合演算代入としての入力の場合は、直前のスペースを削除して=を入力
inoremap <expr> = search('\(&\<Bar><Bar>\<Bar>+\<Bar>-\<Bar>/\<Bar>>\<Bar><\) \%#', 'bcn')? '<bs>= '
    \ : search('\(*\<Bar>!\)\%#', 'bcn') ? '= '
    \ : smartchr#one_of(' = ', ' == ', '=')

"neocomplcache用
let g:neocomplcache_enable_at_startup = 1 


"" reloadable vimrc
nnoremap <silent> ,r :<C-u>source $MYVIMRC<CR>

"" for unite
" 編集モードで開始する
let g:unite_enable_start_insert=0
"バッファ一覧
nnoremap <silent> ,ub :<C-u>Unite buffer<CR>
"ファイル一覧
nnoremap <silent> ,uf :<C-u>UniteWithBufferDir -buffer-name=files file<CR>
"レジスタ一覧
nnoremap <silent> ,ur :<C-u>Unite -buffer-name=register register<CR>
"最近使用したファイル一覧
nnoremap <silent> ,um :<C-u>Unite file_mru<CR>
"常用セット
nnoremap <silent> ,uu :<C-u>Unite buffer file_mru<CR>
"全部乗せ
nnoremap <silent> ,ua :<C-u>UniteWithBufferDir -buffer-name=files buffer file_mru bookmark file<CR>

"ウインドウを横に分割して開く
au FileType unite nnoremap <silent> <buffer> <expr> <C-j> unite#do_action('split')
au FileType unite inoremap <silent> <buffer> <expr> <C-j> unite#do_action('split')
"ウインドウを縦に分割して開く
au FileType unite nnoremap <silent> <buffer> <expr> <C-l> unite#do_action('split')
au FileType unite inoremap <silent> <buffer> <expr> <C-l> unite#do_action('split')
"ESCキーを２回押すと終了する
"au FileType unite nnoremap <silent> <ESC><ESC> q
"au FileType unite inoremap <silent> <ESC><ESC> q
"新しいウインドウで開く
au FileType unite nnoremap <silent> <buffer> <expr> <C-t> unite#do_action('tabopen')
au FileType unite inoremap <silent> <buffer> <expr> <C-t> unite#do_action('tabopen')


"バッファ系
au BufNewFile,BufRead * set tabstop=4 shiftwidth=4
au BufNewFile,BufRead *.rhtml set tabstop=2 shiftwidth=2
au BufNewFile,BufRead *.rb set tabstop=2 shiftwidth=2
au BufNewFile,BufRead *.yml set tabstop=2 shiftwidth=2
au BufNewFile,BufRead *.js set tabstop=4 shiftwidth=4
au BufNewFile,BufRead *.css set tabstop=2 shiftwidth=2
au BufNewFile,BufRead *.html set tabstop=2 shiftwidth=2

" for python
autocmd FileType python setl autoindent
autocmd FileType python setl smartindent cinwords=if,elif,else,for,while,try,except,finally,def,class
autocmd FileType python setl tabstop=8 expandtab shiftwidth=4 softtabstop=4

" replce
nnoremap <silent> cy ce<C-r>0<Esc>:let@/=@1<CR>:noh<CR>
vnoremap <silent> cy c<C-r>0<Esc>:let@/=@1<CR>:noh<CR>
nnoremap <silent> ciy ciw<C-r>0<Esc>:let@/=@1<CR>:noh<CR>

" F5 command history
" F6 search history
nnoremap <F5> <Esc>q:  
nnoremap <F6> <Esc>q/

" ignore q: q/ 
nnoremap q: <Nop>
nnoremap q/ <Nop>
nnoremap q? <Nop> 

"ゴミ削除
function! RTrim()
let s:cursor = getpos(".")
%s/\s\+$//e
call setpos(".", s:cursor)
endfunction

autocmd BufWritePre *.php,*.rb,*.js,*.bat,*.py call RTrim()
autocmd QuickfixCmdPost vimgrep cwin

" コメントアウト用
" http://vim-users.jp/2011/03/hack205/をそのままコピペ
" Comment or uncomment lines from mark a to mark b.
function! CommentMark(docomment, a, b)
  if !exists('b:comment')
    let b:comment = CommentStr() . ' '
  endif
  if a:docomment
    exe "normal! '" . a:a . "_\<C-V>'" . a:b . 'I' . b:comment
  else
    exe "'".a:a.",'".a:b . 's/^\(\s*\)' . escape(b:comment,'/') . '/\1/e'
  endif
endfunction

" Comment lines in marks set by g@ operator.
function! DoCommentOp(type)
  call CommentMark(1, '[', ']')
endfunction

" Uncomment lines in marks set by g@ operator.
function! UnCommentOp(type)
  call CommentMark(0, '[', ']')
endfunction

" Return string used to comment line for current filetype.
function! CommentStr()
  if &ft == 'cpp' || &ft == 'java' || &ft == 'javascript'
    return '//'
  elseif &ft == 'vim'
    return '"'
  elseif &ft == 'python' || &ft == 'perl' || &ft == 'sh' || &ft == 'R' || &ft == 'ruby'
    return '#'
  elseif &ft == 'lisp'
    return ';'
  endif
  return ''
endfunction

nnoremap <Leader>c <Esc>:set opfunc=DoCommentOp<CR>g@
nnoremap <Leader>C <Esc>:set opfunc=UnCommentOp<CR>g@
vnoremap <Leader>c <Esc>:call CommentMark(1,'<','>')<CR>
vnoremap <Leader>C <Esc>:call CommentMark(0,'<','>')<CR>


"カレント変更
command! -nargs=? -complete=dir -bang CD  call s:ChangeCurrentDir('<args>', '<bang>') 
function! s:ChangeCurrentDir(directory, bang)
    if a:directory == ''
        lcd %:p:h
    else
        execute 'lcd' . a:directory
    endif

    if a:bang == ''
        pwd
    endif
endfunction

" Change current directory.
nnoremap <silent> <Space>cd :<C-u>CD<CR>

"URL encode and decode
command! -nargs=0 -range URLEncode :<line1>,<line2>call <SID>URLEncode()
command! -nargs=0 -range URLDecode :<line1>,<line2>call <SID>URLDecode()

"from chalice.vim
function! s:URLEncode()
 let l:line = getline('.')
 let l:encoded = AL_urlencode(l:line)
 call setline('.', l:encoded)
endfunction

"from chalice.vim
function! s:URLDecode()
 let l:line = getline('.')
 let l:encoded = AL_urldecode(l:line)
 call setline('.', l:encoded)
endfunction

" colors
colorscheme desert
hi CursorIM  guifg=black  guibg=red  gui=NONE  ctermfg=black  ctermbg=white  cterm=reverse

圧倒的なVim力の差……。
メイン環境なので仕方がありませんね。
ちなみにvimは厳密な手順で設定する必要があります。


$ mkdir -p ~/.vim/bundle
$ git clone https://github.com/Shougo/neobundle.vim ~/.vim/bundle/neobundle.vim

上記の魔法のコマンドを実行してから、vimを起動。
:NeoBundleInstall を実行。


$ cd ~/.vim/bundle/vimproc
$ make -f make_cygwin.mak

と実行して、cygwin用のvimproc.dllをコンパイル。
そうしてようやくunite.vimが使えるようになります。
unite.vimはホント素晴らしい。

感想

minttyが思った以上に綺麗。
apt-cygで全て捗る
zencoding.vimは便利
UTF-8いいねぇ。
VimFilerに感動。
vimprocに感動。
githubが無いと死んじゃう

以上です。何かの参考にしていただければ幸いです

minttyを最大化で起動する方法

2011-11-25T01:03:00.001+09:00

最近、Cygwin始めました

某エントリに影響されて、そんなに楽しいのかなと思って手を出した次第。
１日ちょっとでひとまずVim環境だけ整えたって感じです。
なかなか面白いし、自分が持っている*nix系の知識が役に立っております。

本題

で、本題ですが、ターミナルとして、mintty.exeを利用するのですが、これを最大化表示したかった。
TwitterにもPostしたんだけど、minttyに--help渡すとそこに書いてあった。
引数に--window続けてmaxを与えればよさそう。
ということで、最終型はこんな感じ。


mintty.exe --window max /bin/zsh --loing -c "screen -U -x -R"

zsh良いよね。
以上です。

gmailでの不満解消。

2011-11-24T15:22:00.001+09:00

今までの不満

周知の通り、僕はキーボード大好きっ子です。
キーボードに触れて作業することに喜びを感じる生き物なので、アプリケーションはもちろん、Webもなるべくキーボード操作したいと思っています。
ところで、キーボードで操作出来るWebの代表例はgmailですね。
gmailのお陰で僕はメーラーを捨てることが出来るくらい、gmailの使い勝手は良いです。
そのgmailに不満点が一つありました。
それは2ストロークのショートカットが効かないというものでした。
例えば、inboxへ移動するg,iというアクションが効かなかったのです。
これは作業効率を大幅に下げるもので不満の元でもありました。

特殊環境でのみ発生する不具合

ちなみに、この現象、非常に特殊な環境でのみ発生します。
それは以下の環境です。

使用ブラウザがOpera
keyboard.iniに2ストロークアクション(g,gみたいなの)を登録してる
2ストロークアクションの最初のキーが(この場合、g)gmail側のストロークアクションの最初のキーと一致している。

このような~~変態じみた設定をしている~~環境でのみ動かないという物でした。

僕はVimっぽい動きをOperaにさせているので、g,gをGo to startアクションに割り当てています。
gキーを二連打するとそのままページトップへジャンプするという動きをします。
これが気持ち良いんですよ。
まあ、気持ちよさはともかく、これを生かしつつ、gmailのg,iとかg,sを使いたいというのが僕の欲求でしたが、Operaの仕様なのか、2ストロークが設定されてる場合、Opera側が有効になるという動きをしていました。

解決策

よろしい、ならばUserScriptだ。
はい。いつもどおり、UserScriptで解決しました。
まあ、冷静に考えてみますと、Web側でキーボードショートカットを用意してる場合は、そちらを優先してくれた方がありがたいですよね。
という訳で、そう動くUserJSを書きました。と言っても実は過去にこれは書いてたスクリプトなんですけれどねｗ


// ==UserScript==
// @name      keyaction canceler
// @namespace http://looxu.blogspot.com/
// @include   http://www.tumblr.com/*
// @include   http://www.pixiv.net/member_illust.php?mode=manga*
// @include   http://mail.google.com/*
// @include   https://mail.google.com/*
// @author    Arc Cosine
// @version   1.2
// ==/UserScript==
(function(win,doc){
  var conf = {
    'www.tumblr.com': 'JK',
    'www.pixiv.net': 'JK',
    'mail.google.com' : 'G'
  };  //You can add more domain and key.

  var keyList = conf[location.host];

    win.addEventListener('keypress',function(e){
      if( e.target.tagName == 'INPUT' || e.target.tagName == 'TEXTAREA' ) return;
      var pressKey=  String.fromCharCode(e.which).toUpperCase();
      if( keyList.indexOf(pressKey) < 0 ) return;
      e.preventDefault();
    },false );

})(window,document);

ファイル名はkeyaction_canceler.jsとしてください。
ついでなので、tumblrとか追加してあります。
注意事項:
HTTPSでUserJSを動かすにチェックしてないと、httpsでは動きません。
自己責任の範囲でお願いします。

関連エントリ: 多分、誰か既にやってると思うけれど

蛇足

なんでこの動きに気づいたのかというと、Twitterの場合、2storkeが効いていて、なんでかなーと考えて実験した結果だったりします。
なんにせよ、Operaのキーボード関係で不具合が発生した場合、keypressイベントでpreventDefaultしときゃだいたい行ける。

こんなに若者が不幸な時代はない

2011-11-05T13:54:00.000+09:00

初めに

こんなに若者が幸福な時代はない
上記エントリをお読みください。
上記エントリに同意出来る方は、このエントリを読んでもしょうがないので、お布団をもふもふする作業に戻ったり、ニコニコ動画を眺めるというお仕事に戻ってください。

幸福の定義

まず、幸福の定義ですが、上記エントリでは下記のように定義されています。
「幸福」というのは相対的なもので、私たちが「今は不幸だ」とか「生活に満足していない」と感じるのは、「将来はより幸福になれる」と思っているからだ。これからの人生に「希望」があるひとにとっては、今の人生を「不幸」として否定しても、自分を全否定したことにはならない。
だが、もはや自分がこれ以上幸福にはなれないと思えば、ひとは「今の生活が幸福だ」とこたえるしかない。すなわち、若者の幸福度（生活満足度）が急上昇しているのは、2000年以降、彼らが将来に「希望」を持てなくなったことの裏返しなのだ……。僕は、これがとても「幸福」だとは思えません。
僕の感じ方としては、将来に対する希望がない＝今が幸せというのは、ノットイコールなのです。

むしろ、将来に希望がある方が幸せだと思います。
仮に、今が苦しかったとしても、将来更に良くなる可能性があるならば、そこに視線を合わせることができ、今の苦しさを耐えることができます。
今、苦しくないとして、将来、より良い世界が来ることを考えるならば、ますます頑張りたいという気持になります。

三十間近の自分を含め、同年代が感じているのは恐らく、現状に満足してるというより、未来への希望が見えないから色々諦めているという感覚が正しいと思います。
ある辞書では、幸福を
満ち足りていること。不平や不満がなく、たのしいこと。また、そのさま。しあわせ。と定義しています。
将来を諦めている状態が本当に「満ち」ていて、「足り」ているのでしょうか。
将来が真っ暗なのに、不満が無いのでしょうか。
それは楽しいのでしょうか。

どう考えても、それは不幸だと思います。

続かなければ意味が無い

幸福になりたいというのは、人として持つ普通の感情だと僕は思います。
しかしながら、幸福な状態に持っていくのは本当に難しい事ですし、誰もが出来ることではないとも思っています。
短い人生の中で、振り返ってみると、あの時は幸福だったなぁと思い返す時がありますが、それで満足できるほど、僕は歳をとっていません。
僕は、これから先もっと幸せになれるはずですし、その状態がずっと続いて欲しいと思います。
幸せな状態がずっと続く事、それが本当の幸福だと思っています。

こんなに若者が不幸な時代はない

今、冷静に自分の周りの状況を考えてみますと、それが不可能に近いことも薄々感じています。
こんなに若者が不幸な時代はない。
実際そう感じます。
だからこそ、僕は幸せを探し続けたいと思います。
そういう目標があり、見えているという次点で僕はずっとずっと、幸せです。
長文にお付き合いいただき、ありがとうございました。

Google Calenderの曜日に色をつける

2011-10-21T20:37:00.001+09:00

OperaのUserCSSです

日曜日が一番左で、土曜日が一番右の場合は、以下のUserCSSを適用する事で、曜日に色をつけることができます。
以前に書いたコードをちょっと修正しただけですがねｗ


th.mv-dayname:first-child  {
  color: #fff !important;
  background-color: #c00 !important;
}

th.mv-dayname:nth-last-child(1) {
  color: #fff !important;
  background-color: #00d !important;
}

購入しました。

2011-10-20T17:55:00.000+09:00

最近流行のあの本です

まだ全部に目を通してはいませんが、楽しみにしています。うひょー！

.htaccessでSSIを有効にする

2011-10-18T17:07:00.001+09:00

自分用のメモです

以下の内容を.htaccessに書きこんで保存


Options Includes
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml .html

(ﾟдﾟ)ｳﾏｰ

Operaをたった10分でチョッパヤにする方法

2011-09-09T02:32:00.000+09:00

前口上

全国10兆飛んで6478人のOperaファンの皆様御機嫌よう。
どこかで見たことがあるブログタイトルですが、そうです、それのOpera版です。
そもそも、Operaファンならば既にやっている可能性があり、僕がこんな記事を書かなくても自力でやっちゃう素敵な方々に敢えてこのブログを書き綴る事により、自分の無知を再認識したいという謎の欲求により、この文章は書かれています。

手順

手順は下記の通りです。
1)RAMディスクをインストールする
2)RAMディスクにキャッシュディレクトリを作る
3)Operaのキャッシュディレクトリを変更する
4)Operaを再起動する

RAMディスクをインストールする

このページを見てインストールしてください。
Big Sky :: IEとFirefoxとChromeをたった10分でチョッパヤにする方法
RAMディスクをインストール後、再起動したら次のステップへ移動してください

RAMディスクにキャッシュディレクトリを作る

RAMディスクのドライブ名がF:\である事を前提にします。ディスク環境次第では別の名前がつくと思いますので、各自の設定に合わせてください。
さて、作るディレクトリは1つで大丈夫です。
RAMディスクの直下にOperaCacheというディレクトリを作成してください。
見慣れた形式で書くならば、


F:\OperaCache\

です。

Operaのキャッシュディレクトリを変更する

さて、ここでOperaのキャッシュディレクトリを変更するために、アドレスバーを選択して、opera:configと入力しましょう。
上記のリンクをクリックしても構いません。
表示された設定ファイルエディタの「クイック検索」に「Cache Directory4」と入力してください。
面倒くさい人は、これをクリックしてください
さて、Cache Directory4とOperator Cache　Directory4が表示されていますね。
今回はCache Directory4の中身を変更してください。
先ほどの例ですと、


F:\OperaCache\

と入力すればOK。
後は保存をクリックしてください。

Operaを再起動する

お疲れ様でした。Operaを再起動すればキャッシュディレクトリが変更されます。
元記事に書いてあった通り、Google Mapsなんかで試すとサクサク動くようになるのが分かると思います。
それでは楽しいOperaライフを

もしも蝉が東北大のウインドノーツだったら。

2011-09-04T13:14:00.002+09:00

Twitterに投稿したネタです

蝉「誕生するッ…！！」
蝉「聞こえるか？複眼に何も映らねぇ！！」
蝉「クソッなんも聞こえねぇ！！」
蝉「複眼が無いと俺は空も飛べねぇのかよっ！！」
蝉「還ってこれるのかこれでッ…！？」
蝉「へへっ…悪いなヘボ蝉で…」
蝉「ウーファーだけは一流のところ見せてやるぜ！！」
蝉「フルヴォリュームだぜ！信じらんねぇ！」
蝉「俺の人生は七日時々三日…！イイ蝉生だよ！」
蝉「空気をッ…空気を震わすんだ…！！」
蝉「邪魔されてる…わかってるけど…！！」
蝉「左腹腔がっ攣ってる！！うぅぅああああああああああああ！！！！！」
蝉「ああー痛いッ！！ぅあああああ！！！！」
蝉「響けっ響かせんかぁああ！！！！！」
蝉「桂っ今日何日ィ！？ﾄﾞﾎﾞｫｫ」

1分で対応する、はてなスター二重表示対応

2011-08-20T01:14:00.000+09:00

僕のブログ限定の現象かもしれませんが

1ヶ月くらい前から、はてなスターが二重で表示されるという現象が起きていた。
なぜそうなったのか原因が不明なのだが、(今更ながら)対応することにした。

1分でできる対応

Hatena.Star.SiteConfig = {

  entryNodes: {

    'div.hentry': {

      uri: 'h3 a',

      title: 'h3.post-title',

      container: 'h3'

    }

  }

};

上記のコードをテンプレートにコピペするだけ。
やったね！

一部の人にしか嬉しくないIE9のJavaScript情報

2011-08-20T00:33:00.000+09:00

皆様こんばんわ。只今深夜ゼロ時ニジュナナ分。
一部の人にしか嬉しくないIE9での情報です。

イベントキャンセルと言えば

IE6-8時代には、window.event.returnValue=falseという魔法のコードを書けば大抵なんとかなっていましたが、なんと、IE9ではこれが効かなくなります。
代わりに効くのが、event.preventDefault()です。

ということで、よくあるコード

function cancel(e){

  var event=e||window.event;

  if( typeof event.preventDefault == "undefined" ){

    event.returnValue=false;  // IE6-8

  }else{

    event.preventDefault();   //Opera,Firefox,chrome,safari and IE9

  }

}

これでイベントキャンセルできます。
本当に一部の人にしか嬉しくないIE9のJavaScript情報でした。

カーテンを買った

2011-08-11T14:09:00.000+09:00

非常に今更なのですが、僕の部屋にはカーテンがありませんでした。
全部丸見えって訳ではなく、普通に曇りガラスなので外から中は見えない仕様なので、別にいらないかーと思い買ってなかったのです。
ですが、この度はちょっと奮発してカーテン購入しました。
その理由は暑さ対策。
知り合いの人に教えてもらったのですが、カーテンがあると、体感温度が１～２度は確実に下がるとの事。
騙されたと思ってやってみたのですが、効果は抜群でした。
なので、ここ数日エアコンオフでも結構過ごせています。
もし、一人暮らしの男性or女性でカーテンつけてなかった人、これを機会につけてみるのはいかがでしょうか？

#考えてみたら、女性でカーテン無しってどんだけ(勇者|世間知らず)なんでしょう。
#あ、ども、ただの世間知らずです。

AndroidのWebbrowserで、望みどおりのスクロール位置を取得したいっす

2011-07-25T20:11:00.001+09:00

Androidだけでなく、iPhoneとかでも使えるかもね

ブラウザのスクロール位置はscrollイベントにaddEventListenerして、window.pageYOffset + window.innerHeightで求められるんだけど、アドレスバーが出てきた時の値が若干違う。
そこで大分苦労した。

解決策

scrollイベントで取得できないなら、resizeイベントで取得すれば良いじゃない。
頭のいい人なら一瞬で気づくかもしれないが、馬鹿だったので2ヶ月くらいかかった。
(´・ω・｀)

このじょうほうがみんなのやくにたちますよーに

innerHTMLに突っ込んだScriptを実行する方法

2011-07-25T17:35:00.001+09:00

大変危険ですが、getElementsbyTagNameでscriptを取得して、evalする。
ひとまず、これで対応していますが、もっと良い方法があったらおせーてください。お願いします。

データ移行に欠かせないたった一つのフリーソフト

2011-07-16T19:04:00.000+09:00

データ移行作業中

少し時間ができましたので、HDDの中身を移行しています。
いろいろデータがあるのですが、この際なのでちらばっていたデータを全部ごっそり一つのHDDへまとめています。
さて、データコピーを支援するソフトはたくさんあるのですが、僕が愛用しているのはFastCopyです。

FastCopy
http://ipmsg.org/tools/fastcopy.html

ただ純粋にデータコピーするだけのソフトなのですが、その速度は神速。
メモリがばかみたいに使える現在ですと物凄い高速コピーを見せてくれます。
お陰で作業もめちゃくちゃ捗ります。

Windows限定ではありますが、オススメのソフトの一つです。
1万近いソフトとか買わなくても十二分に活躍してくれます。

以上です。

結局

2011-07-14T23:18:00.000+09:00

結局、新しいPCを購入しました。
懐に大ダメージ。トホホ……。
でも、新PCは高速＆大容量なので、大満足です。
しばらくうまい棒生活ですね(遠い目

PCが……

2011-07-12T00:35:00.000+09:00

ここ最近、PCが不安定動作しまくっています。
理由としましては、暑い……ぐらいしかおもいうかびません。
もちろん、大分長く使っているとか、掃除してないとか色々理由はあります。
問題としましては、買い換えるためのお金が無いって事くらいですかなぁ(遠い目
この夏は何とか持って欲しいです……。

サブタイトルを少し変えた。

2011-07-03T13:34:00.002+09:00

どこが変わっているかは、気づく人だけ気づけばって感じで。
それにしても、暑いですねぇ。

Google検索の新機能に気づいた

2011-06-30T13:55:00.004+09:00

Google 検索のUIが変わりましたね

キーボードブラウジングユーザにとっては非常に使いづらい所があります。
特に、J/Kで画面のスクロールを行うvim指な人にとってはちょっと辛いです。
そんな、Google 検索ですが、一つ面白いことに気づいたので、書きます。

ページ遷移

まず、こちらを御覧ください。

どこにでもある普通の検索結果ですね。
この状態でエンターキーを叩きます。
そうすると、Desktopteamのブログにたどり着きます。

それで、この状態で一旦戻ります。
Opera使いなら、Zキー、普通のユーザさんならBackspaceを叩きます。
そうすると、画面がこうなります。

お気づきになられただろうか

検索結果の左に表示されている三角が下へ移動してるでは無いかっ！
まあ、それだけなのですが。
これを応用すると、
Google検索→エンター→ページ見てｺﾚｼﾞｬﾅｰｲ→戻る→エンター→ページ見る
のサイクルを繰り返せるという事です。
つまり、キーボードブラウジングを如何に少なくさせる事が出来るかをGoogleは考えていたわけですねっっっ！！！

この実装の問題点

これは、回線速度がめっちゃ早くて、レンダリングがめっちゃ早いパソコンを使っていて、画面処理判断速度がめっちゃ早い人ならば、問題ないブラウジングスタイルなのですが、それは少々ハードルが高すぎる。
Google先生が思っている以上に、回線速度は遅いし、パソコンも遅いし、人間の脳速度も遅いのです。
アイディアとしては「あり」ですし、脳みその片隅にとどめておくくらいでいーのかもしれません。

まあ、後冷静に考えると、検索結果のスニペットから目的の情報を探し出せる能力にみんな特化しつつあるから、Google先生の並び順で確認するみたいな作業は発生し辛いかなぁ。

あと、ついでなので言いたいこと。
新Google検索の問題点ですが、まず特殊キー意外を押すと全て検索ボックスに飛ぶ仕様はやめて欲しい。
そのせいで、キーボードブラウジングユーザにとっては非常にストレスが高いです。
(ある関数を無効化すればいいんだけど、無効化する方法が思いつかない……orz)

1と2でタブ切替をしたり、ZやXでページを進んだり戻ったり、wやsでリンクをたどる変な人たちからすると、そのキーを押して思い通りの動きをしなかった時のストレスはもはや有頂天レベル。
なので、もう少し控えめなキーボード制御をしていただけると大変嬉しいです。
そう、例えばはてブやLivedoor Clipのような。

以上です。

PCはこれからどうなっていくのか

2011-06-30T12:32:00.002+09:00

思索

cc licensed ( BY SD ) flickr photo shared by njt1982
連日暑いですね。
ここ数日めっぽう忙しくて、身体が四つくらい欲しいです。
プログラマとして仕事を行う上で、PCは欠かせない道具の一つなのですが、そのPCの将来についてちょっと考えてみました。

僕のPC環境

僕は現在５台のPCを保有しています。
１台はメインマシンで、自作PCです。初めてのMicroATXのMainboardを採用した、自分としては結構冒険したマシンでした。
これは３年前に組み立てた物で、大分時代遅れなスペックになってきましたが、それでも、まだまだ十分に現役です。
２台目はノートパソコンで、これも自作です。(ノートベアボーンが出はじめの頃に買った代物です）
今はUbuntuマシンとして稼動しています。つまり、GNOMEでの結果を見るためだけのマシンに成り下がっています。
普段は殆ど稼働せず、置物とかしていますが、納品直前は頑張ってくれます。
３台目はサーバマシンで、密かに２４時間可動しています。これも自作です。
UbuntuのServerバージョンを入れており、全てリモート操作対応してる素敵な奴です。
残りの２台は今現在使っていませんが、部屋の隅に転がっています。

さて、今はこんな状態ですが、昔はこんなにPCを持たずに全て１台のマシンで処理していました。
その時はATXのMainboardで、PCケースもかなりでかいのを使っていましたし、発熱も大変なもので、夏は本当に大変でした。

複数台のマシンはもう居らない？

僕がマシンを複数台保有したのは、同時にいくつかの作業を並行処理したかったからという理由でしたが、今考えてみるとそこまで大仰なことをしなくても、よくなってきた時代になったなと感じています。

例えば、サーバマシンは２４時間稼働するWebサーバ兼ファイルサーバとして利用していましたがWebサーバ程度なら、月額１０００円くらいのVPSが溢れているので、それを利用すれば普通の人は大体間に合ってしまうと思います。
さらに、ファイルサーバも、今HDDがアホみたいに安くなっているので、ちょっとしたデータでも１台のHDDに十分保存できますし、クラウドサービスの台頭で、多くの音楽ファイルや動画ファイルもクラウド上に置いておく事が出来るようになりました。
しかも、クラウドはPCでアクセスする必要は無く、携帯端末でアクセスする事で必要十分な情報を得ることが出来ます。

個人でサーバを保有する意味はどんどん薄れてきています。
僕自身も、今、サブで使用しているマシンもそのうち停止して、Web上のサービスに全部切り替えようと密かに思っています。

より小さく、よりパワフルに

さて、メインで使っているマシンですが、今度はMini-ITXのMainboardにしてみようと思っています。
そのきっかけになったのはSandyBridgeの登場です。以前は小さいPCで重い処理を指せるのは無理がありましたが、現代はそんなことは幻想になりました。
小さくて、パワフルで発熱が少ない。
技術の進歩が、以前の理想に近い状態を生み出しています。

でかいパソコンでなにやらすっごい大変な作業をする時代は既に終わり、今は小さくて軽いパソコンですっごいカッコ良い作業をする時代になりました。
僕自身、もうデスクトップにこだわる必要性をあまり感じていません。
純粋に自作が好きなので、そうしてるだけであって、これは完全に趣味の世界ですね。

PCはこれから将来、限定的なユーザの入力端末として細々と生き残っていくと思います。
そして、普通の人はPCを使わずに携帯端末で色んなことを楽しむ。
そんな、未来が待っているのではないでしょうか。

長文ですが、ここまで読んでいただき、ありがとうございました。

IEデバッグの歌

2011-06-14T15:48:00.000+09:00

元ネタは、彩音Pのサラリーマンの歌です

一生懸命ハックして
IEに戻ると、ただ死ぬだけ
こんな毎日飽きたけど、
今日も明日もただ繰り返す

いつものバグに悩み込む
今日も謎エラー試して失敗して
通いなれた専用コードへ

たいした問題なんかない
忙しい日々
あんまりバグだらけでなんだか泣けてきた

子どもの頃に夢見ていたのは
スーパーハッカー悪者(IE6)をやっつけるよ

一生懸命ハックして
鯖に入ってただ上げるだけ
頭に良さそうなコーヒーを
今日も一人でちょっと飲むだけ

会社で仕事のミスをした怒る顧客
あやまってあやまって
飛び起きたら夢だった・・・。

寝かせてよ休日くらい気持ちよく
既存バグは狐だけでいいよ・・・。

それでも耳にする不況の世の中
忙しいだけ実は幸せなのかもね？

一生懸命ハックして
家に帰ると、ただ寝るだけ
一生懸命対応すれば
IEも何かの役に立つかも

明日は良い事ありますように

一生懸命ハックして
鯖に入ってただ上げるだけ
一生懸命ハックして
今日も明日もまたデバッグする

一生懸命ハックして
鯖に入ってただ上げるだけ
こんな毎日飽きたけど、
今日も明日もまたデバッグする

IE6限定バグ？

2011-06-10T01:34:00.000+09:00

メモです。

IE6限定かもしれませんが、以下のようなコードですと「catchステートメントでは適用されますが、throwステートメントでは適用されません。」というエラーがでます。

try{
    //do something
}finally{
    //do something
}

んで、そのエラーを消す方法は下記の通り

try{
    //do something
}catch(e){
    //do something
}finally{
    //do something
}

catchを書いてあげれば良い。
googleに置いてあるjquery1.6.1でこのエラーが出てハマった。
IEは、エラーメッセージが分かりづらくて苦労する。

検索してて、参考になったので、ここもメモ
catchステートメントでは適用されますが、throwステートメントでは適用されません。 - latest log

Colorful favstarのaddonが公式に登録されました。

2011-05-27T22:38:00.001+09:00

https://addons.opera.com/addons/extensions/details/colorful-favstar/

userjsや俺俺アドオン等で公開していたColorful favstarですが、今回無事に公式に登録されましたので、ご報告致します。
英語で書いてあるけれど、クリックしてインストールするだけで使うことが出来ます。
機能は全く変わっておりません。
今後は、こっちを優先的に更新していきます。

以上です

Opera男子ができる女の子の「女子力アップ」の手伝い5つ

2011-05-20T01:46:00.000+09:00

全国100人くらいのOpera男子（笑)の皆さんごきげんよう。今日は、Opera男子ができる女の子の「女子力アップ」の手伝い5つをご紹介したいと思います。
女の子は日々、女子力アップに余念がありません。Opera男子にはわからないかもしれませんが、女の子たちは自分のために1分1秒を無駄にし、女子力アップのために努力しているのです。

でも、女子力は女の子自身の力だけではあげることができません。周囲の人たち、特にOpera男子たちの協力なくして女子力アップは難しいのです。今回は、親しい女友達に対してOpera男子ができる、女子力アップのお手伝いを5つ紹介したいと思います。
　
・Opera男子ができる女の子の「女子力アップ」の手伝い5つ

1. 最新のOperaをインストールしてあげる。

女の子の欠かせないアイテムがOperaです。でも、最近は次々に新しいOperaが出るので、いちいちアップデートやプロファイラ別インストールをしていたら女の子のHDDがパンパンになってしまいます。そこであなたが、女の子の代わりにOperaをインストールしてあげましょう。あなたの周囲に「新しいOperaいれたーいー！　でも容量なぁーい！」という女の子はいませんか？　「クリーンインストールしてあげようか」とさりげなく言ってwand.datごと全部削除してあげてください。

2. 友だちの女子にExtensionを紹介する

たとえ恋愛感情がなかったとしても、女の子に対してExtensionを紹介してあげましょう。紹介しすぎると「好意があるのかも!?」と勘違いされちゃうので、3日に1回くらいのペースでExtensionを紹介ましょう。女の子はExtensionを紹介されると元気が出ちゃうのです☆　なんでもない普通の日にもらうExtensionほど、サプライズな気分が女の子たちを喜ばせます。できるだけデザインが良いものや、ゲームなどの時間を消費するものが喜ばれる傾向にあります。

3. ブラウジングでは2回に1回は1getをゆずってあげる

女の子と1getを競うときは、せめて2回に1回は1getさせてあげましょう。たとえ恋愛感情がなかったとしてもです。女の子たちは美しさ（フォントやアンチエイリアス）や色見本にお金かけているので、2ch閲覧で1getするだけでも非常に嬉しいのです。浮いた時間でスルー力をアップさせたり、(脳内)彼氏とのデートに使ったりできるわけですね。

4. 季節ごとにスキンを変更してあげる

女の子は春夏秋冬の季節ごとに新しいスキンをほしがるものです。「1～2年前のスキンを使っているなんてもってのほか！」という女子力の高い女の子も多数います。そんな女の子が困らないように、季節の変わり目に新しいスキンをインストールしてあげましょう。恋愛感情は持たずに、男友達としてインストールしてあげるのです。そうすることであなたの友だちの女の子(のOpera(余談であるが、のという接続詞を連続してつなげる文章は実に読みづらいものであると常日頃筆者は思っている))がキレイになるのですから、あなただって嬉しいですよね。「そろそろ夏だなあ。初音ミクスキン、超オススメ。さっき入れといた」とさりげなくOpera力をアピールしましょう。男友達数人に声をかけ、みんなで女の子と一緒にスキンギャラリーを眺めるのもアリでしょう。そうすることで、重いスキンやWidgetsをいれたとしてもOperaは優秀なので、CPU負担が少ないので気になりませんよね。

5. 女の子に定期的にOpera Uniteが届くようにしましょう

最近の女の子はOpera Uniteにも気を使っています。普通のOpera Uniteは使わないという女の子もいます。そんな女の子のために、ファイルサーバーとメディアプレイヤーのインストールをしてあげましょう。1カ月に1度、新鮮なOpera Uniteが女の子のOperaに届くようにするのです。Opera Uniteを楽しむのも、女子力アップに必要なポイントなのです。もちろん、音楽パネルなんてオワコンはあなたが引導を渡してあげてください。
　
ここでOpera男子たちにお願いです。上記の5つの手伝いは、ブラウザ偏見を持ったり、Opera信者増加目的でやらないでください。女の子からすると、好きでもないOpera男子のブラウザ偏見は非常に重荷なのです。もちろん、面識がある女の子にちゃんと話してからするようにしましょう。面識がない女の子に突然やったりするとトラブルになりますからね。

あくまで女の子の男友達として、無償の精神でバックアップしてあげる存在として手伝ってあげましょう。見返りは求めてはいけません。あくまで親しい友だちの女の子に対するお手伝いなのです。ネットストーカーはもちろんのこと、あらゆることを強要したり(Opera使えとか)押し付ける(キーボードブラウジング最高！とか)と警察沙汰に発展することもあるのでご注意くださいね。

元ネタ
男の子ができる女の子の「女子力アップ」の手伝い5つ – Be Wise Be Happy Pouch［ポーチ］
自分で書いていて意味が分からなかった。

Colorful favstarを更新しました。

2011-05-20T00:52:00.000+09:00

Opera Next対応です。
ダウンロードはこちらかどうぞ
http://ja.opera-wiki.com/Project:拡張広場

【2011年版】git+Vim環境を構築する

2011-05-03T15:14:00.002+09:00

前口上

全国2000人くらいのgit+Vimファンの皆様こんにちは。
今日も元気にVim触っていますか。
git push、git pullしていますか。
今回この記事をまとめたのは、快適開発環境を手軽に作るためです。
今、学生やノンプログラマでVimやgitに触ってみたいなぁと思い始めてる人の参考になればなと思います。

目的

USBで持ち運べるVim環境の構築を目指す(ここでは、Cドライブ直下に作成してるけど、ドライブ名を変更すればUSBメモリでも使用可能)
gitとの親和性をアップする
(出来れば、Vimでかなりのことが出来るようにしたい)

対象読者

下記の項目に一つでも当てはまるならば、大丈夫です。

コマンドプロンプトでの作業が苦にならない
キーボードで操作する自分がちょっと好き
いい加減、gitに触れてみたいけど、どうやって環境構築すれば良いか分からない
gvimによる作業が最近楽しくなってきた
Windowsって$HOMEが判りづらい場所にあるのでィラッとしている
そろそろ、魔法遣い[Wizard]になりたい
Vundleでプラグイン管理したい
vimshell萌える。vimshellたん、はぁはぁ

導入するplugin一覧

vundle(必須): git clone git://github.com/gmarik/vundle.git
neocomplcache.vim(必須): git://github.com/Shougo/neocomplcache.git
zencoding-vim(必須): git://github.com/mattn/zencoding-vim.git
vim-surround.vim(必須): git://github.com/tpope/vim-surround.git
vimshell.vim(推奨): git://github.com/Shougo/vimshell.git
unite.vim(推奨): git://github.com/Shougo/unite.git
vimproc(推奨): git://github.com/Shougo/vimproc
quickrun.vim(推奨): git://github.com/thinca/vim-quickrun.git
git-vim(推奨): git://github.com/Shougo/git-vim

メモ

殆どShougoさんのやん……
今、vimのプラグインは殆どgithubで手に入るね←これ、重要

実際の手順

Vimのダウンロード
Kaoriya版を落とす
http://www.kaoriya.net/software/vim

Portable Gitのダウンロード
msysgitのportable版を落とす
http://code.google.com/p/msysgit/

俺俺Portableディレクトリ生成バッチをCドライブ直下に作成し、実行する
(cmd.exeを立ち上げても良いし、ダブルクリックしても良い)

mkportable.bat
```
:: make portable dirctory
@echo off
mkdir portable
cd portable
mkdir home
mkdir apps
```

ファイルのコピー
VimとPortable Gitを展開して、appsにコピーする
(vimのディレクトリ名とportable gitのディレクトリ名はそれぞれ変更しておく事)
ディレクトリ構成はこんな感じ
```
+portable
 +home
 +apps
  +vim
  +git
```

C:\portable直下に、以下のbatを作成し、実行

startgit.bat
```
:: for git
@echo off
@set PATH=%PATH%;C:\portable\apps\git\bin;C:\portable\apps\vim;
@set HOME=C:\portable\home
cd %HOME%
start bash --login -i
```
こうする事で、$HOMEがC:\portable\homeになる上、使いづらいコマンドプロンプトが多少使いやすいbashライクになります。

以下のコマンドを試してみてください。
```
git --version
gvim --version
```
成功していれば、それぞれバージョン番号が表示されます。

コマンドが上手くいかない場合は大抵パスが通っていません。
startgit.batの内容を確認して下さい。

gitの設定
ユーザ名とメールアドレスは自分の物を利用してください。
```
git config --global user.name "Arc Cosine"
git config --global user.email "arc@tunsns.net"
```

profileを変更する
apps/git/etc/profileに以下の一行を追加
```
export GIT_EDITOR=gvim
```
こうする事で、githubにコミットする時日本語が使えるようになります(多分)

home/.sshフォルダを作り、秘密鍵をコピーする。(飛ばしてもおｋ)
この作業は必要があればです。
よく分からない人は作業しなくても問題ありません。

home/.vimフォルダを作る
後述しますが、home/.vim以下にvundleプラグイン一個だけ入れます
以下のコマンドを実行してください。
```
cd /c/portable/home
mkdir .vim
```

vundlerを追加する
homeで作業します。
以下のコマンドを実行してください。
```
cd /c/portable/home
git clone git://github.com/gmarik/vundle.git .vim/vundle
```

_vimrcを編集する

まず、コマンドラインで以下のコマンドを入力します。

start gvim _vimrc

gvimが起動しますので、下記のセッティングを追加します。vimの基本操作は頑張って勉強してください(ぇ

"for vundler

set rtp+=~/.vim/vundle/
call vundle#rc()
Bundle 'Shougo/neocomplcache.git'
Bundle 'Shougo/vimshell.git'
Bundle 'Shougo/unite.vim.git'
Bundle 'Shougo/git-vim'
Bundle 'Shougo/vimproc'
Bundle 'tpope/vim-surround.git'
Bundle 'thinca/vim-quickrun.git'
Bundle 'mattn/zencoding-vim.git'

:BundleInstallを実行して、感動する←これ大事

vimprocをコンパイルする(飛ばしてもおｋ)
これは、出来る人だけ。
MSYSとか入れて入れば普通にmakeすれば出来る。
わからない人は、vimshellとvimprocとunite.vimを入れなければおｋ．

以上で環境完成です。お疲れ様でした

蛇足

https://github.com/ArcCosine/vimconfig
僕の_vimrcと_gvimrcです。
これを突っ込めば、見た目と操作感が僕の使っているvimっぽくなります。
とはいえ、素人にはオススメできない、諸刃の剣。
後、まだ構築途中なので、本気モードじゃない←
つまり、まだこの_vimrcは3段階返信出来るのです。
これがどういう意味かお分かりですか。
(オチ無し)

IE9が動いた。

2011-04-28T14:35:00.000+09:00

IE9をWindows XPにインストールしよう。 | Ginpen.com
http://ginpen.com/2011/04/26/ie9-on-winxp/

↑の記事に釣られてやってみたけれど、めちゃくちゃ時間がかかりました。トータルすると１８時間くらい。
こんだけの労力がかかるけれども、得られる結果は……。
素直にWindows7買ったほうが良かったです(´；ω；｀)。

#俺、今月の稼ぎが良かったらWindows 7買うんだ……。

gitメモ書き

2011-04-27T01:32:00.000+09:00

gitコマンドのメモ書き
よく使うコマンド

1)git add .

開発したディレクトリで、これを実行すれば自動的に全部追加してくれる。

2)git commit

コミットする。

3)git push origin master

masterをoriginに反映する。githubへアップロード(？)みたいな感じ

4)git pull

originから持ってくるイメージ。subversionのupdateみたいなの

5)git clone git://……

githubからゴンゴンデータをコピーするためのコマンド
多分、絶対違う

まだ、gitは勉強中なので、間違っているけれどこんな感じで今は理解しているという事で。
今後、正しい形を覚えたらまた更新しよう。

角換わり腰掛け銀の勉強

2011-04-25T01:56:00.000+09:00

角換わり腰掛け銀同型の勉強をしています。
昔の棋譜を並べつつ、定跡をつらつらと追っていますが、この形は本当に深く研究されているんだなぁと改めて感じます。
先手側は、１手の差で相手を追い詰める美学みたいなものを感じます。
後手側は、１手を躱して一気に仕留めるという意気込みを感じます。
僕の棋風からすると、後手側を持つ方が勝ちやすそうなのですが（カウンターが好きなので）、どうもこの戦型に関しては先手を持ちたいという気持ちが強いです。
やっぱり、一方的に攻めて勝てるならば最高ですし、少ない駒できっちりと切り落とすという結果を何度も見てると、この戦型の楽しさみたいなのを感じます。
＃まあ、そのかわり敗戦譜は酷すぎますが

今その研究の棋譜のサイズを見たら30kb超えててちょっと笑いました。
普通の棋譜は10kbくらいなので、3倍もの差があるとは思っていなかった。
いっぱい勉強して、この将棋を自分のものにしたいと思う
＃まあ、研究しても、結局実戦で指さないと全然意味ないんだけどね

以前は８四歩からの定跡をあんまり知りませんでしたが、今だったら自信持って８四歩が指せますね。
もちろん、どっかで抜けがあってぼろ負けするという道が無いわけでは無いですが、将棋の奥深さみたいなものを垣間見れてちょっと嬉しい気分です。

後手番で勉強したいなぁと思っているのはゴキゲンの超急戦。
先手番が絶対有利だと思っていますが、案外２４のような短期決戦では後手の方が有利なのではと思っています。
自分で攻める側だけでなく受ける側を持つと視野が広がりますしね。

そんな感じで自分のレパートリーをどんどん増やして気づけばオールラウンダーになるんですね、分かります。
アマチュアでオールラウンダーってどーよって思うのですが、かっこ良いので頑張りたいと思います。
かっこ良いので（大事なことなので二回（ｒｙ））

＃ふと思ったのだが、こういった棋譜ファイルもgit等でバージョン管理したらいいんじゃない？＠自分

Operaでルビ表示

2011-04-15T09:38:00.000+09:00

アホなもんで、userjavascriptでやろうとしてましたが、既にCSSの先駆者が2名ほどいました。

ashizukaさんと
Operaにおけるルビ表示 - Shishimushi

kurumanさん
Operaでルビをそれっぽく見せるユーザスタイルシート (kuruman.org > Kuruman Memo)

~~またお前らか~~流石ですね！！！

kurumanさんのスタイルが大変素晴らしかったので、そのままコピペして適用しました。
ただ、rubyのvertical-align:-30%;が微妙に好きくなかったので削らせていただきました。
使いたい方はどーぞ。

@charset  "UTF-8";
ruby ,
rbc ,
rtc ,
rb ,
rp ,
rt {
 display: inline;
 vertical-align: baseline;
 white-space:nowrap;
 text-indent: 0;
}

ruby {
 display:inline-table;
 text-align:center;
 text-indent:0;
 line-height:1;
}

ruby > rb ,
ruby > rbc {
 display:table-row-group;
 line-height:1.2;
}

rbc ~ rtc ,
ruby > rt {
 text-align:center;
 font-size:60%;
 line-height:1;
}


ruby > rt {
/* display:table-header-group;*/
 display:table-caption;
}

ruby > rbc + rtc {
 display:table-caption;
}

ruby > rbc + rtc + rtc {
 display:table-footer-group;
}


rp {
 display:none;
}

Opera Dragonflyが始まっていた

2011-04-15T02:26:00.003+09:00

いつもの前振り

全世界の1兆6千万のOpera愛好家の皆様、ごきげんよう。
今日、(というか昨日)、Operaの新機能に気づいてしまったので、思わずその情熱をここに書き綴りたいと思います。

Operaでもconsole.log(たぱーん)ってしたかった

今日、Twitterで
「operaのdragonflyはいつになったらconsole.logで中身がたぱーんって出来るようになるんですか？」
って呟いたら、edvakさんから数秒後に、
「@ArcCosine 既に見られるよー。Error Console っていうタブだと見られないけど Scripts っていうタブだと見える。」
って返信がありました。
え。マジで？と思ってDragonflyを立ち上げて確認しました。
スクリプトタブはいつも「ソース」しか確認していなかったのですが、「REPL」というタブが問題のタブでした。
以前はここメチャクチャ使い辛い1行javascript実行コンソールってイメージだったのですが、既にそれは過去のモノになっていました。
例えば、console.log(document.body)と入力すると、HTMLBodyElementと出力されて、クリックすると直ぐにDOMタブへ移動します。
他にも、a={"hoge":"fuga","piyo":"nya-"}とか入力すると、Objectの状態などをがっちり表現してくれるじゃあーりませんか。

当然、ページに仕込んだconsole.logや、さらにUserScriptに仕込んだのもばっちり表示される。

誰だよ、DragonflyはCSS用だって言った奴！出てこいよ！！！

これから僕、REPLタブでデバッグするんだ……。

Dragonfly始まった。いや、始まっていた！！

Xデーは2010/12/16

いつ搭載されたんだろうと思って調べたら、以下の記事がひっかかりました。
Opera Dragonfly - Opera Dragonfly for Opera 11 goes final, and a new experiment
この日が最初かどうか分かりませんが、少なくとも、REPLタブが機能したよという公式発言の最初の日っぽいです。
実に4ヶ月もその機能を見逃して、エラーコンソールとずっとにらめっこしてました。
これからはスクリプトタブのREPLがWeb開発者の標準ですねっ
それでは、楽しいOpera開発生活を。

GAEのメモ書き

2011-04-10T00:32:00.000+09:00

サブディレクトリに作成したモジュールをimportさせたい時は、__init__.pyをサブディレクトリ内に作成する。
モジュールへのアクセスは、「サブディレクトリ.ファイル名」で行う。

参考：Python ランタイム環境 - Google App Engine - Google Code

普通と特別

2011-04-02T22:58:00.002+09:00

ふと思いついた事です。
多くの人は二種類の相反する感情を持っていると僕は思います。
それは、
自分は「普通」だ
と
自分は「特別」だ
の二つです。
もちろん、そんな事を欠片も思ったことない人は居ると思いますが、この相反する感情は何度も湧き上がってはお互いに打ち消し合っているのではないでしょうか。
自分が特別であると感じたい、思いたいという欲求は誰にでもあると僕は思います。
しかし、同時にそのような「異端」な状態は避けたいという感情も同時に出てきます。
どちらを優先するかはその人の人生観にかなり左右されますが、僕が観察する限り、かなりの人が自分は異端でではない、つまり「特別」ではなく「普通」である事を望んでいる傾向が強いと感じています。
なぜ、そんなにも普通を求めるのでしょうか。

まず、この日本という土壌というか風土の影響があると思います。
和を以て貴しと為すという言葉があるくらい、日本は「和」を重視する傾向があります。
これは日本独特の雰囲気だと思います。

そして、少なからずともかなりの人はその風土の影響を受け自分が普通であろうと「努力」してるきがします。

このような文章を僕が書いている時点で皆様気付かれていると思いますが、僕は自分が普通というより異端であると思い込む傾向が強い人間です。
というよりも自分が常に特別でありたいと願い続けてもいます。
とはいえ、僕自身、短い人生経験を通して自分が特別というよりかはやや異端なだけで、普通の範疇に十分収まる矮小な人間であることは理解しています。

だからこそ、余計に自分が「特別」であるという事を意識したいと思います。

というよりは、そもそも普通な人なんぞどこにも居ないというのが今回の主旨です。
誰も彼もが必ず「特別」な何かを持っています。そして、それが「普通」だと僕は認識しています。

英語的な表現をするなら誰しにもギフテッドがあると思っています。
それを自覚してるかしてないかというのはありますが、まあ、大抵はギフテッドを自覚できないのが普通だと思います。
その人の特別性、つまりスペシャリティは、他人というフィルタを通すことで初めて明らかになると僕は思っています。
なので、自分が特別だと理解出来ないのはしょうが無いのかなぁと僕は思います。
実際、僕自身どの辺が特別なのか欠片も理解していません。
せいぜい、他人よりも一部の興味を持つ分野に対して異常にのめり込むという特性以外は極々退屈で平均的というよりは、平均よりも劣る程度の能力の持ち主だと思っています(それはそれでまた特別なのかもしれませんがね)。

ま、ともあれ。
自分自身は世界中に置いて誰の代わりにもならない特別な存在だって事を理解出来ると幸せなんじゃないかなと僕は思うわけです。
それを誰にも認められなかったとしても、自分が認めてあげるならばどんな状況下でも幸せになれるのではないでしょうか。
そう、僕のように。

結論：ナルシスト乙。

teiden-notifierを使ったサービス作ったよ　～Blackout Tokyo～

2011-03-30T02:32:00.000+09:00

それは、Twitterで見かけたつぶやきでした

makotoさんが、深夜にぼそっとつぶやいたリンク先には素晴らしいモノが眠っていました。

http://tomato.myftp.org/dev/teiden-notifier/ 取り敢えずここまでこぎつけました!

teiden-notifier: 全自動計画停電情報配信システム

おお、この時期に丁度良い。
しかも嬉しいことにjsonで提供されてる！で、ごにょごにょしようとしたのですが、JSONP対応してなくてショック。
まあ、Proxy書いたら一発だよねー。って事で、久々にPythonでProxy書いて、GAEにうｐしました。
作成時間は3時間w

サービス名「Blackout Tokyo」

Blackout Tokyo
別にたいしたこと無いサービスです。
JSONを単純にレンダリングしてるだけなので、面白みが無いです。
uupaa.jsで作ったので通信部分とかパース部分とか超楽チンだった！
良かったら、使ってやってください。

直近十局で振り返る、R1333点への道

2011-03-20T01:59:00.011+09:00

非常に私事で申し訳ないのですが、将棋倶楽部24で最高レーディングの1333に達しました。
そこで、1333点までの道のりを直近10局で振り返ってみたいと思います。

一局目

二局目

三局目

四局目

五局目

六局目

七局目

八局目

九局目

十局目

Twitterの安否確認ツール作りました。

2011-03-17T13:05:00.000+09:00

安否チェッカー
安否ったーをただパクっただけです。
本家との違いは、IE8でちゃんと動く、ちょっとJavaScriptをチューニングしてるくらいです。

尚、TwitterのAPIを異常な速度で消費しますので、ご使用の際にはAPI残量を確認してお使い下さい。
以上です。

東京は今、静かにパニックが始まっている

2011-03-15T14:19:00.001+09:00

スーパーに行って来ました

今日、スーパーに買い物に行ったのですが、密やかにしかし、確実にパニックが始まっている事を実感しました。
特に、トイレットペーパー、パン類が根こそぎ売り切れ状態になっているのを目の当たりにすると、ショックを受けます。
僕自身、ここ数日間のニュース、及び余震で本当にキツイ精神状態ではありますが、どうやらまだギリギリ正気を保っているようです。

パニックだと感じた理由

パンが売り切れになるのは、仕方がないと思います。最悪調理出来なくなった時を想定しているからだと思います。
ただ、買う量が異常だと思います。
買い物袋目一杯にパンを詰め込んで買ったところで、賞味期限を考えると普通に消費しきれない事は目に見えています。

これから1週間パンだけの生活ですか。
結局カビらせて捨てることになったら、それ、本当に意味が無いですよね。
自分が買った量をどれぐらいのスピードで消費するのか理解していますか。

トイレットペーパーだってそうです。
1日で12ロール使い切るような生活してる家族は日本でも極稀なのに、なぜそんなに買い込むのか。

一呼吸置いて考えれば、別に今無くても良い物を「余計」に買い込んでいる姿ははっきり言って、滑稽です。
しかし、その表情をよく観察すると不安で切羽詰まっているのが分かるので、笑うに笑えません。

どうすれば良いのか

「今必要なもの」を「必要なだけ」買う。
これに尽きます。
目安が分かりませんか？
食品なんて、せいぜい1週間しか持ちません。
それ以上長い期間保存できる品物はカップラーメンとか缶詰を除けば、そうそうありません。
なので、必要な量は1週間を目安にして買うようにしてください。

他人の事をもっと考えてください

問題なのは、停電関連で工場が停止してる今、一部の商品については在庫しかない状態が続きます。
というより、その在庫を根こそぎ買っていっているので、数日後には、必要が迫られている人に必要なものが届かない状態になるでしょう。
それを理解している人がどれだけいるのやら。

主婦の皆さんはもう少し他人の事を考えてください。
自分の家族が大事なのは分かりますが、貴女に出来ることなんざたかがしれています。
なので、無駄に多く買わないでください。
いつもどおり、必要なものを必要なだけ買ってください。
そうすれば、少ない物資を上手に、みんなに分配する事が出来ます。

貴女のエゴで、多くの人、多くの家族が犠牲になります。

そしてそれが「余計な人災」を生み出します。
私がちょっとくらい多く買ったから影響が出ない、なんて考えないでください。
そうやってちょっとが重なった結果がどうなっているのかを、貴女も目の当たりにしているではないですか。
落ち着いて下さい。

もし、既に買っちゃったならもうしょうがありません。
責任をもってちゃんと全部使いきって下さい。
ゴミとして捨てたらそれこそ、本当に意味が無いですからね。

もし、これから買いに行こうと思っているのでしたら、買い物リストを書いて、それ以外の物を買わないようにしてください。

今は本当に大変な状況です。
協力したいと願っているなら、自分が買うべき物をちゃんと吟味してください。

地震

2011-03-12T07:53:00.002+09:00

生きています。生存報告まで。

zipファイルの文字化け

2011-03-09T19:08:00.000+09:00

Zipファイルが文字化けしてた

今日、MacユーザさんからZip伸縮されたデータを受け取ったのですが、展開してみると普通に文字化けしていて使い物になりませんでした。
展開に使用したソフトは、Lhazで、Unicode対応！って謳ってはいたものの、今回のファイルは駄目でした。
んで、同じくUnicode対応と謳っているExplzhを使用したら文字化けせずに展開することが出来ました。
何が悪かったんだろうなぁ？

どちらも、フリーで公開されているので、本当にありがたいです。
メインは相変わらずLhazを使い続けたいと思いますが、緊急用にExplzhってのもありかもしれません。

本日のフリーソフト

残金が

2011-03-08T12:16:00.000+09:00

今月使用可能金額が3000円を切りました。ひゃっほぉ！！

どーしようｗｗｗｗ
まぁ、貯金を崩すしかなさそうですが、この時期は何かと出費が多いですなぁ（涙目）

新しい靴って大事だよね☆←ぉぃ

+WiMAXに釣られないために

2011-02-28T11:58:00.002+09:00

+WiMAXでauハジマタ！

本日、htc EVO WiMAX ISW11HTが発表されましたね！
気になる売り込み文句は
525円でWiMAX使い放題！
これをぱっと見たとき

「え？もしかして525円で毎月WiMAXが使いまくれるの？」
「やべえ、8円携帯超えたｗｗｗ」
「ちょっとau乗り換えてくるｗｗｗｗ」

みたいなノリになるのは普通ですよね。
実際僕もテンションがあがったのですが、大抵ウマイ話には裏がある。
なので、公式の資料を見ました。

auのAndroid (TM) 搭載スマートフォン「htc EVO WiMAX ISW11HT」の発売について〈別紙〉 | 2011年 | KDDI株式会社

「+WiMAX」月額利用料

(　ﾟдﾟ) ・・・ 
　 
(つд⊂)ｺﾞｼｺﾞｼ 
　 
(；ﾟдﾟ) ・・・ 
　 
(つд⊂)ｺﾞｼｺﾞｼｺﾞｼ 
　　_, ._ 
（；ﾟ Дﾟ） …！？

えっ？
えっ？

※ ご利用時には別途パケット通信料がかかります。

さすがau！おれたちにできない事を平然とやってのけるッそこにシビれる！あこがれるゥ！

まあ、ウマイ話には裏があるんです。
ちなみに、UQ Flatの年間パスポートを使うと、毎月3,880円でWiMAXとパケットが使い放題です。ひゃっほう！

皆様、公式ドキュメントは良く読みましょう。

JavaScriptの名前空間

2011-02-22T18:21:00.000+09:00

別にたいしたことでは無いんだけれども、JavaScript（クライアントサイド）のグローバル変数はwindow以下に適当に作られる。
なので、なるべくwindowを汚染せずにコードを書きたい場合は無名関数とか使って幸せになりたい。
でも、なんだかんだ言っても、結局はwindowに俺俺関数やら俺俺変数やら俺俺オブジェクトを追加しないと動かなくてムキーッってなるケースも多いので、そういう幸せはなかなか到達出来ない。
最も、冷静に考えてみたら名前が衝突するようなページなんていっぱいあるんだから、あまり気にせずにガンガングローバルを汚染して知らん顔するのが低レベル技術者として出来る唯一の方法かもね。

そもそも、そういうグローバルでデータをやりとりしなきゃいけないコードを書くなという正論には耳をふさぎます(∩ﾟдﾟ)ｱｰｱｰきこえなーい

クロスドメイン通信楽しいよねっ！←ぉぃ

KDDI版iPhoneだとっ！？　※これはコラ画像です。

2011-02-17T12:53:00.000+09:00

左上に注目！

KDDIって書いてあるー？！
ついに、KDDIにもiPhoneが来たか！！！
うひゃっほぅ！
ちょっとKDDI解約してくるわー！

アホか。

本日の元ネタ

ついにKDDI au版iPhoneのようなものの写真を発見！
画像をちゃんと見ると分かるのですが、一部元ネタ画像を加工してあります。
どこか分かるかな？

facebookボタン追加しました

2011-02-16T21:50:00.000+09:00

ついでに色々修正しました。
javascriptをbodyタグの直前に移動するとかね。
ぶっちゃけ、重くなっただけかも＼(^o^)／

はてなスターがハートになってやがる……っ！

2011-02-14T16:04:00.002+09:00

ネタです

くそっ、これが企業のやる事かよ……っ！
独り身である連中の事を考えずに……、ただイベントだからと言って盛り上げようとする……っ！
これが！　これが、どれだけ俺たちを苦しめているのかまるで分かっちゃいない……っ！
面白さ優先で、どれだけの独り身が傷ついているのか、考えもしない……っ！
ハートマークなんて、この時期一番見たくない記号なのに……っ！
俺は、いや、俺たちはお前たちから見れば、確かにクズだ。どうしようもない、救えない人種だ……。
だが…、いや、だからこそ……、こういうイベントに乗っかって悪乗りする連中を許しちゃ行けない！
克てっ……！　克つんだ……！　己に……っ！
リア充という、化け物どもに……っ！

角損からの粘り

2011-02-04T02:10:00.000+09:00

見てくれこの棋譜、どう思う？

すごく……へぼ将棋です。
ネタがかぶってるけれども気にしない。
角を損しても中盤相手がミスってくれたお陰で大逆転。
将棋は本当に難しいと感じた一局です。

ごき中超急戦新手？

2011-02-02T02:03:00.000+09:00

将棋倶楽部24で指してたら、こんな手を指されました。
先手が僕です。
初手から。

▲２六歩 △３四歩 ▲７六歩 △５四歩 ▲２五歩 △５二飛 ▲５八金右 △５五歩
▲２四歩 △同　歩 ▲同　飛 △５六歩 ▲同　歩 △８八角成 ▲同　銀 △３三角
▲２一飛成 △３二銀！

通常は８八角成なのに、このタイミングで受けられて一瞬で頭が真っ白に。
この後、８五飛成としたのですが、当然こんな弱い手は意味がなくボロボロと桂、香を拾われてぼろ負けしました。
今後、後手番を持って３二銀を指してみたいと思います。
アマチュア相手なら絶対有力だと思います。

もし、対策を知ってる方が居ましたら教えてください。

ふぁぼったーのアレを解消するスクリプト書いた。

2011-02-01T00:40:00.002+09:00

これは何？

ふぁぼったーの&を解消するコードです。
Opera限定だけど、ちょっと修正すればどのブラウザでも動くと思います。
ちなみに、先人が既に似たようなコードを書いていますので、無理に入れる必要はありません。

コード

// ==UserScript==
// @name      fix amp
// @namespace http://looxu.blogspot.com/
// @include   http://favotter.net/*
// @author    Arc Cosine
// @version   1.0
// ==/UserScript==
(function(doc){
  doc.addEventListener("DOMContentLoaded",init,false);
  function init(){
    var spans = doc.querySelectorAll(".status_text.description");
    for( var i=0,l=spans.length;i<l;i++){
      spans[i].innerHTML = spans[i].innerHTML.replace(/&amp;/g,"&");
    }
  }
})(document);

理想の萌えキャラを作成した

2011-01-31T00:00:00.000+09:00

どう見ても初音ミクさんです。本当にありｇ(ｒｙ
色とか適当だけれども、眼鏡にはこだわった。
赤い眼鏡はキュンキュンですよ、キュンキュン。

こちらで遊べます。
キャラメイクファクトリー -きせかえFlash-
ミラー先が幾つかありますので、ご注意を。

今まで拡張機能に頼って来なかった人がOperaにいれている拡張機能

2011-01-20T13:16:00.004+09:00

大分拡張機能も増えてきましたね

とはいえ、基本的には今までUserJSでなんとかなってきたので、僕はあまり拡張機能を入れていません。
そんなOpera好きな僕が厳選して入れている拡張機能機能を紹介します。

厳選拡張機能一覧

GMail Checker - Opera extensions
Gmailの新着チェックをしてくれる拡張です。Opera Mailを使用しない僕には必須機能です
逆に、Opera Mailをメインで使ってる人は入れても仕方が無い拡張とも言えます。
そもそも、メールはGmail使ってないよという人にもあまり意味が無い拡張と言えるでしょう
一言メモ：音が可愛いです
Image Preview Popup - Opera extensions
リンク先のイメージをマウスオーバーするだけで表示してくれる拡張です
たまに邪魔になる時があるのが残念ですが、慣れれば問題なし。
一々リンクをクリックしなくても良いので便利です。
一言メモ：アイコンのOperaたんが可愛いです
AntiBrowsniffer - Opera extensions
Operaで正常表示されないページをかなりの確率で正常表示してくれる拡張。
所謂「大手」のサイトで「Operaは対象外ブラウザです(ｷﾘｯ」みたいな事を書いてる所を躱すためのツールとも
筆頭はGyaoですが、YoutubeやPicasaといったGoogle先生の不具合にも対応してます。
ちなみに、Pixivでもこの拡張が有効になってしまうので、www.pixiv.netをexcludeを追加した俺俺AntiBrowsnifferを使っているのは内緒の話
一言メモ：Gyaoが普通に見れたことにちょっとびっくり
Coloful_favstar
手前味噌で申し訳ないのですが、favstar.fmをふぁぼったーみたいに色反映する拡張です。
ふぁぼったーのあの赤文字をfavstarで見れるようになります。
ふぁぼられが気になってしょうが無い方は是非インストールしてみて下さい
一言メモ：最初のバージョンはExtension Makerでビルドしました

最後に

実際、拡張機能は最低限で十分なのです。 20個も30個も入れないとまともに使えないブラウザは意味が無いわけでして。初めてOperaに触れる方でも、さほど戸惑わずに扱える拡張が多いと思いますので、安心して導入してみて下さい。以上です。追記リンクを一部修正しました。追記の追記一部が404になってたので、リンクを修正。Operaさん……。

XAMPPでSendmailを有効にする

2011-01-17T13:45:00.001+09:00

俺得メモ。

[mail function]のsendmail_pathがデフォルトではコメントアウトされているので、それを有効にする。
ちなみに、Windowsだと、"xampp/sendmail/sendmail.exe -t"って書いてあった。
exeなのかー。

僅か10分で出来る面白ネタです

2011-01-16T09:19:00.000+09:00

はてなプロフィールをいじろう

こんな風にねっ！！
ArcCosineさんのプロフィール - はてな
http://www.hatena.ne.jp/ArcCosine/

もう既に落ちているけど、解説を

はてなプロフィールの好きな○○って色々といじって遊ぶことができそうですよね。
なので、自分の好きな単語を入れてみると「ああ、この人はこんな事が好きなんだ」って事が相手に伝わります。
もちろん、態と嫌いな単語を入れて他人への印象を変えるという事も可能です。
そうすることで有意義な休日を過ごす事が出来るでしょう。
200%くらい気のせいでしょうけれども。

でも、そんな勇気無いよ……

あらあら、貴女はシャイなのですね。では、好きな言葉を入れましょう。
好きな言葉でしたら、どんな言葉を入れてもそう相手に誤解を与えずに済むでしょう。
ぱっと思い浮かびませんか？　それならば、僕がスペシャルな言葉をお教えしましょう。
入れる言葉の候補は二つあります。
・「Opera最強伝説」
・「IE死ねばいいのに」
お好きな方をどうぞ。
片方入れるだけで、僕が喜びます。
さらに両方入れたら、貴女に惚れます(比較的嘘100%ですが)
※尚、死ねばいいのにという柔らかい表現が大切です。ネット上で「死ね」とか「死ね死ね死ね死ね！！」とか簡単に言ってはいけません。通報されます。

貴方である僕はどうすれば……

成人男性は黙ってエビスビール飲んでれば良いんじゃないの？
未成年なら川原に向かって全力失踪するときっと黒歴史の1ページを増やせると思いますよ。

最後に

尚、これを実践して他の方から必要以上に不当な評価を得たとしても当方は一切責任を負いません。
自己責任にて実行願います。

やりたいことがいっぱいある

2011-01-14T01:15:00.000+09:00

それなのに時間が無いというのはよくある話。
なんとかして時間を作るか或いは見つけ出さないといけない。
無駄のある生活をしている訳では無いのに、逆に自分を追い詰めすぎて無駄が出てるのかもしれない。
効率を重視するならば時には一見非効率に見えることを行ったほうが最終的には効率的になるという話もよく聞く。
さて、僕はどうすれば良いのだろうね。

Google ChromeでDOMContentLoadedが発生しないケースがある

2011-01-04T19:34:00.000+09:00

タイトルのとおり

Google Chromeは大変速いブラウザですが、その速さ故か、たまにDOMContentLoadedが発生しないケースがあります。
以下のようなコードで再現確認できます。

HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>domcontentloaded test</title>
</head>
<script type="text/javascript">
  (function(d){
   d.addEventListener('DOMContentLoaded', function(){ alert('nya-'); }, false );
   var s = d.createElement('script');
   s.src = 'hoge.js';
   s.charset="UTF-8";
   var h = d.getElementsByTagName('head')[0];
   h.insertBefore( s, h.firstChild );
   })(document);
</script>
<body>
  <h1>debug</h1> 
</body>
</html>

JavaScript(hoge.js)

document.addEventListener('DOMContentLoaded', function(){ alert('nya-2'); }, false );

解決策

window.onloadにイベントを割り当てましょう。
具体的には以下のコード

var isLoad = false;

document.addEventListener('DOMContentLoaded', function(){ isLoad = true; alert('nya-2'); }, false );

window.addEventListener('load', function(){ if( !isLoad ){ alert('nya-2'); } }, false );

最後に

この現象は、たまたま今日見つけたものです。
もしかしたら、僕の環境だけで発生するレア現象なのかもしれませんが、同様のケースで困った方がいらっしゃいましたら、何かの参考にして頂けたら幸いです。

2010年を振り返る（駆け足で）

2010-12-31T09:11:00.000+09:00

今年を振り返ってみるか

今年も色々ありましたので、だだーっと羅列したいと思います。

・Zencoding導入により、コーディングスピードが10倍（誇張表現）に
・謎コピペ量産（主にOperaとか高専とか技術者ネタとか）
・IE6 must dieキャンペーン実施→今はもうやってない←えっ
・Opera Show with Twitter Searchを製造
・Vim like on Safari（笑）
・将棋熱衰えず
・コーディング熱衰えず
・本業が普通に忙しくなってきた
・Skypeが常駐するようになった
・Twitterに常駐（ｒｙ
・早起き日記開始。全然早起きじゃないけれど
・Opera 11！！
・Extension Maker（Opera限定）を作成
・Operaオフに初参加してた
・Ustreameを1回だけやった。来年の初めのほうでまた将棋ustしたい
・スレッドプログラミングに悩む
・久々にWindowsプログラミングをやって悩んでる
・JavaScriptの深淵を覗く
・gitに目覚める
・メールdeTwitterで結構遊ぶ
・昔読んだミステリを再読

とまあこの辺かなぁ。

最後に

今　日　も　お　仕　事　で　す　。

ありがたや、ありがたや。

Rubyのスレッドプログラミングで悩んでいます。添削お願いします＞＜

2010-12-29T02:47:00.001+09:00

Rubyのスレッドを一定数に抑えたい

この書き方がスマートかどうか分からないので、ブログにアップして添削を待つというWeb2.0な対応(意味不)
やりたい事は、Rubyのスレッドを一定数以下に抑えたい。
例えばスレッドを一気に20も30もがーっと立ち上げるんじゃなくて、5個とか10個とかこちらでコントロールできる範囲でそうしたい。

みんな大好きrubyコード

#thread test

require "thread"

def hoge(data)
  print "data is " + data + "\n"
  sleep 1
end


thr = []

list = ["a","b","c","d","e"]

list.each do |alpha|
  thr << Thread.new { hoge(alpha) }
  if thr.size() >= 3
    thr.each do |t|
      t.join
    end
    thr = []
  end
end
if thr.size() > 0
  thr.each do |t|
    t.join
  end
end

不満点

これだと、例えば3スレッドまで同時に処理するけれど、その全てのスレッドが終わるまで次のスレッドを生成しない(当たり前だけど)
3スレッド処理してて、その内の1つが終わったらすぐに次のスレッドを立ち上げるみたいな処理ってどうやって書けば良いんだろう。
正直、分かりません。悩んでます。

ブラウザの拡張をつくろう！

2010-12-13T15:16:00.002+09:00

いつもの前振り

初めましてもそうでない方もお元気ですか。
元気があれば何でも出来る！出来ません。

JavaScript Advent Calender、１３日目担当のArc Cosineです。

今回はJavaScriptのネタを何か書こうと思いましたが、どうせならツールの一つくらい作ったほうがいいだろうと言う事で土日に突貫工事で作ってみました。

Extension Maker
http://www.tunsns.net/ExtensionMaker/

時間切れで間に合いませんでしたが、Opera拡張だけは作れるようになっていますので、試してみてください。

チュートリアル

トップヘアクセスしたら右下にある「今すぐ試してみる」をクリックしましょう。
そうしますと、基本情報を入力する画面が出ますので、必要な情報を入力してください。
今は入力チェックしていませんが、将来的にはちゃんとチェックするようにします。

次に、コードを入力する画面が出てきますので、ここにコードを貼り付けましょう。
Operaで動くUserScriptを試しに貼ってみると良いでしょう。
例えば、僕が昔書いたcolorful_favstarとかね！
コード貼っておきますね。
コピペする場合は、view plainをクリックすると楽にコピペ出来ますよー。view plainの文字、薄くて見づらいけれど。

// ==UserScript==
// @name           Colorful Favstar.fm
// @namespace      http://moco.nond.es/
// @description    Change tweet color and font size by favourites count like Favotter.net.
// @version        0.1.1.20100808
// @include        http://favstar.fm/*
// @include        http://ja.favstar.fm/*
// @include        http://de.favstar.fm/*
// ==/UserScript==

(function(doc){
  var target = (window.opera) ? window : doc;
  target.addEventListener('DOMContentLoaded', init, false );

  function init(){
    var css = [
      '.theTweet {'
        ,'line-height: 1.4;'
        ,'color: #333;'
      ,'}'
      ,'.theTweet a {'
        ,'color: #1a75d2;'
      ,'}'
      ,'.cofav2 {'
        ,'font-weight: bold;'
        ,'color: #008e00;'
      ,'}'
      ,'.cofav3 {'
        ,'font-weight: bold;'
        ,'color: #5f008f;'
      ,'}'
      ,'.cofav4 {'
        ,'font-weight: bold;'
        ,'color: #5f008f;'
      ,'}'
      ,'.cofav5 {'
        ,'line-height: 1.3;'
        ,'font-weight: bold;'
        ,'color: #f40000;'
      ,'}'
    ].join('');

    var style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));
    document.getElementsByTagName('head')[0].appendChild(style);

    var favCounts = document.getElementsByClassName('favouritesCount');
    for (var i=favCounts.length; i-- > 0; ){
      var fav = parseInt(favCounts[i].innerHTML, 10);
      var parent = favCounts[i].parentNode.parentNode;
      if (!isNaN(fav) && fav >= 1) {
        setColorfulClass(fav, parent);
      }
    }

  }
  function setColorfulClass (favCount, node) {
    if (node.className !== 'tweetContainer') {return;}
    var tweet = node.getElementsByClassName('theTweet');
    if (favCount <= 4) {
      tweet[0].className += ' cofav'+favCount;
    } else if (favCount >= 5) {
      tweet[0].className += ' cofav5';
    }
  }
})(document);

オプション画面ですが、これは適当に作ってます。
コード部分に色々お遊びで入力した後、フォーカス外してどっかクリックすると、下のプレビューに反映されます。
changeにbindしていますので、非常に使いづらい仕様になっています。~~最悪ですね。~~

最後にOperaの輝かしいアイコンが表示されますのでクリックしましょう。
皆さんが常用している~~(普通はしてません）~~Opera 11でクリックすると普通にインストールしますかの画面が出てきますので、いきなりインストールして試す事が出来ます。
他のブラウザ(Chrome以外)でしたら、ダウンロード画面が出てくると思います。
Google Chromeでダウンロードしたい場合は、Altキーを押しながらクリックするとダウンロード出来るかもしれません。

謝辞

今回、UIの部分を手抜きする為に、uupaa.jsを利用しました。すっごい便利だよ！！
@uupaaさん、素晴らしいライブラリを提供してくださりありがとうございました。
そして、一番大事なZIP処理については、@amachangが作成した「無圧縮 ZIP を作って Data URI を生成するライブラリ」を利用しました。
こんな凄いコードを2年前に作っているとは……。本当にありがとうございます。

そして、楽しいAdvent Calenderを用意してくれた、@edvakfさん、ありがとうございました。

それでは、良いJavaScriptライフを。

以上です。

新しいはてなブックマークボタンにしてみた。

2010-12-01T09:19:00.001+09:00

テンプレートをいじれば誰でも簡単に新しいはてなブックマークボタンを利用することが出来ます。
Bloggerに慣れた人なら簡単だね！！！
……そんな簡単に直せませんって。

<div class='post-header'>
 <div class='post-header-line-1' style='margin: 10px auto 1.5em auto;'>
    <b:if cond='data:post.url'>
    <a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' class='hatena-bookmark-button' data-hatena-bookmark-title='data:post.title' data-hatena-bookmark-layout='standard' title='このエントリーをはてなブックマークに追加'><img src='http://b.st-hatena.com/images/entry-button/button-only.gif' alt='このエントリーをはてなブックマークに追加' width='20' height='20' style='border: none;' /></a><script type='text/javascript' src='http://b.st-hatena.com/js/bookmark_button.js' charset='utf-8' async='async'></script>
    </b:if>
    </div>
 </div>

5分で作るOpera エクステンション

2010-10-26T01:26:00.000+09:00

5分で作るOpera エクステンション

Opera エクステンションがやって来るヤァ！ヤァ！ヤァ！

Opera11が発表されましたが、皆様いかがお過ごしでしょうか。
開発者でない人でも、簡単に作れるOpera　エクステンション。
作成するファイルは僅か5つ。
・index.html
・background.js
・popup.html
・test.png
・config.xml
早速、作ってみましょう。

用意するもの

Opera 11
あと、圧縮ツール。zip圧縮出来るならば、何でも良いです。

実際に作ってみよう

まず、index.htmlを作りましょう。

<!DOCTYPE HTML>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>MyTest</title>
  <script charset="UTF-8" src="background.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

次に、background.jsを作ります。

(function(win){
  win.addEventListener('load', function(){
     var ToolbarUIItemProperties = {
      title: "test",
      icon: "test.png",
      popup: {
        href: "popup.html",
        width: 200,
        height: 200
      }
    };
    var btn = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);
    opera.contexts.toolbar.addItem(btn);
  },false);
})(window);

次に、popup.htmlを作りましょう。

<!DOCTYPE HTML>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>description</title>
  <style type="text/css">
  h1 {
    font-size : 16px;
  }
</head>
<body>
  <h1>Hello! Opera Extensions</h1>
</body>
</html>

次に、test.pngファイルを適当に作ります。
64*64のサイズでしたら何でも良いです。
良ければ、これでも使ってください。

最後に、config.xmlを作ります。

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets">
    <name>Opera ExtensionTest</name>
    <description>Opera Test</description>
    <author href="http://looxu.blogspot.com/">Arc Cosine</author>
    <icon src="test.png" />
</widget>

これで必要なファイルは出来ました。

圧縮して、リネーム

index.html、popup.html、background.js、config.xml、test.pngを選択して圧縮します。
間違えても、それらが入っているフォルダを圧縮しないようにしましょう。動かなくなります。
最後に拡張子をoexに変換すれば準備完了。
Opera11にドラッグ＆ドロップする事でインストール出来ます。
アドレスバーの右側にアイコンがうまく表示されましたか？
アイコンをクリックすると、Hello! Opera Extensionsが表示されるはずです。

最後に

実際にWebページへの操作を実行するにはこの直下にincludesディレクトリを作ってUserScriptコードを書く必要があります、その辺は公式ドキュメントを御覧ください。
参考：Converting UserJS to Opera Extensions - Opera Developer Community
さぁ、貴方も今すぐOpera エクステンション開発をはじめよう！

連想配列を使おう

2010-10-25T23:40:00.000+09:00

きっかけ

JavaScript関係のエントリで気になるコードがありました。
それは、以下の二つ
半角カナのスタイル名を全角カナに変換する - 名もないテクノ手
JavaScriptで半角英数字を全角英数字に変換する関数｜本を買わずに解決するWeb制作の小技

問題点

どちらも、半角と全角の変換をするだけの簡単なコードなのですが、その変換用の辞書に使っているのが二つの配列というのがちょっと残念。
この程度の量であれば問題ないのですが、こういうコードメンテは大変面倒です。
辞書が増えて、配列の「順番」が変わった時にバグるという危険性も含まれています。
それでは、こういう時にはどうすれば良いのでしょうか。

連想配列を使いましょう

良く、ハッシュとかマップとかそういう言葉で表される概念です。
簡単に言うと、あるキーワードを与えると、それに対応する値を返す仕組みです。
僕も、この方法を覚えるまではかなり効率の悪いコードを書いていましたが、覚えてからは断然こちらの方法が良いことに気づきました。
メリットは二つあります。

高速
データの関連性が見やすい

前者はパフォーマンスのメリット。後者はメンテナス性のメリットです。
高速なのは、データを1:1で処理出来るからです。
また、メンテナンスがし易いのは、データが1:1で表現されているからです。
連想配列で参考になったのは、@amachangのエントリです。
(参考URL:JavaScript の配列と連想配列の違い - IT戦記.)
実際に、具体例で考えましょう。

連想配列はこうやって使う

半角英数の場合だと、1文字なので、こんな感じで対応出来ます。

function change(text){
    var dic = {"a":"ａ","b":"ｂ" };
    var ret = [];
    for( var i=0,len=text.length; i<len; i++ ){
        var key = text[i] 
        ret.push(dic[key]);
    }
    return ret.join("");
}
var str = change("ab");
alert(str);

半角カナだと濁点や半濁点が2文字扱いですで、こんな感じで工夫します。

function change(text){
    var dic = { "ｳﾞ":"ヴ","ｺﾞ":"ゴ","ﾊﾟ":"パ","ﾎ":"ホ","ﾙ":"ル" };
    var ret=[];
    for( var i=0,len=text.length; i<len; i++ ){
        var key = text[i];
        //次の文字が濁点or半濁点の場合の特別処理
        if( typeof text[i+1] !="undefined" && /ﾞ|ﾟ/.test(text[i+1]) ){
            key += text[i+1];
            i++;
        }
        ret.push(dic[key]);
    }
    return ret.join("");
}
var str = change("ｳﾞｺﾞﾙﾊﾟﾎ");
alert(str);

変数dicが連想配列です。
キーと値は"キー"："値"という書き方で結びつけます(これが上記で書いた1:1です)。
後はそれをカンマで繋ぎ、{}で囲うだけです。
細かいことを言えば、値の部分は別に文字列限定って訳では無いのですが、その辺はJavaScriptに詳しくなってから理解したほうが良いと思います。
(キーの所も、半角英数ならば「"」が省略できますが、それもある程度理解が進んでからで良いと思います)

JavaScriptの連想配列は非常に便利ですので、是非覚えて下さい。

蛇足

最も、半角／全角変換はこういう変則的なコードを書かずに、正規表現で変換するのが一番正しいやり方だと思います。

高専にはアホしかいない.

2010-10-22T14:02:00.002+09:00

ネタです

高専っていうのはつまらないところだ.

アホしかいない.

学生も骨がないのばかりだし, 本当にただの学生である. それは違う. 研究室の学生は教官と対等である. それが研究というものだ. 授業においてはそうではないかも知れない. しかし, 研究室に入ったからには独立の精神を持って自分の意志で研究テーマを選択し実行しなければならない. こんな当たり前のことがほとんど行われていない. というか皆無である.

これではどこぞの三流大学とどう違うのだ. 高専生の気概を持つべきである. おれたちはエリートなのだという意識を持ち, 教官のいうことにはまず逆らうことから思考すべきである. なんでもはいはいと言うことを聞いて, それではダメだ. 大体において, なんでもかんでも正しいアドバイスが出来る人間が高専の教官なんかやってると思うのか？

おれたちは, これから日本を引っ張っていく人材にならなければいけない. その時におれたちにアドバイスをくれる人間はいない. 常に自分たちで思考し, みんなを引っ張っていく必要がある. それは三流大学の学生との違いだ. 彼らは教官のいうことを大人しく聞くことが研究であるが, おれたちは教官と対等に意見することが研究だ. これが出来なければ, 一体どの世界でリーダーになれるというのだ.

もちろん, 研究能力において教官というのは多少は優れてるのだろう. 特に論文の書き方についてはまぁまぁ従うべきだ. しかし研究の内容については, とことん言い争うべきだ. 納得行かないことがあればとことん反論すべきだ. はい分かりましたはい分かりましたと連打するような学生であってはいけない. 研究テーマがつまらんと思ったらとことん拒否すべきだし, 教員の無能さを見抜けばとことん指摘して攻撃すべきだ. 場合によっては精神的に潰しても問題ない. というか, おれは教員というものが向上していくとすればそれは学生との対話の中でしかないと思っている. 彼らにとって, 学生と対話したことは生涯における価値なのだ. 学生と対話することを拒否するような教員は教員失格であろう. 一体何のために生きているのか. そんなに教官であることが誇らしいのであれば, おでこに私は高専の教官ですとマジックで書いて闊歩してみなさい.

日本人の教官にすら意見出来ない人間が, どうして外国人相手に対等に勝負が出来るのだ. もっと骨のある高専生になろう. エリートとしての意識を高く持とう. 気高く生きよう. おれたちがダメならば世界に負けてしまうんだ. おれたちが戦うんだという気概を持った「高専生」になろう.

元ネタ

京大にはアホしかいない. - とある電気系出身者のいんでっくす

共感した部分

タイトルと二行目だけ。
以降は高専には当てはまったり当てはまらなかったりな感じ。
真面目な人だったら心がぐさぐさ痛むのだろうけれど、如何せん、高専生だからなー。
笑っておしまいって落ちが見えてしょーがない。
この人が定義するアホと僕が定義するアホの意味合いが違うので、しょーもないけれど、比較的近い概念で当てはめるならば、僕の中での阿呆はこの人のアホと似ているのかもしれない。
似ていないのかもしれない。

あから2010が指した５七角について

2010-10-18T22:56:00.000+09:00

この記事を読む前に

罪山罰太郎さんのこのエントリを先に目を通してください
■【レポート】プロ棋士vsコンピューター - 「あから2010」の威力を目撃してきた (1) 歴史的な対局が行われた | エンタテインメント | マイコミジャーナル
■俺の邪悪なメモ - ハートキャッチあから？！
ついでに、脳内将棋盤を用意してください。

５七角は本当に理外の一手なのか

マイコミジャーナルの方で書かれていますが、５七角は果たして理外の一手だったのでしょうか。
控え室でも検討されていなかったとありますが、改めて冷静にこの局面を分析してみたいと思います。

まず、後手の詰み筋を読んでみます。
先手の持駒は飛車と桂馬のみ。
この玉を詰ますには角と金が必要になります。
盤面上の５七角と６九金が先手の持ち駒だとしましょう。
そうすると、以下の手順で詰みます。
▲７四桂馬打△同歩▲同桂△７三玉▲８二角△７四玉▲７五金まで
△７四玉の局面で８四玉と逃げる手にも▲７五金、△９四玉に▲９五飛があります。
ただし、持ち駒が飛車だけだとの▲７五金が▲７五飛になり８四玉と逃げられてギリギリ詰みません。
つまり、この局面危なそうに見えますが、角１枚までなら渡しても大丈夫。
そして、先手陣の一番働いている駒は実は６六銀。これが７四桂打からの攻めの威圧感を強めている手でもあるのです。
先の変化で考えると分かるとおり、７三玉からの上部脱出を防ぐ駒なんですね。

その駒と角を交換するのは一見、損に見えるのが普通の感覚。

じゃあ、局面を進めて見ましょう。
先手が一手パスをしたとします。そうすると後手はどう指すか。
△６六角左▲同歩△同角成▲７七桂

この局面になって後手が一手パスしたとしても、後手はまだ詰みません。
つまり、
▲７四桂馬打△同歩▲同桂△７三玉▲８二角△７四玉▲７五飛△８四玉▲８五飛△９四玉
最後は９四に逃げる事ができる上、８四歩と突いて下に脱出する事も可能。
なので、ギリギリではありますが、まだまだ後手陣は耐久力がある訳です。

もっとも、後手も先手も共に一手パスしてるので、絶対にこの局面にはなりませんけれどね。
とはいえ、そういう筋で攻めても耐えられる訳です。

そう、この手は理外の一手というよりも、自分の陣形の耐久力をしっかりと計算した上で指した理詰めの一手なのです。

じゃあこれで先手必敗なの？

僕の前に上げた感想文では、ここで先手敗勢と書いてありますが、今読みなおしてみると▲７八銀という手があったと思います。
角に当てつつ、真の狙いは６九に落ちている金です。
どこかの変化で２九飛と引く形になれば後手は角を渡せなくなります。
（例えば、▲７八銀△４六角成に▲２九飛とか）
他にも、△６六角左▲同歩△同角成の局面で▲７七銀と当てる手も見ています。
そのような変化になれば、２四に飛車が走る展開が見えますし、穴熊にも潜れますし、むしろ先手優勢なのかもしれません。
同金や同角成なら喜んで同飛と取って一手勝ちを狙うことが出来ます。
もちろん、そういう変化には飛び込まないと思いますけれどね。
こうして読みなおしてみると、後手の耐久性や先手の意外な受け＋攻めの手筋など将棋の奥の深さを感じます。

これ信じていいの？

かなりの勝手読みなので、この順が正しいかどうか分かりませんが、こういう読み方もあると思っていただければ幸いです。
なるほど、全くわからんという結論でも構いません。
脳みそのシナプスを活性化できたら幸いです。
今日のエントリは以上です。

ニコニコ動画用の自作スクリプト更新

2010-10-15T16:56:00.001+09:00

またニコニコ動画のHTMLが変わりましたね

そのままだと不便なので、自作スクリプトを更新しました。

nicovideodown.js

userscripts.orgに更新しました。
http://userscripts.org/scripts/show/84552へアクセスして、ダウンロードして下さい。
自力で直せる人は自力で直しちゃってください。

nico_description

今回から、DOMContentLoadedで発火するようにしていますので、ファイル名を「nico_description.js」に変更してください。
また、今まで無駄にオブジェクト指向していたのを撤廃して、ふつーに連想配列にしました。
これでいーよね。

// ==UserScript==
// @name      nico description
// @namespace http://looxu.blogspot.com/
// @include   http://www.nicovideo.jp/watch/*
// @author    Arc Cosine
// @version   3.0
// ==/UserScript==
(function(){

    var NDesc = {
      com_style : {
        'color' : '#1259C7',
        'text-decoration' : 'underline',
        'padding-left' : '5px',
        'cursor' : 'pointer'
      },
      options : [
        { 'text' : '広告表示',  'func' : function(){ NDesc.ad_toggle(); } },
        { 'text' : 'Video詳細', 'func' : function(){ NDesc.description_toggle(); } }
      ],
      init : function(){
          //add Input Box
          NDesc.createInput();

          //hide parts
          NDesc.description_toggle();
          NDesc.ad_toggle();

          //add focus key event
          document.addEventListener( 'keypress', function(e){
            if( e.target.tagName != 'INPUT' && e.keyCode == 32 ){
              NDesc.use_hotkey();
              e.preventDefault();
            }
          },false );


          for( var i=NDesc.options.length; i-- > 0; ){
            NDesc.createParts(NDesc.options[i]);
          }
        },
        createParts : function( data ) {
          var insert_node1 = document.querySelector('div.des_1 p.font12');
          var insert_node2 = document.querySelector('div.des_2 p.font12');
          var node = document.createElement('span');
          node.appendChild(document.createTextNode(data.text));
          for( var option in NDesc.com_style ){
            var st_op = option.replace(/-([a-z])/,function(m){ return m[1].toUpperCase();});
            node.style[st_op] = NDesc.com_style[option];
          }
          node.addEventListener( 'click', function(){ data['func'].apply(); } ,false );
          var node2 = node.cloneNode(true);
          node2.addEventListener( 'click', function(){ data['func'].apply(); } ,false );
          insert_node1.appendChild(node);
          insert_node2.appendChild(node2);
        },

        toggleObject : function( selector ){
            var target = document.querySelector(selector);
            if( target ){
              target.style.display = (target.style.display == 'none' ) ? '' : 'none';
            }
        },

        description_toggle : function() {
            NDesc.toggleObject('div.info_frm');
            NDesc.toggleObject('div.des_2 table');
        },
        ad_toggle : function() {
            NDesc.toggleObject('#WATCHFOOTER');
            NDesc.toggleObject('#PAGEFOOTER');
        },
        createInput : function(){
            if( window.parent != window ) return;
            var input_work = document.createElement('input');
            input_work.readOnly = true;
            input_work.autocomplete = 'off';
            input_work.style.margin = '0px 0px 5px 10px';
            input_work.addEventListener('focus', function(){
              input_work.style.backgroundColor = '#fcc';
              input_work.value = 'Hotkey available';
            },false );
            input_work.addEventListener('blur',function(){
              input_work.style.backgroundColor = '#9D9';
              input_work.value = 'Hotkey unavailable';
            },false );
            input_work.addEventListener('keypress', NDesc.key_event, false );

            var video_title = document.querySelector('.video_title');
            video_title.parentNode.insertBefore( input_work, video_title.nextSibling );
            NDesc.input = input_work;
        },

        use_hotkey : function(){
          NDesc.input.focus();
        },

        play_pause : function(){
          var flvplayer = document.getElementById('flvplayer');
          if( !flvplayer ) return;
          if( flvplayer.ext_getStatus() == 'playing' ){
            flvplayer.ext_play(0);
          }else{
            flvplayer.ext_play(1);
          }
        },

        volumeup : function(){
          NDesc.volume(5);
        },
        volumedown : function(){
          NDesc.volume(-5);
        },
        seekleft : function(){
          NDesc.seek(-10);
        },
        seekright : function(){
          NDesc.seek(10);
        },
        seek2top : function(){
          NDesc.seek(Number.NEGATIVE_INFINITY);
        },
        volume : function(vol){
          var flvplayer = document.getElementById('flvplayer');
          if (!flvplayer) return;
          var cur = Number(flvplayer.ext_getVolume());
          var to = cur + Number(vol);
          if (to > 100) to = 100;
          if (to < 0  ) to = 0;
          flvplayer.ext_setVolume(to);
        },
        seek : function(time) {
          var flvplayer = document.getElementById('flvplayer');
          if (!flvplayer) return;
          var len = Number(flvplayer.ext_getTotalTime());
          var cur = Number(flvplayer.ext_getPlayheadTime());
          var to = cur + Number(time);
          if (to > len) to = len;
          if (to < 0  ) to = 0;
          flvplayer.ext_setPlayheadTime(to);
          // for shotage of backward seek.
          var cur = Number(flvplayer.ext_getPlayheadTime());
          if (time < 0 && cur - to > 5 && to > 10) {
              flvplayer.ext_setPlayheadTime(to - 10);
          }
        },
        key_event : function(e) {
          var handler = {
            'o' : function(){ NDesc.description_toggle(); },
            'a' : function(){ NDesc.ad_toggle(); },
            ' ' : function(){ NDesc.play_pause();  },
            'k' : function(){ NDesc.volumeup(); },
            'j' : function(){ NDesc.volumedown(); },
            'h' : function(){ NDesc.seekleft(); },
            'l' : function(){ NDesc.seekright(); },
            'H' : function(){ NDesc.seek2top(); }   //Shift+H
          };
          var t = e.target;
          var pressKey = String.fromCharCode(e.which);
          if( t.nodeType == 1 && typeof handler[pressKey] == "function" ){
            e.preventDefault();
            handler[pressKey].apply();
          }
        }
   };

    document.addEventListener('DOMContentLoaded', function(){
     NDesc.init();
    },false );

})();

清水市代女流王将VSあから2010の感想

2010-10-12T12:43:00.001+09:00

素人の感想文です。
解説とかでないので、ほーへーと思っていただければ幸いです。

多分、誰か既にやってると思うけれど

2010-10-09T21:49:00.000+09:00

Operaで、tumblrのスクロールが変

Operaでtumblrを使っていて前から、スクロールが変だなぁと思っていました。
tumblrはデフォルトで、j/kで画像を上下にいけるのですが、Operaでみてると何故か数ピクセルだけ余計にスクロールするんです。
そのため「○○user」の部分が見えなくて、若干苛立を感じていました。
他のブラウザではそんな事ないのでなんでかなーと思いつつも、生きていくのさほど影響が無いので放置していました。

ところが今日、ふとある事に気づきました。
世の中変なOpera使いは少ないと思いますが、JやKにScroll up/downアクションを割り当ててる人っていると思うんですね。
それが、悪さをして数ピクセル余分に移動してるんじゃないかなと思ったわけです。

そういう訳で、書いたUserScriptは以下のようになります。
名前はkeyaction_cancelar.jsで。
Opera限定で使いましょう。むしろ、Opera以外使い道が無い。

// ==UserScript==
// @name      keyaction canceler
// @namespace http://looxu.blogspot.com/
// @include   http://www.tumblr.com/*
// @author    Arc Cosine
// @version   1.0
// ==/UserScript==
(function(){
  var keyList = {'J':'dummy','K':'dummy'};  //You can add more key.

  window.addEventListener('keypress',function(e){
    if( e.target.tagName == 'INPUT' || e.target.tagName == 'TEXTAREA' ) return;
    var pressKey=  String.fromCharCode(e.which).toUpperCase();
    if( typeof keyList[pressKey] == "undefined" ) return;
    e.preventDefault();
  },false );

})();

これ、応用すれば新Twitterの画面とかにも対応できそうですよね。
データ構造をちょいちょい修正すれば、ドメイン単位で(略
なんかVimperatorで似たような拡張がありましたね。~~気のせいだと思います。~~
それでは良いOperaライフを

Smooth Scrollのブログパーツ作りました

2010-10-06T23:11:00.000+09:00

こりずにブログパーツを作りました

といっても、某有名なSmooth Scrollスクリプトを丸パク(略
ま、どこかで見たコードだなぁと思っていただければ幸いです。

ダウンロード＆デモ

ダウンロードはこちらからお願いします。(新しいタブまたはウインドウが開きます)
http://sites.google.com/site/mksdcom/Home/smooth.js
デモページはこちら(新しいタブまたはウインドウが開きます)
http://tunsns.net/smooth_test.html

ライセンス

ライセンスはPublic Domainです。
いつものごとく。
商用利用・非商用利用問わずお使いください。

サポートブラウザ

Opera 9.5+
Google Chrome 5.0+
Firefox 3.5+
Safari 4.0+
IE 6.0+
Firefoxの3.0でも動くかもしれませんが、手元にない為、確認出来ていません。

使い方

こんなHTMLを指定すればOKです。

<a href="#target">go to target</a>
いろんなコンテンツ
<div id="#target">contents</div>

aタグのhrefに移動させたいnodeのIDを指定してください。

コード解説

パクったとか書きましたが、実は自分なりに工夫してる箇所があります。
そのコードは、下記の箇所。

var remain = firstEnd < firstStart ? -1 : 1; //up : down
    function smooth(start,end){
      if( (remain<0 && start >= end) || (remain>0 && start <= end) ){
        start = (19*start+end)/20 + remain; //It's Cool! :)
        win.scrollTo(0,start);
        win.setTimeout( function(){ smooth(start,end); }, 10 );
      }else{
        win.scrollTo(0,end);
        return;
      }
    }
    smooth(firstStart,firstEnd);

It's Cool! :)と自作自演をしてるように、この部分の計算式が無茶苦茶優秀です。
もう少し速度を上げたい人は19と20の所を、9と10にすれば良いですし、遅くしたい人は29と30にすれば良いです。
この計算式一つで上下への移動距離をキチンとたたき出しているのが、我ながら良いコードだと思います。
テクニカルすぎてアレだという意見が多数見られますが、やっぱり、やるからには徹底的にが僕のモットーなので。
もっと良い書き方がありましたら、教えてください。

以上です。

久々の物欲

2010-10-02T00:00:00.000+09:00

マウスは最初はMicro~~Hard~~Soft社製のマウスを愛用していましたが、数年前にLogicoolに乗換て以来、ロジクール派です。
んで、今日ふと見たこのマウスが欲しくなった！
物欲センサー全力ONって感じです。
ああ、いいなー、トラックボールいいなぁああ。

お金はありませんが。

将棋の棋譜　大逆転

2010-09-12T00:03:00.000+09:00

今回の将棋のハイライト

VIM Like on Safariを更新しました。

2010-09-07T12:49:00.000+09:00

忘れた頃にアップデート

http://code.google.com/p/vimlike-onsafari/

更新内容は下記の通りです
・「J」「K」でタブの切替を出来るようにしました（vromeのパクリ）
・ヒントキーをオプションで変えられるようにしました。
　・デフォルトではasdfghjklです.
　・1234567890にする事も可能です。
・Metaキーを取得するようになりました（まあ、でも、キーが対応してないので意味がな（略))
・Macな人でMetaキーが効かないよという人は連絡下さい。
・CSS使ってみた。特に意味はありません。
・useonlineモードは本当に便利なので、騙されたと思って使ってみてください。
　・（vimperator以外の）他の拡張って何故かそういうのをデフォルトで搭載してないよね。
　・まぁそもそも、そこまでキー入力に拘るアレゲな人はいな（ﾋﾟﾁｭｰﾝ

以上です

mouseover、mouseoutイベントについて

2010-09-07T01:57:00.000+09:00

JavaScriptでmouseoverとmouseoutイベントを使ってごにょごにょするコードを書いていたんだけど上手くいかない。
jQueryではmouseenterとmouseleaveというのを作って上手くやっていたが、今回実装しようとしているコードでは上手に動かすことが出来なかった。
多分、position:absoluteなものを表示してるからだと思う。
マウス周りのイベントって難しいよね。
やれやれ。

現役プログラマが、開発環境について二言三言語る

2010-09-04T22:26:00.000+09:00

いろんな議論がされていますね

最近、IDE最高とか、CUI最高とか、Emacsは捨てろとか、今時Vimはねーよとか、色々議論が活発ですね（遠い目）。
僕の観測範囲は偏っているので、IDE最高とかEmacs捨てろみたいな事を言う人はどちらかと言うと少なく、むしろVimやEmacsをどうすればもっと楽しく使えるだろうかみたいな考え方をしている人が多いように思えます。
そりゃ、僕自身もVimをエディタ兼開発環境として活用しているのでそういう情報を好んで仕入れているというのがありますけどね。

プログラマは几帳面な面倒臭がり

ところで、プログラマってものすごく几帳面な人が多い気がします。
ただ、その几帳面の方向が色々変わっているので、他の人には中々伝わらないところがあります。
（細かすぎて伝わらないモノマネ選手権みたいなイメージですな）
そして同時に、とても面倒臭がりな人が多いのも事実です。
実際、僕もとても面倒臭がりです。
なので、どうやった手を抜けるかという事を考えるのが好きです。
手を抜くためにコードを書いているといっても過言ではありません。

さて、上記の思考パターンを理解していただけると、開発環境への各プログラマの「コダワリ」みたいなのが見えてくると思います。
正直な意見としましては、プログラマは開発環境に拘る必要はないのです。
現場、現場でのポリシーがありますのでそれを超えない範囲で最大限に効率の良い開発環境を構築すれば良いと思います。
なので、エディタはVimじゃなくちゃ駄目だとか、IDEなんて重すぎて使えるかなんて言いません。
必要であるならば、それこそNotepad＋コマンドラインでの開発も行うでしょう。

そもそも、開発環境構築が嫌い

プログラマをやっていて嫌だなぁと思うのは、開発環境構築に苦労する時です。
Linux系列ですとコマンド一発叩くだけでさくっと作れたりするのが、Windowsだと冗長なウィザードのはいをクリックするだけの辛いお仕事をしないといけなかったり、PATHを通す為だけにログアウト/ログインをしたりしなければいけないなど、余計な作業が発生したりします。
これ、実に苦痛です。
だからと言って、Linux最高とは言いません。
GUIベースでの環境はやはりWindowsの方に一日の長があります。

Eclipseだって、使えるようにするまで苦労した記憶があります。
本当に面倒くさくて仕方がありません。
インストールが終われば後は快適なんでしょうけれども、そこにたどり着くまで時間がかかるのが嫌です。

理想的な開発環境

開発環境構築しなくても既に開発環境が出来ているってのが一番良いですね。
そういう意味では、JavaScript開発はとても楽チンです。
ブラウザをインストールするだけですから。
一番手間がかかるFirefoxですら、Firebugをインストールすれば良いですしね。
（IEですか？　IEは、開発環境構築（笑）なのでねぇ）
後はお好みのエディタを用意するだけ。
非常に理想的ですね！！

それが理想的な開発環境って言うんならな、まずはその幻想をぶち壊す！！

JavaScriptだってコード量が大量になればSubversionで管理とかしないといけなくなります。
場合によっては複数ファイルに分割して管理して、Antで最終的なJSをマージして圧縮して構築とか日常茶飯事です。
さらに、動作確認する為のローカルサーバ構築も必要になりますし、場合によってはDBサーバからJSONを吐き出すためのPerl|PHP|Ruby|Pythonコードをヒーヒー言いながら書かざるを得ない状況もあります。
そうすると、IDE系があると良いなぁとか思ってEclipseを嫌々用意したり、もう面倒だからxampいれとけばいいじゃねーとか思って個別にインストールしてたらもろもろをアンインストールしたりとアホな事をしたりします。

プログラマにとっての本質はどれだけ良いコードを書けるかであって、どれだけ開発効率の良い環境を構築できるかではありません。
しかし、すべからく優秀なプログラマは開発効率の良い環境を構築する術に長けています。
その為に、優秀なプログラマ＝開発環境構築に長けた人と勘違いする素人さんが多いのです。

プログラマにとって重要なのは、どれだけコードを書いたかであって、どれだけ開発環境構築したかでは無いのです。

結論が出ましたね。
開発環境についてあーだこーだ言ってる暇があるならコード書けって事です。

もし、身近なプログラマで開発環境に無駄にコダワリを表現してる人がいたら、その人の実力を疑ったほうが良いと思います。
以上です。

親のありがたさ

2010-09-01T22:40:00.000+09:00

本日、救援物資が届きました

最近、外を練り歩く事が多くなっているという話を親にしたところ、早速救援物資を送ってくれました。
(熱中対策水という500mlペットボトル×6、OS-1という点滴液もどき×6)
老婆心と切り捨てることも出来ますが、僕は素直に感謝したいと思いました。
熱中症になってほしくないという親心が実にありがたいです。
というか、ようやくそういう事を素直にありがとうと言える年齢になったのかもしれません。
五年前でしたら、照れの方が勝っていたと思いますが、最近は照れずにありがとうと言う事の大切さを痛感しています。
なので、早速電話でお礼を言いました。

あとどれだけ

親と過ごす時間が自分に残されているのだろうかとふと考えると、本当に限られた時間しか接していない事に気づきます。
一人暮らしをしつつ、実家から離れたところに暮らしていると、中々お互いの事を知ることが出来ないので、どうしても共に過ごす時間というのが短くなりがちですが、自分の方から時間を作り、親孝行出来ればなぁと思いました。
いや、そもそも今の生活が送れているのも、ましてや僕が生まれてきた事、育てて来てくれたこと。
それらを考えると、親に感謝しなくちゃならんという気持ちになりますね。
これを読んでいる貴方は、最近、親に「ありがとう」って言ってますか？

JavaScriptだけのGoogle検索作りました。

2010-08-31T07:32:00.001+09:00

個人サイトに置いてあります

Search Box
LooxUと初音ミクで行こう！のGoogle検索結果を表示するだけの簡単なツールです。
まだβ版ですので、色々修正が必要だとは思いますが、告知だけ。
jQueryとか一切使っていないPureなJavaScriptでもここまで出来るんだよって事をやってみたかっただけです。
ソースはPublic Domainなので好きなように使ってください。

ニコニコ動画をダウンロードするUserScriptを更新しました。

2010-08-28T23:38:00.001+09:00

1日で更新

更新早いよーとか言わないでください。
はてなスターとかはてブとかLDCで引用したりしないでください。

えっと、まず変更点をば
・DOMContentLoadedが効く場合と効かない場合を分けて処理しています(拡張子がuser.jsの時と.jsの時ね)
・mallowlabsさんに指摘された、詳細非表示の時にもダウンロードリンクを出すようにしました。
・あと、Opera専用になりました。
　・他のブラウザでは、contentWindow.postMessageが触れなかったのだよ、ワトスンくん。
　・UserScriptじゃなければ特に問題ないんだけどねぇ。
　・それ、なんて拡張機能(アドオン)？
　・真面目にやるとアレなので、真面目にやりたい方にお任せします。
・Safariな人は標準機能でダウンロード出来るから、このスクリプトはいらないよね。

ソースコード

// ==UserScript==
// @name      nicovideo down
// @namespace http://looxu.blogspot.com/
// @include   http://flapi.nicovideo.jp/*
// @include   http://www.nicovideo.jp/watch/*
// @author    ArcCosine
// @version   1.2
// ==/UserScript==

(function(){

  if( location.href.indexOf('www.nicovideo') > 0 ){
    var video_id = '';
    if(/watch\/([^/]+)$/.test(location.href)){
      video_id = RegExp.$1;
    }
    var obj = document.createElement('object');
    obj.data = 'http://flapi.nicovideo.jp/api/getflv?v='+video_id;
    obj.style.visibility = 'hidden';
    obj.style.width = '1px';
    obj.style.height= '1px';
    obj.addEventListener('load',function(){ obj.contentWindow.postMessage('dummy','*');  }, false ); //post to client
    //拡張子がuser.jsでも.jsでも動くように
    if( !document.body ){
      document.addEventListener('DOMContentLoaded', function(){ document.body.appendChild(obj); }, false );
    }else{
      document.body.appendChild(obj);
    }

    window.addEventListener('message',function(e){
      if(e.origin !== 'http://flapi.nicovideo.jp' ) return;
      var text = e.data;
      if( /url=(.+?)&/.test(text) ){
        var h1 = document.getElementsByTagName('h1')[0];  //詳細表示時
        var h2 = document.getElementsByTagName('h2')[0];  //詳細省略時

        var aTag= document.createElement('a');
        aTag.href = decodeURIComponent(RegExp.$1);
        aTag.target = '_blank';
        aTag.style.marginLeft = '5px';
        aTag.appendChild(document.createTextNode('[download]'));

        h1.parentNode.insertBefore(aTag,h1);
        h2.parentNode.insertBefore(aTag.cloneNode(true),h2);
      }
    },false );

  }else if( location.href.indexOf('flapi') > 0 ){
    window.addEventListener('message', function(e){
      if(e.origin !== 'http://www.nicovideo.jp' ) return;
      var video_id = '';
      if(/v=(.*)/.test(location.search)){
        video_id = RegExp.$1;
      }
      var text = document.body.textContent;
      e.source.postMessage(text,'*'); //post to parent window
    }, false );
  }
})();

ニコニコ動画をダウンロードするUserScriptを書きました。

2010-08-27T01:45:00.004+09:00

ニコニコ動画ってダウロード出来るのだ

UserScriptを使えばなっ！
地味にクロスドメインな感じだったので、window.postMessageを使って色々やってみました。
元ネタは、ニコニコ動画をダウンロードできるようになるGreasemonkeyスクリプトのOpera版(管理人日記) - むぅもぉ.jpだったのですが、postMessageベースになってしまったので、まるまる書き換えたイメージです(笑)
日付を見ると、３年も前のネタなのかー。そりゃ、動くはずがない(笑)
ライセンスはいつもどおり、public domainにします。
例の如く、Operaでしか動作確認していませんが、FirefoxやGoogle Chromeでも動くと思います。
Safariは……分かりません(笑)
UserScriptが動くならば或いは……。
8/28追記
== 追記ここから ==
確認した所、Operaでしか動きませんでした……orz
テコ入れします。
== 追記ここまで ==
ブックマークレットでは絶対動きませんので、なんとかしてやろうとか思わないでくださいｗ

UserScript.org

nicovideo down for Greasemonkey
http://userscripts.org/scripts/show/84552
Firefoxな人やコピペ面倒という人は↑をどうぞ

ソースコード

ソースコードは下記の通り

8/28追記
以下のコードは、不具合がありますので、使わないでください。
最新版のソースはUserScript.orgにアップしてありますので、そちらをご利用下さい。

// ==UserScript==
// @name nicovideo down
// @namespace http://looxu.blogspot.com/
// @include http://flapi.nicovideo.jp/*
// @include http://www.nicovideo.jp/watch/*
// @author ArcCosine
// @version 1.0
// ==/UserScript==
(function(){
if( location.href.indexOf('www.nicovideo') > 0 ){
document.addEventListener('DOMContentLoaded', function(){
var video_id = '';
if(/watch\/([^/]+)$/.test(location.href)){
video_id = RegExp.$1;
}
var obj = document.createElement('iframe');
obj.src = 'http://flapi.nicovideo.jp/api/getflv?v='+video_id;
obj.style.display = 'none';
obj.addEventListener('load',function(){ obj.contentWindow.postMessage('dummy','*'); }, false ); //post to client
document.body.appendChild(obj);

window.addEventListener('message',function(e){
if(e.origin !== 'http://flapi.nicovideo.jp' ) return;
var text = e.data;
if( /url=(.+?)&/.test(text) ){
var h1 = document.getElementsByTagName('h1')[0];
var aTag= document.createElement('a');
aTag.href = decodeURIComponent(RegExp.$1);
aTag.target = '_blank';
aTag.style.marginLeft = '5px';
aTag.appendChild(document.createTextNode('[download]'));
h1.parentNode.insertBefore(aTag,h1);
}
},false );
}, false );
}else if( location.href.indexOf('flapi') > 0 ){
window.addEventListener('message', function(e){
if(e.origin !== 'http://www.nicovideo.jp' ) return;
var video_id = '';
if(/v=(.*)/.test(location.search)){
video_id = RegExp.$1;
}
var text = document.body.textContent;
e.source.postMessage(text,'*'); //post to parent window
}, false );
}
})();

それでは良いニコニコ動画ライフをノシ

vimでの文字化け回避

2010-08-24T20:06:00.000+09:00

自分用メモ

set encoding=utf-8
".vimrc(_vimrc)が cp932の場合
scriptencoding cp932

これを_vimrcに設定しておくとコピペの時に文字化けしなくなる。
windows限定の話。

参考リンク
vim/gvimのUTF-8化とファイルの文字コード自動認識 - fudist

マウスカーソルを変えてみた。

2010-08-23T10:31:00.002+09:00

マウスカーソルを変えてみたって何？

マウスポインタの形状に関する私見
上記の記事を読んで初めて気づいたのですが、Operaだけが本文のマウスカーソルがデフォルトのままで、少しびっくりしました。(参考)

このBlogはOpera大好きな変人が運営していますので、早速先の記事を真似てbodyにcursor:default;を記載しました。
Opera以外のブラウザを使っている方は参考リンクの本文と比較してみて下さい。
今回のCSSの修正で、どのブラウザで見てもOperaで見てるっぽい雰囲気が出るようになりました。
もちろん、それで違和感を感じる人は少ないと思います。
(実際、僕は違和感を今まで感じていなかった)

もう少し書かせて

今まで見落としていた箇所でしたが、今後CSSを書く時はマウスカーソルの状態も考えながら書いてみたいと思いました。
でも、文字選択時はI字のカーソルになっちゃうんですよね。
その辺上手く書き直せたら良いなぁと思います。
以上です

javascriptは外部ファイルにした方がいいの？それとも、インラインの方が良いの？

2010-08-20T12:25:00.001+09:00

事の発端

os0xさんのブログコメントで、javascriptの書き方について、面白いやり取りがありましたので、それについての私見を書きたいと思います。
結論から言いますと、プログラマ的な立場から言わせて頂くと、外部ファイル管理が望ましく、コーダ的な立場から言わせていただくとインラインが望ましいです。
なぜそのような結論に至ったのか、まずは経緯を御覧ください。

コメント欄でのやり取り

os0xさんのブログコメント欄を引用しています

引用ここから(通りすがりさんとos0xさんのコメントのみ引用。文字強調はArcCosine)

通りすがり 2010/08/13 15:20
質問です。
>scriptタグの中に直にコードを書くというのはできる限り避けたほうが良い
のは何故でしょうか。
私は、「できるだけscriptタグの中に直にコードを書くようにし、理由がある場合に限って外部ファイルにする」というのが良いように思います。

os0x 2010/08/13 15:44
インラインでコードを書くということは、そのページだけでしか使わないコードを書くということになりますよね。
逆に外部ファイルでは、共通部分を別のページでも使うことができますし、それを実現するには必然的に保守性の高いコードを書く事になります。それは良い習慣ですよね。
また、HTML中のJavaScriptはHTMLとして解釈されないように配慮する必要があります(具体的には文字列リテラル中に</script>を直接書けない、<\/script>とすれば良いだけの話ではありますが)。
ところで、できるだけインラインにコードを書くほうが良いと思われる理由ってどんなところにあるんでしょうか？リクエストの数が減るというのはあると思いますが、そうとう大量のアクセスを持っているサイトでないとほとんどメリットにはならないだろうと思っています。

通りすがり 2010/08/13 16:47
O'ReillyのHigh Performance Web SitesやHigh Performance Javascriptは既読でしょうか。
ファイル内に書く理由は、そこに書かれているようなことが理由です（ここには書ききれません）。
でも私個人は、保守性という多大なるメリットのため、機能ごとに複数ファイルに分けています。ただ、combineしてminifyingしてページ内に配置したり、遅延ロードしたりというのが、アクセス数に関係無くパフォーマンスに良いことはわかっているのですが、時間がないためそこまでやりきれていないのが現状です。

os0x 2010/08/13 18:40
続・ハイパフォーマンスWebサイトなら読んだことありますが…。
あの辺の話は高いパフォーマンスを得るために色々なものを犠牲にする黒魔術的なものとして考えています(すべてではないですが)。
推奨する・されるべきはスクリプトの外部化で、どうしてもパフォーマンスがほしいときなど仕方なくインラインで記述する、と考えています。

通りすがり 2010/08/16 14:55
『続・ハイパフォーマンスWebサイト』で言うと、
>あの辺の話は高いパフォーマンスを得るために色々なものを犠牲にする黒魔術的なものとして考えています(すべてではないですが)。
という部分も多々ありますが、「4章実行をブロックしないスクリプトのロード」や「6章インラインスクリプトの適切な位置」あたりはそうでもないと思いますよ。

Javascriptをどこに置くべきかというのは、そのコードサイズやユーザのローカルにキャッシュされる確率、サイト（またはWebアプリケーション）自体の性格や同時アクセス数などによって取るべき戦略はさまざまだと思いますが、まず基本としてどうすべきなのかというところを考えると、やはり基本が外部スクリプトだというのには同意できません。
もちろん、どのようなぺーじにも共通で使えるようなライブラリ的なものは外部スクリプトとして存在すべきだとは思います。しかしそのライブラリ的なものを使ってあるページの操作をするコードは、基本的にはそのページに記述するのが一番良いのではないかと思います。そして、その部分をも外部スクリプト化するのには、それ相応のメリットがある場合に限ってであって、まず基本として外部スクリプトにするのが良いというのにはうなづけません。

os0x 2010/08/16 15:35
おっしゃる通り色々な条件があるので、一概には言えないだろうというのもわかります。
理想としては、効率が良く、保守性に優れ、それでいて簡単に実装できる絶妙な選択肢を選びたいところです。
しかし、そういった適切な判断をするには経験と知識が必要です(し、そもそもそんな都合のイイ話は滅多にないでしょう)。
そういった高度なことをできる人が試行錯誤した結果としてインラインにコードを書いているような特殊なケースを想定してこの記事を書いたわけではありません。
そもそも、高度な最適化が必要なウェブサイトというのが特殊なケースだとも思います(数値がわからないので感覚でしかないですが…)。

引用ここまで

プログラマの見方

テンプレートに触れる機会が多くなっている昨今、scriptを単一のページに書くというのは保守性の効率が実に悪い方法になっています。
いや、テンプレートだからこそインラインでいーじゃねーかと思う人もおられると思いますが、コーダとプログラマが分業してるような会社ですとそうは問屋がおろしません。
もちろん、理想としてはコーダとプログラマが同じ人でインラインに綺麗にすぱっと書いてしまう方が一番良いのですが、それはあくまでも理想論。
そこまで手が回らないというのが現状だと思います。
なので、プログラマを生業としている身分からしますと、スクリプトとHTMLは切り離して管理した方が何かと便利であることが多いです。
もちろん、通りすがりさんが指摘してるように、ある個別ページでしか使わないコードはインラインで書くほうが良いと思います。

コーダの見方

一方、コーダ側から見ると、話は変わってきます。
外部にスクリプトを置く最大のデメリットはその挙動がよく分からないって事です。
そうなると、適当なクラス名やidを振ったりすると後でブラウザ（主にIE）の謎挙動により、阿鼻叫喚地獄絵図になるわけです。
さらに、レアなケースなのですが、プログラマが書いたコードのせいでページ全体が中々読込み終わらなかったり、レイアウトが崩れたりします。
そうすると、コーダがスクリプトを分析してどこが悪さしているのか、プログラマに指摘するしかない状況に陥ったりします。
インラインに書いてあるならば、最悪コメントアウトするなりその場でコーダが直すなりして対応できるので、楽なんですよね。
一番の理想は、短くて軽くてしかもカッコいい(動作も書き方も)スーパースクリプトを書いてくれるプログラマが居るとコーダのお仕事は楽になります。

ケースを分けて考えてみる

もう少し具体的に考えるために、ケースを分けましょう。

個人のホームページ
企業のホームページ
Webサービス

1.のような個人のホームページは正直どーでも良いです。
外部スクリプトにしようがインラインにしようが、それは個人の勝手。
好きな方を選びましょう。

2.のような企業のホームページの場合は、インラインで書いてしまった方が良いケースが多いと思います。
(CMS使っているケースが少ないため)
CMS使っている場合でも、テンプレートにインラインでさくっと書くほうが管理しやすいと思います。
(別に外部ファイルでも良いけどね)
なぜかといいますと、こういうホームページは、挙動関係のスクリプトをそう頻繁には更新しないからです。
逆に頻繁に更新ばっかりしてるサイトはちょっと最初のサイト設計が悪かったとしか言えないですねｗ

3.のようなWebサービスはその規模次第だと思います。
GoogleのようにアホみたいにPVが多いサービスですと、パフォーマンスが一番重要ですので、インライン表記の方がベターだと思います。
TwitterやMixiなどの会員制サービス系列は、使い勝手に特に気を使いますので、外部ファイルで管理する方が更新・管理しやすいと思います。
Webサービスは流動的なもので、どれだけ良い設計をしても、ユーザのニーズは日々刻々と変化しますので、どうしてもスクリプトの改善をせざるを得ない状況になります。
そうなると、外部ファイルに置いてしまったほうが単体更新で済むために管理がしやすいというメリットがあります。

もちろん、HTMLがきちんと設計されていればね！！

私見中の私見

僕は、個人のページや企業のページ、Webサービス(それなりのPVがある)も色々作ってきましたが、PVとコード管理とのバランスを考えた場合、外部ファイルに持たせるのが一番楽でした。
そう感じるのは、プログラマとしての仕事を長くしているからだと思います。
僕は理想的なプログラマでは無いので、どうしても冗長で遅くて動作がしょぼいコードしか書けません。
それを時間をかけて、じっくりアップデートして、なんとかまぁまぁ短くて、まぁまぁ速度が出て、まぁまぁの動作をするコードにしてきました。
結局の所、技術力が十分でないからこそ、そうしてるんですね。
ハイレベルなコードをいきなりインラインに書けるようなプログラマになりたいもんです。
そして、ちょっとやそっとのスクリプトで手こずらないコーダになりたいもんです。
以上、駄文でした。

「X分で読めるよ」のブログパーツ作ったよー！

2010-08-19T03:20:00.004+09:00

サイトの滞在時間を13.8%伸ばすブログパーツです

参考画像

元ネタ
たった一行追加するだけでサイトの滞在時間を13.8%伸ばす方法･･･ - IDEA*IDEA ～百式管理人のライフハックブログ
これのリンク先を読んだり、カヤックさんの所のエントリを読んだりして、PHPとかに手を入れなくてもなんとかする方法を考えてみた。
ぶっちゃけ、javascriptで出来るんじゃないかなぁと思って書いてみた

導入の仕方

Bloggerの方は、以下のコードをコピペするだけ

<script type="text/javascript">
_ncounter_target = 'entry-content';
</script>
<script type='text/javascript' src='http://sites.google.com/site/mksdcom/Home/ncounter-min.js' charset='UTF-8' ></script>

はてなダイアリーの人だったら、_ncounter_targetを「section」にすれば良いかもね。
Livedoorブログの人だったら、_ncounter_targetを「main」にすれば良いかもね。

デフォルトだと、デザインが適用されていないので、非常にしょぼいです。
texts_counterってクラス名を付けているので、それにCSSを適用すると幸せになれるかもしれません。
ちなみに、このブログは以下のCSSを適用しています。

.texts_counter {
  display: block;
  padding: 3px 0px;
  border-bottom: 1px solid #dddddd;
  margin: 0px 0px 0.5em 0px;
}

対応ブラウザ

Opera、Firefox、Google Chrome、Safariに加え、レガシーブラウザであるInternetExplorerにも対応しています。
IE6でも多分、動く。動作確認してないけど(面倒だから)

ソースコード

圧縮してないソースはこっちです。
短いのでさくっと読めると思います。

(function(d){
  var message = { readit : '分で読めるよ' };
  load(); //entry

  function load(){
    if( d.addEventListener ){
      d.addEventListener('DOMContentLoaded',function(){ init(); }, false );
    }else{
      try{
        d.documentElement.doScroll("left");
      }catch( error ){
        setTimeout( arguments.callee, 0 );
        return;
      }
      init();
    }
  }

  function init(){
    var target = d.getElementById(_ncounter_target);
    if( !target ){
      if( d.getElementsByClassName ){
        target = d.getElementsByClassName(_ncounter_target);
      }else{
        var nodes = d.getElementsByTagName('*');
        target = [];
        for( var i=nodes.length; i-- > 0; ){
          if( nodes[i].className == _ncounter_target ){
            target.push(nodes[i]);
          }
        }
      }
      if( !target ){
        return;
      }
      for( var i=target.length; i-- > 0; ){
        add_readit(target[i]);
      }
    }else{
      add_readit(target);
    }
  }

  function add_readit(node){
    var n = count_text(node);
    if( n == 0 ) n++;
    var counter = d.createElement('span');
    counter.className = 'texts_counter';
    counter.appendChild(d.createTextNode(n+message.readit));
    node.insertBefore( counter, node.firstChild );
  }

  function count_text(node){
    var text = node.textContent || node.innerHTML;
    return parseInt(text.length/400);
  }
})(document);

ライセンスはPublic Domainなので自由に改変、配布してください。

JavaScriptのイベント

2010-08-18T02:05:00.000+09:00

それはとあるユーザのつぶやきから始まった

Twitterの以下のつぶやきを見て、ちょっと考えてみました。
http://twitter.com/altnight/status/21403130106

@os0x 質問です。Javascriptにおいてイベントの実行順序で詰まることが多いのですが、これを体系的に(あるいは効率的に)学ぶにはどういった方法がいいでしょうか？なにを知るべきでしょうか？

JavaScriptはイベント処理が変態的なので、その癖を掴む必要があります。
ということで、以下に僕なりのイベントに関する考え方をまとめてみました。

イベントとは何か

まず、前提としてイベントとはなんぞやほいという話です。
イベントを日本語訳すると行事とか出来事とかになりますね。
プログラムの世界で言うならば例えばマウスをクリックしたとか、キーボードを押したとか、ページを読込み終わったとかそういう処理のことを「イベント」と呼んでいますね。
大前提なので書くまでもないのですが。

イマドキのイベント関数

JavaScriptを学びはじめて間もない人はどうやったらイベントを「追加」出来るのだろうかと考えますね。

よくあるパターンですと、
<input type="button" onclick="alert(1);" value="クリックするとアラート" />
上記のようなコードを見て、なるほど、こうすればイベント追加出来るんだなと思いがちですが、これはお薦めできない方法です。
何故お薦めできないのかというと、HTMLとJavaScriptが混在してしまっているからです。
その為にいらぬ混乱を招いていると僕は思います。
(実際僕もよく分からなかったときはコレで苦しみました)

イマドキonclick=～みたいな書き方は緊急的なソース意外には避けたほうが賢明でしょう。
onload=～みたいな書き方も古いですね(←言い切った！)

これからは、DOM Level2のイベント追加方法を覚えましょう。
DOM Level2の素晴らしい点は、JavaScriptをscriptタグ内にまとめることが出来るという事です。
HTMLを汚さずにJavaScriptを実行できるようになり、HTMLの見通しが良くなり、JavaScriptも見やすくなるという一石二鳥な感じです。

書き方は
JavaScript
<script>
function init(){
var node = document.getElementById('btn');
node.addEventListener('click',function(){ alert(2); }, false );
}
document.addEventListener('DOMContentLoaded', function(){ init(); }, false );
</script>

HTML
<body>
<input type="button" id="btn" value="クリックするとアラート" />
</body>

実に明快ですね。
でも、最初の書き方よりコードが増えていて全然嬉しくないというのが普通の人の感覚。
その感覚は正しいです。
短いコード程度なら、それこそ、onほにゃららイベントで書いてしまった方が楽チンなんです。
ただ、その後開発を続けていっていつの間にかコードが長くなった時、困るようになります。
なにより、onほにゃららイベントはイベントを一つしか登録出来ません。
しかし、addEventListenerを使うと嬉しいのは、複数のイベントを登録出来るって所なんです。

JavaScript
<script>
function init(){
var node = document.getElementById('btn');
node.addEventListener('click',function(){ alert(3); }, false );
node.addEventListener('click',function(){ var dt = new Date().getTime(); alert(dt); }, false ); //これが嬉しい
}

document.addEventListener('DOMContentLoaded', function(){ init(); }, false );
</script>

HTML
<body>
<input type="button" id="btn" value="クリックするとアラート" onclick="alert('これも動く');" />
</body>

上記のようなコードを実行した際に、コメントで「これが嬉しい」と書いてるコードを追加するだけで処理追加出来るという点が嬉しいのです。
ただ、その嬉しさを体験するには大分複雑なコードを書かないと実感出来ないので、実用性を感じ無いかもしれません。

イベントの実行順序

上記コードを実行していただくと理解出来ますが、追加した順に実行されます。
なので、最後のコードを実行すると、最初にonclickが実行されて、後はaddEventListenerで追加した順にalertが表示されるハズです。
すぐに確かめたい方はこちらでどうぞ

イベント追加のテスト(IE除く) - jsdo.it - share JavaScript, HTML5 and CSS

問題点は何？

結局、最大の問題点は、JavaScriptでやらせる処理の難しさが案件によってぶれまくるって事でしょうかね。
その為に色々と頭がごちゃごちゃになるってことがよくあります。
後はJSONPのcallback関係が若干理解しづらいかもしれません。

最後に

これでできる！クロスブラウザJavaScript入門：第7回　JavaScriptとHTMLとDOMの基本#2 イベント編
イベント関係ですと、os0xさんがまとめられたこの記事が良記事ですので、一読をオススメ致します。
以上です。

AAテスト

2010-08-14T15:47:00.003+09:00

　　　　　　　　　　　 _,,... --‐─- ､.,
　　　　　　　　　,　'´　　　 　　 　 　 ｀' .､
　　　　　　,. '"´ 　　　　　　 　　　 　　　 ヽ.　　　　　　 　 ／L,
　　　　／　　　 　　 　　 　　 　 　ヽ　 　 　 '､　 　 　 　 /　／
　　　/ 　 　 　 　,〈 　　　 i　／ ! 　　',　　 　 ヽ､　　　 /／
　　 ,' 　　　 |　　,! ﾄ､　 | /＞‐くﾊ　　,|　　　　　 ｀ヽ.　´
　　 !　　 　,ﾊ __八|　＼|'´ i´　ﾊ〉!　/'ﾄ-‐ｧ 　 　 /　',
　 　',　 i　 　.|./ ,!-､ 　　 　ゝ-ﾟ'　ﾚ'| .ﾊン＼　／　　 ! 　　　　;'´i　,.-､　　　一回だけおことわりするわ
　　　）八　　 !.ｲ　!,ﾊ　　　　　 ⊂⊃/´　 　 !/ 　　　/ （｀ヽ. ./　.ﾚ'　/!　　　ああ妬ましい妬ましい
　　 '´ 　 ＼,ハ　 ゝ'　 '　　　　　　 ﾊ　＿_／　　 ／ 　_.〉　i/　 /　.//
　　　　　/ /ｰ-!⊃　　　‐　´ 　 　 ∨ ｀Y:::｀X＞ｰ-ｧ'´ 　　　　 '　／
　　　　　!/　　 ト ､ 　　 　　 　 　　,ﾊ　/／:::;「　 rﾊ､＿_ｒ‐-､_,.イ､
　　　　　,'　 　,ﾊ　　|｀7ァ=rｧ'i´-‐' 　,./､::::::/ 　 /ゝ-､__　　 r､__ノ）
　　　　　!　／∨＼ ﾚ',..イ:::〉､＿＿ノ/::::::>/　　 !　　　　｀￣　　　!
　　　　　）'　　　 　）/´　|∨::|＿_/::/::／::/　　 八　　 　　　　 　/
　　　　　　　　　　 /　　 |∧/　/ !/:へ:::/　 ／|::::ヽ　 ､　　ﾉ 　 ,'
　　　　　　　 　 　/ 　　 |／ 　 　|::::／:/ 　 　 ﾄ､_,ﾊ　　 　 　 　!
　　　　　　　　 /´`ｧ.､／　 ,　　 ,'::く::::;' 　 　 .,'　ｒｧ-!　　　 　　 !
　　　　　　　　 >､'::::/　　/.!　　/:::::::>i 　 　 /　∧. ﾍ.　　 　 　/
　　　　　　,r／　 `く.＿_/-|_／|:::／:/　 　 /.／/ ヽ､.,_　　__／
　　　　 ／　ゝ､.,＿,..ﾍ　八::::|:::K::／ 　 _／´　〈　　 　 ￣

　　　　　　　　　　　　　　　　　　　 r'==＝＝===ヽ
　　　　　　　　　　　　　　　　　　＿|l| __　　_＿_ |::|
.　　　　　　　　　　　 {､　　 ,　 ´:.:.:.:|l|:.:.:.:.Y:.:.:.:.:.:.￣　ヽ
　　　　　　　　　　　　>｀'´:.:.:.:.:.:.:.ミ|l|:.:.:.:.人:.:.:.:.:.:.:.:.:.:.:.:.ヽ
.　　　　　　　　　 ／ｿ:.:.:.:.:.:.:.:.:､:.:.:.:|l|＞､彡ﾊ:.:.:.:.:.:.:.:.:.:.:.:.:.ヽ　　　　　　　　　お断りですよマスター
　　　　　　　　／´ /:.:.:.i:.:.:.:.:.:.:lヽ､:.゛=＝＝==ヘ:.:.:.:.:.:.:.:.＼:..ヽ
　　　　　　　 《 .r'/:.:.:.:..{:.:.:.:.:.:´{⌒ヽ:.:.:.:.:ヽ::::〃´＼:.:.:.:.:.:.:.:.＼:.ヽ
　　　　　　　　V {:.:.:.:.:.:ﾊ:.:.:.:.:.:.',　, ≧:.:.:.:.:.V::::::::::::::>､:.:.:.:.:.:.:.:.:.＼:ヽ
　　　　　　, -‐-､{:.:.:.:.:.:.lヘ:.:.:.:.:.l〃斥心ｱ:.:l:::::::::::::/　 ヽ:.:.:.:.:.:.:.:.:.ー-｀ ､
　　　　　r'／ ｀ヽ:.V:.:.:.:.l　 ヽ:.:.:.i　弋zｿ i:.:.l＿,_ノ　　　　＼:.:.:.:.:.:.:.:.:.:.:.:.:.:
　　　　 f':::::::::::::::ﾊ个､:.:.圷心ヽj　　　　 i:.:.l=-'/　　　　　　 ヽ:.:.:.:.:.:.:.:.:.:.:.:
　　　　/::::::::::::::::::::V八ヽ:.弋ｿ　,　 　　　i:.:/:.:く　　　　　　　　ヽ:.:.:.:.:.:.:.:.:.:
　　　 /::::::::::::::::::::::::ﾘ:人:.:.:ゝ　　　- '　　ｲﾉf´⌒　　　　　　 　　V:.:.:.:.:.:.:.:
　　　/:::::::::::::::::::::::/:.:.:.:.ヽ:.:.:.l≧ =-r イ_ -'´ヽ_　　　　　　　　　　V:.:.:.:.:.:.:.
　　 /:::::::::::::::::::::/l:.:.:_:.:.:_＞'‐-rｩ'´><　　　　 ｲ､　　　　　　　　　 ヽ:.:.:.:.:.:
　　/::::::::::::::::::::ﾉ｀￣ヾ､　　　　}ｿ./云ヽ　 ／ｲj　｀　ヽ　　　　　 　　 ,:.:.:.:.:
　　{:::::::::::::::::::´:::::::::::::}:|　　 rソイ__／ Vソ　 l:{　　　　}　　　　　　　 .}:.:.:.:.
.　　V::::::::::::::::::::::::::::ノﾉ-‐イ　／:':.l　　　　　 l:〉　　　 ,　　　　　　　　l:.:.:.:.
　　　｀ ー‐ ´￣T￣´.γ´　/:.:.:.:./　　≡≡ .l:}/　　 ,'　　　　　　　　j:.:.:.:.:
.　　　　　　　　　l:.:.:.:.:八　/:.:.:.:.:.{　　　　　　 ﾘ　　　,　　　　　　　　ﾉ:.:.:.:.:
.　　　　　　　　　i:.:.:.:.:.:.:ゝ{:.:.:.:.:.:.l､　　　　ノ /f｀== 'ﾉ　　　　　　　/:.:.:.:.:.:.
.　　　　　　　　　|:.:.:.:.:.:.:.} l:.:.:.:.:.:.l ｀￣　´　/　}:::::::::::|　　　　　　 /:.:.:.:.:.:.:.
.　　　　　　　　　l:.:.:.:.:.:.:.i |:.:.:.:.:.:.:l　　　　 /　 j::::::::::::l　　　　　／:.:.:.:.:.:.:.:.:
.　　　　　　　　　j:.:.:.:.:.:.:i L_:.:.:.:.:.l　＿,　　〉　.{:::::::::::::}　　　／:.:.:.:.:.:.:.:.:.:.:.:

出典:嫁宣言して50分以内に嫁AAにお断りされなければ結婚です

Favstar.fm用のUserScriptを書きました。

2010-08-09T22:04:00.003+09:00

今日、favstar.fmを見てみたんだけど

なかなかいい感じ。
クローリング速度が十分速い。
でも、不満点が無いわけではない。
それは、ふぁぼったー風の文字表示。
あの色表現が絶妙なんだよね、ふぁぼったーって。

favstar.fm用のぐりもん見つけた

Colorful Favstar.fm for Greasemonkey
http://userscripts.org/scripts/show/82891
Firefoxユーザだとコレで良いよね。
でも、Operaユーザ的にちょいこれだと不満。
後、フォント小さすぎる。
favstar.fmと若干デザインが合わない。

ということでコード書いた。

保存して使ってください。
恐らく、.user.jsよりも.jsで保存する方がOperaユーザは幸せになれるとおもう。
(僕はcolorful_favstar.fm.jsって名前にした)

// ==UserScript==
// @name           Colorful Favstar.fm
// @namespace      http://moco.nond.es/
// @description    Change tweet color and font size by favourites count like Favotter.net.
// @version        0.1.1.20100808
// @include        http://favstar.fm/*
// @include        http://ja.favstar.fm/*
// @include        http://de.favstar.fm/*
// ==/UserScript==
(function (_d) {
  function init(){
    var css = [
      '.theTweet {'
        ,'line-height: 1.4;'
        ,'color: #333;'
      ,'}'
      ,'.theTweet a {'
        ,'color: #1a75d2;'
      ,'}'
      ,'.cofav2 {'
        ,'font-weight: bold;'
        ,'color: #008e00;'
      ,'}'
      ,'.cofav3 {'
        ,'font-weight: bold;'
        ,'color: #5f008f;'
      ,'}'
      ,'.cofav4 {'
        ,'font-weight: bold;'
        ,'color: #5f008f;'
      ,'}'
      ,'.cofav5 {'
        ,'line-height: 1.3;'
        ,'font-weight: bold;'
        ,'color: #f40000;'
      ,'}'
    ].join('');

    var style = _d.createElement('style');
    style.type = 'text/css';
    style.appendChild(_d.createTextNode(css));
    _d.getElementsByTagName('head')[0].appendChild(style);
    
    var favCounts = _d.getElementsByClassName('favouritesCount');
    for (var i=favCounts.length; i-- > 0; ){
      var fav = parseInt(favCounts[i].innerHTML, 10);
      var parent = favCounts[i].parentNode.parentNode;
      if (!isNaN(fav) && fav >= 1) {
        setColorfulClass(fav, parent);
      }
    }
  }
  
  function setColorfulClass (favCount, node) {
    if (node.className !== 'tweetContainer') {return;}
    var tweet = node.getElementsByClassName('theTweet');
    if (favCount <= 4) {
      tweet[0].className += ' cofav'+favCount;
    } else if (favCount >= 5) {
      tweet[0].className += ' cofav5';
    }
  }
  
  _d.addEventListener('DOMContentLoaded', function(){ init(); }, false );
})(document);

IE9 PP4がやって来た！

2010-08-06T21:29:00.008+09:00

IE死ねの定義を変えたいと思います

僕のTwitterを眺めたことがある人は、仕事中に８割くらいの確率で「IE死ね！」と叫んでいる姿を見たことがあると思います。
あの罵倒は大抵、IEに対して無差別に行っていました。
しかし、この度IEBlogの記事を見てIE死ねの範囲を変えたいと思うに至り、このブログエントリを書きたいと思います。
IE死ねが適用されるのは、IE8以下まで！

IE9 PP4の実力

IEが駄目駄目を晒すのに適したベンチマークと言えば、Acid3でしょう。

見てくれこのスコア、どう思う？
凄く……モダンブラウザです……。

いや、正直ここまで改善されているとは思っていなかった。
MicroSoftの本気を見た。

さらに、JavaScriptのベンチマークで有名なSunspiderの結果も御覧の通り

なん……だとっ？！
Safari5.0より速いです。
地味にOpera10.6を掲載してる当たり、公平性をビンビン感じます。

さらに、今まで、COMベースでつないでいたJavaScriptエンジンをIE9に直接ぶち込む事でさらなる高速化を実現。(Chakraって名前なのかな？)
今までJScriptX.Xみたいなバージョン表記だったので、今後非常に期待できます。
IE9、恐ろしい子！！
さらに詳しい情報はHTML5, Modernized: Fourth IE9 Platform Preview Available for Developers - IEBlog - Site Home - MSDN Blogsでどうぞ。

本日の落ち

記事を見ただけなので、試していません。
ちくしょう。
Windows7を手に入れたいXPユーザのACでした。
えんいー。

僕の最近のHTMLの書き方のまとめ

2010-08-03T07:57:00.003+09:00

最初に

「の」が連続するって頭悪そうに見えて良いですよね。

HTML5について

HTMLを書く時、色々考える事が多いです。
HTML5で統一して書ければ良いんですが、お客様の要求次第ではそれでは不十分であることが多々あります。
個人的には一番操作(?)しやすいHTML4.01 Strictが好きなのですが、XHTML 1.0 TransitionalやHTML4 Transitionalを愛する方々もいらっしゃいます。
一時期は僕もXHTMLで頑張って書いていた事もありますが、やっぱりシンプルなのが一番良いなぁ。みたいな。
HTML5は非常にシンプルなので、とても好きです。

JavaScriptとCSS

CSSとJavaScriptは今のWebにおいては必須です。
たまーにJavaScriptやCSSがオフの環境のことも考えて書くこともありますが、超レアケース。
そもそも、今時JavaScriptやCSSをオフにして閲覧してるユーザなんて殆どいないと思うんですね。
No Script大好きっ娘や、テキストブラウザ大好きっ娘はWebページに訪れる人の割合からすると極々わずか。
(もちろん、彼女たちは美少女だ。美少女なので人数が少ない。多分)

メジャーブラウザのサポート

発想の一つとして、利用するブラウザをある程度絞ってしまうというのはアリだと思います。
例えば、メジャーブラウザである、Opera、Firefox、Safari、Google Chromeに対応したページをキチンと作る。
そして、IEに関してはそれっぽく表示する。
極端な話、JavaScriptもCSSもIEはIE専用のコード書いちゃったほうが断然効率が良い。
IE9は大分Web標準をサポートしつつあるみたいなので、IE9はメジャーブラウザに含めても良いかもしれません。
IE6やIE7やIE8といったマイナーブラウザのサポートをするお仕事は涙なしには語れません。
(ここで言うメジャー／マイナーとはW3C標準から見てメジャー／マイナーである。書くまでもないと思うけれど)

理想と現実

理想は、HTML5+CSS+JavaScript
しかし、現実の最大の理想としてはHTML 4.01 Strict+CSS+JavaScript+Flashって所でしょうか。
そして、多いのはHTML 4.01 Transitional+CSS+JavaScript+Flashですかね。
Flashは今だに避けられませんし、HTML5が普及したとしても、まだまだ活躍の場はあると思います。
何故かって？
それは、JavaScriptのCPU使用率が異常に高いからです(笑)
思った以上にこのコストは高くって、その点Flashはかなり頑張っていると思います。
64bitOSが標準になり、ブラウザもそれらをサポートするようになると、メモリもCPUも恐らく桁違い(文字通り)に浪費出来るようになるので、そうするとHTML5+CSS+JavaScriptでも快適にネットブラウジング出来るようになると思います。
その為に今からきちんと勉強をするというのがこれから先もやっていくための秘訣かなぁと思います。

蛇足

この間canvas使って色々アニメーションしてみたんだけど、すっごいCPU使用率が跳ね上がってびっくりしたのね。
Flashなんか目じゃないくらい。結局は、僕のコードの書き方が悪かったってだけなんだけど、今後似たようなコード書いて(しかもその辺気にせずに)リリースしちゃう人って出まくると思うんだよね。
ブラウザなのにPCベンチマークしちゃうみたいなネタサイトが出てきちゃう。
(そう言えば、以前にauがFlashでやってたなぁ)
そういう事を考えると、HTML5+CSS+JavaScriptで全て表現する！みたいなサイトは早過ぎるというのが僕の考えです。
早過ぎるからこそ、勉強する価値があるという見方も出来ますけれどねｗ
ただ、やるからにはPC周りを含めて確認して欲しいなと思います。
省エネルギーWebサイト(笑)が結局のところ一番見やすいですしね。
蛇足なげぇ。

難しい日本語

2010-07-31T01:59:00.000+09:00

日本語という言語は実にシンプルな言語であるが、同時にとても複雑で煩雑なルールで溢れている。
そのため、外国人からすると日本語は非常に「難しい」言葉になっている。

例えば、カタカナ。
外来語をカタカナ表記するという謎ルールを僕らは自然に受け止めているが、外国人からすると意味不明な言葉らしい。
音が違う、文字が違う、さらには意味まで違うなんてのはザラだろう。
なので、彼らは非常に混乱する。

例えば、助数詞。
この複雑さは日本人ですら理解出来ないほどであろう。
例えば、田んぼの数え方を知っている人は少ない。
田んぼは1枚とか1面と数える。
例えば、羊羹。
1棹、1本、1切れなどと複数の呼び方がある。
なんて複雑なのだろう。

そういう事を気にしだすと、(一応)日本人である僕が、まともな日本語を話そうと思っても話せなくなる時がある。
あれ、自分のこの言葉、正しい日本語なのかな、正式名称で言ってるかな。
そもそも、この数え方合ってるのかな。
そんな事が一瞬でも脳裏をよぎるともう駄目だ。
しどろもどろになって次に何を語るべきかを忘れてしまう。

日本語ってとても難しい(むつかしい)。

プログラマ３５歳限界説について

2010-07-30T02:18:00.007+09:00

なぜ、３５歳が限界なのか

プログラマ３５歳定年説の方が正しいかもしれませんが、敢えて限界説としてみます。
深い意味はありません。

さて、幾つかのエントリに書かれていますように、３５歳で限界を迎える、又は定年とされている職業、それがプログラマです。
曰く、体力が付いていかない。曰く、新しい知識を吸収できない。
故に、３５歳が限界である。

これ、プログラマに限った話ではないですよね。

「職人」の世界は、一部の人を除いて、３５歳くらいが限界だと思うんです。
体力、知力、経験、そして意欲。
これらがバランス良く保たれているのが３５歳ぐらいで、後は体力がゆっくりと落ていく。
平均寿命から適当に類推するに、この辺が人生の折り返し地点であり、ピークになると僕は思います。
(人間の年齢と能力が正規分布に準ずるとして)

僕が見てきた現実

僕は、二十代前半にSIerさんの所で３５歳を過ぎてもコードをごりごり書いている人たちを見てきました。
その人たちは、COBOL以外何も書いたことがない人で、当時流行っていたオブジェクト指向とか、Ajaxなんかに欠片も興味がなく、ただ仕事としてそれをこなしていました。
僕はたまたま運良くそのCOBOL仕事に殆ど触れずに過ごすことが出来ましたが、その仕事スタイルを見ていて、ありえないと感じました。
肌で分かるんです。その職場にいたら絶対自分は伸びないという事が。
SIerのお仕事が悪いとは思いませんし、それが楽しくないとも言いません。
しかし、SIerのお仕事で必要なのはコーディングスキルではありません。
ひたすらに体力と気力と根性が求められる世界です。そして、何よりも卓越した業務知識とコミュニケーション(笑)スキル。
それが全て、という世界が存在するということをその時初めて知りました。
プログラマに対する見方が随分と変わった瞬間でもありました。

学生時代、プログラマは魔法使いのような存在だと思っていました。でも、プログラマが身を置く世界を限定するならば、別に魔法を使えなくても良かったんです。
自分が溜め込んだ知識を必要十分に変換／出力する能力があれば誰にでも出来る仕事なんです。
そうすると、そこはもう人月計算の世界ですよ。

「僕が居なくても、この世界は回る」

という事に気づくと、やる気なんざどこかへと消し飛んでいきます。
不幸にして３０歳を超えたあたりにようやくそれに気づいたごく普通の人はプログラマ以外の道を探す訳ですね。
そして、不幸にしてそれに気づかない人は黙々と年齢と経験を重ねて５０代でも職人（？）プログラマとしての道を生きていく訳です。
もちろん、ここで言う職人は業務知識の職人であり、コード技術の職人ではありません。
しかし、その業務知識の職人が必須な世界は確かに存在するのです。
それが、現実でした。

まずは、そのプログラマに対する幻想をぶち壊す

そもそも、普通のプログラマは家に帰ってからコードを書くなんてアホな事しません。

プログラマだって普通の人間なんです。
家に帰ったら、ビールを飲みつつ、テレビを見て、ああ、今日も疲れたなぁとつぶやきながら寝る。
そういうごく普通のサラリーマンと一緒なんです。

でも、家でも職場でも夢の中でもコード書いているプログラマは、存在します。

そういう存在そのものがギャグみたいな連中は３５歳限界説に疑問を感じる訳です。
本当に３５で限界なの？
もっとやれるんじゃないの？
ってか、俺全然限界感じてないよ？
そんな信じられない馬鹿げた世界観と知識と意欲を持った人間がいるのです。

世間一般の「プログラマ」に対する幻想にマッチングする人はとても少ないんです。
一握りの存在なんです。

日本全体で言うならば１０００人居るか居ないかでしょう(俺脳内調べ)
数字の根拠は適当なのでアレですが、まあ、はてな界隈にはそういう変人が多いですよね。
そして露出も多いのでそういう人たちばかりだという幻想を植え付けられる学生や他業種の方々が居ますが、それはあくまでも幻想です。
彼らは、ギャグマンガの登場人物です。
或いはギャグそのものだと言っても過言ではないでしょう。
そんな連中は３５歳に限界なんか感じないし、こういうエントリを書いて自分の中の思いを吐露することで精神的安定を得ているのです。

世界を変える人と世界を支える人

これを読んでいる貴方は、今何歳ですか？
もし、３５歳を超えていたら、この文章を書いた馬鹿者の若さを鼻で笑ってください。
もし、２１歳以上、３５歳未満で、共感か反感を感じたら、その気持をブログに書きなぐってください。
そして、２１歳未満でしたら、読み流しましょう。この文章は読んでいる貴方の毒にも薬にもなりません。ラノベ未満の影響力しかありません。

最後に、将来プログラマになりたいと考えてる人へ。
本当にコードを書くのが好きですか？
寝ても覚めてもコードの事しか考えられませんか？
そうならば、是非スーパープログラマ目指して頑張ってください。応援します。
ちょっと書くのが好き程度ですか？
それならば、趣味プログラマでとどめておきましょう。
そっちの方が二百倍幸せです。
コード書くのが嫌いですか？
それならば、普通のプログラマになれます。
コードを書くのを仕事として割り切るならば、案外長くやっていけるかもしれません。

プログラムを書くのが好きで好きで好きで好きでしょうがないという本当に変な人は、スーパープログラマを目指しましょう。
というより、そういう人が「世界を変える」コードを書いてきたと僕は思います。
コードを書くのが嫌いで嫌いでしょうがないという人は、プログラマとしての道を選んだとしても落胆しないでください。
そういう人が「世界を支える」コードを書いてきたと僕は思います。

プログラマは素敵な職業ですが、それに対する愛着が両極端でないとやっていけない職業です。
僕は、プログラムを書くのが大好きです。
願わくば、世界を変える人になりたいと思っています。
僕の限界はまだまだ先のようです。

JSONPでの最速ローディング模索

2010-07-28T00:51:00.002+09:00

ひとつ前のエントリが嘘ばっかりだったので、再度書き直しです。
今回、JSONPでの最速ローディングを模索して、こんなコードを書いていました。

function retが条件分岐している所。
あくまでも、JSONPのcallbackが走ってからという考え方なので、真の最速には程遠いと思います。

operaはscriptのcallbackが走る段階では、まだDOM構築が終わっていない。

Firefox,Google Chrome,SafariはDOM構築が終わっている

IEはsetTimeoutの10msでほぼ確実に実行出来る(1msだと失敗するケースがある)

今まではDOMContentLoadedっぽいのを確認してから走らせていたけれども、それより先にJSONPリクエストを投げる形にしたかった。
IEの所、もしかしたらdoScroll判定した方が良いかもしれない。
色々悩ましい……。

==チラシの裏==
jsdoitに書いた最速のローディングからの発展です。
今までの自分の認識
・windowのloadイベントに割り当てときゃとりあえずおｋ
現在の自分の認識
・windowのloadイベントって全部読込み終わるまで待つのかよアホか。
・DOMContentLoadedで最速だべさ
・ん、でも考えてみたら、scriptタグ内での関数が最速だよね
・headのscriptタグ内で動的生成したらもうちょい早く読み込めるんじゃないの？
・callbackの時点でDOM出来てるよねー？
・Operaたんorz　そして、IEめ……。
・ひとまず、Firefox、Safari、Chromeはこれが一番速い予感！！←チェックしろよ
・OperaたんはやっぱりDOMContentLoadedに頼るしかない
・IEはまあ、setTimeoutでも十分じゃろ
・正直アイディア切れ
・また今度考えよう
==チラシの裏終わり==

JSONPを適当に実行するためにはてなスターのJSONP使っています。
テストする時は適当なURLに変えてください。お願いますm(_ _)m。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>JSONP Test</title>
  <script type="text/javascript">
    (function(_d){
     var start = [];
      var init = function(uniq){
      var t = (new Date).getTime();
        start.push(t);
        var script = _d.createElement('script');
        script.src = 'http://s.hatena.ne.jp/blog.json/http://looxu.blogspot.com/?callback=callback'+uniq + '&dummy='+t;
        script.type = 'text/javascript';
        script.charset = 'UTF-8';
        var head = _d.getElementsByTagName('head')[0];
        head.appendChild(script);
        window["callback"+uniq] = function(obj){ ret(obj,uniq) };
      }

      function ret(obj,num){
        
        if(0/*@cc_on +1@*/ ){ //IE
          setTimeout( function(){ resout(obj.title,num) }, 10 );
        }else if( window.opera){  //Opera
          document.addEventListener('DOMContentLoaded', function(){ resout(obj.title,num) },false );
        }else{  //Firefox,Webkit
          resout(obj.title,num);
        }
      }

      function resout(text,i){
        var end = (new Date).getTime();
        _d.getElementById('time_result').innerHTML += (end - start[i]) + 'ms<br>';

        var res = _d.getElementById('result');
        res.innerHTML += text;
      }

      for( var i=0; i<3; i++ ){
        init(i);
      }

     })(document);
  </script>
</head>
<body>
  <div id="result">Loading...</div>
  <div id="time_result"></div>
  <br>
  <iframe src="http://www.yahoo.co.jp/" frameborder="1"></iframe>
</body>
</html>

JavaScriptの最速実行を行うとき、Opera限定で起きる謎現象。

2010-07-27T12:21:00.006+09:00

15:28追記
このコード全部のブラウザで駄目だｗ
自宅に帰ったら、再度エントリしなおします。

知ってる方が居られたら教えて欲しい。
下記のコードをOpera10.6で実行すると、「done!」が表示されない。

・動かないケース(scriptが取得したいElementより前に書いてるケース)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Load test</title>
<script type="text/javascript">
(function(_d){
var res = _d.getElementById('result');
res.innerHTML = "done!";
})(document);
</script>
</head>
<body>
<div id="result">test</div>
</body>
</html>

ちなみに、こっちだと動く（当たり前だけど）
・動かないケース(scriptが取得したいElementより後ろに書いてるケース)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Load test</title>
</head>
<body>
<div id="result">test</div>
<script type="text/javascript">
(function(_d){
var res = _d.getElementById('result');
res.innerHTML = "done!";
})(document);
</script>
</body>
</html>

ま、素直にdocumentのDOMContentLoadedにaddEventListenerすれば問題解決。
エラーコードから考察するに、Operaのscript実行は生HTMLのDOM構築前に実行されてる可能性が高そうな事が分かった。
というよりかは上から順番に読んで、DOMを逐次構築しつつscriptも実行みたいな感じかな。

そこで、仮説を立ててみた。
・documentの中身がscriptタグの位置により変わっているのかもしれない。
そのテスト用コードは下記の通り。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Load test</title>
<script type="text/javascript">
(function(_d){
window.missing_document = _d;
_d.write(_d.getElementById);
_d.write('<br>');
var res = _d.getElementById('result');
_d.write(res);
})(document);
</script>
</head>
<body>
<div id="result">test</div>
<script type="text/javascript">
(function(_d){
var next_missing_document = _d;
var res = _d.getElementById('result');
_d.write(res);
if( window.missing_document !== next_missing_document ){
document.getElementById('result').innerHTML = "diff";
}else{
document.getElementById('result').innerHTML = "same";
}
})(document);
</script>
</body>
</html>

残念ながらsameと出力される。
オブジェクト的にはどうやら同じもの扱いみたいだ。
(もしかしたら、比較の仕方が間違っているかもしれないけれど)。

どちらにしろ、このような書き方は滅多にしないし、そもそもOperaの場合、DOMContentLoadedで十分じゃまいか。
結論としましては、OperaではDOMContentLoaded使えという事で。
(その他のブラウザだと、こういう事しなくても良い。あのIEたんですら実行出来るのだっ！)

simple_html_domでFatal error: Allowed memory sizeが出まくった。

2010-07-15T18:44:00.004+09:00

simple_html_dom.phpを使ってクローリングしたデータを加工してたんだけど、なぜだかメモリ不足になりまくったので調べたら、file_get_htmlで得たデータは解放しない仕様らしい。
んで、FAQに書いてあるように、


$html = file_get_html(...); 
// do something... 
$html->clear(); 
unset($html);

と書けば良い事を知った。
結論：ドキュメントはちゃんと読みましょう

２７分間200手超の死闘

2010-07-02T22:07:00.002+09:00

久々の将棋の棋譜です。
まさしく死闘。

SoftpediaにVimlike on Safariが登録された。

2010-06-16T17:22:00.000+09:00

なんぞこれー
http://mac.softpedia.com/progClean/vimlike-Clean-79224.html

SafariでもVimキーバインドを！

2010-06-13T01:05:00.003+09:00

vimlike-onsafari - Project Hosting on Google Code
http://code.google.com/p/vimlike-onsafari/

こちらのページでVimっぽい動きをさせるSafari拡張を公開しました。
どうぞご自由にお試し下さい。
hjkl+HaHそしてgt、gTでタブ切替。
これで、Safariでも気持ちよくキーボードブラウジングが楽しめます。

キーボードブラウジングに慣れたら、是非Operaを使ってみて下さい！
より快適な空間ナビゲーションを体験出来ますよっ！

(頑張れば空間ナビゲーションも実現出来るかもしれませんが(苦笑))

Safariの証明書作成でハマった。

2010-06-11T08:06:00.003+09:00

Safari拡張の作り方を参考に取り合えず開発環境を作ろうと思って、証明書発行の所でハマった。

ハマったのはここ(引用)
Windowsの場合「Windows Safari Extension Certificate Assistant」の案内に従って、テキストファイル(http://devimages.apple.com/safari/files/certreq.txt )を保存、cmdで certreq -new certreq.txt newcsr.pem を実行。

cmdで、certreqしたら、Windows様から「んなコマンド知らん」と怒られて困った。
ぐぐったら、Windows Server 2003 SP1 Administration Tools Packをインストールすれば良いらしい。
と言うことで、12Mもあるファイルを落としてインストール。
再起動無しで使えました。
これで、俺的Safari快適環境が作れる！
今夜頑張る(謎

Loox Uと初音ミクで行こう！

一人暮らししてる僕のコダワリ

駄話

MinGWの64bitをインストールする

メモ

今日からあなたも使える！？ uupaa.js入門！

前書き

uupaa.jsとは

なにはともあれ使ってみる

uupaa.jsをビルドする

ビルドが……、ビルドが面倒です、安西先生……

実際に動かしてみる

DOMを生成する

よくあるJavaScriptの書き方

スマートなuupaa.js

スタイルを変えてみる

よくあるJavaScriptの書き方

スマートなuupaa.js

hoverイベントを簡単に

最後に

JavaScriptで遊ぼう 20分間クッキング♪(初心者向け)

前書き

JavaScriptの開発環境を整える

適当にHTMLを作る

小学生でも理解できるコードを書く

少しレベルアップ

さらにレベルアップ

おすすめの本

最後に

ArcCosineはスケジュール登録を覚えた

Bloggerってすげー

Keyaction cancelerを更新しました。

必要は発明の母

お待ちかねのコード

Favstar.fmが重い

みんな大好きFavstar

vim+zsh+Cygwin環境を構築したので、メモ

Cygwinで遊びたいっ

ダウンロード先

インストールするファイル類

apt-cygのインストール

minttyの設定

細かい設定等

感想

minttyを最大化で起動する方法

最近、Cygwin始めました

本題

gmailでの不満解消。

今までの不満

特殊環境でのみ発生する不具合

解決策

蛇足

こんなに若者が不幸な時代はない

初めに

幸福の定義

続かなければ意味が無い

こんなに若者が不幸な時代はない

Google Calenderの曜日に色をつける

OperaのUserCSSです

購入しました。

最近流行のあの本です

.htaccessでSSIを有効にする

自分用のメモです

Operaをたった10分でチョッパヤにする方法

前口上

手順

RAMディスクをインストールする

RAMディスクにキャッシュディレクトリを作る

Operaのキャッシュディレクトリを変更する

Operaを再起動する

もしも蝉が東北大のウインドノーツだったら。

Twitterに投稿したネタです

1分で対応する、はてなスター二重表示対応

僕のブログ限定の現象かもしれませんが

1分でできる対応

一部の人にしか嬉しくないIE9のJavaScript情報

イベントキャンセルと言えば

ということで、よくあるコード

カーテンを買った

AndroidのWebbrowserで、望みどおりのスクロール位置を取得したいっす

今日からあなたも使える！？　uupaa.js入門！

JavaScriptで遊ぼう　20分間クッキング♪(初心者向け)

teiden-notifierを使ったサービス作ったよ　～Blackout Tokyo～