クリックしてね♪
- インストール
- 1ページにひとつの商品のデータを表示させたい場合は config.php を修正しよう♪
- 1ページに複数の商品のデータを表示させたい場合は moshimo_get_api.js を修正しよう♪
- 自分で javascript のコードを書いて、使いたいという方へ
- オプションを使うと、応用範囲が広がるよ♪
- ランキングも表示できるんだよ♪
- MoshimoSearch を使って自由に検索条件を指定して商品の一覧を表示しよう♪
- php が動作しないサーバーでも使っちゃおう♪
- もしも ゲット素材(^-^)/と併用する場合について
- おやぁ、ランキングと MoshimoSearch のオプションを変更しても反映されないよ('A`)
- おやぁ、動作しないよ('A`)
インストール
- ダウンロードしたら、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 のいずれかを入れてください
- 次に、以下の内容を、設置したいページの<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 での設定は、カートがある販売ページで使うことを前提にしており、ページ内から、
- という url を探し出し、商品ID 番号を取得したうえで、動作します
- カートがないページや1ページに複数の商品ID 番号が記載されている場合は、「1ページに複数の商品のデータを表示させたい場合は moshimo_get_api.js を修正しよう♪」を参考にして、ご利用ください
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のエラーコンソールなどでエラーが出ていないかどうか
- 等、可能な範囲で結構ですから、情報を記載するようにしてください
投票数:14
平均点:9.29
|
TOP |
|
- コメント欄において、当サイトまたは第三者に対し、誹謗中傷、その他の不利益を与える行為があったため、特定ホストまたは IP アドレスからの投稿を制限しております
新しくコメントをつける
コメント一覧
goodsmore
投稿日時 2015/7/8 20:28 | 最終変更
投稿日時 2015/7/8 15:39
投稿日時 2015/7/8 15:21
goodsmore
投稿日時 2015/7/7 20:02 | 最終変更
投稿日時 2015/7/7 3:07
goodsmore
投稿日時 2015/7/6 19:09 | 最終変更
投稿日時 2015/7/6 0:30
goodsmore
投稿日時 2015/2/3 21:28
投稿日時 2015/2/3 10:32
goodsmore
投稿日時 2015/1/31 21:14
10件表示
(全57件)
すべてのコメント一覧へ