Pure Liquidを使ってShopifyテーマ開発ノウハウを静的サイト制作でも活用しよう
昨今の Web 制作現場で利用される技術セットはここ数年の間で大きく変わっています。
この前まで Gulp を使っていたかと思えば、Webpack や Vite が登場し、Astro といったオールインワンな Web 制作フレームワークも登場してきました。他にもあげるとキリがないですが、単純に Web サイトを制作するといっても多様な選択肢があります。
私の場合は仕事柄、EC サイトの構築に携わることが多いのですが、当然そこで必要とされるスキルセットもコーポレートサイト制作などで必要とされるものと差異があります。例えば、カートサービス一つとっても EC サイト制作の場合は要件に応じて最適なプラットフォームは変わってきます。もちろんその中で利用されるテンプレートエンジンや開発環境もさまざまです。
Shopify サイト構築の場合、Ruby ベースの Liquid と呼ばれるテンプレートエンジンが利用されます。開発者からすると、利用するテンプレートエンジンが変われば都度学習コストが発生します。今回紹介する Pure Liquid はそういった学習コストの差異をできるだけ埋めようというモチベーションで生まれた Web 制作テンプレートです。
Pure Liquid とは
Pure Liquid は Liquid をベースに静的サイト制作を中心に行える開発テンプレートです。そのため、Shopify サイト構築で培った Liquid での開発ナレッジをそのままコーポレートサイト制作や LP 制作にも活用できます。また、静的サイトジェネレーターを標準搭載しているため、 以下図のような Jamstack と呼ばれるアーキテクチャを簡単に採用できます。
上記の図では商品情報などは Shopify から取得し、ブログなどのコンテンツ情報は microCMS からデータを取得して最終的には静的な HTML ファイルとして出力する流れを表しています。
Pure Liquid の特徴
Web サイト制作を効率的に行うために必要な環境がオールインワンであらかじめ用意されています。タスクは基本的に npm scripts で組まれているため、利用したいモジュールを追加しやすく、剥がしやすいように設計されています。
- 静的サイトジェネレーターの搭載
- Liquid でのテンプレート管理
- HTML 自動バリデーションコマンドの搭載
- TypeScript, SCSS の補正
- 画像の自動圧縮、WebP 画像の自動生成
- SVG スプライトの自動生成
- テストランナーの搭載（Jest, Playwright）
サイトパフォーマンスを高める設定が標準でセットアップされているため、高い品質を意識した状態から開発をスタートできます。
Pure Liquid の利用方法
プロジェクト作成用の CLI が用意されているため、利用したいディレクトリで以下コマンドを実行します。ここでは yarn をベースに解説を進めていきます。
<YOUR-PROJECT-NAME>は独自のプロジェクト名に差し替えてください。
yarn create pure-liquid <YOUR-PROJECT-NAME>
対話モードで利用するパッケージマネージャーを聞かれます。
好みのもので開発を進めて問題ありませんが、yarn が推奨されています。
環境が整うまで少し時間がかかるかもしれません。その場合はブレイクタイムにしてコーヒーやティーを飲んでリラックスしましょう。 ☕️ 🫖
環境のセットアップが終わったら、ターミナルに表示される以下コマンドを実行してみましょう。
<YOUR-PROJECT-NAME>は独自のプロジェクト名に差し替えてください。
cd <YOUR-PROJECT-NAME> && yarn build && yarn start
上記コマンドで開発環境のローカルサーバーが立ち上がります。
http://localhost:8080 にアクセスをしてみてください。
以下のような画面が立ち上げれば完了です。
利用可能コマンド
開発中に利用したいビルトインコマンドを紹介します。
Start コマンド
開発モードでプロジェクトを起動します。
yarn start
Build コマンド
開発モードでプロジェクトをビルドします。
yarn build
Serve コマンド
本番モードでプロジェクトを起動します。
yarn serve
Release コマンド
本番モードでプロジェクトをビルドします。
yarn release
その他コマンド
Lint コマンド
ソースコードの静的解析を行います。
yarn lint
Lint:fix コマンド
ソースコードの静的解析と補正を行います。
yarn lint:fix
Post install コマンド
型定義パッケージの自動追加を行います。
yarn postInstall
Check license コマンド
パッケージのライセンスチェックを行います。
yarn checkLicense
Unit コマンド
ユニットテストを行います。
yarn unit
yarn unit:watch
e2e コマンド
E2E テストを行います。
yarn e2e
yarn e2e:headed
ディレクトリ構成
プロジェクトを展開すると以下のような構成になっているはずです。
-
src/*: プロジェクトで利用するソースコードやアセット類を格納 -
src/_data/*: グローバルデータ管理ファイルを格納 -
src/_includes/*: インクルードファイルを格納（レイアウト、ヘッダー、フッターなど） -
src/assets/*: アセットファイルを格納（TypeScript、SCSS、画像など） -
src/public/*: 無加工でそのまま利用したいファイル（フォントなど） -
dist/*: ビルド後のファイルを格納 -
e2e/*: E2E テストコードを格納 -
.config/*: 設定ファイルを格納
.
├── LICENCE
├── README.md
├── .config
├── dist
├── e2e
├── package.json
├── src
│ ├── sitemap.liquid
│ ├── 404.liquid
│ ├── _data
│ ├── _includes
│ ├── assets
│ ├── docs
│ ├── index.liquid
│ └── public
├── tsconfig.json
└── yarn.lock
グローバルデータの管理
_data/ フォルダーにはサイト全体で利用するデータや外部サービスから取得した情報を管理するファイルを格納します。metadata.json にサイトに関する初期情報を設定します。
{
"siteName": "Pure Liquid",
"title": "Pure Liquid",
"url": "https://pure-liquid-dev.netlify.app",
"language": "en",
"description": "Starter kit with Liquid for static website.",
"ogpImage": "ogp.jpg",
"ogType": "website",
"fbAppId": "",
"fbAdmins": "",
"twitterCard": "summary_large_image",
"twitterSite": "@SiteAccount",
"themeColor": "#2f88eb",
"backgroundColor": "#202021"
}
head.liquid をみてもらえると、どのように設定した情報が出力されるのかイメージしやすいかと思います。
Liquid テンプレート管理
HTML の出力は基本的に Liquid をベースに管理されます。Liquid の構文やタグなどは以下を参照してください。
Liquid は本来 Ruby のテンプレートエンジンになるため、JavaScript の実行環境では動作しません。そこで Pure Liquid では JavaScript 実行環境で Liquid ライクな記法を扱える LiquidJS と呼ばれるテンプレートエンジンが利用されています。
また Pure Liquid では _data/ で定義されているグローバルデータやページ単位の情報を Liquid へ受け渡し、HTML ファイルの出力を行う際、11ty と呼ばれる静的サイトジェネレーターが活躍しています。テンプレートの出力設定やデータ管理を細かく調整したい場合は以下公式ドキュメントを参照してみてください。
レイアウト管理
サイトのレイアウト管理は基本的に theme.liquid で行います。ヘッダー、フッター、コンテンツといった情報がどこに出力されるのかを管理しています。
<!DOCTYPE html>
<html lang="{{ metadata.language }}">
<head>
{% include 'sections/head' %}
</head>
<body id="page-{{ pageId }}">
<div class="l-wrapper">
{% include 'sections/header' %}
<main class="l-main{% if breadcrumbs %}--no-mt{% endif %}">
{% include 'snippets/breadcrumb' %}
{{ content }}
</main>
{% include 'sections/footer' %}
</div>
</body>
</html>
他にもレイアウトのバリエーションを用意したい場合は src/_includes/layout/* にファイルを作成します。実際に利用する際は以下のようにページ単位でどのレイアウトを利用するのか指定できます。
---
layout: layout/theme.liquid
---
下層ページの情報管理
トップページ以外の下層ページで必要になる情報の設定は src/docs/index.liquid を参考にしてみるのがいいでしょう。
---
layout: layout/theme.liquid
title: Learn more about Pure Liquid
description: Getting Started with Pure Liquid, and learn more about all features.
pagePath: docs/
pageId: docs
breadcrumbs: [{item: "Docs", path: "docs/"}]
---
<div class="l-container">
<h1 class="c-heading--lev1">📖 {{ title }}.</h1>
<div class="docs__container">
<p class="docs__text">Welcome to the Pure Liquid documentation!</p>
<div class="p-message--caution">
<p class="p-message__title">⚡️ Note</p>
<p class="p-message__des">This page is an example.🙄</p>
</div>
<a href="https://pure-liquid-dev.netlify.app/docs/" target="_blank" rel="noopener" class="docs__link">
Open official docs
<span class="p-icon--before-text">
<svg class="icon" role="img" width="1em" height="1em">
<use xlink:href="/assets/svg-sprite/svg-sprite.svg#external"></use>
</svg>
</span>
</a>
</div>
</div>
title や description、パンくずリストなどがどのように設定されているか参考にしてみてください。パンくずリストはページ名やパス情報を連想配列にして配列に格納されています。
breadcrumbs: [{item: "Docs", path: "docs/"}]
sitemap.xml の管理
Pure Liquid には検索エンジンからのクローリング対策として sitemap.xml を自動生成する処理が標準搭載されています。設定の詳細は sitemap.liquid で確認いただけます。
---
permalink: /sitemap.xml
eleventyExcludeFromCollections: true
---
<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
{% for page in collections.all %}
<url>
<loc>{{ metadata.url }}{{ page.url | url }}</loc>
<lastmod>{{ page.date | toUTCString }}</lastmod>
</url>
{% endfor %}
</urlset>
クローリングさせたくないページには eleventyExcludeFromCollections を true に設定します。
以下は 404 ページでの設定例になります。
---
layout: layout/theme.liquid
title: 404 Pge Not Found
description: Sorry! we could't find that page.
permalink: 404.html
pagePath: 404.html
pageId: 404
eleventyExcludeFromCollections: true
---
<div class="l-container">
省略
</div>
CSS の管理
CSS は SCSS ベースで管理できるよう設定されています。CSS 関係ファイルは src/assets/scss/* で管理します。
src/assets/scss/setting/* に便利な function や mixin などが定義されています。事前にチェックしておくといいことがあるかもしれません。
JavaScript の管理
JavaScript は webpack でバンドルされるよう設計されています。また、プロジェクト内のソースコードは基本 TypeScript ベースで管理できます。src/assets/ts/main.ts がエントリーポイントとして設定されています。
以下のコマンドを利用すると、不足している型定義パッケージを自動で追加してくれます。
yarn postInstall
TypeScript に関しては以下ドキュメントがオススメです。
アイコン管理
SVG スプライトが標準搭載されています。アイコン管理でぜひ使ってみてください。
src/assets/icon/* に svg のアイコンファイルを格納するとsvg-sprite.svgとして 1 ファイルにまとめて自動生成されます。
あとは使いたい箇所で以下のように呼び出すことができます。
<svg class="icon" role="img">
<use xlink:href="/assets/svg-sprite/svg-sprite.svg#sample"></use>
</svg>
テストランナー
Pure Liquid には Jest と Playwright が標準搭載されています。Playwright を用いた E2E テストは e2e フォルダーへ処理を格納します。
各テストの詳細は以下公式ドキュメントを参照してみてください。
まとめ
Pure Liquid に関して特徴から利用方法までざっと解説しましたが、どんな印象を受けたでしょうか？正直、今をときめくモダンな環境とは言いづらいですが、昔ながらの Web 制作手法を用いつつ Jamstack などパフォーマンスを意識したサイト構築環境が標準でセットアップされていることが一番の魅力かと思います。
逆にコンポーネント指向で React、Svelte、Vue といった UI フレームワークを使って Web 制作したい場合ではミスマッチな環境と言えるでしょう。
最終的にはチームメンバーのスキルや運用体制に合わせ、採用を検討いただければと思います。
Tips
microCMS を利用したブログサイト制作チュートリアル記事はこちら。
Discussion