SUZURIの商品一覧をWordPressサイトに表示させる実装方法(サンプルコード付き+プラグインなし)
みなさんこんにちは!エンジニアの高澤です!
今回はSUZURIの商品一覧をWordPressサイトに表示させる実装方法について解説していきたいと思います。
SUZURIとは、自分で描いたイラストやロゴなどをアップロードするだけで簡単にオリジナルグッズを作成して販売することができるサービスのことをいいます。
当記事での内容では、通常このSUZURIで公開した商品をWordPressで作成したサイトのページに表示することは手間や時間がかかって大変なところを効率化して簡単にできる実装方法を解説いたします。
イラストを作成するクリエイターさんや実装対応が必要そうなエンジニアの方などに向けてお役立てできるような構成で執筆いたしました。
よろしければぜひご活用いただけましたら幸いです。
今回実装する内容
まず実装方法の解説をする前に、そもそも具体的にどんな実装するのかをご紹介しておきたいと思います。
実装する内容は、「WordPressで作ったサイトのページにSUZURIに登録した商品の一覧を表示する実装」です。
イメージとしては下図のような感じで商品一覧を表示できます。
SUZURIとは、自分で描いたイラストやロゴなどをアップロードするだけで簡単にオリジナルグッズを作成して販売することができるサービスです。
SUZURIはかなり画期的なサービスで、利用料や販売手数料は一切かからず、ショップ開設の費用は必要ありません。また、クリエイターのトリブン(取り分)の金額を設定範囲内で任意で設定することができ、商品が売れると設定したトリブンがそのままクリエイターの利益となります。
SUZURIでは、このようにクリエイターファーストで設計されており、商品を販売公開することで自身のグッズページを作成することができるのですが、当記事の内容では、さらにWordPressサイトにもSUZURIの商品を一覧表示させて販売経路を増やすことができる実装内容となっております。
SUZURIでは、APIキーの生成やデータ取得のためのAPIが提供してくれているので、今回はこの機能を利用して一覧表示させていきます。
ちなみに今回解説するサンプルコードはWordPressに依存しないただのPHPプログラムなので、WordPressでなくてもPHP環境があれば利用できますので、よろしければご活用ください。
SUZURIとは
SUZURIとは、1枚の画像(自分で描いたイラストなど)をアップロードするだけでオリジナルグッズを作成し、1個から販売できるサービスです。
GMOペパボ株式会社さんが提供しております。
グッズの製造や発送はすべてSUZURIが担当するため、運用コストがかかりません。
さらに、利用料や販売手数料は一切不要で、ショップを開設するための費用も必要ありません。
アイテムの価格は、原価に「トリブン」(クリエイターの利益分)を加えた金額になります。グッズが売れると、設定したトリブンがそのままあなたの利益となります。
手軽に始められてリスクも少なく、クリエイターにとって結構魅力的なサービスです。
今回の実装のメリット
次に、今回実装する内容のメリットについて解説したいと思います。
メリットとしては以下が考えられるかと思います。
- SUZURIと連動してWordPressサイトにも商品を表示できる
- 運用コストの削減につながる
- 柔軟にカスタマイズできる
それぞれ解説いたします。
SUZURIと連動してWordPressサイトにも商品を表示できる
今回解説するサンプルコードで実装をしていただくと、SUZURIの商品をWordPressサイトへ連動して自動で商品を一覧で表示できます。
つまり、SUZURI側で商品を新たに登録したり文字を変更したりしたときに、自動でそれらが更新された状態でWordPressのサイトにも表示されます。
運用コストの削減につながる
また、SUZURIと連動して表示してくれるので、運用コストを下げることができます。
SUZURIでは通常、SUZURIのご自身のショップの商品設定ページにて、下図のように「埋め込む」をクリックして表示されたHTMLコードをWordPressの投稿ページなどに貼り付けて表示させるようにします。
「埋め込む」ボタンをクリックすると、下図のように商品を表示するためのHTMLコードが表示されます。こちらをコピーして表示します。
ただ、こちらの方法だといちいちSUZURIの商品設定ページからこのHTMLコードをコピーして一つひとつペーストしなきゃいけなくなります。
この面倒な作業を、当記事で解説する実装をすればサクッと解決できます。
柔軟にカスタマイズできる
また、当記事で解説するコードはPHPコードになります。
そのため、PHPプログラミングの知識があれば、当記事のサンプルコードをカスタマイズしていただき、より自由にカスタマイズしてアレンジすることが可能です。
当記事で掲載しているサンプルコードはカスタマイズ性も意識しておりますので、よろしければ試してみてください。
SUZURIをWordPressへ実装する方法
それでは早速SUZURIをWordPressへ実装する方法について解説していきたいと思います。
実装する手順としては、以下になります。
- SUZURIで新規会員登録する
- 画像をアップロードして商品を公開する
- オモイデを作成して商品を追加する
- オモイデIDを確認して取得する
- デベロッパーページからAPIキーを取得する
- PHPコードにオモイデID、APIキー、ユーザー名を反映する
- WordPressのテンプレートファイルにPHPコードを追加
それぞれ解説いたします。上記の順通りに進めていただければ無理なく実装できるかと思いますので、安心して進めてみてください。
SUZURIで新規会員登録する
まずはSUZURIで会員登録をします。SUZURIをブラウザで開いてください。URLは以下になります。
アクセスしていただくと、下図のようにSUZURIのトップページが表示されるかと思います。
ページを開いたらヘッダーなどにある「無料会員登録」をクリックしていただき、会員登録ページへ進んでください。
上図のように、無料会員登録のアカウントを作成するための入力フォームが表示されるので、入力して登録してください。
登録が完了したら、上図のようにログインされた状態でページが表示されます。
これで登録は完了です。
画像をアップロードして商品を公開する
次は、SUZURIでご自身で作成されたイラストやロゴなどの画像をアップロードして商品を登録してください。
ページ右上のアイコンをクリックしてください。
上図のようにメニューが開くので、「グッズ」をクリックして商品画像のアップロード画面へ進んで商品を設定してください。
ここでは詳しく触れませんが、特に説明がなくても簡単に設定できるかと思います。
詳しくは以下の公式ページの解説をご確認ください。
オモイデを作成して商品を追加する
次は、オモイデを登録して商品一覧として表示したい商品に設定していきます。
「オモイデ」とはSUZURIの機能で、カテゴリーのような機能と思っていただいて大丈夫かと思います。
SUZURIのトップページを開いていただき、ヘッダーの右上のアイコンがノーイメージ状態かご自身で設定した画像で表示されているかと思いますが、そのアイコンをクリックします。
上図のように、ヘッダー右上のアイコンをクリックしてメニューを表示されるので、「マイショップ」をクリックしてください。(※この時点で、当記事を執筆する前にUMENOKIとしてショップの設定は完了しているので、画像などが設定済みなところは気にせず進めてください)
「マイショップ」をクリックすると、上図のようにご自身のSUZURIのショップのトップページが表示されます。
下にスクロールしていただくと、登録済みの商品が一覧で表示されております。
商品一覧の項目の画像右上に「・・・」のように点3つのボタンがあるかと思いますので、クリックします。
クリックすると上図のようにメニューが表示されるので、「オモイデ追加」をクリックします。
クリックすると、ポップアップでオモイデの名前を入力してオモイデ枠を作成できます。
当記事では「UMENOKI SHOP」としてオモイデを作成していますが、どんなタイトルでも大丈夫です。
すでに作成済みであれば新規作成する必要はありません。そのままチェックをつけて保存してください。
ご自身でオモイデを作成して商品にそのオモイデを追加したら、ページ中央あたりにあるメニューの「オモイデ」をクリックしてください。
すると、作成したオモイデのページが表示され、作成したオモイデを設定した商品が一覧で表示されます。
これでオモイデの作成と商品への設定が完了しました。
オモイデIDを確認して取得する
次に、のちに解説する商品一覧のPHPコードに必要な「オモイデID」を確認します。
先ほど開いたオモイデのページのブラウザのURLバーを確認してください。
上図のように、/omoide/の次に「191731」と数字が確認できるかと思います。この数字がオモイデIDです。
このオモイデIDは、この後のサンプルコードにて利用するので控えておいてください。
デベロッパーページからAPIキーを取得する
オモイデを作成して商品に設定し、オモイデIDを確認したら、次はSUZURIのデベロッパーページからAPIキーを取得します。
こちらからご確認ください。URLは以下になります。
https://suzuri.jp/developer/documentation/v1?locale=ja
URLへアクセスしていただきますと、上図のようにデベロッパーページが表示されるかと思います。
表示を確認できたら、ヘッダーの右上にある「アプリケーション」をクリックしてください。
すると、上図のようにAPIキーを表示するボタンのあるページが表示されます。
APIキーの「表示する」をクリックしてください。
すると、APIキーが表示されるのでこのキーを控えておいてください。
PHPコードにオモイデID、APIキー、ユーザー名を反映する
これまで設定して控えていただいた「オモイデID」と「APIキー」、そしてSUZURIのご自身のユーザー名をここで解説するPHPサンプルコードに反映していきます。
全体的なサンプルコードは以下になります。
<?php
// ---------------------------
// Suzuri API用関数定義
// ---------------------------
/**
* APIリクエストURLとコンテキストを生成
*
* @param int $limit APIで取得する商品の上限数
* @return array リクエストURLとコンテキスト
*/
function gen_param_to_suzuri($limit) {
// ---------------------------
// Suzuri API設定
// ---------------------------
// Suzuri APIの「オモイデのID」
$omoi_id = 【オモイデのID 例:123456】;
// Suzuri APIのアクセストークン(APIキー)
$api_key = 【APIのアクセストークン(APIキー) 例:ABC123DEF456GHI789JKL012MNO345PQR678STU901VWX234】;
// Suzuriのユーザー名
$user_name = 【ユーザー名 例:UMENOKI】;
// APIエンドポイントの構築
$endpoint = "https://suzuri.jp/api/v1/choices/{$omoi_id}/products";
// クエリパラメータを設定
$params = array(
"userName" => $user_name,
"limit" => $limit,
);
// 完成したリクエストURL
$request_url = $endpoint . '?' . http_build_query($params);
// HTTPリクエストのコンテキスト
$context = array(
'http' => array(
'method' => 'GET',
'header' => array(
"Authorization: Bearer {$api_key}",
),
),
);
return array($request_url, $context);
}
/**
* Suzuri APIから商品データを取得
*
* @param string $request_url リクエストURL
* @param array $context HTTPコンテキスト
* @return array 商品データ
*/
function get_suzuri_products($request_url, $context) {
// cURLでリクエストを送信
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $request_url);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $context['http']['method']);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $context['http']['header']);
$curl_result = curl_exec($ch);
curl_close($ch);
// レスポンスをデコード
$curl_result = json_decode($curl_result, true);
// 商品データを返す
return $curl_result['products'] ?? [];
}
// ---------------------------
// 商品一覧を表示
// ---------------------------
if (true) { // 適宜条件を設定
// リクエストURLとコンテキストを生成
list($request_url, $context) = gen_param_to_suzuri(50);
// Suzuri APIから商品データを取得
$products = get_suzuri_products($request_url, $context);
?>
<div class="list-suzuri-goods-page">
<?php foreach ($products as $product) : ?>
<div class="suzuri-product">
<!-- 商品リンク -->
<a href="<?php echo htmlspecialchars($product['sampleUrl'], ENT_QUOTES); ?>" target="_blank">
<!-- 商品画像 -->
<img src="<?php echo htmlspecialchars($product['sampleImageUrl'], ENT_QUOTES); ?>" alt="<?php echo htmlspecialchars($product['title'], ENT_QUOTES); ?>">
<!-- 商品タイトル -->
<p><?php echo htmlspecialchars($product['title'], ENT_QUOTES); ?></p>
</a>
</div>
<?php endforeach; ?>
</div>
<?php
}
?>
上記コードは、WordPressに依存しないただのPHPコードになるので、PHP環境のあるアプリケーション開発やCMS、ECショップなどでも活用できます。
ちなみにユーザー名の確認方法を解説いたします。
画面右上のアイコンをクリックしてください。
メニューを開いていてだき、「設定」をクリックしてください。
するとアカウント名に「新しいアカウント名」という項目があるので、そちらに入力されているのがユーザー名になります。
ここまでで、「オモイデID」「APIキー」「ユーザー名」の3つが揃いました。
// ---------------------------
// Suzuri API設定
// ---------------------------
// Suzuri APIの「オモイデのID」
$omoi_id = 【オモイデのID 例:123456】;
// Suzuri APIのアクセストークン(APIキー)
$api_key = 【APIのアクセストークン(APIキー) 例:ABC123DEF456GHI789JKL012MNO345PQR678STU901VWX234】;
// Suzuriのユーザー名
$user_name = 【ユーザー名 例:UMENOKI】;
控えていただいている3つを上記コードの部分で反映させてください。
オモイデIDは「【オモイデのID】」に、APIキーは【APIのアクセストークン(APIキー)】に、ユーザー名は【ユーザー名】に置き換えていただき、反映してください。
これで、PHPコードにオモイデID、APIキー、ユーザー名を反映する作業は完了です。
WordPressのテンプレートファイルにPHPコードを追加
あとはWordPressに反映する作業を行なっていきます。
先ほどのサンプルコードの以下の部分を、functions.phpにコピー&ペーストしてください。
コード中の「Suzuri API設定」の「オモイデID」「APIキー」「ユーザー名」の部分は、ご自身で修正した状態にしていただいたことを前提とします。
<?php
/**
* APIリクエストURLとコンテキストを生成
*
* @param int $limit APIで取得する商品の上限数
* @return array リクエストURLとコンテキスト
*/
function gen_param_to_suzuri($limit) {
// ---------------------------
// Suzuri API設定
// ---------------------------
// Suzuri APIの「オモイデのID」
$omoi_id = 【オモイデのID 例:123456】;
// Suzuri APIのアクセストークン(APIキー)
$api_key = 【APIのアクセストークン(APIキー) 例:ABC123DEF456GHI789JKL012MNO345PQR678STU901VWX234】;
// Suzuriのユーザー名
$user_name = 【ユーザー名 例:UMENOKI】;
// APIエンドポイントの構築
$endpoint = "https://suzuri.jp/api/v1/choices/{$omoi_id}/products";
// クエリパラメータを設定
$params = array(
"userName" => $user_name,
"limit" => $limit,
);
// 完成したリクエストURL
$request_url = $endpoint . '?' . http_build_query($params);
// HTTPリクエストのコンテキスト
$context = array(
'http' => array(
'method' => 'GET',
'header' => array(
"Authorization: Bearer {$api_key}",
),
),
);
return array($request_url, $context);
}
/**
* Suzuri APIから商品データを取得
*
* @param string $request_url リクエストURL
* @param array $context HTTPコンテキスト
* @return array 商品データ
*/
function get_suzuri_products($request_url, $context) {
// cURLでリクエストを送信
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $request_url);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $context['http']['method']);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $context['http']['header']);
$curl_result = curl_exec($ch);
curl_close($ch);
// レスポンスをデコード
$curl_result = json_decode($curl_result, true);
// 商品データを返す
return $curl_result['products'] ?? [];
}
次に、商品一覧を表示させたいページのPHPテンプレートファイル(page.php、page-{slug}.phpなど)に以下のコードの部分をコピー&ペーストしてください。
<?php
// ---------------------------
// 商品一覧を表示
// ---------------------------
if (true) { // 適宜条件を設定
// リクエストURLとコンテキストを生成
list($request_url, $context) = gen_param_to_suzuri(50);
// Suzuri APIから商品データを取得
$products = get_suzuri_products($request_url, $context);
?>
<div class="list-suzuri-goods-page">
<?php foreach ($products as $product) : ?>
<div class="suzuri-product">
<!-- 商品リンク -->
<a href="<?php echo htmlspecialchars($product['sampleUrl'], ENT_QUOTES); ?>" target="_blank">
<!-- 商品画像 -->
<img src="<?php echo htmlspecialchars($product['sampleImageUrl'], ENT_QUOTES); ?>" alt="<?php echo htmlspecialchars($product['title'], ENT_QUOTES); ?>">
<!-- 商品タイトル -->
<p><?php echo htmlspecialchars($product['title'], ENT_QUOTES); ?></p>
</a>
</div>
<?php endforeach; ?>
</div>
<?php
}
上記のコードをペーストした部分に、下図のようなイメージで、SUZURIの商品一覧が自動で表示されます。
デザインを整えるためのCSSコードを記述していないので、上図のように綺麗にレイアウトされていないかと思いますが、自由にCSSコードで調整できますので、お試しください。
これでSUZURIの商品一覧をWordPressのページに表示させる実装は完了です。お疲れ様でした!
まとめ
この記事では、SUZURIの商品一覧をWordPressサイトに効率よく表示させる方法を解説いたしました。
SUZURIは、自作のイラストやロゴをアップロードするだけで、オリジナルグッズを簡単に作成・販売できるサービスです。通常、SUZURIの商品をWordPressサイトに表示するには手間がかかりますが、この記事ではそれを効率化し、手軽に実現できる方法をご紹介しております。
クリエイターやエンジニアの方にとって役立つ内容となっていますので、よろしければぜひご活用ください。
お気軽に皆さんのご要望をお聞かせください!
どんなに些細なことでも構いません!よろしければ記事や当サイトへの「こんな記事があったら仕事とかで役に立つな〜」や「こうだったらもっと役に立つのに!」といったようなご要望等をお気軽にお聞かせください!今後のサービス改善にお役立てさせていただきます!
例1)Reactの技術記事を書いてほしい!
例2)WordPressの使い方とかを初心者向けに解説してほしい!...など