2010年2月28日日曜日

PukiWikiのインストール

pukiwikiはPHPで出来ているため、PHPをインストールする必要があります。

■PHPのインストール
PHPをインストールするためには、Flexとlibxml2 が必要です。
まずはこれらをインストールしてしまいましょう!
$ yum -y install flex libxml2-devel


PHPの最新版を取得し、インストールして行きます。
$ cd /opt/local/src/
$ wget http://www.php.net/get/php-5.3.1.tar.gz/from/jp.php.net/mirror
$ tar zxvf php-5.3.1.tar.gz
$ cd php-5.3.1
$ ./configure --prefix=/opt/local/php --enable-mbstring --with-apxs2=/opt/local/apache/bin/apxs
$ make
$ make install


Apacheのhttpd.confに下記設定が追加されていることを確認する。追加されていなかったら追加してください。
LoadModule php5_module modules/libphp5.so


index.phpをDirectoryIndexに登録します。
すでにindex.htmlという記述があるので、その後に"index.php"を追記してください
<IfModule dir_module>
DirectoryIndex index.html index.php
</IfModule>


続いて、*.php,*.phtmlをPHPファイルとして認識させるために
"IfModule mime_module"内に下記記述を追記してください
<IfModule mime_module>
・・・・
AddType application/x-httpd-php .php .phtml
</IfModule>


これで、PHPの設定が終わったのでApacheの設定ファイルのテストをしてみましょう!
$ ./bin/apachectl configtest
httpd: Syntax error on line 100 of /opt/local/apache/conf/httpd.conf: Cannot load /opt/local/apache/modules/libphp5.so into server: /opt/local/apache/modules/libphp5.so: cannot restore segment prot after reloc: Permission denied

きっと、このようなエラーメッセージがでるはずです。
(でなければ、インストールが終わっているので飛ばしてください)
このエラーはSELinuxが邪魔をしているのため出ています。
特にSELinuxは使わないのであれば、下記設定を行い再起動すれば解決できます。
$ vi /etc/sysconfig/selinux
SELINUX=enforcing

SELINUX=disabled
$ reboot


サーバが起動したらApacheを起動しましょう!
$ cd /opt/local/apache
$ ./bin/apachectl configtest
Syntax OK
$ ./bin/apachectl start


■pukiwikiのインストール
pukiwikiホームページよりutf-8バージョンの最新をダウンロード。
$ cd /opt/local/apache/htdocs
$ wget "http://sourceforge.jp/frs/redir.php?m=iij&f=%2Fpukiwiki%2F12957%2Fpukiwiki-1.4.7_notb_utf8.zip"
$ unzip pukiwiki-1.4.7_notb_utf8.zip
$ mv pukiwiki-1.4.7_notb_utf8 wiki

これで下記URLにてpukiwikiのページが表示されるはずです。
http://192.168.1.xx/wiki/

もし表示できなかった場合は、pukiwiki関連のファイル、ディレクトリのパーミッションを正しく設定してください。

pukiwikiの詳しい設定は
pukiwikiのインストール手順ページで確認してください

■Basic認証
pukiwikiを公開すると、誰でも編集できてしまいます。
pukiwikiの認証を使ってもいいのですが、今回はApacheのBasic認証を使用してみましょう!
$ mkdir -p /opt/local/apache/conf/basic/
$ cd /opt/local/apache/bin
// ./htpasswd -c パスワードファイル 認証ID
$ ./htpasswd -c /opt/local/apache/conf/basic/wiki_auth aa
New password:
Re-type new password:
Adding password for user aa

これで認証用の設定ファイルの作成が完了しました!

では、Apacheの設定をします!
下記記述をApacheのhttpd.confの一番最後にでも追加してください。
<Directory "/opt/local/apache/htdocs/wiki">
AuthType Basic
AuthName "aa"
AuthUserFile /opt/local/apache/conf/basic/wiki_auth
Require user aa
</Directory>


追記したら、Apacheを再起動しましょう!
$ ./apachectl configtest
Syntax OK
$ ./apachectl restart


それでは、wikiのページにアクセスしてみてください!
きっと、認証を求められるハズです!

ApacheとTomcatの連携

mod_proxy_ajpを使用してTomcatとApacheの連携をします。

■前提条件
Tomcatのインストールが終わっていること
今回は、
Tomcatのインストール
Apacheのインストール
にてインストールしたものを使います。

