Ajax Webアプリケーション奮闘記 〜関西温泉マップ〜

JavaアプリケーションによるXML-RPCを使ったブログ投稿のテストをやっていたら、
エラーが発生。

org.apache.xmlrpc.XmlRpcException: Error:Up to 10 entry a day.

この原因をネットでサーチしてみると下記の記事を発見！

・ブログ管理者用お知らせ XMLRPCでの投稿許容件数変更のお知らせ

スパム対策で、１日の投稿件数を10件に制限しているようです。
日付変わったらまた試してみよ。

[2008/03/13追記]
これって、日付が変われば良いってもんじゃなくて、２４時間経過しなきゃいけないみたい。
だから、実質毎日１０件投稿できるわけではないみたい。

MySqlをコマンドプロンプトから扱う際、
久しく触ってないと、どんなコマンドだったか忘れてしまうので、ここへメモしておきます。

■データベースの一覧を表示
C:\>mysqlshow

■MySQLサーバに接続する
C:\>mysql -u (ユーザ名) -p (データベース名)
これを実行すると、パスワードの入力を要求されます。

■テーブルの一覧を表示する
C:\>mysqlshow データベース名

mysql>SHOW TABLES;

まず、Aptanaの入手ですが、以前書いた記事を参照してください。
この記事に日本語化する方法も記載しています。

・Ajax Webアプリケーション奮闘記 〜関西温泉マップ〜 Aptanaの導入と日本語化

上記の方法でAptanaが導入できたら、
Dojoを扱うプロジェクトを作成します。プロジェクトの作成方法については、以前書いた下記の記事を参考にしてください。なお、下記記事はPrototypeのプロジェクトを導入する例ですが、Prototypeを選択するところ以外は同じ操作ですので、Dojoを選択して作成してください。

・Ajax Webアプリケーション奮闘記 〜関西温泉マップ〜 AptanaでPrototypeを使ってみる

これで、Dojo Toolkitをダウンロードしなくても、Aptanaに入ってますので、
後は、HTMLファイルにロードさせてDojoのコードを記述すれば、Dojoの機能は使えます。

では、早速動くところを確認してみましょう。
プロジェクトビュー上で右クリックして、[新規作成] - [HTMLファイル]
適当なファイル名を入力後、「終了ボタン」を押下します。

作成されたファイルに以下のソースコードをコピーして、実行してみてください。
【“AptanaでDojoを始める”の続きを読む】

WindowsマシンにMySqlを導入してみました。
コマンドプロンプトより、テーブルを作成し、データを投入。
Eclipse上でMySqlにアクセスするJavaアプリを開発し、早速SELECTをかけてみたら、文字化けしました。
その時の状況と解決手順をメモ。
（やり方はいろいろあると思いますが・・）

【環境】
OS：Windows XP
MySql：mysql-essential-4.1.22-win32
Java：1.6.0_03
Eclipse：3.2.0

【Javaコード】

	public void testSelect() {

		try { 
			//ドライバクラスをロード
			Class.forName("org.gjt.mm.mysql.Driver");
			
			 // データベースへ接続
			 String url = "jdbc:mysql:///db?useUnicode=true&characterEncoding=SJIS";
		     Connection con = DriverManager.getConnection(url);
		     //	ステートメントオブジェクトを生成
		      Statement stmt = con.createStatement();
		      String sql = "SELECT * FROM TEST_TABLE";
		      // クエリーを実行して結果セットを取得
		      ResultSet rs = stmt.executeQuery(sql);
		      // 検索された行数分ループ
		      while(rs.next()){
		        // NOを取得
		        int no = rs.getInt("NO");
		        // 言語を取得
		        String test1 = rs.getString("TEST1");
		        // メッセージを取得
		        String test2 = rs.getString("TEST2");
		        // 表示
		        System.out.println(no + " " + test1 + " " + test2);
		      }
		      // データベースから切断
		      stmt.close();
		      con.close();
		}
		catch(Exception e){
			e.printStackTrace();
		}
		
	}

