浮子屋商店もよろしく。

伺か関連ツール/ゴーストポップアップの編集

Top > 伺か関連ツール > ゴーストポップアップ

ゴーストの名前を書くと、それにカーソルを載せた際に、Marble Noteからそのゴーストの情報を取得してPopupを表示するものです。

普通の HTML 内に Javascript を入れて、タグを書くことによりポップアップができます。

- 応用例：[[噂と評判[改]にプレビューポップアップ表示を追加>http://marble.g.hatena.ne.jp/keyword/%e5%99%82%e3%81%a8%e8%a9%95%e5%88%a4%5b%e6%94%b9%5d%e3%81%ab%e3%83%97%e3%83%ac%e3%83%93%e3%83%a5%e3%83%bc%e3%83%9d%e3%83%83%e3%83%97%e3%82%a2%e3%83%83%e3%83%97%e8%a1%a8%e7%a4%ba%e3%82%92%e8%bf%bd%e5%8a%a0]]

* 例 [#h4cac2bb]

こんな感じになります。

&attachref(./ghostpopup.png,nolink);

実際のサンプルページは以下の通りです。

http://ukiya.sakura.ne.jp/other/ghostpopup.html

* 配布物 [#z35a708a]

&attachref(./ghostpopup110.zip);  2007/12/03 version 1.1

* 組み込み方 [#uf8590bf]

-配布物をダウンロードします。
-配布物の .js と .css を、あなたのサイトの適当な場所に置きます。
--実行許可は普通のHTMLと同じ（644）でかまいません。
-ポップアップしたいHTML内に以下の記載を追加します。URLは上で置いたURLとあわせてください。

<head>要素内
#pre{{
<script type="text/javascript" src="./overlib.js">
</script>
<script type="text/javascript" src="./ghostpopup.js" charset="utf-8"></script>
<script type="text/javascript" src="./ghostpopup_conf.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="./ghostpopup.css">
}}

<body>要素内
#pre{{
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
}}

-ポップアップしたい部分に以下のタグを書きます。ゴースト名の部分は実際のゴースト名((sakuranameでない事に注意してください))、表示名はページに表示される文字列です。

#pre{{
<span class="ghostpopup" onClick="ghostpopup_popup('ゴースト名','name')" onMouseOut="nd()">表示名</SPAN><br />
}}

* カスタマイズ・詳しい使い方 [#oc57630b]

- ゴースト名はデフォルトで部分一致です。完全一致にしたい場合、ghostpopup_popup('ゴースト名','name','exact') と書いてください。
-  IEの場合、キャッシュがかかります。
- ポップアップ窓の表示をカスタマイズしたい場合は、ghostpopup_conf.jsの ol_ から始まる変数を変更してください。
- ポップアップさせる文字列、及びポップアップ窓の中の文字列のスタイルをカスタマイズしたい場合は、ghostpopup.css を変更してください。
- ポップアップ窓の中身のレイアウト（構造）自体を変更したい場合は、ghostpopup.js のソースを変更する必要があります。
- %%デフォルトでは、このサイトのPHP（http://ukiya.sakura.ne.jp/other/plugin_ghost.php）経由でMarble Noteにリクエストを出します。%%
-- %%あなたのサイトがPHPを使えるのであれば、[[伺か関連ツール/Plugin_Ghost]]からplugin_ghost.phpを持ってきてあなたのサイトに置き、ghostpopup_conf.jsのghostpopup_requestURIをそのURLに変更することができます。%%
- 2007/12/03 Yune Kotomi さんが、新しくなったMarbleNoteに合わせて書き換えてくれました。MarbleNoteを直接コールしていますので、引数の変更でMarbleNoteの全検索機能を利用可能です。
-- 詳細は　http://marble.g.hatena.ne.jp/keyword/%e3%82%b4%e3%83%bc%e3%82%b9%e3%83%88%e6%a4%9c%e7%b4%a2API

* pukiwiki plugin [#n574cbe5]

- pukiwiki plugin版は、MarbleNoteがJSONP対応したことを受けて公開停止しました。
- 単純に、スキンに ghostpopup.jsを組み込めば、普通のHTMLページと同じように使えます。
- リンクを作るだけのpluginを置いておきます。&attachref(./ghost.inc.php);
- 組み込み方は以下を参照してください。

** 組み込み例 [#mb78f9ad]

*** default.skin.php [#t56d891b]

- <link rel="stylesheet" href="<?php echo SKIN_URI ?>greybox/greybox.css"
type="text/css" media="all" charset="<?php echo $css_charset ?>" /> の下あたりに
#pre{{
 <link rel="stylesheet" href="<?php echo SKIN_URI ?>ajax/ghostpopup.css"
type="text/css" media="all" charset="<?php echo $css_charset ?>" />
}}

- <script type="text/javascript" src="<?php echo SKIN_URI ?>greybox/greybox.js"></script> の下あたりに
#pre{{
<script type="text/javascript" src="<?php echo SKIN_URI ?>
ajax/overlib.js" charset="utf-8"></script>
<script type="text/javascript" src="<?php echo SKIN_URI ?>
ajax/ghostpopup_conf.js" charset="utf-8"></script>
<script type="text/javascript" src="<?php echo SKIN_URI ?>
ajax/ghostpopup.js" charset="utf-8"></script>
}}

- <body>の下に
#pre{{
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
}}

- /skin/ajaxの下に、このページで配っているjsとcssを置いておく。
- /pluginの下に、ghost.inc.php を入れる。

** 実行例 [#s7f0e43b]

&ghost(The Hand){おてて};

** プラグインマニュアル [#r7d1564f]

:種別|
インライン型プラグイン~
:書式|
''&ghost(''
&color(blue){ゴースト名};,
[&color(blue){検索列};],
[&color(blue){一致方法};]
'')''[''{''
&color(blue){表示名};
''}'']'';''
:引数|
-- ゴースト名：ゴーストの名前
-- 検索列（省略可能）：検索する要素名。省略時は name。
-- 一致方法（省略可能）：一致方法。省略時はなし。
-- 表示名（省略可能）：実際にページに表示する文字列。省略時はゴースト名。
:概要|
Marble Note XML-RPC APIを使って、ゴーストの情報をポップアップ表示します。
:作者|
ukiya

* コピーライト・配布条件等 [#c0160f93]

- 配布物には以下の著作物が含まれています。
-- overlib.js は　Erik Bosrup の著作物です。
--- http://www.bosrup.com/web/overlib/
--- Copyright Erik Bosrup 1998-2004. All rights reserved.
-- ghostpopup.js 内で Jason Levitt によって書かれた jsr_class.js を流用しています。

- その他のスクリプト等は浮子屋の著作物です。
-- それらについて利用上の不明点等があればお問合せください。

- このスクリプトは Marble Note を利用します。

* 更新履歴 [#icc9b36b]

- 2007/02/01 version1.0 新規作成
- 2007/12/03 version1.1 by Yune Kotomi; "light feather" JSON APIに切り替え

タイムスタンプを変更しない