最終更新日:2008/04/08

coneco.netウィジェットアドバンス

coneco.netウィジェットアドバンスは、プログラミングの知識がなくても、HTMLの知識があれば、様々な形式でconeco.netの商品を掲載する事のできるウィジェットです。各表示例は、ソースをコピーするだけで利用可能です。

特徴

  1. ブログパーツと違って表示順を選択できる
  2. ブログパーツと違ってデザインを変更できる
  3. ブログパーツと違ってキーワード検索、メーカー検索、ブランド検索ができる
  4. ブログパーツと違って表示できる項目が多彩
  5. WebServicesと違ってプログラミング不要
  6. ブログパーツ、WebServices同様に、こねクリで報酬が得られる

参考

いろいろな表示例

例A 例B 例C 例D(一番シンプルな例)

表示例A

この表示例Aでは、ウィジェットアドバンスの持つ機能を解説する為、出来るだけ盛り込んでいます。
シンプルなサンプルは表示例Dをご覧下さい。

人気ランキング

%%category_rank_img%% %%com_name%% / %%maker%%

満足度:%%rating%%

その他の表示例: 例B 例C 例D

HTMLソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<div class="coneco_widget_adv_area" id="widget_sample1"
  title="category_id=0;count=3;description_length=55;flex=1;load_before_function=loadBeforeSample1;show_before_function=showBeforeSample1;show_after_function=showAfterSample1">
  <div class="widget_body">
    <div class="coneco_name">
      <a href="http://www.coneco.net/" target="_blank"><img src="http://www.coneco.net/images/coneco128_128.gif" border="0" alt="価格比較サイト「coneco.net」"></a><br>
      <a href="http://www.coneco.net/" target="_blank" style="font-size:11px;">価格比較サイト「coneco.net」</a>
    </div>
    <div style='width:140px;float:left;'>
      <select class="crwa_category_selecter" size="10"></select>
      <p style="margin:0;text-align:center;">人気ランキング</a>
    </div>
    <div class="crwa_items_list">
      <!-- ▼商品テンプレート -->       <div class='item_body'>         <p class='item_title'>           <span title='全商品中 %%rank%%位'>%%category_rank_img%%</span>           <a href='%%url%%' target='_blank'>%%com_name%%</a>            / %%maker%%         </p>         <div class="item_info">           <a href='%%url%%' target='_blank' title='%%com_name%%'><img src='%%s_img_url%%' class='com_image %%no_image%%' align='left' border='0'></a>           <p class="price">             <a href='%%url%%' target='_blank'><span style='%%buy_price_style%%'>最安値:</span>             <span style='%%buy_price_style%%'>&yen;%%lowest_price%%</span></a>           </p>           <p class="description">%%description%%</p>         </div>         <div class='rating'>           <p>             <a href='%%review_url%%' target='_blank' title='%%com_name%%のレビューを見る'><img src='%%rating_img%%' alt='満足度:%%rating%%' border='0' height='12' /></a>           </p>         </div>       </div>       <!-- ▲商品テンプレート -->
    </div>   </div>   <p class="category_link">     <a class="page_button crwa_move_first">≪</a>      <a class="page_button crwa_move_prev"><</a>      <a class="crwa_current_page" style="font-weight:bold;"></a>      <a class="crwa_max_page" id="sample1_max_page" style="font-size:80%;color:#aaa"></a>      <a class="page_button crwa_move_next">></a>      <a class="page_button crwa_move_last">≫</a>      <a class='crwa_category_anchor' target='_blank'>coneco.netでこのカテゴリの商品を見る</a>   </p> </div> <script type="text/javascript"> <!-- function loadBeforeSample1(){ // alert("beforeSample1()"); return true; } function showBeforeSample1(json){ // alert(json.Header.Page.PageCount); return true; } function showAfterSample1(json){ document.getElementById("sample1_max_page").innerHTML = "/"+document.getElementById("sample1_max_page").innerHTML; return true; } // --> </script> <script type="text/javascript" src="http://www.coneco.net/widget/coneco_widget_adv.js" charset="utf-8"></script>

HTMLソース解説

以下、ポイントを解説します。

1.全体テンプレート定義

1
2

<div class="coneco_widget_adv_area" id="widget_sample1"
  title="category_id=0;count=3;description_length=55;flex=1;load_before_function=loadBeforeSample1;show_before_function=showBeforeSample1;show_after_function=showAfterSample1">

coneco_widget_adv_areaというclass名を持つDIV要素が、coneco.netウィジェットアドバンス(以下ウィジェット)のテンプレートとして変換対象となります。title属性で各種設定を行うことが出来ます。→title属性に指定できる設定項目一覧
変換後にこの要素のstyleにdisplay:blockが設定されて表示状態になります。変換前のテンプレートが表示されないよう、事前にdisplay:blockをstyle指定しておく事をおすすめします。
また、idを指定しておくと、独自の機能を追加する事ができます。

9
      <select class="crwa_category_selecter" size="10"></select>

crwa_category_selecterというclass名を持つSELECT要素があると、指定したカテゴリ配下のカテゴリ一覧が展開されます。通常のSELECT要素と同様に、size属性でサイズを指定できます。 自由に記述できます。

12
:
35

    <div class="crwa_items_list">
	:
    </div>

crwa_items_listというclass名を持つ要素が、商品テンプレートとして変換対象となります。検索結果が複数の場合、この要素の内部(上記HTMLソース内の水色で表示されている範囲)が繰り返して出力されます。

38
    <a class='crwa_category_anchor' target='_blank'>coneco.netでこのカテゴリの商品を見る</a>

crwa_category_anchorというclass名を持つA要素は、表示中のカテゴリページへのURLが設定されます。

63
<script type="text/javascript" src="http://www.coneco.net/widget/coneco_widget_adv.js" charset="utf-8"></script>

テンプレートの後でJavaScriptを定義する事で、変換が実行されます。1ファイル内に複数指定する必要はなく、この定義より前にあるテンプレートが全て変換対象となります。

2.商品テンプレート定義

14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
      <div class='item_body'>
        <p class='item_title'>
          <span title='全商品中 %%rank%%位'>%%category_rank_img%%</span>
          <a href='%%url%%' target='_blank'>%%com_name%%</a>
           / %%maker%%
        </p>
        <div class="item_info">
          <a href='%%url%%' target='_blank' title='%%com_name%%'><img src='%%s_img_url%%' class='com_image %%no_image%%' align='left' border='0'></a>
          <p class="price">
            <a href='%%url%%' target='_blank'><span style='%%buy_price_style%%'>最安値:</span>
            <span style='%%buy_price_style%%'>&yen;%%lowest_price%%</span></a>
          </p>
          <p class="description">%%description%%</p>
        </div>
        <div class='rating'>
          <p>
            <a href='%%review_url%%' target='_blank' title='%%com_name%%のレビューを見る'><img src='%%rating_img%%' alt='満足度:%%rating%%' border='0' height='12' /></a>
          </p>
        </div>
      </div>

12行目で定義した商品テンプレートの内部では、定められたキーワードが検索結果の各情報に変換されて出力されます。→テンプレート内で使用できる変換キーワード一覧

3.ページ遷移機能

38
39
40
41
42
43

    <a class="page_button crwa_move_first">≪</a> 
    <a class="page_button crwa_move_prev"><</a> 
    <a class="crwa_current_page" style="font-weight:bold;"></a> 
    <a class="crwa_max_page" id="sample1_max_page" style="font-size:80%;color:#aaa"></a> 
    <a class="page_button crwa_move_next">></a> 
    <a class="page_button crwa_move_last">≫</a> 

ページ遷移用のボタンを配置しています。

4.ユーザー独自機能追加

48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<script type="text/javascript">
<!--
	function loadBeforeSample1(){
//		alert("beforeSample1()");
		return true;
	}
	function showBeforeSample1(json){
//		alert(json.Header.Page.PageCount);
		return true;
	}
	function showAfterSample1(json){
		document.getElementById("sample1_max_page").innerHTML = "/"+document.getElementById("sample1_max_page").innerHTML;
		return true;
	}
// -->
</script>

2行目で設定したload_before_function(検索前に呼び出される関数名)、show_before_function(検索結果表示前に呼び出される関数名)、show_after_function(検索結果表示後に呼び出される関数名)を使って、それぞれのタイミングに処理を追加します。
load_before_functionにはloadBeforeSample1が、show_before_functionにはshowBeforeSample1が、show_after_functionにはshowAfterSapmle1が指定されていますので、それぞれの関数を作成し、処理を記述します。

loadBeforeSample1()には、ここでは処理を記述していません。
showBeforeSample1()には、ここでは処理を記述していません。コメント部分を有効にすると、検索結果のページ数を表示します。
showAfterSample1()では、総ページ数の前に"/"を付加しています。

show_before_functionおよびshow_after_functionでは、ウェブサービスの検索結果がJSON形式で渡されます。詳しいデータの構造に関しては、coneco.net WebServicesのドキュメントを参照してください。

それぞれの関数は、復帰値としてtrueを返す必要があります。falseを返した場合、それ以降の処理は実行されません。

5.スタイルシート

1
2

div.coneco_widget_adv_area{	/* ウィジェット全体 */
	display:none;

転換前のテンプレートが表示されてしまうのを防ぐ為、テンプレート全体にdisplay:none;を指定して非表示にしておきます。ウィジェットの処理完了時に自動的に表示されます。

110
111
112
113
114
/* ローディング画像 */
div.crwa_loading{
	text-align:center;
	padding-top:20px;
}

テンプレート内に設定した各要素へは、classやidを指定して自由にスタイルシートを記述することが出来ます。テンプレート内に存在しないものとして、class名にcrwa_loadingを持つDIV要素があります。これはデータローディング時に自動的に商品部分に置き換わる形で表示され、各種設定で指定したloading_img_urlを内包します。

参考:スタイルシート

上記の表示例Aで使用しているスタイルシート

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

div.coneco_widget_adv_area{		/* ウィジェット全体 */
	display:none;
	width:800px;
	padding:4px 5px;
	height:146px;
	font-size:12px;
	background-color:#fff;
	border:2px solid orange;
}
div.widget_body{			/* ウィジェット本体 */
	text-align:left;
	margin-left:auto;
	margin-right:auto;
	padding:2px 0;

}
div.coneco_name{			/* coneco.netバナー */
	width:160px;
	text-align:center;
	float:left;
	padding-top:4px;
	
}
select.crwa_category_selecter{		/* カテゴリ選択 */
	width:100%;
	font-size:10px;
	
	
	
}
div.crwa_items_list{			/* 全商品情報 */
	float:left;
	width:490px;
	
	
	
}
div.item_body{				/* 商品情報 */
	float:left;
	width:154px;
	height:134px;
	margin:0px 0 0 0;
	font-size:11px;
	margin-left:6px;
	overflow:hidden;
}
p.item_title{				/* 商品名 */
	margin:0 0 2px;
	height:4.2em;
	
	
	
}
div.item_info{				/* 商品詳細 */
	height:6.6em;
	overflow-y:hidden;
	
	
	
}
img.com_image{				/* 商品画像 */
	 margin:0 0.5em 0 2px;
	 
	 
	 
	 
}
p.price{				/* 商品価格 */
	margin:0;
	padding:0;
}
p.price a{
	 text-decoration:none;
	 color:#F00;
}
p.price a:hover{
	 text-decoration:underline;
}
p.description{				/* 商品説明 */
	font-size:85%;
	margin-top:1px;
	margin-bottom:1px;
	
	
}
div.rating p{				/* 商品評価 */
	clear:left;
	text-align:right;
	margin:0;
	padding:0;
	height:1em;
}
div.rating p a{
	text-decoration:none;
	vertical-align:top;
}
p.category_link{			/* カテゴリリンク */
	text-align:right;
	margin:4px 0 0;
	font-size:90%;
}
a.page_button{
	color:blue;
	cursor:pointer;
}
a.page_button.crwa_disabled{
	color:#ccc;
	cursor:default;
}
div.crwa_loading{			/* ローディング画像 */
	text-align:center;
	padding-top:20px;
}

付録

div.coneco_widget_adv_areaのtitle属性に指定できる設定項目一覧

項目 初期値
category_id カテゴリID(0=全体、1~2桁=大カテゴリ、5桁=中カテゴリ、7~8桁=小カテゴリ)
カテゴリ一覧をダウンロード(Excel形式)
0
com_id coneco.netの商品ID。半角カンマ「,」で区切って複数指定する事ができます(最大20個)。
coneco.net内の商品個別ページのURLの数字の部分が商品IDになります。
例)http://www.coneco.net/PriceList.asp?COM_ID=1080123061
count 表示件数(最大20件) 10
description_length 商品説明(%%description%%)に出力する商品説明の長さ。
指定した文字数を超えた場合は省略されます(0を指定した場合は全て表示)。
50
loading_img_url ローディング時に表示する画像のURL
flex 1を指定すると、カテゴリ選択で下位階層上位階層への移動可能 0
sort ranking=人気ランキング、price=安値順、-price=高値、new=新しい順 ranking
keyword 検索キーワード(日本語を使用する場合、UTF-8である必要があります)
maker メーカー検索キーワード(日本語を使用する場合、UTF-8である必要があります)
brand ブランド検索キーワード(日本語を使用する場合、UTF-8である必要があります)
image 1を指定すると、画像のある商品のみを検索対象にします。 0
load_before_function 検索結果表示後に実行するJavascript関数名。
show_before_function 検索結果表示後に実行するJavascript関数名。
show_alter_function 検索結果表示後に実行するJavascript関数名。

特別な意味を持つclass一覧

class 必須 説明
coneco_widget_adv_area 必須 DIV要素に対して指定すると、その要素内がウィジェットとみなされます。
以下のclass/idは、この要素内でのみ有効です。
crwa_category_selecter SELECT要素に対して指定すると、その要素にカテゴリ一覧が展開され、クリックイベントにカテゴリによる再検索処理が割り当てられます。
crwa_items_list 必須 商品テンプレートとして変換対象となります。検索結果が複数の場合、この要素の内部(上記HTMLソース内の水色で表示されている範囲)が繰り返して出力されます。
crwa_move_first クリックイベントに、検索結果の最初のページに移動する機能が割り当てられます。
crwa_move_next クリックイベントに、検索結果の次のページに移動する機能が割り当てられます。
crwa_move_prev クリックイベントに、検索結果の前のページに移動する機能が割り当てられます。
crwa_move_last クリックイベントに、検索結果の最後のページに移動する機能が割り当てられます。
crwa_current_page 表示中のページ数が表示されます。
crwa_max_page 検索結果の総ページ数が表示されます。
crwa_category_anchor A要素に対して指定すると、検索条件に指定されたカテゴリのconeco.netへのリンクになります。
crwa_disabled 自動 先頭ページ表示中には、crwa_move_firstとcrwa_move_prevのいずれかのclassが指定された要素に対して追加されます。
最終ページ表示中には、crwa_move_lastとcrwa_move_nextのいずれかのclassが指定された要素に対して追加されます。
表示例Aのスタイルシートの102行目から109行目の様にスタイルを設定する事で、移動できないページに対するページ遷移ボタンの見た目を変更する事ができます。

※上記のclassの内、同一classが一つのウィジェットテンプレート内に複数存在する場合、実際に有効となるのは最初に見つかった要素となります。

商品テンプレート内で使用できる変換キーワード一覧

キーワード 変換結果
%%rank%% coneco.netの全商品での人気ランキング
%%category_rank%% 検索条件内のソート順でのランキング
%%category_rank_img%% 検索条件内のソート順でのランキングを1~3位までは画像で表示。4位以降は数字の後にピリオドが付いた形式
%%com_name%% 商品名
%%maker%% メーカー名
%%maker_full%% メーカー名(複数表記)
%%brand%% ブランド名
%%url%% 商品ページURL
%%img_url%% 商品画像URL(大)
%%s_img_url%% 商品画像URL(小)
%%no_image%% 画像が無い場合に"crwa_no_image"に変換
%%lowest_price%% 最安値
%%avg_price%% 平均価格
%%description%% 商品説明
%%release_date%% yyyy/mm/dd形式の発売日(日付が不明の場合はyyyy/mm)
%%release_date_yyyymm%% yyyy/mm形式の発売月
%%review_url%% 商品レビューページURL
%%review_count%% 商品レビュー件数
%%rating%% ユーザー満足度(最大5)
%%no_rating%% レビューが0件の場合に"crwa_no_rating"に変換
%%spec_title1~5%% スペック項目名
%%spec1~5%% スペック情報
%%spec_class1~5%% スペック情報が無い場合に"crwa_no_spec"に変換

※各キーワードが他のシステムとの衝突してしまうような場合、先頭に「crwa_」を付与しても同じ情報を表示することができます。
例)%%crwa_com_name%%

