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

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

--

TOC(titleindex,heading=リンク,pne)?

http://openpne.jp/img/png/w180_h180/img_cache_c_386_1175181252_png.png

小窓CMD

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

プロジェクトチケット

component=pne-cmd

#6
PodCasting小窓を作成する
#75
CMD 日記投稿フォームなどの上に任意のボタンを置けるように(CMDタグをポップアップから戻せるように)【コマド返し】
#150
ニュースの表示機能
#411
cmdのシンタックスチェックを変更
#507
全く同一の小窓を複数置くのは面倒。URL2CMDのルックアップ方式を変更したい
#598
小窓TIPリンクを作る
#940
小窓紹介ページを作る(www.openpne.jp)
#969
小窓HowToをwwwに移植する
#976
小窓追加(YouTube日本語版、ニコニコ動画)
#1038
http://jimaku.in 小窓を作成する
#1057
ランダム小窓を作成する
#1062
小窓インデックス格納用テーブルを新設
#1071
PHPで実行出来る小窓機構を作る
#1134
PeeVee.tv小窓を作成する
#1168
<CMDタグの srcに jp.youtube.comなど.が入っていると <cmd src形式が作動しない
#1173
ぐるナビCMDを入れる
#1187
vote.nifty.com のCMDを入れる
#1188
jimaku.in のCMDを入れる
#1189
GoogleMap携帯版の携帯CMDを入れる
#1190
photozou.jp のCMDを入れる
#1191
vision.ameba.jp のCMDを入れる
#1192
buzzmap.so-net.ne.jp のCMDを入れる
#1193
floq.jp のCMDを入れる
#1194
jp.secondlife.com のCMDを入れる
#1195
blog-apart.com のCMDを入れる
#1196
www.slideshare.net のCMDを入れる
#1197
docune.jp のCMDを入れる
#1203
chun2.jp のCMDを入れる
#1204
memotune.com のCMDを入れる
#1500
Wajju小窓の追加
#1504
メッセージ本文に小窓を入れた場合、詳細表示画面でレイアウトが崩れる
#1505
サイドバナーで<cmd>形式の小窓が動作していない
#1523
Wajju小窓の追加
#1527
ぐるナビ小窓をグルメプラザ小窓に置き換え、TRUNKにマージ。
#1530
Wajju小窓で動画表示非対応URLの場合にURLが表示されない
#1571
ぐるナビ小窓をグルメプラザ小窓に置き換え
#1572
グルナビ小窓、グルメプラザ小窓のサーバが不安定
#1609
FC2チャット小窓
#1646
食べログ小窓が、Firefoxだと下が見切れてしまう
#1681
伝助を小窓表示したい
#1683
slurl.com 小窓が機能しなくなっている
#1705
アマゾン小窓の取り込み
#1706
Amazon小窓の追加
#1713
Amazon小窓で小窓の一部が切れてしまっている現象の改善
#1714
Amazon小窓の関連商品を新しいウインドウで表示させる
#1715
Amazon小窓の商品価格を「新品/中古商品」の価格ではなく通常の価格にする

小窓の作り方

小窓の作り方を説明します。

<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で動くようにする。

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

PHP小窓

携帯電話でも小窓を使うためには、JavaScript以外の小窓実行方法が必要になる。 従来の<CMD>形式 URL2CMD形式のタグを使用して、PHPによってサーバサイドでドライブする 小窓のフレームワークを作る。

小窓にロケーション情報を持たせる

小窓の規約としてロケーション情報を持っている場合は、特定の関数を実装してもらう。

cmd_location_x(){
  return x;
}
cmd_location_y(){
  return y;
}

この関数を実装した小窓は、みんなのMAPなどにプロットすることが出来る。

http://trac.openpne.jp/attachment/wiki/pne-cmd/20070901_1.png?format=raw

小窓一覧

Youtube小窓

CMD(http://www.youtube.com/watch?v=14KlrDUH7h4&feature=dir)?

ニコニコ動画小窓

CMD(http://www.nicovideo.jp/watch/sm874085)?

ぐるなび小窓

CMD(http://r.gnavi.co.jp/a373400/)?

食べログ小窓

CMD(http://r.tabelog.com/saitama/rstdtl/11000007/)?

価格コム小窓

CMD(http://kakaku.com/item/00200115383/)?

ネットプライス小窓

CMD(http://www.netprice.co.jp/netprice/beauty2/goods/230439/)?

Attachments (1)

Download all attachments as: .zip