こんにちは、AWA Biz代表の小川です！ 2021年6月末に発表されたShopifyのOnline Store2.0で、Shopify CLIの使用が推奨されるようになりました。 <a href="https://shopify.dev/themes/tools/cli" target="_blank" rel="noopener noreferrer">https://shopify.dev/themes/tools/cli</a> 今日はShopify CLIのインストール方法と使い方をまとめていきます。<h2 id="h8f18ab151c">Shopify CLIとは何か</h2>Shopify CLIとはShopifyの開発を行うためのコマンドラインツールです。これを導入することにより、ローカルのエディタ(VSCodeなど)で編集したソースコードがストアに反映されるようになります。 これまでもTheme Kitというツールがあったのですが、より簡単に環境構築ができるようになり、できる幅も広がりました。<h2 id="h0e276b1f03">Shopify CLIのインストール方法</h2>Shopify CLIを使用するためには、前提条件として<ul><li>Ruby2.7以上がインストールされていること</li><li>Homebrewがインストールされていること（Mac OSの場合）</li></ul>が必要になります。 上記二つのインストール方法、またはアップデート方法は検索すると記事がたくさん出てきますのでここでは省略します。 インストールのために打つコマンドは以下の3つです。 ターミナルを開いてコマンドを実行します。 gemでインストール<pre><code>$ gem install shopify-cli</code></pre>homebrewでインストール（MacOSの場合）<pre><code>$ brew tap shopify/shopify
$ brew install shopify-cli</code></pre>インストールに成功していたら、以下のコマンドを打てばバージョン番号が表示されます。<pre><code>$ shopify version
2.1.0</code></pre><h2 id="h2de013d58d">Shopfy CLIでストアと接続する</h2>ローカル環境とShopifyストアを接続します。 接続するためにはストアのスタッフ権限かコラボレーター権限が必要です（もちろんオーナーでも接続できます）。 接続するコマンドは以下になります。<pre><code>$ shopify login --store [ストアURL]</code></pre>[ストアURL]の箇所はそれぞれのストアURLで置き換えてください。 <code>awa-biz.myshopify.com</code> などのドメインです。 コマンドを打つと自動的にブラウザが立ち上がりShopifyパートナーのログイン画面になります。 アカウントを選択してログインします。接続が成功するとブラウザで↓のようなメッセージが表示されます。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/fa6a3b5f6f9243468dd261ab3c831963/image-1024x111.webp" alt=""> このメッセージが表されたブラウザのタブは閉じて大丈夫です。 少し待つとターミナル上でもShopifyパートナーアカウントを選択する画面が表示されるので、アカウントを選択します。 下記がアクセスが成功したら表示されるメッセージです。 アカウント名：AWA Biz ストアURL：[ストアURL].myshopify.com の場合です。<pre><code>Logged into store [ストアURL].myshopify.com in partner organization AWA Biz</code></pre>Theme Kitでは管理画面からプライベートアプリの有効化など複雑な設定が必要だったのですが、Shopify CLIでは不要になりました！環境構築が容易になり、よりローカルで開発しやすくなりました👍<h2 id="hc6a57022c5">テーマを新規作成する</h2>下記コマンドでテーマを新規作成できます。 [-u リポジトリのURL]はどのテーマを元に作成するか、GitリポジトリURLを入力します。入力がなければDawnをベースに作成されます。<pre><code>$ shopoify theme init [テーマの名前] [-u リポジトリのURL]</code></pre>2021年7月末現在新仕様に対応したテーマはDawnのみですが、今後色々なテーマが対応していくことになると思います。テーマごとのGithubが作られることになると思いますので、そのURLを指定していくことになると思います。<h2 id="h5461c4aeff">既存のテーマをダウンロードする</h2>既存のテーマをダウンロードするにはこちらのコマンドを実行します。<pre><code>$ shopify theme pull [-i テーマのID]</code></pre>現在のディレクトリにテーマフォルダが展開されるので、あらかじめ特定のディレクトリに移動してからpullするようにしましょう。 共同開発する場合は、こちらのコマンドを使用せずに、Githubのソースコードをcloneして開発を進めることができるため、別の方が開発していたコードを修正する場合などに使用することになると思います。<h2 id="h580701964d">開発を進める</h2>テーマがローカル環境に準備できたところで、いよいよ開発を進めていきます。 Shopify CLIを使ってみて、個人的にここが一番感動したところです！ ローカルで開発したコードをブラウザで確認する時は以下のコマンドを実行します<pre><code>$ shopify theme serve</code></pre>コマンドの実行が成功すると、下記メッセージが表示されます。[ストアURL]と125503307934は各ストアごとに異なりますので、お使いのストアに置き換えてください。<pre><code>┃ Please open this URL in your browser:
┃ http://127.0.0.1:9292
┃ 
┃ Customize this theme in the Online Store Editor:
┃ https://[ストアURL].myshopify.com/admin/themes/125503307934/editor
┃ 
┃ Share this theme preview:
┃ https://[ストアURL].myshopify.com/?preview_theme_id=125503307934</code></pre>3つURLが表示されましたが、どのURLにアクセスしても現在開発中のテーマが見れるようになっています。 しかし、このURLはストアにアップロードされているテーマを見ているわけではありません。development themeと言って開発用にプレビューされている仮テーマ状態になります。 ストアにアップロードされているテーマを直接編集するわけではないので、共同開発の時に編集の競合が発生するなどの心配がなくなり、かなり開発がスムーズに行えるようになりました！ さらに、「http://127.0.0.1:9292」はローカルでテーマをプレビューしているので、liquidやcssファイルを編集したらホットリロードされて、すぐに確認できるようになりました！ VSCodeから編集→画面リロード→表示に時間がかかる。。。という繰り返しでしたが、かなり開発しやすくなった印象です。 ↓のGifのようにcssを変更すると、一瞬で反映されます！ <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/e131f196ba154325a74738d520f90533/Screen-Recording-2021-07-31-at-13.43.49.gif" alt=""><h2 id="hc48b4c5be5">テーマをアップロードする</h2>development themeはShopifyからログアウトしたり一定期間経過すると削除されてしまうので、ある程度開発が完了したらストアにテーマをアップロードしましょう。 その時に実行するのが、下記のコマンドです。<pre><code>$ shopify theme push</code></pre>こちらもたくさんオプションがあるので、ぜひ公式サイトを確認してみてください。 一旦非公開テーマとしてアップしたり、開発テーマとしてアップロードしたり、既存のライブテーマを更新したり、と色々なオプション設定が可能です。 <a href="https://shopify.dev/themes/tools/cli/theme-commands#push" target="_blank" rel="noopener noreferrer">https://shopify.dev/themes/tools/cli/theme-commands#push</a><h2 id="h519b24498b">pull,pushコマンドでエラーになってしまった場合</h2>コマンドを打っていると <code>「403::(ShopifyCli::API::APIRequestForbiddenError)」</code> が発生する場合がありました。こちらの解決策も掲載しておきます（※一時的な解決策ですがご了承ください）。 shopify cliのgithubでもissuesとして報告されていて、結構困っているコメントが見られました。。 <a href="https://github.com/Shopify/shopify-cli/issues/1361" target="_blank" rel="noopener noreferrer">https://github.com/Shopify/shopify-cli/issues/1361</a> 解決策は以下の通りです。<ul><li>開発ストアからログアウトする</li><li>開発ストアのURLを直で入力してログインする</li><li><code>https://[store-name].myshopify.com/admin</code></li><li>このときパートナーアカウントのログインが求められるので、入力してログイン</li><li>ターミナルで一度Shopifyログアウト→ログインする</li><li><code>$ shopify logout</code></li><li><code>$ shopify login --store [ストアURL]</code></li><li>再度pullやpushコマンドを実行</li></ul>エラーが発生しなければ無事解決です！<h2 id="ha214098e44">まとめ</h2>今回はShopifyのOnline Store2.0で推奨されるようになったShopify CLIコマンドについてまとめてきました。ここでは書ききれなかったコマンドももちろんありますので、ぜひ色々試してみてください。 AWA Bizでは効果が出るサイトを作成することをモットーにECサイト案件からWebサイト案件まで幅広くご対応しております。 案件のお見積もりやご相談はお問い合わせフォームよりご連絡ください。 <a href="/contact">お問い合わせはこちら</a>

