Upload
takayuki-katumata
View
1.621
Download
0
Embed Size (px)
DESCRIPTION
CSS Nite in KANSAI, LP1で使用しましたスライドデータになります。googlemapの貼り付け方法は、http://datafarm.jp/movies/unit-youtube.htmlよりご確認下さい。
Citation preview
!
弁護士サイト
2
!
課題
デザインを元に一週間で納品したい
3
!
解決できます
4Case1:デザインを元に一週間で納品したい
いつもどおりの作業で十分間に合います。
お客様確認本サーバで公開
テーマの設置モジュール埋め込み動作の設定
コーディングa-blog cmsの設置記事入れ
step1 step2 step3
STEP1
!
によるコーディング。→静的でOK
(CMSに入れることを意識しない)
a-blog cmsはサーバのroot以下にフォルダを作成(例:httpdocs/ablogcms)
記事はデザインを意識せず、先入れ。
実際にやること
5Case1:デザインを元に一週間で納品したい
STEP2
!
themesフォルダに作ったサイトを移動
「カスタマイズ」→「コンフィグ」→「テーマ設定」
作った静的サイトをCMSで動かす
6Case1:デザインを元に一週間で納品したい
作成したフォルダ名に
トップページのファイル名に変更
STEP2
!
のスニペットを使ってモジュールを埋め込み
作ったサイトを動的にする
7Case1:デザインを元に一週間で納品したい
モジュール・変数をクリックで入力
STEP3
!
ユニット形式でシンプルに
お客様確認→文字修正→a-blog cmsの記事なら即時修正
お客様に原稿確認をしてもらう
8Case1:デザインを元に一週間で納品したい
ウィズウィグも利用可能
STEP3
!
a-blog cms全体をrootフォルダに移動→公開(httpdocs/ablogcms → httpdocs/)
サイトを公開する
9Case1:デザインを元に一週間で納品したい
httpdocs
themesindex.php
など、いろんなファイル
!
問い合わせフォームを設置したい
課題
10
! 11Case1:問い合わせフォームを設置
プラグインなしで対応できます
送信内容を管理画面で設定
フォームモジュールを埋め込み
静的にコーディング
step1 step2 step3
解決できます
STEP1
!
によるコーディング。→静的でOK
(CMSに入れることを意識しない)
問い合わせをコーディング
12Case1:問い合わせフォームを設置
入力フィールド以外を作っていきます。
STEP2
!
のスニペットを使ってフィールドを埋め込み
フォームモジュールを埋め込み
13Case1:問い合わせフォームを設置
フィールドをクリックで入力
BEGIN_MODULE Formの中にフィールドを展開すればどのテンプレートにもフォームを作成することができます。
STEP3
!
管理画面で設定
送信内容を管理画面で設定
14Case1:問い合わせフォームを設置
IDを設定する事でいくつでもフォームを作成可能
管理画面で送信先を設定可能
フォームの制限をブラウザから可能
!
ブログのような新着情報をトップに掲載したい
課題
15
! 16Case1:新着情報をトップに掲載
プラグインなしで対応できます
管理画面から動作を設定
「ID」でモジュールに名前を設定
モジュールをhtmlに埋め込み
step1 step2 step3
解決できます
STEP1
!
モジュールをHTMLに埋め込み
17Case1:新着情報をトップに掲載
のスニペットを使ってモジュールを埋め込み
モジュール・変数をクリックで入力
STEP2
!
「ID」でモジュールに名前を付けます
18Case1:新着情報をトップに掲載
ここに注目
STEP2
!
「ID」でモジュールに名前を付けます
18Case1:新着情報をトップに掲載
モジュールの後ろに「id=”news”」とすることでモジュールに「news」と命名
STEP3
!
管理画面で設定
管理画面から動作を設定
19Case1:新着情報をトップに掲載
使ってるモジュールを選んで
先ほどつけた名前を入力
STEP3
!
管理画面で設定
管理画面から動作を設定
19Case1:新着情報をトップに掲載
表示したいカテゴリを設定
STEP3
!
管理画面で設定
管理画面から動作を設定
19Case1:新着情報をトップに掲載
表示順や件数を設定
!
ネイルサロン
20
!
PCサイトに連動した携帯サイトを作りたい
課題
21
! 22PCサイトに連動した携帯サイト作り
プラグインなしで対応できます
複雑な動きはモジュール・ルールでカスタマイズ
デザインなどの調整
「keitai」テーマの確認
step1 step2 step3
解決できます
STEP1
!
a-blog cmsでは「keitai」テーマが既に用意されています。
「keitai」テーマの確認
23PCサイトに連動した携帯サイト作り
STEP2
!
のを使ってデザインを修正静的サイトの感覚で色や形を整えます。
デザインなどの調整
24PCサイトに連動した携帯サイト作り
STEP3
!
IDやモジュールは携帯サイトでも当然有効です。
カテゴリ毎にレイアウトを変える
携帯の新着情報の件数、文字数を変える
携帯用の画像サイズを変える
なども、プラグインなしで可能
複雑な動きにも対応OK
25PCサイトに連動した携帯サイト作り
!
携帯でクーポンを発行したい
課題
26
! 27Case2:携帯でクーポンを発行したい
プラグインなしで対応できます
ブログの記事として会員用のクーポンを作成
外部からの会員登録機能を設定する
クーポン用のブログを設定
step1 step2 step3
解決できます
STEP1
!
専用の子ブログを設定→シークレットに設定
28
STEP1 クーポン用ブログを設置
Case2:携帯でクーポンを発行したい
「シークレット」にすることで会員(読者)だけが見れるようになります。
STEP2
!
外部からの読者登録を「ON」にする
外部から会員登録できるように
29Case2:携帯でクーポンを発行したい
チェックを入れると、webからの読者登録ができるようになります。
STEP2
!
外部から会員登録できるように(2)
30Case2:携帯でクーポンを発行したい
STEP2
!
登録の流れ
31Case2:携帯でクーポンを発行したい
名前、メールアドレスを入力して送信
登録確認のメールが届きます。
STEP3
!
管理者IDで、クーポンブログにアクセス
割引券の内容を記事として作成
以上で、読者専用のクーポンが完成
ブログの記事としてクーポンを作成
32Case2:携帯でクーポンを発行したい
Follow
!
エントリーの日時はコントロールできます。
公開日時の予約
公開期限の設定
これらは、プラグインなしで可能
クーポンの期間設定もできます
33Case2:携帯でクーポンを発行したい
!
お客様用のSNSを作成したい
課題
34
!
充分な解決はできません
35Case2:お客様用のSNSを作成したい
a-blog cmsにはSNS機能はありません。
→充実した機能を使うには他のSNSが必要。
→但し、会員毎への連絡用ブログは作成可能。
Follow
!
「その会員様用」の記事が作成可能
コメントをの表示もOK
全員に一括連絡の記事も作成可能
会員同士のコミュニケーション機能はなし
→SNS利用を見極めるライン
a-blog cmsで作れる会員用ブログ
36Case2:お客様用のSNSを作成したい
!
不動産サイト
37
!
多数項目がある物件登録画面を実装して欲しい
課題
38
! 39Case3:多数項目がある物件登録画面の作成
プラグインなしで対応できます
Dwを使って表示用テンプレートに変数を埋め込み
Dwを使ってカスタムフィールドを追加
物件用のブログを設定
step1 step2 step3
解決できます
STEP1
!
明らかに違うジャンルの内容を入れる場合は、カテゴリで処理せず「子ブログ」を作成が吉
物件用のブログを設定
40Case3:多数項目がある物件登録画面の作成
STEP1
!
明らかに違うジャンルの内容を入れる場合は、カテゴリで処理せず「子ブログ」を作成が吉
物件用のブログを設定
40Case3:多数項目がある物件登録画面の作成
物件入力用として子ブログで対応
STEP2
!
「themes」→「system」にある「admin」を 使用中のテーマにコピー
「entry」の中にある「edit.html」を「edit_item.html」 などに変更
のスニペットを使ってモジュールを埋め込み
エントリーを作成する際に、編集したファイルを参照するようにひもづけ(テンプレート、ルールの変更)
カスタムフィールドを追加
41Case3:多数項目がある物件登録画面の作成
STEP2
!
のスニペットを使ってフィールドを埋め込み
カスタムフィールドを埋め込み
42Case3:多数項目がある物件登録画面の作成
フィールドをクリックで入力
ここでフィールドを追加するだけで、カスタムフィールドの追加はおしまい
STEP3
!
記事一覧、記事詳細など、カスタムフィールドを表示させたいテンプレートを編集
{変数名}で表示できます。
表示用テンプレートに変数を埋め込み
43Case3:多数項目がある物件登録画面の作成
!
カスタム検索を実装したい
課題
45
! 46Case3:カスタム検索を実装したい
プラグインなしで対応できます
フォームからURLコンテキストを送る
URLコンテキストを試してみる
カスタムフィールドを作成する
step1 step2 step3
解決できます
STEP1
!
物件表示に必要なフィールドを作成→既に作業済み
これができていれば、検索の準備も既にOK
カスタムフィールドの作成
47Case3:カスタム検索を実装したい
demo
STEP2
!
URLに検索条件を書けば、検索ができる。
URLコンテキストで検索を試す
48Case3:カスタム検索を実装したい
http://ame-miya.net/fudosan/ochiai/field/f_type/別荘/
カテゴリ「ochiai」を抽出
「f_type」という「フィールド」に「別荘」というワードがあるものを抽出
STEP3
!
<formのaction=”【ここ】”>に結果を表示したいテンプレートを指定
formのsubmitには「ACMS_POST_2GET」を指定→この変数をつかって、a-blog cmsにACMSパスを送信
フォームからURLコンテキストを送る
49Case3:カスタム検索を実装したい
!
各店舗の担当者を区別して更新したい
課題
51
! 52Case3:各店舗の担当者を区別して更新したい
プラグインなしで対応できます
各店舗の物件をまとめて表示
ブログごとにユーザを作成
店舗ごとにブログを作成
step1 step2 step3
解決できます
STEP1
!
物件ブログの下に子ブログを作成
店舗ごとにブログを作成
53Case3:各店舗の担当者を区別して更新したい
demo
物件ブログ
支店Aの物件ブログ
支店Bの物件ブログ
STEP2
!
ブログ毎にユーザを作ればそれぞれのブログしか更新できなくなる。
ブログ毎にユーザを設定
54Case3:各店舗の担当者を区別して更新したい
支店Aの物件ブログ
支店Bの物件ブログ
ユーザA
ユーザB
STEP3
!
一つ上のブログを見れば、各店舗の物件をまとめて表示、検索できる。
各店舗の物件をまとめて表示
55Case3:各店舗の担当者を区別して更新したい
支店A
支店B
物件「あいうえお」物件「かきくけこ」
物件「さしすせそ」物件「たちつてと」
物件ブログ
物件「あいうえお」物件「かきくけこ」物件「さしすせそ」物件「たちつてと」
!
googlemapの地図を入れたい
課題
57
! 58Case3:googlemapの地図を入れたい
プラグインなしで対応できます
住所から地図を入力googlemapユニットを追加
googlemapsAPI keyを設定
step1 step2 step3
解決できます
demo
STEP1
!
「root」→「config.server.php」の中の「define('【ここ】');」にキーを設定
「カスタマイズ管理」→「コンフィグ一覧」→「プロパティ設定」にキーを設定
これらはインストール時に登録すれば自動で登録されます。
GOOGLEMAPS API KEYの登録
59Case3:googlemapの地図を入れたい
demo
STEP2
!
「エントリー作成」→「地図」ボタンをクリック
GOOGLEMAPS ユニットを追加
60Case3:googlemapの地図を入れたい
demo
Follow
!
動画で紹介しております。
62Case3:googlemapの地図を入れたい
データファームのサイトにジャンプ
!
ECサイト
63
!
ASPでなく独自サイトでECサイトを構築したい
課題
64
! 65Case4:独自サイトでECサイトを構築したい
ショッププラグインを使う事で対応できます。
ショップ情報を設定外部からの顧客登録は必要に応じて設定
デザインをカスタマイズ
a-blog cmsのショップテーマをインストール
step1 step2 step3
解決できます
Follow
!
紹介だけに留めさせてください。
カスタムフィールドを使って実現
金額他、数字や文字による表示の並べ替えも可能
価格帯検索(500~1000円を抽出)も可能
ヤマトフィナンシャルでクレジットにも対応
できるのですが、実績がないので…。
66Case4:独自サイトでECサイトを構築したい
!
FLASHが連動した凝ったサイトを作りたい
課題
67
! 68Case4:Flashが連動した凝ったサイトを作りたい
プラグインなしで対応できます
URLにアクセスして動作を確認
xmlにモジュールを埋め込み動的に
swf+xmlのフラッシュを作成
step1 step2 step3
解決できます
STEP1
!
表示させたい内容をxmlに表記する形で作成
XMLを読み込むSWFを作成
69Case4:Flashが連動した凝ったサイトを作りたい
日付記事タイトル
URL画像のパス
STEP2
!
xmlの内容をモジュールIDを使って表現
XMLにモジュールを組み込み
70Case4:Flashが連動した凝ったサイトを作りたい
日付記事タイトル
URL画像のパス
{date}{title}{url}
%{ROOT_DIR}{path}
モジュール:Entry_Summary
STEP3
!
xmlの指示は「domain/読ませたい.xml」にアクセス
埋め込むswfは「theme/使用テーマ/使いたい.swf」にアクセス
これらは設計によって変わるかもしれません…。
URLにアクセスのポイント
71Case4:Flashが連動した凝ったサイトを作りたい
!
お客様にメール配信をしたい
課題
72
!
充分な解決はできません
73
a-blog cmsにはメール送信機能はありません。
→他のASPを使うなどの必要があります。
→ユーザ情報の書き出しがあるといいかも。
Case4:お客様にメール配信をしたい