105
有限会社アップルップル 実践編

WDHA#29 a-blog cms

Embed Size (px)

Citation preview

Page 1: WDHA#29 a-blog cms

有限会社アップルップル  ⼭山本⼀一道

実践編

Page 2: WDHA#29 a-blog cms
Page 3: WDHA#29 a-blog cms

#ablogcms

3

#ablogcms

Page 4: WDHA#29 a-blog cms

http://forum.a-blogcms.jp/

Page 5: WDHA#29 a-blog cms

http://demo.a-blogcms.jp/

Page 6: WDHA#29 a-blog cms
Page 7: WDHA#29 a-blog cms

最近の勉強会やセミナー

Page 8: WDHA#29 a-blog cms

セミナー&勉強会

Page 9: WDHA#29 a-blog cms

セミナー&勉強会

Page 10: WDHA#29 a-blog cms

7/16

7/17 7/228/21

11/98/26

10/210/1 10/19

11/10

セミナー&勉強会

11/1911/20

Page 11: WDHA#29 a-blog cms

Training  Camp  2010  Autumn  2010年11⽉月19⽇日-20⽇日

Page 12: WDHA#29 a-blog cms

合宿の参加者7⼈人

26⼈人13エリア

Page 13: WDHA#29 a-blog cms
Page 14: WDHA#29 a-blog cms

12/06  初級編12/21  中級編

Page 15: WDHA#29 a-blog cms

コンフィグ

テーマ

テンプレートモジュール

ルール

URLコンテキスト

モジュールID フォーム カスタム

フィールド

Page 16: WDHA#29 a-blog cms

デモ

Page 17: WDHA#29 a-blog cms

動的コンテンツに

Page 18: WDHA#29 a-blog cms

画像キャプション

Page 19: WDHA#29 a-blog cms

モジュール

コンテンツ(パーツ)

Page 20: WDHA#29 a-blog cms
Page 21: WDHA#29 a-blog cms

ナビゲーションモジュール

Page 22: WDHA#29 a-blog cms

エントリーヘッドラインモジュール

Page 23: WDHA#29 a-blog cms

タグクラウドモジュール

Page 24: WDHA#29 a-blog cms

ブログフィールドモジュール

Page 25: WDHA#29 a-blog cms

エントリーサマリーモジュール

Page 26: WDHA#29 a-blog cms

バナーモジュール

Page 27: WDHA#29 a-blog cms

エントリーボディモジュール

Page 28: WDHA#29 a-blog cms

トピックパスモジュール

Page 29: WDHA#29 a-blog cms
Page 30: WDHA#29 a-blog cms

URLコンテキスト

URLによって表現されるページの文脈情報

Page 31: WDHA#29 a-blog cms

URLコンテキストhttp://example.com/トップページ

http://example.com/news/ニュースカテゴリーの一覧

http://example.com/news/entry-1.htmlニュースカテゴリーの詳細ページ

Page 32: WDHA#29 a-blog cms

URLコンテキストhttp://example.com/news/ニュースカテゴリーの一覧

http://example.com/products/製品紹介カテゴリーの一覧

http://example.com/recruit/求人カテゴリーの一覧

Page 33: WDHA#29 a-blog cms

モジュールURLコンテキスト

データ

条件 表示

Powered by

DB

Page 34: WDHA#29 a-blog cms

コンフィグ

システムの設定

Page 35: WDHA#29 a-blog cms
Page 36: WDHA#29 a-blog cms
Page 37: WDHA#29 a-blog cms

テンプレート

HTML や XML ファイル

モジュール

モジュール

モジュール

Page 38: WDHA#29 a-blog cms

テンプレートの記述1

<ul><mt:Entries lastn="5"> <li> <a href="<mt:EntryLink />"><mt:EntryTitle /></a> </li></mt:Entries></ul>

movable type

Page 39: WDHA#29 a-blog cms

テンプレートの記述2

<ul><?php wp_get_archives('type=postbypost&limit=5'); ?></ul>

wordpress

Page 40: WDHA#29 a-blog cms

テンプレートの記述3

<!-- BEGIN_MODULE Entry_List --><ul> <!-- BEGIN entry:loop --> <li><a href="{url}">{title}</a></li> <!-- END entry:loop --></ul><!-- END_MODULE Entry_List -->

a-blog cms

Page 41: WDHA#29 a-blog cms

モジュールとプログラム

<!-- BEGIN_MODULE Aaa_Bbb -->

この部分に各種HTMLを記述する

<!-- END_MODULE Aaa_Bbb -->

php/ACMS/GET/Aaa/Bbb.php

Page 42: WDHA#29 a-blog cms

インクルード機能

<!--#include file='include/sample.html'-->

<!--#include file='http://domain.com/parts.html' -->

SSIの記述方法で書く事により Adobe Dreamweaver のデザインビューでインクルード先の表示も可能になっています。

