Sample Blog

RemixのためのWEBページ構造化とDomインスペクタ

TidyとGreacemonkeyは、WEBページのデバックツールとして強力なFirefoxの拡張機能ですが、FireFoxには最初からDomインスペクタという機能が入っています。
Domインスペクタを使うと、WEBページのHTMLマークアップの構造をディレクトリ・ツリーのように表示して、しかもdivタグなどのエレメントを選択すると、WEBページ内で、そのエレメントがどこにあたるのか、ブラウザ画面でハイライト表示してくれます。まずは、使ってみるのが一番わかりやすいので、FireFoxメニューの「ツール」→「Domインスペクタ」で。
もし、ツールに無い場合は、FireFoxの再インストールが必要（BookmarkやPlug-inはすべて引き継げます）。

1. インストールを開始。ライセンスに同意する。
2. カスタムインストールを選択
3. インストールするディレクトリを選んだ後に、「追加コンポーネントをインストールするか？」と聞いてくるので、「Developer Tools」を追加
4. インストールが完了すると、「Domインスペクタ」が追加されているはず

このDomインスペクタの有用性はDive into GreaceMonkeyのPDF版33ページ目でも触れられています。WEBページを構造的に見ることができるので、不必要に複雑なclass構造などになっていないか、全体的にバランスのとれた構造化ができているか、などを確認することができます。

なんで構造化を気にする必要があるかというと、それはRemixのためなんですね。「CSSを切り替えて、見え方をダイナミックに変化させる」、「Ajaxで、追加のデータを動的に読み込んで表示する」、「GreaceMonkeyのUser Scriptで、WEBページをHackする」、WEB2.0ぽいことをやるためには、まずは第一に重要なのが操作したいデータを見つけ出せること。なので、そのページがDomツリーとしてValidなのは最低限で、さらに構造が分かりやすいと、それだけデータのRemixingがやりやすくなる。

WEBページのミニマリズムという表現をしている記事があったけれど、ここでも「乗せる情報を最低限にする」というよりは「構造をミニマルにする」ということが強調されています。

ブログでは、色々な機能をサイドバーに組み込むことが面白さの一つ。更新情報や記事一覧、カレンダーや友達のブログ一覧、Flickrやモブログ画像、AdsenseやAmazonのおすすめ商品などなど。この辺りをデータを雑然とサイドバーに並べるのではなくて、そのデータが「誰のためのものか？」「どういう属性、機能をもっているのか？」にもとづいて、構造化することが重要じゃないか？ということのようです。

TextBased.com » A Return to Minimalism

recent posts, recent comments, links to RSS feeds, a search bar: These are all sections that deal with your content itself, they delve deeper into the site and provide more ways to access your own content. a blogroll, content aggregated from other sites, images, Adsense/Affiliate links: These are all off-site links that the blog-owner feels will be of value or interest to their readers. a description, a mini-blog, links for the blog tool, copyrights: These elements are based around the author of the website, rather than the content.

Firefox : GreasemonkeyでAjaxデバック / TidyでHTMLの検証

FireFoxは、単なるブラウザという範囲を超えつつありますね。色々とプラグインを組み込むと、WEB2.0な開発環境になる？　GraceMonkeyを拡張したAjaxのデバッカーらしいです。

Curiosity is bliss: "XMLHttpRequest Tracing" for AJAX debugging
via O'Reilly Radar < An "Activity Viewer" for Ajax

Dive Into Greasemonkey
Dive Into Greasemonkey is a book about programming with Greasemonkey, a Firefox extension for customizing web pages. Read it online for free.

こちらは、TidyをベースにしたHTMLバリデーター。WEBを閲覧していて、右クリック→ソースを表示すると、自動的にHTMLをパース＆検証して問題を指摘してくれます。サイトのHTMLを作成中に見え方を確認しながら、HTML検証もできるので便利。ただ、あまりに簡単に検証できるので、時間が無くてエラーの手直しが済んでいない自分のページが気になってしょうがなくなります。HTMLソースに言い訳でも書きますかw。

