72
! 弁護士サイト 2

CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

Embed Size (px)

DESCRIPTION

CSS Nite in KANSAI, LP1で使用しましたスライドデータになります。googlemapの貼り付け方法は、http://datafarm.jp/movies/unit-youtube.htmlよりご確認下さい。

Citation preview

Page 1: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

!

弁護士サイト

2

Page 2: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

!

課題

デザインを元に一週間で納品したい

3

Page 3: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

!

解決できます

4Case1:デザインを元に一週間で納品したい

いつもどおりの作業で十分間に合います。

お客様確認本サーバで公開

テーマの設置モジュール埋め込み動作の設定

コーディングa-blog cmsの設置記事入れ

step1 step2 step3

Page 4: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP1

!

  によるコーディング。→静的でOK

(CMSに入れることを意識しない)

a-blog cmsはサーバのroot以下にフォルダを作成(例:httpdocs/ablogcms)

記事はデザインを意識せず、先入れ。

実際にやること

5Case1:デザインを元に一週間で納品したい

Page 5: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP2

!

themesフォルダに作ったサイトを移動

「カスタマイズ」→「コンフィグ」→「テーマ設定」

作った静的サイトをCMSで動かす

6Case1:デザインを元に一週間で納品したい

作成したフォルダ名に

トップページのファイル名に変更

Page 6: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP2

!

  のスニペットを使ってモジュールを埋め込み

作ったサイトを動的にする

7Case1:デザインを元に一週間で納品したい

モジュール・変数をクリックで入力

Page 7: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP3

!

ユニット形式でシンプルに

お客様確認→文字修正→a-blog cmsの記事なら即時修正

お客様に原稿確認をしてもらう

8Case1:デザインを元に一週間で納品したい

ウィズウィグも利用可能

Page 8: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP3

!

a-blog cms全体をrootフォルダに移動→公開(httpdocs/ablogcms → httpdocs/)

サイトを公開する

9Case1:デザインを元に一週間で納品したい

httpdocs

themesindex.php

など、いろんなファイル

Page 9: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

!

問い合わせフォームを設置したい

課題

10

Page 10: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

! 11Case1:問い合わせフォームを設置

プラグインなしで対応できます

送信内容を管理画面で設定

フォームモジュールを埋め込み

静的にコーディング

step1 step2 step3

解決できます

Page 11: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP1

!

  によるコーディング。→静的でOK

(CMSに入れることを意識しない)

問い合わせをコーディング

12Case1:問い合わせフォームを設置

入力フィールド以外を作っていきます。

Page 12: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP2

!

  のスニペットを使ってフィールドを埋め込み

フォームモジュールを埋め込み

13Case1:問い合わせフォームを設置

フィールドをクリックで入力

BEGIN_MODULE Formの中にフィールドを展開すればどのテンプレートにもフォームを作成することができます。

Page 13: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP3

!

管理画面で設定

送信内容を管理画面で設定

14Case1:問い合わせフォームを設置

IDを設定する事でいくつでもフォームを作成可能

管理画面で送信先を設定可能

フォームの制限をブラウザから可能

Page 14: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

!

ブログのような新着情報をトップに掲載したい

課題

15

Page 15: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

! 16Case1:新着情報をトップに掲載

プラグインなしで対応できます

管理画面から動作を設定

「ID」でモジュールに名前を設定

モジュールをhtmlに埋め込み

step1 step2 step3

解決できます

Page 16: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP1

!

モジュールをHTMLに埋め込み

17Case1:新着情報をトップに掲載

  のスニペットを使ってモジュールを埋め込み

モジュール・変数をクリックで入力

Page 17: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP2

!

「ID」でモジュールに名前を付けます

18Case1:新着情報をトップに掲載

ここに注目

Page 18: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP2

!

「ID」でモジュールに名前を付けます

18Case1:新着情報をトップに掲載

モジュールの後ろに「id=”news”」とすることでモジュールに「news」と命名

Page 19: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP3

!

管理画面で設定

管理画面から動作を設定

19Case1:新着情報をトップに掲載

使ってるモジュールを選んで

先ほどつけた名前を入力

Page 20: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP3

!

管理画面で設定

管理画面から動作を設定

19Case1:新着情報をトップに掲載

表示したいカテゴリを設定

Page 21: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP3

!

管理画面で設定

管理画面から動作を設定

19Case1:新着情報をトップに掲載

表示順や件数を設定

Page 22: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

!

ネイルサロン

20

Page 23: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

!

PCサイトに連動した携帯サイトを作りたい

課題

21

Page 24: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

! 22PCサイトに連動した携帯サイト作り

プラグインなしで対応できます

複雑な動きはモジュール・ルールでカスタマイズ

デザインなどの調整

「keitai」テーマの確認

step1 step2 step3

解決できます

Page 25: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP1

!

a-blog cmsでは「keitai」テーマが既に用意されています。

「keitai」テーマの確認

23PCサイトに連動した携帯サイト作り

Page 26: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP2

