カラーミーショップ「カスタマイズスクール第１期vol.1」

©カラーミーショップ　カスタマイズスクール　※無断転載・複写禁止 - 1 -

目　次

カスタマイズスクール　- 第１期生 -

vol.1　「基礎知識編」

講師：株式会社 paperboy&co. 運営支援グループ　マネージャー　山下　諭https://www.facebook.com/grape.ceo

Part １．イントロダクション（15分）

　Chapter1-1．本講座の目的・コール　Chapter1-2．全５回の概要　Chapter1-3．編集環境・使用ソフト・アカウント準備

Part ２．テンプレートを徹底解説（45分）

　Chapter2-1．他社サービスとの違い　Chapter2-2．テンプレートの仕組み・構造　Chapter2-3．独自タグについて

Part ３．テンプレートエンジン Smarty とは（45分）

　Chapter3-1．Smarty って何？　Chapter3-2．非プログラマーが押さえるポイント　Chapter3-3．カスタマイズによく使用する変数・構文

Part ４．カスタマイズ事例紹介（15分）

Part ５．質疑応答（30分）

- 2 - ©カラーミーショップ　カスタマイズスクール　※無断転載・複写禁止

【Pa r t 1】イントロダクション（15 分）

Chapter1-1．本講座の目的・ゴール

Chapter1-2．全５回講義の内容〜基礎知識から魔改造まで〜

• 目的はショップ運営の業務効率化• 技術者養成講座ではない• ショップオーナーは仕組みとコツを掴む• プロのWEBデザイナーは理解のスピードを短縮• WEBデザインの知識のみでフルカスタマイズすると・・・

■第１回：基礎知識の習得（←今回）カラーミーショップでテンプレートを編集する前に知るべき内容を学びます。座学メイン。

■第２回：トップページ編ネットショップの顔となるトップページを実際のソースコードを編集しながら学びます。共通ページとトップページを押さえればテンプレート編集の７割程度理解できます。

■第３回：商品ページ編商品ページは商品の数だけページが出力されます。カテゴリーやグループによって表示方法を変えたり、話題の商品をソーシャル拡散したり、商品ページ特有のカスタマイズ方法を学びます。

■第４回：上級編Smarty の構文を応用したワンランク上のカスタマイズ方法を伝授。

■第５回：魔改造・認定試験編もはや達人芸や芸術の粋に達している魔改造の事例とその方法をご紹介。テンプレートマスター認定試験と認定証授与。

■心構え• トライ＆エラー• 細かいことは気にしない• 割り切りも大切


【Pa r t 1】イントロダクション（15 分）

Chapter1-3．編集環境・使用ソフト・アカウントの準備

■編集環境・使用ソフト• 使用ブラウザ：GoogleChromeを推奨

http://www.google.com/intl/ja/chrome/browser/　→メリット：動作が軽い、ソースコードが見やすい※管理画面を操作できればどれでも大丈夫

■編集方法は２通り• 管理画面での直接編集

　→すぐに反映される／ちょっとした編集／上級者向け

• テキストエディタ等で編集し管理画面にコピー＆ペースト　→メリット：色付け／入力補助／行番号　→デメリット：コピー＆ペーストの手間

• テキストエディタWin：TeraPad ／秀丸／サクラエディタ／ etcMac：CotEditor ／mi ／ etc

■特典• カラーミーショップのテストアカウントを発行• 有料テンプレートは購入済の状態

ファッション（ホワイト）http://sample38.shop-pro.jp/• Facebook ブループに招待（アンケートにご記入ください）• アーカイブ視聴としてECキャンパス１ヶ月優待（既存ユーザーには1980pt 付与）

https://ec-campus.tv/sessions/new会員登録後、会員No. をアンケートにご記入ください

• すべて受講すると認定証を進呈


【Part ２】カラーミーショップのテンプレートを徹底解説（45分）

Chapter2-1．他社サービスとの違い・採用メリット

■ ASP 比較の場合：レイアウト固定型／管理画面で編集

