暗号化

'123|123123123123123' という文字列を暗号化する。

暗号化するのに利用する鍵(Password)は「InmbuvP6Z8」。

var crypto = require('crypto');
var cipher = crypto.createCipher('aes-256-cbc','InmbuvP6Z8');
var text = "123|123123123123123";
var crypted = cipher.update(text,'utf8','hex');
crypted += cipher.final('hex');

console.log(crypted);

以上で、'12443a347e8e5b46caba9f7afc93d71287fbf11169e8556c6bb9c51760d5c585' という暗号化された文字列を得る。

複合化

var crypto = require('crypto');
var decipher = crypto.createDecipher('aes-256-cbc','InmbuvP6Z8');
var dec = decipher.update('12443a347e8e5b46caba9f7afc93d71287fbf11169e8556c6bb9c51760d5c585','hex','utf8');
dec += decipher.final('utf8');

console.log(dec);

簡単。

次は公開鍵暗号のやり方を調べる。マスタリングTCP/IP SSL/TLS編を読みながらだが…。

マスタリングTCP/IP SSL/TLS編 [単行本]

価格： ￥ 4,725 国内配送料無料

Eric Rescorla (著), 齋藤 孝道 (著), 古森 貞 (著), 鬼頭 利之 (著)

Amazon で見る

とくに考えずに自宅サーバで作ったアプリを動かそうとすると、 「Node.js で作ったアプリをポート3000番で動かしてー、フロントサーバとして Apache か nginx を置けば良いやー」 って感じで上の図のような構成になると思いますー。が (そもそもイベントループが売りの Node.js のフロントサーバが Apache ってどうなの？ってのは置いといて。)

ふと気づく。クライアントからの WebSocket が届いてねえ！

はい、対応してないんですよね、Apache も nginx も、WebSocket のプロキシは。

仕方ないので無理矢理動かそうとすると、Node.js アプリが動いてるポートを開くことになる。 こんなんするんだったら、フロントサーバいらないんじゃないって気もするが。

• socket.ioを試すときは，ポートの開き忘れとcookieに注意 ::ハブろぐ

node-http-proxy

ということで、ちょろっと調べてみたところ、 WebSocket に対応したリバースプロキシ発見。 なんと node.js 製…。

• nodejitsu/node-http-proxy -GitHub

こいつをフロントサーバとして Port 80 で動かして、後ろに Port 3000 で動くウェブアプリを置くとすると、 以下のような設定になるっぽい。

var httpProxy = require('http-proxy');
    
httpProxy.createServer({
  router: {
    'localhost': 'localhost:3000'
  }
}).listen(80);

名前ベースで振り分けもできる。

var httpProxy = require('http-proxy');
    
httpProxy.createServer({
  router: {
    'foo.com': '127.0.0.1:8001',
    'bar.com': '127.0.0.1:8002'
  }
}).listen(80);

イベントベースのウェブサーバで WebSocket も対応してるので、 フロントサーバとして Apache からの置き換えも考えちゃうなーこれは。

と、いいつつ、、、設定ファイルの書き換えが面倒なので全然手を付けてないが…。

Garmin Forrunner 310XT

Garmin - Forerunner 310XT　ハートレートモニターバンドル

なんといってもランニングをしている分においては iPhone のなんちゃってランニングアプリより、

1. バッテリの持ちが良い。
2. サイコンとして使うのに頑丈である。
3. GPS の精度が良い。
4. 腕につけるのでペースを頻繁に確認することができる。
5. 心拍計がついている。

などなど、メリットは盛りだくさん！！ もちろん、記録したデータはイマドキですもの、 Garmin Connect というウェブサービスにアップロードして、 オンラインで確認することができる。

ただ、、ただひとつ惜しい点を挙げると言えば、、、走行ログを確認しようとすると、 Garmin Connect がサポートしているオンライン地図が Bing になってしまうという点なんですよね…。

「なんで Google Maps じゃないんだ、醜くてやだやだいやだあああ。」 と、叫んでたら、あるところにはあるものですな、Garmin Connect の地図を Google Maps にしてしまうという、 Chrome 拡張、「Gfix」。

