ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Changes between Version 11 and Version 12 of CMDHowTo


Ignore:
Timestamp:
Jul 31, 2007, 1:27:59 AM (12 years ago)
Author:
tejimaa
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • CMDHowTo

    v11 v12  
    1 小窓の作り方を説明します。
    2 
    3 = OpenPNEに登録されている小窓一覧 =
    4 http://trac.openpne.jp/browser/OpenPNE/trunk/public_html/cmd
    5 = 小窓の作り方 =
    6 == <cmd src="www.youtube.com" args="aaaaaa"> 通常小窓形式の場合 ==
    7  * 小窓JavaScriptのファイル名を決める
    8 www.youtube.comドメインのサービスであれば、www.youtube.com.jsとする。
    9 ※このファイル名はurl2cmd()機能でURLマッチ用に利用する。
    10 
    11  * main() 関数を作る
    12 ここが機能の実体部
    13 function main(id){}
    14 とすると、<cmd> タグのargs="aaaaaa"が代入される。
    15  * main()関数内でdocument.write()して、HTMLタグを排出すればOK.
    16 
    17 <cmd src="www.youtube.com" args="id,width,height">に対応する。
    18 
    19  * www.youtube.com.jsで解説
    20 {{{
    21 www.youtube.com.js
    22 ------------------------------------------------------------
    23 function main(id, width, height) {       ★main(args)と関数定義する。この関数名がテンプレート側から自動的に呼ばれる
    24     if (!id.match(/^[a-zA-Z0-9_-]+$/)) { ★入力値チェックを厳しく行う。XSS脆弱性などが危険
    25         return;
    26     }
    27     width = parseInt(width);
    28     height = parseInt(height);
    29     if (width <= 0 || width > 425) {
    30         width = 425;
    31     }
    32     if (height <= 0 || height > 350) {
    33         height = 350;
    34     }
    35     var html = '<object width="'         ★表示するHTMLタグを生成する。Youtubeの場合はFlashのオブジェクトタグ
    36             + width
    37             + '" height="'
    38             + height
    39             + '"><param name="movie" value="http://www.youtube.com/v/'
    40             + id
    41             + '"></param><embed src="http://www.youtube.com/v/'
    42             + id
    43             + '" type="application/x-shockwave-flash" width="'
    44             + width
    45             + '" height="'
    46             + height
    47             + '"></embed></object>';
    48     document.write(html);                ★document.wrtie(html)で生成したHTMLタグを表示する。
    49 }
    50 
    51 }}}
    52 
    53 {{{
    54 動作検証用HTML
    55 
    56 <html><body>
    57 <script type="text/javascript" src="kakaku.js"></script>
    58 <script type="text/javascript">
    59 <!--
    60 main('aaaaaa');
    61 //-->
    62 </script>
    63 </body></html>
    64 }}}
    65 
    66 == URL2CMD形式の場合 ==
    67 
    68 特定のURLに自動反応する小窓を作成する場合は、下記の形式に従いurl2cmd(url)関数を追加する。
    69 
    70 今回の例では http://www.youtube.com/watch?v=xxxxxxxxxxx 形式に反応。
    71 {{{
    72 function url2cmd(url) {        ★url2cmd(url)と関数定義をする この関数名がテンプレート側から自動的に呼ばれる
    73     if (!url.match(/^http:\/\/(?:www\.|)youtube\.com\/watch\?v=([a-zA-Z0-9_-]+)/)) {
    74                                ★urlが正しい形式であるかどうかをチェックする。()を使って抜き出したいID部分を囲っておく
    75         return;
    76     }
    77     var id = RegExp.$1;        ★()の中身を抽出
    78     var width = 425;
    79     var height = 350;
    80     main(id, width, height);   ★通常の小窓main()関数を呼び出す
    81 }
    82 }}}
    83 
    84 == 小窓の設置・確認方法 ==
    85 
    86 /OpenPNE/public_html/cmd/ 以下に作成したjsファイルを設置する。
    87 
    88 SNSにログインして、日記を作成し、下記のような小窓タグを入力する。
    89 
    90 <cmd src="www.youtube.com" args="aaaaaa">
    91 
    92 
    93 
    94 === 小窓のサイズ一覧 ===
    95  * 日記は425ドット
    96  * プロフィールでは400ドット
    97  * サイドバーは160ドット
    98 
    99 === 小窓ボタンのサイズ ===
    100  * 横86ピクセル※横は60~90程度でお願いします
    101  * 縦24ピクセル※縦は固定でお願いします
    102  * 形式はGIFまたはPNG
    103  * ポップアップのURLを通知してください
     1[wiki:pne-cmd]へ移動。