Page 43: WDHA#29 a-blog cms

グローバル変数

%{BLOG_NAME} ブログ名

%{ARCHIVES_DIR} アーカイブディレクトリ

%{BASE_URL} ブログのトップページのURL

サイトをチェック

Page 44: WDHA#29 a-blog cms

インクルード機能+

グローバル変数

<!--#include file='include/cid%{CID}.html'-->

Page 45: WDHA#29 a-blog cms

校正オプション{text}[trim(13, '...')]

{text}[nl2br]

{date}[wareki]

{date}[age]

{data}[nubmer_format]

文字列を足切り

改行をbrに置き換える

和暦

年齢

3桁毎のカンマ区切り

サイトをチェック

Page 46: WDHA#29 a-blog cms

HTMLだけでなくXMLもOK

Page 47: WDHA#29 a-blog cms

テーマ

HTML + IMG + CSS 等

IMG

テンプレート

CSS

テンプレート

テンプレート

Page 48: WDHA#29 a-blog cms

テーマの構成についてthemes system admin

plain

blog

category

entry

index.htmlhtml

images

css

admin.htmlhtml

404.html

imagesinclude

html

login.htmlhtml

css

Page 49: WDHA#29 a-blog cms

テーマの構成についてthemes system admin

plain

blog

category

entry

index.htmlhtml

images

css

admin.htmlhtml

404.html

imagesinclude

html

共有テンプレート

カスタマイズテンプレート

login.htmlhtml

css管理ページのテンプレート

Page 50: WDHA#29 a-blog cms

テーマの継承

system

plain

news@plain

Page 51: WDHA#29 a-blog cms

トップページ:top.html

 一覧ページ:index.html

 詳細ページ:entry.html

Page 52: WDHA#29 a-blog cms

/themes/company3/top.html

Page 53: WDHA#29 a-blog cms

/themes/company3/top.html

Page 54: WDHA#29 a-blog cms

/themes/company3/news/index.html

Page 55: WDHA#29 a-blog cms

/themes/company3/news/index.html

Page 56: WDHA#29 a-blog cms

/themes/company3/news/entry.html

Page 57: WDHA#29 a-blog cms

/themes/company3/news/entry.html

Page 58: WDHA#29 a-blog cms

/themes/company3/index.html

Page 59: WDHA#29 a-blog cms

/themes/company3/index.html

Page 60: WDHA#29 a-blog cms

/themes/company3/products/index.html

Page 61: WDHA#29 a-blog cms

/themes/company3/products/index.html

Page 62: WDHA#29 a-blog cms

/themes/company3/entry.html

Page 63: WDHA#29 a-blog cms

/themes/company3/entry.html

Page 64: WDHA#29 a-blog cms

ルール

条件によりコンフィグの設定を変更する

Page 65: WDHA#29 a-blog cms

ルール

Page 66: WDHA#29 a-blog cms

ワンソース マルチユース

Page 67: WDHA#29 a-blog cms

モジュールID

モジュールに条件を設定

Page 68: WDHA#29 a-blog cms

モジュールID

Page 69: WDHA#29 a-blog cms

モジュールURLコンテキスト

データ

表示

Powered by

DB

Page 70: WDHA#29 a-blog cms

モジュールURLコンテキスト

モジュールID

×データ

条件

表示

Powered by

DB

Page 71: WDHA#29 a-blog cms

フォーム

とっても高機能でオススメ!

Page 72: WDHA#29 a-blog cms

フォーム• ページのどこにあっても大丈夫• メールの送信には2種類のメールを送れます• 入力項目のチェック機能• 入力項目のコンバート機能• 複数ステップのフォームを作る事ができる• DBに蓄積&CSVのダウンロード

Page 73: WDHA#29 a-blog cms

フォーム

Page 74: WDHA#29 a-blog cms

フォーム:text

<input name="mailaddress" type="text" value="" />

<input type="hidden" name="field[]" value="mailaddress" />

<input type="hidden" name="mailaddress:validator#required" />

validatorは管理ページでもテンプレートどちらでも設定可能です。

Page 75: WDHA#29 a-blog cms

フォーム:validator

required 

minLength maxLength min max 

regexp digits

email url equalTo

Page 76: WDHA#29 a-blog cms

フォーム:converter

<input type="hidden" name="mailaddress:c" value="a" />

Page 77: WDHA#29 a-blog cms

フォーム:submit

<input type="submit" name="ACMS_POST_Form_Confirm" value="確認" />

<input type="submit" name="ACMS_POST_Form_Chain" value="戻る" />

<input type="submit" name="ACMS_POST_Form_Submit" value="送信" />

Page 78: WDHA#29 a-blog cms

