クリックしてね♪

インストール

  • ダウンロードしたら、config.php を開き、
  • 'API認証コードを記入して保存してください'の部分に、ご自分のAPI認証コードを入力して保存してください
  • 'ショップIDを入力して保存してください'の部分に、ご自分のショップIDを入力して保存してください
  • また、この config.php で、キャッシュの有効期限などを設定できるようになっていますので、必要に応じて修正してください
  • メモ帳ではなく、Terapad for Windowsなどのテキストエディタを使って修正してください
mbstring の設定をしよう♪
  • このアプリは、php の mbstring.internal_encoding に設定された値を利用して、文字コード変換をしています
  • このため、鯖屋さんから借りて、そのままデフォルトの状態で使ってると、文字化けしてしまう場合があります
  • 既に php.ini や .htaccess で mbstring の設定をしている人は文字化けの心配は少ないかもしれませんが、そうでない人は、ファイルをアップロードする前に、 mbstring の設定をしておきましょう
  • config.php を開くと、上記のように、mbstring の設定をできるようになっています
  • mbstring の設定をする場合は、$mbstring_setting を true にし、$encoding に UTF-8、EUC-JP、SJIS のいずれかを入れてください
  • 次に、以下の内容を、設置したいページの<HEAD>内に記載してください
<script type="text/javascript" src="http://www.example.jp/moshimo_api/lib/jquery.js"></script>
<script type="text/javascript" src="http://www.example.jp/moshimo_api/jquery.moshimo_api.js" charset="utf-8"></script>
<script type="text/javascript" src="http://www.example.jp/moshimo_api/moshimo_get_api.js" charset="utf-8"></script>
<link rel="stylesheet" href="http://www.example.jp/moshimo_api/style.css" type="text/css" media="screen" />
  • 朱書きの moshimo_get_api.js というファイルは、jQuery の使い方に慣れていない方向けのサンプルファイルです
  • jQuery を使い慣れている方は、moshimo_get_sozai.js を記載しなくてもいいかもしれません
  • また、既に jQuery を使っている方は jquery.js を記載する必要はありませんんが、このアプリは jQuery1.4 以降に追加されたメソッドを利用しています
  • 古いバージョンの jQuery をお使いの場合は、バージョンアップのうえご利用ください
  • 全てのファイルをサーバーにアップロードしてください
  • cache デレクトリのパーミッションを 777 にしてください。
  • アップロードした sample.htm をネット上で開いて閲覧してみてください
  • うまく表示されていれば、とりあえず、インストールは成功です♪