Html Validator for Firefox and Mozilla

Google MapとG-MailのWEBデザイン・テクノロジー

Googleの新サービスは、WEBブラウザでこんなことができるの？と毎回びっくりしますが、話題のGoogle mapでもjavascirpt, DHTML, XML技術盛りだくさんのよう。G-Mailとあわせていくつかのサイトで技術Hackされてます。時間があるときに、自分のサイトでも試してみたい、目をひく効果が盛りだくさんですね。

Google Mapで動的に地図をスクロールさせて、かつXML WEBサービス化された地図情報（店の情報など）を地図上にマッピングする。

as simple as possible, but no simpler: Mapping Google

G-Mailでメール着信をチェックするため定期的にリロードする方法。JavaScript component XML HTTP Request ObjectとPHPで実現。

PHP On The Fly
XML.com: Very Dynamic Web Interfaces

XUL + FireFoxでつくるWEBサービス連携アプリケーション

FireFox用のG-Tools検索プラグインを作りながらちょっと調べたぐらいなのですが、FireFoxをベースにWEB連携アプリをつくるのは、なかなか面白そう。
FireFoxを含むMozilla用に、XULというGUI記述環境が用意されていて、HTML + CSS + Javascriptを記述することで、ローカルアプリ（？）が作成できてしまいます。XULを駆使して作られたAmazon検索アプリケーションがありました。インストール不要でFireFoxから起動するのですが、結構面白いです。（FireFoxでアクセスしてください）

M A B - Mozilla Amazon Browser

RSSやXMLベースのWEBサービスなどと組み合わせると、今までのブラウザという概念にとどまらないFireFoxアプリケーションがつくれそう。しかもOSはクロスプラットフォーム対応ですね。

XULアプリケーション作成入門

XUL(XML-based User-interface Language, ズール)はXMLに基づいたGUI記述言語で、MozillaのGUIを作成するために作られました。外見はCSS(Cascading Style Sheet)によって調整し、動作はJavaScriptによって記述します。XPConnectという仕組みを使ってMozillaのコンポーネントにアクセスすることにより、ファイル操作やソケット通信なども行うことができます。つまり、ごく普通のアプリケーション（Mozillaのような）が作れるわけです。GIMPのGUIを記述するためのGTK+が独自に発展し、GNOMEにも使われているのと同様に、XULもMozilla以外のアプリケーションを作成するために使われていく可能性があります。

XULの最大の長所はクロスプラットフォームだということです。LinuxのGUIもMacintoshのGUIも同じソースファイルで実現できます。また、XML,CSS,JavaScriptといった要素技術はWebページを作成する際の知識をそのまま流用できるので、これらの技術を多用してWebページを作っていた人はXULを習得するのもそれほど難しくないでしょう。

XUL参考リンク
XulPlanet.com
XML User Interface Language (XUL) Project
Creating Applications with Mozilla mozdev.org
xul.mozilla.gr.jp もじら組

Fedora Core 3 + PHP5 + MySQL + Apache + Eclipseな開発環境

自宅用のPCを新しくした。「普及価格帯で売られているPCのスペックが、自分のPCの倍ぐらいの性能になったら新しく買ってもよし」という物欲規約をもうけているので（笑）、現在はDELL、Pentium4 1.6GHzのマシン使用中なので、そろそろよいかと。
というわけで、秋葉原で実物を見て、Lusterwareケースがなかなかよかったドスパラで購入。昔ホットでいまクール（by ITmedia）らしいAthlon 64搭載のPrime A Thunderstormをチョイス。

本屋をぶらぶらしていたら、「Fedora Core 3で作る最強の自宅サーバー」なる本に、Fedora Core 3のCD-Romが付属していたので、年末年始でWindows環境はAthlonマシンに移行しつつ、DELLにはFedora Coreを入れて開発環境にしてみました。Fedora Core 3 + Apache2 + MySQL4 + PHP5 + Eclipse（Trustudio）という感じです。とりあえず以下、作業メモ。

