デフォルトのパーマリンク　（英語だと ugly=醜い　と呼ばれています）

http://blog.hoorago.com/?p=123

綺麗なパーマリンク （英語だと pretty=可愛い と呼ばれています）

http://blog.hoorago.com/2010/01/09/sample-post/

が！しかし、問題発生。

新しく設定した綺麗なpermalinkがどうもvertrigoの設定上うまく動かない問題に激突。折れそうになりました。
なんでこんなに苦労するんだろう。綺麗になるのって大変！。
まぁそんなクダラナイこと考えてないでサクサク解決しちゃいましょう。

設定

自分の設定では：

wordpressの位置： d:/wordpress
使用： vertrigo → apache + mysql + myphpadmin

です。

解決法

では、いきます。

Wordpress 様様はこのように述べています。

• (1) Apache web server with the mod_rewrite module installed
  訳：mod_write moduleはアパッチに入っていますか？
• (2) In WordPress’s home directory,
  訳：ワードプレスのディレクトリの中、
  • The FollowSymLinks option enabled
    訳：FollowSymLinks optionは可能になっている？
  • FileInfo directives allowed (e.g. AllowOverride FileInfo or AllowOverride All)
    訳：FileInfo directives　は許可されてる？
  • An .htaccess file (if this file is missing, WordPress will try to create it when you activate “pretty” permalinks)
    訳： .htaccessファイル（ファイルがない場合、綺麗なパーマリンクに設定した時点でワードプレスが自動で作成します）
  • If you want WordPress to update the .htaccess file automatically, WordPress will need write access to the file.
    訳：ワードプレスが自動で.htaccessを更新するには、writeのアクセス制限が必要です

• (3) For lighttpd, see External Resources.
  訳：lighttpdは別にしらね。こっちみてね。

とりあえず(3)は環境が違うので無視しちゃっていいです。

(1)の確認。apacheにmod_rewrite module入ってる？と言っています。

vertrigoではオートでこれが入っているので問題ないと思います。確認したい方はこちらへ。
Extensions settings>mod_rewrite.so
にチェックマークが入っているのを確認してください。

(2)の確認です。

「The　FollowSymLinks option enable」

では見ていきましょう。vertrigoで config files>「httpd.conf」 を選択してください。

ページを少し下に動かしてこの部分を探してください。

<Directory>
Options FollowSymLinks
AllowOverride none
</Directory>

こいつが問題ですね。これを僕の場合はこのように変更しました。

<Directory “d:/Wordpress”>
Options FollowSymLinks
AllowOverride ALL
</Directory>

大切なステップは２つ。

1. directoryの後ろに自分のwordpressの入っている場所を書き込む
2. AllowOverride None を AllowOverride ALLに変える

これで動くはずです。おつかれさまでした。
綺麗な生活を送れるといいですね！

とりあえず良くあるfloatとdivを使ったときに起こる問題：

１）　息子要素divにfloatをつけたら親要素divの背景が消えちゃった系の問題

ありますね。ほら。あるでしょ？あなたも。ほら、そこのあなたも！これはweb designerの皆がぶち当たって砕けそうになる問題の一つです。ではわかりやすく例を出して説明していきましょう。

例えば緑のpapaという 200×300　の縦長の背景があるとします。
その背景を背に青いmusuko (100×50) と赤いmusume (100×50)を　右左に表示してみたいと思います。

<div id="papa">
    <div id="musuko" style="float:left;">外で遊びたい</div>
    <div id="musume" style="float:right;">ママのほうが好き</div>
    パパの長い説教
    パパの長い説教
    パパの長い説教
    パパの長い説教
</div>

では図に描いてわかりやすくこの現実をお見せしましょう。

理想の世界ではパパである親要素が、子要素である息子、娘のBOXの長さも取り入れて背景を持続させたい。
現実では、一定のブラウザですが、「パパの説教」が子要素の下敷きになり見えなくなってしまう。

それは、ずばり何故か！？そう。floatです。泣く子も泣くfloat。

floatとはソモソモ直訳で「浮く」という意味です。
なので現実の図でわかるように、パパはしっかりと地に足がついているのに。息子と娘が浮いていますね。
そうです。また言いますが、floatは浮いているのです。浮いているのでパパにheight:auto;　でね。
なんていっても、息子、娘を囲えません。簡単に言えば次元が違う。でしょうか。では、どうしたらいいか。

解決案

解決案はいくつかありますが。今回は全ブラウザで利用できる解決案。ザ・オンリーワン・解決案を紹介します。

<div style=”clear:both;”></div>を最後のfloat要素のあとにつける。

つまりこういうことです。

<div id="papa">
    <div id="musuko" style="float:left;">外で遊びたい</div>
    <div id="musume" style="float:right;">ママのほうが好き</div>
    <div style="clear:both;"></div>
    パパの長い説教
    パパの長い説教
    パパの長い説教
    パパの長い説教
