HouseTect, JavaScripter Blog

VMware fusion2のインストール

WindowsXP

・アップデート
・仮想マシン→ネットワークアダプタ→NATからブリッジに変更
　これをしないとMacとVM内のWindowsでセグメントが違う

[via]
OSX Leopard+VMware Fusion+WindowsXPでVPN接続するコツ - some comments

・ファイルの削除はfn＋Delete
・pageup、pagedownはfn＋十字キー
・UNCアクセスはsmb://ホスト名/フォルダ名
・環境設定、マウスのショートカット、幅ボタンのチェックを外す
　これをしないとWindows側でCtrl押しながら複数選択できなくなる
・capsキーをctrlキーに変更

・英数キーをIMEオフにする

[via]
　VMware Fusionで半角全角切り替え│ホームページ制作備忘録│ホームページ制作│京都│ダバダバ・デザイン

Office

・アップデート

Firefoxのツールバーにfaviconを表示する

MacのFirefoxはデフォルトではfaviconが表示されないので、これを表示するように修正する。
以下のフォルダにuserChrome.cssを作成し、スタイルを記述する。

toolbarbutton.bookmark-item:not([container="true"]) > .toolbarbutton-icon { padding: 0px !important; margin: 0px !important; width: 16px; height: 16px; display: inline !important; }

[via]
鳥獣保護区 | Firefox のブックマークツールバーに favicon を表示する

Firefox拡張のインストール

・はてなブックマークFirefox拡張で新しいインターネットを体験しよう
・Install Page Speed
・html validaterがMacOS版がない・・・が〜ん
・Greasemonkey :: Firefox Add-ons
・Xmarks (formerly Foxmarks) :: Firefox Add-ons

TextMateのインストール

・ライセンスキー入れた
・日本語化 - Railsに最適なテキストエディター「TextMate」を入れて日本語化してみた
・GetBundleの設定 - TextMate Bundle アップデートしてますか？
・ただGetBundleのリポジトリブラウザからのインストールが動いていないっぽい
　cellfusion blog » TextMate の Bundles を楽々インストール
　しょうがないから「http://macromates.com/svn/Bundles/trunk/Bundles/」からURLコピーしてsvnコマンドで取得した
・FIrebug Bundle http://doctyper.com/archives/200703/firebug-bundle-for-textmate/

XCodeのインストール

・LeopardのインストールDVDから

VLCのインストール

動画再生ソフト、これがないと話にならない。
・VLC media player - Open Source Multimedia Framework and Player

Locktightのインストール

・WindowsだとWindowsキー＋Lでロックできるんだが、Macにはそれっぽいのがないので大事なツール。
・コマンド＋Ctrl＋Shift＋Lに設定
・設定→セキュリティからパスワード要求のチェックを外してチェックを入れた
　これでスクリーンセーバーから戻る場合にパスワードを要求されるようになる

[via]
MOONGIFT: » スマートにスクリーンロックを実行する「LockTight」:オープンソースを毎日紹介

iStatmenusのインストール
・iStat menus, a Mac app by iSlayer
・メニューバーにメモリ、CPU利用率、温度などを表示。

結構70度を超えてしまうのでファンを購入した。
買ったもの

MacPortsのインストール

・The MacPorts Project -- Home

SIMBLのインストール

Pluginとして提供されているツールがSIMBLを必要とすることが多々あるのでインストールしとく。
・SIMBL

[via]
わかばマークのMacの備忘録 : SIMBL

visorのインストール

ターミナルをすぐ呼び出せるようにできるプラグイン、これはあると便利。

・Blacktree
・/Users/hoge/Library/Application Support/にSIMBLフォルダ作成してvisorのbundleを入れる

SafariStandのインストール

・SafariStand - hetima.com
・SIMBLフォルダにbundleを入れる

Witchのインストール

・Many Tricks · Witch ・設定→ユニバーサルアクセスの補助装置に～にチェックを付ける

