今日からShopifyで販売を開始しよう

Shopifyを無料で試して,ビジネスの開始,運営,成長の為に必要なすべてのツールとサービスを体験しましょう。

ノ，トパソコンで小規模ビジネス向けロ，ンの申し込みを行っている女性。

続きを読む

Shopifyアプリとテ，マの開発方法

  • この記事は3分で読めます

Shopifyに様々な独自機能やデザ批发商ンを組み込めるShopifyアプリとShopifyテ，マ。この記事はそんなShopifyアプリとテーマの開発に必要な基本情報と役に立つ技巧を日本の開発者向けにまとめたものです。初心者の方からすでに開発に着手されている方にまで必要な情報を簡単に幅広く網羅してあります。全ての情報は公式サ电子邮箱ト(英語)に記載されています。

アプリ開発の流れ

アプリ開発の基本的な流れは以下になります。

[パ，トナ，アカウントの登録]> .使用实例

[開発ストアの追加]>

[アプリの作成と資格情報の取得]>

[開発ストアへのaapl . cerンスト. cerル]> . cer

[apiを使った処理の作成.) >

[北极星を使ったUIの作成。>(埋め込みアプリにしたい場合)

[Webhookを使った処理の作成]>(通知をトリガにした処理をする場合)

[テ.マを使ったストアフロントの作成]>(ストアフロントに機能を追加する. com場合）

[テーマを使わない外部ストアフロントの作成)>(ストアフロントを外部サイトやモバイルアプリで構築したい場合)

[チェックアウトの拡張。>(配送先指定から決済までの処理に機能を追加する場合)

[アプリストアへの申請。>(アプリストアにアプリを公開したい場合)

テ，マ開発の流れ

テ，マ開発の基本的な流れは以下になります。

[パ，トナ，アカウントの登録]> .使用实例

[開発ストアの追加]>

[テ，マを使ったストアフロントの作成]> .使用实例

[テ，マストアへの申請](テ，マストアにテ，マを公開したい場合)

パ，トナ，アカウントの登録

こらから行います。

開発ストアの追加

アカウント登録後ログ@ @ンするパ，トナ，ダッシュボ，ドに表示されるストアの追加ボタンから行います。

アプリの作成と資格情報の取得

パートナーダッシュボードのアプリメニューからアプリを作成し,APIを利用するために必要な資格情報(credentails)を取得します。

開発ストアへの▪▪ンスト▪▪ル

資格情報を使ってapiを呼び出すためのパミションを取得するURLを生成し,開発ストアへインストールします(※実、際にアプリストアに掲載された場合や,アプリ設定のテスト機能を使う場合は,アプリ設定のURLが呼ばれますので,その中で新規か再インストールかを判別して,このパーミション取得用のURLにリダイレクトさせる必要があります。再ンストルかどうかの判定は，現在保存されているアクセストクンでストア属性を参照するapiを呼び出して，ト，クンが有効化どうか確認するなどがあります)。

apiを使った処理の作成

取得したパ，ミションからOAuthの仕様に従いアクセスト，クンを生成して，apiを呼び出します

apiには以下の3種類がありますが，アクセストクンの取得方法は同じです。

GraphQLにいては以下のアプリで動作確認が可能です。

APIはGraphQLが推奨となっています。GraphQLが初めてという方は，GraphQLの基本的な説明をご覧ください。

GraphQLのデ，タ検索の方法は，QueryRootを参照してください。細かい検索仕様も記載されています。

セッション管理はクッキ，ではなく，セッショント，クンを使います。詳しくはチュ，トリアルをご覧ください。

GraphQLを使った一括処理は，批量操作apiを使います。詳しくはチュ，トリアルをご覧ください。

配送関連のapiを使うことで，配送の自動化や倉庫連携、アプリによる送料計算(注:マ，チャントの条件あり)を実現できます。

こらの記事も参考にしてください:

GraphQLを始めよう

埋め込みアプリの読み込みをすばやく確実におこなう方法

Shopify履行订单API:フルフィルメント体験の向上

北极星を使ったUIの作成

(埋め込みアプリにしたい場合)

マ，チャント管理画面やPOSアプリに埋め込むuiを作成するには，北极星というuiラブラリを使います。これによりShopifyと同様のデザそしてShopifyの画面と作成したUIを連携するには应用的桥梁というsdkを使います。また，管理画面に独自のメニューを挿入するには、应用程序扩展にアプリのurlを設定します。应用的桥梁と应用程序扩展を利用することでアプリのメイン画面以外にも、注文管理画面やPOSアプリのメニューといった拡張ポイントにアプリの機能を追加することができます。

サブスクリプション(定期購入)を実現するアプリの開発も可能です。詳しくはこらをご覧ください。

こらの記事も参考にしてください:

Shopify埋め込みアプリの三種の神器:北极星,应用桥梁,应用扩展を使いこなそう!

ShopifyサブスクリプションAPIについて:Shopifyチェックアウトと統合できるアプリの構築

Webhookを使った処理の作成

(通知をトリガ，にした処理をする場合)

Webhookを使うことで通知に基づく処理を実装することができます(例:注文が来たら連携している在庫システムのAPIを呼び出すなど)。Webhookはマーチャントの設定画面から手動で登録も可能ですし、APIで自動登録することも可能です（APIで登録したWebhookは設定画面には表示されません。削除はAPI、または登録したアプリのアンインストールで行われます）。

Webhookは，Shopify決められた時間以内に。ですので重複して送信される可能性を想定し,かつ最初にレスポンスを返してからあとで非同期で処置を行うような設計が必要となります。詳細は上記のリンク先をご覧ください。

テ，マを使ったストアフロントの作成

(ストアフロントに機能を追加する場合)

ストアフロント,すなわちオンラインストアのサイト側(購入者が利用する側)に機能を追加する場合(例:カートに独自項目を増やす,会員向けポイント機能を作るなど)は,テマの開発をする必要があります。その際に，テ，マの中身をストアのデ，タに基づいて動的に変更するには液体というテンプレ，ト言語を使います。そのようにして作られたテ，マは管理画面からテ，マエディタを使ってドラッグ&ドロップなどで視覚的にカスタマ@ズできます。

アプリからテマに機能を追加したい場合(例:チャット提供やポント付与など)は，主题应用扩展を使います。詳しい仕様はこら，実装方法はこら(Shopify CLIが必要です)をご覧ください。

Shopifyのオンラインストアの特定のURLをアプリの描画に置き換えたい場合(例:テーマの画面遷移の中にアプリが提供する外部の画面を差し込むなど),アプリのサーバーにテーマからアクセスしたい場合(例:サーバーを介して管理APIをテーマのJavaScriptから呼び出して結果を得たいなど)は,应用代理服务器という機能を使ってShopifyのオンラ@ @ンストアのurlとアプリのサ，バ，のurlをマッピングすることができます。

注文完了ページに独自のスクリプトを挿入したい場合(例:コンバージョン計測のJavaScriptを実行したい,液体のデータを表示したいなど)は,追加スクリプトの設定を行うか，ScriptTag APIを呼び出すことで可能です。

Shopifyの様々なデータ(例:产品、收集、客户、订单など)に独自の項目を追加したい場合(例:顧客の誕生日や注文の配送日時など)は,Metafieldsを使ってAPIとShopify管理画面で実現することができます。Metafieldsはテマから液体として参照することができ，テ，マエディタとも連動するので，テ，マに高い柔軟性，拡張性を持たせることができます。

こらの記事も参考にしてください:

Shopifyテーマカスタマイズの三種の神器:购物车属性,行项目属性,客户注意を使いこなそう!

Shopify主题节を初めて作成するときのポ电子商城ント

欧宝体育官网入口首页在线商店2.0で应用程序块をレスポンシブにする方法

Shopify主题块の使い方

    テ，マを使わない外部ストアフロントの作成

    (ストアフロントを外部サ▪▪トやモバ▪▪ルアプリで構築したい場合)

    以前はヘッドレスコマ，スと呼ばれていた,オンラインストアをShopify外部のウェブサイトやモバイルアプリとして作成し,コマース機能だけShopifyから提供する開発方法はカスタムストアフロントと呼ばれ,店面APIやSDK，コ，ディングの不要なチェックアウトリンクを利用して実現します。また，氢という反应ベースのフレームワークを使うことで,高い柔軟性を持った高機能なカスタムストフロントをホスティング環境付きで開発することができます。

    こらの記事も参考にしてください:

    Shopify Storefront API:カスタムストアフロントを強化するアップデ，ト

    氢气による構築:開発者プレビュ，が利用可能になりました

    氢气を使用したストアフロントはなぜパフォ，マンスが高いのか

    チェックアウトの拡張

    （配送先指定から決済までの処理に機能を追加する場合)

    商品ページからカート画面まではテーマがUXを提供しますが,それ以降の配送先指定,配送方法(送料)選択,決済(購入完了)の画面はチェックアウトと呼ばれ,Shopifyが提供します(デザインの一部はテーマから変更可能)。このチェックアウトにアプリから機能を提供するには结帐应用扩展を使います。签出扩展は，用户界面扩展とShopify脚本で構成され，以下の拡張ポ。

    こらの記事も参考にしてください:

    購入後チェックアウト拡張機能:ベ，タアクセスで利用可能に

    アプリストアへの申請

    (アプリストアにアプリを公開したい場合)

    アプリには1つのマーチャントのみにインストール可能な非公開のカスタムアプリと,アプリストアに公開して任意のマーチャントに利用してもらう公開アプリがあります(検索対象から外して実質非公開のように運用する設定もできます)。多くのマーチャントのニーズに合う汎用的なアプリが開発できた場合は,アプリストアに公開申請を出してたくさんのマーチャントに使ってもらいましょう。アプリは無料でも有料でも公開できます(申請した後は審査が入ります)。

    こらの記事も参考にしてください:

    Shopifyアプリ公開パフェクトガド:アプリエコシステムに上手に参加する方法

    テ，マストアへの申請

    (テ，マストアにテ，マを公開したい場合)

    自分で独自に作ったテ，マは，アプリストアとは別にテ，マストアに公開申請して販売することができます。多くのマ，チャントに価値を提供できるテ，マが開発できた場合は，テ，マストアに公開申請を出してたくさんのマ，チャントに使ってもらいましょう(申請した後は審査が入ります)。

    こらの記事も参考にしてください:

    Shopifyテ、マレビュ、を効率的に進めるためのポ、ント

    Shopifyテ，マストアで成功するために必要なこと

    サンプルコドや開発ルの活用

    開発の流れを体験できるサンプルコ，ドやチュ，トリアルがあります。細かい部分はわからなくても書かれた通りに実装していけば実際に動作するアプリやテーマを作ることができます。また，アプリ開発や,テマ開発ジには，サンプルコ，ドの他に便利な，ルが紹介されていますのでぜひ試してみてください。

    アプリとテ，マの開発の注意点

    アプリとテマの開発にはいくか注意点がありますので以下もご参照ください。

    こらの記事も参考にしてください:

    レト制限にいて

    ShopifyのAPIのバジョンと廃止にいて

    Shopifyテ，マでSassが非推奨となります

    アプリとテ，マの開発のtips

      • ベストプラクティスを読み込む
      • テスト環境にいて
        • 前述のようにパ，トナ，アカウントから開発ストアを作成すれば無期限でテスト環境を入手できます
          • 仕様を要望に合うように読み替える
            • 要望を直接満たす仕様がShopifyになかったとしても,既存の仕様をうまく読み替える(応用する)ことで解決することもあります。例えば，こらの配送日時指定の追加方法は，エレメントのタプやuiを変えることで他のカ，ト拡張に応用できますし，こらのクポンコドのurl埋め込みは会員向けポント機能の構築などに応用できます

              その他の参考資料

              Shopifyパ，トナ，プログラムでビジネスを成長させる
              マーケティング,カスタマイズ,またはWebデザインや開発など提供するサービスに関係なく,Shopifyパートナープログラムはあなたを成功へと導きます。プログラムの参加は無料で,収益分配の機会が得られ,ビジネスを成長させる豊富なツールにアクセスできます。情熱的なコマスコミュニティに今すぐ参加しましょう!

              今すぐ登録

              よくある質問

              Shopifyアプリを開発するにあたって，使用するプログラミング言語に制限はありますか?　

              いいえ，ありません。ただし,Shopifyの提供するAPIや仕組みに対応できるウェブアプリケーションを作ることができるプログラミング言語である必要があります。

              Shopifyアプリを開発するにあたって，必ず反应を使わないといけないのでしょうか?

              いいえ,反应を使わなくても,代替のJavaScriptやCSSのライブラリが提供されています。ただし，Reactの利用が推奨されています。

              Shopifyアプリを開発するにあたって，必ずGraphQLを使わないといけないのでしょうか?

              いいえ,GraphQLを使わなくてもREST APIで開発することはできますが,推奨はGraphQLであり,新しい機能のほとんどはGraphQLでのみサポートされます。

              Shopifyアプリを開発するにあたって，サ，バ，環境は自分で用意する必要がありますか?

              はい,Shopifyアプリの実体はShopifyの外部のウェブアプリケーションとなるため,アプリ開発者の方でそれをホスティングするサーバー環境を用意していただく必要があります。

              Shopifyのテ，マは自分のPC上で開発できますか?

              はい,管理画面からテーマをダウンロードしてローカルのPC上で変更して再度ストアにアップロードして使うことができます。Shopify CLI的主题を使うと、ローカルPCでプレビューできたりと、よりスムーズにローカル環境での開発が可能です。
              トピック:
              Shopify開発者