</div>

これで現実は理想になりました。

コンピューターの前で「パパ・・・がんばって！」って言いたくなっちゃいますね。
あの街中でタバコを吸っていたデザイナーの人たちもパパだったのかなぁ・・・おつかれさまです。
それでは今日はこの辺で・・・

Hooraで使っているのは、2007年秋発売のCore2Duo 1.83GBモデルです（買った直後に、2009年モデルが発表されていました　泣）。

Wikipediaで調査したところ、メモリの種類は、

PC2-5300 DDR2 SO-DIMM SDRAM

です。ちなみに、上の表記の意味は、「PC2-5300 DDR2」＝PC2-5300という規格でつくられたDDR2-SDRAMで、接続口の形はSO-DIMM型である、となります。また、WikipediaのDDR2-SDRAMのページにまとめられていますが、PC2-5300という規格は、チップ規格DDR2-667と同じ規格の別表現です。製造メーカによっては、「667」という表記をしているところもあるので、注意してください。

この規格のメモリを探してみましたが、今は本当に安く販売されていますね。私は、Amazonで販売されている,Transcendの

Transcend JetRam ノートPC用増設メモリ DDR2-667 2GB 永久保証 JM667QSU-2G

こちらを買ってみました。

さて、実際の取り付け作業ですが、はじめる前に、かならず用意すべきものがあります。

へらです（できれば、２つ）。

Mac miniの筐体はかなり強固に作られています。こちらの動画を参考にして、ぐいぐいとひっぱってケースを外してくださいね。

詳しいプロセスは、ストックホルムで家具職人をされている須藤生さんのブログを参考にさせていただきました。とても美しい写真で、ていねいに解説されているので、とても助かりました。

換装が終わって、どきどきのシステム起動です。

ああ、無事に認識されていました！

ただし、実際に利用できるスペースは3GB程度までですので、あしからず。

前のエントリで、Mac miniは場所もとらないし、かわいいすてきなやつだということを強調させていただきました。

性能は申し分ないのですが、なんせ、このMac mini、ご存じの通り、マウスもキーボードもディスプレイも標準では同梱されていません。

DOS/V用でも使用できるBYODKM（Bring Your Own Display, Keyboard, and Mouse）だということなのですが、残念ながら、ぼくの家にはマウスもキーボードも、Windowsデスクトップにつながっているものしかありません。

それに、小さな机の上に、２つもキーボードやマウスを置きたくありませんし、ＫＶＭを買うほどお金に余裕があるわけでもありません。

そこで、登場するのが、ひとつのキーボード、ひとつのマウスを共有するためのアプリケーション「Synergy」です。

Synergyの仕組みを説明しましょう。Synergyでは、異なるマシンの異なるディスプレイを、あたかも連結されているかのように使うことができます。

上の絵では、左の「Server(Win)」に接続されているマウスを画面を超えて、右へ動かせば、まるでデュアル・ディスプレイのマシンのように、「Client(OSX)」の右のデスクトップへと入ることができるのです。

キーボードも、マウスに追従していって、マウスが動いているマシン上で文字の入力などができるようになります。

さらにさらに、複数のマシンを同時に使用していて、「ああ、こっちからあっちへコピペできればいいのに！」と憤慨しながら、URL名などを手入力した経験はありませんか？

Synergyを使うと、クリップボードの共有も簡単にできます。Mac OSXでコピーしたものを、となりのWindowsマシンで、ペーストすることができるわけです。

この快感は、やみつきですよん、いやまじで。

まったく別のマシンを動かしていることを本気で忘れてしまうくらいに、使い心地のよいソフトウェアです。

設定方法と使い方

では、接続方法を簡単に説明しましょう。

Synergyでは、キーボード・マウスが接続されているマシンを「サーバ」、サーバから操作できるようにするためのリモートマシンを「クライアント」を呼びます。

サーバマシンでは、Synergy接続を待ち受けるためのサーバプログラムを動かします。このプログラムには設定ファイルがあって、

• 接続可能なマシンの名称
• 画面同士の関係（つまり、クライアントのディスプレイがサーバのディスプレイの上下左右のどちらにあるのか）

を設定します。

Windowsでは、インストーラを使用して簡単にSynergyをインストールしておいてください。

起動すると、こんな画面が現れるので、「Share this computers… (server)」を選択し、「Configure…」ボタンを押します。

Screensの下の＋を押して、クライアントにしたいマシン名（任意）を記入します。

次にLinksというところで、画面（マシン）同士の関係を設定しましょう。上記例のように、サーバが左、クライアントが右にある場合は、

0 to 100 % of the left of (client) goes to 0 to 100 % of (server).
0 to 100 % of the right of (server) goes to 0 to 100 % of (client).

と書けばＯＫです。

