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

Changes between Version 2 and Version 3 of CMDHowTo


Ignore:
Timestamp:
Mar 3, 2007, 3:19:01 PM (13 years ago)
Author:
tejimaa
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • CMDHowTo

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