仙台口コミブログ記事Webサービス(β版)

仙台口コミブログ記事Webサービスは自身のホームページ上で仙台口コミブログ記事のコンテンツを配信できるWebサービスです。ここでは仙台口コミブログ記事Webサービスをホームページに取り入れる方法などを解説します。

仙台口コミブログ記事Webサービスでできること

仙台口コミブログ記事にトラックバックがあったブログ記事のデータを取得することができます。
すでに用意されたサンプルクライアントを用いてホームページにソースを貼り付けるだけで簡単に仙台口コミブログ記事Webサービスを利用することもできます（次節参照)
利用できるデータは仙台口コミブログ記事にブログオーナーからトラックバックがあったブログ記事のデータのみです。すなわち、当サイト運営者側の判断で掲載されたブログ記事は取得できるデータに含まれません。
ご自信のブログ記事を仙台口コミブログ記事Webサービスで配信したい場合は、仙台口コミブログ記事へトラックバックをお願いします。
ご利用前に必ずダレカ仙台.COM Webサービス利用規約をお読みください。

仙台口コミブログ記事Webサービスの一番簡単な使い方

一番簡単な使い方はサンプルクライアントを使う方法です。以下のタグをそのままコピーしてホームページのHTMLソースに貼り付けてください。


<div id="kwsj"></div>
<script type="text/javascript" src="http://www.dareka-sendai.com/ws/kutikomi/skb.js" charset="utf-8">
</script>

ご利用前に必ずダレカ仙台.COM Webサービス利用規約をお読みください。

例）上のソースを貼り付けた場合の実際の表示

仙台口コミブログ記事Webサービスのサンプルクライアントは1ページに一箇所しか貼り付けられません。複数指定するとうまく動作しません。

仙台口コミブログ記事Webサービスをカスタマイズする

貼り付けるソースに少しだけおまじないを加えることで、ボックスの配色や大きさ、記事の数を変えることができます。例えば、

見た目を変えた例1

左の画像の様な表示にするには貼り付けるソースを以下のようにカスタマイズします。赤字の部分が追加された箇所です。


<div id="kwsj"></div>

<script type="text/javascript">
UdSKB_ArticleBoxWidth = 145;
UdSKB_DisplayRows = 3;
UdSKB_DisplayCols = 1;
UdSKB_MaxExcerptLength = 24;
</script>

<script type="text/javascript" src="http://www.dareka-sendai.com/ws/kutikomi/skb.js"
charset="utf-8"></script>

このとき追加された


<script type="text/javascript">
UdSKB_ArticleBoxWidth = 145;
UdSKB_DisplayRows = 3;
UdSKB_DisplayCols = 1;
UdSKB_MaxExcerptLength = 24;
</script>

の部分は必ず、


<script type="text/javascript" src="http://www.dareka-sendai.com/ws/kutikomi/skb.js" charset="utf-8"></script>

の部分より前に来るようにして下さい。

この方法はよく見るとUdSKB_xxxという名前の変数に必要なパラメーターを与えているだけであることに気づくと思います。

サンプルクライアントの具体的なカスタマイズの例を５つ

サンプル


<div id="kwsj"></div>
<script type="text/javascript">
UdSKB_Type = 'c';
UdSKB_Category = 'b040000';
UdSKB_Title = '仙台ラーメンの口コミ';
UdSKB_CanvasBorderColor =         '#DDDDDD';
UdSKB_CanvasBackgroundColor =     '#FFFFFF';
UdSKB_TitleBoxBackgroundColor =   '#555555';
UdSKB_ArticleBoxBorderColor =     '#FFFFFF';
UdSKB_ArticleBoxBackGroundColor = '#EEEEEE';
UdSKB_CanvasBackgroundImage =     'none';
UdSKB_FontSize = 10;
UdSKB_ArticleBoxWidth = 120;
UdSKB_ArticleBoxHeight = 200;
UdSKB_ArticleImageWidth = 100;
UdSKB_DisplayRows = 3;
UdSKB_DisplayCols = 1;
UdSKB_CtrBoxHeight = 20;
UdSKB_MaxTitleLength = 7;
UdSKB_MaxExcerptLength = 48;
UdSKB_AdvHtml = '<span></span>';
</script>
<script type="text/javascript"
src="http://www.dareka-sendai.com/ws/kutikomi/skb.js"
charset="utf-8"></script>

サンプル１

サンプル