高い←カスタマイズ性→低いMakeShop　＞　ショップサーブ　＞　FutureShop2　＞　おちゃのこネット

• メリット：レイアウトやボタン画像など専門知識がなくても編集できる。• デメリット：編集できない箇所が多い。id や class が固定でCSSでの編集も制限が多い。

■オープンソースの場合：テンプレートファイル型／ .tpl といったファイルを直接編集

例）EC-CUBE／ osCommerce ／ ZenCart

• メリット：フルカスマイズ可能• デメリット：高度な専門知識が必須

■カラーミーショップ：ASPでフルカスタマイズ可能な唯一のサービス

• メリット：オープンソースと同等のカスタマイズ性、if 分の活用により独自の応用が可能• デメリット：初心者向けでありながら、カスタマイズが難しい


【Part ２】カラーミーショップのテンプレートを徹底解説（45分）

Chapter2-2．テンプレートの仕組み・構造

■基本テンプレート

No 名前説明 HTML CSS 記事

1 共通ショップ画面で共通に表示される部分です。 ◯ ◯

主要テンプレート2 トップショップのトップ画面です。 ◯ ◯

3 商品一覧商品一覧の表示画面です。 ◯ ◯

4 商品詳細商品の詳細画面です。 ◯ ◯

5 特定商取引特定商取引についての画面です。 ◯ ◯

その他テンプレート

6 商品検索結果商品検索結果の表示画面です。 ◯ ◯

7オプション在庫値段表

オプションの在庫と値段の表です。 ◯ ◯

8プライバシーポリシー

プライバシーポリシーについての画面です。 ◯ ◯

9 お問合せお問合せの画面です。 ◯

共有 SSL ページCSS のみ編集可

10マイアカウント会員ログイン

マイアカウントの画面です。◯

11 友達に教えるお友達に教えるクリック時に表示されるメール送信画面です。

◯

12 メルマガ登録・解除メルマガへの登録・解除画面です。 ◯

13 レビューレビューの投稿・閲覧画面です。 ◯

【重要】編集時にこれだけは気をつけよう• 編集時はテンプレートを複製• 1 箇所修正して更新→プレビューで確認•「もとに戻す」ボタンの活用• タイムアウト時間

Chapter2-3．独自タグにつて■独自タグとはカラーミーショップ固有の変数例）<{$shop_name}>と書くと「ほげほげショップ」と出力される

• 独自タグ一覧http://shop-pro.jp/manual/?mode=menu_06_02_01

• 未公開の独自タグページング（ページャー）メルマガ登録・解除


【Part ３】テンプレートエンジンSmarty とは？（45分）

Chapter3-1．Smarty って何だろう？

Chapter3-2．非プログラマーが押さえるポイント

Smarty は、主にPHPアプリケーションで使用されるテンプレートエンジンである。テンプレート自体のキャッシュ機能を有している。現在ではPHPの多くのWebアプリケーションフレームワークでデフォルトのテンプレートエンジンとして採用されている。（引用：Wikipedia）

■肩の力を抜きましょう• ゼロから書けなくてぜんぜんOK• コピー＆ペーストとその応用• 記述方法より意味を理解しておこう

■要するに・・・• カラーミーショップのシステムはPHPでできている• PHP用のテンプレートエンジンがSmarty（2.6 系）• システムとデザインを切り離して管理できる

$smarty->assign(" 変数名 "," 値 ")

図版引用：＠ IT



Chapter3-3．カスマイズによく使用する変数・構文

■変数：<{$変数名 }>

例：<{$item}>

※ {$ 変数名 } こちらの記述が一般的だがカラーミーショップではコードの書きやすさに配慮して　<{$ 変数名 }> という記述になります※デリミター：区切り文字、山括弧・中括弧

■配列：{$ 配列変数名 [ インデックス番号 ]}

例：<{$item[0]}>

■連想配列：<{$ 配列変数名 . キー名 }>

例：<{$item.name}>

■条件分岐：<{if 条件式 }> 条件式が真 (true) の時に実行される処理 <{/if}>

