Ajax物語 asticyanとは何か インストール アンインストール 使い方 デモサイト テクニカルノート 制限事項 ライセンスについて おわりに |
テクニカルノートasticyan は、Ajax (エイジャックス:Asynchronous JavaScript + XML) と呼ばれるソフトです。とい うより、Ajax の習作として作りました。AjaX ソフトはブラウザ対策でかなりめん どうなソフトになるのですが、 prototype.js(説明は prototype.js の開発者向けメモ)、 script.aculo.us を利用することで、非 常に簡単に作ることができました。ソースファイルを見れば、(セキュリティーや エラー処理を省いているので)がっくりするほど簡単な構成です。とはいえ、 JavaScript と PHP , HTML , CSS で書式が、特にコメントや文字列の連結で、それ ぞれ微妙に異なることで頭が混乱しました...変数を宣言せずに使わなくてもエ ラーが出ないとか、勝手に変数の型を変えてくれるようで、実は思っている型と違 ものになっているとか...数字にしたと思ったのに文字のままでエラーが出たりとか、 ブラウザのキャッシュが原因で、変更が反映されなかったりとか..(;_;)ソースコードについてソースコードの漢字コードはUTF-8です。また、改行文字はLFです。ソース を見る場合は注意してください。ソースファイルには、適宜コメントが入れてあり ます。技巧的なことは全くしていませんので、少し見れば何をしているかがわかる と思います。また、関数の最初に、例えば次のようにfunction LabelMenu(pElement) //付箋のメニューをクリックした //引数 pElement:メニューオブジェクト { var aFlag; gID = pElement.parentNode.id; //現在の付箋のIDを関数や引数の説明がしてあります。 変数の接頭辞規則は(病的かもしれませんが)次のようなものです。 PHP/JS/C/C++言語 定数 c define定義 k グローバル変数 g 引数 p ローカル変数 a the (あまりこだわっていない) クラスメンバー変数 m クラス U (C++BuilderのクラスがTで始まるから) HTML/CSS クラス c ID i name n参考にしてください。 インストールされるファイルなどasticyan10.zip を伸張すると次のようなディレクトリやファイルができます。ソフ トの改良等の参考にしてください。asticyan -+-- index.php : 実行ファイル | about.txt :「このサイトについて」のメニューで表示される | configure.php : 初期設定プログラム 使用後削除してください | readme.htm : man/index.htmlへのリダイレクト 削除してください +-- css : スタイルシートのあるディレクトリ | | label.css : 付箋のスタイルシート | | unit01.css : 全体のスタイルシート | +- labels : 付箋用スタイルシートの原型があるディレクトリ +-- js : JavaScript部のプログラムがあるディレクトリ | config.js : JavaScriptのグローバル変数定義 | unit01.js : 付箋に関する処理 | unit02.js : ページに関する処理 | unit03.js : その他の処理 +-- lib : JavaScriptライブラリがあるディレクトリ | 使用しているライブラリは prototype.js と scriptaculous +-- man : このドキュメントがあるディレクトリ 削除してください +-- pages : 付箋のデータが格納されるディレクトリ | | 1階層のみで再帰検索はしていません | | .htaccess : サイトを制限する設定ファイル。 | | ファイル名の一覧が表示されないようにしています。 | | 動作に悪影響がある場合は削除してください。 | +- FrontPage : 最初に表示されるディレクトリ 削除不可 | +- Color+Sample : 色見本のページ 削除可 +-- php : PHP部のプログラムがあるディレクトリ conf.inc : PHPのグローバル変数定義 configure.inc : configure.phpが使うファイル unit00.inc : ラベルクラス unit01.inc : 付箋に関する処理 unit02.inc : ページに関する処理 unit10.inc : HTMLの上部(このまま出力される) unit11.inc : asticyanの共通部分(このまま出力される) unit12.inc : HTMLの下部(このまま出力される)FrontPage は最初に表示されるディレクトリです。プログラム的には、削除しても かまいません。 日本語のページ名についてasticyan は pages ディレクトリの直下にディレ クトリを作ってデータを保存します。このディレクトリを、ソフトウエアでは「ペー ジ」と行っています。ここで、ページ名に日本語やスペースの入った文字列を使い たくなります。漢字やスペースをディレクトリの名前として使うことができるOS、 サーバーソフトならばこのことはさほどの問題ではないかもしれません。しかし、 漢字コードはいろいろあって、OSやサーバーでの扱いがそれぞれに違います。結 局 wema を参考に、データディレクトリの名前として、UTF-8のコードを URL エンコードした文字列を使うことにしました。ターミナルでディレクトリを見ると 変な文字列が並んでいますが、気にしないでください。また、ターミナルは通常 URL エンコードをサポートしていませんから、変な文字列を漢字で表示しようとする試 みは無駄です。データについてasticyan の付箋データは、pages ディレクトリ の直下のディレクトリに保存されます。データは、属性と本体ファイルに分けられ ています。属性ファイルの末尾は .att、本体ファイルの末尾は .txt です。ファイ ル名は、データが作られた日時の前に i を付けたものになります。例えば、 属性ファイル i20060515194959.att 本体ファイル i20060515194959.txt のようです。ちなみに上の例では 2006/05/15 19:49:59に作られたデータです。 属性ファイルは CSV ファイルです。内容は、順に 付箋ID X座標 Y座標 文字色の番号 境界色の番号 背景色の番号 Zオーダー ラベルの大きさ(0:auto 1:横幅制限 2:縮小表示) 編集可能フラグ(1:編集可能 0:編集不可) 編集可能にするキーワード デフォルトはasticyanです。例えば、i20060515194959.attでは i20060515194959,3,56,11,9,0,103,1,0,789となっています。 末尾に改行文字はありません 。改 行文字を付けると動作がおかしくなると思います。 本体ファイルは、単なるテキストファイルです。編集ウインドウで入力されたそのままです。 ですが、さすがに改行文字だけは、利便性を考えて、<br />に変えました。例えば、 i20060515194959.txtでは、 アイデアプロセッサ asticyan<br /> ...といっても、単なる付箋ソフトですが。のようになっています。漢字コードはUTF-8で、入力されたデータの検査、つ まり、タグの検査はしていません。 制限事項 にあるよう に、これは非常に危険なことです。またマクロプログラムや、 多くのWiki にあるように、リンクを自動的に作る機能はありません。実力のある人は改良して ください。 |