ウィジェットAPIのメソッド一覧

coneco.netウィジェットアドバンスには、ウィジェット外部やユーザー独自機能からウィジェットを操作するためのAPIが用意されています。crwa_WidgetObject[テンプレートID]という記述でウィジェットオブジェクトを取得し、このオブジェクトのメソッドをAPIとして利用できます。「テンプレートID」の部分は、ウィジェットの全体テンプレートとして定義した要素のIDを指定してください。
上記の表示例Aの場合は、1行目で設定したID「widget_sample1」を指定して以下のようにAPIを呼び出す事ができます。

1

crwa_WidgetObject["widget_sample1"].moveNext();	//次のページに移動
メソッド名 機能 パラメタ
moveFirst 設定されている検索条件で検索して最初のページを表示します。
moveNext 設定されている検索条件で検索して次のページを表示します。
movePrev 設定されている検索条件で検索して前のページを表示します。
moveLast 設定されている検索条件で検索して最後のページを表示します。
setKeyword 検索条件にキーワードを設定します。検索には別途moveFirst等を呼び出してください。 検索キーワード
setBrand 検索条件にブランド名を設定します。検索には別途moveFirst等を呼び出してください。 ブランド名
setMaker 検索条件にメーカー名を設定します。検索には別途moveFirst等を呼び出してください。 メーカー名
setComId 検索条件に商品IDを設定します。カンマ区切りで複数指定できます。検索には別途moveFirst等を呼び出してください。 商品ID
setCategoryId 検索条件にカテゴリIDを設定します。検索には別途moveFirst等を呼び出してください。 カテゴリID
getKeyword 検索条件に設定されているキーワードを返します。
getBrand 検索条件に設定されているブランド名を返します。
getMaker 検索条件に設定されているメーカー名を返します。
getComId 検索条件に設定されている商品IDを返します。
getCategoryId 検索条件に設定されているカテゴリIDを返します。
moveCategory カテゴリの商品を検索して最初のページを表示します。setCategoryId、moveFirstの順に呼び出すのと同義です。 カテゴリID

