こんにちは。中川瞬(@buppan_system)です。 この記事ではShopifyでPolarisの使用方法について知りたいという方のために、Polarisをインストールしてからどのように使うのかについて解説をします。 この記事を読むことで、

この記事を書かせて頂いている私は、現在、輸出・輸入・国内の転売のノウハウをお伝えしています。

時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、忙しくても副業で収入を得てもらっています。

それでは、Polarisをインストールしてアプリを作成する方法について解説をしていきます。

 

Polarisとは？

Polarisとは、CSSのように画面を装飾できる機能を持ち合わせていて、なおかつ簡単に操作できるアプリのことです。 Shopifyの管理画面もPolarisを使用して作成されているため、サイト運営者も慣れ親しんだShopifyの管理画面のように、自社サイトをPolarisを使って構築できます。 Polarisには細部まで洗練されたものが揃っているので、お客様が買い物に訪れたときに目的の物を探しやすく、買い物がしやすい環境を与えることができるのでしょう。 Polarisのもう一つの特徴として、1つのコードでWebやAndroid、iOSの3つに対応しているため、サイト管理者も作成が楽という点があげられます。 このようにサイトのデザイン作りもやりやすく、1つのコードでWebやAndroid、iOSの3つに対応できる、Polarisでのアプリの作り方について詳しく解説します。

Polarisでアプリを作る

Polarisでアプリを作るには、

1. Polarisをインストール
2. アプリのコンポーネントを作成
3. アプリ管理内のレイアウトを作成

の手順で作成していきます。 アプリ管理のレイアウトにとても役立つアプリなので、こちらを参考に作成してください。 また、ShopifyのサイトでPolarisの作成に関するチュートリアルがありますが、そのとおりに作業するとエラーが起きる可能性があるため、エラー回避についても解説します。

Polarisをインストール

インストールする前にパートナーアカウント、開発ストアをShopify partnersで作成します。 作成した後は、Shopify　CLIをインストールしてください。 インストール後、npm install --save @zeit/next-css @shopify/polarisを実行します。 実行後は、package.jsonにpolarisが追加されているので、コード内にpolarisが追加していることを確認してください。 次に、ルートディレクトリにnext.config.jsを作成します。 作成したnext.config.js内に、以下のコードを貼り付けて下さい。 require("dotenv").config(); const withCSS = require('@zeit/next-css'); const webpack = require('webpack'); const apiKey = JSON.stringify(process.env.SHOPIFY_API_KEY); module.exports = withCSS({ webpack: (config) => { const env = { API_KEY: apiKey }; config.plugins.push(new webpack.DefinePlugin(env)); return config; }, });

アプリのコンポーネントを作成

アプリのコンポーネントを作成するために、_app.jsファイルをpagesフォルダ内に作ります。 _app.jsファイル内に以下の内容をコピーして貼り付けて下さい。 import App from 'next/app'; import Head from 'next/head'; import { AppProvider } from '@shopify/polaris'; import '@shopify/polaris/dist/styles.css'; import translations from '@shopify/polaris/locales/en.json'; import React from 'react'; class MyApp extends App { render() { const { Component, pageProps } = this.props; return ( ); } } export default MyApp; Shopifyのサイトでは、コード内の「import React from 'react';」がなく、 サーバー実行をしてもエラーになるので、上記のコードを入れることでエラーを回避できます。

アプリ管理内のレイアウトを作成

index.jsファイル内を全て削除し、 import{ EmptyState, Layout, Page } from '@shopify/polaris';を入力します。 functionを作成し、PolarisのEmptyStateのコードを挿入します。 function Index(){ return( 商品を選ぶ ) } export default Index; これでアプリ内の管理画面が構築され、 polarisが使えるようになります。

ほかにもおすすめのアプリ

ほかにもおすすめのアプリがあります。 • App Bridge • App extensions それぞれどのようなアプリなのか詳しく解説します。

App Bridge

App Bridgeを使うことで、サイトの表示速度が通常の4倍速くなると言われています。 そのほかにも、サイト内のボタンやモーダル、リソースピッカーといった機能的で、 サイトに訪れたお客様が操作しやすい仕様となっているため、とても合理的なアプリです。 このアプリを使用することで、相手にストレスをかけることなく買い物を楽しんでいただけます。

App extensions

App extensionsは拡張機能があるアプリで、Shopify上での売上・商品データをアプリを通して表示することも可能です。 このアプリがない場合、商品や注文をいちいちアプリを開いて確認し、また閉じるという煩わしさがあります。 このような手間をApp extensionsで解消でき、効率的に日々の業務が進むため、必ず入れておくことをおすすめします。

Polarisをインストールしてアプリを作成しよう

Polarisをインストールしてコードを入力する手間があります。 しかし、完成した後はShopifyのように馴染みのある感じがあなたのサイトでも実現可能となります。 Polarisをインストールして、あなたのサイトに関わる操作性を向上してみましょう。   下記のLINEで ①パソコンの選び方 ②国内転売マニュアル ③メルカリマニュアル が記載されている「ネット物販スタートマニュアル」をプレゼントしているのでぜひ受け取ってくださいませ！