Webデザイン学科
授業資料

2022前期

2022後期

About

JavaScript演習
［SSG］SSGでECサイト構築

概要解説

SSG（静的サイトジェネレター）11ty を使って EC サイト（10 品目以上）を構築しましょう。

JavaScript クイズ

15 分以内に回答して、送信してください。

内容

  • GitHub
    • fork
    • clone
  • 新規プロジェクト「ecsiet2022」作成
    • npm install
    • JSON データの生成
  • SSG ファイルの環境構築
  • 実装

授業資料

課題「Myshop EC サイト構築」

自分の身の回りのグッズを集めて販売するための EC サイトを SSG（11ty）で効率良く構築しましょう。

制作ページ

  1. Top ページ
  2. 商品（Goods）ページ ×10 ページ
  3. About ページ ※時間がなさそうなので。

制作工程

  1. 開発環境構築（GitHub→fork→clone→npm install)
  2. Myshop の商品決定
  3. JSON 生成のためにデータ作成
  4. 各ページ・データ構成を 11ty/Nunjucks で構築
  5. CSS でレイアウト・装飾
  6. JavaScript で UI パーツ実装
  7. 「GitHub に push」と「FTP でサーバー」にてデータ提出
  8. 発表と評価

JavaScript UI パーツ実装

ページの量産だけでなく、JavaScript で UI パーツを実装してください。
jQuery やプラグインなど利用しても構いません。

  • More ボタン Click 後の処理
  • 商品ページ内のバリエーション切り替え処理
  • その他、入れられれば（Top に戻る、スライドショー、モーダルウィンドウ、ツールチップなど）

GitHub リポジトリ

  1. 上記のリポジトリから GitHub にログインした状態で fork します。
  2. GitHub Desktop を起動し、ローカル PC の Desktop に clone します。
  3. 「essite2022」ディレクト内でnpm installすると、node_modules, eleventy がインストールされます。
  4. README.md を自分用に書き直します。

README.md

# ecsite2022

<!-- 初期データは削除します。 -->

2022 年度 Web デザイン学科 WS1「JavaScript 演習」課題 SSG で EC サイト初期データ

## 完成品

<!-- 完成後、ここにURLを貼ってください。-->

## Features

<!-- サイト名、扱っている商品について -->
<!-- セールスポイントや差別化などを説明する。-->

## Requirement

- 11ty@eleventy 1.0.1
- Nunjucks
- jQuery 3.6.0

<!-- 追加したライブラリやプラグインを追記します。 -->

# Author

- 作成者：
- 所属：トライデントコンピュータ専門学校 Web デザイン学科 2 年
- 志望職種：

# License

ecsite2022 is under [MIT license](https://en.wikipedia.org/wiki/MIT_License).

やってないこと

  • Sass ディレクトリや生成場所は、設定してありません。
  • VS Code 機能拡張「SFTP」の情報は、設定してありません。
  • .njk ファイルは、白紙です。

Nunjucks

layout やデータの取得（loop）などの使い方は解説しましたが、その他にも便利な使い方がありますので、探してみてください。
Nunjucks で、header や sidebar、footer などをパーツとして管理したい場合、block などを利用します。

ちなみに、Nunjucks 以外で制作しても構いません。

JSON データ作成

Excel または、スプレッドシートに商品情報を記述していきます。
でき上がったデータを JSON に変換して、ページ量産や各ページ情報に利用します。
json データのファイル名は ○○.json にしますが、items は避けてください。

sample データ

一行目は key になりますので、必ずコピペする時に必要です。

itemphotos name price state text id colors maker url
["umaibo01.jpg","umaibo02.jpg","umaibo03.jpg"] うまい棒サラミ味 12 true スパイスとスモークのきいたサラミスティックをうまい棒で再現しました。 27002 黄色 （株）やおきん umaibo
["yochan01.jpg","yochan02.jpg","yochan03.jpg","yochan04.jpg"] カットよっちゃん（よっちゃんイカ） 50 false 世界中から厳選したイカと、日本近海で獲れたタラのすり身を主に使用した魚肉シートを食べやすい一口サイズにカットし、秘伝の調味でさっぱりとした酢味に仕上げました。 4710158-2 赤 よっちゃん食品工業（株） yocchan

ワイヤーフレーム

ワイヤーフレームTop ワイヤーフレームgoods

Top ページ_index.njk

products.json からループで値を取得

<!-- 各sectionをループで作成 -->
{% for topPhoto in products %}
<section class="{{ topPhoto.url }}">
	<h2>{{ topPhoto.name }}</h2>
	<div class="mainimage">
		<img src="images/{{ topPhoto.itemphotos[0] }}" alt="{{ topPhotos.name }}メイン画像" />
	</div>
</section>
{% endfor %}

商品ページ_products.njk

エイリアスの設定と画像の読み込み。
alias で失敗するのであれば、無理に変更する必要はない。

---
pagination:
  data: products
  size: 1
  alias: product
permalink: 'products/{{ pagination.items[0].url | slugify }}/'
---

<ul>
	<li>{{ product.name }}</li>
	<li>{{ product.price }}</li>
</ul>

<img src="/images/{{ product.itemphotos[0] }}" />
<img src="/images/{{ product.itemphotos[1] }}" />
<img src="/images/{{ product.itemphotos[2] }}" />

<!--  画像をループで取得 -->
{% for photo in product.itemphotos %}
<img src="/images/{{ photo }}" />
{% endfor %}

product ＝ pagination.items[0]なので、そのままpagination.items[0]で書けば良い。
なので下記は、上記と同じ

---
pagination:
  data: products
  size: 1
permalink: 'products/{{ pagination.items[0].url | slugify }}/'
---

<ul>
	<li>{{ pagination.items[0].name }}</li>
	<li>{{ pagination.items[0].price }}</li>
</ul>

<img src="/images/{{ pagination.items[0].itemphotos[0] }}" />
<img src="/images/{{ pagination.items[0].itemphotos[1] }}" />
<img src="/images/{{ pagination.items[0].itemphotos[2] }}" />

<!--  画像をループで取得 -->
{% for photo in pagination.items[0].itemphotos %}
<img src="/images/{{ photo }}" />
{% endfor %}

JSON の文章に改行を入れたい

商品説明などに改行を入れたい場合は、json にそのまま HTML の<br>を入れてください。

{
	"text": "スパイスとスモークのきいたサラミスティックを<br>うまい棒で再現しました。"
}

Nunjucks で取り入れる場合に| safeを加えれば改行されます。

{{ products.text | safe }}

参考サイト

課題発表

  • 2022 年 7 月 26 日（火）3 時限目
    2022 年 8 月 2 日（火）3 時限目 ※グラフィックデザインと時間変更のため
    • GitHub のリポジトリでコード確認
    • サーバーでアップロードしたサイト確認

2022-06-28
Hideo kawaguchi