<div id="kwsj"></div>
<script type="text/javascript">
UdSKB_CanvasBorderColor = '#B1C7AC';
UdSKB_CanvasBackgroundColor = '#FCFEEF';
UdSKB_TitleBoxBackgroundColor = '#60894B';
UdSKB_CanvasBackgroundImage = 'none';
UdSKB_FontSize = 10;
UdSKB_ArticleBoxWidth = 120;
UdSKB_ArticleBoxHeight = 130;
UdSKB_DisplayRows = 1;
UdSKB_DisplayCols = 2;
UdSKB_MaxTitleLength = 7;
UdSKB_MaxExcerptLength = 40;
</script>
<script type="text/javascript"
src="http://www.dareka-sendai.com/ws/kutikomi/skb.js"
charset="utf-8"></script>

サンプル２

サンプル


<div id="kwsj"></div>
<script type="text/javascript">
UdSKB_Type = 'c'
UdSKB_Category = 'b070000'
UdSKB_Title = '大盛り・激安グルメ記事';
UdSKB_CanvasBorderColor = '#000000';
UdSKB_CanvasBackgroundColor = '#E8C669';
UdSKB_TitleBoxBackgroundColor = '#EADBB4'
UdSKB_TitleBoxColor = '#7D3B1E';
UdSKB_ArticleFontColor = '#000000';
UdSKB_ArticleBoxBackGroundColor = '#FFFFFF';
UdSKB_CanvasBackgroundImage = 'none';
UdSKB_TitleBoxFontSize = 10;
UdSKB_DisplayCols = 1;
</script>
<script type="text/javascript"
src="http://www.dareka-sendai.com/ws/kutikomi/skb.js"
charset="utf-8"></script>

サンプル３

サンプル

サンプル４


<div id="kwsj"></div>
<script type="text/javascript">
UdSKB_Type = 'c';
UdSKB_Category = 'c030000';
UdSKB_Title = '仙台ブロガー達の街角ウォッチ';
UdSKB_CanvasBorderColor =         '#16ABF8';
UdSKB_CanvasBackgroundColor =     '#16ABF8';
UdSKB_TitleBoxBackgroundColor =   '#FFFDE7';
UdSKB_TitleBoxColor =         '#896B01';
UdSKB_ArticleBoxBorderColor =     '#00527D';
UdSKB_ArticleFontColor =          '#5DAD57';
UdSKB_ArticleBoxBackGroundColor = '#FFFFFF';
UdSKB_CanvasBackgroundImage =     'http://www.dareka-sendai.com/ws/kutikomi/pics/skb_bgimg2.gif';
UdSKB_FontSize = 9;
UdSKB_ArticleBoxWidth = 220;
UdSKB_ArticleBoxHeight = 85;
UdSKB_ArticleImageWidth = 55;
UdSKB_TitleBoxHeight = 20;
UdSKB_TitleBoxFontSize = 12;
UdSKB_DisplayRows = 2;
UdSKB_DisplayCols = 2;
UdSKB_CtrBoxHeight = 10;
UdSKB_MaxExcerptLength = 52;
UdSKB_AdvHtml = '<span></span>';
</script>
<script type="text/javascript"
src="http://www.dareka-sendai.com/ws/kutikomi/skb.js"
charset="utf-8"></script>

サンプル

サンプル５


<div id="kwsj"></div>
<script type="text/javascript">
UdSKB_CanvasBorderColor =         '#DEC1C8';
UdSKB_CanvasBackgroundColor =     '#FCF5F7';
UdSKB_TitleBoxBackgroundColor =   '#FCF5F7';
UdSKB_TitleBoxColor =             '#5D4C50';
UdSKB_ArticleBoxBorderColor =     '#FFFFFF';
UdSKB_ArticleBoxBackGroundColor = '#FCF9EF';
UdSKB_CanvasBackgroundImage =     'none';
UdSKB_FontSize = 9;
UdSKB_ArticleBoxWidth = 220;
UdSKB_ArticleBoxHeight = 85;
UdSKB_ArticleImageWidth = 55;
UdSKB_TitleBoxHeight = 12;
UdSKB_TitleBoxFontSize = 10;
UdSKB_DisplayRows = 2;
UdSKB_DisplayCols = 2;
UdSKB_CtrBoxHeight = 10;
UdSKB_MaxExcerptLength = 52;
UdSKB_AdvHtml = '<span></span>';
</script>
<script type="text/javascript"
src="http://www.dareka-sendai.com/ws/kutikomi/skb.js"
charset="utf-8"></script>

