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

Version 3 (modified by tejimaa, 12 years ago) (diff)

--

小窓

小窓プロジェクトのWikiです。

小窓の作り方

<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を通知してください

OpenPNEに登録されている小窓一覧

http://trac.openpne.jp/browser/OpenPNE/trunk/public_html/cmd

検討中の小窓仕様

  • メディアタイプ(拡張子)に応じて動作を変える、小窓を作成したい。

http://xxxx.com/xxxx/xx.mp3 を入力したらFlashプレーヤーに置き換わる。など。

  • ワイルドカードドメインの小窓

www.youtube.com youtube.comをひとつの小窓JSで動くようにする。

  • サイドバー小窓
  • 小窓ランキング
  • パラパラ小窓

Attachments (1)

Download all attachments as: .zip