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

Changes between Version 3 and Version 4 of pne-book-9-3


Ignore:
Timestamp:
Feb 26, 2008, 5:20:27 PM (12 years ago)
Author:
imoto
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • pne-book-9-3

    v3 v4  
    88 OpenPNEには「日記を書く」「写真を貼る」などの機能がありますが、他の機能を取り込んだり、コンテンツを追加するということが従来は出来ませんでした。そこで、YouTubeをSNSの日記に貼ったり、Googleマップの地図をコミュニティのイベントに貼ってオフ会のイベント会場を知らせたりするなど、外部のサービスをSNSに取り込んでOpenPNEを拡張するように出来る様にした仕組みがこの小窓です。[[BR]]
    99
    10  [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/1.png,650)]]
     10 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/1.png,650)]]
    1111
    1212
     
    4141 次に、そこからその動画のIDをURLからコピーします。
    4242 
    43  [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/2.png,650)]]
     43 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/2.png,650)]]
    4444 
    4545 次に、SNSの「日記を書く」に行き、小窓タグを入力します。[[BR]]
     
    5050 }}}
    5151 
    52  [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/3.png,650)]]
     52 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/3.png,650)]]
    5353 すると、この様な形で日記にYouTubeの日記を貼ることが出来ます。[[BR]]
    54  [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/4.png,650)]]
     54 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/4.png,650)]]
    5555
    5656 これが通常小窓形式と呼ばれる形式で、小窓タグと呼ばれるタグを入力してYouTubeの動画をSNSの日記に貼ることが出来ます。[[BR]]
     
    6464 そして、その動画が表示されているURLをコピーします。[[BR]]
    6565 
    66 [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/5.png,650)]]
     66[[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/5.png,650)]]
    6767 
    6868 先ほどコピーしたURLをYouTubeの動画を入力したい箇所に入力します。[[BR]]
    6969 今回は先ほど通常小窓形式で入力した日記の下にコメントとしてい入力してみましょう。[[BR]]
    7070 
    71 [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/6.png,650)]]
     71[[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/6.png,650)]]
    7272
    7373 すると、この様にURLを貼り付けるだけで簡単にYouTubeの日記を貼ることが出来ます。[[BR]]
    7474
    75 [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/7.png,650)]]
     75[[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/7.png,650)]]
    7676
    7777 これがURL2CMD形式です。このURL2CMDの特徴としてはやはりURLを貼るだけで外部のサービスを取り込むことが出来るという点です。[[BR]]
     
    8181== 小窓の動作フロー ==
    8282
    83 [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/8.png,650)]]
     83[[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/8.png,650)]]
    8484
    8585それでは次に小窓の動作フローを解説します。この画像が小窓の動作フローを表した図です。[[BR]]
     
    123123 一つ目は、サイズの規約で二つ目はファイル名の規約です。
    124124 
    125  [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/9.png,650)]]
     125 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/9.png,650)]]
    126126
    127127 
     
    130130 
    131131 
    132  [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/10.png,650)]]
     132 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/10.png,650)]]
    133133
    134134 
     
    158158 また、Blogなどにそのコンテンツを埋め込むためのEmbedタグがある場合はそれを使用することも出来ます。[[BR]]
    159159 
    160  [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/11.png,650)]]
     160 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/11.png,650)]]
    161161
    162162 
     
    164164 YouTubeだと動画の右にEmbedタグがあるのでこれをコピーして、エディタに貼り付けます。[[BR]]
    165165 
    166  [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/12.png,650)]]
     166 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/12.png,650)]]
    167167
    168168
    169169 次に、貼り付けたらWEBサイトにアクセスしてYouTubeが表示されるか確認して見ましょう。[[BR]]
    170170
    171  [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/13.png,650)]]
     171 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/13.png,650)]]
    172172
    173173
     
    353353 }}}
    354354 
    355  [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/14.png,650)]]
     355 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/14.png,650)]]
    356356 
    357357 勿論、ソースの中に間違いがあるためYouTubeは表示されていません。[[BR]]
     
    361361 この2Errorsをクリックするとどこでエラーが出ているか見ることができます。[[BR]]
    362362 
    363  [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/15.png,650)]]
     363 [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/15.png,650)]]
    364364 
    365365 syntax errorと出ています。syntaxとは構文のことで、ここでは構文に間違えがあることを指摘しています。[[BR]]
     
    370370 このようにして、JavaScriptをデバッグします。
    371371
    372   [Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/16.png,650)]]
     372  [[Image(https://trac.openpne.jp/svn/prj/pne-book/pne-book-9/pne-book-9-3/16.png,650)]]
    373373
    374374 右下にあった2Errorsがなくなり緑のチェックアイコンになったときは正常に小窓が動いているということです。[[BR]]