仙台口コミブログ記事Webサービスのサンプルクライアントで指定できるパラメーター

今までの例のとおりユーザーがパラメーターを定義することでサンプルクライアントの外観や内容を変更することができます。パラメーターの名前はすべて'UdSKB_'で始まります

以下に変更可能なユーザーパラメーターを示します

名前	値	説明	注意
`UdSKB_Type`	取得する記事の種類です	次の2種類があります `'n'`を指定すると最新の記事を日付の降順で取得します。 `'c'`を指定するとカテゴリーごとの記事を日付の降順で取得します。	`'c'`を指定した場合は必ず次の`UdSKB_Category`も指定しないといけません。指定方法が間違った場合は'n'が指定されたものとして扱われます。
`UdSKB_Category`	取得したい記事のカテゴリーIDを指定します	カテゴリーIDはカテゴリーID表を参照してください。	間違ったIDを指定すると`UdSKB_Type='n'`とみなされます
`UdSKB_Title`	表示されるWebサービスのタイトルを指定します。	任意のタイトルをシングルクォーテション「'」で囲って指定します	枠からはみ出る部分は見えなくなるので、後述する`SKB_TitleBoxHeight`、`SKB_TitleBoxFontSize`を考慮して枠内に収まる文字数で指定します。
`UdSKB_CanvasBorderColor`	Webサービスの枠の色です。	#RRGGBBの形式をシングルクォーテション「'」で囲って指定します。	正しい形式を指定しないと正常に動作しません。
`UdSKB_CanvasBackgroundColor`	Webサービスの背景色です。	#RRGGBBの形式をシングルクォーテション「'」で囲って指定します。	正しい形式を指定しないと正常に動作しません。
`UdSKB_TitleBoxBackgroundColor`	Webサービスのタイトル枠の背景色を指定します	#RRGGBBの形式をシングルクォーテション「'」で囲って指定します。	正しい形式を指定しないと正常に動作しません。
`UdSKB_TitleBoxColor`	Webサービスのタイトルの文字色を指定します	#RRGGBBの形式をシングルクォーテション「'」で囲って指定します。	正しい形式を指定しないと正常に動作しません。
`UdSKB_ArticleBoxBorderColor`	記事枠の枠の色を指定します	#RRGGBBの形式をシングルクォーテション「'」で囲って指定します。	正しい形式を指定しないと正常に動作しません。
`UdSKB_ArticleFontColor`	記事の文字色を指定します。	#RRGGBBの形式をシングルクォーテション「'」で囲って指定します。	正しい形式を指定しないと正常に動作しません。
`UdSKB_ArticleBoxBackGroundColor`	記事枠の背景色を指定しいます。	#RRGGBBの形式をシングルクォーテション「'」で囲って指定します。	正しい形式を指定しないと正常に動作しません。
`UdSKB_CanvasBackgroundImage`	Webサービスの背景画像を指定します。	画像のURLをシングルクォーテション「'」で囲って指定します。	何も指定しない場合は`'none'`を指定してください。
`UdSKB_NextBtn`	次のページに進むためのボタン画像を指定します。	画像のURLをシングルクォーテション「'」で囲って指定します。	後述する`SKB_CtrBtnwidth`、`SKB_CtrBoxHeight`より大きな画像を指定するとはみ出した部分が表示されません。
`UdSKB_PrevBtn`	前のページに戻るためのボタン画像を指定します。	画像のURLをシングルクォーテション「'」で囲って指定します。	後述する`SKB_CtrBtnwidth`、`SKB_CtrBoxHeight`より大きな画像を指定するとはみ出した部分が表示されません。
`UdSKB_NextBtnI`	次のページがないときの非アクティブな進むためのボタン画像を指定します。	画像のURLをシングルクォーテション「'」で囲って指定します。	後述する`SKB_CtrBtnwidth`、`SKB_CtrBoxHeight`より大きな画像を指定するとはみ出した部分が表示されません。
`UdSKB_PrevBtnI`	前のページがないときの非アクティブなボタン画像を指定します。	画像のURLをシングルクォーテション「'」で囲って指定します。	後述する`SKB_CtrBtnwidth`、`SKB_CtrBoxHeight`より大きな画像を指定するとはみ出した部分が表示されません。
`UdSKB_FontSize`	記事のフォントサイズを指定します。	自然数を指定します。	単位はptになります。
`UdSKB_ArticleBoxWidth`	個々の記事の枠の幅をしていします。	自然数を指定します。	単位はpxになります。
`UdSKB_ArticleBoxHeight`	個々の記事の枠の高さをしていします。	自然数を指定します。	単位はpxになります。
`UdSKB_ArticleImageWidth`	記事のサムネイル画像の一辺の長さを指定します。	自然数を指定します。	記事の本文がが枠に収まらないときはこの数字を増らして画像を小さく見せるか、`SKB_FontSize`や後述する`SKB_MaxExcerptLength`で調整します。
`UdSKB_TitleBoxHeight`	Webサービスのタイトル枠の高さを指定します。	自然数を指定します。	タイトル枠からはみ出す部分は表示されないので、数字を増やすか後述する`SKB_TitleBoxFontSize`で調整します。
`UdSKB_TitleBoxFontSize`	Webサービスのタイトルのフォントサイズを指定します。	自然数を指定します。	単位はptです。タイトル枠からはみ出す部分は表示されないので、数字を減らすか`SKB_ArticleBoxWidth`、で調整します。
`UdSKB_DisplayRows`	一度の何行表示するか指定します。	自然数を指定します。
`UdSKB_DisplayCols`	一度の何列表示するか指定します。	自然数を指定します。
`UdSKB_CanvasBorder`	Webサービスの枠の幅を指定します	自然数を指定します。	単位はpxです。
`UdSKB_CanvasPadding`	Webサービスの外枠からのパディングを指定します。	自然数を指定します。	<単位はpxになります。
`UdSKB_CtrBtnwidth`	戻る、進むボタンの幅を指定します。	自然数を指定します。	ボタンがはみ出す場合はボタン画像の横幅を減して調整します。単位はpxになります。
`UdSKB_CtrBoxHeight`	戻る、進むボタンを含むBox下段の高さを指定します。	自然数を指定します。	ボタンがはみ出す場合は数字を増やすかボタン画像の高さを減らして調整します。単位はpxになります。
`UdSKB_MaxTitleLength`	表示する記事のタイトルの先頭文字数を指定します。	自然数を指定します。	タイトル枠からはみ出す部分は表示されないので、数字を減らすか`SKB_ArticleBoxWidth`、`SKB_TitleBoxFontSize`で調整します。
`UdSKB_MaxExcerptLength`	表示する記事の本文の先頭文字数を指定します。	自然数を指定します。	タイトル枠からはみ出す部分は表示されないので、数字を減らすか`SKB_ArticleBoxWidth`、`SKB_ArticleBoxHeight`、`SKB_FontSize`で調整します
`UdSKB_AdvHtml`	Webサービスの右下に表示するhtmlタグを指定します。	htmlタグの形式で指定してください。	htmlタグ形式以外では動作しない場合があります。デフォルトではダレカ仙台のトップページへのリンクになるので消したければ<span></span>とでもすればおｋかと:-)

