<   2008年 07月 ( 5 )   > この月の画像一覧

今日は Timeline をやっています。
ホントは仕事です。
いやホントに。

Timeline は MIT で作っている、簡単に年表が作れる Ajax ツール
(webアプリでもないし、なんて言うんだろう、こういうの)。
このリンク先を見ていただくと分かるのですが、
SIMILE | Timeline
年表がぐりぐりとマウスで動かせます。
イベントをマウスでクリックすると、ポップアップ風に窓が開いて詳細表示。
んまぁなんか可愛いわ。

使い方はこちら。
超簡単でし。
SIMILE | Timeline | Documentation | How to Create Timelines
イベントのデータたちは XML を作って食わせればおk。
固定ファイルじゃなくても、ダイナミックに XML を作成して、
毎回描画させることができます。

残念ながら、javascript のソースをもりもり使うので、
エキブロには入れられません。
面白いのにー。

@nifty では、Ajax じゃなくて flash ですが、
似たようなことをやっています。
@nifty TimeLine - ソーシャル・タイムライン
で、みんなで年表作り。
軸は自由に作れるので、自分のダイエット記録をつけている人もいるみたい。
公表したほうが励みになるのかも。
一番人気は 日本史・合戦タイムライン(笑)
戦国好きな人っていますよねー。
アツい年表ができています。
下の広い年表を見ると、
鎌倉時代、戦国時代と幕末に合戦が集中しているのが分かりますね。
いやそれとも、その時代が好きな人が、集中的に登録したんでしょうか(笑)

昭和のニュースも楽しいですが、
1965 年までしかありません。
うーん、昭和 64 年までやって欲しいんだけどな。

えー、で、Timeline に話を戻して、使う上での Tips 。

ソース


ソース一式はこちらから。
Revision 1431: /timeline
でも、これ以外に、SIMILE Ajax パッケージが必要なので、それも落とす。
Revision 1431: /ajax

ソースの配置


上記2つ(timeline、ajax)をどう配置するのが正しいのか良く分からない。
timeline は主になるパッケージだから良いとして、問題は ajax のほうですよ。
でも、ソース中(timeline実行前)にこう書いておけば、どこにおいてもおk。
<script language="javascript">
var SimileAjax_urlPrefix = "http://foo.bar.co.jp/ajax/src/webapp/api/";
</script>

ディレクトリ最後のスラッシュは必要。
これが、SimileAjax.urlPrefix という変数に設定されて、
SilimeAjax.urlPrefix + "scripts/json.js"
なんて感じに実行されるようなので。

ちなみにソース中には
 http://127.0.0.1:9999/ajax/api/simile-ajax-api.js
こんな風に書いてある箇所があるので、
まぁこんな風に配置することを意図しているのでしょうな。

入力 XML ファイル


XML は UTF-8 で書きます。
日本語も問題なくおk。
ポップアップに出す中身は HTML エンティティで書くこと。
タグを書くときは、&lt;、&gt; のように書くのね。

年表のスケール(timezone が正の値のとき正しく動かない件)


