Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

site2019.xdとは？

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

ファイル構成について

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

② ステート

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

プロトタイプ作成 実践！

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

実践！

Slide 45

Slide 45 text

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