上記JavaコードのcharacterEncodingのところをいろいろ変えてみましたが、変化なし・・。

【DBテーブルのcharcter_setの確認】

mysql> show variables
    -> like 'char%';
+--------------------------+---------------------------------------------------------+
| Variable_name            | Value                                                   |
+--------------------------+---------------------------------------------------------+
| character_set_client     | latin1                                                  |
| character_set_connection | latin1                                                  |
| character_set_database   | sjis                                                    |
| character_set_results    | latin1                                                  |
| character_set_server     | sjis                                                    |
| character_set_system     | utf8                                                    |
| character_sets_dir       | C:\Program Files\MySQL\MySQL Server 4.1\share\charsets/ |
+--------------------------+---------------------------------------------------------+

「latin1」とかなってるのが原因かと・・。
下記コマンドで「sjis」に変更。

mysql> set names sjis

【(変更後)DBテーブルのcharcter_setの確認】

mysql> show variables
    -> like 'char%';
+--------------------------+--------------------------------------------------------------+
| Variable_name            | Value                                                        |
+--------------------------+--------------------------------------------------------------+
| character_set_client     | sjis                                                         |
| character_set_connection | sjis                                                         |
| character_set_database   | sjis                                                         |
| character_set_results    | sjis                                                         |
| character_set_server     | sjis                                                         |
| character_set_system     | utf8                                                         |
| character_sets_dir       | C:＼Program Files＼MySQL＼MySQL Server 4.1＼share＼charsets/ |
+--------------------------+--------------------------------------------------------------+

とりあえず、これで解決！

JavaScriptライブラリをちょっと使ってみるには、HTMLファイルを用意して、ブラウザでロードしてという手順を踏むことになると思います。

このちょっとした面倒を解消するちょっとしたTIPSです。

Firebugのコンソールを使います。
JavaScriptの動作を確認するのに、HTMLファイルは用意しません。

以下、Prototype.jsをちょっと使ってみる場合です。
Prototype.jsをテキストエディタ等で開きます。全選択、全コピーしてから、
Firefoxを起動して、Firebugのコンソールを開きます。
※Firebugのコンソールの使い方は以下を参照。
・Ajax Webアプリケーション奮闘記 〜関西温泉マップ〜 Firebugの導入とコンソールを使ってみる。

Console画面の>>>と表示されている部分に、コピーします。

うまく読み込まれたかどうかは、再度>>>に下記コマンドを入力してバージョンを確認します。

Prototype.Version

この後に続けて試したい処理を実行することができます。

Firebugは”導入”というほど大そうな作業ではないですが、以下の手順で行います。
Firefoxブラウザで以下のリンクにアクセス。インストールボタンを押下するだけ。

・Firebug :: Firefox Add-ons

インストールが完了すると、Firefoxの再起動を要求されるので、再起動をすれば導入済みというわけです。

早速使ってみましょう。
Ctrl + Tabキー等でブランクページを開きます。




ブラウザ右下に緑のチェックがあるのでクリックするとFirebugが起動します。




Console画面の>>>と機銃された部分に、以下を記述して実行すると、下図Firefoxのように実行結果「Hello World!」が表示されます。

document.write("Hello World!")

と、まぁこんな感じでJavaScriptコードがコンソール画面で試せそうですね。

サイトにアクセスしないであるブログの情報を取得したいなら、RSSからリーダーに読み込ませて取得したりさまざまなやり方があると思いますが、今回は、XML-RPCを使ってJavaアプリケーションから取得してみたいと思います。

まぁ、XML-RPCを使う目的は、後々Javaアプリケーションからブログ記事が投稿してみたいからです。

まず環境を整えます。
【環境】
・Windows XP SP 2
・Eclipse SDKバージョン: 3.2.0
・JRE：1.6.0_03
・外部JAR：xmlrpc-2.0.jar

