a-blog cms Training Camp 2023 - a-blog cms での実装フローを紹介

マークアップエンジニアによる、a-blog cms を使った実装が少しでもスムーズになるような手順や考え方をお届け。

Transcript

1. a-blog cms での実装フローを紹介 a-blog cms Training Camp 2023 有限会社アップルップル　 すがわら＠しゅがー
2. 自己紹介 ' 職種：フロントエンドエンジニA ' 所属：アップルップル所2 ' お仕事：受託案件のサイト制作多 ' a-blog cms 歴 5年 すがわら＠しゅがー
3. 話すこと マークアップエンジニア 実装フローの紹介 With
4. 話すこと 依頼 見積もり ヒアリング デザイン 実装 データ入力 テスト 公開 エンジニア ディレクター デザイナー
5. 話すこと デザインが降りてくるままに実装すると... 7 モジュールの再実R 7 データ入れるとスタイルが崩れP 7 入力作業工程へ渡せな0 7 プロジェクトメンバーからの質問が絶えない
6. 話すこと 案件している時は大変なこともあるけど、 から 自然と問題回避している気がする...。 なんとなく自分の中で手順ができあがっている
7. 話すこと このセッションの目的 a-blog cms 導入し始めやマークアップエンジニア1年目の方へ、
 CMSを使った実装が少しスムーズになる手順や考え方などをお届け。 実装
8. ひとつの例として... 依頼 見積もり ヒアリング デザイン 実装 データ入力 テスト 公開 違いや共通点 アンケートや懇親会などで共有 について気づいたことを いただけると 嬉しいです
9. 話さないこと 依頼 見積もり ヒアリング デザイン 実装 データ入力 テスト 公開 C 実装 フロ8 C や の書き方 前後の 開発環境 コード
10. 実装フロー項目 XY プロジェクト情報の取E @Y クライアントの特徴を確4 PY サイト構造 / 機能 / 情報 を確4 'Y ブログ / カテゴリー / エントリー を用 Y モジュール / カスタムフィールド設 Y HTML / CSS / JS
11. 1. プロジェクト概要の把握 W 全体スケジュー@ W W 運用方法（状況5 W W 見積もりまたはかけていい W チームメンバQ W デザインの進行状況 ...など 依頼背a 納Y 工b
12. 2. クライアントの特徴を確認 a こだわりポイント（デザイン、運用のしやすさ ...など1 a リテラシー（PC操作の慣れ具合1 a Webサイトの更新作業頻度/時間 Text Area Lite Editor OR
13. 3. サイト構造 / 機能 / 情報 を確認 V ワイヤー / デザイン / V （ブログ、カテゴリー、エントリーE V V （カスタムフィールドE V （拡張アプリ、外部連携E V V サーバー情報 サイトマッ€ サイト構造 モジュール選v 更新範囲 機能性 入力作業の有W
14. 3. サイト 情報 / 構造 / 機能 を確認 サイト構造 トップページ サービス サービス詳細 会社概要 お知らせ詳細 お知らせ リリース情報 メディア掲載 プライバシーポリシー エントリー エントリー エントリー エントリー カテゴリー カテゴリー カテゴリー？ブログ？ ブログ
15. 3. サイト 情報 / 構造 / 機能 を確認 モジュール選定 Entry_Summary 一覧 Entry_Body 詳細 Entry_Summary Category_List Blog_Field Media_Banner トップ
16. & デザイン性が必要な箇所も変更可能にするのか" & テキストは1行か" & テキストの装飾は必要か" & 画像かPDFか両方か？ など... 3. サイト 情報 / 構造 / 機能 を確認 更新範囲（カスタムフィールド）
17. 3. サイト 情報 / 構造 / 機能 を確認 機能性 入力作業の有無 0 作業4 0 期3 0 人1 0 手動か一括入力か
18. 3. サイト 情報 / 構造 / 機能 を確認 V ワイヤー / デザイン / V （ブログ、カテゴリー、エントリーE V V （カスタムフィールドE V （拡張アプリ、外部連携E V V サーバー情報 サイトマッ€ サイト構造 モジュール選v 更新範囲 機能性 入力作業の有W
19. 4. ブログ / カテゴリー / エントリー を用意 2 開発環境の用) 2 CMSインストーA 2 2 2 類をざっくりと用意 管理画面で ブログ / カテゴリー / エントリー を用) top, index, entry テンプレートを設h コンフィグセット @extend(“/path/to/file”) @extend(“/path/to/file”)
20. 5. モジュール / カスタムフィールド設置 動的にコンテンツを出し分けるための実装
21. @include(“/path/to/file”) @include(“/path/to/file”) @extend(“/path/to/file”) @include(“/path/to/file”) @include(“/path/to/file”) @extend(“/path/to/file”) s ヘッダー / フッターは早めに（ E s も忘れずV s @include でのインクルードを活用 ナビゲーション、リンク集 モジュールの編集リンク モジュール設置 5. モジュール / カスタムフィールド設置
22. 0 表側はまずは変数の出力ができるよう 0 0 校正オプションを後回しにしない 管理画面側はある程度整え6 カスタムフィールドを生成 5. モジュール / カスタムフィールド設置
23.  拡張アプÇ  外部サービス連携 →予想外の事態に備えて早めに実装 機能的な箇所の実装 5. モジュール / カスタムフィールド設置
24. ÇÈ HTML / CSS / JS  ヘッダー / フッタ%   エントリーサマリ%  バナーモジュー"  フォーム  ブログフィールI  ナビゲーションモジュー"  リンクX エントリーボデV おすすめのモジュール調整順
25. ÇÈ HTML / CSS / JS ヘッダー / フッター 6 そのサイトらしさを確1 6 バランス確認に エントリーボディ 6 運用者が一番使e 6 データ入力工程を見据えて
26. ÇÈ HTML / CSS / JS マークアップのコツ P その要素が消えた場合はI P テキストが短くまたは長くなったときはI P アップロード画像サイズや比率が変わったときは？ 動的なサイトであることを意識
27. まとめ 4 プロジェクト全体をみながらの実 4 運用者のことを考えÇ 4 コンテンツファーストに
28. ご清聴ありがとうございました @rachicom_sugar イラスト：Loose Drawing a-blog cms での実装フローを紹介