最近良く耳にする「Shopify」という名前。

私はショッピングサイト系のシステムはあんまり興味がなかったので EC-CUBEのカスタマイズをちょっと出来るぐらいでしたが、今回未経験でShopify案件に携わることになりました。

守秘義務的に内容はお伝えできませんが、Shopify触ったことがなくても ある程度信頼と実績があればやったこと無い案件も流してくれます。

もちろん、初めて触るシステムですしめちゃくちゃ調べないといけないので プライベートの時間も削ることになる覚悟は必要ですけども。

ま、会社員時代もこんな感じでプライベートの時間削って、 仕事のために勉強してたので今更感はありますね（笑）

今回からちょこちょこShopifyの備忘録として残していこうと思います。

ショップ系のサービスは登録して30日後に有料になってカスタマイズできなくなったりする（カラーミーがそういうタイプ） ので企業側がその契約をして中身を自由にいじられる環境があるなら進んでやったほうがいいですね。

コチラとしては経費がかかるどころか納品すればお金ももらえるし勉強できるしの一石二鳥です。

なのでしっかりと理解したら乱雑になった情報をまとめてみようかなって感じです。

今回はとりあえずニュースレター回りのことについて調べて実際に実装していきます。

テーマ作成入門とかはもっと理解してからでいいかなって感じで、 ざっと見た感じWordpressでテーマ作ったことがあるなら問題なく作れそうな感じですね。

構文はLaravelと似てる感じ？

ShopifyはLiquidというテンプレートで構成されています。

Wordpressみたいにheader.phpとかindex.phpとか昨日別で分けている仕組みと同じです。

その中で記載されている構文はPHPではないですし、ファイルも.liquidという独自のものです。

といっても中身は至ってシンプルで変数宣言をしたりそれを使ったり、 forやifを使って処理するのである程度プログラミングの基礎を分かる人であれば 簡単に馴染めるんじゃないかなって感じでした。

ちょっと特殊なのはフィルター機能というのがあって、特定の変数を呼び出して ｜（パイプライン）を使ってなんかに渡すと特定のタグに変数の中に入っているURLを埋め込んで出力してくれる。

みたいな機能があるのでそのへんの独自の機能は覚える必要があるって感じですね。

同時構文の書き方はタイトルの通り、Laravelと似た感じの記述方法になっています。

「{{}}」いわゆる中括弧２つで囲んでその中にifやら変数やらを記述したり

「{% assign 変数名 %}」（構文合ってないかも(笑)）的な感じで中括弧＋パーセント記号で囲んだ中に変数を宣言したり。

確かLaravelのBladeテンプレートがこんな感じの記述をしてたと思います。

Liquidも大元をたどるとSmartyで作られてるんでしょうかね？そのへんは慣れてきたら調べてみようと思います。

先行者が触ってたテンプレを落としてきて編集する

私のところに以来が来る前にちょっといじってたみたいで、今回はそれをダウンロードして ローカルで編集してアップロードして更新していく形をとっています。

Shopifyはローカル開発環境というものが存在しないので、 基本的にThemekitという仕組みを使ってコマンドラインから本番環境にアップします。

今回は本番用とは別に開発でいじくりまくってもいい場所を用意してくれていたのでそこに向けて更新していきます。

コマンドラインっていうと難しく聞こえるかもしれませんが、 node.jsを使ってリアルタイムで更新していく形をローカルでやってた人は ああいう感じの更新の仕方って想像してもらえたらいいかもですね。

them watch 的なコマンドを打ってファイル更新を監視して保存されたら差分をアップロードする。

ブラウザで画面更新をしたら反映されてるって感じです。

流石にホットリロードはないのですがまぁそこはオンライン上のものなので仕方ないですね。

コマンドラインの導入は今回私はWindowsだったので

ChocoalateというMacでいうbrewみたいなやつで導入しなきゃいけないみたいで シェルスクリプトに特定のコードを打ち込むと自動でインストールしてくれました。

ただ、強制的にCドライブに入れるの早めてほしかったです(笑)

VSCodeでやる場合は再起動しないと環境変数が反映されてなかったので再起動して VSCodeでいつもどおり開発していくっていう形を作ることが出来ました。

Liquid構文もプラグインを入れたらちゃんと色分けもしてくれるので便利ですね。

試しに自分のメアドで購読登録してみる

とりあえず今回の目的はニュースレターの仕組みを作るということだったのですが、 デフォルトのまっさらなテンプレートに既に組み込まれていました(笑)

あれ、もうやることなくない？

って思ってしまったのでとりあえずコードを眺めてみました。

「{% form 'customer' %}」こんな感じでフォームを準備して その中にエラーが出てたときの処理やら購読完了した時にでるサンクスメッセージやらの分岐がありました。

後は中のインプットタグとかをちょろちょろやってShopifyに備わっているところに postで飛ばしてやればロボットかどうか問われるページに飛んで突破すれば 元のページに戻されサンクスメッセージが表示されます。

この仕組は既に用意されているわけですから後はCSSとHTMLを組んで独自のデザインに置き換えてやればいいだけですね。

めっちゃ簡単！

Shopifyテーマ作りを触ってみた雑感

Wordpressと違ってローカル開発環境がないのが面倒くさいなぁと思ったんですが、 Wordpress覚えたての頃、node.jsすらも知らなかった時代のことを考えるとかなり楽な方かなと思います(笑)

cssもscssで記述することが出来ますし、javascriptもおそらくES6で記述しても変換してくれそうです。

ただ、デフォルトだとjquery推奨っぽい感じがするのでちょっと残念。

おそらくサーバー側がnode.jsで動いていて色々処理してくれてるんじゃないかと予想。

共同開発するとちゃんと規約を決めないと面倒くさいことになりそうな自由さですね。

渡しの場合は基本一人でやるのであんまり気にしませんが、納品後は私の手元から離れるので 後継で作業する人がちょっとでも理解しやすいようにコメントをしっかりと記述して 見やすいコードを書く心がけはちゃんとしているつもりです。

その後も保守などでお金がもらえるようにオレオレコードでもいいですが、 成長のためになるべく手を離して新しい開発案件をもらいたいっていうのが本音ですね。

Shopifyのテーマづくりは、WordpressとLaravelの経験があればやってりゃ自然と覚えるなぁっていう感じの難易度でした。

どっちも経験がないとちょっと意味不明かもですが、解説サイトはたくさんあるので Googleさえ使うことができればそんなに難しくはないシステムだと思います。

今回トップページがパララックスを導入するとのことで、そこを担当してくれてる人が 新人君らしくちょっと大変そうなので、ある程度したら手伝いに行こうと思います(笑)