上記外部JARは以下より取得しました。
・ws-xmlrpc - Apache XML-RPC

どれをダウンロードすればよいか分かり辛かったので、分かりやすい2.0をダウンロードしました。（現状最新は３．１）

環境が整ったら、以下のソースを記載します。
※Javaプログラミングはあまり経験が無いので、コードの解説はあまりできませんし、動作確認のみしているので、参考程度にご利用ください。
[XmlRpcTest.java]

import java.util.Iterator;
import java.util.Vector;
import java.util.Hashtable;
import org.apache.xmlrpc.XmlRpc;
import org.apache.xmlrpc.XmlRpcClient;

public class XmlRpcTest {
	private final static int GET_ENTRYCNT_MAX = 10;		// 記事取得件数
	
    private static String getBlogid(XmlRpcClient client, String username, String password)
    throws Exception {
        Vector params = new Vector();
        params.add("appkey");   // appkey は何でもよいらしい
        params.add(username);
        params.add(password);
        
        // ブログリストを取得
        Object  result = client.execute("metaWeblog.getUsersBlogs", params);
        
        if (result instanceof Boolean) {    // ブログリストが取得できなかった場合、false が返る
            throw new Exception("can't get UsersBlogs");
        }
        
        // 1 件目のブログの blogid を返す
        return (String) ((Hashtable) ((Vector) result).get(0)).get("blogid");
    }
    
    public void TestGetRecentPosts(String url, String username, String password) throws Exception {
        
        XmlRpc.setDefaultInputEncoding("UTF-8");
        XmlRpcClient client = new XmlRpcClient(url);
        
        // blogid を取得する。
        String  blogid = getBlogid(client, username, password);
        
        Vector params = new Vector();
        params.add(blogid);
        params.add(username);
        params.add(password);
        params.add(new Integer(GET_ENTRYCNT_MAX));
        
        // 記事を取得する。
        Vector  result = (Vector) client.execute("metaWeblog.getRecentPosts", params);
        
        if (result.size() == 0) {   // 記事が取得できなかった場合
            throw new Exception("can't get RecentPosts");
        }
        
        Iterator    i = result.iterator();
        while (i.hasNext()) {   // 記事の数だけループ
            Hashtable   hash = (Hashtable) i.next();
            System.out.println((String) hash.get("title")); // タイトルを表示
        }
    }
}

XML-RPCへのAPIは下記を参考ください。
・Movable Type 3.3 マニュアル - XML-RPC API

上記クラスの呼び出しサンプルは以下のようになります。

[MainTest.java]

public static void main(String[] args) throws Exception {

	String EndUrl = "http://blog.fc2.com/xmlrpc.php";

	XmlRpcTest xrpct = new XmlRpcTest();	
	xrpct.TestGetRecentPosts(EndUrl, （ユーザID）, （パスワード）);
}

変数EndUrlに設定しているURLはFC2のXML-RPC用URLです。一律このURLに対してのアクセスで各ブログへのアクセスが可能です。ユーザIDはログインユーザIDです。FC2の場合メールアドレスになると思います。パスワードはログイン時のパスワードを設定します。

上記を実行すると、最近投稿した記事10件のタイトルを表示します。

[実行結果]

AptanaでPrototypeを使ってみる
Aptanaの導入と日本語化
Tomcatが起動しない！？
Ajaxポータルを使ってみる　- NetVibes -
開発現場で役立つデザインの鉄則
CVSからJ-Spiderのプロジェクトをチェックアウトしてみる
Webロボットの研究再開。その前に・・
Google Mapsに「地形」レイヤー
Ajax向けライブラリを探すときのサイト
世界的な鳥取県民！！

ちなみに、上記ソースはMovable Typeでも実行可能です。その場合、ブログサービスのURLはmt.cgiと同じ階層にあるxml-rpc.cgiに対して設定すれば良いです。たとえば下記みたいに。
例）
http://（それぞれのURL)/mt/xml-rpc.cgi

