インストール

• ダウンロードしたら、config.php を開き、

• 'API認証コードを記入して保存してください'の部分に、ご自分のAPI認証コードを入力して保存してください
• 'ショップIDを入力して保存してください'の部分に、ご自分のショップIDを入力して保存してください
• また、この config.php で、キャッシュの有効期限などを設定できるようになっていますので、必要に応じて修正してください
• メモ帳ではなく、Terapad for Windowsなどのテキストエディタを使って修正してください

• このアプリは、php の mbstring.internal_encoding に設定された値を利用して、文字コード変換をしています
• このため、鯖屋さんから借りて、そのままデフォルトの状態で使ってると、文字化けしてしまう場合があります
• 既に php.ini や .htaccess で mbstring の設定をしている人は文字化けの心配は少ないかもしれませんが、そうでない人は、ファイルをアップロードする前に、 mbstring の設定をしておきましょう
• config.php を開くと、上記のように、mbstring の設定をできるようになっています
• mbstring の設定をする場合は、$mbstring_setting を true にし、$encoding に UTF-8、EUC-JP、SJIS のいずれかを入れてください
• 次に、以下の内容を、設置したいページの＜ＨＥＡＤ＞内に記載してください

<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 をネット上で開いて閲覧してみてください
• うまく表示されていれば、とりあえず、インストールは成功です♪

１ページにひとつの商品のデータを表示させたい場合は 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 での設定は、カートがある販売ページで使うことを前提にしており、ページ内から、

• という url を探し出し、商品ID 番号を取得したうえで、動作します
• カートがないページや１ページに複数の商品ID 番号が記載されている場合は、「１ページに複数の商品のデータを表示させたい場合は moshimo_get_api.js を修正しよう♪」を参考にして、ご利用ください

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

• １ページに複数の商品のデータを表示させるに場合は、表示せたい場所または親要素(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

オプション使用例　２

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

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

• 仕様書にあるように、StockStatus には 0〜 3 の数字が入っていますので、これを利用してアイコン画像を表示させているわけですね
• 仕様書に記載されているパラメータは、おおむねそまま使えますので、いろいろ試してくださいね♪
• この例のように、コールバック関数を使って、文字や画像を表示させる場合は、getValue というオプションを true にして、お使いください

オプション使用例　３

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

• 朱書きの通り、GroupItem の行をコメントアウトしてから試してください

オプション使用例　４

• これは、お客様の感想を 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

• 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

• 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 )を記入します
• 次に、以下の内容を、設置したいページの＜ＨＥＡＤ＞内に記載してください

<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(^-^)/側の指定で、素材を表示することができます
• ただし、＜ＨＥＡＤ＞内には 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へアクセスした際のステータスコード等が保存されています
• このファイルの内容を確認すれば、動作しない原因が分かるかもしれません

• ステータスコードの概要等については 次の表を参考にしてください

• ステータスコードが 401 の場合、config.php を開いて、API認証コードの設定に誤りがないか確認してください
• ステータスコードが 403 または 503 の場合は、しばらく時間をおいてから動作確認してください
• response.log というファイル自体が無い場合は、インストールがうまく出来ていない可能性がありますので、ページの＜ＨＥＡＤ＞内に記載したパス等に誤りがないか確認してください
• response.log を確認しても解決しない場合は、ページ下側にあるコメント欄で質問していただければ、分かる範囲内で回答しますが・・・
• 質問の際には・・・
• phpとブラウザのバージョン
• アプリ同梱のsample.htmでは動作するかどうか
• cacheディレクトリに response.log やキャッシュファイルが出来ているかどうか
• config.phpで設定した id や class を記載しているか
• 商品ID番号 を記載しているか
• Firefoxのエラーコンソールなどでエラーが出ていないかどうか
• 等、可能な範囲で結構ですから、情報を記載するようにしてください