最近のLinuxってすごいですね～。CD-Romを入れ替えるだけで、簡単にインストールできてしまいましたよ。「Fedora Core 3で作る最強の自宅サーバー」は、Fedoraのインストールから、DynamicDNS・ルータの設定まで一通り記述されていて便利なのですが、各種アプリの設定はすべてGUIベースの説明なので、しばらく前に買って放置してあった「Fedora Core 1で作るネットワークサーバ構築ガイド」こちらの本も使いつつ。

Fedora Core 3のデフォルト・インストールだと、MySQLは3.x、PHPは4.xのバージョンなので、両方ともバージョンアップ。まずはMySQLを先にあげないと、PHP5のインストール時にRPMにおこられます。

最新のMySQLパッケージをダウンロード。

すでにPHP4.xが存在して、依存関係があるので、MySQL-sharedはcompatの方を撰ぶ。

# rpm -Uvh MySQL-server-4.1.8-0.i386.rpm MySQL-client-4.1.8-0.i386.rpm MySQL-devel-4.1.8-0.i386.rpm MySQL-shared-compat-4.1.8-0.i386.rpm

次にPHPをバージョンアップ。RPM Site - Link Farmで紹介されているRpmfind.Netで検索してもFedora Core 3用のPHP5.0.3 RPMはまだ無いようなので、5.0.2-8で。ただし、5.0.2以前にはセキュリティ・ホールが存在するので、外部に公開するサーバの場合は、5.0.3必須です。とりあえず外部から見えない開発環境なので、そのうちにアップするということで。

こちらからダウンロード

# rpm -Uvh php-ldap-5.0.2-8.i386.rpm php-5.0.2-8.i386.rpm php-pear-5.0.2-8.i386.rpm php-mysql-5.0.2-8.i386.rpm

参考
PHP 5 and MySQL 4 on Fedora Core 3, from RPMs　
PHP: Installation on Unix systems - Manual　

こちらの処置も
[PHP-users 18729]Re: libmysqlclientを指定してコンパイル

ついでにSmartyも入れておく。

Installing Smarty

解凍したSmarty/libsの内容を、/usr/local/lib/phpに全てコピー。/etc/php.iniにincludeを追加。

include_path = ".:/php/includes:/usr/local/lib/php/Smarty"

次はJava2 SDKをインストール。

J2SDK　RPMファイルのインストール

javaシンボリックリンクを切替。

# ln -s $JAVA_HOME/bin/java java
# ln -s $JAVA_HOME/bin/javac javac

とやってしまったが、/usr/javaのリンク張替えのほうがよかったらしい（参考）。

つぎに、EclipseのプラグインでPHP開発環境を実現するTru Studioをインストール。ダウンロード、インストール手順は提供元である、Xoredのサイトに詳しくのっています。基本的にEclipseなので、パスの設定も忘れずに。

# export PATH=$PATH:/usr/local/eclipse

EclipseのPHPプロジェクトのworkspaceを、Apacheで表示できるようにURL Mapping。/etc/httpd/confの設定ファイルを編集。以下を追加。

Alias /プロジェクト名/ "/home/ユーザ名/workspace_path/プロジェクト名/"

<Directory "/home/ユーザ名/workspace_path/プロジェクト名">
AllowOverride None
Options None
Order allow,deny
Allow from all
</Directory>

<Deirectorｙ>の方のPath指定は、最後に”/”がいらない。

プロジェクトの各フォルダはchmod 755。加えて、ユーザーフォルダも実行可能にchmodしておかないとApacheでForbiddenになってしまう。

とりあえず開発環境としては、こんなところかな。

Fedora Core 3で作る最強の自宅サーバー 福田 和宏 ソーテック社 2004-12 売り上げランキング　24,703 Amazonで詳しく見る　　　by G-Tools

Fedora Core 1で作るネットワークサーバ構築ガイド サーバ構築研究会 秀和システム 2004-05 売り上げランキング　289,415 Amazonで詳しく見る　　　by G-Tools

Filezilla オープンソースのFTP Client