（注意）
Movable Typeの場合、パスワードはログインパスワードではなく、Webサービスのパスワード（APIパスワード）になります。
・Movable Type 3.3 マニュアル - プロフィールの編集
Movable Type4の場合はシステムで作成したユーザのプロフィール編集画面で設定可能です。他のユーザにはWebサービスパスワードは表示されないみたいです。

【参考サイト】
・XML-RPC 使ってみた - pie001's room
・MovableType で使える XML-RPC API
・Movable Type 3.3 マニュアル - XML-RPC API

Javaアプリケーションより投稿のテスト

昨日より、テンプレートを変更しておりますが、
理由はソースコードを大きく表示させたいためです。

それに伴い、ソースコードをエディタのようにハイライト表示をさせるため、google-code-prettifyを導入してみました。導入にあたり、JSファイルやCSSファイルをアップロードできる事実を知りFC2ブログにびっくり！
以下に導入手順を記載します。

下記サイトより、prettify_31_Aug_2007.zipをダウンロード。
・google-code-prettify - Google Code

解凍すると下記２ファイルが展開されるので、FC2ブログの「ファイルアップロード」からいずれもアップロードを行います。このアップローダには、絶対画像のみという制限がついていると思ってましたが、JSファイルやCSSのみならずMP3ファイル、xmlファイル等もアップロードできるみたいですね。
・prettify.css
・prettify.js

で、アップロードが完了するとテンプレートを修正します。
まずは、アップロードした上記2ファイルを読み込ませる為、以下のHTMLタグを追加します。

<script src="（アップロード場所）/prettify.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="（アップロード場所）/prettify.css" />

※上記「アップロード場所」は、ファイルをアップロードしたページで「記事を書く」ボタンを押下すると表示されます。

次に下記関数をページ読み込み時にロードできるように追加します。

<body onLoad="prettyPrint();">

あとは、記事を追加するときに、下記タグでソースコードを囲めば・・・
<pre class="prettyprint">〜</pre>

ご覧の通りになります。

import java.io.*;
class test1{
    public static void main(String args[]){
        System.out.println("Hello World!");
    }
}

今まで、livedoor、ameba、jugemといろいろブログサービスを利用してみましたが、こんなにカスタマイズ性に優れているFC2は最強だと思いました。

Prototypeを使うにあたり、テキストエディタでゴリゴリとコードを作成する手順は他のサイトで紹介されているので、ここでは、AptanaというAjax統合開発環境を使ってPrototypeを使ってみることにする。
Aptanaについては、以下を参照。
・Ajax Webアプリケーション奮闘記 〜関西温泉マップ〜 Aptanaの導入と日本語化

１．プロジェクトの作成
Aptanaを起動して、プロジェクトビュー上で右クリックする。
[新規作成] - [プロジェクト]を選択。



- 図1 プロジェクトビューで右クリック -

新規プロジェクトのウィザード選択ダイアログが表示されるので、「Ajax Projects」を選択し、
次へボタンを押下する。



- 図2 新規プロジェクト　ウィザードを選択 -

プロジェクト名入力を促されるので、適当にプロジェクト名を入力し、次へボタンを押下する。



- 図3 プロジェクト名入力 -

次にJavaScriptライブラリーのインポートダイアログが表示されるので、選択肢からPrototype1.5.1.1にチェックを付け終了ボタンを押下する。



- 図4 ライブラリ選択 -

そうすると、自動的にprototype_sample.htmlが表示される。
このように、Prototype.jsをサイトからダウンロードしなくても、デフォルトでAptanaの中に入っている。ただし、バージョン最新ではないけど・・。これで使える環境が整った。実に簡単！



- 図5 prototype_sample.html -



- 図6 Firefox Preview -

次回以降はゴリゴリ使ってみることにする。