…。

惜しい。

なんで Safari 拡張じゃないんだよお。

Safari 拡張、 ConnectMapFix

と、いうことで作ってみました。Gfix の Safari 版。 っつーか API を Safari 拡張に変えただけ。

• ConnectMapFix
• yuanying/ConnectMapFix - GitHub

一応、オリジナルの作者さんにも断っておきましたが、何か問題があるようでしたらメッセージお願いします。 (日本語通じないと思いますけど…。)

WebSocket とか試してみたくなったので Node.js とか色々インストールしてみた。そのログ。

環境は、

• Mac OS X 10.6
• MacPorts 1.9.2

インストールしたものは、

• Node.js
• npm (Node Package Manager)
  • express (Sinatra Like な Node.js 上のウェブフレームワーク)
  • Socket.IO (WebSocket を色々なブラウザで使えるようにしたクライアント/サーバライブラリ。)

Node.js のインストール。

[yuanying@Leaf] ~
$ sudo port install nodejs
[yuanying@Leaf] ~
$ node -v
v0.2.2

npm のインストール

/opt/local の下のパーミッションを変えるのが推奨だよとかいわれたので、よくわからんけどパーミッションを変えてインストール。

[yuanying@Leaf] 
$ sudo chmod -R g+w /opt/local/
Password:
[yuanying@Leaf] 
$ curl http://npmjs.org/install.sh | sh
[yuanying@Leaf] ~
$ npm -v
0.2.16

express と Socket.IO のインストール

[yuanying@Leaf] 
$ npm install express
[yuanying@Leaf] 
$ npm install socket.io

ふむ…。とりあえず以上。遊ぶのは明日。

参考文献

1. Node.js API リファレンス
2. HowTo: Install node.js on Mac Snow Leopard with Express

ちょっと昔の記事(一年前)の話だけど、少し思いついたので補足を。

このエントリではブログの「B!」ボタンに気をつけようって話だったけど、 はてなブックマークのコメント欄に ブックマークレットを使ってるから平気だっていう記述がちらほら見つかったが、 それはちょっと違うんじゃないかなーと。

ブックマークレットを使ってフィッシング

例えばテスト用につくってみたページがあるのですが、

• フィッシング用テストページ

このページをポップアップ型のブックマークレットを利用してブックマークしてみてみると、 見事別サイトに飛ばされていることがわかる。

ポップアップされたページはURLの確認ができないので、 そのページが本物かどうかもわかりゃしない。オソロシイ。

しかもたった4行のスクリプトをサイトに追加するだけでおk。

window.oldOpen = window.open;
window.open = function(url, name, option) {
  window.oldOpen('http://www.fraction.jp/log/2008/04/phishing.html', name, option);
}

確かに、ログイン画面とかでテキストフィールドにフォーカスが当たっていないと超不便！

これからはちゃんと自分の作るアプリケーションでは、テキストフィールドをフォーカスしよう…。

ユーザーサイドスクリプト

今までならば話はそれで終わっていたのですが、少し考えてみるにウェブの画面でテキストフィールドがあった場合、フォーカスが当たっていて困ることって少ないんじゃないだろうか？と思った。

むしろフォーカスがデフォルトで当たっていた方がいいんじゃない？？

そして今の私には簡単にブラウザの機能を追加する、強力なツールがある。そう、ユーザサイドスクリプトだ！

ってことで作ってみました。ページを開くたびにテキストフィールドがあったら強制的にフォーカスするスクリプト。

// ==UserScript==
// @name        Input Focuser
// @author      Yuanying
// @namespace   http://www.fraction.jp/
// @description Focus input text field.
// @include     http://*
// @version     0.1
// ==/UserScript==

(function() {
  var inputs = document.getElementsByTagName('input');
  for (var i=0; i<inputs.length; i++) {
    var input = inputs[i];
    if (input.getAttribute('type') == 'text') {
      input.focus();
      return;
    }
  }
})();

