実践!a-blog cmsユーザーのためのsite2019.xd活用法

Fb3f3c151603102a5e60b197a7dfbeb7?s=47 isaikaori
November 23, 2019

実践!a-blog cmsユーザーのためのsite2019.xd活用法

a-blog cms Training Camp 2019 Autumn
https://ablogcms.doorkeeper.jp/events/92238

Fb3f3c151603102a5e60b197a7dfbeb7?s=128

isaikaori

November 23, 2019
Tweet

Transcript

  1. Training Camp 2019 Autumn a-blog cmsユーザーのための site2019.xd活⽤法 実践!

  2. site2019.xdとは?

  3. a-blog cms 公式テーマ site2019 の テンプレートが揃った プロトタイプ⽤配布ファイル

  4. None
  5. https://www.a-blogcms.jp/download/ まずは早速ダウンロード!

  6. site2019.xdの使い⽅を知る ワークショップのゴール

  7. ファイル構成について

  8. site2019.xd について site2019.xdの 設計についての概要。

  9. acms-fonts acms-fonts⼀覧。 ⼀つずつクラス名が ふってあるので、 そのままSVGで 書き出しができる。

  10. マスター コンポーネント ⼀覧 マスターコンポーネント として登録している モジュールやパーツの ⼀覧。

  11. マスター コンポーネント ⼀覧 マスターコンポーネント として登録している モジュールやパーツの ⼀覧。

  12. 使⽤モジュール ナビゲーション Navigation モジュールID global_navi テンプレート記述 /include/header/globalNavi.html 使⽤しているモジュールの モジュール名/モジュールID/テンプレート記述の解説。 モジュール解説

  13. layout.html _top.html /company/ /products/ /realestate/ /news/ /news/entry-4.html /tag/ /recruit/ /contact/

    confirm.html thanks.html 404.html その他site2019の各種ページ
  14. 編集時のお作法的な部分について

  15. ① マスターコンポーネントと インスタンス

  16. モジュールヘッダー ⼀覧 マスターコンポーネント インスタンス モジュールヘッダー ⼀覧 ⻭⾞アイコンの⾒出し ⼀覧 RSSアイコン&⼀覧リンクなし⾒出し

  17. モジュールヘッダー ⼀覧 マスターコンポーネント モジュールヘッダー ⼀覧 インスタンス ⻭⾞アイコンの⾒出し ⼀覧 RSSアイコン&⼀覧リンクなし⾒出し 変更

    同じように変化
  18. モジュールヘッダー ⼀覧 マスターコンポーネント モジュールヘッダー ⼀覧 インスタンス ⻭⾞アイコンの⾒出し ⼀覧 RSSアイコン&⼀覧リンクなし⾒出し 変更

    変化しない
  19. モジュールヘッダー ⼀覧 マスターコンポーネント インスタンス モジュールヘッダー ⼀覧 ⻭⾞アイコンの⾒出し ⼀覧 RSSアイコン&⼀覧リンクなし⾒出し 透明度を変化させて出し分け

  20. モジュールヘッダー ⼀覧 マスターコンポーネント= 編集⽤のパーツ モジュールヘッダー ⼀覧 インスタンス=アートボードに配置する⽤のパーツ ⻭⾞アイコンの⾒出し ⼀覧 RSSアイコン&⼀覧リンクなし⾒出し

  21. 必ずマスターコンポーネントで 作業する 編集時の注意点

  22. ② ステート

  23. インスタンス:設定初期のステート インスタンス:ステート「no-icon」 モジュールヘッダー ⼀覧 マスターコンポーネント::設定初期のステート モジュールヘッダー ⼀覧 モジュールヘッダー ⼀覧

  24. インスタンス:設定初期のステート インスタンス:ステート「no-icon」 モジュールヘッダー ⼀覧 マスターコンポーネント:ステート「no-icon」 モジュールヘッダー ⼀覧 モジュールヘッダー ⼀覧

  25. お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください インスタンス:ステート 初期設定 インスタンス:ステート

    description インスタンス:ステート inquiry インスタンス:ステート address インスタンス:ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー site2019.xdでの活⽤例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー インスタンス:ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 プレイスホルダー マスターコンポーネント マスターコンポーネント 内包
  26. お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください インスタンス:ステート 初期設定 インスタンス:ステート

    description インスタンス:ステート inquiry インスタンス:ステート address インスタンス:ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー site2019.xdでの活⽤例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー インスタンス:ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 プレイスホルダー マスターコンポーネント マスターコンポーネント 内包 * フォームのスタイルを変更
  27. お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください インスタンス:ステート 初期設定 インスタンス:ステート

    description インスタンス:ステート inquiry インスタンス:ステート address インスタンス:ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー site2019.xdでの活⽤例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー インスタンス:ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 プレイスホルダー マスターコンポーネント マスターコンポーネント 内包 * フォームのスタイルを変更 * 背景⾊を変更
  28. お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください インスタンス:ステート 初期設定 インスタンス:ステート

    description インスタンス:ステート inquiry インスタンス:ステート address インスタンス:ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー site2019.xdでの活⽤例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー インスタンス:ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 プレイスホルダー マスターコンポーネント マスターコンポーネント 内包 * フォームのスタイルを変更 * 背景⾊を変更 * タイトル/必須のテキストを変更
  29. お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください インスタンス:ステート 初期設定 インスタンス:ステート

    description インスタンス:ステート inquiry インスタンス:ステート address インスタンス:ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー site2019.xdでの活⽤例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー インスタンス:ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 プレイスホルダー マスターコンポーネント マスターコンポーネント 内包 * フォームのスタイルを変更 * 背景⾊を変更 * タイトル/必須のテキストを変更 編集完了
  30. 変更が及ぶ範囲 マスター:ステート初 マスター:ステートB マスター:ステートA  インスタンス:ステート初  インスタンス:ステート初  インスタンス:ステートA  インスタンス:ステートA  インスタンス:ステートB  インスタンス:ステートB

    変更
  31. お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください ステート 初期設定 ステート

    description ステート inquiry ステート address ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー 例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 マスターコンポーネント:初期設定
  32. お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください ステート 初期設定 ステート

    description ステート inquiry ステート address ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー 例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 マスターコンポーネント:初期設定 変更
  33. 変更が及ぶ範囲 マスター:ステート初 マスター:ステートB マスター:ステートA  インスタンス:ステート初  インスタンス:ステート初  インスタンス:ステートA  インスタンス:ステートA  インスタンス:ステートB  インスタンス:ステートB

    変更
  34. お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください ステート 初期設定 ステート

    description ステート inquiry ステート address ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー 例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 マスターコンポーネント:ステート 初期設定
  35. お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください ステート 初期設定 ステート

    description ステート inquiry ステート address ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー 例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 マスターコンポーネント:ステート inquiry
  36. お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください ステート 初期設定 ステート

    description ステート inquiry ステート address ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー 例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 マスターコンポーネント:ステート inquiry 変更
  37. 変更が及ぶ範囲 マスター:ステート初 マスター:ステートB マスター:ステートA  インスタンス:ステート初  インスタンス:ステート初  インスタンス:ステートA  インスタンス:ステートA  インスタンス:ステートB  インスタンス:ステートB

    インスタンス同⼠は作⽤しない
  38. お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください ステート 初期設定 ステート

    description ステート inquiry ステート address ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー 例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 マスターコンポーネント:ステート inquiry
  39. お名前 必須 ⼭⽥ 太郎 ご⽤件 必須 選択してください ステート 初期設定 ステート

    description ステート inquiry ステート address ステート confirm テーブルタイトル 確認⽤テキスト テーブルタイトル 必須 プレイスホルダー 例 テーブルタイトル 必須 プレイスホルダー テーブルタイトル 必須 プレイスホルダー ステート name ご住所 必須 000-0000 000-0000 都道府県 000-0000 マスターコンポーネント:ステート inquiry 変更
  40. 必ずマスターコンポーネントの ステートから作業する 編集時の注意点

  41. プロトタイプ作成 実践!

  42. 1. site2019.xdを開く site2019.xd おすすめの使い⽅ 2. 別ウィンドウで新しいドキュメントを開く 3. 使うパーツ・モジュールだけsite2019.xdから  コピ-して持ってくる 4.

    コンポーネントはローカルコンポーネントに  変更して管理する
  43. _top.html index.html _entry.html a-blog cms 基本のテンプレート

  44. 実践!

  45. ご不明な点があれば お気軽にお問い合わせください 次回バージョンへのフィードバックもお待ちしています!