ここで、Testを押して、サーバを待ち受け状態にしておきましょう。

次にクライアントでの作業に移ります。（キーボード・マウスがひとつしかない私の場合、ここで付け替え作業が発生するわけです…）

クライアントがWindowsの場合、「Use another computers …(clients)」を選択して、サーバ名またはサーバのIPアドレスを入力後、「Start」すれば、接続されます。マウスをぐりぐり動かして、異次元の感動を思う存分楽しんでください。

Mac OSXの場合、Windowsの場合と違って、インストーラは用意されていません。バイナリの実行ファイルが配布されているので、適当な場所に配置しておきます。私の環境では、 /usr/local/synergy-x.y.z/としています。

synergycが実行ファイルがクライアントです。ターミナルを開いて、

./synergyc –f –n <クライアント名> <サーバのIPアドレスまたはサーバ名>

と実行してみてください。無事につながったでしょうか。

ちなみに、つながらない場合について一言。Senergyは、TCPポート24800番を使用します。ファイアーウォールなどを使用している場合には、24800番が開いていることを確認してみてください。

起動時からSynergy

最後に、クライアントを再起動するたびに、キーボード・マウスをつけ替える作業をして、サーバへ接続させる作業をするのは大変です。簡単に自動化してしまいましょう。

Macの場合、Lingonというログイン時に実行されるコマンドを追加登録できるアプリを使うのが簡単でしょう。

ただし、ひとつ注意点があります。

オートログインが有効になっていて、ログイン画面でパスワードの入力がが求められないことが前提になっています。

もし、オートログインを不可にする場合、Synergyクライアントを、

1. システム起動時に、匿名ユーザで実行する。
2. ログイン後、1のSynergy接続をkillして、再度ログインしたユーザ権限で実行する

と二つのステップに分けて起動する必要が出てきます。

この設定方法は、公式ページで解説されていますが、私の環境では、うまく動きませんでした。

さて、Lingonを使う方法です。

「New Agent」->「My Agents」で、名称を「com.hoorago.SynergyLogin」など適当なユニーク名を与え、２のコマンドのところに、先ほど実行したのと同じコマンドを絶対パスで書きます。

/usr/local/synergyc –f –n <クライアント名> <サーバのIPアドレスまたはサーバ名>

あとは、「Run it when it is loaded by the system」にチェックを入れればＯＫ。

では、快適なMac/Win二重生活を！

Hooraエンジニアリング部の平野です。

今回は、Hooraで使用しているサーバ環境の大部分をMac miniサーバに移すことになったので、その時の作業を書いていきます。

まずサーバの用途ですが、Hooraでは、メールやカレンダーなどは最高にクールなGoogle Appsを使用してるので、ほとんどの場合、

1. ソースのリポジトリをおくSVN
2. チームのタスク管理を行うredmine
3. このブログであるwordpress
4. アプリを動かす実験場

という４項目に集約されます。

これまでは、Slicehostの激安256MBスライス＝月間2000円程度でVPSをレンタルしていました。
Slicehostは非常に使い勝手がよく、開発者としては１スライスくらい持っておいてもけして損はないと思われます。

しかし、さすがにメモリ256MBで上の４用途を全部こなすとなるとかなり重たいです。

特に、redmineはRuby on Rails製で、チーム３人で同時期にアクセスするとあっという間にメモリ使用量が100%に達して、ひどいフリーズ状態に陥っていました。
Railsは作るときは楽で楽しくてよいですが、運用面まで含めると少し大変です…

そこで、Slicehostで満足いくメモリ＋ストレージを確保しようと思ったのですが、

がーん。

$130は、１万ウン千円で、これが１２回で一年だといくら？と、両手の指を折りながら数えて足りないくらいコストがかかることがわかりました。

そこで、ついに、こんな出費をするくらいなら自前でサーバを作る！ということになり、晴れてMac miniをサーバ化して運用していくことになりました。

ちなみに、Hooraの考える、Mac miniのメリットは、

小さくてかわいい

ことに尽きますな。

さて、今回は、mac miniの開封から、各種のモジュールを取りそろえて、今まで稼働させてきたredmineをmac mini上へ移設するところまでの作業を長々と書いていきます。

redmineをレンタルサーバで使って苦労しているサーバ管理者のみなさまの役に立ちますように。

1. OS初期設定

自宅にある古いIOデータのディスプレイにつないで、USBマウスとキーボードをさせば、電源オン！MobileMeなど、サーバ用途にそぐわないものは無視してさっくりと設定を終えます。

2. ソフトウェアアップデート

700MBほどダウンロード＆インストール。20-30分待つ。

3. 基本的な設定

