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.

おみくじParadise!!
おみくじ工房
Quick Index ホーム > おみくじ工房 > 楽々おみくじ2.5
水平線

楽々おみくじ2.5へようこそ

α版注意) このスクリプトはα版です。α版は最終的な仕様が未決定でドキュメントが未整備であること、バグ修正が完成版に比べ不十分であること等を示します。α版のサポートは一切行いません。また本バージョンの設定ファイルの完成版での互換性も保証できません。従ってある程度スキルのある方、トラブルに対処できる方、チャレンジする気力のある方のみご利用ください。

「楽々おみくじ2.5」は、名前の通り「楽々おみくじ2」の派生版です。突如発作的に(爆)Ajaxを使ってみたくなって改造してみました。まあこの出来ではAjaxにした意味がどの程度あるのかよくわかりませんが(苦笑)。まだまだ作り込みが甘く、「楽々おみくじ2」の本来の仕様も再現し切れていない有様ですが(苦笑)、興味のある方は使ってみてくださって感想をいただけると幸いです。


更新履歴・その他

「楽々おみくじ2.5」の最新版のバージョンは0.50αです(2006年05月22日更新)。

ライセンス

以前のバージョンとは異なり、スクリプト、配布ファイルを含め全てクリエイティブ・コモンズの帰属 2.1 Japanライセンスの下で配布します。将来的には他のスクリプトを含めて全てのドキュメントのライセンスをクリエイティブ・コモンズに移行する予定です。

楽々おみくじ2.5の特徴

楽々おみくじ2.5の特徴はなんと言ってもAjaxを利用することで「既にロードされたWebページに動的におみくじをはめ込むことが出来る」事です。現時点での機能はそれ以上でもそれ以下でもありません(苦笑)。見て頂くのが早そうなのでサンプルを示します。下のリンクをクリックしてみてください(キッズgooからごらんになっている場合はうまくうごかないようです。ごめんね)

おみくじをひく!!

ただの空白だったところに突如おみくじが現れましたね!? これをあなたの好きなページの好きな部分にはめ込む事ができる、という訳です(^^;)

基本的には「楽々おみくじ2」と同等の機能を持っていますが全ての機能を代替することは出来ていません。またサーバ側スクリプト(rakuomi25.cgi)単体でHTMLを出力することはできません。サーバ側スクリプトはデータをJSON形式で送り出しているだけです。HTMLに組み上げるのはクライアント側で読み込まれているAjaxエンジン(JavaScript; rakuomi-ajax.js)の仕事になります。以下その他の「楽々おみくじ2」との相違点を挙げます。(完成版では以下の項目は変更される可能性があります。できれば改善したい……)

  1. ユーザがブラウザのJavaScriptをオフにしていればこのおみくじは機能しません。
  2. 文字化けの危険性がありますのでスクリプト、JavaScriptファイル、HTMLファイル等はUTF-8で扱う必要があります
  3. 現在の所「楽々おみくじ2」の設定ファイルをそのまま使うことはできません。ただし異なるところはそう多くありませんので多少解析して頂ければ「2.5」で使えるバージョンに変更できると思われます(無責任ですいません m(_ _)m)。
  4. 「楽々おみくじ2」で可能な「画像カウンタ」は「2.5」では不可能です。
  5. 気の合う星座の表示について、「楽々おみくじ2」では表示確率の変動が可能ですが、「2.5」では不可能です。
  6. 出力されるHTMLは固定です。これは作者(うんにゃ)の技量、時間その他の制約によるものです(苦笑)。その代わりほぼ全てのタグにidおよびclassの属性を与えてCSSによる制御を可能にしてあります。

JavaScript「のみ」で書かれたおみくじスクリプトは各種サイトでたくさん配布されています。それらのスクリプトに対しての「楽々おみくじ2.5」のアドバンテージは、

不利な点もあります。JavaScriptのみで書かれたおみくじと違ってAjax版ではサーバ側スクリプトが必要ですが、大抵のブラウザはAjaxエンジンの呼び出すスクリプトファイルがAjaxエンジンと異なるドメインに置かれているとセキュリティ上の配慮から動作しません。またAjaxの根幹であるXMLHttpRequestは古いブラウザでは対応していません。

対応サーバ環境とブラウザ

このスクリプトは当サイトで配布している他のスクリプトと異なり、利用可能なサーバ環境および対応ブラウザがかなり限定されます。以下の条件をごらんの上利用するか否かを決めてください。

スクリプトダウンロード

スクリプト本体 [rk25-050alpha.zip(2006/05/22)]
(zip形式で圧縮されています; ファイルのエンコードはUTF-8です) 

圧縮ファイルの中身は以下のようになっています。

・cgi-bin/rakuomi25.cgi
(CGIスクリプト; Perlで書かれています。Ajaxエンジンにデータを出力します)
・cgi-bin/omidef.cgi
(設定ファイルです。rakuomi25.cgiが利用します)
・rakuomi-ajax.js
(JavaScript; Ajaxエンジンです。CGIスクリプトからデータを読み込んでHTMLに加工します)
・rakuomi-ajax.css
(Ajaxエンジンが出力したHTMLを整形するCSSファイルです)
・rakuomi.html
(設置用HTMLを含むサンプルファイルです。)
・sample/rakuomi-sample.html
(Ajaxエンジンが出力するHTMLのサンプルです。デザイン用です)

設置方法

(時間の都合上ざーっとしか書けていません。ごめんなさい)

  1. 圧縮ファイルを解凍してファイルを確かめてください(上にリストがあります)。
  2. 上のリストの上二つのファイル(CGIスクリプトと設定ファイル)を開いて一番上の行を適切に直してください(普通 #!/usr/bin/perl か #!/usr/local/bin/perl)。
  3. sampleフォルダ以外をアスキーモード、文字コード変換無しでサーバにアップロードし、パーミッションを設定します。DocumentRoot直下にアップロードしたとすると以下のような構成になっているはずです。
       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 ...
               ├ ...
    
  4. Webブラウザでrakuomi25.cgi(URLは例えばhttp://hogehoge.net/cgi-bin/rakuomi25.cgi)を開きます。うまく行っていれば下のような文字列が出力されるはずです。
    { "Error": "0", "Generator": { "name": "楽々おみくじ2.5 Ver 
    ...
    "message": "とんでもないのでなければ(^^;)、なんとかなります。" }, ] } }
    
  5. Webブラウザでrakuomi.htmlを開きます。「おみくじを引く」をクリックしておみくじが現れれば成功です!!

任意のHTMLファイルでおみくじを表示

これでおみくじが使えるようになりました。が、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もほとんど全く使ったことが無かったのでこの本の懇切丁寧な解説がなければ本スクリプトは生まれていないでしょう。著者の方々に深く感謝を申し上げます。

水平線

Creative Commons License 本ページは配布ファイルと同様、クリエイティブ・コモンズの帰属 2.1 Japanライセンスの元で公開しています


Copyright © 1997-2006 うんにゃ@おみパラねっと