More than 1 year has passed since last update.

初心者がLaravelでShopifyアプリ開発してみた　|　fileCreate

Last updated at 2022-03-14Posted at 2021-12-28

はじめに

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

今回は、Laravelを利用したshopifyアプリ開発でのファイル作成(fileCreate)を紹介します。

動作環境

Mac OS Catalina
PHP 7.4.27
Laravel Framework 8.76.2

環境構築

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

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

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

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

アプリインストール後の場合

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

公式リファレンス

fileCreateに関しては、下記サイトが公式内容になります。

今回は公式リファレンスを参考に記述を進めていきます。

権限付与

まずは、fileCreateできる権限を設定します。
場所はAuthorizeControllerのscopesです。

app/Http/Controllers/AuthorizeController.php

$scopes = 'read_products,write_products,read_script_tags,write_script_tags';

read→読み取り、write→書き込み

今回必要な権限は公式リファレンスのfileCreateを見ると一番上に載っています。

write_filesが必要とのことです。
上記scopesの箇所に、write_filesを追加します。

権限を追加した後は/authorizeでアプリインストールをします。

Mutation・Query

ちなみに、fileCreateの横にあるmutationは属性みたいなものと思っています。
もう1つqueryというものがあり、それぞれ簡単に説明すると

mutation→shopify内の情報を変更できる(create・update・deleteなど)
query→shopify内の情報を出力し、確認できる

今回の場合「fileCreateを使うときはmutationで記述してね」と解釈しています。

GraphQL Admin API

ここで少しAPIについて。
今回のfileCreateもGraphQLのものです。

GraphQLは、APIでshopifyの情報を利用するときに使うものになります。
別のAPIに**REST Admin API**もありますが、shopifyはGraphQLを推している様子です。

記述の仕方はPHPに近いのですが、私はまだよくわかっていません。

公式のShopifyブログにGraphQLについて説明しているものもありますが、参考程度に見ていました。

GraphQL App

GraphQLのAppは下記URLからストア側にインストールすることもできます。

Shop URLにアプリインストールするショップのURLを記入します。
その下に並んでいるAdmin APIやStorefront APIは、どの権限を付与するか選択するところになります。

ただ、このAppだと今回必要なfileの権限がないのです……。
なので、contentやproductsなどの記述確認に使ってみてください。
ストア側のアプリ管理で確認できるので、入れておくのが良いと思います。

GraphQLの記述方法など全てにおいて理解できていないので、fileCreateの場合でも直接記述しながら確認できるのが望ましいなぁと思い、色々調べてみました。

そこで見つかったのはpostmanというサイト。
私はここでGraphQLの記述確認をしていました。

postman

アカウント登録が必要なサイトになりますが、Googleアカウントから登録もできるので簡単です。

アカウント登録ができたら、Homeを開きます。

英語で色々書いていますが、まずはStart with something newという枠にあるCreate Newをクリックします。

また色々書かれていますが、ここは選択しなくても進むことができるので、一旦右上の×ボタンで閉じます。

次に+ボタンをクリック

ここまで開くことができれば、後は下記サイトを参考に進めることができます。

とてもわかりやすくて、助かった投稿です。
ありがとうございます。

設定が終わったら、実際にコードを記述していきましょう。

コード記述

公式リファレンスfileCreateで下の方にコード例が載っています。

//Mutation
mutation fileCreate($files: [FileCreateInput!]!) {
  fileCreate(files: $files) {
    files {
      # File fields
    }
    userErrors {
      field
      message
    }
  }
}

//Variables
{
  "files": {
    "alt": "",
    "contentType": "",
    "originalSource": ""
  }
}

この部分、私は記述の方法がわからなくて詰まりました。

コード例の書き方がMutationとVariablesで項目が分かれていれば使えるものだと思うので、今回のLaravelで開発する場合は少し当てはまらない気がしています。
この書き方を使って、Laravelで動かす方法あるのかな……。
あったら教えてください。

正しい記述

色々迷走してしまったので、先に正解の記述を置いておきます。

app/Http/Controllers/AuthorizeController.php

public function file()
{
$file_create = Http::withHeaders([
            'X-Shopify-Access-Token' => '***ACCESS-TOKEN-FOR-THIRD-PARTY-APP***'
        ])
            ->accept('application/graphql')
            ->post('https://yourshop.myshopify.com/admin/api/2021-10/graphql.json', [
                'query' => <<<Query

                mutation {
                    fileCreate(
                    files: {
                        alt: "test",
                        contentType: FILE,
                        originalSource: "https://code.jquery.com/jquery-3.6.0.min.js"
                    }) {
                    files {
                        alt
                        createdAt
                        fileStatus
                    }
                    userErrors {
                        field
                        message
                    }
                    }
                }

        
        
                Query
            ]);

return view ('/file');
    }

ルーティング設定

routes/web.php

Route::get('/file', 'App\Http\Controllers\AuthorizeController@file');

blade作成

resources/views/file.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>file-create 完了</h2>
</body>
</html>

正解に辿り着くまで

記述の仕方がわからなかったので、先輩に助けを求めました。

$file_create = Http::withHeaders([
            'X-Shopify-Access-Token' => '***ACCESS-TOKEN-FOR-THIRD-PARTY-APP***'
        ])
            ->accept('application/graphql')
            ->post('https://yourshop.myshopify.com/admin/api/2021-10/graphtql.json', [
                'query' => <<<Query

        ///GraphQL記述
        
                Query
            ]);

ここで私は何を思ったか、 queryの部分を全部mutationに変えました。
queryは出力だし、書き込みだからmutationなのかなと……。

しばらくこのコードを使っていたので、エラー放出祭りでした。
当たり前ですね。

GraphQLの記述

GraphQLの記述に関しては自分でやり切りたい、と思っていました。
ただ、先ほどのコードでエラー祭り状態なので、どうやってもうまくいきませんでした。

なので、また先輩のお世話になりました。

mutation {
	fileCreate(
    files: {
      alt: "test",
      contentType: FILE,
      originalSource: "test.js"
    }) {
    files {
      alt
      createdAt
      fileStatus
    }
    userErrors {
      field
      message
    }
  }
}

公式リファレンスfileCreateの記述を元に、MutationとVariablesを1つにまとめている記述であると今なら少しわかります。

しかしoriginalSource: "test.js"の部分でエラーが出ました。
この部分はURLでの記述が必要なため、直接データを入れることができない様子。(〇〇.jpgは指定できない)

色々試したところ、パートナー画面の設定＞ファイルのところで直接ファイルをアップロードした場合、そのリンクを使ってfileCreateは可能でした。

上記の正しい記述では
originalSource: "https://code.jquery.com/jquery-3.6.0.min.js"
Jqueryのファイルを使用しました。

ここまで来てもエラーが出たため、やっとMutationエラー祭りの記述を変更し、正しい記述に辿り着きました。

fileCreate完了

ちなみに、正しい記述でfileCreate出来れば、上記の000012 JPGという写真が入っている場所に新しいファイルを確認できます。

最後に

迷走に迷走を重ね、結局記述間違いでした。
GraphQLの書き方も、公式リファレンスくらいしか参考になるものがなく、今回は本当にキツかったです。
先輩にもたくさんお世話になりました。

まだGraphQLの記述の仕方を理解し尽くせていないので、復習必須です。
とりあえず、流れは理解できると思うので、行き詰まっている方の参考になれば良いなと思います。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

初心者がLaravelでShopifyアプリ開発してみた | fileCreate