いままでFTPクライアントにはFFFTPを使っていたのですが、どうも今のレンタルサーバーと相性がよくないらしく、つながるけどディレクトリ情報がうまく取得できず。色々と探しつつCore FTP clientなどを使っていたのですが、意外とFTPクライアントって、Freeで”コレ”っていうものが少ないんですよね。と、Going My WayさんでオープンソースのFTP Clientが紹介されてました。あと、オープンソース系のソフトの方が、なんとなく名前がカッコいい気がするんですが、これもさりげにポイント高し。

Going My Way: オープンソースで開発されたFTPクライアントFilezilla

FileZilla、動作も速くて結構いい感じですね。GPLライセンス。
メーラーもサーバとの相性で、Outlook ExpressからThunderbirdに。FireFoxも使い始めるとIEには戻れないし、最近、普段から使うソフトがオープンソース増えてきたな～。

そういえば、FireFoxのボランティアベースのプロモーション、Spread FirefoxによるNewYorkTimes誌の広告デザインがきまったようですね。マトリックスぽく文字から映像ができているけど、「0101」のコードでなくて、人の名前で描かれてます。

U2が無料で協力するiPodと、FireFoxの25万ドル寄付広告に見る「プロモーションの自由」：Goodpic

HTML_QuickForm PHPでのフォーム入力処理を簡単にするPEARパッケージ

PHPで、面倒なフォーム入力処理が楽にできるという、PEARのHTML_QuickFormパッケージを利用してみたメモ。

開発環境のWindowsにはPEARがセットアップされていなかったので、c:\phpのgo-pear.batをダブルクリックして実行。DOSコマンドラインの通りにするとPEARの基本クラスがwindowsにインストールされる。レジストリ登録ファイルも自動生成してくれるので、便利ですね。

次にPEARのサイトから、HTML_QuickFormパッケージをダウンロード

HTML_QuickForm

HTML_Commonというパッケージも必要になるようなので、こちらもダウンロード

HTML_Common

いずれのファイルも解凍して、PEARディレクトリに配置。あと、php.iniファイルのinclude_pathに、C:\php5\PEARを追加しておく。
ここまで終わったら、以下のようなサンプル・コードを実行すると、無事HTML_QuickFormは動いているよう。

<?php
require_once "HTML/QuickForm.php";

$form = new HTML_QuickForm('frmTest', 'get');
$form->addElement('header', 'MyHeader', 'Test');
$form->display();
?>

ついでにSmartyとの連携もテスト。PHP側で

require_once ('HTML/QuickForm.php');
require_once ('HTML/QuickForm/Renderer/ArraySmarty.php');

$form = new HTML_QuickForm('testForm');

$renderer = new HTML_QuickForm_Renderer_ArraySmarty($this->smarty);
$form->accept($renderer);
$this->smarty->assign('form',$renderer->toArray());

としておけば、SmartyのTemplateファイルで、

{$form.attributes}
{$form.submit.html}

などと呼び出せるよう。ふむふむ、これはなかなか便利そうだ。

参考
HTML_QuickForm利用の手引き

PHP5の参考書 PEAR Mojavi などのライブラリ説明が分かりやすい

PHP5についての書籍はまだまだ少ないなかで、この本は結構参考になりました。なんとなく調べるのが面倒で使っていなかったPEARの説明とか、色々なライブラリが紹介されています。

中でも、MVCフレームワークのMojaviは、初めて知ったのですが、これはなかなかよさそう。日本語で解説されているページもあります。
G-Tools用には、軽量MVCフレームワークを自作したのですが、Mojaviがあれば必要な機能は、ほとんどカバーされそう。Mojavi + Smarty + HTML_QuickForm　を組み合わせると、軽量かつ柔軟なPHP WEBアプリ開発ができそうです。
あとセキュリティーの章では、クロスサイト・スクリプティングやSQLインジェクションなど、よく知られた攻撃が具体的な例で載っているので、こちらも目を通しておいたほうがいいかも。