■mod_proxy系のインストール
前回Apacheをインストールした時に、mod_proxy系はインストールしませんでした。
よって、mod_proxy系のモジュールのインストールを行います。(DSOを使います)
(インストール済みの人は飛ばしてください)

mod_proxy系のコンパイル
$ cd /opt/local/src/httpd-2.2.14/modules/proxy
$ /opt/local/apache/bin/apxs -i -c mod_proxy.c proxy_util.c
$ /opt/local/apache/bin/apxs -i -c mod_proxy_http.c proxy_util.c
$ /opt/local/apache/bin/apxs -i -c mod_proxy_ajp.c ajp*.c


ファイルが作成されている事を確認してください
$ ls -ltr /opt/local/apache/modules/mod_proxy*


httpd.confに下記記述を足してmod_proxy_ajpを使えるようにしてください
$ su -
$ vi /opt/local/apache/conf/httpd.conf
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_ajp_module modules/mod_proxy_ajp.so


ちゃんと組み込めたかを確認する
$ cd /opt/local/apache/bin
$ ./apachectl configtest
Syntax OK

"Syntax OK"と表示されればOKです!
これで、Apacheへの組み込みが終了しました。

■TomcatとApacheの連携
まずはTomcatの設定を見ます。
$TOMCAT_HOME/conf/server.xml
の"AJP/1.3"の部分のポート番号を見つけてください。
<!-- Define an AJP 1.3 Connector on port 8009 -->
<connector port="8009" protocol="AJP/1.3" redirectport="8443">
</connector>

今回はデフォルトの8009ポートです。

ではApacheとの連携を行います。

下記設定ファイルを作成します。
$ su -
$ cd /opt/local/apache/conf/extra
$ vi httpd-proxy.conf
<Location /examples/>
ProxyPass ajp://localhost:8009/examples/
</location>


この作成した設定ファイルをApacheに読み込ませる必要があるので、下記1文を最終行にでも書いてください。
$ su -
$ cd /opt/local/apache/conf
$ vi httpd.conf
Include conf/extra/httpd-proxy.conf


設定が終わったので、エラーがないかを確認しましょう!
$ su -
$ cd /opt/local/apache/bin
$ ./apachectl configtest
Syntax OK

"Syntax OK"とでればOKです!

Apacheを再起動してみましょう!
$ su -
$ cd /opt/local/apache/bin
$ ./apachectl restart


Tomcatが起動していることを確認して自分のWEBサーバにアクセスしてください。
http://192.168.1.xx/examples/

画面が見れたら、ApacheとTomcatの連携ができました!
※URLの最後に"/"を入れないと、ちゃんとマッピングしてくれません
※最後の"/"がなくてもいいように素るにはRewriteルールなどを使ってやってみてください

本当にApacheを経由しているか確認したければ、下記ファイルを見てリクエストがきた事を確認してください。
$ cd /opt/local/apache/logs
$ cat access_log

Tomcatのインストール

Tomcatを使うためにはJavaがインストールされている必要があります。
よって、Javaのインストールから説明します!

■前提条件
・OS
CentOS5.3
(別にFedoraでもいいです。RedHat系が好きです)
・インストール場所
/home/worker/local/tomcat
(別にどこでもいいです。今回はworkerの持ち物としてインストールします)

■JDKのインストール
最新のJDKをダウンロードします
$ wget -O jdk-6u18-linux-i586.bin http://cds.sun.com/is-bin/INTERSHOP.enfinity/WFS/CDS-CDS_Developer-Site/en_US/-/USD/VerifyItem-Start/jdk-6u18-linux-i586.bin?BundledLineItemUUID=RzJIBe.lTIAAAAEnznIRHw2n&OrderID=s2VIBe.l4eYAAAEnxHIRHw2n&ProductID=6XdIBe.pudAAAAElYStRSbJV&FileName=/jdk-6u18-linux-i586.bin


インストールの実行します
$ bash jdk-6u18-linux-i586.bin

スペースを押しまくって、最後まで行き"yes"と入力する

これでインストール終わりです。
使い易いようにシンボリックリンクを貼っておきます。
$ cd /opt/local
$ ln -s src/jdk1.6.0_18 java


