こんにちは。中川瞬(@buppan_system)です。
この記事を読むことで、
- 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でアプリを作るには、
- Polarisをインストール
- アプリのコンポーネントを作成
- アプリ管理内のレイアウトを作成
の手順で作成していきます。
アプリ管理のレイアウトにとても役立つアプリなので、こちらを参考に作成してください。
また、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をインストールして、あなたのサイトに関わる操作性を向上してみましょう。
物販を実践して結果を出されている方で、丁寧に教えてくれる方をご紹介していますので、
下の記事ぜひ読んでください。
