移動用Shopifyでオリジナルテーマを作成しよう~No.2[開発環境のセット]~2023年1月13日こんな方におすすめShopifyでオリジナルテーマを作成したいShopifyのテーマををローカル環境で開発したいこのシリーズでは、Shopifyのオリジナルテーマを全15回で作成できるようにノウハウを提供しています。Shopifyテーマをローカル環境で開発まずはShopifyテーマをローカル環境で開発できるよう、セットしていきましょう。ステップ0:Shopifyパートナーの登録Shopifyパートナーに登録していない人はこちらから登録をお願いしますShopifyパートナーとは無料でShopifyのテーマ開発、アプリ開発などを行えるものとなっています。https://www.shopify.jp/partnersステップ1:Shopifyストアの構築Shopifyパートナーにログインできたら、「ストア管理」→「ストアを追加する」を選択します。その後、ストアタイプで「開発ストア」を選択し、ストア名、URL、パスワード、目的、住所など、選択欄を満たします。完了したら「保存」をクリックしてください。ストアが作成されます。ステップ2:APIキーの発効アプリ(テーマ)を開発する上で開発をしても良い、という権限を取得する必要があります。「アプリ」→「アプリと販売チャネルの設定」をクリックします。「ストア用のカスタムアプリを管理する」をクリックします。「カスタムアプリ開発を許可」をクリックします。次の画面でも「カスタムアプリ開発を許可」をクリックお好きなアプリ名を入力してください。アプリ作成後、「設定」の「編集」をタップします。「テーマ」の2つの項目にチェックを入れ保存します。完了したら保存をしてください。APIのアクセストークン」がでてきますので、中のコードをコピーしてどこかにメモしておきます。ステップ3:スターターテーマのインストールShopifyはデフォルトでスターターテーマを公開して、インストール可能な状態にしてくれています。スターターテーマとは、必要なファイルがそろっているため、漏れがなく開発を行うことが出来ます。(スケルトンテーマとも呼ばれたりしています)インストール方法はShopify公式ドキュメントに書いてあります。いうものをインストールしてください。その後、バージョン確認でインストールされているか確認してください。テーマの名前を自由に決めます※なお、[]の部分は必要ありませんインストールできたら「オンラインストア」→「テーマ」で自分の作成したテーマができているのが確認できると思います。「アクション」→「公開する」で公開しましょう。watchとコマンドを打ち込むことでリアルタイムでの変更が可能になります。ファイル・フォルダの役割を確認assetsconfiglayoutlocalestemplatesconfig.ymlディレクトリ構造はこのようになっていると思います。簡単に説明をしていきます。assetsassetsはお馴染み、cssファイルやjsファイルを入れるフォルダとなっています。今回はassetsの中の「application.scss」にcssのコードを入れて編集していきます。カスタマイズしたデータを保存しておく場所になります。全体的なスキーマを設定する場所になります。(スキーマを編集することでカスタマイズが可能になります)layoutlayoutフォルダには「theme.liquid」ファイルがあります。これはテーマの基準となるファイルで、<head>や<meta>などを設定します。header,footer,bodyにあたるものもここで読み込みます。locales言語の設定などを行うフォルダになります。(今回は使用しません)templatesページのテンプレートを入れるフォルダになります。基本的にはデフォルトのファイルだけで大丈夫ですが、今回はこれに「about」「お問い合わせ」にあたるページを追加します。config.ymlパスワードやAPIなどが記載されていますフォルダを追加Shopifyのテーマ作成では、デフォルトのこれらのフォルダに加えて「sections」「snippets」フォルダを追加しますsectionssectionsフォルダはheaderやfooterといった様々なページで使われる部分を作成したファイルを入れます。sections内のファイルではスキーマを設定できます。snippetssnippetsはsectionsよりもさらに細かい部分を登録します。コメントをキャンセルメールアドレスが公開されることはありません。