・入れたはいいんだけど、シェアウェアだけらやめてウィンドウ操作を強力に補助する『Senebier』 | Macの手書き説明書にしてみた

・でもどのみちoption＋tabなので、Windowsのalt＋tabにバッティングするので結局削除・・・

・そのかわりExposeの設定で右ShiftでExposeが起動するようにしたのでとりあえずこっち使う（このほうはMacっぽいしw）

Finderの設定

・Finderのメニュー「表示→表示オプション」からアイコンの大きさとFontSizeの変更

TwitterクライアントのP3インストール

アイコンがかわいいんだ、これまた。

・【P3】P3:PeraPeraPrv - とかいろいろ

smcFanControlのインストール

会議とかにMac持ち出すときにファンの回転数上げて冷却する用

・eidac

Messengerのインストール

Mac版のMSN Messengerあったんだ〜。

・Mactopia Japan | ダウンロードと更新

コマンドエイリアスの登録

.bash_profileがなかったので作成

$ vim
:e .bash_profile

alias ls="ls -vF"
alias l="ls"
alias ll="ls -l"
alias la="ls -la"

備考

デフォルトのSafariのバージョンは3.2.3
アップデート後はバージョン4

最近うちの娘が絵を書くことを覚え出したのでクレヨンを買ってみた。
Amazonでクレヨンで検索すると、たくさんの商品が出てくるんですが、このベビーコロールがだんとつで人気のよう。

口に入れても大丈夫だし、このクレヨン自体も丈夫みたいだしね。
ただ硬いだけあって、少し力を入れないと絵が薄くなっちゃうみたいだけど、洋服に付きにくいなんて利点もあるから全然OK。

あと１個１個がスライムみたいな形をしていて重ねて遊ぶこともできるみたい。

さぁどんな絵を描いてくれるのか楽しみです！

本当はもっと早くにアップデートしたかったんだけど、こうゆう作業はどうしても面倒になっちゃう。
WordPressを2.7にアップデートしたのほうでWordPressのほうはもう終わってるので、MTのアップグレードをやってみた。

移行するのもいろいろハマるポイントもあったのでメモメモ。

既存のMTをバックアップする

サーバーに置いてるmtフォルダ配下をすべてローカルにコピーする。

ボクはCyberduckというFTPアプリを使っているので、ドラッグアンドドロップでローカルへのコピーが完了します。

MT4をダウンロードする

個人で使用しているのでシックス・アパート>Movable Type 4 個人ライセンス（無償）からダウンロード。

MT4をサーバーにアップする

これもFTPツールを使ってアップするだけ。

dbフォルダとmt-config.cgiをサーバーにアップする

ボクはDBをsqliteを使用しているので、dbフォルダをアップしています。

mt-config.cgi

##### SQLITE ##### ObjectDriver DBI::sqlite Database ./db/mtdb

後は設定ファイルのmt-config.cgiをアップすれば、以前の設定を引き続き使えるようになります。

使っていたプラグインのインストール

ブログ内にコードを書く場合、textareaとかpreを使うと思いますが、この中のコードにも<br>が付いちゃうのを防ぐために、ModTextFilter.plというのを使っています。

なのでこのファイルをpluginsフォルダに入れて、記事編集のフォーマットのところを見たら文字がエスケープされてる・・・

なので調べてみたら、改行テキストフィルターという文字がエスケープされた状態で書かれていたので普通に文字列にしたらなおった。

MT->add_text_filter('ModTextFilter' => { label => '改行テキストフィルター', on_format => \&modified_text_filter });

「改行を変換する」を改良するプラグイン - The blog of H.Fujimoto

ウィジェットの設定

ウィジェットの設定が初期化されていたので、前と同じような順番で項目を追加していった。

これで一通りの作業は終わり。

まとめ

とりあえず再構築が大分速くなったのがありがたい。
今までデザイン修正したくても再構築に時間がかかりすぎてたのでやっていなかったからこれからちょいちょいいじるかも。

