現在の位置
source プラグインを使用中
#freeze
#norelated
&size(40){WebProwl};
#contents
* ダウンロード [#download]
- 画像配信用のFirefox拡張機能
-- [[WebProwlバージョン0.7（http://knowledge-flow.sakura.ne.jp/download/webprowl/webprowl-0.7.html）:http://knowledge-flow.sakura.ne.jp/download/webprowl/webprowl-0.7.html]]
- [[サポート掲示板（http://jbbs.livedoor.jp/computer/40966/）:http://jbbs.livedoor.jp/computer/40966/]]
----
* これは何か [#uc1394ce]
WebProwlは、画像配信用Firefox拡張機能＋画像表示用ブログパーツです。WebProwlを使うと、Web閲覧中の画面を自分のブログなどに貼り付けることができます。
- システム構成図
#ref(./webprowl2-1.png,nolink,webprowl2-1.png)
- スクリーンショット：ブログパーツ
#ref(./webprowl2-2.png,nolink,webprowl2-2.png)
- スクリーンショット：画像拡大時の画面
#ref(./webprowl2-3.png,nolink,webprowl2-3.png)
以下のような用途にご利用ください。
- 自分のブログに、他とは違った独自の機能を持たせたい場合
- チームのメンバーの間で、Web閲覧の情報を共有したい場合
** デモ [#ddebe299]
以下のページで、autoprowl@knowledge-flow.net というユーザのWeb閲覧画面が公開されています。
- http://knowledge-flow.sakura.ne.jp/webprowl/demo.html?autoprowl@knowledge-flow.net
#ref(./webprowl2-4.png,nolink,webprowl2-4.png)
メールアドレスを入力し、追加ボタンを押すと、そのユーザのWeb閲覧画面を表示することができます。
#ref(./webprowl2-5.png,nolink,webprowl2-5.png)
** 利用イメージ [#ld00d4bf]
#ref(./webprowl2-6.png,nolink,webprowl2-6.png)
----
* 使い方 [#d4187c41]
** 画像の配信 [#i0844b8d]
*** Firefox拡張機能のインストール [#l0c239ae]
Firefox拡張機能を、[[WebProwlダウンロード>WebProwl#download]] からダウンロードし、お使いのFirefoxにドラッグ＆ドロップします。
「ソフトウェアインストール」のダイアログが表示されますので、「今すぐインストール」ボタンを押し、インストールします。
#ref(./webprowl3-1.png,nolink,webprowl3-1.png)
WebProwl拡張機能をインストールすると、Firefoxのをステータスバーに、WebProwlのアイコンが表示されます。
#ref(./webprowl3-2.png,nolink,webprowl3-2.png)
*** 配信の開始 [#o6f31848]
WebProwlのアイコンをクリックし、「ログイン」を実行します。
#ref(./webprowl3-3.png,nolink,webprowl3-3.png)
以下のログイン画面が表示されます。
#ref(./webprowl3-4.png,nolink,webprowl3-4.png)
メールアドレスとパスワードを入力すると、Web閲覧画面の配信がスタートします。アカウントを作成していない場合は、「アカウントの作成」を参考に、アカウントを作成してください。
なお、一度入力したアカウントとパスワードは記憶されますので、次回以降は、アカウントとパスワードを入力する必要はありません。アカウントを変更したい場合は、WebProwlのアイコンをクリックし、「入力情報のクリア」を実行してください。
*** アカウントの作成 [#r2652ab2]
ログイン画面で、「アカウント作成はこちら」という文字をクリックすると、アカウント作成用の画面が表示されます。
#ref(./webprowl3-5.png,nolink,webprowl3-5.png)
メールアドレスとパスワードを入力し、登録ボタンを押すと、メールが送信されます。
#ref(./webprowl3-6.png,nolink,webprowl3-6.png)
メール中のURLをクリックすると、登録が完了します。
#ref(./webprowl3-7.png,nolink,webprowl3-7.png)
*** 配信の終了 [#h2c8227f]
WebProwlのアイコンをクリックし、「ログアウト」を実行すると、画面の配信が停止します。
#ref(./webprowl3-8.png,nolink,webprowl3-8.png)
** ブログパーツの埋め込み [#q5e92a3e]
ここでは、自分のブログやWebページに、WebProwlブログパーツを表示する方法について説明します。
*** WebProwlブログパーツの表示方法 [#dbd93f2c]
ブログやWebページに以下を追加します。
+ 以下のJavaScriptの読み込みを追加します。
~ <script type="text/javascript" charset="UTF-8" src="http://knowledge-flow.net/webprowl/js/webprowl.js"></script>
+ html中に、ブログパーツを表示する領域を追加します。
~ <div id="id_webprowl"></div>
+ html表示後に、以下のJavaScript関数を実行するようにします。
~ Kf.App.Webprowl.show("id_webprowl", "yoshio.hayashi@gmail.com");
~ なお、Kf.App.Webprowl.showの第一引数はブログパーツを表示する領域のID、第二引数は表示したいユーザのメールアドレスです。
*** サンプルのページの解説 [#c5b1dfda]
ブログパーツ埋め込みのサンプルページが、以下にあります。
- http://knowledge-flow.sakura.ne.jp/webprowl/sample.html
[ブログパーツ埋め込み前]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
</head>
<body>
あいうえおかきくけこさしすせそ <br />
たちつてとなにぬねの
</body>
</html>
[ブログパーツ埋め込み後]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<!-- 以下のJSファイルをロードします。 -->
<script type="text/javascript" charset="UTF-8"
src="http://knowledge-flow.net/webprowl/js/webprowl.js"></script>
</head>
<!-- body表示後に、Kf.App.Webprowl.showを実行します。 -->
<body onload="Kf.App.Webprowl.show('id_webprowl', 'autoprowl@knowledge-flow.net');">
あいうえおかきくけこさしすせそ <br />
<!-- 以下のdiv領域にブログパーツを表示します -->
<div id="id_webprowl"></div>
たちつてとなにぬねの
</body>
</html>
----