Mighty Mouseの最大の欠点、それはスクロールボールが汚れ易いこと。僕の場合はアップスクロールが出来なくなってしまいました。
掃除方法を見ていると「付箋紙など細いストリップ上の紙をスクロールボールの隙間から差し込んでぐりぐりと掃除する」「水、サラダ油、シリコンオイルなどをたらしてスクロールボールを布やティッシュでごりごり拭き取る」とか「どんな汚れでも水だけで落ちるスポンジ」とかあるんですが、水を含ませた布ではどうにもならないし、なんとなくサラダ油も躊躇してしまう。
そこで思いついたのが、すぐに手の届く範囲にあった「メンタム」。リップクリームですね。まず布にメンタムをぐりぐり塗って、その布でスクロールボールをぐりぐりします。これで完治しました！そしてほのかなメンソールの香りが…
メンタムは塗りすぎないこと！というか作業はあくまでも自己責任でお願いしますー。
WordPressをローカルで動かしたかったので、MAMPなるものを導入。Macintosh, Apache, Mysql and PHPの頭文字だそうです。XAMPPだとParlも入ってるそうで。
http://www.mamp.info/en/index.php
ここから自分の環境にあったものをダウンロードする。展開したフォルダをアプリケーションフォルダにいれて、起動してみる。
スタートページからPHPの情報が見れたり、phpMyadminに行くことが出来ます。
初期設定ではApacheのポート番号は8888になっているので、http://localhost:8888/にアクセスすれば良い。
PHPのファイルはすべて/MAMP/htdocs/の中に入れる。WordPressのインストールは次回に書きますー。
WordPress2.5.1にアップデートしたら「メディアを追加」が出来なくなってしまった….
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を使った普通のタブ切り替えメニューを紹介しましたが、今回は2段組みタイプです。
http://www.nyokiglitter.com/tutorials/2columns.html
まずはここからダウンロード。中身を適当な場所に置き<head></head>内にリンクを記述します。CSSはHTMLの中に書かれているので、必要に応じて外部化してください。
<script type=”text/javascript” src=”scripts/prototype.lite.js”></script>
<script type=”text/javascript” src=”scripts/moo.fx.js”></script>
<script type=”text/javascript” src=”scripts/moo.fx.pack.js”></script>
<script type=”text/javascript”>
//the main function, call to the effect object
/*
function init(){
var stretchers = document.getElementsByClassName(’stretcher’); //div that stretches
var toggles = document.getElementsByClassName(‘tab’); //h3s where I click on
//accordion effect
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 400, transition: fx.sineInOut}
);
//hash functions
var found = true; // if true, accordion starts closed on load else if false first one starts open on load
toggles.each(function(h3, i){
var div = Element.find(h3, ‘nextSibling’); //element.find is located in prototype.lite
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
*/
function init()
var stretchers = document.getElementsByClassName(’stretcher’); //div that stretches
var toggles = document.getElementsByClassName(‘tab’); //h3s where I click on
//accordion effect
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: true, height: true, duration: 400}
);
//hash functions
var found = false;
toggles.each(function(h3, i){
var div = Element.find(h3, ‘nextSibling’); //element.find is located in prototype.lite
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>
この/**/でコメントアウトされてる前半部分と、されてない後半部分があるんですが、違いがよく分からない…二つの設定からどちらかを選べるってことでしょう。コメントアウト部分は消してもよい。初期設定では
.tabの中にあるh3タグで囲まれている部分をクリックすると#contentの中の.stretcher部分が開く
って感じです。もちろん変更可能。
var stretchers = document.getElementsByClassName(’stretcher’); //div that stretches
var toggles = document.getElementsByClassName(‘tab’); //h3s where I click on
このへんと
if (window.location.href.indexOf(h3.title) > 0) {
このへんですね。
toggles, stretchers, {opacity: true, height: true, duration: 400}
opacityは切り替え時に透明の演出をするかどうか。durationは切り替えの速度です。
</body>の直前に
<script type=”text/javascript”>
Element.cleanWhitespace(‘content’);
init();
</script>
と書きます。HTMLは
<div id=”left”>
<div class=”tab”>
<h3 title=”first”><a href=”javascript:;”>first</a></h3>
</div>
<div class=”tab”>
<h3 title=”first”><a href=”javascript:;”>first</a></h3>
</div>
<div class=”tab”>
<h3 title=”first”><a href=”javascript:;”>first</a></h3>
</div><br />
</div>
<div id=”right”>
<div id=”content”>
<div class=”stretcher”>
<h3>First</h3>
</div>
<div class=”stretcher”>
<h3>Second</h3>
</div>
<div class=”stretcher”>
<h3>third</h3>
</div>
</div>
</div>
みたいになります。ここで謎な部分が一つ。なぜか<br />を消すと作動しなくなる。これで数時間悩んだ。なぜだろう。
このWeblogはもともと諸事情によりweblog/ディレクトリにあったんですが、良い機会だと思ってWordPress2.5に移行するのとついでにルートディレクトリに移動しました。今の所は問題なく動いている様子…
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段組みのメニューが気に入った！けど、謎な部分で設置に大変苦労したので、次回にでも書こうかな。
—-2008年7月31日追記——————–
ファーストサーバでWordPressを使う【php5版】
—————————————-
ファーストサーバでWordPress2.5を使用する機会があったのですが、インストールは無事完了し、いざ投稿という時になって日本語の文章がすべて消えてしまうというハプニングが発生。バージョン変えてみたり色々やっても効果無し。調べたら
「ファーストサーバのPHPのエンコーディングはEUC_JP」
という事が判明したのでした。
解決策としてはそのへんのエディタで.htaccessを作成し、その中に
php_value mbstring.internal_encoding “UTF-8″
と記述。ちなみに.htaccessはサーバの挙動を色々するファイルです。「htaccess」で作成し、アップロードしてから「.」を付けましょう。パーミッションは604か644です。
これで日本語で投稿出来るようになります。
そういえばWordPressJapanが閉鎖になりましたね。このブログはWordPressMEなので、近々アップデートしなくては。
are currently browsing the notizbloc blog archives for 4 / 2008.