小川匡教

Shopify CLIのインストール方法と使い方まとめ

<h2 id="h00145ce6cf">想定するケース</h2><ul><li>現在お名前.comなど別のドメイン取得サービスでドメインを取得している</li><li>上記ドメインでWordPressサイトを構築しているが、Shopifyに移行したい</li><li>Shopifyでドメインを管理するようにしたい</li></ul><h2 id="hca40bb25a5">「ドメインを移管する」と「既存のドメインに接続する」の違い</h2>ドメイン移管・・・ドメインを登録・取得していた業者を別の管理業者に移すこと（今回であればお名前.com→Shopify） 既存のドメインに接続する・・・ドメインを登録・取得していた業者は移さずに特定の独自ドメインに接続すること（お名前.comで取得したドメインに接続すること） 要は、ドメインを取得している業者がShopifyかどうかの違いになります。 それぞれのメリット・デメリットを以下にまとめます。 もちろんこれ以外にもあるかもしれませんが、現時点で私が思っている所感です。<h3 id="hf6fc67c77c">ドメイン移管</h3>・メリット Shopifyでストアとドメインを管理できるようになり、構成がシンプルになる。 ・デメリット Shopifyから別のプラットフォームにECサイトを移行する際に再度移管手続きが必要になり処理が面倒<h3 id="h3130795cdd">既存ドメインに接続</h3>・メリット 使い慣れたコントロールパネルがそのまま使用可能 Shopifyから別のプラットフォームにも移行しやすい ・デメリット Shopifyに接続する際にDNSレコードの設定など複雑な処理が必要 個人的にはShopifyの用途のみに使用する想定であれば、ドメインを移管した方がいいですし、 Shopify以外の用途（今後別のECプラットフォームに移行する可能性がある）<h2 id="h35d565d454">ドメインを移管する手順</h2>設定＞ドメイン＞アクション＞ドメインを移管するを選択 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/2260e64c7b384670ae4a0d7c513d82de/shopify-domain-img1.webp" alt=""> 移管したいドメインを入力して次へボタンをクリックする。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/0e32e95c33db44abb5cfeeb2aff3314a/shopify-domain-img2.webp" alt=""> 「ドメインを認証する」をクリックする。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/c65a00afbbed4d92b36894b1a4f00cc8/shopify-domain-img3.webp" alt=""><h4 id="h7e12016c8e">「ドメインがロックされてます」というメッセージが表示された場合</h4><img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/36ebed71ff824b0ca4bafc87032c15f1/shopify-domain-img4.webp" alt=""> 取得元のドメインサービスから意図しないドメインの移管を防ぐ機能が設定されている場合があり、これを解除する必要があります。 メッセージが表示されなかった場合は<a href="#domain-rock">こちら</a>まで進んでください。 ※今回はお名前.comで取得していたドメインを想定してドメインロック解除の手続きを実施ます。 別のサービスで取得されている場合はそれぞれのサービスの手順に従って実施してください。 お名前.com naviにログインし、上部メニューから「ドメイン機能一覧」をクリックしてください。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/5c4071e1bc98407ea397241f2bfaa383/shopify-domain-img5.webp" alt=""> ページ真ん中ほどまでスクロールすると「ドメイン移管ロック」という項目がありますので、こちらをクリックします。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/6b06540ce6d54de7922fc79cab01981c/shopify-domain-img6.webp" alt=""> ロックされているドメインのステータスがONになっていますので、OFFに切り替えます。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/f609d4ba67f54703bdbfcecc777c3eef/shopify-domain-img7.webp" alt=""> ドメイン移管ロックがOFFになりましたら、メールに完了通知が来ますので、少し待ちます（私の場合は1分ほどで来ました）。 Shopifyの画面に戻り更新ボタンをクリックします。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/f537d9a1daff4d97946d812d6fa431b0/shopify-domain-img8.webp" alt=""> ドメインロックが解除されているメッセージが出たら、次へボタンをクリックしてください。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/bba7de10483341808f52f1d7c057465f/shopify-domain-img9.webp" alt=""> 認証コードの入力が求められますので、入力します。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/72e7a98e47de40c9abb37eb10301f712/shopify-domain-img10.webp" alt=""> お名前.comの場合、上部メニューより、 ドメイン＞利用ドメイン一覧＞対象のドメインをクリックしドメイン詳細を開く ドメイン詳細画面でAuthCodeの欄に表示というボタンがあるので、そちらをクリックします。 表示されたコードをコピーしてShopifyの画面に入力し、次へをクリックします。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/58f8c38350ef4395973f0775333f899e/shopify-domain-img11.webp" alt=""> 購入と移管をクリックします。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/f5232e2f4daf4654ac4a7d41e3feb08c/shopify-domain-img12.webp" alt=""> 移管が進行中という画面が表示されれば移管手続き完了です。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/3b46299644144a92ba73aeba70938be7/shopify-domain-img13.webp" alt=""> 移管まで7日〜10日ほど時間がかかるようですので、完了まで待ちます。 移管後はShopifyから確認メールが届きますので、それを確認しましょう。 もしShopifyの移行作業が上手くいかない場合はAWA Bizでお手伝いさせていただきますので、下記のお問合せページからお気軽にお問合せください。 <a href="/contact">お問い合せはこちら</a>