でも画像をアップロードするウィンドウのJavaScriptがバグっててoverlayのレイヤーが自動で閉じない・・・
なのでFirebugでdisplay:none;にしてやっこさこの記事を完成させた。
何か策はあるんだよね・・・w

やっとMT4にアップデートしたど〜〜！

知らなかった〜。
ゆえにあんまりSafariを開発用ブラウザにしてなかったw

以下のようにWebインスペクタの左下のボタンを押すと。

こんな感じにSafariのウィンドウに統合できるみたい。

でもFirebugの調査みたいに、マウスをもって行った箇所を表示するって機能はまだないのかな？
これがないといちいちhtmlタグから順番に降りていかないといけないから面倒・・・

職場でMacBook Proが使えるようになったので、一応ファンを購入。
このファンはダブさんのお墨付き。

あとは適当に今読みたい本いろいろ。

ちまたで話題のGoogle Waveの開発者向けプレゼンテーション。
後でじっくりみたいので、ブログにメモメモ。

1時間20分もあるので、見応えたっぷりです。（全部英語ですが・・・w）

■関連リンク
・Google Wave 私的まとめ - IT戦記
・【詳報】Google Waveとは何なのか？ − ＠IT

継続と言うとSchemeが有名ですが、Rhinoのドキュメントを読んでいたら「Rhino 1.6R1」から継続が存在してたみたいだったのでとりあえず試してみた。
Rhino 1.6R1 変更ログ

継続とは？

継続と聞くとちょっと小難しいので、まずは軽く説明してみます。
継続とは「ある時点での状態」を変数に格納しておき、そのポイントに後から戻るということが可能になる概念である。

・・・

まったくもって小難しいのでとりあえず以下のSchemeのコードを見ていただきたい。

継続サンプル - Scheme

(define x ( )) (begin (display "こぶた") ; ① (display "たぬき") ; ② (call/cc (lambda (z) (set! x z))) (display "きつね") ; ③⑤ (display "ねこ")) ; ④⑥

結果

こぶた
たぬき
きつね
ねこ

[via]
Schemeを作ろう 第3回

このコードではdisplayで文字を出力しているのだが、途中のcall/ccという部分が継続オブジェクトを生成している部分になる。
この継続オブジェクトをx変数にセットしているので、もし後でx変数に入っている継続オブジェクトを実行するとさらに

きつね
ねこ

と文字列が出力される。
このようにあるポイントを変数に記憶させておき後から呼び出せるのが継続になるのだ。

そしてそのときのスコープ内の値も保持されているのでクロージャっぽいですね。
ってかクロージャも継続と言ってもいいのかな？

Rhinoをインストールする

一応Rhinoを使ってJavaScriptの継続を試すのでのインストールを書いておきます。参考までに。
あとボクの環境がMacなのでWindowsの方は適宜読み替えていただきたい。

まずは以下からダウンロードします。
Rhino のダウンロード

そしてRhino Shellが使えるように、環境変数を設定しましょう！

ホールディレクトリにある.bash_profileファイルに以下を追記します。
（CLASSPATHに入れるパスはご自分の環境に合わせてくださいね。）

export CLASSPATH=/code/java/rhino1_7R1/js.jar
alias rhino="java org.mozilla.javascript.tools.shell.Main"

.bash_profileへの追記などは以下を参考にしてみてください。
Mac OS Xで環境変数にPATHを追加する方法

設定が終わったら、ターミナルから

$ rhino

と打つとそのままJavaScriptがirb形式でコードを入力できます。
rhinoから抜けたい場合は「quit()」と入力してください。

継続オブジェクトContinuationを使ってみよう

Rhinoで継続を使う場合は、Continuationというクラスをnewすることから始まります。
Continuationクラスをnewして変数に格納すれば、そこが継続として後から戻るポイントになります。

では実際に使ってみましょう！

