2009年10月30日金曜日

可愛いいいいいいいいいいいい!!!

このエントリーをはてなブックマークに追加

tweenもどき

このエントリーをはてなブックマークに追加
tween modokiというWebサービス(?)を作っています。
先日、Ver0.5になったので、宣伝も兼ねてここに記載しようと思います。

・これは何?
 Twitterクライアントです。
 Tweenという非常に便利なクライアントの動きを真似て作っています。
 作っていますが、機能劣化してます。

・使用シーンは?
 ネットカフェとかでふとTwitterしたくなった時とかかなぁ。

・URLうp!URLうp!
 ほい つhttp://tunsns.net/modoki/

・使い方を詳しく
 今のバージョンだと、開いた瞬間に2個くらいBASIC認証用のダイアログが出てくると思います。
 その内これは直します(^^;
 で、そのダイアログにTwitterのIDとパスを入力すれば後は自動的に画面が表示されます。
 操作は基本的にはキーボードで行います。
 「j」 次の発言を読む
 「k」 前の発言を読む
 「Enter」 (リスト部)Replyを自動挿入 (入力部)発言をPost
 「Tab」 発言の場所への画面切り替え
 「n」 次のタブへ
 「p」 前のタブへ
 「e」 発言内のURLっぽいのを開いてくれる。先頭のみ。
 「s」 発言をふぁぼる
 「Space」 最後の未読へ移動
 「G」 リスト部最後へ移動
 「gg」 リスト部先頭へ移動

・分かりづれーよ
 基本的にはVimっぽい動きをすると思っていただければおkです。

・Optionの説明は?
 Optionで設定できるのは、outputzの復活の呪文、フッター、後ログイン用のID、パスの登録です。
 各項目はそれぞれそのままの意味です。
 outputzで自分の出力を計測したい人にお勧めですねっ!

・セキュリティが気になります。
 データの保存にはCookieを使っています。こちら側のサーバでは何も保存していません。

・そういえば、これってどのブラウザで動くの?
 Opera、Firefox、Safari、Google Chromeといったブラウザで動作確認しています。
 IE以外でしたら大体動きます。

・これって何か工夫してる?
 超工夫してます。ソースを見てもらうと分かりますが、このアプリはHTML+CSS+javascriptだけで構成されてます。
 とってもシンプルなクライアント構成になっています

・HTMLじゃなくて、XHTMLじゃね? しかも嘘くさい。
 ……それは色々と失敗してまして……。
 うぃ、むっしゅ。その内直します。

・tunsns.netつながらないぞ、ふぁっく
 codereposに最新版をうpしています。
 チェックアウトはこちらからどうぞ http://svn.coderepos.org/share/websites/modoki/
 こっちでそれっぽい何かを見れるかもです http://bulkya.blogdb.jp/share/browser/websites/modoki/

・最後に一言どうぞ
 Tween作者すごいです。

2009年10月29日木曜日

影絵すげえ……

このエントリーをはてなブックマークに追加

ニコニコ動画用のUserCSSと俺俺UserJSを更新したよ。

このエントリーをはてなブックマークに追加
CSSはこっち。

/* For player page */

#WATCHHEADER{
padding-top: 540px !important;
}

div#flvplayer_container{
position: absolute !important;
top : 110px !important;
}

/* For ranking page */

div.content_312 {
display: none !important;
}

div.content_672 {
width:984px !important;
}

table.rank_data {
width:974px !important;
}

div > div.thumb_frm,div > div.thumb_frm_rank_1,div > div.thumb_frm_rank_2 {
width: 960px !important;
}

marquee {
-moz-binding: none !important;
display: block;
padding-left: 5px !important;
height: auto !important;
}



UserJSはこっち。

