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

Changes between Version 2 and Version 3 of pne-cmd


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

--

Legend:

Unmodified
Added
Removed
Modified
  • pne-cmd

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