Version 5 (modified by 13 years ago) (diff) | ,
---|
小窓の作り方
小窓の作り方を説明します。
小窓動作フロー
http://www.openpne.jp/wp-content/uploads/scp/20071008_1.png
通常小窓
<cmd src="www.youtube.com" args="aaaaaa"> の形式で登録する小窓が通常小窓です。
- 小窓JavaScriptのファイル名を決める
www.youtube.comドメインのサービスであれば、www.youtube.com.jsとする。 ※このファイル名はurl2cmd()機能でURLマッチ用に利用する。
- main() 関数を作る
ここが機能の実体部 function main(id){} とすると、<cmd> タグのargs="aaaaaa"が代入される。
- main()関数内でdocument.write()して、HTMLタグを排出すればOK.
<cmd src="www.youtube.com" args="id,width,height">に対応する。
- www.youtube.com.jsで解説
www.youtube.com.js ------------------------------------------------------------ function main(id, width, height) { ★main(args)と関数定義する。この関数名がテンプレート側から自動的に呼ばれる if (!id.match(/^[a-zA-Z0-9_-]+$/)) { ★入力値チェックを厳しく行う。XSS脆弱性などが危険 return; } width = parseInt(width); height = parseInt(height); if (width <= 0 || width > 425) { width = 425; } if (height <= 0 || height > 350) { height = 350; } var html = '<object width="' ★表示するHTMLタグを生成する。Youtubeの場合はFlashのオブジェクトタグ + width + '" height="' + height + '"><param name="movie" value="http://www.youtube.com/v/' + id + '"></param><embed src="http://www.youtube.com/v/' + id + '" type="application/x-shockwave-flash" width="' + width + '" height="' + height + '"></embed></object>'; document.write(html); ★document.wrtie(html)で生成したHTMLタグを表示する。 }
動作検証用HTML <html><body> <script type="text/javascript" src="kakaku.js"></script> <script type="text/javascript"> <!-- main('aaaaaa'); //--> </script> </body></html>
URL2CMD形式
特定のURLに自動反応する小窓を作成する場合は、下記の形式に従いurl2cmd(url)関数を追加する。
今回の例では http://www.youtube.com/watch?v=xxxxxxxxxxx 形式に反応。
function url2cmd(url) { ★url2cmd(url)と関数定義をする この関数名がテンプレート側から自動的に呼ばれる if (!url.match(/^http:\/\/(?:www\.|)youtube\.com\/watch\?v=([a-zA-Z0-9_-]+)/)) { ★urlが正しい形式であるかどうかをチェックする。()を使って抜き出したいID部分を囲っておく return; } var id = RegExp.$1; ★()の中身を抽出 var width = 425; var height = 350; main(id, width, height); ★通常の小窓main()関数を呼び出す }
小窓の設置・確認方法
/OpenPNE/public_html/cmd/ 以下に作成したjsファイルを設置する。
SNSにログインして、日記を作成し、下記のような小窓タグを入力する。
<cmd src="www.youtube.com" args="aaaaaa">
小窓一般情報
小窓のサイズ一覧
- 日記は425ドット
- プロフィールでは400ドット
- サイドバーは160ドット
小窓ボタンのサイズ
- 横86ピクセル※横は60~90程度でお願いします
- 縦24ピクセル※縦は固定でお願いします
- 形式はGIFまたはPNG
- ポップアップのURLを通知してください