🏁

【Shopify.dev和訳】Apps/Getting started/Create an app

2021/09/04に公開

Shopify

apps

tech

この記事について

この記事は、Apps/Getting started/Create an app の記事を和訳したものです。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

Create an app quickstart

新しいアプリケーションを作成する準備ができました。コーディングを始められるように、開発環境を整えたいですよね。

このチュートリアルでは、Shopify CLI を使用して、Node.js を使用した組み込みアプリを作成します。Shopify CLI は、アプリを構築するためのスターターコードを生成し、多くの一般的な開発タスクを自動化します。

シナリオ | Scenario

このアプリを Shopify の管理画面に iframe で埋め込みたいと思います。Shopify アプリを作成するのは初めてなので、プログラミングを簡単かつ効率的にするために、いくつかの定型的なコードから始めたいと思います。

埋め込みアプリを作成することで、Shopify のユーザーインターフェースやオンラインストアの特定の部分に機能を追加することができます。また、アプリが Shopify と密接に統合されているため、最高のマーチャントエクスペリエンスを提供することができます。

学ぶこと | What you'll learn

このチュートリアルを終えると、以下のことができるようになります。

ローカルの開発環境を整える
アプリを作成するためのコードを生成する
開発ストアにアプリをインストールする

要求事項 | Requirements

パートナーアカウントと開発ストアを作成している。
アプリが Shopify にどのように適合するか、また構築できるアプリの種類を理解している。
最新バージョンの Node.js をインストールしている。

ステップ 1: Shopify CLI のインストール | Install Shopify CLI

お使いのコンピュータに Shopify CLI をインストールすることから始めてください。Shopify CLI は Windows、macOS、または Linux にインストールできます。コンピュータのコマンドラインを使って、サポートされているパッケージマネージャーの 1 つから Shopify CLI をインストールしてください。

Windows

Windows 10 で Shopify CLI をネイティブに使用したい場合は、まず RubyInstaller for Windows（バージョン 2.7 以上）を使用して Ruby+Devkit をインストールしていることを確認してください。

あるいは、Windows Subsystem for Linux を使用して Shopify CLI を使用することもできますが、その場合は以下のものをインストールする必要があります。

前提条件をインストールした後、RubyGems.org パッケージマネージャーを使用して、Shopify CLI を Ruby gem としてインストールできます。新しいターミナルウィンドウで、ホームディレクトリに移動し、以下のコマンドを実行します。

gem install shopify-cli

インストールの確認 | Verify the installation

Shopify CLI が正しくインストールされていることを確認するには、次のコマンドを実行します。

shopify versiton

このコマンドは、バージョン番号を返します。

macOS

Shopify CLI は、RubyGems.org または Homebrew のいずれかを通じて macOS で利用できます。

RubyGems.org

新しいターミナルウィンドウで、ホームディレクトリに移動し、以下のコマンドを実行します。

gem install shopify-cli

Homebrew

Shopify CLI をインストールする前に、Shopify のサードパーティリポジトリを Homebrew に追加する必要があります。

brew tap shopify/shopify
brew install shopify-cli

インストールの確認 | Verify the installation

Shopify CLI が正しくインストールされていることを確認するために、以下のコマンドを実行します。

shopify version

このコマンドは、バージョン番号を返します。

Linux

Shopify CLI は、RubyGems.org を通じて、また apt や yum を通じて、Linux ディストリビューションで利用可能です。

RubyGems.org

新しいターミナルウィンドウで、ホームディレクトリに移動し、以下のコマンドを実行します。

gem install shopify-cli

apt (Debian, Ubuntu)

Debian ベースの Linux システムでは、Shopify CLI を apt でインストールすることができます。

GitHub のリリースページから最新の Shopify CLI .deb ファイルをダウンロードしてください。次のステップのために、ファイルの場所をメモしておいてください。
以下のコマンドを実行します。必ず、/path/to/download/shopify-cli-x.y.z.deb を、ファイルの場所へのパスに置き換えてください。

sudo apt install /path/to/download/shopify-cli-x.y.z.deb

yum (CentOS 8+, Fedora, Red Hat, SUSE Linux)

RPM ベースの Linux システムでは、Shopify CLI は yum でインストールすることができます。

GitHub のリリースページから最新の Shopify CLI .rpm ファイルをダウンロードしてください。次のステップのために、ファイルの場所をメモしておきます。
以下のコマンドを実行します。必ず、/path/to/download/shopify-cli-x.y.z.rpm を、ファイルの場所へのパスに置き換えてください。

sudo yum install /path/to/download/shopify-cli-x.y.z.rpm

インストールの確認 | Verify the installation

Shopify CLI が正しくインストールされていることを確認するために、以下のコマンドを実行します。

shopify version

このコマンドは、バージョン番号を返します。

ステップ 2: 新規プロジェクトの作成 | Step 2: Create a new project

Shopify CLI をインストールしたら、新しいプロジェクトを作成する準備ができています。

プロジェクトを作成したいディレクトリに移動し、shopify node create を実行します。このコマンドは、サブディレクトリに新しい Node.js アプリを足場にして、パートナーダッシュボードにアプリを作成します。

ステップ 3: ローカル開発サーバの起動 | Step 3: Start a local development server

アプリが作成されたら、プロジェクトディレクトリに移動して shopify node serve を実行し、ローカルの開発サーバーを起動することで、アプリを操作することができます。

Shopify CLI は ngrok を使用してトンネルを作成し、アプリを作成する際に必須となる、固有の HTTPS URL を使用してアプリにアクセスできるようにします。

ステップ 4: 開発ストアにアプリをインストールする | Step 4: Install your app on your development store

サーバーが起動している状態で、前のステップでターミナルがプリントアウトした URL を開きます。URL を開くと、開発ストアへのアプリのインストールを促すメッセージが表示されます。

これで、新しいアプリがインストールされた開発ストアが稼働しました。

次のステップ | Next steps

アプリをテストするためのデータを入力し、Polaris でユーザーインターフェースをデザインし、Shopify の API と対話し、変化するデータとアプリが同期するように Webhook を設定することで、アプリの構築を開始します。

Shopify アプリのご紹介

Discussion

ログインするとコメントできます