// ==UserScript==
// @name nico description
// @namespace http://looxu.blogspot.com/
// @include http://www.nicovideo.jp/watch/*
// @author Arc Cosine
// @version 2.1
// ==/UserScript==
(function(){
/** simple version of $X
* $X(exp);
* $X(exp, context);
* @source http://gist.github.com/3242.txt
*/
var $X = function (exp, context) {
context || (context = document);
var expr = (context.ownerDocument || context).createExpression(exp, function (prefix) {
return document.createNSResolver(context.documentElement || context).lookupNamespaceURI(prefix) ||
context.namespaceURI || document.documentElement.namespaceURI || "";
});

var result = expr.evaluate(context, XPathResult.ANY_TYPE, null);
switch (result.resultType) {
case XPathResult.STRING_TYPE : return result.stringValue;
case XPathResult.NUMBER_TYPE : return result.numberValue;
case XPathResult.BOOLEAN_TYPE: return result.booleanValue;
case XPathResult.UNORDERED_NODE_ITERATOR_TYPE:
// not ensure the order.
var ret = [], i = null;
while (i = result.iterateNext()) ret.push(i);
return ret;
}
return null;
}

//無駄なオブジェクト指向www
var NDesc = function(){

this.com_style = {
'color' : '#1259C7',
'text-decoration' : 'underline',
'margin-right' : '5px'
};

this.options = [
{ 'text' : 'Video詳細', 'func' : function(){ NDesc.prototype.description_toggle(); } },
{ 'text' : 'mitter', 'func' : function(){ NDesc.prototype.popup(); } },
{ 'text' : '広告表示', 'func' : function(){ NDesc.prototype.advert_toggle(); } }
];

this.mitter = false;

//fire!
this.init();
}

NDesc.prototype.init= function(){
//add input box
this.createInput();

//hide parts
this.description_toggle();
this.advert_toggle();

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

//create parts
this.pos = $X('//div[@id="des_2"]/p[@class="font12"]/a')[0];
if( typeof this.pos == "undefined" ){
//this.pos = $X('//div[@id="des_2"]/p[@class="TXT12"]/nobr/a[last()]')[0];
this.pos = $X('//div[@id="des_2"]/table/tbody/tr/td/p[@class="font12"]')[0];
}
for( var i=0; i<this.options.length; i++ ){
this.createParts( this.options[i] );
}
}

NDesc.prototype.createParts = function( data ){
var node = document.createElement('span');
node.appendChild(document.createTextNode(data['text']));
this.setCSS(node,this.com_style);
this.pos.parentNode.insertBefore( node, this.pos );
node.addEventListener( 'click', function(){ data['func'].apply(); }, false );
}

NDesc.prototype.setCSS =function( node, options ){
for( var option in options ){
//It's cooooool css setting code! I think so... :)
var st_op = option.replace( /-([a-zA-Z])/, function(m){ return m[1].toUpperCase(); });
node.style[st_op] = options[option];
}
}

NDesc.prototype.toggleObject = function(xpath){
var t= $X(xpath)[0];
t.style.display = ( t.style.display == 'none' ) ? 'block' : 'none';
}

NDesc.prototype.description_toggle = function(){
this.toggleObject('//div[@id="des_2"]/table[2]');
this.toggleObject('//div[@id="des_2"]/table[last()]');
}

NDesc.prototype.advert_toggle = function(){
this.toggleObject('//div[@id="WATCHFOOTER"]');
this.toggleObject('//div[@id="PAGEFOOTER"]');
}


NDesc.prototype.popup = function() {
var autoclose = (!this.isMitter)? '&autoclose=true' : '';
this.isMitter = true;
// For eyevio
var normalized_url = location.href;
var url = "http://mitter.jp/bookmarklet/popup", v = "0";
url += '?v=' + v + '&url=' + encodeURIComponent(normalized_url) + '&title=' + encodeURIComponent(document.title)+ autoclose;
var options = 'toolbar=0,resizable=1,scrollbars=1,status=1,' + ((autoclose.length!=0)? 'width=1,height=1' : 'width=450,height=230');
var open_func = function() {
var w = window.open(url, 'mitter', options);
if (!w) {
alert('Popup window from Mitter seems to be blocked. Please allow popup window to post on Mitter.');
} else {
w.focus();
}
};
open_func();
}

NDesc.prototype.createInput = function(){
if (window.parent != window) return;
NDesc.prototype.input = document.createElement('input');
NDesc.prototype.input.readOnly = true;
NDesc.prototype.input.autocomplete = 'off';
NDesc.prototype.input.addEventListener('focus', function() {
NDesc.prototype.input.style.backgroundColor = '#fcc';
NDesc.prototype.input.value = 'Hotkey available.'
}, false);
NDesc.prototype.input.addEventListener('blur', function() {
NDesc.prototype.input.style.backgroundColor = '#9D9';
NDesc.prototype.input.value = 'Hotkey unavailable.'
}, false);
NDesc.prototype.input.addEventListener('keypress', NDesc.prototype.key_event, false);
NDesc.prototype.input.style.margin = '0px 0px 5px 10px';
var head = document.getElementsByTagName('h1')[0]
head.appendChild(NDesc.prototype.input);

}

NDesc.prototype.use_hotkey = function(){
NDesc.prototype.input.focus();
}

NDesc.prototype.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);
}
}

