- おみくじのメッセージのリストやその他の設定は等はサーバ側にありますので、ソースを見ることで全てが丸裸になってしまうことを避ける事ができます。
- カウンタ等の機能はJavaScriptのみでは実現が難しいと思われます(たぶん)。
- 今はやりの機能(Ajax)を使っているという優越感に浸れます(笑)。
This page is written in Japanese and encoded in UTF-8. Please use appropriate browser (Mozilla Firefox, IE 6.0 or later etc.) to read this page correctly. Sorry for inconvenience.
α版注意) このスクリプトはα版です。α版は最終的な仕様が未決定でドキュメントが未整備であること、バグ修正が完成版に比べ不十分であること等を示します。α版のサポートは一切行いません。また本バージョンの設定ファイルの完成版での互換性も保証できません。従ってある程度スキルのある方、トラブルに対処できる方、チャレンジする気力のある方のみご利用ください。
「楽々おみくじ2.5」は、名前の通り「楽々おみくじ2」の派生版です。突如発作的に(爆)Ajaxを使ってみたくなって改造してみました。まあこの出来ではAjaxにした意味がどの程度あるのかよくわかりませんが(苦笑)。まだまだ作り込みが甘く、「楽々おみくじ2」の本来の仕様も再現し切れていない有様ですが(苦笑)、興味のある方は使ってみてくださって感想をいただけると幸いです。
「楽々おみくじ2.5」の最新版のバージョンは0.50αです（2006年05月22日更新）。
以前のバージョンとは異なり、スクリプト、配布ファイルを含め全てクリエイティブ・コモンズの帰属 2.1 Japanライセンスの下で配布します。将来的には他のスクリプトを含めて全てのドキュメントのライセンスをクリエイティブ・コモンズに移行する予定です。
楽々おみくじ2.5の特徴はなんと言ってもAjaxを利用することで「既にロードされたWebページに動的におみくじをはめ込むことが出来る」事です。現時点での機能はそれ以上でもそれ以下でもありません(苦笑)。見て頂くのが早そうなのでサンプルを示します。下のリンクをクリックしてみてください(キッズgooからごらんになっている場合はうまくうごかないようです。ごめんね)。
ただの空白だったところに突如おみくじが現れましたね!? これをあなたの好きなページの好きな部分にはめ込む事ができる、という訳です(^^;)
基本的には「楽々おみくじ2」と同等の機能を持っていますが全ての機能を代替することは出来ていません。またサーバ側スクリプト(rakuomi25.cgi)単体でHTMLを出力することはできません。サーバ側スクリプトはデータをJSON形式で送り出しているだけです。HTMLに組み上げるのはクライアント側で読み込まれているAjaxエンジン(JavaScript; rakuomi-ajax.js)の仕事になります。以下その他の「楽々おみくじ2」との相違点を挙げます。(完成版では以下の項目は変更される可能性があります。できれば改善したい……)
JavaScript「のみ」で書かれたおみくじスクリプトは各種サイトでたくさん配布されています。それらのスクリプトに対しての「楽々おみくじ2.5」のアドバンテージは、
不利な点もあります。JavaScriptのみで書かれたおみくじと違ってAjax版ではサーバ側スクリプトが必要ですが、大抵のブラウザはAjaxエンジンの呼び出すスクリプトファイルがAjaxエンジンと異なるドメインに置かれているとセキュリティ上の配慮から動作しません。またAjaxの根幹であるXMLHttpRequestは古いブラウザでは対応していません。
このスクリプトは当サイトで配布している他のスクリプトと異なり、利用可能なサーバ環境および対応ブラウザがかなり限定されます。以下の条件をごらんの上利用するか否かを決めてください。
スクリプト本体
[rk25-050alpha.zip(2006/05/22)]
(zip形式で圧縮されています; ファイルのエンコードはUTF-8です)
圧縮ファイルの中身は以下のようになっています。
(時間の都合上ざーっとしか書けていません。ごめんなさい)
public_html┬rakuomi.html
│ ├rakuomi-ajax.js
│ ├rakuomi-ajax.css
｜ └xxx.html ...
├cgi-bin( カウンタ設置の場合は パーミッション: 707 or 777 )
│ ├rakuomi25.cgi( パーミッション：705 or 755 )
│ ├omidef.cgi( パーミッション：705 or 755 )
｜ └xxx.cgi ...
├ ...
{ "Error": "0", "Generator": { "name": "楽々おみくじ2.5 Ver
...
"message": "とんでもないのでなければ(^^;)、なんとかなります。" }, ] } }
これでおみくじが使えるようになりました。が、rakuomi.htmlからおみくじを呼び出しているのでは「楽々おみくじ2」とさして違いがありません。Ajax版のいいところはこのページのように、普通のHTMLのページ途中におみくじを埋め込んで表示できる(しかも非同期的に)所です。次におみくじを入れたいHTMLファイルの加工方法をご紹介します。
rakuomi.htmlの中身を見てみましょう。
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="rakuomi-ajax.js"></script>
<title>ajax版楽々おみくじ</title>
<link rel="stylesheet" type="text/css" href="rakuomi-ajax.css">
</head>
<body>
<h1>楽々おみくじ ajax版</h1>
<div id="omikuji">
<a href="#omikuji" onClick="load_omikuji();">おみくじを引く</a>
</div>
</body>
</html>
この中でタイトル(<title>と<h1>～</h1>)は不要ですが、そのほかの要素は全てきちんとしたおみくじの表示に必要です。まず<script>タグや<link>タグでAjaxエンジンとCSSを呼び出しています。もしこれらのファイルが同一ディレクトリ上にない場合はsrcを適切に設定してください。また<div id="omikuji"></div>は(空要素でもいいので)無いとおみくじがはめ込まれません。「おみくじを引く」の部分は必ずしも<div id="omikuji"></div>の中にある必要もありませんし、リンクである必要もありません。ボタンでも構いませんし、またイベントハンドラもonClickでなくても構いません。何らかのイベントをキーにしてload_omikuji()を呼び出すようにしてもらえれば結構です。
上でも書きましたが、「楽々おみくじ2.5」が出力するHTMLは固定であり、かつAjaxエンジン(JavaScript)によって動的に生成されるためおみくじ部分のページデザインは困難です。そのためsample/rakuomi-sample.htmlを用意しました(当サイト上でも閲覧できます[sample.html])。このファイルのおみくじ部分はAjaxエンジンが出力するHTMLとほぼ同じもので、CSSとしてrakuomi-ajax.cssをリンクしています。このページの出力を参考にrakuomi-ajax.cssを編集すればおみくじも同じデザインで出力されるはずですのでデザインの参考にしてください。
他の設定については、一部制限はあるものの基本的な機能は「楽々おみくじ2」と同じですのでそちらを参照になってカスタマイズしてください。手抜きですいません m(_ _)m。時間が出来たら(8月以降?)ちゃんとしたドキュメントを書きます。
このスクリプトは技術評論社刊「Ajax 実装のための基礎テクニック」に触発されて作りました。もちろんAjaxに触れたのは初めてですし、JavaScriptもほとんど全く使ったことが無かったのでこの本の懇切丁寧な解説がなければ本スクリプトは生まれていないでしょう。著者の方々に深く感謝を申し上げます。
本ページは配布ファイルと同様、クリエイティブ・コモンズの帰属 2.1 Japanライセンスの元で公開しています