はじめに
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です。
$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で動かす方法あるのかな……。
あったら教えてください。
正しい記述
色々迷走してしまったので、先に正解の記述を置いておきます。
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');
}
ルーティング設定
Route::get('/file', 'App\Http\Controllers\AuthorizeController@file');
blade作成
<!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の記述の仕方を理解し尽くせていないので、復習必須です。
とりあえず、流れは理解できると思うので、行き詰まっている方の参考になれば良いなと思います。