!

  のを使ってデザインを修正静的サイトの感覚で色や形を整えます。

デザインなどの調整

24PCサイトに連動した携帯サイト作り

Page 27: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP3

!

IDやモジュールは携帯サイトでも当然有効です。

カテゴリ毎にレイアウトを変える

携帯の新着情報の件数、文字数を変える

携帯用の画像サイズを変える

なども、プラグインなしで可能

複雑な動きにも対応OK

25PCサイトに連動した携帯サイト作り

Page 28: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

!

携帯でクーポンを発行したい

課題

26

Page 29: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

! 27Case2:携帯でクーポンを発行したい

プラグインなしで対応できます

ブログの記事として会員用のクーポンを作成

外部からの会員登録機能を設定する

クーポン用のブログを設定

step1 step2 step3

解決できます

Page 30: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP1

!

専用の子ブログを設定→シークレットに設定

28

STEP1 クーポン用ブログを設置

Case2:携帯でクーポンを発行したい

「シークレット」にすることで会員(読者)だけが見れるようになります。

Page 31: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP2

!

外部からの読者登録を「ON」にする

外部から会員登録できるように

29Case2:携帯でクーポンを発行したい

チェックを入れると、webからの読者登録ができるようになります。

Page 32: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP2

!

外部から会員登録できるように(2)

30Case2:携帯でクーポンを発行したい

Page 33: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP2

!

登録の流れ

31Case2:携帯でクーポンを発行したい

名前、メールアドレスを入力して送信

登録確認のメールが届きます。

Page 34: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP3

!

管理者IDで、クーポンブログにアクセス

割引券の内容を記事として作成

以上で、読者専用のクーポンが完成

ブログの記事としてクーポンを作成

32Case2:携帯でクーポンを発行したい

Page 35: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

Follow

!

エントリーの日時はコントロールできます。

公開日時の予約

公開期限の設定

これらは、プラグインなしで可能

クーポンの期間設定もできます

33Case2:携帯でクーポンを発行したい

Page 36: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

!

お客様用のSNSを作成したい

課題

34

Page 37: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

!

充分な解決はできません

35Case2:お客様用のSNSを作成したい

a-blog cmsにはSNS機能はありません。

→充実した機能を使うには他のSNSが必要。

→但し、会員毎への連絡用ブログは作成可能。

Page 38: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

Follow

!

「その会員様用」の記事が作成可能

コメントをの表示もOK

全員に一括連絡の記事も作成可能

会員同士のコミュニケーション機能はなし

→SNS利用を見極めるライン

a-blog cmsで作れる会員用ブログ

36Case2:お客様用のSNSを作成したい

Page 39: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

!

不動産サイト

37

Page 40: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

!

多数項目がある物件登録画面を実装して欲しい

課題

38

Page 41: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

! 39Case3:多数項目がある物件登録画面の作成

プラグインなしで対応できます

Dwを使って表示用テンプレートに変数を埋め込み

Dwを使ってカスタムフィールドを追加

物件用のブログを設定

step1 step2 step3

解決できます

Page 42: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP1

!

明らかに違うジャンルの内容を入れる場合は、カテゴリで処理せず「子ブログ」を作成が吉

物件用のブログを設定

40Case3:多数項目がある物件登録画面の作成

Page 43: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP1

!

明らかに違うジャンルの内容を入れる場合は、カテゴリで処理せず「子ブログ」を作成が吉

物件用のブログを設定

40Case3:多数項目がある物件登録画面の作成

物件入力用として子ブログで対応

Page 44: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP2

!

「themes」→「system」にある「admin」を 使用中のテーマにコピー

「entry」の中にある「edit.html」を「edit_item.html」 などに変更

   のスニペットを使ってモジュールを埋め込み

エントリーを作成する際に、編集したファイルを参照するようにひもづけ(テンプレート、ルールの変更)

カスタムフィールドを追加

41Case3:多数項目がある物件登録画面の作成

Page 45: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP2

!

  のスニペットを使ってフィールドを埋め込み

カスタムフィールドを埋め込み

42Case3:多数項目がある物件登録画面の作成

フィールドをクリックで入力

ここでフィールドを追加するだけで、カスタムフィールドの追加はおしまい

Page 46: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP3

!

記事一覧、記事詳細など、カスタムフィールドを表示させたいテンプレートを編集

{変数名}で表示できます。

表示用テンプレートに変数を埋め込み

43Case3:多数項目がある物件登録画面の作成

Page 47: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

!

カスタム検索を実装したい

課題

45

Page 48: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

! 46Case3:カスタム検索を実装したい

プラグインなしで対応できます

フォームからURLコンテキストを送る

URLコンテキストを試してみる

カスタムフィールドを作成する

step1 step2 step3

解決できます

Page 49: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP1

!

物件表示に必要なフィールドを作成→既に作業済み

これができていれば、検索の準備も既にOK

カスタムフィールドの作成

47Case3:カスタム検索を実装したい

demo

Page 50: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP2