以前書いた記事、
・Ajaxアプリケーション向けの統合開発環境Aptana Studio 1.0リリース

で紹介したAptana Studioの導入および日本語化について実際にやってみたのでメモしておきます。ちなみに、AptanaはEclipseベースと書かれていますが、Eclipseのプラグインではなく、単独で実行できるexeファイル形式で配布されています。

【環境】
・Windows XP SP 2
・JRE：1.6.0_03
・Aptana Studio, build： 1.0.2.004822

１．Aptanaを入手します。
　下記サイトより、プロフェッショナルエディションとコミュニティエディションが公開されているので、無償版コミュニティエディションである「Download Community Edition(with optional Pro Plugin Trial)」をクリックします。
　ちなみに、プロ版とコミュニティ版の違いは同ページに掲載されています。
　・Aptana Studio: Compare Versions

※ここではWindows版のzipファイルをダウンロードする手順を書きます。
ダウンロードページでWindows Zip版を選択し、「Download」ボタン押下。

ダウンロードが開始されます。

２．解凍
　ダウンロードが完了したら、適当なフォルダへ解凍します。

３．日本語化
　各ニュースサイトにあるAptanaの紹介文で、「Eclipseベースに作成された・・・」とあるように、構造はEclipseと同じなので、Eclipseと同じような手順で日本語化できます。
　Eclipseのサイトから入手しても構いませんが、筆者が入手場所を忘れたので、下記サイトから入手します。
・Pleiades (Eclipse プラグイン日本語化プラグイン)

上記サイトの Pleiades 本体をダウンロードします。ここでは「安定版」である1.2.0をdダウンロードし、同様にzipファイルを解凍します。
Aptanaを配置しているフォルダに「features」フォルダ「plugins」フォルダがあるので、そこへ解凍できたものを上書き保存してやれば完了です。




[2008/02/16追記]
現在のヴァージョンでは、日本語になってくれないので補足。
上記手順で解答したフォルダ内に「AptanaStudio.ini」というファイルがあるので、
そのファイルの一番最後の行に以下を追加する。

-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar

これでAptanaを再起動させると日本語化されてます。
若干、起動が遅いですが・・。

下記サイト(図1参照。)から、Windowsインストーラのついたtomcatをダウンロードして、
インストールしてみたが、tomcatが起動しない・・・。
・Apache Tomcat - Apache Tomcat 6 Downloads



図1

[コントロールパネル]-[管理ツール]-[サービス]から起動しようとすると、
イベントログにエラーを吐きましたとのこと。イベントログを参照してもよくわからないし、ヘルプの詳細は英語表記・・。
つたない英語力で読んでみても、原因はTomcatにあるみたいだから、このヘルプは深追いしない方がよさそうです。

今度は、一度アンインストール後にzip版をダウンロードして、
コマンドプロンプトより、起動を試みてみました。
起動方法は、
ダウンロードしたフォルダのbinフォルダ配下に存在するstartup.batを実行。

すると、なぜ起動できないか？がコマンドプロンプトに表示。

Neither the JAVA_HOME nor the JRE_HOME environment variable is defined
At least one of these environment variable is needed to run this program

どうやら、環境変数が定義されてないのが原因のようです。
JAVA_HOMEとJRE_HOMEを環境変数に定義してやると、起動できました。

ネタ的には新しくありませんが、
Ajax Webアプリケーションの学習において、はずせないサイトなので、登録してみました。
・Netvibes

簡単に紹介しますと、コンテンツをカスタマイズできる完全Ajaxなポータルサイトです。
以下、機能別に使ってみた感想です。

・ニュースサイトの記事一覧
　これは、RSSリーダーでもまかなえると思います。が、好きなニュースサイトを一度に閲覧できるので、便利だと思います。

・受信メール一覧
　Gmailやhotmailなど、複数のWebメールをサイト内に一覧として表示させることができます。POPサーバを指定すればWebメール以外もいけるようです。