ぶっちゃけやってることは簡単です。DOMを操作して一番最初にヒットしたテキストフィールドにフォーカスをあてるだけ。

動作環境

以下の環境で動作を確認しています。

• Mac OSX 10.5 + Safari 3.0.4 (5523.10.6) + GreaseKit 1.3

インストール

最新版を以下からダウンロードしてください。

• Web Usability Script

変更履歴

ver 0.2.0.20080112

フォーカスを当てた時にスクロールが発生する場合にはフォーカスしないように修正。

ver 0.1.0.20080112

初期リリース。

その他

チェックボックスやラジオボタンの周辺のテキストにラベルを貼ったりとかもしてみたい。

何でもオートフォーカスすれば良いってもんじゃない？

何でもオートフォーカスするような環境になった事が無いので、ユーザビリティが悪くなるのかどうかわからない。ということで実験。

最初、フォーカスがあたるテキストフィールドがスクロールした場所にあると、ページがそこにスクロールしてしまうのでかえって使いづらいなと思ったけど、それを直してみたらなかなか。

このアイディア自体は以前のエントリ (OSXライクなGoogle Readerテーマを「WebKit Nightly Builds」で使う) で利用した考え方だが、Userstyles.orgが提供するユーザスタイルシートをすべてユーザスクリプトの形でも提供しているのを見て触発された。

具体的には以下のスクリプトを使う。

ソースコード

#!/usr/bin/env ruby
#
#  Created by Yuanying on 2007-10-01.
#  Copyright (c) 2007. All rights reserved.

require 'open-uri'

open(ARGV[0]) do |io|
  puts <<CSS
// ==UserScript==
// ==/UserScript==
var css = "#{io.read.gsub('"','\"').gsub(/\n/, "\" +\n\"")}";
if (typeof GM_addStyle != "undefined") {
	GM_addStyle(css);
} else if (typeof addStyle != "undefined") {
	addStyle(css);
} else {
	var heads = document.getElementsByTagName("head");
	if (heads.length > 0) {
		var node = document.createElement("style");
		node.type = "text/css";
		node.appendChild(document.createTextNode(css));
		heads[0].appendChild(node); 
	}
}
CSS
end

このスクリプトでスタイルシートをユーザスクリプトに変換してCreammonkeyに読み込ませる。

使い方

$ ruby user_js_converter.rb http://www.fraction.jp/~yuanying/greader.css > greader.user.js

あ、もしかしてOperaで動かなくなったかも…。

変更点

タグを表示するように修正

タグクラウドを表示して欲しいという要望があったので、とりあえず暫定処置として個々のブックマークに対してつけられたタグを表示するように変更してみた。

コメントがついていないブックマークも表示するように修正

上記の修正に伴って、コメントがついてないブックマークにもタグがつけられている可能性があるので、すべてのブックマークを表示するように変更した。

最小化/最大化の状態および初期サイズ値を記憶するように修正

たまにすべてのページに対してはてブビューワのウィンドウがしゃしゃり出てくるのがウザイなと感じたので、最小化/最大化状態と、初期サイズ値を記憶するように修正した。

最小化しておくと、ページを遷移しても最小化した状態が記憶されてるので便利。

あと、ドラッグして変更したウィンドウサイズもついでに記憶するようにしておいたので、わざわざソースをいじらなくても初期ウィンドウサイズを変更できるようになった。

画像およびデザインに関するデータをすべてスタイルシートに外部化

どっちにしろ埋め込んでるから外から見たら変わらないけど、メンテナンスが楽になった。

デザインも簡単に変えれるようになったのでカスタマイズするのも良いかも。

確かに開くページ全部 b.hatena.ne.jp に問い合わせるのは、たまにウザく感じたりします。(b.hatena.ne.jp に問い合わせて欲しくないページ開くときもあるしw) ので私も同じような修正を加えて、0 キーを押した時にコメントビューワを開くようにしてみました。

なかなか具合がよろしいので trunk にもこの変更追加しようかなーと思わないでも無いんですが、問題が。