しかし最近、スクリプト言語がますます便利になってきてますね～。スクリプトとオープンソースのフレームワークを使えば、開発効率は数年前に比べて格段に高まっているんじゃないでしょうか。フレームワークやライブラリも、一時期のJava系のヘビーなものに加えて、PHPなどで使う軽量なものが増えてきたことで、「まずは作り始めてみる」というようなアプローチがやりやすくなったような気がします。

まるごとPHP!〈Vol.1〉
	山田 祥寛　桝形 誠二　広川 類　山本 勇　岩切 洋一 おすすめ平均　 PHP5, PEAR, Mojavi, と３粒のネタが濃厚に詰まった一冊 貴重な中・上級者向けの解説本 Amazonで詳しく見るby G-Tools

ドメイン名の取得とネームサーバ DNSの設定

ドメイン名の取得から、ホスティング会社でのドメイン名の設定まで、簡単にメモ代わりにまとめます。過去の記事でも調べた通り、やはり海外企業でのドメイン登録、ホスティング契約が割安なので、基本は英語ですが、コストダウンのために頑張りましょう。

1.　ドメインネームの取得

ドメイン取得には、海外でも最大手のNetworkSolutionsが安心。3年契約だと年間＄24.99、10年契約すれば年間＄14.99と、契約年数に応じて大きな割引が受けられます。
他にもPrivate Registrationというサービスがあって、これは個人でドメインを登録するときに便利です。WHOISなどで、誰でもドメインの登録情報を検索することができるのですが、このときに、個人で登録していると、連絡先の住所や電話番号、メールアドレスなどが丸見えになってしまいます。Private Registrationサービスを利用すると、これらの登録情報にはNetworkSolutionsの転送先アドレスが表示され、個人情報が保護されます。

2.　ホスティング会社を探す

ホスティング会社を探すには、こちらの記事を参照ください。
「海外レンタル・ホスティングを探す　VPSで専用サーバなみの自由度」

3.　レンタルサーバの設定

CpanelWebHostManagerならば「Main >> Account Functions >> Create a New Account」でgoodpic.comのアカウントを作成。空いているIPアドレスを振り当てます。

VPSだとIPアドレスを5つぐらい割り当ててもらえます。そのうちの二つをNameserverに割り当てましょう。例えば、211.22.15.100 ～ 104という5つのIPをもらったて、www.goodpic.comをホスティングするなら

211.22.15.100 ns1.goodpic.com
211.22.15.101 ns2.goodpic.com

などと割り振ります。CPanel WebHostManagerならば、メニューの「Main >> Server Setup >> Manage Nameserver IPs」 でネームサーバにIPアドレスを割り振ります。「Service Configuration →　Nameserver Setup」でNameserverをEnableに。「DNS Functions →　Establish a Trust Relationship with a Primary Nameserver」でホスティング会社の親ネームサーバとシンク。

4.　NetworkSolutionsでのDNS設定

ドメインを取得したNetworkSolutionsのアカウント・マネージャーにログイン。取得したgoodpic.comを選択して、「Change domain to point to: Custom DNS Setting」のEditを選択。「Move DNS to a new name server」のcontinueを選択。先ほどのns1.goodpic.comとns2.goodpic.comを、NameServerに追加して、選択します。保存すると24-36時間かけて、DNS設定がプロパゲーションされて、www.goodpic.comにアクセスできるようになります。

また、同じVPS上でg-tools.comなどの新しいドメインを追加するときには、同じくCpaneWHMでアカウント作成、IPアドレスの振り分けをます。そしてNetworkSolutionsでは、ns1.goodpic.com，ns2.goodpic.comと既にセットアップしたネームサーバを指定することができます。ホスティング側の設定はCpanelWHMが自動的にしてくれるので、アカウント作成後にBINDサーバを再起動しておきます。

Eclipse + PHP5プラグインでフリーのPHP開発環境を構築

PHPの開発環境の構築方法をメモ。高機能＆オープンソースで、もはやデファクトのEclipse、PHPプラグインも無料で提供されていて、こちらもかなり高機能です。今回はPHP5、Apache2.0、Eclipse3.0 + xored　TruStudio IDE（PHPプラグイン）の最新バージョンをWindows XPにインストールしました。

