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

Changes between Version 21 and Version 22 of pne-cmd


Ignore:
Timestamp:
Oct 8, 2007, 1:34:41 AM (12 years ago)
Author:
tejimaa
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • pne-cmd

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