初期表示時に中心に来る日時を
Timeline.createBandInfo の date で設定するのだが、
例では GMT になっている。
JST と書いても、どうやら華麗にスルーされるぽい。
そんなときは、こんな風に timezone を設定。
 bandInfos = [
    Timeline.createBandInfo({
        timeZone:  9,
        ...
    }),
    ...

ところが、これだと以下のページにあるように、
SimileのTimelineが、タイムゾーンが正の場合に正しく動作しない。 - こせきの技術日記
12月 が2回表示されるみたいなバグがある。
私の場合は 10月が2回並んだ後に12月が2回並んでた(笑)
ぱっと見わからないのだけど、
右に左にスクロールすると発生する。
特に年をまたぐ数ヶ月が危険。
12月、1月と31日が2ヶ月続いたり、日数の少ない2月があったりするせいかと。

1日試行錯誤して、原因を探ってみたのだけど、なかなか根が深い。
もういい! JST だけど GMT のつもりで動いてくれ!と思ったのだが、
設定上は何も指定していないのに、勝手に時刻が+9になる。
apache サーバの動いているロケールなども関係あるかもしれない。
内部処理で、日時の文字列を getUTCDate() することが多いのだが、
勝手にロケールを見て+9しちゃうもんだから、
特にロケール設定しなくても、時刻がずれるのだろう。
うーん。

しかもポップアップの timezone もずれとるがな。
参考:[#TIMELINE-70] time zone in event popup bubble is incorrect - Issue Tracker

とりあえず見た目を揃えたい


とりあえず、見た目の整合性が取れているように設定するにはこんな感じ。
・ apache はあきらめて日本語ロケール(JST)で動かす
・ createBandInfo では timeZone は設定しない
・ createBandInfo の時刻は以下のように設定。
    date: "Jul 30 2008 00:00:00 GMT",
  GMT をつけないと、29日15時 が中心に表示される。
・ timeline/src/webapp/api/scripts/sources.js 中
  Timeline.DefaultEventSource.Event.prototype 中の fillTime で、
  appendChild している文字列から、全部 /GMT/ を削除する処理を追加
  (上記「参考」への対処)
・データの XML の event の日時は、例えば以下のように書く
    <event start="Jul 30 2008 00:00:00 GMT" title="タイトル">
  本当は JST の日時なのだが、GMT とつけることで、30日0時 の位置に表示。
  ポップアップの日時も、30日0時 になる。
  これを GMT+0900 なんて書いたり、何もつけなかったりすると、
  29日15時 の位置に表示され、
  ポップアップの日時も 29日15時にされてしまう。
※apache を日本語ロケールで動かしていない人は、また違うと思う。

まだ作業中なんで、またなにかあったら追記する。
[PR]
by xiaoxia | 2008-07-29 12:52 | ソフトウェア | Comments(0)
画像などのバイナリデータや日本語の文字列をhttpで送るときに、
base64 にする話。
私は UTF-8 の文字列をXML の中に入れて送りたかったんだけど、
それで base64 したかったのね。

いろいろ実装している人がいるけど、
最近の Firefox なら btoa をそのまま使えばOK。
最初こんな風にしてみた。
window.btoa("あ");

でもこれだとこんな例外が発生する。
uncaught exception:
[Exception... "String contains an invalid character"
code: "5" nsresult: "0x80530005 (NS_ERROR_DOM_INVALID_CHARACTER_ERR)"
location: "javascript:%20window.btoa("%E3%81%82");
Line: 1"]


なんでやねん?
と思ったら、ここに理由が書いてあった。
さすが dankogai。
javascript - Yet Another Base64 transcoder
(404 Blog Not Found)
引数に/[^\x00-\xFF]/な文字が入っているとUncaught Exceptionになる


へぇ。
そこで、こうしてみたら成功。
window.btoa("¥xE3¥x81¥x82");
→ 44GC


そうだったのか。
じゃ btoa は、
UTF-8 の文字を「1バイトずつ」じゃなくて「1文字ずつ」読んでるんだな。
気が利かないのう…。

なわけで、困ったら、上記 dankogai 謹製の utob をかませるとか、
同じく謹製の Base64.encode(str) ってやるといいよ!
[PR]
by xiaoxia | 2008-07-10 12:23 | プログラム言語 | Comments(0)
文字コード変換はこんな風にやる
※間違えていたので修正。UTF-16に変換されるらしい。

// 文字コード変換器作成
var sent = document.body.innerHTML;
// 以下1行にまとめて書けるけど、エラー箇所を特定するため1行ずつ記述してみた
const ucID = '@mozilla.org/intl/scriptableunicodeconverter';
const ucIF = Components.interfaces.nsIScriptableUnicodeConverter;
const uc1 = Components.classes[ucID];
const uc = uc1.getService(ucIF);
// 変換
var sent2 = sent;
var now_encoding = document.characterSet;// 今の文字コード
if (now_encoding != 'UTF-16') { // UTF-16じゃないならUTF-16に変換
 sent2 = uc.ConvertFromUnicode(now_encoding);
}
// 表示させてみる
alert(sent2);

これを実行して、
Permission denied to get property XPCComponents.classes
というエラーが出る場合は、ソースの先頭に以下の1行を入れる。
ローカルのファイルなどで試している場合に出るような気がする。
netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');

[PR]
by xiaoxia | 2008-07-09 22:01 | プログラム言語 | Comments(0)
エラーメッセージでググっても出てこなかったので、
メッセージと解決法を書いておくよ。


デザイナ ファイルの生成に失敗しました: Inherits 属性が見つかりません。
ファイルの先頭に以下を入れる。
<%@ Page Language="C#" Inherits="page派生クラス" Src="aspxファイル名.cs" %>
詳細は以下を参照。
@IT:連載:プログラミングASP.NET 第4回 ASP.NETページのフレームワーク(前編) コードビハインドとPageクラス
Inherits には、page の派生クラス名を記述。
UnnamedPage でもよいみたい。

検証 (XHTML 1.0 Transitional): 要素 'body' に対しては、開始タグと終了グの間でテキストを使用できません。
<body>と</body>の間にある文字列を、なにがしかのタグで囲む。
例えば、こんな感じに。
<body>あいうえお</body>

<body><div>あいうえお</div></body>

(デバッグ開始実行後に)終了していない文字列型の定数です。
文字列を囲むクオート、ダブルクオートの対応を確認。
読み込んでいる JavaScript や CSS ファイルの文字コードが UTF-8 になっていることを確認。
(UTF-8N ではないので注意)

[PR]
by xiaoxia | 2008-07-07 12:21 | プログラム言語 | Comments(0)

reddit インストール

今日の作業は reddit のインストール。

reddit とは、みんなでお互いに紹介したいページを投稿する web アプリ。
http://ja.reddit.com

Tumblr に似ているような気もするけれど、
Tumblr と違うのは、コメント(投票)できることと、
それによって順位付けされること。
Tumblr にふぁぼったーを組み合わせた感じ?
誰かを follow する仕組みもあるので、twitter に似たところも。
自分だけの非公開 reddit も作れるっぽい。

そしてローカルに入れて、グループ内の情報共有ツールにもできます。
なわけで構築。
ソースの入手はここから。
http://code.reddit.com/
インストール方法は以下のページ。
Development → Reddit Start to Finish

システムに必要なものが一覧になっているけれど、
実はこれでは全然足りない。
Python で動くのだが、シンプルな構成で Python がインストールされていると、
あれもないこれもないと、自動的にもりもりとインストールされる。
私が構築した環境はポリシーの厳しい多段串になっていて、
自動ではダウンロードされない環境だった。
そこで手動で落としてきてインストールしなくちゃならないのだが、
CentOS 5.2 64bit だったので、
rpm が用意されていなかったり、バージョンが古かったりで、
それぞれのサイトからソースを落としてきてインストール。
それだけで 20-30 個くらい入れたような気が…。
もう死ぬかと思った<大げさ
上記のインストール方法を見て「なんだ簡単じゃん」と見くびると
大変な目に遭う(笑)


*今日の tips:その1:reddit の環境設定ファイル example.ini
・プロクシは IP:PORT と書く
・timezone を JST にすると動かない
・domain は localhost じゃなくて、ちゃんと ***.co.jp とかにする

*今日の tips:その2:起動
起動には
  > paster serve --reload example.ini port=8080
と書いてあるけど、これだと使用中のログが画面に流れてくる。
バックグラウンドで実行して、そのターミナルを終了すると、
reddit にアクセスしたときに Internal Server Error が発生する。
というわけで、
こんな感じに、デーモンモードで起動すると大丈夫っぽい。
  > paster serve --reload --daemon example.ini port=8080
[PR]
by xiaoxia | 2008-07-03 22:35 | ソフトウェア | Comments(0)

ダメ女プログラマ&主婦&腐女子&バイオリン弾き


by 小霞