パスを毎回通すのがめんどいので、bashrcに最終行に追記する
$ vi /etc/bashrc
export JAVA_HOME=/opt/local/java
export PATH=$JAVA_HOME/bin:$PATH


ターミナルを入りなおせば、javaにパスが通っています。

■Tomcatのインストール
最新のTomcatをダウンロードします。
$ wget http://ftp.kddilabs.jp/infosystems/apache/tomcat/tomcat-6/v6.0.24/bin/apache-tomcat-6.0.24.tar.gz
$ tar zxvf apache-tomcat-6.0.24.tar.gz


使い易いようにシンボリックリンクをはっておきます
$ cd /home/worker/local
$ ln -s src/apache-tomcat-6.0.24 tomcat


Tomcatの起動
$ cd /home/worker/local/tomcat
$ ./bin/startup.sh


ブラウザからアクセスしたければ、iptablesを編集し8080ポートを開放する必要があります。
$ cd /etc/sysconfig/
$ vi iptables
-A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 8080 -j ACCEPT
$ /etc/rc.d/init.d/iptables restart
ファイアウォールルールを適用中: [ OK ]
チェインポリシーを ACCEPT に設定中filter [ OK ]
iptables モジュールを取り外し中 [ OK ]
iptables ファイアウォールルールを適用中: [ OK ]
iptables モジュールを読み込み中ip_conntrack_netbios_ns [ OK ]

これで、ブラウザからhttp://192.168.1.xx:8080/にてアクセスできます!

Tomcatの停止
$ cd /home/worker/local/tomcat
$ ./bin/shutdown.sh


Tomcatのログ
$ cd /home/worker/local/tomcat
$ cat logs/catalina.out

2010年2月27日土曜日

Apacheのインストール

いろいろと紹介する前に、基本のApacheの設定を書いておきます。

■前提条件
・OS
CentOS5.3
(別にFedoraでもいいです。RedHat系が好きです)
・インストール場所
/opt/local/apache

■ソースダウンロード
・Apacheホームページ
http://httpd.apache.org
downloadページへいって"Unix Source"を取得します

■インストール方法
$ su -
$ cd /opt/local/src
$ wget http://ftp.riken.jp/net/apache/httpd/httpd-2.2.14.tar.gz
$ tar zxvf httpd-2.2.14.tar.gz
$ cd httpd-2.2.14
$ ./configure --enable-mods-shared=most --enable-so --enable-rewrite=shared --prefix=/opt/local/apache
$ make
$ make install

これでApacheのインストールは終了です。
ちなみに、configureのログは下記で見れます
$ cat /opt/local/src/httpd-2.2.14/config.log


では、Apacheを起動してみましょう!
$ cd /opt/local/apache
$ ./bin/apachectl start

公開出来ているでしょうか?
IP確認しましょう!
$ /sbin/ifconfig
eth0 Link encap:Ethernet HWaddr 01:30:1B:BD:7A:E5
inet addr:192.168.1.13 Bcast:192.168.1.255 Mask:255.255.255.0

では、私のApacheをインストールしたマシンは192.168.1.13ということがわかったので
http://192.168.1.13/
をブラウザのURLに入力しましょう!

きっと、ファイヤーウォールを有効にしている場合はアクセス出来ないと思います。

■ファイヤーウォールの設定
Apacheの使用する80番ポートを開放します。
(Apacheのポート番号は$APACHE_HOME/conf/httpd.confに"Listen 80"こんな風に書いてあります)
下記手順でiptablesに1文を追加してください。
$ cd /etc/sysconfig/
$ vi iptables
-A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT

これで、設定ファイルの修正が終わりました。
これだけだと、設定ファイルを修正をしただけなので、ファイヤーウォールの再起動をします。
$ /etc/rc.d/init.d/iptables restart
ファイアウォールルールを適用中: [ OK ]
チェインポリシーを ACCEPT に設定中filter [ OK ]
iptables モジュールを取り外し中 [ OK ]
iptables ファイアウォールルールを適用中: [ OK ]
iptables モジュールを読み込み中ip_conntrack_netbios_ns [ OK ]

では、先程のURLを入力してみましょう!
画面に"It works!"と表示されると思います!


これで、Apacheのインストール終了です。

■外部公開
これまでの設定だと、家の中(イントラ環境)からしかアクセスできません。
外から(職場とか、学校とか)見れるようにするためには、ルータの設定をする必要があります。