Mac miniをサーバとして使うことばかりを考えているhttp://www.macminiserver.com/ というありがたいサイトの中に、「どうやって設定すればおK?（原文英語）」という記事があります。
ここには、サーバとしてMac OSXを使うためのTipsがひとつの文書としてまとめられたPDFがあります。
まずは、これに従って、スクリーンセーバはオフであるとか、省電力もしないといった設定を行います。

4. 共有の設定

画面共有(VNC)、SSH、FTPくらいはONにしておきました。
あと、ファイアーウォールの設定で、一番下の「特定のサービスおよびアプリケーションにアクセスを設定」を選択しておいてください。

Web(Apache2)は、MacPortsを使用することにしたいので、ここではOFFにしておいてください。

5. UNIX環境をえるために

MacPortsというパッケージ管理システムを導入します。Debianのapt-get、Fedora・CentOSのyumのようなものです。

MacPortsのインストールには、XCodeが必須とのことなので、Mac miniの箱に同梱されていたインストールディスクCD2を取り出して、インストールしておきましょう。終われば、MacPortsのインストールです。（Leopard以前のOSの場合、X11環境を別にインストールする必要があるようです）

[注意]
インストールディスクからXCodeをインストールすると、3.0系が入る場合があります。その場合には、Apple Developer Connectionから、最新版である3.1系をインストールするようにしてください。
かまわずに作業を進めた僕は、あとで、portsを使ってtiffパッケージをビルドするときに、

On Mac OS X 10.5, tiff 3.8.2 requires Xcode 3.1 or later but you have Xcode 3.0.

と言われてしまい、非常に悲しい思いをしました。

6. Apache2 MySQL・phpMyAdmin

Apacheは、デフォルトでもMacOSXにインストールされていますが、バージョンの変更などが容易である、最新のパッチが当たっている点などで、MacPorts版を利用することにしました。

DBMSには、redmineが公式に推奨するMySQLを使用しましょう。
また、MySQLをwebから管理するための定番ツール「phpMyAdmin」も入れておきます。

インストールには、さきほど入れたばかりのMacPortsを早速活用します（繰り返しになりますが、Xcodeは3.1.0以上であることを確認しておいてください）。

具体的な手順は、こちらのページを参照して、apache2, mysql5, php5, phpmyadminをインストールします。

## Apache2
% sudo port install apache2
% sudo launchctl load -w /Library/LaunchDaemons/org.macports.apache2.plist

## MySQL(Server)
% sudo port install mysql+server
% sudo launchctl load -w /Library/LaunchDaemons/org.macports.mysql5.plist
% sudo -u mysql mysql_install_db5
% sudo chown -R mysql:mysql /opt/local/var/db/mysql5/
% sudo chown -R mysql:mysql /opt/local/var/run/mysql5/
% sudo chown -R mysql:mysql /opt/local/var/log/mysql5/
(デーモンを起動する)
% sudo /opt/local/bin/mysqld_safe5 &
(rootのパスワードを設定する)
% mysqladmin5 -u root -p password <new-password> Enter Password: <ENTER>

## PHP5
% sudo port install php5 +apache2 +mysql5
(ApacheのPHPモジュールを有効にする)
% cd /opt/local/apache2/modules
% sudo /opt/local/apache2/bin/apxs -a -e -n “php5″ libphp5.so
(httpd.confにmod_php.confを含める)
% sudo nano /opt/local/apache2/conf/httpd.conf

#
# Include PHP configurations
#
Include conf/extras-conf/mod_php.conf

(PHP設定ファイルには、recommended版を使用する)
% cd /opt/local/etc
% sudo cp php.ini-recommended php.ini
(Apacheの再起動)
% sudo /opt/local/apache2/bin/apachectl -k restart

## phpMyAdmin
% sudo port install phpmyadmin
(設定ファイルを用意してInclude)

7. Redmineを動かすために

redmineのバージョンは、2009年4月5日リリースしたての0.8.3を使用することにします。インストール先には、”/usr/local”ディレクトリを使用します。

また、redmine0.8.3を動かすためには、インストールマニュアルによると、ruby1.8.6または1.8.7、rails2.2.2が必要とのことです。

% which ruby
/usr/bin/ruby
% ruby –v
ruby 1.8.6 (2008-03-03 patchlevel 114) [universal-darwin9.0]
% rails –v
Rails 1.2.6
% sudo gem install rails -v=2.2.2
(Railsのアップグレードを行う)
% rails –v
Rails 2.2.2
(Ruby MySQLバインディングを入れる)
% sudo gem install mysql — \
–with-mysql-dir=/opt/local/ \
–with-mysql-include=/opt/local/include/mysql5/ \
–with-mysql-lib=/opt/local/lib/mysql5/ \
–with-mysql-config=/opt/local/lib/mysql5/bin/mysql_config
(RMagickを入れる : こちらを参照)
% sudo port install imagemagick +q8 +gs +wmf
(参照ページではtiffを含めていますが、すでにインストール済みなので省いた)
… ここで大量のパッケージがインストールされる。
% sudo gem install rmagick