NDesc.prototype.volumeup = function(){
this.volume(5);
}

NDesc.prototype.volumedown = function(){
this.volume(-5);
}

NDesc.prototype.seekleft = function(){
this.seek(-10);
}

NDesc.prototype.seekright = function(){
this.seek(10);
}

NDesc.prototype.seek2top = function(){
this.seek(Number.NEGATIVE_INFINITY);
}

NDesc.prototype.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);
}

NDesc.prototype.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);
}
}


NDesc.prototype.key_event = function(e){
var handler = {
'o' : function(){ NDesc.prototype.description_toggle(); },
'm' : function(){ NDesc.prototype.popup(); },
'a' : function(){ NDesc.prototype.advert_toggle(); },
' ' : function(){ NDesc.prototype.play_pause(); if( !NDesc.prototype.isMitter ){ NDesc.prototype.play_pause(); NDesc.prototype.popup(); } },
'k' : function(){ NDesc.prototype.volumeup(); },
'j' : function(){ NDesc.prototype.volumedown(); },
'h' : function(){ NDesc.prototype.seekleft(); },
'l' : function(){ NDesc.prototype.seekright(); },
'H' : function(){ NDesc.prototype.seek2top(); } //Shift+H
};
var t = e.target;
if( t.nodeType == 1 ){
var pressKey = String.fromCharCode(e.which);
if( typeof handler[pressKey] == "function" ){
e.preventDefault(); //Stop Default Event
handler[pressKey].apply();
}
}
}

var o = new NDesc();

})();


誰得?
俺得。

2009年10月25日日曜日

ピアプロをキーボードで快適操作するUserScript書いたよ

このエントリーをはてなブックマークに追加
ま た そ の ネ タ か

