Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

a-blog cms「simple2016」で学ぶ カスタマイズ初級編

847 views

Published on

オンラインで a-blog cms の勉強会を開催した際のスライドを公開します。初心者がカスタマイズを学ぶ際にインストールするテーマは simple2016 をオススメしています。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

a-blog cms「simple2016」で学ぶ カスタマイズ初級編

  1. 1. WYSIWYGを利用しないユニット テーマとテンプレートの関係 モジュールによる情報の表示と条件設定 テンプレートの基本 カスタムフィールドの入力フォームと表示 お問い合わせフォームの作成 カスタマイズ初級編
  2. 2. WYSIWYGを利用しないユニット
  3. 3. ユニット
  4. 4. WYSIWYG
  5. 5. ユニット
  6. 6. テキストユニット 画像ユニット ファイルユニット 地図ユニット ユニットの種類 ビデオユニット(YouTube) Yahoo地図 改ページユニット 引用ユニット 画像URLユニット メディアユニット モジュールユニット カスタムユニット
  7. 7. ユニットグループ ユニットを囲むDIVの Class を指定
  8. 8. マルチファイルドロップが可能
  9. 9. ブラウザ上で画像リサイズが可能 ブラウザ上で画像をリサイズして
 サーバーにアップロードが可能
  10. 10. コンフィグ
  11. 11. テーマとテンプレートの関係
  12. 12. site2016 bootstrap2016 simple2016 blog2016 標準テーマは4つ
  13. 13. site2016 bootstrap2016 simple2016 blog2016 カスタマイズ難易度 ★★★ ★★★ ★★ ★ レイアウト ○ × × × コンテンツの表示切替 ○ × × × テンプレート変数化 ○ ○ × × モジュールID利用 ○ ○ ○ × デモデータ 多数 多数 多数 1件 多くの機能を試したい方やクライアントにデモをする際にはsite2016を カスタマイズの勉強をこれから始めたい方はsimple2016をインストール。 標準テーマの特徴
  14. 14. 基本の3つのテンプレート トップ・一覧・詳細
  15. 15. トップページ 一覧ページ 詳細ページ
  16. 16. URL: テンプレート: トップ http://localhost/ /themes/simple2016/top.html
  17. 17. URL: テンプレート: 一覧 http://localhost/recruit/ /themes/simple2016/index.html
  18. 18. URL: テンプレート: 詳細 http://localhost/recruit/entry-3.html /themes/simple2016/entry.html
  19. 19. カテゴリー毎にテンプレートを変更
  20. 20. 一覧ページ 詳細ページ カテゴリーコードのフォルダを用意する
  21. 21. URL: テンプレート: 一覧 http://localhost/realestate/ /themes/simple2016/realestate/index.html
  22. 22. URL: テンプレート: 詳細 http://localhost/realestate/entry-23.html /themes/simple2016/realestate/entry.html
  23. 23. テンプレートの利用(おまけ)
  24. 24. URL: テンプレート: 詳細 http://localhost/company/ /themes/simple2016/entry.html
  25. 25. ←ファイル名を空にする 一覧URLで詳細を表示
  26. 26. ←URLを指定 一覧からのリンクが変わります
  27. 27. モジュールによる情報の表示と条件設定
  28. 28. <!-- BEGIN_MODULE Entry_List --> <ul> <!-- BEGIN entry:loop --> <li><a href="{url}">{title}</a></li> <!-- END entry:loop --> </ul> <!-- END_MODULE Entry_List --> テンプレート上には、HTMLタグをどう表示するのか指定され、表示条件や件数 については管理ページ上で設定します。 モジュールの基本
  29. 29. ←表示順を指定 「固定ページ」と「投稿」という 区別は存在しません。
  30. 30. ←表示件数を指定
  31. 31. <!-- BEGIN_MODULE Entry_List id="news-list" --> <ul> <!-- BEGIN entry:loop --> <li><a href="{url}">{title}</a></li> <!-- END entry:loop --> </ul> <!-- END_MODULE Entry_List --> モジュールにidをつけて区別する
  32. 32. ←検索条件を指定
  33. 33. ←チェックをつけるとURLの値を優先して  引数としてモジュールを実行します。
  34. 34. テンプレートの基本
  35. 35. <link href="/css/style.css" rel="stylesheet"> <img src="/images/sample.png"> パスの書き換え機能 <link href="/themes/abc/css/style.css" rel="stylesheet"> <img src="/themes/abc/images/sample.png"> テーマファイル:/themes/abc/top.html ブラウザで表示時:
  36. 36. <link href="/css/acms-admin.min.css" rel="stylesheet"> 読み込みが必須なファイル(CSS/JavaScript) <script src="%{JS_LIB_JQUERY_DIR}jquery-2.1.1min.js" charset="UTF-8"></script> <!-- BEGIN_MODULE Js --> <script src="/acms.js{arguments}" charset="UTF-8" id=“acms-js"></script> <!-- END_MODULE Js --> CSS JavaScript
  37. 37. ファイルのインクルード <!--#include file="/include/sample.html" --> <!--#include file="http://www.example.com/sample.txt" --> simple2016の場合には /themes/simple2016/include/sample.html が読み込 まれ、テーマからの絶対パスになります。 外部ファイルを読み込む場合には、<html><head><body>のようなタグのない テキストファイルを読み込むようにしてください。
  38. 38. グローバル変数 %{BLOG_NAME} ブログ名 ブログのタイトル %{CCD} カテゴリーコード news %{CID} カテゴリーID 5 %{UA_GROUP} UAグループ SmartPhone %{VIEW} ページの状態表示 entry %{BASE_URL} 基本となるURL http://localhost/
  39. 39. {text}[nl2br] 改行コードを<br />に {text}[trm(10, "...")] 文字列を指定して足切り {text}[split("_", 3)] 文字列を分割して指定文字列を表示 {path}[resizeImg(200,200)] 画像をトリミングしてファイルを生成 {price}[number_format] 数字を千単位にカンマ区切りに /php/ACMS/Corrector.php に公式のものがあり、ユーザー自身が拡張す る事も可能です。その際には /php/ACMS/User/Corrector.php に。 校正オプション
  40. 40. カスタムフィールドの入力フォームと表示
  41. 41. 管理ページのテンプレート /themes/system/admin
  42. 42. URL: テンプレート: 管理 http://localhost/bid/1/admin/top/
 /themes/system/admin/top.html
  43. 43. URL: テンプレート: 管理 http://localhost/bid/1/admin/blog_edit/
 /themes/system/admin/blog/edit.html
  44. 44. <header class="acms-admin-grid-r"> <div class="acms-admin-col-md-6"> <h1 class="acms-admin-admin-title"><i class="acms-admin-icon acms-admin- icon-blog"></i><span class="js-dialog-title"><!--T-->ブログ管理<!--/T--></ span></h1> </div> <div class="acms-admin-col-md-6"> <!--#include file="/admin/topicpath.html"--> </div> </header> <!-- BEGIN_MODULE Admin_Blog_Edit --> ここは修正しない事がオススメ 上記のファイルの中に /admin/blog/field.html をインクルードする記述が用意 されています。 /themes/system/admin/blog/edit.html
  45. 45. ブログ カテゴリー エントリー ユーザー モジュール /admin/blog/field.html /admin/category/field.html /admin/entry/field.html /admin/user/field.html /admin/module/field.html カスタムフィールドの種類と設定ファイル
  46. 46. カスタムフィールドの基本 <input type="text" name="sample" value="{sample}"> <input type="hidden" name="field[]" value="sample"> 入力:/admin/blog/field.html <!-- BEGIN_MODULE Blog_Field --> <p>{sample}</p> <!-- END_MODULE Blog_Field --> 表示:
  47. 47. カスタムフィールドの画像(例) <!-- BEGIN sample@path:veil --> <img src="%{ARCHIVES_DIR}{sample@path}"> <input type="hidden" name="sample@old" value="{sample@path}"><br> <label class="acms-admin-form-checkbox"> <input type="checkbox" name="sample@edit" value="delete"> <i class="acms-admin-ico-checkbox"></i> 削除 </label> <!-- END sample@path:veil --> <input type="file" name="sample" size="20"><br> <input type="hidden" name="field[]" value="sample"> <input type="hidden" name="sample:extension" value="image"> <input type="hidden" name="sample@size" value="300"> <input type="hidden" name="sample@filename" value=""> 書き方を覚える必要はありません
  48. 48. カスタムフィールドの出し分け <!-- コード別フィールドの表示 --> <!--#include file="/admin/entry/%{CCD}.html" --> <!--#include file="/admin/entry/%{ECD}" --> /themes/simple2016/admin/entry/field.html を確認してみてください。 インクルード グローバル変数+
  49. 49. フォームのカスタマイズ
  50. 50. データを蓄積しダウンロードも可能
  51. 51. ←テンプレートとの関連づけ
  52. 52. フォームモジュール <!-- BEGIN_MODULE Form --> <!-- BEGIN step --> <!-- フォームの初期画面 --> <!--#include file='/include/input.html'--> <!-- END step --> <!-- BEGIN step#reapply -->
 <!-- フォームのエラー&修正画面 --> <!--#include file='/include/reapply.html'--> <!-- END step#reapply --> <!-- BEGIN step#confirm --> <!-- 確認画面 --> <!--#include file='/include/confirm.html'--> <!-- END step#confirm --> <!-- BEGIN step#result ̶> <!-- 送信完了画面 --> <!--#include file='/include/result.html'--> <!-- END step#result --> <!-- END_MODULE Form --> ・・・ ・・・
  53. 53. contact/form/main.html step input.html step#reapply input.html step#confirm confirm.html step#result confirm.html
  54. 54. フォームのステップ処理 <input type="hidden" name="step" value="confirm"> <input type="hidden" name="error" value="reapply"> <input type="hidden" name="id" value="contactForm"> <input type="submit" name="ACMS_POST_Form_Confirm" value="送信内容の確認へ"> step 次のステップ error エラー時のステップ id フォームID
  55. 55. 管理ページのカスタムフィールド 通常ページのお問い合わせ = フォームのHTML記述
  56. 56. バリデーター&コンバーター <input type="hidden" name="sample:validator#required"> 必須(required) 最小文字数(minLength) 最大文字数(maxLength) 下限値(min) 上限値(max) ファイルサイズ上限値(filesize) 数字チェック(digits)
 メールアドレスチェック(email) URLチェック(url) 等価チェック(equalTo) 日付チェック(dates) 時間チェック(times) 正規表現マッチ(regex) メールアドレスの重複禁止(duplication) 変換オプション(上記の例では a)は、PHPのmb_convert_kana関数に準拠します。 <input type="hidden" name="sample:converter#a">
  57. 57. バリデーター&コンバーター <input type="hidden" name="sample:validator#required"> テンプレートにも書けますが、厳密なチェックが必要な場合には、管理ページ上 のフォーム管理のところで指定してください。
  58. 58. まとめ
  59. 59. テーマ テンプレート コンフィグ モジュール カスタム フィールド フォーム ユニット 今日の紹介した7つのキーワード
  60. 60. PHPについては出てきませんでした。 HTML・CSS・JavaScript のフロント側の 技術だけでカスタマイズが可能です。 まとめ これなら出来そうな気がしませんか?
  61. 61. マルチブログ・テーマの継承 ルールによる表示制御(マルチデバイス対応) テンプレートの応用 Ajaxを利用したコンテンツの読み込み Webサイトの運用に関する機能の紹介 カスタマイズ中級編(予定)
  62. 62. ありがとうございました

×