8. 以前のデータ・ファイルをエクスポート

% mysqldump –u <USER> –p <TABLENAME> > dump.sql
% tar czvf files.tar.gz /var/redmine/files/*.*

9. Redmine/passengerのインストール・設定

ようやく、Redmineのインストールを行える準備が整いました。
ここからは、Redmineそのものの設定、そして、Apache上でRoRアプリを快適に動かすためのモジュールpassengerの設定を行います。

まずは、Redmineのダウンロード、そして、展開。

% sudo port install wget
% cd ~/Download
% wget http://rubyforge.org/frs/download.php/54503/redmine-0.8.3.tar.gz
% tar xzvf redmine-0.8.3.tar.gz
% sudo mv redmine-0.8.3 /usr/local/
% sudo ln –s /usr/local/redmine-0.8.3 /usr/local/redmine
(パーミションの設定など)
% sudo chown -R redmine:redmine files log tmp public/plugin_assets
% sudo chmod -R 755 files log tmp public/plugin_assets

データベース設定をdatabase.ymlに書く。このとき、socketの設定も忘れずに書いておくこと!

production:
user: …
socket: /opt/local/var/run/mysql5/mysqld.sock

データのインポート

% tar xzvf files.tar.gz –C /usr/local/redmine/files
% mysql –u redmine –p redmine < original_redmine.sql

[4月13日追記]

0.8.3版ではデータベースのスキーマ定義に変更が加えられているため、このままインポートしただけでは、SVNリポジトリの閲覧など一部の機能がうまく動作しません。rakeで、dbの構成を最新にしておく必要があります。

% sudo rake db:migrate RAILS_ENV=”production”

Gmailからメールを送信するように設定

% nano config/email.conf
# Outgoing email settings
production:
delivery_method: :smtp
smtp_settings:
address: smtp.gmail.com
port: 587
domain: “hoorago.com”
authentication: :login
user_name: “redmine@hoorago.com”
password: “*******”

(TLSに対応させる)
% sudo gem install tlsmail
% sudo nano config/environment.rb
# 末尾に、
require “tlsmail”
Net::SMTP.enable_tls(OpenSSL::SSL::VERIFY_NONE)
# を追加した

試しに起動する

% sudo ruby script/server webrick –e production

http://localhost:3000/ にアクセスして問題がなければ、passengerを導入する。

Passsenger

% gem –v
1.0.1
(gem本体のアップデートを行わないと、passengerのど導入ができない)
% sudo gem update –system
% sugo gem install passenger
(MacPorts版のApacheを環境変数で設定)
% export APXS2=/opt/local/apache2/bin/apxs
% export PATH=/opt/local/apache2/bin:$PATH
% sudo passenger-install-apache2-module

そして、httpd.confに、

LoadModule passenger_module /Library/Ruby/Gems/1.8/gems/passenger-2.1.3/ext/apache2/mod_passenger.so
PassengerRoot /Library/Ruby/Gems/1.8/gems/passenger-2.1.3
PassengerRuby /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/bin/ruby

を加える。

さらに、VirtualHostのDocumentRootにredmineのpublicフォルダを指定して、Directoryへのアクセスを許可する設定ファイルを書いて、

NameVirtualHost *:80
<VirtualHost *:80>
ServerAdmin admin@redmineexample.com
ServerName your.redmineexample.com
DocumentRoot /usr/local/redmine/public
<Directory “/usr/local/redmine/public”>
OPtions FollowSymLinks
Order allow,deny
Allow from all
</Directory>
</VirtualHost>

という内容で、conf/extra/httpd-redmine.confとして、保存する。

最後に、もう一度、httpd.confを開いて、末尾に、

Include conf/extra/httpd-redmine.conf

を記述する。Apache2を再起動したら、完了です。

無事、動いています。

びっくりするくらいに、きびきびしています。redmineがこんなにできる子だとは知りませんでした！

興奮している場合ではない、チケット溜まってますよ！　＞自分

では、おつかれさまでした。

１ヶ月ほど前に、家族との共用ラップトップとして、MacBookを新規購入しました。

メインマシンはWindowsデスクトップマシンですが、いちいち机に向かわなくても、リビングのソファでネットやメールチェックなどの日常作業をこなしたいなと思っていたからです。

サブマシンとして使うために、私がインストールしたアプリケーションとOSに加えた設定の変更を簡単に記しておきます。

1. 12のアプリ・インストール編

Firefox

言わずとしれた、快適ブラウザ。Safariもいいですが、WindowsでもFirefoxを使用しているし、使用感が同じであることはうれしいですね。

また、Firefoxをインストールしたら、アドオンもね。
僕の場合は、ブックマーク同期ソフトのFoxmarks Bookmark SynchronizerとPDFをSafariなみに快適に閲覧できるようになるFirefox PDF Plugin for Mac OS Xをチョイス。

QuickSilver

アプリを一発立ち上げ！いろいろできるらしいけどよくわからないので、アプリ起動のためだけに使用。
好みで、AppearanceをBezelに変更した。

dropbox

超優秀なファイル共有ソフト。フォルダにファイルを投げ入れると、放っておいても、別のコンピュータにも転送されている。

共有場所が、デフォルトだと、
/Users/[name]/Public/Drop Box/Dropbox
となり、一段無駄に深いように思われるので、
/Users/[name]/Public/Dropbox
に変更。
たしかGrowlも一緒に入れる？オプションみたいなのがあったようなので、手間がはぶけたと喜んで、チェックをつける。

すでにアカウントを持っていたので、既存ファイルの共有完了まで、少し待つ。

KeePassX

Windowsで使えるKeepassと同じデータベースを使えるのがすばらしい。DBはDropboxで共有したいので、キーファイルとパスワードの両方を認証に使用している。キーファイルのみUSBなどで移す。

ATOK200X for Mac

日本語をストレスなく入力するために。
ATOKほど、日本人のＰＣ生活に貢献している日本製アプリはないのではないだろうか。

辞書もインストール。スプラッシュ画面は表示しない。

OmniOutliner/Graffle

ずっと愛用してきた。
一度使いこなすともうやめられない中毒性の高いアウトラインテキストエディタOutlinerと、シンプルかつ美しいダイアグラムを３秒で作ることのできるGraffle。
君たちに出会えてから、今のMacライフがあると思う。

SimpleCap(beta)

画面キャプチャ・アプリ。ものすごく使い勝手がよく完成度が高いので、アルファの頃からずっと使っている。

もうすぐ正式版がリリースされるようです。
このブログ記事を書くのに必須。

Skitch

画像編集兼アップロード用アプリ。
起動しただけで楽しい気分になる、変だけどくせになる使用感をもつ、ういやつ。

使用開始するには、オンラインでのユーザ登録が必要。

Skype

ミーティング用など。必須。

Adium

メッセンジャー。
ロゴのモンスターはかわいくないが、馴れればさほど気持ち悪くも思わない。必須。

last.fm

自分の聞いた音楽の記録を録ることがすき。そこから、人と繋がり新しいアーティスト・曲に出会えるのもすき。

Evernote

メモをＰＣ＋サーバで共有できるなど。

思ったことをそのまま書きなぐったとき、人から聞いたいい話をこそっとメモったとき、一度Evernoteになげておく。
そして、後で校正したり、ブログのねたとして活用するということを最近よくするようになった。

(おまけ) twhirl

Twitter・FriendFeedなどのクライアント。AIR製。

2. 設定カスタマイズ編

Terminal

100 * 40くらいの大きさに変更。フォントは、Monaco 12ptがお気に入り。

bashではなく、zshを使用したいので、変更。

% chsh
(vim) /bin/zsh
:wq

.zshrcをごにょごにょしたが、これはまた別の話。

キーボード・ショートカット

• command+spaceで「入力メニュー」の変更はしないようにする
• command+escでFront Rowが起動するが、これもうっかり押したときに残念な気持ちにさせられるので外しておく
• command+F1で「同じアプリケーションのウィンドウの切り替え」だが、押しにくさMaxなので、せめてcommand+`にする（USキーボードでの話）。

Spaces

たて２横３くらいが個人的にすき。メニューバーに表示させる。

というわけで、快適なMacライフを！

今日もまたWordPressのテーマいじりをはじめましょう。
前回は、ローカルにWordpressの環境を用意しました。
おかげで、自分のブログを見ている人に迷惑をかけないで、ゆっくりとテーマの変更に専念できるようになります。

今回は、Wordpressのテーマの全体の構成について、見ていきたいと思います。

Etudeテーマ作成

インストールしたばかりのWordpressには、二つのテーマがあります。defaultとclassicです。

ここでは、defaultのテーマを利用して、Wordpressのテーマについて、理解を深めていきましょう。

まず、NetBeansで、前回作成したwordpressプロジェクトを開きます。
左のプロジェクト・ウィンドウの中の、ソースファイル/wp-content/themesに、

Etudeフォルダを作る

ここに、お勉強用フォルダを作成します。

名前は、「etude」(エチュード)としておきましょう。習作・練習曲という意味ですね。

etudeフォルダに、defaultフォルダから、style.cssとindex.phpをコピーします。

style.cssを開き、テーマに関する基本情報を設定します。

/*
Theme Name: Etude
Theme URI: http://wordpress.org/
Description: 練習用
Version: 0.1
Author: <あなたの名前>
Author URI: <あなたのブログのURL>
*/

