OCEAN-NET OFFICIAL SITE http://hello.oceannet.jp/ 一緒に遊びましょっ!! Thu, 17 May 2012 12:38:01 +0900 http://backend.userland.com/rss/ XOOPS News matchan@future.ocn.ne.jp matchan@future.ocn.ne.jp ja OCEAN-NET OFFICIAL SITE http://hello.oceannet.jp/images/logo.gif http://hello.oceannet.jp/ 144 80 XOOPS Arena システム開発ｗ http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=172 ■ システムの概要 XOOPS Arenaシステムは、HTML + Javascript + PHP で書かれた 汎用リンク型戦闘システムです。 名前は適当に XOOPS Arenaシステムとか言ってますが、上記の環境があればどんなサイトでも動きます(^^; サイト内のリンクをクリックをした際に、目的ページやファイルにアクセスする前に、えむびーすとりんがーとの戦闘画面が挿入されます。戦闘に勝利した際には、目的のリンク先に飛びますが、負けた場合には飛べないという単純極まりない仕組みになっています(^^; 使い方はいろいろ考えられます。ファイルのダウンロードとか、ブログなどのコメント投稿ボタン等に仕込んでのスパム対策などなど(^^; 複数のリンク先に対応しているので、汎用に使えるようになっています。 戦闘システムの元ネタは、http://seoi.net/ajax/ （エージャックス ゲーム アーキテクチャ）さんのサイトの「一人プレイの例」のページです。こちらのソースを元に デジタルマインド代表の Stillさんが perlのphp化と機能拡張をしてくれました。 サンプルとしては、こんな感じです。 見た目がチープなのは、私の責任です(涙 [動作サンプル] Simple_html5 テーマのダウンロード ここのサイトの場合、テーマを切り替える事が多々あるので出来ませんが（HTMLファイルが切り替わってしまう）、テーマが固定であったり 静的なページのサイトなら lightboxやthickboxなどで、同じ画面内に戦闘画面をポップアップさせる事も簡単にできます。 楽しんでいただけたら幸いです(^^; Thu, 23 Sep 2010 17:18:51 +0900 http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=172 徒然なるまま XOOPS Arenaシステムは、HTML + Javascript + PHP で書かれた 汎用リンク型戦闘システムです。
名前は適当に XOOPS Arenaシステムとか言ってますが、上記の環境があればどんなサイトでも動きます(^^;

サイト内のリンクをクリックをした際に、目的ページやファイルにアクセスする前に、えむびーすとりんがーとの戦闘画面が挿入されます。戦闘に勝利した際には、目的のリンク先に飛びますが、負けた場合には飛べないという単純極まりない仕組みになっています(^^;

使い方はいろいろ考えられます。ファイルのダウンロードとか、ブログなどのコメント投稿ボタン等に仕込んでのスパム対策などなど(^^;
複数のリンク先に対応しているので、汎用に使えるようになっています。

戦闘システムの元ネタは、http://seoi.net/ajax/ （エージャックス ゲーム アーキテクチャ）さんのサイトの「一人プレイの例」のページです。こちらのソースを元に デジタルマインド代表の Stillさんが perlのphp化と機能拡張をしてくれました。

サンプルとしては、こんな感じです。
見た目がチープなのは、私の責任です(涙

[動作サンプル] Simple_html5 テーマのダウンロード

ここのサイトの場合、テーマを切り替える事が多々あるので出来ませんが（HTMLファイルが切り替わってしまう）、テーマが固定であったり 静的なページのサイトなら lightboxやthickboxなどで、同じ画面内に戦闘画面をポップアップさせる事も簡単にできます。

楽しんでいただけたら幸いです(^^;]]> IEの条件付きコメントおさらい(^^; http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=171 IE9のベータ版が出たので、IEの「条件付きコメント」について 自分用におさらい(^^; 主な使い方のみ備忘録。 [code][/code] 上記のソースをHTML中に記述すると、IEで閲覧した場合だけ、if文の中身が表示されます。 「」までの領域には、HTML文を複数行記述できます。 ■バージョン指定 [code][/code] 上記のソースは、IE6で閲覧した場合だけ、if文の中身が表示されます。 ■複数バージョン指定 [code][/code] IE5「以上」を対象にする場合は、次のような記述になります。 [code][/code] 「 gte 」は、「Greater-Than or Equal」の略で「以上」。 「 gt 」は、「Greater-Than」の略で「より上」。 同様にして 「 lte 」は、「Less-Than or Equal」の略で「以下」。 「 lt 」は、「Less-Than」の略で「未満」。 IE9では 普通に HTML5タグが使える環境になってくると思われますので、例えば 「IE9以下なら html5.js を使う」のような利用になってくると予想されます。 [code][/code] Sat, 18 Sep 2010 16:08:06 +0900 http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=171 徒然なるまま 主な使い方のみ備忘録。
<!--[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 モジュールにツィートボタン http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=170 Bulletinモジュールに[ツイートする]ボタンを設置してみました。 今回は、テンプレートだけいじって置いてみました(^^; いじるファイルは Bulletinモジュールの item.html。 場所はとりあえず記事のフッタ部分で コメント数を表示する所を置きかえちゃいました(^^; [code]Tweet [/code] この固まりを 置きたい位置に挿入してください。 data-viaの部分には Twitterのユーザ名を記入してください。 Fri, 10 Sep 2010 16:53:49 +0900 http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=170 いじり記録 今回は、テンプレートだけいじって置いてみました(^^;

いじるファイルは 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のユーザ名を記入してください。]]> Sigil を ubuntuで使う http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=169 ■ 本体のダウンロード 　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の自作を開始ですね :peace: 追記： windows版の場合なら、こちらのサイトで日本語言語ファイルを配布してくれてるみたいです(win 32bit用のみ)。 Sigilで ePubを作成する際のお決まりの文字化け回避対策も折込済みのようですので、かなり有難いパッケージですね^^ 　http://www.b-trust.jp/page_epub.html linux版には流用できません(涙 Sat, 31 Jul 2010 20:54:10 +0900 http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=169 いじり記録 　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用きゅーぶんくん壁紙(^^; http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=168 iPhone4で使えるはずの960*640のきゅーぶんくん壁紙を描きました(^^; 下の画像は 実物大の画像へのリンクとなってます。 いつもの如く煮るなり焼くなりしてください(^^; Mon, 28 Jun 2010 13:37:59 +0900 http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=168 いい物見っけ 下の画像は 実物大の画像へのリンクとなってます。
いつもの如く煮るなり焼くなりしてください(^^;

]]> Twitterきゅーぶくんｗ http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=167 Twitterのキャラクタロゴ風味できゅーぶんくんを描きました(^^; 下の画像は PDF形式のファイルへのリンクとなってます。 いつもの如く煮るなり焼くなりしてください(^^; Fri, 25 Jun 2010 19:03:44 +0900 http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=167 いじり記録 下の画像は PDF形式のファイルへのリンクとなってます。
いつもの如く煮るなり焼くなりしてください(^^;

]]> Androidロゴ風きゅーぶくんｗ http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=166 Androidのキャラクタロゴ風味できゅーぶんくんを描きました(^^; 下の画像は PDF形式のファイルへのリンクとなってます。 煮るなり焼くなりしてください(^^; Tue, 15 Jun 2010 11:21:06 +0900 http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=166 いじり記録 Androidのキャラクタロゴ風味できゅーぶんくんを描きました(^^;
下の画像は PDF形式のファイルへのリンクとなってます。
煮るなり焼くなりしてください(^^;

]]> gpEasy 1.6.3出てます！ http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=165 データベースを使わない簡単で非常に使いやすい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エディタは最初から日本語ファイルがありますので、同じ管理画面で日本語を指定してください。 Mon, 31 May 2010 20:28:17 +0900 http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=165 いい物見っけ
この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で Zend Optimizer http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=162 ■ 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を再起動して完了。 Thu, 4 Feb 2010 17:43:50 +0900 http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=162 徒然なるまま
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を再起動して完了。]]> ページのトップへのリンク http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=161 コンテンツの量が多くなると、どうしてもページが縦に長くなってしまい、ページのトップへのリンクが欲しくなってしまいますよね(^^; では テーマに Javascriptを使った簡単なページトップへのリンクを貼ってみましょう。 いろいろな Ajax系のツールでもいろいろな種類の物が紹介されていますが、今回はシンプルで簡単に使える物を利用します。 Smooth Scroll して画面の上に戻るJavaScript こちらの記事から smooth_scroll_top.js をダウンロードしたら、テーマのディレクトリ内に設置します（theme.htmlと同じ階層） theme.html を開いて このソースを読み込みます。 [code][/code] そして、ページのトップへのリンクを貼りたい箇所へリンクタグを記述してやります。 今回は、テーマ内の メインコンテンツの下に常に表示されるように記述する事にします。（Zeroのテーマの場合なら 80行目あたりにです） [code] TOP[/code] 通常のリンクとなっていますので、気軽に貼り付ける事ができますし、リンク部分の文字列を画像に置き換える事も可能です。 とりあえず b2tというクラス属性を書いていますので、style.css 等に記述を追加すれば、デザインも臨機応変です。 例えば、右寄せにして 余白を 5px くらいとりたいのであれば [code].b2t {text-align:right; padding:5px;}[/code] こんな感じで書いておけば OKです。 また、文字列じゃなくて画像で置きたい場合は、例えば 適当ですが... こんな感じの画像を作り（低クオリティですみません(^^;）テーマディレクトリに入れておきます（theme.htmlと同じ階層） 先程と同じ箇所に入れる前提で [code] [/code] style.css 内には [code].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;}[/code] こんな感じでいけるかなと思います。 今回はテーマに直書きしてますが、各モジュール内のテンプレートに書くのもいいと思います。また、pico等のようにすでに同等機能が内蔵されている場合などは 表示を統一させる等の工夫も必要になりますね Sat, 19 Dec 2009 14:29:32 +0900 http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=161 いじり記録
では テーマに 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等のようにすでに同等機能が内蔵されている場合などは 表示を統一させる等の工夫も必要になりますね]]>