お名前.comからShopifyにドメインを移管する方法

こんにちは！AWA Biz代表の小川です！ 弊社でもShopify案件が増えてきてまして、色々な案件を進めております。 Shopifyに限らずなのですが、既存サイトからのリプレイスってかなり緊張します（いまだに...）。 最悪の場合、移行に失敗してサイトが見れなくなる、やその他思わぬところに影響が出てしまう可能性もあるので、慎重に作業を進める必要があります。 今回は実際に取得したドメインを使用して、WordPressサイトからShopifyに移行する方法を画像を使って解説していきます👍<h2 id="hdbf98b940f">前提条件</h2><ul><li>独自ドメインをお名前.comで取得済み（awa-biz.work）</li><li>お名前.comのドメインに対するネームサーバー設定をXserverに設定している状態（ドメインをXserverに紐づけている状態）</li></ul>			<img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/dd92619ba15c4993befc214c678d9a66/img1.webp" alt=""><ul><li>Xserverサーバー上でWordPressをインストール済み（テストサイトのため初期状態）</li></ul>			<img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/7e88077f4ee14f8cb914ceb01ca0362a/img2.webp" alt=""> <h2 id="h195cc9fd60">移行手順</h2><h3 id="hdf5fc94037">お名前.comでDNS設定を変更する</h3>お名前.comのサイト（ドメインを取得したサイト）でDNS設定を追加する必要があります。 詳細な手順を以下から解説していきます！ お名前.com Naviにログイン後、メニュー内から「ドメイン＞利用ドメイン一覧」をクリックします。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/41c64b68f875445aa33ad530000f317d/img3.webp" alt=""> すると契約しているドメインの一覧が表示されますので、DNSレコードの箇所にある変更をクリックします。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/8d9905a8ff9449d892bc012106da5e02/img4.webp" alt=""> ↓のような画面が表示されるので、次へボタンをクリックします。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/5a1c7365aae94177bdc83ba109726e2b/img5.webp" alt=""> 画面真ん中あたりに表示される「DNSレコード設定を利用する」の設定するをクリックします。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/1708be0ee6474889a5c91d5094d917aa/img6.webp" alt=""> 遷移後の画面で少しスクロールすると↓のような入力ボックスがあります。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/c6bad60b4aa4443a9d83d5b64ea15786/img7.webp" alt=""> ここでAレコードとCNAMEレコードを追加します。 まずはAレコードを設定していきましょう。 TYPEがAになっていることを確認し、VALUEの部分に「23.227.38.65」を入力して追加ボタンをクリックしましょう。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/041766555dc547bc8d6cca266da3fa04/img8.webp" alt=""> 次にCNAMEレコードを設定しましょう。 今度は ホスト名：「www」と入力 TYPE：「CNAME」を選択 VALUE：「shops.myshopify.com」 と入力して追加ボタンをクリックしてください。 入力ボックスの下に↓のように追加されていれば設定完了です。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/38545fa9610a4354b6955d1b34510ed9/img9.webp" alt=""> 画面下部の変更確認にチェックを入れて、確認画面へ進むをクリックしてください。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/8ae53acaa4c44c67942e8dc508aa514a/img10.webp" alt=""> チェックを入れた時に注意のポップアップが表示されます。 DNSレコードを追加するとネームサーバーがXserverではなく、デフォルトの設定に戻ってしまうという内容です。 Xserverでメールアカウントを設定したりしている場合、ネームサーバーの設定が戻ってしまうとメールアカウントが使えなくなってしまう場合があるので注意が必要です <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/bca2096f829d42c8a54ac5f38c94e78c/img11.webp" alt=""> メールアカウントを設定している場合は、XserverでDNSレコードを追加しましょう！ 「Xserverのサーバーパネル管理画面＞DNSレコード設定＞対象のドメインを選択」し↓のように設定してください。 Xserverの管理画面で設定する場合はDNSレコードの追加ではなく既存のレコードを変更しましょう。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/5d1727b9a90742a2b5f0580a4d748064/img12.webp" alt=""> 参考：<a href="https://apiros.jp/web_blog/shopify_domain_ikan/" target="_blank" rel="noopener noreferrer">https://apiros.jp/web_blog/shopify_domain_ikan/</a> 確認画面で設定するボタンをクリックします。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/6bd4cfed4c2a4c5984cc644d87b629fc/img13.webp" alt=""> 手続き中というロード画面が終了して完了画面が表示されればお名前.comでの設定は完了です。<h3 id="h3556c6cccd">Shopify管理画面で既存ドメインに接続する</h3>Shopifyのストア画面にログインし、左メニューからドメインをクリックする。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/1e4ab79f2c0248e2acd4537ef02a9c61/img14.webp" alt=""> 「アクション＞既存のドメインを接続する」をクリックする。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/6371c123e1f040eda3351f9de07ae9c8/img15.webp" alt=""> 接続したいドメインを入力し、次へボタンをクリックする。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/ff1e5f2625ca4f62be3e5ae1299719af/img16.webp" alt=""> 画面下部の「接続を確認する」をクリックする。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/fc39618827874bfeb831eb6c528b8a33/img17.webp" alt=""> こちらの画面が表示されれば、設定完了です。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/8034d5868277442080b1376601b07759/img18.webp" alt=""> 元々取得したドメインのURLへアクセスしてみましょう。 元々WordPressの初期画面が表示されていましたが、Shopifyの画面になっていることが確認できます。 ネームサーバーの設定により、最大48時間ほど接続までに時間がかかる場合があるようですので、余裕を持ったスケジュールで移行しましょう。 以上で既存ドメインをShopifyサイトへ移行完了です。ドメインやネームサーバー周りは複雑なので、しっかり調査の上移行を進めていきましょう！ AWA BizでもShopifyに関するお問い合わせや相談を受け付けていますので、お気軽にご連絡ください。 <a href="/contact">お問い合わせはこちら</a> 参考文献 <a href="https://www.shopify.jp/blog/setting-up-your-domain#:~:text=Shopify%E3%81%AE%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2%E3%81%AB,%E8%87%AA%E5%8B%95%E3%81%A7%E6%8E%A5%E7%B6%9A%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82" target="_blank" rel="noopener noreferrer">ネットショップにドメインを設定・指定する方法をご紹介</a> <a href="https://wp-exp.com/blog/domein-xserver/" target="_blank" rel="noopener noreferrer">お名前ドットコムで取得したドメインをエックスサーバーで使うための設定方法</a> <a href="https://agata-code.com/shopify/shopify-onamae/" target="_blank" rel="noopener noreferrer">[画像付き]Shopifyにお名前ドットコムの独自ドメインを設定しよう</a>

BLOG

CATEGORYPOSTS

Shopify CLIのインストール方法と使い方まとめ

お名前.comからShopifyにドメインを移管する方法

既存サイトから同じドメインでShopifyに移行する方法

CONTACT