NavigationRing
Webページに取り付けるには?
一番簡単なWebページへの設置方法(Javascriptを書いて設置)
Htmlにリングデータを埋め込む
最も簡単な方法は、リングデータ(NavigationRIngJSON)を設置ページのHtmlに直書きして、NavigationRingサーバーから本体スクリプトを取り込む方法です。 具体的には、bodyタグの下に以下様にタグを挿入します。
<html>
: (headタグとか色々)
<body>
<script type="text/javascript">
var ____naviring_data={
"nasir_ring":{"version":"ImageRing/1.0.6","setting":{
"cursor":{"img":"http://nyatla.jp/ws/nr/img/cursor/default_sk.png","scaling":"1"},
"r":{"min":"150","max":"500"},"item":{"resize_mode":{"mode":"0","spread":"100",
"fixed_width":"0","fixed_height":"0"}},"mode":"2"},"items":{"item":[
{"img":"http://nyatla.jp/ws/nr/test/1.jpg","ext":{"link":"http://nyatla.jp/ws/nr"}},
{"img":"http://nyatla.jp/ws/nr/test/2.jpg","ext":{"link":"http://www.yahoo.co.jp"}}
]},"ext":{"customize":"LinkRing/0.1.1"}}};
</script>
<script src="http://nyatla.jp/ws/nr/index.php?c=ss&v=0.2&mode=rawjson&enc=EUC-JP" type="text/javascript"></script>
: (コンテンツとか色々)
</body>
青色の部分がリングデータ(NavigationRingJSON)です。これはNavigationRingの表示方法や動作を設定するために必要です。
赤色の部分がNavigationRingの本体スクリプト読込部分で、ここでNavigationRingサーバーからファイルを取り込んでいます。
enc=EUC-JPの部分に、設置ページの文字コードを指定します。
指定できる値は、EUC-JP,UTF-8,SJISのうち1つです。
NavigationRingJSONの仕様については、開発ページのNavigationRingJSONの項目をみて下さい。
このリングデータのタグセットはブログパーツの生成ページで作ることもできます。とりあえず動かすには、こちらへどうぞ。
リングデータを別ファイルにする(直接取得タイプ)
リングデータのNavigationRingJSONを別のJavascriptファイルにしておき、取り込みタグを書く方法です。 リングのデータを別ファイルにするので、htmlの保守性が良くなります。
<html>
: (headタグとか色々)
<body>
<script src="http://nyatla.jp/ws/nr/wp/file/sample_json.js" type="text/javascript"></script>
<script src="http://nyatla.jp/ws/nr/index.php?c=ss&v=0.2&mode=rawjson&enc=EUC-JP" type="text/javascript"></script>
: (コンテンツとか色々)
</body>
青色の部分でNavigationRingJSONを書いてある.jsファイルを取り込んでいます。この.jsファイルは、設置ページと同じ文字コードで作る必要があります。
.jsファイルは、適当なwebサーバーに設置してください。
enc=EUC-JPの部分に、設置ページの文字コードを指定してください。
.jsファイルの例は、開発ページのNavigationRingJSONの項目をみて下さい。
※注意
この方法はNavigationRingJSON取得タイミングがブラウザ依存になるため、ネットワーク状態によってはNavigationRingの起動に失敗することがあります。
失敗が多発するようであれば、次のproxyタイプを試してみてください。
リングデータを別ファイルにする(proxyタイプ)
リングデータを別ファイルにする(直接取得タイプ)と基本的には同じですが、.jsファイルをNavigationRingサーバーを経由して取り込むところが異なります。
<html>
: (headタグとか色々)
<body>
<http://nyatla.jp/ws/nr/index.php?v=0.2&c=ss&mode=jsonproxy&enc=SJIS&jsuri=
http://nyatla.jp/ws/nr/wp/file/sample_json.js
" type="text/javascript"></script>
: (コンテンツとか色々)
</body>
http://nyatla.jp/ws/nr/wp/file/sample_json.jsの部分を.jsを置いたURIに置き換えます。この値は必要に応じてURLエンコードをかけて下さい。
この.jsファイルは、UTF-8の文字コードで作る必要があります。
enc=SJISの部分に設置ページの文字コードを指定してください。
少し高度な設置方法(XMLでリングデータを定義)
リングデータをXMLファイルで定義(proxyタイプ)
リングデータをXML形式(NavigationRingXML)で定義する方法です。このXMLはインターネットに接続したWebサーバーに設置しておく必要があります。(Webページの公開サーバーと同一でも異なってもかまいません)
XMLファイルの例は、開発ページのNavigationRingXMLの項目の項目を見てください。
動作
NavigationRingサーバーはブラウザからGETリクエストを受信すると、リクエストに含まれるURLから、NavigationRingXMLを一度ダウンロードします。
その後、XMLをJSON形式に変換し、NavigationRingの本体スクリプトと結合して、Webブラウザに送りかえします。
NavigationRingサーバーはXMLのProxyとJSON変換機能を提供します。
<html>
: (headタグとか色々)
<body>
<script src="http://nyatla.jp/ws/nr/index.php?c=ss&v=0.2&mode=xmlproxy&
enc=EUC-JP&xmluri=http://nyatla.jp/ws/nr/wp/file/sample_xml.xml" type="text/javascript"></script>
: (コンテンツとか色々)
</body>
http://nyatla.jp/ws/nr/wp/file/sample_xml.xmlの部分をxmlを置いたURIに置き換えます。この値は必要に応じてURLエンコードをかけて下さい。
この.jsファイルは、UTF-8の文字コードで作る必要があります。
enc=EUC-JPの部分に設置ページの文字コードを指定してください。
リングデータをREST型サービスから取り込む
XMLの取得先URLを、NavigationRingXMLを生成するREST型Webサービスにする事で、他のWebサービスと連携したリングコマンドの生成ができます。
Webサービスから取得した情報を加工するサーバーを別途用意する必要があります。
NavigationRingサーバーで提供しているニコ動やAmazonのブログパーツは、この仕組みで外部サービスの情報をリングコマンド化しています。
注意
RESTリクエストにURLエンコードしたデータを渡す時には、2重にURLエンコードをかける必要があることに注意してください。(この仕様直した方がいいかな…。)
NavigationRingのスクリプトも自鯖に設置する
準備中です…
リングデータを別ファイルにする(直接取得タイプ)か、Htmlにリングデータを埋め込むで設置しておけば、後から簡単に移行できる予定です…。
Navigation Ring version 0.2.x
NasirRing SDK version 1.1.02