過去ログ
RSS配信
■ システムの概要
XOOPS Arenaシステムは、HTML + Javascript + PHP で書かれた 汎用リンク型戦闘システムです。
名前は適当に XOOPS Arenaシステムとか言ってますが、上記の環境があればどんなサイトでも動きます(^^;
サイト内のリンクをクリックをした際に、目的ページやファイルにアクセスする前に、えむびーすとりんがーとの戦闘画面が挿入されます。戦闘に勝利した際には、目的のリンク先に飛びますが、負けた場合には飛べないという単純極まりない仕組みになっています(^^;
使い方はいろいろ考えられます。ファイルのダウンロードとか、ブログなどのコメント投稿ボタン等に仕込んでのスパム対策などなど(^^;
複数のリンク先に対応しているので、汎用に使えるようになっています。
戦闘システムの元ネタは、http://seoi.net/ajax/ （エージャックス ゲーム アーキテクチャ）さんのサイトの「一人プレイの例」のページです。こちらのソースを元に デジタルマインド代表の Stillさんが perlのphp化と機能拡張をしてくれました。
サンプルとしては、こんな感じです。
見た目がチープなのは、私の責任です(涙
[動作サンプル] Simple_html5 テーマのダウンロード
ここのサイトの場合、テーマを切り替える事が多々あるので出来ませんが（HTMLファイルが切り替わってしまう）、テーマが固定であったり 静的なページのサイトなら lightboxやthickboxなどで、同じ画面内に戦闘画面をポップアップさせる事も簡単にできます。
楽しんでいただけたら幸いです(^^;
IE9のベータ版が出たので、IEの「条件付きコメント」について 自分用におさらい(^^;
主な使い方のみ備忘録。
<!--[if IE ]>
<p>ここは IEだけが見えています。</p>
<![endif]-->上記のソースをHTML中に記述すると、IEで閲覧した場合だけ、if文の中身が表示されます。
「<!--[if IE ]>」〜「<![endif]-->」までの領域には、HTML文を複数行記述できます。
■バージョン指定
<!--[if IE 6 ]>
<p>ここは IE6だけが見えています。</p>
<![endif]-->上記のソースは、IE6で閲覧した場合だけ、if文の中身が表示されます。
■複数バージョン指定
<!--[if gte IE 5 ]>
<p>ここは IE5以上だけがで見えています。</p>
<![endif]-->IE5「以上」を対象にする場合は、次のような記述になります。
<!--[if gt IE 5 ]>
<p>ここは IE5より上のバージョンだけが見えています。</p>
<![endif]-->「 gte 」は、「Greater-Than or Equal」の略で「以上」。
「 gt 」は、「Greater-Than」の略で「より上」。
同様にして
「 lte 」は、「Less-Than or Equal」の略で「以下」。
「 lt 」は、「Less-Than」の略で「未満」。
IE9では 普通に HTML5タグが使える環境になってくると思われますので、例えば 「IE9以下なら html5.js を使う」のような利用になってくると予想されます。
<!--[if lt IE 9 ]>
<script src="<{$xoops_imageurl}>html5.js"></script>
<![endif]-->
Bulletinモジュールに[ツイートする]ボタンを設置してみました。
今回は、テンプレートだけいじって置いてみました(^^;
いじるファイルは Bulletinモジュールの item.html。
場所はとりあえず記事のフッタ部分で コメント数を表示する所を置きかえちゃいました(^^;
<a href="http://twitter.com/share" class="twitter-share-button"
data-url="<{$mydirurl}>/index.php?page=article&storyid=<{$story.id}>"
data-text="<{$story.title}>"
data-via="Twitterユーザ名"
data-count="horizontal"
data-lang="ja">Tweet</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript" charset="utf-8"></script>
この固まりを 置きたい位置に挿入してください。
data-viaの部分には Twitterのユーザ名を記入してください。
■ 本体のダウンロード
http://code.google.com/p/sigil/downloads/list
32bit版と64bit版があるので、自分の環境に合った方をげっと。
今日現在の最新版は 6/22に出た ver.0.2.3 です。
■ インストール
ターミナルを開いて、落とした binファイルのあるフォルダへ移動後
chmod +x installer.bin
sudo ./installer.bin
installer.bin という部分は、落としたファイル名に読み替えてください。
installer.bin に実行権限を与えて実行させているという意味です。
デフォルトでは、/opt/sigil に入ります。
残念ながら 日本語の言語ファイルはないみたいです(^^;
インストールが完了すれば、アプリケーションメニューに sigilという項目が追加され、すぐ利用できるようになっています。
さあ、ePubの自作を開始ですね 
追記：
windows版の場合なら、こちらのサイトで日本語言語ファイルを配布してくれてるみたいです(win 32bit用のみ)。
Sigilで ePubを作成する際のお決まりの文字化け回避対策も折込済みのようですので、かなり有難いパッケージですね^^
http://www.b-trust.jp/page_epub.html
linux版には流用できません(涙
iPhone4で使えるはずの960*640のきゅーぶんくん壁紙を描きました(^^;
下の画像は 実物大の画像へのリンクとなってます。
いつもの如く煮るなり焼くなりしてください(^^;
Twitterのキャラクタロゴ風味できゅーぶんくんを描きました(^^;
下の画像は PDF形式のファイルへのリンクとなってます。
いつもの如く煮るなり焼くなりしてください(^^;
Androidのキャラクタロゴ風味できゅーぶんくんを描きました(^^;
下の画像は PDF形式のファイルへのリンクとなってます。
煮るなり焼くなりしてください(^^;
データベースを使わない簡単で非常に使いやすいCMS「gpEasy」の ver.1.6.3 が出ています。
このCMSは、データベースを使わないフラットファイルタイプの CMSですので、インストールが超簡単です。しかも操作というかカスタマイズが分かりやすく、CMSに慣れてない方などにも手軽に試せるいいシステムだと思います。
言葉で書いても伝わりにくいでしょうから、とりあえず XAMPP等にインストールしてみましょう。
■ ダウンロード
Download - gp|Easy CMS
http://www.gpeasy.com/index.php/Download
.tar.gzでも .zipでも好きな方をダウンロードしてください。
解凍するとgpeasyというフォルダができていますので、中身をローカルサーバのドキュメントルートに設置してください。（XAMPPだと xampp\htdocs\）
その後、http://localhost/ にアクセスするとインストール画面が出ます。（フォルダのまま設置した場合は http://localhost/gpeasy/）
するとこんな画面が出ます。
下のフォームに管理者の IDとパスワードを設定して、インストールボタンをクリックします。
インストールはこれだけです(^^;
ぜひ試してみてください。
ちなみに日本語化は、こちらのサイトに進捗率63％くらいの状態の言語ファイルがダウンロードできます。japaneseと書かれた右側の
リンクをクリックしてゲットしてください。
http://ptrans.wikyblog.com/index.php/pt/gpEasy
言語ファイルは gpeasy\include\languages フォルダ下に置いてください。後は、管理画面で言語に日本語を指定してください。付属のWebエディタは最初から日本語ファイルがありますので、同じ管理画面で日本語を指定してください。
■ XAMPPで ZendOptimizer を ONにする方法の備忘録(^^;
XAMPPインストールディレクトリ\apache\bin\php.ini を開いて
;[Zend]
;zend_extension_ts = "C:\xampp\..."
;zend_exteionsion = "C:\xampp\..."
;zend_extension_manager.optimizer_ts = "C:\xampp\..."
;zend_optimizer.enable_loader = 0
;zend_optimizer.optimization_level=15
;zend_optimizer.license_path = "C:\xampp\..."
のコメント部分をはずして、enable_loaderを 0 から 1 に書き換えます。
zend_extension_ts = "C:\xampp\..."
zend_exteionsion = "C:\xampp\..."
zend_extension_manager.optimizer_ts = "C:\xampp\..."
zend_optimizer.enable_loader = 1
zend_optimizer.optimization_level=15
zend_optimizer.license_path = "C:\xampp\..."
(XAMPPのインストールディレクトが仮に c:\xampp の場合です）
apacheを再起動して完了。
コンテンツの量が多くなると、どうしてもページが縦に長くなってしまい、ページのトップへのリンクが欲しくなってしまいますよね(^^;
では テーマに Javascriptを使った簡単なページトップへのリンクを貼ってみましょう。
いろいろな Ajax系のツールでもいろいろな種類の物が紹介されていますが、今回はシンプルで簡単に使える物を利用します。
Smooth Scroll して画面の上に戻るJavaScript
こちらの記事から smooth_scroll_top.js をダウンロードしたら、テーマのディレクトリ内に設置します（theme.htmlと同じ階層）
theme.html を開いて このソースを読み込みます。
<script type="text/javascript" src="<{$xoops_imageurl}>smooth_scroll_top.js"></script>そして、ページのトップへのリンクを貼りたい箇所へリンクタグを記述してやります。
今回は、テーマ内の メインコンテンツの下に常に表示されるように記述する事にします。（Zeroのテーマの場合なら 80行目あたりにです）
<!-- メインコンテンツ -->
<{if $xoops_contents}><div id="ModuleContents"><{$xoops_contents}></div><{/if}>
<p class="b2t"><a href="#" id="Back2Top">TOP</a></p>通常のリンクとなっていますので、気軽に貼り付ける事ができますし、リンク部分の文字列を画像に置き換える事も可能です。
とりあえず b2tというクラス属性を書いていますので、style.css 等に記述を追加すれば、デザインも臨機応変です。
例えば、右寄せにして 余白を 5px くらいとりたいのであれば
.b2t {text-align:right; padding:5px;}こんな感じで書いておけば OKです。
また、文字列じゃなくて画像で置きたい場合は、例えば 適当ですが...
こんな感じの画像を作り（低クオリティですみません(^^;）テーマディレクトリに入れておきます（theme.htmlと同じ階層）
先程と同じ箇所に入れる前提で
<p class="b2t"><a href="#" id="Back2Top" title="ページのトップヘ移動します"> </a></p>style.css 内には
.b2t {clear:both; float:right; padding:5px;}
.b2t a {display:block; width:45px; height:45px; background:url(b2t2.png) no-repeat;}
.b2t a:hover {background:url(b2t1.png) no-repeat;}こんな感じでいけるかなと思います。
今回はテーマに直書きしてますが、各モジュール内のテンプレートに書くのもいいと思います。また、pico等のようにすでに同等機能が内蔵されている場合などは 表示を統一させる等の工夫も必要になりますね
( yoshi - 2011.10.06 13:15 )