fbpx

shopify Post-Unite Japan 2019【ワークショップレポート】

2019/08/08



6月にカナダ、トロントで行われたECカンファレンスShopify UNITEの日本版である、Shopify Post-Unite Japan 2019に参加しました。

午後の開発者向けワークショップを中心に、イベントのレポートをお伝えします。

Shopify Uniteについて

Shopify uniteは、shopifyが主催するECカンファレンスです。
今年6月にもカナダで開催されました。世界中のShopifyパートナー、エキスパート、マーチャントの企業が一同に集まり、最新情報が発表されます。

今回の日本版のカンファレンスも募集からすぐに申し込みが殺到して、ほどなくして定員オーバーとなるほどだったそうです。

会場の様子

会場は港区海岸の日の出駅 徒歩1分に位置する複合施設、TABLOID

日の出駅前の様子

複合施設TABLOID

当日の天候は晴れで、最高気温も30度を超える真夏日でした。

受付を済ますと、shopifyに関する冊子と共に昼食用のフード、ペットボトルのお水も渡されます。

参加者への心遣いが感じられました!

shopify uniteの配布物

shopify uniteの受付昼食用に配られたフード

ドリンクコーナーも設置されており、朝から1日過ごすのにとても良い環境だったのではないでしょうか。

ワークショップについて

今回のUniteでは、メインステージのプログラムと平行してワークショップが実施されました。

uniteのワークショップについて

主に開発者を対象としたプログラムで、事前予約制です。
こちらも、受付後すぐに定員オーバーするほど申し込みがあったようです。

shopifyでサイトを作りたいお客様が増えている為、多くのエンジニアがこういったエンジニア向けのワークショップを求めているのではないかなと思いました。


今回、参加したプログラムは、

[A1] Liquidを使ったテーマ作成トレーニング

[A2] NodeとReactを使った埋め込みアプリ開発入門

となります。

Liquidを使ったテーマ作成トレーニング

Shopifyのテーマのバックボーンである、Liquidというテンプレート言語の説明が中心の内容となりました。講師はShopify Japanの岡村 純一氏

liquidを使ったテーマ作成トレーニング

講義は以下のような流れです。

・基本操作、管理画面などの説明
・テーマの構成について
・Liquidの基礎
・Theme kitの説明
・Localesを操作して多言語化

学んだ内容について、一部お伝えします。

テーマの構成について

shopifyのテーマ構成

ディレクトリ(フォルダ)構成となっていて、それぞれ役割があります。

Aseets

共通で読み込むファイルが格納されている。
例:画像、スタイルシート、JavaScriptファイルなど。

Config

テーマエディタの設定をするファイルが格納されている。
2つのJSONファイルがあり、(settings_schema.json、setting_data.json)
テーマのオプションを作る事ができる。

Layout

theme.liquidが入っているディレクトリで、Webサイトのレイアウトを組む部分。デザインの骨組みがこの設定で決められる。
checkout.liquidも格納されている。

Locales

同じテーマの言語を切り替える翻訳データが入っているディレクトリ。
各言語ごとにファイルを作成する。

Sections

共通で使い回す部品を保存する。ドラッグ&ドロップや並べ替え、カスタマイズなどができる再利用可能なコンテンツモジュール。
例:商品画像のサムネイル、ストアの地図情報など

Snippets

他のテーマテンプレートから参照されるLiquidのスニペットファイル。
Aseetsには入らず、SectionsのUI部品のようには使い回さないファイル群。
例:各商品のtwitterシェアボタンなど

Templates

shopifyの各種機能を制御する
例:404liquid、購入者側のログイン画面など

Liquidについて

liquidについての説明
Rubyというプログラミング言語で書かれた、オープンソースのテンプレート言語です。Shopifyのバックボーンテーマにあたります。

2006年からShopifyで正式に利用され、Shopify以外にもZen DeskやSales forceといったウェブアプリケーションでも使われています。

Liquidには大きく3つの機能があります。

1.Objects
2.Tags
3.Filters

Objects

二重波括弧で括る。 {{ }}
波括弧で括った部分のデータを表示させる。

例:{{ product.title }}
左側がobject で間に” . ” を挟んで属性を書くと応じてデータが出力される。
この場合、出力が商品タイトルとなる。

Tags

波括弧に加え、両端に “%” を入れる。 { % % }
テンプレートの条件分岐など、制御フローを作成するために使われる。

例:{% if page.handle == ‘about-me’ %}
<p> 真であった場合の表示 </p>
{% else %}
<p>偽であった場合の表示 </p>

Filters

二重波括弧の中央にパイプライン “|” を入れる。
数値、文字列、変数、objectを修正するための仕組み。 {{ | }}

例: {{ product.title | downcase }}
タイトルの大文字を小文字に修正する。

それぞれの詳しい使い方は、チートシートに記載されています。

Theme Kitについて

Theme kitについての説明

Liquidのローカル開発環境用ツールとして、Theme kitがあります。

特徴として、変更したコードをすぐに画面に反映させられるので、画面で変化を確認しながら開発やテーマカスタマイズを進める事ができます。

複数環境へのテーマアップロードや高速アップデート、ダウンロードにも対応しています。 

導入にはコマンドラインやターミナルを用います。homebrewやcurlでインストールが可能。