今回は、固定IPを持っていない動的IP環境での設定を記述します。
(固定IPを持っていても、この設定でいけますが)

動的IPとは、接続する度にIPアドレスが変化するモノをいいます。
通常のプロバイダ契約だと、動的IPになっていると思います。

IPが動的に変わるのに、どうやって自分のサイトにアクセスするんだよ?
って感じると思いますが、世の中にはダイナミックDNS(以下、DDNSとする)というサービスを提供してくれている人がいます。
今回はこのサービスで、しかも無料のものを使って設定したいと思います。

DDNSについて詳しく知りたければ、ググってください。

ちなみに、私は"Dynamic DO!.jp"様のサイトを利用させていただいています。
なので、以下の説明も"Dynamic DO!.jp"の設定になります。

まずは、サイトにてドメインを取得してください。
このドメインと、自宅のIPを常にマッピングし続ける必要があります。
マッピング自体はDDNSにてやってもらえますが、自宅のIPアドレスを定期的に教えてあげる必要があります。

そのため、この様なシェルを作りましょう!
※"Dynamic DO!.jp"用の設定になるので、他のサービスを利用している場合は、別の方法でやってください。
※/home/apahe/binにシェルを置いた場合の設定です。

cd /home/apache/bin
vi ddns.sh
#!/bin/bash

HOME="/home/apache"

cd $HOME/bin
source ../.bashrc

wget -O - 'http://free.ddo.jp/dnsupdate.php?dn=ドメイン名&pw=パスワード'


このシェルを定期的に実行することによって、ドメインと、このリクエストを飛ばしたIP(要するに自宅のIP)をマッピングしてもらえます。

定期的に、自分でこのシェルを実行してもいいのですが、寝ているあいだとかは無理なのでcron登録しましょう。
下記コマンドを実行し、下記1文を記述しましょう!
$ crontab -e
*/20 * * * * /home/apache/bin/ddns.sh >/dev/null 2>&1


これで、20分毎にこのシェルを実行してもらえます!

以上がDDNSの設定になります。

ただ、これで終わりではありません!

これだけだと、きっと自宅のルータに邪魔をされています。
ファイヤーウォールの設定と同じように、ルータにもポートフィルタリング機能があるため、ルータの80番ポートも開放する必要があります。

この設定自体はルータによって違うので、説明書を読んでみてください。
普通は(192.168.1.1とか192.168.0.1)にブラウザからアクセスするとできると思います。

基本的には、80番ポートへのアクセスを、内部のIPアドレス(今回で言うと192.168.1.13)の80番ポートにマッピングします。
この設定はGUI上でできるので、簡単にできると思います。

これで、外部から自宅のWEBサーバへアクセスすることができます!
外に出て、登録したドメイン名でアクセスしてみましょう!
(めんどくさかったら携帯電話からアクセスしてみてください)

2010年2月25日木曜日

Googleカレンダーの直近スケジュールを表示させる

GoogleカレンダーにIT関連イベントを登録しているのですが、このデータをブログのサイドに表示させたかったので作ってみました。
実際に作成したものは、このブログのサイドに表示させています。

■データ取得方法
まずは、Googleカレンダーからカレンダー情報をJSONP形式で取得します。
JSONP形式のデータを取得するためには、下記URLで実現できます。
http://www.google.com/calendar/feeds/bosh0h7tg9ddmhav7a537bguh4%40group.calendar.google.com/public/full?alt=json-in-script&callback=insertCalendar

もし、自分のカレンダーで試したいのであればURLを下記のようにしてください
"http://www.google.com/calendar/feeds/" + GoogleカレンダーURL + "/public/full?alt=json-in-script&callback=insertCalendar"

これで、JSONP形式でレスポンスを得ることができました。
callback関数名はパラメータに渡したinsertCalendarになります!

ここまでくればあとちょっと!

日付順で取得したいので
"orderby=starttime&sortorder=ascending"をパラメータに追加!

未来の予定が欲しいので
"futureevents=true"をパラメータに追加!

最大件数は7件がいいので
"max-results=7"をパラメータに追加!

これでURLが完成!
http://www.google.com/calendar/feeds/bosh0h7tg9ddmhav7a537bguh4%40group.calendar.google.com/public/full?alt=json-in-script&callback=insertCalendar&orderby=starttime&max-results=7&singleevents=true&sortorder=ascending&futureevents=true