※検索条件を指定するメソッドはtitle属性に指定した検索条件を上書きします。また、検索結果は全ての検索条件のAND検索となります。
※検索条件に日本語を使用する場合、UTF-8である必要があります。

カテゴリID一覧

Excel形式でカテゴリ一覧(2008年2月時点)をダウンロード

更新履歴

更新日 内容
2008/04/30 title属性に指定できる設定項目一覧に、「image」を追加しました。
2008/04/08 title属性に指定できる設定項目一覧に、「com_id」を追加しました。
ウィジェットAPIに、検索条件関連のメソッドを追加しました。
2008/04/02 特別な意味を持つclass一覧に、「crwa_disabled」を追加しました。
2008/03/31 ページ遷移機能ウィジェットAPIを追加しました。
商品テンプレートにDIV要素以外を使用可能にしました。
2008/03/25 coneco.netウィジェットアドバンスβリリース。

ご利用上の注意

※coneco.netウィジェットアドバンスの設置先(ブログやサイトなど)が、JavaScriptに対応している必要があります。
また、設置したウィジェットアドバンスの利用には、お使いのブラウザでJavaScriptの設定を有効にする必要があります。

※coneco.netウィジェットアドバンスで提供するプログラムが安全であること、正確に動作し、エラーや不具合を生じないまたは生じさせないことについては万全を期しておりますが、これらを保証するものではありません。
また、お客様の要求に適合すること、エラーや不具合が修正されることを保証するものではありません。

※coneco.netウィジェットアドバンスのご利用に基づくいかなる損害に対してもconeco.netおよび情報提供元は責任を負いかねますので、ご了承ください。

価格比較Home | conecoクラブ | 小判 | 通販.ne.jp | レーシックdeかわろ | Webサービス | こねクリ | 開発者ブログ | ブログパーツ |