function call_cc() { return new Continuation(); } var c; function showMessage() { var count = 1; print("hoge", count++); // ① c = call_cc(); print("hoge", count++); // ②④ print("hoge", count++); // ③⑤ } showMessage(); if( c instanceof Continuation ) { c(); }

このコードを保存してrhinoコマンドで実行します。

$ rhino -opt -1 -f coroutine.js

-opt -1は継続を使う場合に必要で、-fはファイルから実行するという意味になります。
Rhino Shell - MDC

先ほどのSchemeのコードに近い感じですが、showMessage関数を呼ぶとprint関数で順番に文字を出力していきますが、
途中にあるcall_cc関数内でContinuationクラスをnewして継続オブジェクトを返しています。
（ここでreturnされるオブジェクトはfunction型になります。）

そしてshowMessage関数の呼び出しの後に継続オブジェクトを関数として呼び出しています。
ただし継続オブジェクトが実行した後はc変数に入っている継続オブジェクトはundefinedになってしまうので、instanceofで継続オブジェクトかどうか判断しています。
これについては順番に説明して理解してみましょう！

以下にshowMessage関数を呼び出したところから処理の流れを記載してみました。

showMessage関数の呼び出し
↓
文字列の出力（hoge1）
↓
Continuationオブジェクトの生成
↓
文字列の出力（hoge2、hoge3）
↓
instanceofで確認→OK
↓
継続関数オブジェクトの実行
↓
文字列の出力（hoge2、hoge3）
↓
instanceofで確認→NG
↓
よって2回目の継続関数オブジェクトは実行されない

ちょっとややこしいですが、c()で継続関数を実行すると継続ポイントに戻って再度コードを実行していきますが、
再びc()の部分まで実行しようとしているのでそれをinstanceofで阻止している感じです。

また継続オブジェクトには引数を渡すこともできます。
「c("foo");」という感じで呼び出すと、「c = "foo"」と同じになり継続オブジェクトに渡す引数で処理を分岐したりもできます。

JavaScript1.7のyieldに似てる

一見yieldを使うと同じような雰囲気は出てるんですが、継続と少し違うのはyieldはポイントポイントで完全に処理が止まって待っててくれるのですが、
継続は処理をすべて1度実行しちゃいます。

<script type="text/javascript; version=1.7"> function showMessage() { console.log("hoge1"); yield; console.log("hoge2"); console.log("hoge3"); yield; } let y = showMessage(); y.next(); // hoge1 y.next(); // hgoe2 hoge3 </script>

継続とyieldの出力結果を見るとよく理解できると思います。

継続の場合の出力結果

hoge1
hoge2
hoge3
hoge4 ←ここが継続ポイント
hoge5

yieldの場合の出力結果

hoge1
hoge2
hoge3

まとめ

継続をどのようにうまく使うかなど、まだ全然理解できていないのでこれから少し掘り下げて勉強してみたいと思います。
（それならScheme勉強したほうが良さそうですねw）

あとGemmaさんの記事で、サーバーサイドJavaScript(Rhino)の継続でCoroutineを書いてみた - Gemmaの日記
というのがすごく参考になります、2つの関数を交互に実行する協調的マルチタスクな処理実装されています。
すごいっす。

■参考リンク
・RhinoWithContinuations - Cocoon Wiki

Mootools版のmooStackからインスパイアされてjQuery版を作ってみました。

ただ画像をめくるだけだとつまらないので、トランプのようにシャッフルする機能を入れてみました。
ちょっと面白い動きをするのでなかなか気に入ってます。
遊んでみてください〜！

デモ、詳細は以下からどうぞ。
jStack.js - jQuery Plugin

■他に作ったもの。
画像がグルグル回るjQuery Plugin - jMerrygoround作りました

MacWiki - コマンド/say
Macに標準でインストールされているsayコマンドは、引数に与えた文字を読み上げてくれるコマンドです。
この時点でちょっと面白いのですが、さらに声の種類も豊富にあるのでいずれかを選んで発音させることができます。

実際のVoiceは以下のようになっており、結構種類がある。

$ ls /System/Library/Speech/Voices/

Agnes.SpeechVoice
Albert.SpeechVoice
Alex.SpeechVoice
BadNews.SpeechVoice
Bahh.SpeechVoice
Bells.SpeechVoice
Boing.SpeechVoice
Bruce.SpeechVoice
Bubbles.SpeechVoice
Cellos.SpeechVoice
Deranged.SpeechVoice
Fred.SpeechVoice
GoodNews.SpeechVoice
Hysterical.SpeechVoice
Junior.SpeechVoice
Kathy.SpeechVoice
Organ.SpeechVoice
Princess.SpeechVoice
Ralph.SpeechVoice
Trinoids.SpeechVoice
Vicki.SpeechVoice
Victoria.SpeechVoice
Whisper.SpeechVoice
Zarvox.SpeechVoice

この中でBadNewsとGoodNewsが使えなかったのですが、原因不明・・・

Voiceを選ぶときには-vオプションを指定する

say -v Boing San of a bitch

すべてのVoiceで発音させるシェルプログラム

sleep 1 cd /System/Library/Speech/Voices/ list=(`ls`) #echo ${list[@]} # debug for arg in ${list[@]} do voice=(`echo $arg | sed -e s/\.[^.]*$//g`) echo $voice say -v $voice San of a bitch done

すべてのVoiceを列挙して順番に発音させていきます。

Daft Punkっぽくやってみたかったけどダメだった

THE DAFT PUNK'S CONSOLE by NAJLE.comこれを見てsayコマンドでできるかな〜と簡単に考えていましたがやっぱりダメだった。
でもちょっとそれっぽくはなったかも。

全パターンを聞いてみて、「harder better faster stronger」の声に似ているのはTrinoidsでした。

# daft punk - harder better faster stronger say -v Trinoids work it sleep 0.5 say -v Trinoids make it sleep 0.5 say -v Trinoids do it sleep 0.5 say -v Trinoids makes us

これは近いんだけどキーを上げれないから厳しいな。
でも気合い入れればそれっぽくなるかも！
あとdo itのところが速過ぎるw

■関連リンク
・シェルの変数に慣れる
・【 文字列を置換する「sed」 】：ITpro
・シェルスクリプト入門
・Macの読み上げアプリアップル - ダウンロード - ユーティリティ - iSpeech

Daft Bodies - Harder, Better, Faster, Stronger

この映像が本来のPVな気がしてきたw

にとよんさんが作られたHelloWorldFlashをForkしてみた。

文字のラインにCircleを描く

元々のHello World!!! | wonderfl build flash onlineではFlash内をCircleで埋め尽くしていますが、ボクのほうは文字のラインにだけCircleを描くようにしています。

あとfiltersを使ってぼかして、BlendMode.ADDでキラキラさせてます。

blendMode=BlendMode.ADD; filters=[new BlurFilter(3, 3, 1)];

文字のラインにアルファベットを描く

アルファベットにalphaを指定したいんですが、うまくいかなくてTextFieldにalphaをつける | (SCRATCHBRAIN.BLOG v2)を参考にやってみたのですが激重になってしまったので、画面の外からアルファベットを出現するようにしています。
こっちはいまいち文字が読めない感が否めない・・・

プログラムコード（Circleのほう）

package{ import flash.display.*; import flash.text.*; import flash.filters.*; import flash.geom.*; import caurina.transitions.Tweener; [SWF(backgroundColor="0x000000")] public class HelloWorld extends Sprite{ private var bd:BitmapData; private var baseColor:uint = 0xFFFFFF; public function HelloWorld():void{ var tf:TextField = new TextField(); tf.textColor = 0x000000; tf.htmlText = "<font face='Times New Roman' size='18'>Hello\nWorld</font>"; tf.autoSize = "left"; bd = new BitmapData(tf.width, tf.height, false, baseColor); bd.draw(tf); for(var i:int = 0; i < tf.textWidth; i++){ for(var j:int = 0; j < tf.textHeight; j++){ if (bd.getPixel(i, j) == baseColor) continue; Tweener.addTween( randomize(addChild(new Circle(Math.random() * 0xFFFFFF))), { x: i * 10, y: j * 10, alpha: 1, delay: (i + j) * .2 * Math.random(), time: 1, transition: "easeOutCirc" } ); } } } private function randomize(d:DisplayObject):DisplayObject{ d.x = 500 * Math.random(); d.y = 500 * Math.random(); d.alpha = 0; return d; } } } import flash.display.*; import flash.filters.*; import flash.text.*; class Circle extends Shape{ public function Circle(color:uint):void{ graphics.beginFill(color); graphics.drawCircle(0, 0, 6); graphics.endFill(); blendMode=BlendMode.ADD; filters=[new BlurFilter(3, 3, 1)]; } }

PerlのWAFを使ったことがなかったので、インストールしてみたのですがいやはや苦労しちゃいましたのでメモメモ。

インストール環境

OS

MacOS X Leopard

Perl

5.8.8

CPANからのインストール

ネットでCatalystのインストール方法を見ていると、いろんな人がいろんな方法でやっていて正直難しかったです。
どうやら以下の2つのモジュールを入れれば良さそうだと分かっても、CPANがアクセスするftpサーバーの都合でダウンロードできなかったりと意外と面倒でした。

• Catalyst::Runtime
• Catalyst::Devel

それで最終的に行きついたサイトが以下。
perl:catalyst [kazusa wiki]

こちらではcat-installというファイルをダウンロードし、

perl cat-install

を実行する。
これでCatalyst::Runtimeモジュールがインストールされます。

そして次に

sudo cpan Catalyst::Devel

を実行して、もう一つのモジュールをインストールします。

ただ、

Your terminal expects ISO-8859-1 (yes/no)? [yes] no

というのを聞かれなかったんだけど、途中に出てきてたのかな？
見当たりませんでしたw

CPANの接続先ftpでエラー

Not Connectのエラーがコンソールに出ていて、何回かやるとうまくいきそうなんだけど、ダメみたいでハマった。
調べてみたらCPANの接続先を追加するとうまくいくとなっていたので以下を参考に追加してみました。
LunaTear: CPANのサーバー追加

cpan
cpan> o conf urllist push ftp://ftp.u-aizu.ac.jp/pub/CPAN
cpan> o conf urllist push ftp://ftp.dti.ad.jp/pub/lang/CPAN/

そして一応追加されているか確認。

cpan> o conf urllist

大丈夫だったら

cpan> o conf commit

これで変更が反映されます。
commitしないといくらやっても接続先サーバーが追加されないので注意が必要です。

雛形を作ってみる

Ruby on Railsのようにザクッとテンプレートを作ってくれるので、ここがCatalystの魅力なんでしょうね。
コンソールで、

catalyst.pl HelloWorld

これでモデル、コントロール、ビューあたりが自動生成されるようです。

そしたらHelloWorldフォルダの中にあるスクリプトを実行してスタンドアロンな簡易サーバーを起動してみます。

cd HelloWorld
./script/helloworld_server.pl

これを実行するとコンソールにURLが表示されるので、後はブラウザでアクセスするだけです。

まとめ

Javaに慣れていると必要なライブラリはlibの中に入れとけば動くという感覚なんですが、こうゆう風にCPANから必要モジュールをインストールし、それらが「/Library/Perl/5.8.8」に勝手に展開されて後は呼び出すだけというのがまだちょっと慣れない。
どちらかと言えばプロジェクト単位にライブラリを配置したいという感じがします。

Movable Typeなんかがその方法を使っていて、必要なCPANモジュールはextlibというフォルダに格納されています。
なのでプログラムコードの中でそこを見に行くように、

use lib qw(./extlib);

なんてことをしないといけないのですが、どちらかというとボクはこっちより。
このブログのレンタルサーバーはロリポップを使っているのですが、telnetもsshも使えないのでCPANからインストールという方法が使えなそうです。
だからデプロイもftpになるのかな？めっ、面倒だ・・・w