仙台口コミブログ記事Webサービスをもっとカスタマイズする

その他、カスタマイズに関しては仙台口コミブログWebサービスサンプルクライアントのソースを直接参照してください。超有名なアレは使わずフルスクラッチで書いてますが500行程度のコンパクトなソースです。このソースは自由に改変し、悪意をもった使用を除きインターネット上に設置、配布して構いません。参考になればですが他のWebサービスのクライアント開発の為に改変しても構いません。その際のダレカ開発担当やまへの通知も必要ありません。(もちろん知らせてくれると嬉しいですが）

仙台口コミブログ記事Webサービスを完全にカスタマイズする

仙台口コミブログ記事WebサービスのJSONデータをHTTPで取得することが可能です。このデータを使い、自由にアプリケーションを自作することが可能です。

http://www.dareka-sendai.com/ws/kutikomi/json.html にアクセスしてみてください。

このようにデータ取得用URLから取得したデータを利用し、クライアント側で自由にそのデータを使い、Webアプリケーションの他、さまざまな（たとえばビスタのガジェットとか）オリジナルアプリケーションを作ることができます。

ブログの記事を取得した場合のデータ形式

データはJavaScriptの書式で、SKB_Callbackという名前の関数の引数にブログの記事をあらわすJSON形式の配列が与えられた形です。のデータが取得できます。文字コードはUTF-8になります。

JavaScriptでJSONPを使う場合を考慮して関数を実行する文字列で返していますが、JSONPを使わない場合は、取得したデータから先頭のSKB_Callback(と末尾の);は無視して使うことができます。中のデータだけ使ってください。 JavaScriptの書式で返されますが、各言語のモジュールやライブラリを使えばそれぞれの言語で利用可能です。たとえばperlならJSONモジュール,javaならjson-libライブラリなどが使えると思います。

データ形式

取得したデータは下記のように読むことができます。


SKB_Callback(
	[
		{
			"blogName":"ブログの名前１",
			"id"      :"ブログID",
			"title"   :"記事のタイトル１",
			"excertpt":"記事の本文の先頭１",
			"url"     :"記事のUrl"
		},
		{
			"blogName":"ブログの名前２",
			"id"      :"ブログID",
			"title"   :"記事のタイトル２",
			"excertpt":"記事の本文の先頭２",
			"url"     :"記事のUrl"
		},
		...
	]
);

データ取得用URLのパラメーター

データ取得用のURLにパラメーターをつけることができます。

名前	値	使い方
`fetchrow`	>何件のデータを取得するか40以下の自然数で指定します。	何も指定しなかった場合は4になります。40を超えた数字が指定された場合は40になります
`page`	何ページ目を取得するか自然数で指定します。	たとえばfetrowが3でpageを4とした場合10～12件目が取得できます。何も指定しなかったり、自然数以外が指定された場合は1となります。
`type`	取得するデータの種類を指定します。	'n' : 最新の記事を新しい順に取得します。 'c' : カテゴリーごとの記事を新しい順に取得します。'c'が指定された場合は必ず次の`category`パラメーターでカテゴリーを指定しないといけません。
`category`	取得するデータカテゴリー指定します。	上の`type`パラメーターが指定されている場合有効です。カテゴリーID表をにないパラメーターは無効になり、 type='n'が指定されたものとみなされます。

最新のブログ記事の１件目から5件取得する

http://www.dareka-sendai.com/ws/kutikomi/json.html?fetchrow=5
最新のブログ記事の6件目から5件取得する

http://www.dareka-sendai.com/ws/kutikomi/json.html?page=6&fetchrow=5
ラーメン記事の１件目から5件取得する

http://www.dareka-sendai.com/ws/kutikomi/json.html?type=c&category=b040000&fetchrow=5

対象データの総数を取得するためのURLのパラメーター

今までの方法ではURLパラメーターにページ番号のpageや1ページあたりの件数のfetchrowを取得し指定しても、何ページまで取得できるのかはとりあえず空のデータが変えるまでがんばってみるしかありませんでした。通常は先にデータの総数がわかったほうが都合がよいことがほとんどだと思います。

パラメーターにcount=yを追加してみてください


SKB_CallbackC({"count":該当データ総数});

というデータが取得できると思います。count=yが指定されたときはpageやfetchrowを指定しても無視されます。

ラーメン記事の全件数を取得する

http://www.dareka-sendai.com/ws/kutikomi/json.html?type=c&category=b040000&count=y

仙台口コミブログ記事Webサービスを利用する際の注意

ご利用前に必ずダレカ仙台.COM Webサービス利用規約をお読みください。
仙台口コミブログ記事Webサービスで提供するサービスを利用する場合は必ずページ内からダレカ仙台へリンクを貼ってください。

上述のサンプルクライアントを使う場合でUdSKB_AdvHtmlを変更せずにダレカ仙台へリンクのリンクを表示させている場合は新しいリンクを作成する必要はありません。

その他の場合では使用したデータがダレカ仙台から提供されたものであることがわかるように、必ずページ内からダレカ仙台へリンクを貼ってください。

仙台口コミブログ記事Webサービス(β版)

仙台口コミブログ記事Webサービスでできること

仙台口コミブログ記事Webサービスの一番簡単な使い方

例）上のソースを貼り付けた場合の実際の表示

仙台口コミブログ記事Webサービスをカスタマイズする

サンプルクライアントの具体的なカスタマイズの例を５つ

仙台口コミブログ記事Webサービスのサンプルクライアントで指定できるパラメーター

仙台口コミブログ記事Webサービスをもっとカスタマイズする

仙台口コミブログ記事Webサービスを完全にカスタマイズする

ブログの記事を取得した場合のデータ形式

データ形式

データ取得用URLのパラメーター

最新のブログ記事の１件目から5件取得する

最新のブログ記事の6件目から5件取得する

ラーメン記事の１件目から5件取得する

対象データの総数を取得するためのURLのパラメーター

ラーメン記事の全件数を取得する

仙台口コミブログ記事Webサービスを利用する際の注意