はい。またそのネタです。
コードは以下のとおり。
後で、userscriptsへ投稿します。
例のごとくOperaでしか動作確認していません。
qキーで前のイラスト
wキーで次のイラスト
bキーでブックマーク
先頭のページで多分動きがオカシクなるけど、気にしない(マテ


// ==UserScript==
// @name piapro
// @namespace http://looxu.blogspot.com/
// @include http://piapro.jp/content/*
// @author Arc Cosine
// @version 1.0
// ==/UserScript==
// License Public Domain
(function(){
var PIAPRO = {
init : function(){
window.addEventListener('keypress', function(e){
PIAPRO.addKeyBind( 'b', function(){ PIAPRO.bookMark(); }, e);
PIAPRO.addKeyBind( 'q', function(){ PIAPRO.moveLink(0); }, e);
PIAPRO.addKeyBind( 'w', function(){ PIAPRO.moveLink(1); }, e);
},false);
},
addKeyBind : function( keyChar, func, eve ){
var t=eve.target;
var n=t.tagName.toLowerCase();
if( t.nodeType != 1 || n == 'input' || n == 'textarea' ){
return;
}
var pressKey = eve.which;
keyChar = (keyChar=='Enter') ? 13 : keyChar.charCodeAt(keyChar);
if( pressKey == keyChar ){
eve.preventDefault(); //Stop Default Event
func.apply();
}
},
bookMark : function(){
var url = 'http://piapro.jp/bookmark/';
var id = location.href.match(/content\/(.*)/)[1];
var cont_id = document.getElementsByName('content_type_id')[0].value;
var param = 'mode=add&id=' + id + '&content_type_id=' + cont_id + '&folder_id=0';
var xhr = new XMLHttpRequest();
xhr.open( 'POST', url, false );
xhr.onreadystatechange = function(){
if( xhr.status == 200 && xhr.readyState == 4 ){
location.reload();
}
}
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send( param );
},
moveLink : function(mode){
var imgs = document.querySelectorAll('#main_in680 div.mt10 div div a img');
var target = [];
for( var i=0, l=imgs.length; i<l; i++ ){
if( /gen/.test(imgs[i]['src']) ){
target.push(imgs[i].parentNode);
}
}
var link = target[mode];
if( typeof link != 'undefined' ){
location.href = link;
}
}
};
PIAPRO.init();
})();

2009年10月16日金曜日

お金は無いけど幸せ

このエントリーをはてなブックマークに追加
フリーランスとして生きてそろそろ一年が経とうとしている。
とりあえずアルバイトという形でそれなりの収入源は得られているが、勤務時間は短いので収入はそれなり。
けれど、幸せな毎日を送っている。

なんでこんなに幸せなのだろうと考えてみると、僕は自分の時間をすごく重要視する人間であるからだという結論に至った。
正社員として働いていると、どうしても自分の時間には限界がある。
極端な話、土日が唯一の自由時間なのに体力回復に全て充てられるという生活は良くある事だった。

今は違う。
少なくとも週のうち四日は自由時間でその間何をしても良い。
好き勝手に自分のしたい事をしている。
それでも、生きていけてる。

もちろん、節約はそれなりにしないといけないし、預金だって乏しい(毎月残高10万切る生活してるしな!)
でも、その乏しい収入の中で本当に必要なものだけを吟味して買えることは凄く幸せな事なんだと改めて気づいた。
なので、この一年で買ったもので無駄な買い物はかなり少ない
#無いわけではない

以前はお金が足り無すぎると妙な圧迫感に支配されてたが、以外にもお金が無い方がゆとりが出ているのもまた事実。
もちろん、今後の老後の事とかキチンと考える人にとっては僕の現在の残高状況は超危機的状態で孤独死まっしぐらの駄目人間はよ死ねと言わんばかりなのは分かるが、その時になったらその時でどうにかなるだろう。

人間ある程度の楽観は必要なのである。
日本人は国民性として、楽観が異常なくらい欠如してると思う。
無駄な方向への楽観は強いのだが、生活基盤に関しては大多数の人がかなりの不安を抱えて生きてる。
これは一体どういう事なのだろう。僕には結論を出せない。


最も、世界的な規模で見ても生活への不安は日々募っているはず。
なぜ募るのか。何が不安の要因になってるのか。
それが分かれば楽チンなんだけれども、人によってその不安の要因は異なる。
(そして僕の場合はたまたま自分の時間という非常に安直なものであったというオチね)

大量に金が無いと駄目という人や、物が無いと駄目という人、あるいは愛されないと寂しくて死ぬというどこのレジェンドラビットだと突っ込みたくなる人がいーっぱい居るけど、そういう人は本当にそれが自分にとって大切なものかどうか今一度考え直したほうがいい。

案外、物や金のプライオリティは低いし、異性からの愛情も無くてもなんとかなる。
#なんとかならない人もいるので、その人はそれに突っ走ってね
ま、ぐだぐだと書いたけども、僕は今日も幸せです。

2009年10月15日木曜日

玉虫色の表現

このエントリーをはてなブックマークに追加
昔の職場で使われた言葉に「玉虫色の表現」というのがあった。
読み手によっていかようにも解釈出来る表現を揶揄してそう言っていた。
これが良いか悪いかは別として、僕はこの表現を身に着ける技術を学んだ。
世の中0か1か、YesかNoで通らないというのを知ったきっかけの一つでもある。

僕自身、文章を書くときはなるべく正確、且つ明解に書く事を目標としているが、この玉虫色の表現はそれの真逆に位置する。
とにかく曖昧に、不正確に書くのだから。
いや、もちろん、厳密に読めば不正確ではないのだが、意図的に「勘違い」させる事が出来るので僕は不正確だと思う。

プログラムの設計書は正確に記載するのが望ましいが、あらゆる政治上(笑)の理由により、正確に書く事が望ましくない状況は腐るほどある。
そこで全てを詳らかにするよりは、玉虫色の表現を使って表面的な隠ぺい工作を行う事により、物事が上手く進める方が物事が効率的に進む。
これが正しい方法だとは思わないが、実務をやってると真面目にぶつけると難色を示す人が多いのだ。

最も玉虫色の表現は自分の直属の上司に見せる段階では使わないほうが望ましい。
直属の上司には全部公開して、その上で玉虫色の表現を使ってごまかすか、ストレートに行くかを提示するのが「筋」の通し方だと思う。
この筋を通さないと最終的にお鉢は自分に回ってくる。
筋もどこまで通すかの見極めも難しくて、これはその職場職場で色々変わってくるが、それはその場その場の「空気」を読む必要がある。
論題と外れるのでこれはここまでで止めておくが、この筋通しの見極めも中々面白い。

さて、ぐだぐだと書いてきたが、ここで読者に質問。
玉虫色の表現を使ってる人、いますか?
経験者から言わせてもらうと、その技術は今後役立つかもしれないし、役立たないかもしれない。

職場のカラーに合わせてその技術の引き出しを上手く使い分ける事が重要です。
玉虫色の表現は便利ですが、使いどころを誤ると後で痛いしっぺ返しが来ます。
ですが、直球勝負よりもこのような変化球を混ぜる事でピンチを切り抜ける事が出来る事もあります。

そんな事をふと思いついた午後でした。
落ち? 無いよ?

2009年10月12日月曜日

Pixivの評価を変化させるUserScript書いた

このエントリーをはてなブックマークに追加
Pixivの☆って、hover属性を上手く使ってるので、空間ナビゲーションが使えないっ!!
って事で、UserScript書いた。(書くな)
以下をコピペするだけでおkだぜ!
もちろん、Opera10でしか確認してません(笑)
多分、FirefoxとかChromeでも動くと思う。
多分……。

こちらでも公開してます。
http://userscripts.org/scripts/show/59567

キー説明

評価アップ … 'l'キー
評価ダウン … 'h'キー
決定   … エンターキー


姑息な手段でエンターキーを判定してます。詳細はコードを参照くださいw


// ==UserScript==
// @name pixiv star
// @namespace http://looxu.blogspot.com/
// @include http://www.pixiv.net/member_illust*
// @author Arc Cosine
// @version 1.0
// ==/UserScript==
// License Public Domain
(function(){
var PIXIV = {
hover_size : 30,
my_rate : 0,
init : function(){
window.addEventListener( 'keypress', function(e){
PIXIV.addKeyBind( 'h', function(){ PIXIV.rateChange(-1); }, e);
PIXIV.addKeyBind( 'l', function(){ PIXIV.rateChange(1);}, e);
PIXIV.addKeyBind( 'Enter', function(){ PIXIV.rateSend();}, e);
},false );
},
addKeyBind : function( keyChar, func, eve ){
var t=eve.target;
var n=t.tagName.toLowerCase();
if( t.nodeType != 1 || n == 'input' || n == 'textarea' ){
return;
}
var pressKey = eve.which;
keyChar = (keyChar=='Enter') ? 13 : keyChar.charCodeAt(keyChar);
if( pressKey == keyChar ){
eve.preventDefault(); //Stop Default Event
func.apply();
}
},
rateChange : function(num){
PIXIV['my_rate'] += num;
if( PIXIV['my_rate'] < 0 ) { PIXIV['my_rate'] = 0 };
if( PIXIV['my_rate'] > 10 ) { PIXIV['my_rate'] = 10 };
var chk = document.getElementsByClassName('r1-unit')[0];
if( chk.tagName.toLowerCase() == 'li' ){
return;
}
for( var i=1; i<11; i++ ){ //It's bad roop code ...;-)
var rate_star = document.getElementsByClassName('r'+i+'-unit')[0];
rate_star.style.width = (PIXIV['hover_size'] * i) + 'px';
if( i <= PIXIV['my_rate'] ){
rate_star.style.background = "url('http://source.pixiv.net/source/images/star_rating.gif') left center";
rate_star.style.zIndex = 2;
rate_star.style.left = '0px';
}else{
rate_star.style.background = "url('http://source.pixiv.net/source/images/star_rating.gif') left top";
rate_star.style.zIndex = 1;
rate_star.style.height = '30px';
}
}
},
rateSend : function(){
var w = (typeof unsafeWindow != 'undefined' ) ? unsafeWindow : window;
w.send_rating(PIXIV['my_rate']); //pixiv api
}
}
PIXIV.init();
})();

2009年10月7日水曜日

IEで動かない一行掲示板作ってみたよー。

このエントリーをはてなブックマークに追加

ボカロアイコン 一行掲示板

イメージは上図の通り。
みっくみ~くにし~てやんよ~♪
開発はJavaScript+CSS+Rubyという定番的な定番です。
ファイル保存なのでとってもアレですし、回線がアレなので、アレでアレでアレです。
#分からん