2-20行目までの薄く灰色になったコメントの箇所を上のように書き直してください。
そして、ブラウザで、wordpressのダッシュボードへアクセスし、「外観」メニューを開くと、Etudeテーマができていますね。

(テーマのスクリーンショットのところが空白なのは、画像を用意していないからです)

Etudeを試してみる

defaultには、たくさんのファイルが含まれていますが、Wordpressテーマは実はこのたった２つのファイルだけで動作するのです。

さっそく、Etudeテーマをつかってみましょう。

クリック

クリックして、テーマを適用します。どうでしょうか。

Etudeテーマ

あまり見た目はよろしくありませんが、動作していますね。

さて、index.phpのソースを見てみましょう。1行目が、

となっています。このget_header()という関数は、その名の通り、header.phpというファイルを探して、そのファイルの中身を挿入する機能を持っています。

ここで、覚えておいていただきたいのは、ヘッダを出力するためのheader.phpがない場合、defaultテーマのheader.phpが使用されるということです。

フッターやサイドバーも同様です。

index.phpとstyle.cssという２つのファイルしかないにもかかわらず、ヘッダやフッタやサイドバーが表示されているのは、defaultのおかげなのです。

最初の頃はすべてをカスタマイズすることはできませんので、いろんな場面でdefaultテーマが利用されることになると思います。defaultテーマは削除しないでおいてください。

