oitake blog

いろいろリンク

おすすめリンク

最近のエントリー

カテゴリー

20101012:コメントとトラックバックを停止したことにより、このサイトはアーカイブとなりました。以降、ご連絡はみもねるのウェブサイトへお願いします。
20100703:新ナマコメ(ナマコメ 2)を公開しました。コメントビューア付きで送信面においてもパワーアップしています。
旧ナマコメは将来的に使用できなくする予定なので、可能な限り新ナマコメをお使いください。
20091127:oitake は みもねる になりました。当ブログは無期限更新停止となります。詳細は最新の記事をご覧ください。

スポンサーサイト

一定期間更新がないため広告を表示しています


2009.12.16 Wednesday | | - | - | -

ラクガキライト:落書きでコミュニケーションするFlash

というわけでラクガキライトの紹介です。

ラクガキライトはみんなで共有する落書き帳のようなFlashです。
落書きの上に落書きが表示されるので、前の人が描いた落書きに感想を付けたり、ツッコミを入れたりできます。落書きを通して会話できたらいいなぁ、と思いつつ作りました。

簡単に扱えるよう、仕様は少な目です。
・.swfファイルをアップロードするだけで使用可能。
・落書きのデータはoitakeのサーバに送信。受信も同様。
・最大100個までの落書きを保存可能。
 100個を超えたら古い落書きから自動的に削除。
・閲覧モードと描画モードを搭載。
 「ラクガキする!」ボタンで切り替え。
・閲覧モードでは古い落書きからフェードイン/フェードアウトしつつ表示。
 ただし、最初に表示されるのは直近の5件。
・左右のマウスドラッグで落書きを1個ずつ表示可能。
・描画モードではマウスドラッグで落書きを描画。
・元に戻す・やり直す・(ローカルに)一時保存・一時復帰・消去・(サーバに)送信、といった機能を搭載。
 全てショートカットで実行可能な上、スペースバーでメニューを非表示可能。
・キャンバス(Flash)のサイズはHTML上で指定可能。
 他にも背景色・前景色・線の幅などを指定可能。
意外に多目でしたね…。

注意点としては、
・.swfファイルのURL、正確にはドメイン名ごとに保存先が用意される。
 例えば「oitake.chicappa.jp」にファイルを置いた場合はoitake用の保存先が用意されますが、「www.sample.com/yourdirectory」などのURLでは「www.sample.com」を利用している全ユーザーにひとつの保存先が用意されます。
・インクが切れると線を引けない。
 サーバ容量の兼ね合いから導入した妥協案です。インクの量は変更できません。
・ごくわずかな線を引いただけの落書きは送信されない。
 誤送信やいたずら防止の対応策です。このあたりもHTMLで変更できます。

最後に設置の仕方ですが、上に描いたとおり簡単です。
下記URLを右クリックメニューからダウンロードして、それをお使いのサーバにアップロードするだけ。あとは.swfファイルを表示するHTMLを書けば完了です。


HTMLの記述例は続きからどうぞ。

SWFObjectを使って表示する場合のHTMLです。
swfobject.jsはなるべくお使いのサーバにアップロードしてください。

<!--RakugakiLight/-->
<div id="flashcontent">
<script src="http://oitake.chicappa.jp/js/swfobject.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
var so=new SWFObject("http://【アップロード先のパス】/RakugakiLight.swf【パラメータ】","swf","【幅(ピクセル)】","【高さ(ピクセル)】","9","#【背景色(16進数)】");
so.write("flashcontent");
</script>
</div>
<!--/RakugakiLight-->

(追記)*Safariではこのページのラクガキライトが表示されないようですが、SWFObjectの仕様のようです。JavaScriptで処理を振り分けるなどすると良いかもしれません。
JavaScriptを使わない場合のHTMLです。

<!--RakugakiLight/-->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="【幅(ピクセル)】" height="【高さ(ピクセル)】">
<param name="bgcolor" value="#【背景色(16進数)】" />
<param name="movie" value="http://【アップロード先のパス】/RakugakiLight.swf【パラメータ】" />
<embed bgcolor="#【背景色(16進数)】" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://【アップロード先のパス】/RakugakiLight.swf【パラメータ】" type="application/x-shockwave-flash" width="【幅(ピクセル)】" height="【高さ(ピクセル)】" />
</object>
<!--/RakugakiLight-->

【パラメータ】は次のとおりですが、書かなくても動作はします。

?fgColor=0x【前景色(16進数)】&bgColor=0x【背景色(16進数)】&lineWidth=【線の幅(ピクセル)】&rakugakiNum=【ダウンロードする落書きの数(1〜100)】&minLineSegmentNum=【最低限引かなければならない線分の数】

背景を透過にするサンプルは、このページのソースコードを見てください。

スポンサーサイト


2009.12.16 Wednesday | 00:41 | - | - | -

アーカイブ

広告