ちなみに参考API
http://code.google.com/intl/ja/apis/gdata/docs/json.html

■データ表示
前回のJSONPの使い方で紹介した方法を使い表示部分の実装していきます。

コールバック関数名がinsertCalendarなので、この関数名で実装します。
今回、このブログでは下記のソースを使用しています。

var edit = function() {
// ① scriptタグを出力し、サーバから取得できる下記文字列をHTML上に展開させる
// insertCalendar({jsonデータ});
var url = 'http://www.google.com/calendar/feeds/bosh0h7tg9ddmhav7a537bguh4%40group.calendar.google.com/public/full?alt=json-in-script&callback=insertCalendar&orderby=starttime&max-results=7&singleevents=true&sortorder=ascending&futureevents=true';
var ele = document.createElement('script');
ele.type = 'text/javascript';
ele.src = url;
document.body.appendChild(ele);
// 文字列を出力する場所を取得
var output = document.getElementById('ak-javascript');
return {
disp : function(events) {
// ③ 1個のイベント情報を表示様に整形して行く
var title = events.title.$t;
var content = events.content.$t;
var start = events.gd$when[0].startTime;
var link;
if(content) {
var contents = content.split('\n');
for(var i = 0; i < contents.length; i++) {
var con = contents[i];
if(con.indexOf("http",0) == 0) {
link = con;
break;
}
}
}
var ele;
if(link) {
ele = document.createElement('a');
ele.href = link;
ele.target = '_blank';
ele.innerHTML = title;
} else {
ele = document.createElement('span');
ele.innerHTML = title;
}
var date = document.createElement('span');
date.innerHTML = '・' + start + '';
// ④ HTML上に出力する
output.appendChild(date);
output.appendChild(document.createElement('br'));
output.appendChild(ele);
output.appendChild(document.createElement('br'));
}
};
}();
// ② コールバック関数
function insertCalendar(data) {
var feed = data.feed;
if(!feed) {
return;
}
var events = feed.entry;
for(var i = 0; i < events.length; i++) {
edit.disp(events[i]);
}
}

■解説
ソースの①~④までが順番に呼ばれます。
①にて、scriptタグをHTML上に出力すると、urlに書かれている場所からデータをダウンロードします。
ダウンロードしたデータにはinsertCalendarを実行するように記述されたデータが返されるため、②の関数が実行されます。
②の関数の実行時に渡されるjsonデータを分解し、1個ずつの登録データに分けて出力処理を行います。
③にて、データの整形を行っています。今回はカレンダーに登録されている詳細情報からURLを抽出して、リンクをつけるように整形しています。
最後に、④にてHTML上に出力を行っています。

以上の流れで、このブログ上にGoogleカレンダーから取得したイベントデータが表示されています。

JSONPを使うことによって、このように別のサーバからデータを取得することができます。
そして、アイデア次第でいろんな便利な事ができます!
ぜひ試してみてください!

JSONPの使い方

JavaScriptで別のドメインのデータを取得したいとすると、クロスドメイン問題にぶつかると思います。
この問題を解決するためには、JSONP(JSON with paddingの略)というモノを使用することになると思います。
他にも方法はありますが、きっとこれが一番簡単なのではないでしょうか?

実際の使い方を書きます
下記URLにアクセスすると、
http://always.ddo.jp/blog/jsonp/test.jsonp

test( { "name" : "hoge", "age" : "100" } );
このような文字列が返却されます。

この文字列をよく見ると、
javascriptのtest関数に'{ "name" : "hoge", "age" : "100" }'というjson形式のデータを渡しているように見えると思います。

JSONPについては、これが全てです!

下記ソースをFirebugのコンソールなどに貼って実行してみてください。

別のドメインの情報を取得して、ページ内で取得データを使用できるようになりました!

■解説
ソースに存在する無名関数にて、scriptタグを生成しています。
このscriptタブのsrc属性に、最初に記述したjsonpデータを返却するURLを記述します。
そうすると、帰ってきたデータがクライアントのHTML上に展開され、javascriptのtest関数を呼びます。
test関数は、自分で好きな様に記述できるので、引数を受け取って今回はalertしています。

次回はGoogleカレンダーと連携した、もう少し面白い使い方を紹介したいと思います。