気になる警告を削除する

ところで、右のサイドバーになにやら、Warningなるものがでていますね。

Warning: include(D:homewordpress/wp-content/themes/etude/searchform.php) [function.include]: failed to open stream: No such file or directory in D:homewordpresswp-contentthemesdefaultsidebar.php on line 6

「defaultのsidebar.phpを使って、サイドバーを出そうとしたが、searchform.phpというファイルがなくて困っている」と訴えているようです。

気になるので、訴えに従って、searchform.phpもdefaultフォルダからetudeフォルダへコピーしておきましょう。

もう一度、ブログのトップページを更新すると、検索窓がきちんと表示されることを確認してください。

StyleSheetで見た目を整える

Etudeのテーマはあまりにかっこわるいので、少しCSSを調整しておきましょう。 14行目から、20行目のbodyタグの背景色を白に変更します。

body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	background: #FFFFFF;
	color: #333;
	text-align: center;
	}

まだまだほめられたものではありませんが、スタートとしては十分でしょう。

その他、ヘッダの背景色、タイトルの大きさ、リンクの文字色などもお好きなものに変更してみてください。詳しいスタイルシートの書き方は、他のページや参考書に当たってみてください。ページ下部に、おすすめの参考書をいくつか載せておきました。

役者をそろえる

では、次に「これは欠かせない」と思われるファイルをEtudeに増やしておきましょう。

• header.php
• footer.php
• sidebar.php

それぞれヘッダ・フッタ・サイドバーを出力します。特に、これらはどのページでも共通で使用されるので、カスタマイズ必須でしょう。
また、読者からいただいたコメントを表示するための、

• comments.php

もテーマいじりには欠かせないでしょう。ちなみに、

• comments-popup.php

というファイルがdefaultにはありますが、こちらはコメントを別ウインドウでポップアップさせて表示したときのレイアウトです。

header.phpの中に、

と書いておけば、有効になります。

しかし、ポップアップは近年あまり好まれていないようですし、ブラウザによっては勝手にブロックしたりすることもあるので、ページ内にそのまま表示するのが無難でしょう。

さらに役者を増やす

すでに挙げた6つのphpファイルを変更すれば、ある程度オリジナルなテーマ作りができるようになります。

しかし、せっかくですので、他にどんなファイルがあるのか見ておきましょう。

と、その前に、Wordpressは、ページを表示するときに、どのテンプレートファイルを使うのか優先順位が決められています。
たとえば、ブログのトップページの場合、home.phpというファイルがあれば、そちらを優先して使用します。
home.phpが見つからない場合、index.phpを使用して、トップページコンテンツを表示します。

Codex:Template Hierarhyにもう少し詳しい説明がありますが、ここでも簡単にまとめておきます。

どこまでカスタマイズするのかによりますが、上の表で出現頻度の高いachive.phpも用意しておいたほうがいいかもしれません、ね。

ちなみに、defaultテーマ内には、archives.phpというファイルがあるが、これは3の自由に名前をつけてよい”マイ・テンプレートPHP”として用意されているものです。
これに対し、archive.phpは、過去記事をカテゴリ毎・タグ毎などに表示するために使用されるテンプレートです。

紛らわしいですね。

ご自身で、3の”マイ・テンプレートPHP”をご用意なさる際には、”etude-archives.php”などのように、
ファイル名にそうとわかるprefixをつけてあげた方がよいでしょう。

さて、今日はここまで。 全体の構成をつかむところまで来ました。

次回は、phpのメソッドの使い方を見ていきましょう。

スタイルシートの参考書：