・比較演算子== 等しい　!= 等しくない　> 左が大きい　>= 左が大きいか等しい< 右が大きい　<= 右が大きいか等しい

・論理演算子&&：共にTRUE／ ||：どちらかがTRUE

・偽の時の処理<{else}>：条件式が偽 (false) の時に実行される処理

・複数の条件分岐<{if 条件式1}>条件式1が真 (true) の時に実行される処理<{elseif 条件式2}>条件式1が偽 (false) で条件式2が真 (true) の時に実行される処理<{else}>全ての条件式が偽 (false) の時に実行される処理<{/if}>

例：<{if $sample == 10}>　ほげほげ<{elseif $sample > 5}>　ほげほげ２<{else}>ほげほげ３<{/if}>

■繰り返し<{section name=section 名 loop= ループ回数 }>

繰り返し処理の中で行う処理<{/section}>

例）<{section name=num loop=$recommend}>

<{$recommend[num].name}>

<{/section}>

（※ foreach はなぜか使いません）

■修飾子<{$ 変数名 | 修飾子名 }>

<{$ 変数名 | 修飾子名1| 修飾子名2} >

<{$ 変数名 | 修飾子名 : パラメータ }>

<{$ 変数名 | 修飾子名 : パラメータ1: パラメータ2} >

参考：http://www.phpbook.jp/smarty/modifier/

■テンプレートの読み込み<{include file=' テンプレートファイル '} >

・共通テンプレートの場合<{include file = $file_name}>

http://hogehoge.com　の場合→「２．トップページ」テンプレを読み込みhttp://hogehoge.com/?mode=f1　の場合→「フリーページ１」を読み込み

■コメント<{*コメントはHTMLに出ないのでメモとして使います*}>

※これらコメントは誰でも見れるのでちょっとはずかしい…/*CSSのコメント *///JavaScript のコメント


【Pa r t ４】カスタマイズ事例紹介（15 分）

初級編　Level. 1-2　★■商品名を指定文字数で省略

長い商品名を一覧に表示すると並びが崩れたり見栄えがよくないですよね。長くても１行に表示させたい場合に指定の文字数に省略することができます。「長い商品名はか…」こんな具合に。

■共通を非表示にして LPOリスティングなど広告バナーからのリンク先は他ページへのリンクがないことが定石です。フリーページを判定したタグを共通ページに入れることで、共通箇所が表示されないフリーページを作ることができます。

中級編　Level. 3-4　★★★■縦長商品ページでのカート表示北欧、暮らしの道具店　http://hokuohkurashi.com

画面の下の方にスクロールすると、画面上部にボタンが表示されるようになっています。簡単な Javascript と CSSで出来ていますが、表示タイミングも抜群でよく調整されていており、コンバージョン率も上がりそうなカスタマイズです。

■商品ページを画像ギャラリーに太陽の森　ディマシオ美術館　http://www.dimaccio-museum.jp

カラーミーを使用しているのにECサイトでなく、普通のHP風になっている面白いサイトです。美術作品を商品として登録し、カート機能を非表示にしておくだけで、簡単に更新できるCMSとして利用することも出来るというのは、驚きの使い方です。

上級編　Level. 5　★★★★★■カートに追加するとカートの中身が同画面に表示バンフオンライン　http://www.memory1977.com

通常、「カートに入れる」ボタンを押した後は、カート内商品が表示される画面へ遷移します。カートに入れるボタンに Javascript を仕込み、submit させると同時に reload することでページ遷移先を変更させていたのです。ここをカスタマイズする発想がスゴイです。

魔改造編　Level. ???　★★★★★★★★★★■カート画面のモーダル表示

三英美術　http://www.sanei-art.jp

jQuery 等で様々なカスタマイズをしているショップです。中でも一番すごいのが、決済画面を iframeで読みだして、モーダル表示させている点です。このような方法で、ASP特有の似通った決済画面を、自社サイト風にカスタマイズ出来るとは驚きです。

カラーミーショップ「カスタマイズスクール第１期vol.1」

Education