Shopを立ち上げるならShopify
色々なご縁があり、最近Shopifyを使うことが増えてきました。
非エンジニアでもボタンぱちぱちしながらサイト構築ができる手軽さと、Liquidコーディングを活用した作り込みとが両立できる、優れたサービスになっています。
完全にイチから立ち上げるスタートアップにとっても、既存システムを持っている企業にとっても、非常に使い勝手のいいサービス。超便利。
そんな中で、「Liquidってなに？」「どうかくの？」みたいな話を説明することが増えてきたので、備忘録的に書いておこうと思います。
何かの参考になればと思います！
Shopifyの全体像
まずは、Shopifyを使ってストアを作るときに、お客様に見える画面の構造について、ふわっとおさらいしてみます。
デザインの土台、「Shopifyテーマ」
Shopifyの強みの一つに、予め機能やデザインが実装されたテンプレート「Shopifyテーマ」があります。
Shopifyは一からコーディングしまくってストア構築することもできますが、すでに公開されている「テーマ」を利用することで、素早くいい感じのストアを作ることができます。
Shopifyテーマストアで色々眺めてみましょう。
それでは「Shopifyテーマ」ってなんだろう？と考えみると、実際は「誰かがめちゃくちゃデザインしてコーディングした、ファイルの集合体」です。
実際にファイルを見てみましょう。
このストアには「Dawn」というテーマが入っていますね。
多くの場合は先ほどの画面で「カスタマイズ」を選んで、カスタマイズ画面をいじることが多いのではないでしょうか。
Dawnの場合はこんな画面です。
「セクションを追加」を選んでみると、「リッチテキスト」「スライドショー」「特集コレクション」など、いろんなものを挿入できることがわかりますね。
こいつらを、レゴブロックみたいに組み合わせることで、ストアをどんどん作っていくことができます。
このレゴブロック1つ1つのことを「セクション」と呼びます。
基本的な考え方ですが、まずここで表示されない場合、このテーマを選んでいる以上簡単には実現できません。
クライアントさんと話して「このデザイン追加」「この機能追加」という話になった場合は、まずは「それをカスタマイズ画面からボタンぽちぽちで実現できるか検討」が第一アクションになります。
Shopifyテーマの実体ファイル
それでは、この管理画面やデザインがどのように作られているのかを見てみましょう。
上の・・・から、「コードを編集」を押してみましょう。
いくつかのフォルダと、たくさんのファイルが表示されました。
こいつが、先ほどいじっていた「カスタマイズ画面」や、お客様に見える画面を作っているコードの本体になります。
ここを編集することによって、カスタマイズ画面を編集したり、パチパチするボタンを増やしたり、見た目を少し調整したりすることが可能になります。
すごいざっくり理解、上から大きなデザイン、下にいくにつれて細かいデザインになっていきます。
例えば「レイアウト」「テンプレート」は、全体のデザインや、各ページの大枠の挙動を書いているファイルたちになります。
この中で一番わかりやすい、「セクション」ファイルを見てみます。
「accouncement-bar.liquid」とか「cart-drawer.liquid」とかありますね。
こいつらが、先ほど「セクションを追加する」で表示された、セクションの実体ファイルになります。
例えば「accouncement-bar.liquid」は一番上に表示される「告知バー」というセクションを定義しています。
クリックするとこんな感じ。
この設定とか、表示の仕方とか、デザインとかが「annoucement-bar.liquid」に全て書かれているのです。
セクションファイルの構成
「announcement-bar.liquid」をもう少し味わってみましょう。
このファイルの大きな構造は、上から「HTML的な見た目デザイン部分」「CSS的なstyle部分」「管理画面の表示部分(schema)」となっています。
「annoucement-bar.liquid」の場合は「CSS的なstyle部分」がないので、「HTML的な見た目デザイン部分」「管理画面の表示部分(schema)」の二種類で構成されています。
「accouncement-bar.liquid」の25行目ぐらいを見てみます。
<div class="page-width utility-bar__grid{% if announcement_bar and language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--3-col{% elsif language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--2-col{% endif %}">
{%- if section.settings.show_social and social_icons -%}
{%- render 'social-icons' -%}
{%- endif -%}
{%- if section.blocks.size == 1 -%}
<div
class="announcement-bar{% if section.settings.show_social %} announcement-bar--one-announcement{% endif %}"
role="region"
aria-label="{{ 'sections.header.announcement' | t }}"
{{ block.shopify_attributes }}
>
divと書いてあるあたりHTML？という感じがしますよね。
でも、{%}なんて見たことがない、、、どう読んだらいいんだろう。。。となりそうです。
ここでようやくLiquidの登場です。
Liquidとは
こちらの記事を見てみると、「Shopifyが開発したテンプレートエンジンおよび独自のプログラミング言語です。」とあります。
つまり、LiquidはShopifyが独自で開発した、Shopifyのための言語です。
なぜこの言語が必要なのか？
例えば先ほどのここの部分を見てみます。
{%- if section.settings.show_social and social_icons -%}
{%- render 'social-icons' -%}
{%- endif -%}
ざっくり、「セクションで設定した「show_socialとsocial_icons」が存在するなら、soical-iconsを表示(render)してね。」みたいな感じがします。
そもそもこの「show_social」「social_icons」っていうのはShopifyの管理画面上で設定するもの。
この「デスクトップのアイコンを表示する」の部分ですね。
Shopifyの管理画面上で設定するわけなので、Shopify上に保存されますよね。
普通この情報を取り出して使うには、「Shopifyさん・・・僕こういうものなんですけど、show_socialっていうパラメータがどうなってるか教えてくれませんか・・・？」みたいな、お伺いを立てる必要があります。
何十行もコードを書く必要がありますし、無限にある設定に対してそんなことやってられません。
<div>何十行もコードを書く必要があるんだよ、と言いたくてliquid使わず書こうと思ったけどむずすぎて諦めたdiv</div>
そこでliquidという言語の登場。
こいつを使うことによって、こういったお伺いをスキップして「show_socialちょうだい」というだけでアクセスすることが可能になるのです。
「Shopifyとの情報のやり取り」が爆速でやりやすくなることが、liquid言語の一つの強みです。
先ほどのコードを見直してみます。
<div class="page-width utility-bar__grid{% if announcement_bar and language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--3-col{% elsif language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--2-col{% endif %}">
最初のdiv class="page-width utility-bar__gridまでは、HTMLの世界の書き方。
その先の{% %}は、liquidの書き方になります。
{% %}の中身を見てみると「アナウンスメントバーと言語セレクター、もしくはshow_socialとsocial_iconsがあったら」というif文が書いてあります。
この辺って、Shopifyの管理画面上で設定することですよね。
だから、liquidで書いてあるのです。
ブラウザ君はHTML/CSS/JSしか知らない
liquidにはもう一つ役割があります。
先ほど記述した通り、liquidというのはShopifyが作った、Shopifyのための言語。
なので、いつもみんなが使っているブラウザ君は「liquid」なんて言語を知るよしもありません。
ブラウザくんはHTML/CSS/JSの専門家。
僕たちが何かのサイトを見るときは、パソコンが「サイトのHTMLくださーい」と言って、もらったHTMLを人間が見やすい見た目に描画し直してくれるのがブラウザくんの役割です。
この記事がわかりやすいです。
Shopify管理画面上で書いたliquidファイルは、そのままブラウザくんが読むことができません。
なのでliquidには、「こうliquidで書いたら、こういうHTML/CSS/JSに書き直す」という役割があるのです。
本当はHTML/CSS/JSを50行書かないといけないところを、liquidでちょろっと書くだけでOKにしてくれる、優れものだったりするのです。
機能追加・デザイン追加したい時の検討順
こちらの記事でも書きましたが、まずは「①ストア・セクションの設定でどうにかならないか検討する」が第一候補です。
第二候補は、Shopifyアプリの導入か、Liquidコーディングのどちらかになりますが、一旦Shopifyアプリ導入で良いと思います。
先述の通り、ShopifyテーマはLiquid/HTML/CSSの集合体で、テーマを開発する会社が書いたコードの集まり。
精密に設計され最適化されている状態でローンチされているわけです。
その実体は何千・何万行のコードで構成されています。カートのドロワーだけで400行ぐらいのCSSファイルでデザインされています。
そこに手を加えると、どこにどのような影響を及ぼすかわからないため、慎重に編集をしていく必要があります。
しかも、「スマホの場合」「PCの場合」「タブレットの場合」と、見た目をうまく切り替えられるか？など、考えことがかなり多かったりします。
慣れていないうちはShopifyアプリの導入を検討し、liquidに慣れ始めたらliquid編集にチャレンジしてみるという手順がいいのではないかと個人的には思います。
楽しいShopifyライフ！
簡単さと作り込みのしやすさを兼ね備えたShopifyだからこそ、「何まで簡単か」「どこから作り込みか」を見極めることが必要になってきそうです。
是非、Sustainableで楽しいサイト運営ができるようなD2Cライフを！
どなたかの参考になれば、と思います