# すぐ使えるEコマース、10年後

> 2015年12月、この埋め込みは出たばかりの新機能でした。今ではそれが製品のすべてです。2015年当時のスニペットと2026年の最新版を並べて、実際に何が変わったかを短く振り返ります。

Ryan Badger - 2015年12月9日 - 読了目安 2 分

## この記事がかつて伝えていたこと

2015年12月、「Out of the Box eCommerce(すぐ使えるEコマース)」は出たばかりの新機能でした。売りはこうです。既存のサイトにスクリプトタグを1つ貼るだけで、商品カタログが現れる。当時の埋め込みコードは、ダッシュボードからコピーする40項目のJSONの塊でした。設定はできるけれど、読むのが*大変*な量でした。

この記事は、それがすべてでした。10年前の話です。

## 何が変わったのか

埋め込みは、もはや機能ではありません。製品そのものです。Shoprocketは今も「どんなWebサイトにも貼れるスクリプト」ですが、その下のアーキテクチャは、2015年のスニペットからは見違えるほど変わりました。大きな変化は2つあります。

### スニペットが短くなった

2015年のペイロードは、見た目に関するあらゆる設定を、貼り付けの時点でJSONにシリアライズしていました。ボタンの色、パディング、商品の並び順、画像のサイズ、「送料無料」のピルを表示するかどうか、さらに30個ほどのスイッチです。今ではそのすべてがサーバー側にあり、ダッシュボードで一度設定すれば済みます。埋め込みそのものは、ただの識別子です。

**以前(2015年):**

```
<script type="application/json">
{"store_id":"1","publishable_key":"1","options":{
  "products_to_display":"categorized",
  "product_size":"medium",
  "image_width":"1126",
  "image_height":"1400",
  "button_style":"standard",
  "product_pagination_limit":"6"
  /* …さらに30個のフィールド… */
},"styles":{
  "button_background":"#233642",
  "button_color":"#ffffff"
  /* …以下同様… */
}}
</script>
<script async src="https://cdn.shoprocket.io/loader.js"></script>
```

**現在(2026年):**

```
<!-- 例です。実際のスニペットは、ダッシュボードの「販売チャネル → 埋め込み」で取得してください -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

1行です。機能は同じで、デフォルトはより良くなり、描画されるストアフロントはサーバーから設定を読み込むので、あの30個のスイッチを手でいじることはもうありません。

### 設定がダッシュボードに移った

カスタマイズしたいことは、かつてすべて埋め込みのペイロードの*中*にありました。つまり、埋め込みを編集することは、Webサイトを編集することを意味しました。今はストアを一度編集すれば、どのサイトにある埋め込みも、すべて即座に更新されます。3つのサイトで販売していても、ブランドカラーの変更は一度で済みます。

> **ヒント:**サイトごとの上書きが本当に必要な場合(ストアは1つで、見た目のテーマが複数)は、ウィジェットの`data-sr-theme="handle"`で、埋め込みを特定の保存済みテーマに固定できます。サイトごとにスニペットは違っても、背後にあるストアは1つです。

## 今の埋め込みにできること

- **どんなWebサイトにも。** WordPress、Squarespace、Webflow、Framer、Carrd、Notion、素のHTML、静的サイト。スクリプトタグを貼れるなら、ストアフロントを持てます。
- **どんな表示形式にも。** 単体の購入ボタン、商品グリッド、スライドインのカート、あるいはストアフロント全体。スクリプトは1つで、`data-sr-type` のバリエーションが4種類あります。
- **取引手数料ゼロ。** サブスクリプション制です([料金を見る](https://v3.shoprocket.io/ja/pricing.md))。決済そのものにはStripeやPayPalの通常の手数料がかかりますが、Shoprocketがその上に上乗せして取ることはありません。
- **どんなロケールにも。** ウィジェットは、21ロケールの中から訪問者の言語を自動で検出し、価格、支払い方法、ラベルをその言語に合わせます。

## 変わらなかった、ただ1つのこと

そもそも「すぐ使える」と呼んだのは、貼り付けたその瞬間から動いたからです。開発者もいらず、テーマのカスタマイズも、既存サイトの作り直しも要りません。それは10年たった今でも変わりません。それを証明するのに必要な文字数が、減っただけです。

まだ最新版を試していないなら、[無料トライアルを始めましょう](https://app-v3.shoprocket.io/signup)。セットアップは5分もかかりません。

---

- HTML version: https://v3.shoprocket.io/ja/blog/out-of-the-box-ecommerce-a-decade-later
- Language: 日本語 (ja)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/out-of-the-box-ecommerce-a-decade-later.md), [Deutsch](https://v3.shoprocket.io/de/blog/ecommerce-out-of-the-box-ein-jahrzehnt-spaeter.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/out-of-the-box-ecommerce-a-decade-later.md), [English](https://v3.shoprocket.io/blog/out-of-the-box-ecommerce-a-decade-later.md), [Español](https://v3.shoprocket.io/es/blog/ecommerce-listo-para-usar-una-decada-despues.md), [Français](https://v3.shoprocket.io/fr/blog/ecommerce-cle-en-main-dix-ans-apres.md), [עברית](https://v3.shoprocket.io/he/blog/out-of-the-box-ecommerce-a-decade-later.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/out-of-the-box-ecommerce-a-decade-later.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/ecommerce-siap-pakai-satu-dekade-kemudian.md), [Italiano](https://v3.shoprocket.io/it/blog/ecommerce-pronto-all-uso-dieci-anni-dopo.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/e-komercija-is-dezes-po-desimtmecio.md), [Norsk](https://v3.shoprocket.io/nb/blogg/nettbutikk-ut-av-boksen-ti-ar-etter.md), [Nederlands](https://v3.shoprocket.io/nl/blog/out-of-the-box-ecommerce-tien-jaar-later.md), [Polski](https://v3.shoprocket.io/pl/blog/ecommerce-z-pudelka-dekade-pozniej.md), [Português](https://v3.shoprocket.io/pt/blog/ecommerce-pronto-para-usar-uma-decada-depois.md), [Română](https://v3.shoprocket.io/ro/blog/ecommerce-gata-de-utilizare-un-deceniu-mai-tarziu.md), [Русский](https://v3.shoprocket.io/ru/blog/out-of-the-box-ecommerce-a-decade-later.md), [ไทย](https://v3.shoprocket.io/th/blog/out-of-the-box-ecommerce-a-decade-later.md), [Türkçe](https://v3.shoprocket.io/tr/blog/hazir-kutudan-eticaret-on-yil-sonra.md), [中文](https://v3.shoprocket.io/zh/blog/out-of-the-box-ecommerce-a-decade-later.md)