Agenda

13:00 開場。席を並ばせます。
13:30 勉強会時間ぴったしに開始。したい。さらっとみんなの名前と仕事内容など自己紹介します。
14:00 目標『レンタルサーバーを借りる』
15:00 休憩
15:10 続き。>目標『写真を変えてみよう！』
16:10 休憩
16:20 続き。>目標『文章を変えてみよう！』
17:20 質疑応答。大河内さんのお話し。
17:30 勉強会終了。

ちなみに、資料作成含めて、検証時間は全部で140分。
内インストールで40分だから
残りが100分。

・・・休憩抜いて2時間弱・・・。

いけるかな？w

Profile

Liz webDesign 代表 田尾ユキエ
名古屋生まれ。名古屋育ち。

Webサイト構築・紙媒体制作業務の他、イベント企画、
NPO法人ファミーユにて動物愛護のボランティアしてます。
動物愛護やボランティアにご興味のある方はぜひご相談ください。同士募集。

学生時代からMS-DOS時代を触り(だけ)、Win98時代からHP作成とCGIにハマる。
子供の頃からワープロしてたから、いまでも「かな打ち」。たぶん最速。

前職は、初中級者向けパソコン教室にて教室長として7年間勤務。
資格は、MOS、Y!オークションアドバイザーなど他。教室出なので(笑
最近では愛玩動物飼養管理士1級。
趣味は、なんでも自分で作ること。手芸も大工も左官も電気工事も内装業も。
カフェ巡りと筋トレ。
チワピン@リザことお出掛け→ノマドワーキング。
座右の銘は、「Un pour tous, tous pour un(アン プウフ トゥイス, プゥス トゥ ハン)」

ハンズオンにおいての注意事項

1. まず始めに、ハンズオン形式のセミナーは「やらねばならない」ではなく、「やれるかも」程度でOKとご認識ください。
2. 今回はさくらインターネット様のご厚意で、1年間スタンダード無料クーポンを利用しますので、銀行振込でも可能ですが、
基本、さくらのレンタルサーバー2週間無料期間の利用にはクレジットカードを使います。
どちらも無料期間中は課金はありませんので、ご安心ください。
3. 時間に制限がある為、事前準備がない場合や、ハンズオンと違う内容で行う場合は置いてかれないようにご注意を…
4. もし、取り戻せない遅れなどありましたら、気を取り直して板書やメモなどに切り替え、困っている隣の人をお手伝いしてあげてください。
5. 今回は「制作者」がメインターゲットですので、サイト制作の経験がある方を対象にしています。それでも店舗オーナーさんに説明するのに必要な情報を入れていますので、中級者の方もこんな簡単にできる方法があるのかと知っていてほしいと思います。

さくらでレンタルサーバーを借りる

Googleさんで「さくら　レンタルサーバー」を検索
↓
さくらのレンタルサーバーをクリック
↓
スタンダードプランのお申し込みをクリック
↓
ログイン
↓
スタンダードにチェックが入ってるかを確認。

初期ドメイン名をつける。
（自社名でも犬の名前でもなんでもOK。ちなみに私はLizwebdesignにしたよ）

「同意する」にチェックを入れる

次へ
↓
クーポン完了後の予定です。
年間一括または月払いをチェック
↓
クレジットカードをチェック＆入力。または銀行振込をチェック。
※お申込から1年後に自動で本登録になります。終了前に更新のお知らせメールが届きます。
ご契約を継続されない場合は解約のお手続きが必要となりますので、無料利用終了月の20日までにお手続きいただきますよう、お願いいたします。
↓
入力内容確認ボタンをクリック。
↓
最終確認画面。
（Evernoteに保存できるひとはやりましょう。できない人はデスクトップにスクショするなど、どこかにメモしておきましょう。）

[前準備] データベースを用意します

会員メニューはこちら　をクリック
↓
メニューから「契約情報」→「契約サービスの確認」→「サーバー設定」をクリック
↓
左メニュー「アプリケーションの設定」にある「データベースの設定」をクリック
↓
右側のリンク<データベースの新規作成>をクリック
↓
パスワードは　dbpass2016　を入力。みんな一緒。
最後に「データベースを作成する」をクリック。
↓
左メニューから「アプリケーションの設定」→「PHP設定の編集」をクリック
↓
テキストボックスへ『date.timezone = Asia/Tokyo』と入力し『保存する 』をクリックします。

クイックインストール始めます

左メニュー上から5番目、「運用に便利なツール」の中の「クイックインストール」をクリック
↓
右コンテンツエリアの「EC」→「EC-CUBE」
↓

ライセンス、インストール規約、注意事項の内容に同意する　にチェック。
インストール先　…　store　に変更（任意）
データベースパスワード　…　dbpass2016
テーブルの接頭語　…　ec（任意）
↓
「インストールする」ボタンをクリック
↓
インストール完了画面にある「アプリケーションの設定に進む」をクリック

※ さくらのデータベース設定のページに記載した情報はのちほど使います。
※ データベースの設定内の「データベース一覧」から確認できます。

EC-CUBE3のインストール

次へ を２回。
↓

店名は「ECCUBE名古屋店 (任意)」
メールアドレス「Liz@liz-webdesign.com（自身の）」
管理画面ログインID　「admin(任意)」
管理画面パスワード　「pass2016(任意)」
管理画面のディレクトリ名　「master(任意)」

・データベースの種類 MySQL
・データベースのホスト名 ※ さくらのデータベース設定から、「データベースサーバ」をコピぺ
・ポート番号　空白
・データベース名 ※ さくらのデータベース設定から、「データベース名」をコピぺ
・ユーザ名 ※ さくらのデータベース設定の「データベース ユーザ名」をコピペ
・パスワード　dbpass2016(任意)

↓
次へ進む
↓
なぜか一瞬エラー？！みたいなのが出るときあるみたいだけど、じっと待つ！
すると勝手に解決してインストール完了！
(エラーメッセージ見てたら完了画面にいってしまう…)
↓
管理画面を表示

ログインID　admin
ログインパス　pass2016

で、ログイン。

早速さわってみよう！

ヘッダーの「ECCUBE名古屋店」をクリック。
となりのタブに店が現れましたね！

まずは写真を替えてみよう！

※ むしろ、ここからが本番です

スライドショーの初めの写真。これの名前はなんでしょう。調べてみましょ。

chromeで、画像を右クリックして「検証」をクリック。
使い慣れてるブラウザがいい方はそれでOK。
画面下か右側、もしくは別ウィンドウで開発モードが出てきました。
今見てるタブが「Elements」タブだと思います。HTML見えてますよね。
それがいまクリックした写真です。
ブラウザの開発モードをメニューバーやF12でいつも出してた人も、この方法もひとつ覚えておきましょう。

mv01.jpgというのが出てきましたか？
これが一枚目の写真。mv02.jpg、mv03.jpgというのが続く写真です。

これを踏まえて、mv01.jpgというのを違う写真に変えましょう。

ちなみにこれ、写真のタグにポインタを乗せるとサイズが出てきます。
サイズが知りたい時に便利なんですけど、ポインタ外すとサイズ忘れちゃうので、私の場合こういう時は、右クリックして「Open Link in New Tab」をクリックして、新しいタブに表示されたタイトルにポインタを乗せて、サイズを確認しちゃいます。
もしくか、いっぺんDLしちゃったりする時もあります。

このテンプレートのままで利用するケースにしてしまって申し訳ないんですけど、時間の都合上写真のサイズに合わせたもの、作ってきました。

本日お送りしたメールにDLするURLが記載されています。
https://www.dropbox.com/s/9c6zqkdwuxxrlpn/pic-ecn01.png?dl=0
こちらからDLしてください。

Dropboxを介したことでファイル名が変わっているかもしれません。
わかりやすくするため、ファイル名を pic-ecn01.png　に修正してください。

※ DLした画像はjpgではなく、pngファイルですのでご注意を。

それでは、管理画面に戻って、左メニュー「コンテンツ管理」をクリックして、中の「ファイル管理」をクリック。

Finderまたはエクスプローラーから「ファイルを選択」にドラッグします。
それから、アップロードをクリック。

ファイルができましたね。
これ、一回削除しましょ。
削除もできましたね。

それでは、ここにフォルダを作ります。　フォルダ作成の欄に「img」と入力。作成ボタンをクリックしてください。
もう一回やってみましょ。imgの中に「top」のフォルダを作ります。
そしたら、「表示」をクリックします。　…「移動」のほうが合ってるような…

ここで、もう一度写真をアップロードしましょ。

はい♪　user_data/img　に pic-ecn01.png　がアップロードされました。

左メニューの同じコンテンツ管理内にある「ページ管理」をクリック。
TOPページの右端にある三点リーダーをクリックして「ページ編集」をクリック。

これが、トップページのソースです。
一番下までスクロールすると、 mv01.jpg　ありましたね

ここを書き換えます。

そしたら、次は、左メニュー同コンテンツ管理内の「キャッシュ管理」をクリック。

キャッシュクリアボタンを・・・押す前に、

先ほど開いたショップサイトに戻って、リロードしてみてください。

ブラウザは、開発者モードが出ている状態でリロードボタンをクリックするとキャッシュクリアができますが、 chromeの場合は、開発者モードが出ている状態でリロードボタン長押しすると、間違いなくキャッシュクリアが確実にできます。

でも

写真、変わりませんよね？

それでは、管理画面に戻ってキャッシュクリアボタンをクリックしましょう。

そして、ショップサイトでリロードすると・・・写真、でましたね！

こんな感じで、Twigファイルの変更をした場合、毎度キャッシュクリアをしないと反映されません。
店舗オーナーさんはこれで良いです。

しかしこれでは、制作者としてはとても面倒で作業効率も下がります。
なので、次からEC-CUBEのデバッグモードを使って編集してみましょう。

一度、写真変更についてまとめます。

写真のアップロード→ページの編集→キャッシュクリア(デバッグモードならこれが無し！)
これが一連の流れとなります。

Twigのタグにつきましては、Smartyの時や、WordPressの関数と似てると思います。
参考書籍も出てますし、コミュニティでも質問されているので、それを地道に拾ってます。。
誰か早くチートシート作ってくれるのを祈りつつ、たぶんまたSmartyのときのように自分で作ります。。。

＊ 大河内さんからの補足

SmartyよりTwigの優れているところは、継承が可能というところです。
Twigを定義している場所は以下となります。
src/Eccube/Resource/template

次はEC-CUBE3のデバッグモードで文章を替えよう！

次は「作業」が要らないEC-CUBE3から使えるsymphonyの「デバッグモード」でやってみましょう！

デバッグモードは安全のためにIP制限がされていますので、自身のIPをサクッと追記します。

まずは、自分のいまのIPを調べましょう。
↓
「アクセス情報 IPアドレス」で検索。

自分のIPアドレスが表示されますので、コピーしておきます。
↓
さくらのサーバーコントロールパネルを開きます。(さっきまで開いてたページ)
↓
「運用に便利なツール」→「ファイルマネージャー」をクリック。
↓
store/html/index_div.php　をダブルクリックして、左下のプレビューのエンピツアイコンをクリックします。
↓

$allow = array(
'127.0.0.1',
'fe80::1',
'自分のIPアドレス',
'::1',
);

上記の　’::1’,　の上に、自分のIPアドレスを加え、保存します。

以上でIPアドレスの登録は完了。
これでデバッグモードの準備完了です。

再び、EC-CUBEの管理画面に戻って、

左メニューの同コンテンツ管理内「ブロック管理」をクリック。
ロゴの横にある三点リーダをクリックして、編集を選びます。
一番下までスクロールして、

と、あるところの

タグの中の文章を　今日はどこにごはん行こうかな？　に変更します。