Greasemonkey のキーバインディング変更はどこまで許されるか

スクリプトをインストールしたユーザが Ctr + d とか 0 キーとかに機能を割り当てるのは良いんですけど、既存のウェブページとかなりかち合うんじゃないかとか。デフォルトでインストールした時に Ctr + d とか 0 キーに割り当ててるのはさすがにまずいよね…。

んで、割り当てられてなさそうな Ctr + Shift + o とかにしてみたら、今度は Safari で動かない。

解決策

とりあえず今考えてるのは「hatebu」と、キーを叩くとウィンドウが現れるようにしようかと。

ついでにウィンドウサイズ最適化や最小化もキープレスで行えるようにしたり。

機能

オリジナルと比べて以下の点が拡張されています。

• ドラッグしてサイズ変更が可能なコメントウィンドウ。
• 最小化ボタン。
• サイズ最適化ボタン。
• Mac OSX ライクなウィンドウ。

動作環境

以下の環境で動作を確認しています。

• Mac OSX 10.5 + Safari 3.0.4 (5523.10) + GreaseKit 1.4
• Mac OSX 10.5 + Firefox 3.0b2 + Greasemonkey 0.7.20080121.0
• Mac OSX 10.4.10 + Opera 9.22

機能拡張板 はてブコメントビューワを利用するのには Greasemonkey をインストールした Firefox、もしくは GreaseKit をインストールした Safari、または Opera が必要です。

参考

• LeopardでGreaseKitを動かす

ダウンロード

最新バージョン

• 機能拡張板 はてブコメントビューワ ver 0.4.3.20080227

古いバージョン

• 機能拡張板 はてブコメントビューワ ver 0.4.2.20080204
• 機能拡張板 はてブコメントビューワ ver 0.4.1.20080122
• 機能拡張板 はてブコメントビューワ ver 0.4.0.20070822
• 機能拡張板 はてブコメントビューワ ver 0.3.2.20070728
• 機能拡張板 はてブコメントビューワ ver 0.3.1.20070727
• 機能拡張板 はてブコメントビューワ ver 0.2.0.20070726

変更履歴

ver 0.4.3.20080227

#15 GreaseMonkey のセキュリティアップデートに対応。(Thx k0y さん)

ver 0.4.2.20080204

#12 GM_setValue関数の不具合修正。

ver 0.4.1.20080122

GreaseKit 1.4に対応。(GM_*Value関数が無い場合にも動作するように修正。)

ver 0.4.0.20070822

タグを表示するように修正。

コメントがついていないブックマークも表示するように修正。

最小化/最大化の状態および初期サイズ値を記憶するように修正。

画像およびデザインに関するデータをすべてスタイルシートに外部化。

ver 0.3.2.20070728

文字サイズ変更時にタイトルバーのデザインが崩れる問題修正。

というか、間違えて REL-0.3.1を直接修正してしまった罠。

ver 0.3.1.20070727

最適サイズ変更時のバグ修正。

タイトルバーのデザイン修正。

一部のサイトでデザインが崩れるバグ修正。

ver 0.2.0.20070726

初期リリース。

検討課題

• チケット

tracで管理しているので、バグや機能改善などの希望がありましたら気軽にチケット切ってください。

Safari 2.x で動かない

• 最大化しようとすると開きすぎてしまう。

毎回はてブにアクセスしてうざい

「機能拡張版 はてブコメントビューワ」をキープレスで起動より。

現在はGreaseMonkey/Creammonkeyの機能で自分で非有効化すればいいんじゃないかな、と思ってるが暇だったらキープレスで表示/非表示モードを変更できるように修正する予定。

はてブ以外のサービスへの対応

確か他の同じようなGreasemonkeyスクリプトでやってた気がする。それ参考にすればすぐにできそうなので暇だったらやる。

タグクラウド表示機能

そのページにつけられてるタグをクラウド表示？

とりあえずブックマークにつけられた個々のタグは、表示するように変更。

ライセンス

オリジナルのライセンスに準じます。