フォーム:step<!-- BEGIN_MODULE Form --><!-- BEGIN step--><!--#include file="/include/form/insert.html"--><!-- END step --><!-- BEGIN step#reapply --><!--#include file="/include/form/update.html"--><!-- END step#reapply --><!-- BEGIN step#confirm --><!--#include file="/include/form/confirm.html"--><!-- END step#confirm --><!-- BEGIN step#result --><!--#include file="/include/form/result.html"--><!-- END step#result --><!-- END_MODULE Form -->

初期

修正

確認

完了

Page 79: WDHA#29 a-blog cms

フォーム:step<!-- BEGIN step --><form action="?step=reapply" method="post"><!--#include file="/form/input.html"--><input type="hidden" name="step" value="confirm" /><input type="hidden" name="id" value="contact" /><input type="submit" name="ACMS_POST_Form_Confirm" value="確認" /></form><!-- END step -->

Page 80: WDHA#29 a-blog cms

フォーム:step<!-- BEGIN step --><form action="?step=reapply" method="post"><!--#include file="/form/input.html"--><input type="hidden" name="step" value="confirm" /><input type="hidden" name="id" value="contact" /><input type="submit" name="ACMS_POST_Form_Confirm" value="確認" /></form><!-- END step -->

フォームIDを設定

Page 81: WDHA#29 a-blog cms

フォーム:step<!-- BEGIN step --><form action="?step=reapply" method="post"><!--#include file="/form/input.html"--><input type="hidden" name="step" value="confirm" /><input type="hidden" name="id" value="contact" /><input type="submit" name="ACMS_POST_Form_Confirm" value="確認" /></form><!-- END step -->

正常時のSTEPを設定

Page 82: WDHA#29 a-blog cms

フォーム:step<!-- BEGIN step --><form action="?step=reapply" method="post"><!--#include file="/form/input.html"--><input type="hidden" name="step" value="confirm" /><input type="hidden" name="id" value="contact" /><input type="submit" name="ACMS_POST_Form_Confirm" value="確認" /></form><!-- END step -->

エラーの時のSTEPを設定

Page 83: WDHA#29 a-blog cms

フォーム:example

themes/system/sample/form.html

サイトをチェック

a-blog cmsのサイトのサポート > チュートリアル > フォーム

Page 84: WDHA#29 a-blog cms

カスタムフィールド

とても簡単です

Page 85: WDHA#29 a-blog cms

カスタムフィールド:text<input name="mailaddress" type="text" value="{mailaddress}" />

<input type="hidden" name="field[]" value="mailaddress" />

<input type="hidden" name="mailaddress:validator#required" />

Page 86: WDHA#29 a-blog cms

システムの構造index.php

archives

themes system admin

plain

blog

category

entry

php

index.htmlhtml

images

css

config.server.phpphp

admin blog

Page 87: WDHA#29 a-blog cms

カスタムフィールドが凄い

Page 88: WDHA#29 a-blog cms
Page 89: WDHA#29 a-blog cms
Page 90: WDHA#29 a-blog cms
Page 91: WDHA#29 a-blog cms

カスタムフィールドの機能強化

91

Page 92: WDHA#29 a-blog cms

これまでのカスタムフィールド

• 長辺指定によるリサイズ • ファイル名指定(ファイル形式変換)

• 画像のアップロードのみ対応。

• 検索はイコールのみのAND検索

Page 93: WDHA#29 a-blog cms

• PDFやFLV等のファイルも可能に!

カスタムフィールドの機能アップ

• 縦・横・長辺指定によるリサイズ • ファイル名指定(ファイル形式変換)• 拡大画像・ケータイ画像生成

• 画像のアップロードも機能拡張!

• 画像以外のファイルについても対応!

Page 94: WDHA#29 a-blog cms

カスタムフィールドの機能アップ

• AND , OR の検索• 範囲検索• ソート機能(検索したキーのみ対応)

• 検索も大幅拡張!

Page 95: WDHA#29 a-blog cms

95

http://localhost/test/search/

Page 96: WDHA#29 a-blog cms

96

sample@vicuna

Page 97: WDHA#29 a-blog cms

97

Page 98: WDHA#29 a-blog cms

これからの

Page 99: WDHA#29 a-blog cms

1.4

•カスタムフィールドの強化•ダイレクト編集機能•エントリー内の段組をサポート•会員管理機能の強化•BASIC認証の実装(PHPモジュール版のみ)

Page 100: WDHA#29 a-blog cms

まとめ

Page 101: WDHA#29 a-blog cms

が、動くサーバは必要ですが、カスタマイズにプログラムを書く必要はありません。

Powered by

Page 102: WDHA#29 a-blog cms

を使って、管理ページの設定をするだけでWebサイトを作れます。

を使ってテンプレートと

Page 103: WDHA#29 a-blog cms

CSSのようにJavaScriptが書ける

Page 104: WDHA#29 a-blog cms

HTMLを書くだけでWebシステムが作れる

Page 105: WDHA#29 a-blog cms

Web制作者のためのCMS