1ページにひとつの商品のデータを表示させたい場合は config.php を修正しよう♪

  • デフォルトの状態では、例えば、商品名は Name という id を持つ要素に表示されるようになっていますが、config.php を修正することで、ページ内の id や class などを自由に指定することができます
  • 例えば、item_zaio という id を持つ要素に在庫状況を表示させたい場合は
  • 朱書き部分にあるように、id名 の頭にシャープ(#)を付けて指定します
  • また、zaio という class を持つ要素に在庫状況を表示させたい場合は
  • こんな感じで class名 の頭にドット(.)を付けて指定します
  • 設定が終わったら、ページの好きな場所に
<span id="item_zaio"></span>
  • というように、config.php で設定した id や class を使って記載すれば、在庫状況を表示できるはずです
  • 自分の好みに併せて修正して、使いやすくしてくださいね♪
  • なお、config.php での設定は、カートがある販売ページで使うことを前提にしており、ページ内から、

1ページに複数の商品のデータを表示させたい場合は moshimo_get_api.js を修正しよう♪

  • 1ページに複数の商品のデータを表示させるに場合は、表示せたい場所または親要素(divタグやテーブルレイアウトの場合の tdタグなど)の id属性で商品ID 番号を指定する必要があります
  • たとえば、在庫状況を表示させたい場合は、こんな感じにしといて
<span class="StockStatusWord" id="Item_162039"></span>
  • また、テーブルレイアウトで、複数の項目を表示させたい場合は、こんな感じ
  • 朱書き部分の Item_162039 のように、id属性で商品ID 番号を指定し、データを表示せたい場所に StockStatusWord などの class属性を付けています
  • デフォルトの状態では、例えば、商品名は Name という class を持つ要素に表示されるようになっていますが、moshimo_get_api.js を自分の好みに併せて修正して、使いやすくしてください♪
  • 例えば、zaio という class を持つ要素に在庫状況を表示させたい場合は
  • こんな感じで class名 の頭にドット(.)を付けて指定します

自分で javascript のコードを書いて、使いたいという方へ

  • 例えば、teika という id を持つ要素に、希望小売価格を表示させたい場合は、
var ArticleId = $.getArticleId() ;
$( '#teika' ).getMoshimoApi( ArticleId, 'FixedPrice' ) ;
  • これで、希望小売価格が自動的に表示されるようになります・・・オープンプライスの商品は何も表示されませんけど♪
  • なお、$.getArticleId() は、販売ページから、
  • という url を探し出し、商品ID 番号を返します
  • なんらかの事情で商品ID 番号を取得できない場合や、直接指定したい場合は、
$( '#teika' ).getMoshimoApi( 380143, 'FixedPrice' ) ;
  • こんな感じで商品ID 番号を直接指定したり、ページの好きな場所に
<span class="teika" id="Item_162039"></span>
  • というように id に id名_商品ID 番号という形式で記載した上で、javascript で、
$( '.teika' ).getMoshimoApi( 'FixedPrice' ) ;
  • という使い方もできます
  • さらに、親要素(divタグやテーブルレイアウトの場合の tdタグなど)の id属性で商品ID 番号を指定することも可能です
  • たとえば、テーブルレイアウトの場合、こんな感じにしといて
  • javascript のコードはこんな感じ
	$( '.Name' ).getMoshimoApi( 'Name' ) ;
	$( '.ItemImage_r_1' ).getMoshimoApi( 'ItemImage_r_1' ) ;
	$( '.ShopPrice' ).getMoshimoApi( 'ShopPrice' ) ;
	$( '.DiscountRate' ).getMoshimoApi( 'DiscountRate' ) ;
	$( '.PopIcon' ).getMoshimoApi( 'PopIcon' ) ;
	$( '.FreeCarriageIcon' ).getMoshimoApi( 'FreeCarriageIcon' ) ;
  • また、$.getItemsApi({ key : selector }) を使って、複数の項目をまとめて指定することも可能です
$.getItemsApi({ 'CatchCopy' : '.Catch' ,'StockStatusWord' : '.Stock' });
  • この例では、Catch という class を持つ要素にキャッチコピーを表示させ、Stock という class を持つ要素に在庫状況を表示させています
  • なお、$.getItemsApi({ key : selector }) は、表示せたい場所または親要素の id属性で商品ID 番号を指定した場合にのみ、正常に動作します

オプション使用例 1

  • この例では、データの表示が完了した時に実行されるコールバック関数を登録し、ヒット実績がある商品の場合に、赤い border を付け、alert を実行しています
  • また、addclass で、指定した要素に適用する classを設定できます デフォルトは指定なし
  • duration の数字を大きくすると、データがフェードインして表示されるようになります デフォルトは 0

オプション使用例 2

  • この例では、StockStatus の値を取得して、在庫状況をアイコン画像で表示させています

もしも API 仕様書 ver 1.08 p8 から抜粋

パラメータ(物理名称) 概要(論理名称) 必須 備考
StockStatus 在庫状況コード 0 :在庫切れ
1 :在庫わずか
2 :在庫あり
3 :在庫豊富
  • 仕様書にあるように、StockStatus には 0〜 3 の数字が入っていますので、これを利用してアイコン画像を表示させているわけですね
  • 仕様書に記載されているパラメータは、おおむねそまま使えますので、いろいろ試してくださいね♪
  • この例のように、コールバック関数を使って、文字や画像を表示させる場合は、getValue というオプションを true にして、お使いください

オプション使用例 3

  • これは、関連商品のオプションをjavascript で設定した場合のサンプルです
  • 関連商品のオプションは、config.php でも設定できますが、javascript 側の設定が優先されます
  • GroupItemAddclass で、関連商品に適用する classを設定
  • GroupItemCol で、関連商品の列数を数字で指定
  • GroupItemTitle で、関連商品のタイトルを指定
  • GroupItemlen で、商品名の文字数を指定 0 にすると制限なし
  • GroupItemimageSizeは "s, m, r, l" のいずれかを指定
  • GroupItemaddKey で、表示する項目のキーををコンマ( , )区切りで指定 sannkou.htm を参考に、表示する項目のキーををコンマ( , )区切りで指定してください
  • なお、このサンプルを使う場合、config.php での設定が不要になりますので、
  • 朱書きの通り、GroupItem の行をコメントアウトしてから試してください

オプション使用例 4

  • これは、お客様の感想を javascript でカスタマイズした場合のサンプルです
  • この例では、感想データが空の場合に、「この商品に関する投稿はまだありません (投稿はこちら)」と表示するようにカスタマイズしています
  • サンプルですので、このコードを参考に、朱書きの red bold の部分を修正して、好きな class を適用し、スタイルシートでデザインしたり、#ReviewPost を画像リンクにするなど、自由にいじってください
  • なお、このサンプルを使う場合、config.php での設定が不要になりますので、
  • 朱書きの通り、Review の行をコメントアウトしてから試してください

ランキングも表示できるんだよ♪

  • $( selector ).getMoshimoRanking() を利用すると、ランキングを表示することができます
$( '#Ranking' ).getMoshimoRanking( { category : '01' });
  • これは、Ranking という id を持つ要素にランキングを表示させた例で、category でカテゴリーコードを指定しています
  • サンプルファイル の moshimo_get_api.js には、上記のコードが記載されていますので、自由に修正して使ってください
  • カテゴリーコードはこちらのページで確認できます←クリックしてね♪
  • 検索ワードやタグを指定することも可能です
  • なお、もしもAPI の仕様上の制限のため、カテゴリーコード、検索ワード、タグのいずれかを指定しないと、動作しないようになっています
  • また、version 1.10 から、ページの好きな場所に、class属性を使ってカテゴリ、検索ワード、タグを指定できるようになりました
  • このように、class属性を使って検索条件を指定した場合、javascriptのコードは、
$( '#Ranking' ).getMoshimoRanking();
  • としてください

getMoshimoRankingのオプション

  • title で、ランキングのタイトルを指定します %s にはカテゴリー名、検索ワード、タグのいずれかが入ります
  • len で、表示する商品名の文字数を指定します 0 にすると制限なし デフォルトは 30
  • imageSizeは "s, m, r, l" のいずれかを指定します デフォルトは m
コード 画像サイズ
s 58px × 58px
m 80px × 80px
r 150px × 150px
l 300px × 300px
  • addclass で、ランキングに適用する classを設定できます デフォルトは ranking
  • addkey で、ランキングに表示する項目のキーををコンマ( , )区切りで指定できます sannkou.htm を参考に、表示する項目のキーををコンマ( , )区切りで指定してください
  • col で、ランキングの列数を数字で指定 デフォルトは 5
  • duration の数字を大きくすると、ランキングがフェードインして表示されるようになります デフォルトは 0
  • preShow で、ランキングが表示される直前に実行されるコールバック関数を登録できます
  • onAfter で、ランキングの表示が完了した時に実行されるコールバック関数を登録できます
  • なお、コールバック関数以外のオプションは、config.php でも設定できますが、javascript 側の設定が優先されます

MoshimoSearch を使って自由に検索条件を指定して商品の一覧を表示しよう♪

  • $( selector ).MoshimoSearch() を利用すると、自由に検索条件を指定して商品の一覧を表示することができます
$( '#Search' ).MoshimoSearch( { category : '01' });
  • これは、Search という id を持つ要素に商品の一覧を表示させた例で、category でカテゴリーコードを指定しています
  • サンプルファイル の moshimo_get_api.js には、上記のコードが記載されていますので、自由に修正して使ってください
  • カテゴリーコードはこちらのページで確認できます←クリックしてね♪
  • 検索ワードやタグを指定することも可能です
  • なお、もしもAPI の仕様上の制限のため、カテゴリーコード、検索ワード、タグのいずれかを指定しないと、動作しないようになっています
  • デフォルトの状態では、在庫がある新着商品を 10件表示する設定になっていますが、config.php で自由に検索条件を指定することができます
  • また、version 1.10 から、ページの好きな場所に、class属性を使ってカテゴリ、検索ワード、タグを指定できるようになりました
  • このように、class属性を使って検索条件を指定した場合、javascriptのコードは、
$( '#Search' ).MoshimoSearch();
  • としてください
  • SEARCH_LIMIT で、表示件数を指定します デフォルトは 12
  • SEARCH_TITLE で、タイトルを指定します %s にはカテゴリー名、検索ワード、タグのいずれかが入ります
  • SEARCH_LEN で、表示する商品名の文字数を指定します 0 にすると制限なし デフォルトは 30
  • SEARCH_IMAGESIZEは "s, m, r, l" のいずれかを指定します デフォルトは m
コード 画像サイズ
s 58px × 58px
m 80px × 80px
r 150px × 150px
l 300px × 300px
  • SEARCH_ADDKEY で、表示する項目のキーををコンマ( , )区切りで指定できます sannkou.htm を参考に、表示する項目のキーををコンマ( , )区切りで指定してください
  • SEARCH_ADDCLASS で、適用する classを設定できます デフォルトは search
  • SEARCH_COL で、列数を数字で指定 デフォルトは 5
  • SEARCH_DURATION の数字を大きくすると、フェードインして表示されるようになります デフォルトは 0
  • SEARCH_SORT_ORDER で、並び順を指定できます デフォルトは newly
  • $search_parameter で、自由に検索条件を指定することができます
  • MoshimoSearchのオプションは、javascript でもオプションを設定でき、javascript 側の設定が優先されます

MoshimoSearchのオプション

php が動作しないサーバーでも使っちゃおう♪

  • version 0.99 から、クロスドメインに対応しました
  • これにより、php が動かないサイトでも、php を他のサーバーで実行させることで、利用可能になりますた(^-^)/
  • php が動作しないサーバーで利用する場合は、まず php が動作するサーバーにアップロードした config.php で、パスワード等を設定する必要があります
  • JSONP_CHECK_HOST には php が動作しないサーバーのホスト名をコンマ( , )区切りで記入します
  • config.php の設定後、php が動作しないサーバー用に、moshimo_get_api.js を次のように修正します
  • password には config.php で設定したパスワードをそのまま記入、ajaxUrl には php が動作するサーバー側の url( config.php があるディレクトリまでの url )を記入します
  • 次に、以下の内容を、設置したいページの<HEAD>内に記載してください
<script type="text/javascript" src="http://www.example.jp/moshimo_api/lib/jquery.js"></script>
<script type="text/javascript" src="http://www.example.jp/moshimo_api/jquery.moshimo_api.js" charset="utf-8"></script>
<script type="text/javascript" src="http://www.example.jp/moshimo_api/moshimo_get_api.js" charset="utf-8"></script>
<link rel="stylesheet" href="http://www.example.jp/moshimo_api/style.css" type="text/css" media="screen" />
  • 修正が済んだら、php が動作しないサーバーに、libディレクトリ、jquery.moshimo_api.js、moshimo_get_api.js、style.css、sample.htm のみをアップロード( php ファイルはアップロードする必要はありませんん )
  • アップロードした sample.htm をネット上で開いて閲覧してみてください
  • うまく表示されていれば、インストールは成功です♪

もしも ゲット素材(^-^)/と併用する場合について

  • もしも ゲット素材(^-^)/をインストールしている場合、もしも ゲットAPI(^-^)/側の指定で、素材を表示することができます
  • ただし、<HEAD>内には jquery.get_sozai.js の後に jquery.moshimo_api.js を記載してください
  • また、ゲット素材(^-^)/同梱の moshimo_get_sozai.js は不要になりますので、
<script type="text/javascript" src="http://www.example.jp/get_sozai/lib/jquery.js"></script>
<script type="text/javascript" src="http://www.example.jp/get_sozai/jquery.get_sozai.js"></script>
<script type="text/javascript" src="http://www.example.jp/get_sozai/moshimo_get_sozai.js"></script>
<link rel="stylesheet" href="http://www.example.jp/get_sozai/style.css" type="text/css" media="screen" />
  • 朱書き部分は外して、ご利用ください
  • なお、クロスドメインで利用する場合、ゲット素材(^-^)/ version 0.93以降が必要になります

おやぁ、ランキングと MoshimoSearch のオプションを変更しても反映されないよ('A`)

  • このアプリは、もしものサーバーへの過度な負荷を避けるため、取得したデータをキャシュとして保存しています
  • このため、ランキングと MoshimoSearch のオプションを変更してもリアルタイムには反映されず、キャシュに保存されたデータを読み出す場合があります
  • このような場合で、すぐに動作確認したい時は、version 0.96 以降では、config.php で TEST_MODE を 1 にして試してください
  • version 0.95 以前をお使いの場合は、cacheディレクトリのキャシュを削除して、試してください
  • なお、ランキングのキャシュは頭に ranking_が付いたファイル名で保存され、MoshimoSearchは頭に search_が付いたファイル名で保存されています

おやぁ、動作しないよ('A`)

  • version 0.96以降では、cacheディレクトリの response.log に、もしも APIへアクセスした際のステータスコード等が保存されています
  • このファイルの内容を確認すれば、動作しない原因が分かるかもしれません
  • ステータスコードの概要等については 次の表を参考にしてください
コード 概要 説明
200 OK リクエストに成功した場合
400 Bad Request リクエストパラメータが不正である場合
401 Unauthorized 認証に失敗した場合
403 Forbidden 認証コードが凍結状態(※)であるか、権限がないメソッドにリクエストした場合
※ リクエストが一定数を超えた場合、1分程度認証コードが凍結されます。
404 Not Found 存在しないメソッドにリクエストした場合
503 Service Unavailable 処理がタイムアウトした場合
  • ステータスコードが 401 の場合、config.php を開いて、API認証コードの設定に誤りがないか確認してください
  • ステータスコードが 403 または 503 の場合は、しばらく時間をおいてから動作確認してください
  • response.log というファイル自体が無い場合は、インストールがうまく出来ていない可能性がありますので、ページの<HEAD>内に記載したパス等に誤りがないか確認してください
  • response.log を確認しても解決しない場合は、ページ下側にあるコメント欄で質問していただければ、分かる範囲内で回答しますが・・・
  • 質問の際には・・・
  • phpとブラウザのバージョン
  • アプリ同梱のsample.htmでは動作するかどうか
  • cacheディレクトリに response.log やキャッシュファイルが出来ているかどうか
  • config.phpで設定した id や class を記載しているか
  • 商品ID番号 を記載しているか
  • Firefoxのエラーコンソールなどでエラーが出ていないかどうか
  • 等、可能な範囲で結構ですから、情報を記載するようにしてください