API認証情報の設定が必須となりまして、プライベートアプリを作成して必要な情報を取得します。

・APIキー
・パスワード
・ストアURL
・テーマID

などを設定します。

また、Theme kitに似た機能を持つslateという開発ツールがあります。

こちらを利用しているという方も多く、それぞれの違いを質問してみました。

Q.
ご紹介されたTheme kitとslateとの違い、メリット・デメリットがあれば知りたいです。

A.
Slateはこれからメンテナンスはあまりしなくなるので、Theme kitを使ってください。違いは、slateはyarn ベースで、Theme kit は App CLIのように独自コマンドでよりシンプルに使える部分かと思います。

Localesについて

Locale filesについて

各言語ごとの翻訳ファイルを作成し、テーマを多言語化します。

主に、.jsonファイル(テーマテンプレートで使用される、テキスト文字列の翻訳セットを含むファイル)が使用されます。

最初の小文字コードは言語を示し、2文字の大文字はコードは地域を表します。
例:fr-CA.json for French – Canada

Liquidの利用方法

<span>{{ 'blog.comment.email' | t }}</span>

左側(blog.comment.email)が翻訳のキーで、右に ” | t ” を入れると、各ファイルに入っている翻訳データを確認してそれぞれ表示する。

English → <span>Your email</span>

French → <span>Votre adresse courriel</span>

Spanish → <span>Su correo electrónico</span>

参照元:Translation keys and the t filter(英語)

NodeとReactを使った埋め込みアプリ開発入門


shopifyのアプリ開発入門

後半のワークショップはNodeとReactを使った埋め込みアプリ開発入門に関するハンズオンセミナーでした。講師は同じく岡村氏が担当。



資料に沿って、解説してもらいながらローカルアプリ作成を進めていくスタイルのワークショップとなります。

使用する言語/ツール等

Node.js
React.js
Next.js
GraphQl
Apollo
Polaris

koa-authでOAuth認証する

ライブラリ(koa-auth)でOAuth認証をする

サンプリアプリを作るにあたり、上記の一般的知識と理解が必要となるので、エンジニアとしての開発経験がある方でないと難易度が高めです。

EC事業拡大のための機械学習


EC事業拡大のための機械学習

ワークショップ後の最終セッションです。

まず、冒頭にEC市場の状況に関する説明がありました。

EC市場の主要国が占める割合

世界的に見ても、アジアの割合が高いのが特徴的。アジアは重要な市場という位置付けです。

国別のBtoC EC市場シェア
国別にみますと、中国が圧倒的!
次いでアメリカ。その下にイギリス、日本、韓国と続く形となっていました。

こちらの資料は越境EC市場規模についてです。

越境EC市場規模について

日本のアメリカに対するEC市場の割合が大きい反面、中国に対しては261億とまだまだ奮わない状況です。(中国の日本経由の市場規模は15,345億)

このような状況下において、機械学習の技術を取り入れた自動化の流れがECに来ています。

運用の自動化において、アルゴリズムに基づくアカウント作成、アカウント管理が促進され、

・運用コスト削減
・運用効率向上
・一貫性の向上

などが見込めます。

自動化によるメリット

データ分析においては、消費者の購買・行動情報を解析し、

・広告のメンテナンス削減
・除外キーワードの管理

といった、作業工数低減が期待されます。

機械学習を用いた広告の具体例として、スマートショッピングキャンペーンが紹介されていました。

自動化・機械化のパフォーマンス改善

アワードとネットワーキングパーティー

全てのセッションが終わった後は、Shopifyよりパートナー企業様へ表彰が行われました。

unite表彰式の様子

E-commerceAward 2019

受賞された企業の方々、本当におめでとうございます!

締めはネットワーキングパーティーです。。アルコールと軽食が出され、関係者各位がそれぞれ交流を楽しんでいました!

uniteネットワーキングパーティーの様子

名刺交換やお仕事の相談、情報交換などで賑わいました。
今回のネットワーキングパーティーがきっかけで、新たなビジネスの繋がりが生まれるかもしれませんね。


今回のカンファレンスでは、開発者向けの内容を中心にお伝えしています。

Shopifyの開発に関するドキュメントは英語中心の為、学習の敷居がやや高くなりがちです。まだまだ開発の勉強会等が少ない中、今回のワークショップで知りたい事や聞きたい事が学べて、とても有意義な1日となりました!

以上、Shopify Post-Unite 2019のレポートでした。

投稿者プロフィール

Kyohei Tsuno
小型モーターメーカーに10年勤めたのち、エンジニアとしてキャリアを新たにスタートする。Wordpress、Shopifyに精通し、自身のブログでも情報発信する等、マルチに活躍する。趣味は総合格闘技。

無料相談はこちらから

Get a free consultation

メールでのお問い合わせ

メールで無料見積もり
メールは24時間365日受付中!
※問い合わせメールの文章は日本語・英語のどちらでも大丈夫です

海外WEBマーケティングソリューション一覧

Solutions

ECカートシステム世界シェアNo.1のShopifyのマーケティングエキスパート認定マーク

ECカートシステム世界シェアNo.1のShopifyより、
日本初の越境ECに特化したマーケティングエキスパートに認定されました。

お客様の声
世界へボカンにお問い合わせ