wdha#29 a-blog cms
TRANSCRIPT
有限会社アップルップル ⼭山本⼀一道
実践編
#ablogcms
3
#ablogcms
最近の勉強会やセミナー
セミナー&勉強会
セミナー&勉強会
7/16
7/17 7/228/21
11/98/26
10/210/1 10/19
11/10
セミナー&勉強会
11/1911/20
Training Camp 2010 Autumn 2010年11⽉月19⽇日-20⽇日
合宿の参加者7⼈人
26⼈人13エリア
12/06 初級編12/21 中級編
コンフィグ
テーマ
テンプレートモジュール
ルール
URLコンテキスト
モジュールID フォーム カスタム
フィールド
デモ
動的コンテンツに
画像キャプション
モジュール
コンテンツ(パーツ)
ナビゲーションモジュール
エントリーヘッドラインモジュール
タグクラウドモジュール
ブログフィールドモジュール
エントリーサマリーモジュール
バナーモジュール
エントリーボディモジュール
トピックパスモジュール
URLコンテキスト
URLによって表現されるページの文脈情報
URLコンテキストhttp://example.com/トップページ
http://example.com/news/ニュースカテゴリーの一覧
http://example.com/news/entry-1.htmlニュースカテゴリーの詳細ページ
URLコンテキストhttp://example.com/news/ニュースカテゴリーの一覧
http://example.com/products/製品紹介カテゴリーの一覧
http://example.com/recruit/求人カテゴリーの一覧
モジュールURLコンテキスト
データ
条件 表示
Powered by
DB
コンフィグ
システムの設定
テンプレート
HTML や XML ファイル
モジュール
モジュール
モジュール
テンプレートの記述1
<ul><mt:Entries lastn="5"> <li> <a href="<mt:EntryLink />"><mt:EntryTitle /></a> </li></mt:Entries></ul>
movable type
テンプレートの記述2
<ul><?php wp_get_archives('type=postbypost&limit=5'); ?></ul>
wordpress
テンプレートの記述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
モジュールとプログラム
<!-- BEGIN_MODULE Aaa_Bbb -->
この部分に各種HTMLを記述する
<!-- END_MODULE Aaa_Bbb -->
php/ACMS/GET/Aaa/Bbb.php
インクルード機能
<!--#include file='include/sample.html'-->
<!--#include file='http://domain.com/parts.html' -->
SSIの記述方法で書く事により Adobe Dreamweaver のデザインビューでインクルード先の表示も可能になっています。
グローバル変数
%{BLOG_NAME} ブログ名
%{ARCHIVES_DIR} アーカイブディレクトリ
%{BASE_URL} ブログのトップページのURL
サイトをチェック
インクルード機能+
グローバル変数
<!--#include file='include/cid%{CID}.html'-->
校正オプション{text}[trim(13, '...')]
{text}[nl2br]
{date}[wareki]
{date}[age]
{data}[nubmer_format]
文字列を足切り
改行をbrに置き換える
和暦
年齢
3桁毎のカンマ区切り
サイトをチェック
HTMLだけでなくXMLもOK
テーマ
HTML + IMG + CSS 等
IMG
テンプレート
CSS
テンプレート
テンプレート
テーマの構成についてthemes system admin
plain
blog
category
entry
index.htmlhtml
images
css
admin.htmlhtml
404.html
imagesinclude
html
login.htmlhtml
css
テーマの構成についてthemes system admin
plain
blog
category
entry
index.htmlhtml
images
css
admin.htmlhtml
404.html
imagesinclude
html
共有テンプレート
カスタマイズテンプレート
login.htmlhtml
css管理ページのテンプレート
テーマの継承
system
plain
news@plain
トップページ:top.html
一覧ページ:index.html
詳細ページ:entry.html
/themes/company3/top.html
/themes/company3/top.html
/themes/company3/news/index.html
/themes/company3/news/index.html
/themes/company3/news/entry.html
/themes/company3/news/entry.html
/themes/company3/index.html
/themes/company3/index.html
/themes/company3/products/index.html
/themes/company3/products/index.html
/themes/company3/entry.html
/themes/company3/entry.html
ルール
条件によりコンフィグの設定を変更する
ルール
ワンソース マルチユース
モジュールID
モジュールに条件を設定
モジュールID
モジュールURLコンテキスト
データ
表示
Powered by
DB
モジュールURLコンテキスト
モジュールID
×データ
条件
表示
Powered by
DB
フォーム
とっても高機能でオススメ!
フォーム• ページのどこにあっても大丈夫• メールの送信には2種類のメールを送れます• 入力項目のチェック機能• 入力項目のコンバート機能• 複数ステップのフォームを作る事ができる• DBに蓄積&CSVのダウンロード
フォーム
フォーム:text
<input name="mailaddress" type="text" value="" />
<input type="hidden" name="field[]" value="mailaddress" />
<input type="hidden" name="mailaddress:validator#required" />
validatorは管理ページでもテンプレートどちらでも設定可能です。
フォーム:validator
required
minLength maxLength min max
regexp digits
email url equalTo
フォーム:converter
<input type="hidden" name="mailaddress:c" value="a" />
フォーム: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="送信" />
フォーム: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 -->
初期
修正
確認
完了
フォーム: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<!-- 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を設定
フォーム: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を設定
フォーム: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を設定
フォーム:example
themes/system/sample/form.html
サイトをチェック
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" />
システムの構造index.php
archives
themes system admin
plain
blog
category
entry
php
index.htmlhtml
images
css
config.server.phpphp
admin blog
カスタムフィールドが凄い
カスタムフィールドの機能強化
91
これまでのカスタムフィールド
• 長辺指定によるリサイズ • ファイル名指定(ファイル形式変換)
• 画像のアップロードのみ対応。
• 検索はイコールのみのAND検索
• PDFやFLV等のファイルも可能に!
カスタムフィールドの機能アップ
• 縦・横・長辺指定によるリサイズ • ファイル名指定(ファイル形式変換)• 拡大画像・ケータイ画像生成
• 画像のアップロードも機能拡張!
• 画像以外のファイルについても対応!
カスタムフィールドの機能アップ
• AND , OR の検索• 範囲検索• ソート機能(検索したキーのみ対応)
• 検索も大幅拡張!
96
sample@vicuna
97
これからの
1.4
•カスタムフィールドの強化•ダイレクト編集機能•エントリー内の段組をサポート•会員管理機能の強化•BASIC認証の実装(PHPモジュール版のみ)
まとめ
が、動くサーバは必要ですが、カスタマイズにプログラムを書く必要はありません。
Powered by
と
を使って、管理ページの設定をするだけでWebサイトを作れます。
を使ってテンプレートと
CSSのようにJavaScriptが書ける
HTMLを書くだけでWebシステムが作れる
Web制作者のためのCMS