少し前の本ですが、基本を知るにはよいきっかけになるものを2冊ほど紹介しておきます。

今までは、Dashboardのテーマエディタを開いて、ぽちぽち調整して、見栄えを確認していましたが、いずれ集客数が増えるとそのようなオン・ザ・フライな変更はできなくなります。恥ずかしいので。

そこで、ローカルでもWordPressをつくって、やることにしましょう。とはいえ、めんどうなことが嫌いなので、楽で高速な方法を採用します。

1. VertrigoServをインストール

VertrigoServとは、PHP, Apache, MySQL, phpMyAdmin, SQLiteなどをまとめたall-in-oneパッケージです。
Apacheをコンパイルしてインストールするのも楽しいものですが、今回は高速に環境を整えるため、さらりと入れてしまいましょう。

2. VertrigoServの設定

設定パネルを開きます。パネルのhttpd.confをクリックして、

120行目 Listen 8080
211行目 ServerName VertrigoServ:8080

と書き直します。MySQLで使用するポートは、パネル上で、
3306 -> 3307
に変更しました。

31: $cfg['Servers'][$i]['host'] = 'localhost';
32: $cfg['Servers'][$i]['port'] = '3307'; /* 追加 */

と書き足します。ここで、ブラウザを開いて、http://localhost:8080/phpmyadminへアクセスしてみます。無事に、

こんな画面を見ることができれば、よろしいです。せっかくなので、「新規データベースを作成する」メニューから、”wordpress”というデータベースをつくっておきましょう。照合順序は、utf8を使用しているなら、utf8_unicode_ciでいいのではないでしょうか。

3. Wordpressのインストール

展開すると、このようにずらずらとファイルが出てきます。

4. Wordpressへのアクセス方法を設定

VertrigoServのsettingsメニューから、[apache settings and aliases]という項目を選びます。

下段の、apache aliaesという表に、

wp : d:homewordpress

という項目を追加しました(wpは、もちろんwordpressの略名です)。

5. 再起動

VertrigoServメニューから、Server -> Restartを選択してください。アイコンの色が、になっていれば設定完了です。

6.Wordpressの設定

// ** MySQL 設定 - こちらの情報はホスティング先から入手してください。 ** //
/** WordPress のデータベース名 */
define('DB_NAME', 'wordpress');

/** MySQL のユーザー名 */
define('DB_USER', 'root');

/** MySQL のパスワード */
define('DB_PASSWORD', 'vertrigo');

/** MySQL のホスト名 (ほとんどの場合変更する必要はありません。) */
define('DB_HOST', 'localhost:3307');

/** データベーステーブルのキャラクターセット (ほとんどの場合変更する必要はありません。) */
define('DB_CHARSET', 'utf8');

/** データベースの照合順序 (ほとんどの場合変更する必要はありません。) */
define('DB_COLLATE', '');

ローカル開発用なので、rootでアクセスしていたり、Vertrigoのデフォルトのパスワードを使用していたりと、セキュアではない感じはしますが、外からのアクセスされることは想定しないので、気にしないことにしましょう。

（実際のサーバの設定をする場合は、wordpress専用のMySQLユーザを作り、参照/変更の権限を”wordpress”だけに限定し、パスワードは推測されにくいものに変えるなどの処置を行ってくださいね）。

ここまで終われば、http://localhost:8080/wpに、アクセスするだけです。ブログ名などを入れて、クリックすれば、Wordpressが自動的に、データベースのテーブル定義などをやってくれます。

NetBeansとは、元はJava言語を開発するためのIDEでしたが、6.0以降、Ruby(on Rails)や、PHPもサポートするようになりました。非常に便利なコード補完機能がありますので、使わない手はないでしょう。

用途にあわせていくつかのバンドルが用意されていますが、今回はWordpressテーマいじりが目的なので、軽量なPHP用でよいでしょう。

ここからの作業は、http://wp.tekapo.com/2009/01/14/netbeans-で-wordpress-をいぢる、導入編/に丁寧な解説があるので、簡単に記しておきます。

1. [ファイル]/[新規プロジェクト]をクリックし、[PHP]/[既存のソースを使用するPHPアプリケーション]を選択。
2. ソースフォルダを、”D:homewordpress”に設定、プロジェクト名は”Wordpress”などでよいでしょう。
3. 次へ。実行方法は、先ほどインストールしたVertrigoServを使用するので、ローカルWebサイトです。URLは、http://localhost:8080/wp。

これで完了です。私の環境の場合、プロジェクトを開くと、「構文エラー」がたくさん出てきました。原因はわかりませんが、気にしないでおきましょう（エラーはしばらくすると消えました）。

さて、ここまでで役者はそろいました。次回以降で、実際のWordpressテーマおよびソースコードを読みながら、よいテーマを模索する旅をはじめたいと思います。