!

URLに検索条件を書けば、検索ができる。

URLコンテキストで検索を試す

48Case3:カスタム検索を実装したい

http://ame-miya.net/fudosan/ochiai/field/f_type/別荘/

カテゴリ「ochiai」を抽出

「f_type」という「フィールド」に「別荘」というワードがあるものを抽出

Page 51: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP3

!

<formのaction=”【ここ】”>に結果を表示したいテンプレートを指定

formのsubmitには「ACMS_POST_2GET」を指定→この変数をつかって、a-blog cmsにACMSパスを送信

フォームからURLコンテキストを送る

49Case3:カスタム検索を実装したい

Page 52: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

!

各店舗の担当者を区別して更新したい

課題

51

Page 53: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

! 52Case3:各店舗の担当者を区別して更新したい

プラグインなしで対応できます

各店舗の物件をまとめて表示

ブログごとにユーザを作成

店舗ごとにブログを作成

step1 step2 step3

解決できます

Page 54: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP1

!

物件ブログの下に子ブログを作成

店舗ごとにブログを作成

53Case3:各店舗の担当者を区別して更新したい

demo

物件ブログ

支店Aの物件ブログ

支店Bの物件ブログ

Page 55: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP2

!

ブログ毎にユーザを作ればそれぞれのブログしか更新できなくなる。

ブログ毎にユーザを設定

54Case3:各店舗の担当者を区別して更新したい

支店Aの物件ブログ

支店Bの物件ブログ

ユーザA

ユーザB

Page 56: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP3

!

一つ上のブログを見れば、各店舗の物件をまとめて表示、検索できる。

各店舗の物件をまとめて表示

55Case3:各店舗の担当者を区別して更新したい

支店A

支店B

物件「あいうえお」物件「かきくけこ」

物件「さしすせそ」物件「たちつてと」

物件ブログ

物件「あいうえお」物件「かきくけこ」物件「さしすせそ」物件「たちつてと」

Page 57: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

!

googlemapの地図を入れたい

課題

57

Page 58: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

! 58Case3:googlemapの地図を入れたい

プラグインなしで対応できます

住所から地図を入力googlemapユニットを追加

googlemapsAPI keyを設定

step1 step2 step3

解決できます

demo

Page 59: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP1

!

「root」→「config.server.php」の中の「define('【ここ】');」にキーを設定

「カスタマイズ管理」→「コンフィグ一覧」→「プロパティ設定」にキーを設定

これらはインストール時に登録すれば自動で登録されます。

GOOGLEMAPS API KEYの登録

59Case3:googlemapの地図を入れたい

demo

Page 62: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

!

ECサイト

63

Page 63: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

!

ASPでなく独自サイトでECサイトを構築したい

課題

64

Page 64: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

! 65Case4:独自サイトでECサイトを構築したい

ショッププラグインを使う事で対応できます。

ショップ情報を設定外部からの顧客登録は必要に応じて設定

デザインをカスタマイズ

a-blog cmsのショップテーマをインストール

step1 step2 step3

解決できます

Page 65: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

Follow

!

紹介だけに留めさせてください。

カスタムフィールドを使って実現

金額他、数字や文字による表示の並べ替えも可能

価格帯検索(500~1000円を抽出)も可能

ヤマトフィナンシャルでクレジットにも対応

できるのですが、実績がないので…。

66Case4:独自サイトでECサイトを構築したい

Page 66: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

!

FLASHが連動した凝ったサイトを作りたい

課題

67

Page 67: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

! 68Case4:Flashが連動した凝ったサイトを作りたい

プラグインなしで対応できます

URLにアクセスして動作を確認

xmlにモジュールを埋め込み動的に

swf+xmlのフラッシュを作成

step1 step2 step3

解決できます

Page 68: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP1

!

表示させたい内容をxmlに表記する形で作成

XMLを読み込むSWFを作成

69Case4:Flashが連動した凝ったサイトを作りたい

日付記事タイトル

URL画像のパス

Page 69: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP2

!

xmlの内容をモジュールIDを使って表現

XMLにモジュールを組み込み

70Case4:Flashが連動した凝ったサイトを作りたい

日付記事タイトル

URL画像のパス

{date}{title}{url}

%{ROOT_DIR}{path}

モジュール:Entry_Summary

Page 70: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

STEP3

!

xmlの指示は「domain/読ませたい.xml」にアクセス

埋め込むswfは「theme/使用テーマ/使いたい.swf」にアクセス

これらは設計によって変わるかもしれません…。

URLにアクセスのポイント

71Case4:Flashが連動した凝ったサイトを作りたい

Page 71: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

!

お客様にメール配信をしたい

課題

72

Page 72: CSS Nite in KANSAI LP1で使用したa-blog cmsのスライドです。

!

充分な解決はできません

73

a-blog cmsにはメール送信機能はありません。

→他のASPを使うなどの必要があります。

→ユーザ情報の書き出しがあるといいかも。

Case4:お客様にメール配信をしたい