Mighty Mouseの最大の欠点、それはスクロールボールが汚れ易いこと。僕の場合はアップスクロールが出来なくなってしまいました。
掃除方法を見ていると「付箋紙など細いストリップ上の紙をスクロールボールの隙間から差し込んでぐりぐりと掃除する」「水、サラダ油、シリコンオイルなどをたらしてスクロールボールを布やティッシュでごりごり拭き取る」とか「どんな汚れでも水だけで落ちるスポンジ」とかあるんですが、水を含ませた布ではどうにもならないし、なんとなくサラダ油も躊躇してしまう。
そこで思いついたのが、すぐに手の届く範囲にあった「メンタム」。リップクリームですね。まず布にメンタムをぐりぐり塗って、その布でスクロールボールをぐりぐりします。これで完治しました！そしてほのかなメンソールの香りが…
メンタムは塗りすぎないこと！というか作業はあくまでも自己責任でお願いしますー。
Tunnelblick
なんかMacのsqlite3って問題有りみたいですね。一ヶ月くらい前にMacでRails2.0.2環境を構築するってのを書いたんですが、ある日を境に見れなくなっちゃった。というわけで、OpenVPNを導入しました。MacでGUIを使ってOpenVPNするという話です。探してみたらあるもんです、GUI。
Tunnelblick – GUI for OpenVPN on the Mac
こっからダウンロードして、アプリケーションフォルダへ。
1. Tunnelblickを起動するとconfigファイル作りますか？と聞かれるので作る
2. /User/hoge/Library/openvpnのなかにopenvpn.confがあるので適当に書き換える。
3. その他必要なファイルを作成する。
4. Finderの右上のメニューバーにトンネルみたいなマークがあるので、そこからconnectする
5. トンネルが明るくなったら繋がったってこと。開通！
すいません、2,3あたりは他の人にやってもらったのであまり分からない…
openvpn.confはhoge.ovpnみたいな形で貰いました。普通にファイル名を変更すればオーケー
moo.fxというAjaxライブラリを使ってタブ切り替えとかアコーディオンとか色々なメニューを設置する手順とサンプルです。
http://www.nyokiglitter.com/tutorials/tabs.html
からダウンロードする。
ダウンロードしたファイルを適当な場所に置きましょう。<head></head>内に
<script type=”text/javascript” src=”パス/prototype.lite.js”></script>
<script type=”text/javascript” src=”パス/moo.fx.js”></script>
<script type=”text/javascript” src=”パス/moo.fx.pack.js”></script>
と書く。 CSSはサンプルで付いてくるtabbed.htmlの中に書かれているので、必要に応じて外部化するとか、なんとかしてください。それでもって、tabbed.htmlに書いてある
<script type=”text/javascript”>
function init(){
var stretchers = document.getElementsByClassName(‘box’);
var toggles = document.getElementsByClassName(‘tab’);
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 600}
);
//hash functions
var found = false;
toggles.each(function(h3, i){
var div = Element.find(h3, ‘nextSibling’);
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>
この部分 も外部化したければ出来るはず。ここに書いてある
var stretchers = document.getElementsByClassName(‘box’);
var toggles = document.getElementsByClassName(‘tab’);
このへんがCSSのClass名に対応する。
toggles, stretchers, {opacity: false, height: true, duration: 600}
このへんが動き方の設定になる。durationは値が大きいほど遅く動きます。
if (window.location.href.indexOf(h3.title) > 0) {
このへんがHTMLタグの設定になる。デフォルトはh3になってます。必要に応じて変更。HTMLは
<div id=”content”>
<h3 class=”tab”><div class=”tabtxt”><a href=”#”>1つ目</a></div></h3>
<h3 class=”tab”><div class=”tabtxt”><a href=”#”>2つ目</a></div></h3>
<h3 class=”tab”><div class=”tabtxt”><a href=”#”>3つ目</a></div></h3>
<div class=”boxholder”>
<div class=”box”><p>1つ目</p></div>
<div class=”box”><p>2つ目</p></div>
<div class=”box”><p>3つ目</p></div>
</div>
</div>
みたいな感じになる。（なんかtabbed.htmlのソースがややおかしいので、少し変えてあります）
開くコンテンツのクラス名はすべて<div class=”box”>なので、タブの順番と同じように書かないとダメっす。まぁあたりまえか。それで</body>の直前に
<script type=”text/javascript”>
Element.cleanWhitespace(‘content’);
init();
</script>
と書く。contentはid名。変更可能。
ちなみにlightbox JSと併用する場合はmoo.fx.jsのリンクををlightbox.jsより先に<head></head>内に記述しましょう。じゃないとlightboxが作動しなかった（少なくとも僕の環境では）
この他にも横にスライドするメニューと、2段組みのメニューがあります。個人的には 2段組みのメニューが気に入った！けど、謎な部分で設置に大変苦労したので、次回にでも書こうかな。
オープンソースで多機能な統合オフィススイートOpenOffice.orgでインベーダー風ゲームが出来る事を発見。僕はNeoOffice派だったので、まさかとは思ったが、普通に出来た。
やり方は簡単。「=GAME(“StarWars”)」と書く。ダイアログ的なのがでるので「OK」を押す。
左側に5個あるやつがキャラクター？かなんからしい。
こんな感じ。仕事はさぼらないようにしましょう。
前回はCookie機能&アニメーション&スクロール追随付きアコーディオンメニューについて書きましたが、jQuery.jsはprototype.jsと共存出来ない事が判明。lightboxも使っていたので動かなくなってしまいました。が、調べてみるとjQuery.jsでlightboxが使えるプラグインがあったので紹介します。
1. ダウンロード
http://leandrovieira.com/projects/jquery/lightbox/
からzipをダウンロードします。（2008/03 最新バージョン 0.4） js, css, images内のファイルを適当な所に置きましょう。画像へのリンクはjquery.lightbox-0.4.jsの27行目あたりからの
// Configuration related to images
imageLoading: ‘images/lightbox/lightbox-ico-loading.gif’, // (string) Path and the name of the loading icon
imageBtnPrev: ‘images/lightbox/lightbox-btn-prev.gif’, // (string) Path and the name of the prev button image
imageBtnNext: ‘images/lightbox/lightbox-btn-next.gif’, // (string) Path and the name of the next button image
imageBtnClose: ‘images/lightbox/lightbox-btn-close.gif’, // (string) Path and the name of the close btn
imageBlank: ‘images/lightbox/lightbox-blank.gif’,
を書き換えればok です。
2. head内に記述
<script type=”text/javascript” src=”http://hoge/jquery.js“></script>
<script type=”text/javascript” src=”http://hoge/jquery.lightbox-0.4.js“></script>
<link rel=”stylesheet” type=”text/css” href=”http://hoge/jquery.lightbox-0.4.css” media=”screen”>
<script type=”text/javascript”>
$(function() {
$(‘#id名 a’).lightBox(); //(‘ ‘)内を変更することができます e.g.) a[@rel*=lightbox]、a.lightboxなど
});
</script>
と書きます。
<script type=”text/javascript”>
$(function() {
$(‘#id名 a’).lightBox(); //(‘ ‘)内を変更することができます e.g.) a[@rel*=lightbox]、a.lightboxなど
});
</script>
の部分は例えばsettings.jsとか作って外部化しても大丈夫です（短いけど）
3. HTMLを記述
<div id=”id名”>
<a href=”大きい画像” title=”hoge”>
<img src=”サムネイル画像” alt=”hoge”>
</a>
</div>
みたいに書きます。id名をlightboxとかにしておけば分かり易いですね。 prototype.jsは削除して大丈夫です。
アニメーション付きのアコーディオンメニューはprototype.jsを使った物なんかが有名だけれども、それにCookieで開閉状況を記憶させておくものがなかなか見つからなかった。Cookieは使えてもアニメーションが使えなかったり、併用出来そうでもCSSのIDとClassが指定されていてそれ以外使えなかったり。が、発見。
http://sawa-s.com/scroll-accordion-menu.html
上記ページのダウンロードをクリック。設置方法も書いてありますが、付け加えてもう少し詳しく書いて行きます。
まず、ダウンロードしたファイルの中の「ddaccordion.js」「wrapscroll.js」「jquery.js」 「style.css」を自分のサイトの適当な場所にコピー。headに以下を記述します。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript" src="wrapscroll.js"></script>
コメントアウトになってる部分は消しちゃダメらしいです。そしてddaccordionメソッドの作成、wrapScrollオブジェクトの作成（動かす時のセッティングの内容みたいなもんです）をします。
<script type="text/javascript"><!--
ddaccordion.init({
headerclass: "expandable",
contentclass: "categoryitems",
collapseprev: true,
defaultexpanded: [0],
animatedefault: false,
persiststate: true,
toggleclass: ["", "openheader"],
togglehtml: ["suffix", "<img src='image/plus.gif' class='statusicon' />", "<img src='image/minus.gif' class='statusicon' />"],
animatespeed: "normal"
})
// wrapScroll
var mov = new wrapScroll('accordion_menu','container','header');
mov.marginTop = 5; //上からのマージンを指定(px)
//--></script>
これはHTMLに書く必要はないので（ブログだったらテンプレートに書けば済みますが、普通の静的なサイトだったら面倒ですし、長い）例えば「settings.js」というファイルを作って、上記内容をコピペして、head内にリンクするのが良いと思います。その場合は
ddaccordion.init({
headerclass: “expandable”,
contentclass: “categoryitems”,
collapseprev: true,
defaultexpanded: [0],
animatedefault: false,
persiststate: true,
toggleclass: ["", "openheader"],
togglehtml: ["suffix", "<img src='image/plus.gif' class='statusicon' />", "<img src='image/minus.gif' class='statusicon' />"],
animatespeed: “normal”
})
// wrapScroll
var mov = new wrapScroll(‘accordion_menu’,'container’,'header’);
mov.marginTop = 5; //上からのマージンを指定(px)
になります。それぞれの設定の内容はダウンロードしたサイトを参照して下さい。そしてHTMLに
<div id="accordion_menu">
<a href="http://sawa-s.com/"><div class="menuheader">HOME</div></a>
<div class="menuheader expandable">カテゴリー 1</div>
<div class="categoryitems">
<ul>
<li><a href="#">MENU 1-1</a></li>
<li><a href="#">MENU 1-2</a></li>
<li><a href="#">MENU 1-3</a></li>
<li><a href="#">MENU 1-4</a></li>
<li><a href="#">MENU 1-5</a></li>
<li><a href="#">MENU 1-6</a></li>
</ul>
</div>
・
・
・
のように記述します。べつに<li>を使わなくて<dl>とかでも大丈夫っす。それで「style.css」を適当に編集します。IDやClassを変える場合は必須。
メニューがスクロールについてくるのはいらないので、僕は使わないようにしました。「wrapScroll.js」のリンクをheadから削除して、「settings.js」の // wrapScroll以下を消せばokす。ちなみに wrapScroll.jsは法人利用などの場合はライセンスを取得する必要があるそうです。
追記
jquery.js はprototype.jsと共存出来ません。なのでlightboxなどを使っている人は動かなくなります。解決策を書いていますので、jQuery lightBox plugin – jQueryでLightBoxが使えるjavascriptを参照して下さい。
キーボードで様々な操作を素早く実現し、あたかもスーパープログラマーのように見えてしまう便利なアプリケーションがQuickSilverです。
とのこと。ダウンロードは
から。
マウスを使わないてアプリケーションを起動出来るし、iTunesの曲変えられるし、ファイルの圧縮とか、しまいにはSubversionのコマンドまで使えてしまったり、かなり便利。
こんな感じで、写真を→Photoshopで→開きます。という風に指定出来る。日本語には対応してないんですが（出来ない事も無い）例えば「システム環境設定」だったら「System Preferances」なので、SYとか打てば普通に出てきます。
ちなみに QuickSilverがあるとDockの意味があまり無くなる
お勧めプラグインは
らへんでしょうか。是非お試しを。
キーボードをワイヤレスにしたので、右クリックなんていらないぞ！スクロールボールなんていらないぞ！半透明じゃないのかよ！てか値段高いよ！と多々不満はあったものの我慢出来ずにマウスも購入。
結論から言うと、いままでワイヤードのマウスを使っていた人は慣れが必要。なぜかというと、
センサーの位置が全然違う。ワイヤレスは電池を入れるスペースが必要だからしょうがないと言えばしょうがないのだが、これがけっこうな問題で、いつも通り動かそうとすると（マウスの下半分だけ動かそうとすると）動かない。
まぁもちろんよい面もあって、やっぱりマウスのしっぽ部分ってけっこうなテンションがかかってたんだなぁと実感。 ちなみに右クリックとか各ボタンの機能はちゃんと設定出来たので安心。
MacでRails2.0.2環境を構築する(前半) の続き。
4. Railsのインストール
$ sudo gem install rails
何回か[Yn]と聞かれるので、yで。
5. sqlite3-rubyのインストール
$ sudo gem install sqlite3-ruby
1から4くらいまで選択肢が出るので、Macだから2を選択。
6. sqlite3のインストール
$ port search sqlite3
$ sudo port install sqlite3
これでok。けっこう時間かかります。
7. データベースの作成
リポジトリの場所で
$ rake db:migrate
$ ruby script/server
で、Webサーバが起動する。ブラウザでhttp://localhost:3000/にアクセスすれば、ようこそ的な画面が見れるはず。疲れたー
参考
http://jp.rubyist.net/magazine/?0004-RubyOnRails
http://wiki.fkino.net/?SQLite3-RubyInstall
http://lapangan.net/darwinports/
http://japan.cnet.com/blog/kenn/2007/12/19/entry_25003169/?ref=rss
Ruby on Railsで開発するサイトのUIデザイン等を担当する機会があったのでメモ。Mac OS X 10.4（Tiger）にRailsとsqlite3をインストールする手順です。
1. Xcodeのインストール
MacPorts(DarwinPorts)というものをインストールしなくてはならないのですが、それをちゃんと動かすために「X11 SDK」というものが必要。「X11 SDK」はXcodeに含まれているのでインストール。
http://developer.apple.com/tools/download/
上記URLからダウンロードするか、Macのインストールディスクからもインストール出来ます。インストールディスクからの方がいいとかどこかに書いてあった。しかし容量を食うね、約1GBあります。
2. MacPortsのインストール
http://www.macports.org/install.php
上記URLからダウンロード出来ます。pkgになっているのがお勧め。マウントしてインストール。 MacPortsのインストール先は/opt/local/binになります。使うたびに入力するのは面倒なので、
$ export PATH=/opt/local/bin:/opt/local/sbin/:$PATH
$ export MANPATH=/opt/local/man:$MANPATH
とやっておくと各種パスを/opt/localに通しておくことが出来る。できたらMacPortsを最新版にアップデートする。
$ sudo port -v selfupdate
しばし待つ。
3. RubyGemsのインストール
そんなこといわれても知らないが、TigerのRubyは壊れているらしく（壊れてるもん入れるなよと思うのは僕だけ？）Rubyも最新にアップデートする。
http://www.ruby-lang.org/ja/downloads/
最新版をダウンロード。 解凍して
$ cd readline-5.1.tar.gz
$ ./configure
$ make
$ sudo make install
$ sudo port install rb-rubygems
けっこう時間かかるけど我慢して待つ。rubyが最新になっている事を確認するには
$ ruby -v
ruby 1.8.6 (2007-03-13 patchlevel 0) [i686-darwin8.11.1]
続きは後半へ。Railsのインストール、sqlite3-rubyのインストール、sqlite3のインストールと続きます。まさか自分がこんなにターミナル使うとは思わなかった。（ターミナルはsayコマンドで遊ぶものだと思っていた、笑）
are currently browsing the notizbloc blog archives for the tag Design
