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

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

Transcript

1. Training Camp 2019 Autumn a-blog cmsユーザーのための site2019.xd活⽤法 実践！
2. site2019.xdとは？
3. a-blog cms 公式テーマ site2019 の テンプレートが揃った プロトタイプ⽤配布ファイル
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. ご不明な点があれば お気軽にお問い合わせください 次回バージョンへのフィードバックもお待ちしています！