・天気予報
　日本の地名はTokyo以外選択できない？少なくとも僕の住む場所のピンポイント天気予報は表示されないので、役に立たない。

・Web検索
　若干しょぼい・・。検索結果のリンクしか表示されない。

・地図検索
　半端もん。Google Mapsを使う感覚で使えない。住所を検索するには、良いかもしれないが、地図サイトを表示させた方がはるかに良い。

・フィードの追加
　普通のRSSリーダと同じ。





ユーザ登録することで、外出先でもこのサイトへログインすれば、自分用にカスタマイズした状態で閲覧可能です。
最も便利なのは、メールの一覧だと思います。ニュース記事一覧は、RSSリーダーを使えば代用できますが、異なる形態のメール一覧をひとつのサイトで閲覧できるのは、このサイトだけではないでしょうか？。

Webnoteやタスクリストは、まだ活用していませんが、
社内のグループウェアでは社外で閲覧できない為、（出来るグループウェアもあると思いますが・・）このサイトに登録しておけば、社内でも社外でも、閲覧可能です。ただし、インターネット上であることに注意は必要でしょうが・・・。

AjaxによるWebアプリケーションの進歩はめざましい限りです。
僕も早く温泉マップをフルAjax化したいものです。

このブログでAjaxを取り上げている以上、Webデザイン、つまりUIにあたる部分は、
大事なので個人的にメモしておきます。

・日経SYSTEMS

上記雑誌は定期購読しているのだが、
2008年1月号に、「開発現場で役立つデザインの鉄則」という特集が組まれていました。
今すぐ、Webをデザインすることはありませんが、きたるべき関西温泉マップVer3作成時に参考にしたいと思います。
※ちなみに、現在はVer2です。

前回の記事で、「次回は、EclipseでCVSからチェックアウトしてみます。」と豪語してましたが、危うくあきらめるところでした・・。
というのも、

公式サイトや公式マニュアルに載っているリポジトリのホスト名がウソ

だったからです。
一応、J-Spiderプロジェクトが所属する団体が掲載しているCVSブラウザのパスから推測してやっとチェックアウトまでこじつけました・・。

【所属団体のページ】
・SourceForge.net: JSpider

まぁ、公式サイトの最終アップデートが2003年ってところで、怪しいことに気づかないといけないですね。
【公式サイト】
・JSpider - the Open Source Web Robot


下記に2007/12/23時点での正しいCVSログイン情報を掲載しておきます。
【CVSログイン情報】
接続タイプ：pserver
ユーザ：anonymous
パスワード：(無し)
ホスト名：j-spider.cvs.sourceforge.net
リポジトリパス：/cvsroot/j-spider


以下、EclipseでのCVSチェックアウトまで手順を掲載します。
※過去EclipseであまりCVSを使ったことが無いので、掲載している情報が正しいとは限りません。

１．プロジェクトの作成
パッケージエクスプローラ上で右クリックし、[新規作成] - [プロジェクト]を選択します。すると、図1のダイアログが表示されるので、図の通りCVSからのプロジェクトを選択し、次へをクリックします。



-図1-

２．リポジトリー・ロケーション情報
図2の「CVSからのチェックアウト」ダイアログが表示されるので、上記の【CVSログイン情報】の内容を入力し、「次へ」をクリックします。



-図2-

次にCVSからチェックアウトするモジュールの選択を要求されます。図3参照。
とりあえず全部選択し、次へをクリックします。



-図3-

図4に関してはお好みで・・・終了ボタンを押すと、チェックアウトが開始されます。図5参照。



-図4-



-図5-

しばらく待って・・・
チェックアウトが完了すると、チェックアウトした内容がパッケージエクスプローラに表示されます。図6参照。



-図6-

次回は実行して、ソースを追ってみたいと思います。


【参考サイト】
・Eclipse 3.2 で CVS を利用する（チェックアウト）