まずはApache2.0

Apache 2.0　ダウンロードページ

Win32 Binary (MSI Installer)をダウンロード。ダウンロードしたファイル（apache_2.0.50-win32-x86-no_ssl.msi
）をダブルクリックしてインストール。Apacheがインストールされて、システムトレイに常駐します。
Apacheで日本語のHTMLを表示するときに、文字化けする場合は、httpd.confファイルの”AddDefaultCharset ISO-8859-1”という行を、自分がHTMLを保存する文字コードで指定する（”AddDefaultCharset UTF-8”などにする）と解消されるケースが多いです。

PHP5のダウンロード

ダウンロードしたzipファイル（php-5.0.0-Win32.zip）を解凍。PHP5のインストールについてはこちらのページを参照。php5のディレクトリにpathを通すのも忘れずに。（windowsコントロールパネル→システム→詳細設定→環境変数）。PHPが動作することを確認したらEclipseのインストールへと進みます。

Eclipse.org ダウンロード

ダウンロードしたzipファイル（eclipse-SDK-3.0-win32.zip）を解凍して、c:\eclipseなどのディレクトリにコピー。Eclipseの日本語化のために以下のサイトから日本語化パッチ（ eclipse3.0-JapanesePatch.zip ）をダウンロードします。

Eclipse 3.0 日本語化

日本語化パッチのインストール方法は、ファイルを解凍して、

• 1. c:\eclipse\configuration ディレクトリ配下のディレクトリを全て削除


• 2. ダウンロードしたファイルを解凍し、c:\eclipse\plugins ディレクトリに上書き

その後、c:\eclipseのeclipse.exeをダブルクリックするとeclipseが起動します。特にインストール作業は必要なし。PHPのみのプログラミンではあまり関係ありませんが、J2SE SDKをインストールしている場合は、EclipseオリジナルのJavaコンパイラからJ2SEのJREに変更しておいたほうがいいかも（Tomcatなどを使う場合に必要）。「ウィンドウ」->「設定」->「Java」->「インストール済みJRE」でJ2SE SDKのJREを指定。その他、Eclipseについては以下の日本語サイトを参照。

Eclipse　日本語ガイド

次にEclipse用のPHP開発プラグインをインストール。xored softwareが無償で提供しています。Eclipse3.0用にはTruStudioをダウンロード。以下のサイトから　trustudio-foundation-1.0M2.zip　というファイルをダウンロード。

xored　TruStudio IDE　ダウンロード

zipファイルを解凍して、featuresとpluginsディレクトリのある全てのファイルを、それぞれc:\eclipseのfeaturesとpluginsディレクトリーにすべてコピー。以上で、EclipseでPHPプロジェクトの開発が行えます。Eclipseの標準のエディタ機能に加えて、PHPの文法に則った色分けなどをしてくれるので、プログラミングも結構やりやすくなります。
開発するPHPファイルの文字コードをUTF-8などにしたい場合は、Eclipseエディタの文字コードを変更しておいた方がいいでしょう。「ウィンドウ」→「ワークベンチ」→「エディタ」で「テキストファイル・エンコード」を指定することができます。

ついでにPHPでWEBアプリを作る際には強力に役立つテンプレート・エンジン Smartyもインストール。
Smartyのサイトから最新版　Smarty-2.6.3.tar.gz　をダウンロード。

Smarty

ファイルを解凍して、Smarty-2.6.3\libsの中にあるファイルをすべて、C:\php5\libsなどにコピー。このC:\php5\libsへPHPからのPathを通すために、php.ini内に

include_path = "C:\php5\libs"

という行を追加します。これでSmartyのインストールも完了。もし MySQLも利用する場合は、以下の行のコメントアウトをはずしておきましょう。

extension=php_mysql.dll

それではEclipse + PHP5でプログラミング開始！PHPといえども、MVCモデルはおさえておきたい、というところで、こんなページなど参考に。

【連載 】PHPでMVC（STACK*）