初心者がLaravelでShopifyアプリ開発してみた　|　Pageで新しいページ作成

# はじめに
shopify業務に携わることになったため、勉強の日々を過ごしているモモナです。
2週間前にshopifyの勉強を始めたばかりなのでわからない部分も多々ありますが、初心者なりに学んだことをまとめていこうと思っています。
訂正箇所や認識違いなどあれば、ご指摘お願いします。


今回は、Laravelを利用したshopifyアプリ開発でのページ作成を紹介します。

# 動作環境
Mac OS Catalina
PHP 7.4.27
Laravel Framework 8.76.2

# 環境構築
shopifyの登録方法などは、他に詳しくまとめている方もいるので割愛させていただきます。
公式サイトでも流れは確認できるかと思います。

https://www.shopify.jp/blog/partner-shopify-app-development?utm_source=shopifydev&utm_medium=youtube&utm_campaign=jp_shopifydev_youtube

今回、Laravelでの開発のため下記サイトを参考にさせていただきました。

https://qiita.com/kkamizuru/items/e70424539ae98e1f3cc5

Laravelで情報をまとめている方がほとんど見つからない中、とても助かりました。
ありがとうございます。

これから環境構築していく場合は、サイトを参考に**[アプリ作成][link-1]**まで進めていただくと手順がわかりやすいです。

[link-1]:https://qiita.com/kkamizuru/items/e70424539ae98e1f3cc5#%E3%82%A2%E3%83%97%E3%83%AA%E4%BD%9C%E6%88%90

## アプリインストール後の場合
アプリの権限変更やアクセストークンの確認が必要なため、ストア側のアプリは一度削除することを推奨します。
ストア側で削除しても、パートナー側で作成したアプリは残っているのでご安心ください。


# 公式リファレンス
Pageに関しては、こちらの**Creates a page**の部分が公式内容になります。

https://shopify.dev/api/admin-rest/2021-10/resources/page#[post]/admin/api/2021-10/pages.json

今回はインストールした**PHP Shopify SDK**を利用した記述になるため、公式リファレンスのコードは今後の参考にしていただければと思います。

# Shopify SDK記述

Shopify SDKの記述方法について載っているファイルを開きます。
今回使用するコード全て含めて記述しています。

```sample-app/vendor/phpclassic/php-shopify/lib/shopifySDK.php
//For third party app
$config = array(
   'ShopUrl' => 'yourshop.myshopify.com',
   'AccessToken' => '***ACCESS-TOKEN-FOR-THIRD-PARTY-APP***',
 );

//Create the shopify client object
$shopify = new ShopifySDK($config);

//Create a new product
$productInfo = array(
    "title" => "Burton Custom Freestlye 151",
    "body_html" => "<strong>Good snowboard!<\/strong>",
    "vendor" => "Burton",
    "product_type" => "Snowboard",
);
$products = $shopify->Product->post($productInfo);
```

**products = 商品**のため、このままだと商品作成することになってしまいます。

**products**を**pages**に変更することで、ページ作成することができます。
ページ作成用に直し、Controllerに記述したのが下になります。

```app/Http/Controllers/AuthorizeController.php
public function page()
    {
        $config = array(
        'ShopUrl' => 'yourshop.myshopify.com',
        'AccessToken' => '***ACCESS-TOKEN-FOR-THIRD-PARTY-APP***',
        );

        $shopify = new ShopifySDK($config);

        $pageInfo = array(
        "title" => "new-page",
        "body_html" => "<strong>新しいページ</strong>",
        );
        $pages = $shopify->Page->post($pageInfo);

        return view('/page');

    }
```

# ルーティング設定
```routes/web.php
Route::get('/page', 'App\Http\Controllers\AuthorizeController@page');
```

# blade作成
画面が変わっているかわかればいいので、簡単に作成します。

```resources/views/page.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>page-create 完了</h2>
</body>
</html>
```

# 権限変更
次に、アプリ権限の変更をします。
**AuthorizeController**の**scopes**の部分を確認しましょう。

```app/Http/Controllers/AuthorizeController.php
$scopes = 'read_products,write_products,read_script_tags,write_script_tags';
```

readは読み取り、writeは書き込みとなります。
現状、products(商品)とscript_tagsだけ権限がついています。
ここにpageの権限をつけるため、`read_content`と`write_content`を追加します。

scopesの権限については公式リファレンスを参考にします。

https://shopify.dev/api/usage/access-scopes

scopesで権限付与をしないと必要な情報を引き出すことができないため、shopify内のデータを利用したい場合は記述必須です。
権限がないと作成時にエラーが出るので、その時はscopesを確認してくださいね。

# アクセストークン確認
アプリインストールする際、アクセストークンを確認できるように記述をします。

```app/Http/Controllers/CallbackController.php
ShopifySDK::config([
            'ShopUrl' => 'yourshop.myshopify.com',
            'ApiKey' => '***YOUR-PRIVATE-API-KEY***',
            'SharedSecret' => '***YOUR-SHARED-SECRET***',
        ]);

        $accessToken = AuthHelper::getAccessToken();

//以下追加
        dd($accessToken);
```

`dd($accessToken);`でアクセストークンを確認できるようにしています。

# アプリインストール

準備ができたので、アプリインストールをします。
参考サイトと同じように**[ngrokで生成したURL]/authorize**でアプリインストール画面へアクセスします。

「アプリをインストール」をクリックすると、先ほど設定した`dd($accessToken);`によってアクセストークンが表示されます(shpcaから始まるもの)
アクセストークンは**AuthorizeController**に記述します。

```app/Http/Controllers/AuthorizeController.php
$config = array(
        'ShopUrl' => 'yourshop.myshopify.com',
        'AccessToken' => '***ACCESS-TOKEN-FOR-THIRD-PARTY-APP***', //この中に記述
        );
```

:::note warn
アクセストークンを確認後
dd($accessToken);の記述はコメントアウトしてください
:::

# 動作確認
ストア画面へ戻る必要があるので、**[ngrokで生成したURL]/authorize**で再度ページへアクセスします。
アプリインストールはされているため、自動的にストア画面からアプリが開かれます。

もしストア画面を開いた状態であれば、アプリ管理から進んでください。

ページ作成できるか確認のため、**[ngrokで生成したURL]/page**でアクセスします。
page.blade.phpの内容が表示されているのを確認し、左側にある**オンラインストア＞ページ**を開きます。

![スクリーンショット 2021-12-27 16.01.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2437071/66a7abbe-5718-5a34-9d71-1add2fb655ec.png)

new-pageというものが入っていれば、アプリを利用したページ作成は完了です。

# 最後に
公式リファレンスは英語で、日本語検索しても欲しい情報はなかなか出てこないという現状。
今回のページ作成方法によって、アプリ開発の考え方や繋ぎ方は理解できると思います。
行き詰まっている方の助けになれますように。