実践！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活⽤法
   実践！
   

   View Slide

2. site2019.xdとは？
   

   View Slide

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

   View Slide

4. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. layout.html
    _top.html /company/
    /products/ /realestate/
    /news/ /news/entry-4.html
    /tag/ /recruit/
    /contact/ confirm.html
    thanks.html 404.html
    その他site2019の各種ページ
    

    View Slide

14. 編集時のお作法的な部分について
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. ②
    ステート
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. 変更が及ぶ範囲
    マスター：ステート初
    マスター：ステートB
    マスター：ステートA
     インスタンス：ステート初  インスタンス：ステート初
     インスタンス：ステートA  インスタンス：ステートA
     インスタンス：ステートB
     インスタンス：ステートB
    変更
    

    View Slide

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

    View Slide

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

    View Slide

33. 変更が及ぶ範囲
    マスター：ステート初
    マスター：ステートB
    マスター：ステートA
     インスタンス：ステート初  インスタンス：ステート初
     インスタンス：ステートA  インスタンス：ステートA
     インスタンス：ステートB
     インスタンス：ステートB
    変更
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. 変更が及ぶ範囲
    マスター：ステート初
    マスター：ステートB
    マスター：ステートA
     インスタンス：ステート初  インスタンス：ステート初
     インスタンス：ステートA  インスタンス：ステートA
     インスタンス：ステートB
     インスタンス：ステートB
    インスタンス同⼠は作⽤しない
    

    View Slide

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

    View Slide

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

    View Slide

40. 必ずマスターコンポーネントの
    ステートから作業する
    編集時の注意点
    

    View Slide

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

    View Slide

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

    View Slide

43. _top.html
    index.html
    _entry.html
    a-blog cms 基本のテンプレート
    

    View Slide

44. 実践！
    

    View Slide

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

    View Slide