WDHA#29 a-blog cms

925 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
925
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

WDHA#29 a-blog cms

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

×