Tweet
Tweet

Slide 1

Slide 1 text

a-blog cms での実装フローを紹介 a-blog cms Training Camp 2023 有限会社アップルップル　 すがわら＠しゅがー

Slide 2

Slide 2 text

自己紹介 ' 職種：フロントエンドエンジニA ' 所属：アップルップル所2 ' お仕事：受託案件のサイト制作多 ' a-blog cms 歴 5年 すがわら＠しゅがー

Slide 3

Slide 3 text

話すこと マークアップエンジニア 実装フローの紹介 With

Slide 4

Slide 4 text

話すこと 依頼 見積もり ヒアリング デザイン 実装 データ入力 テスト 公開 エンジニア ディレクター デザイナー

Slide 5

Slide 5 text

話すこと デザインが降りてくるままに実装すると... 7 モジュールの再実R 7 データ入れるとスタイルが崩れP 7 入力作業工程へ渡せな0 7 プロジェクトメンバーからの質問が絶えない

Slide 6

Slide 6 text

話すこと 案件している時は大変なこともあるけど、 から 自然と問題回避している気がする...。 なんとなく自分の中で手順ができあがっている

Slide 7

Slide 7 text

話すこと このセッションの目的 a-blog cms 導入し始めやマークアップエンジニア1年目の方へ、
 CMSを使った実装が少しスムーズになる手順や考え方などをお届け。 実装

Slide 8

Slide 8 text

ひとつの例として... 依頼 見積もり ヒアリング デザイン 実装 データ入力 テスト 公開 違いや共通点 アンケートや懇親会などで共有 について気づいたことを いただけると 嬉しいです

Slide 9

Slide 9 text

話さないこと 依頼 見積もり ヒアリング デザイン 実装 データ入力 テスト 公開 C 実装 フロ8 C や の書き方 前後の 開発環境 コード

Slide 10

Slide 10 text

実装フロー項目 XY プロジェクト情報の取E @Y クライアントの特徴を確4 PY サイト構造 / 機能 / 情報 を確4 'Y ブログ / カテゴリー / エントリー を用 Y モジュール / カスタムフィールド設 Y HTML / CSS / JS

Slide 11

Slide 11 text

1. プロジェクト概要の把握 W 全体スケジュー@ W W 運用方法（状況5 W W 見積もりまたはかけていい W チームメンバQ W デザインの進行状況 ...など 依頼背a 納Y 工b

Slide 12

Slide 12 text

2. クライアントの特徴を確認 a こだわりポイント（デザイン、運用のしやすさ ...など1 a リテラシー（PC操作の慣れ具合1 a Webサイトの更新作業頻度/時間 Text Area Lite Editor OR

Slide 13

Slide 13 text

3. サイト構造 / 機能 / 情報 を確認 V ワイヤー / デザイン / V （ブログ、カテゴリー、エントリーE V V （カスタムフィールドE V （拡張アプリ、外部連携E V V サーバー情報 サイトマッ€ サイト構造 モジュール選v 更新範囲 機能性 入力作業の有W

Slide 14

Slide 14 text

3. サイト 情報 / 構造 / 機能 を確認 サイト構造 トップページ サービス サービス詳細 会社概要 お知らせ詳細 お知らせ リリース情報 メディア掲載 プライバシーポリシー エントリー エントリー エントリー エントリー カテゴリー カテゴリー カテゴリー？ブログ？ ブログ

Slide 15

Slide 15 text

3. サイト 情報 / 構造 / 機能 を確認 モジュール選定 Entry_Summary 一覧 Entry_Body 詳細 Entry_Summary Category_List Blog_Field Media_Banner トップ

Slide 16

Slide 16 text

& デザイン性が必要な箇所も変更可能にするのか" & テキストは1行か" & テキストの装飾は必要か" & 画像かPDFか両方か？ など... 3. サイト 情報 / 構造 / 機能 を確認 更新範囲（カスタムフィールド）

Slide 17

Slide 17 text

3. サイト 情報 / 構造 / 機能 を確認 機能性 入力作業の有無 0 作業4 0 期3 0 人1 0 手動か一括入力か

Slide 18

Slide 18 text

3. サイト 情報 / 構造 / 機能 を確認 V ワイヤー / デザイン / V （ブログ、カテゴリー、エントリーE V V （カスタムフィールドE V （拡張アプリ、外部連携E V V サーバー情報 サイトマッ€ サイト構造 モジュール選v 更新範囲 機能性 入力作業の有W

Slide 19

Slide 19 text

4. ブログ / カテゴリー / エントリー を用意 2 開発環境の用) 2 CMSインストーA 2 2 2 類をざっくりと用意 管理画面で ブログ / カテゴリー / エントリー を用) top, index, entry テンプレートを設h コンフィグセット @extend(“/path/to/file”) @extend(“/path/to/file”)

Slide 20

Slide 20 text

5. モジュール / カスタムフィールド設置 動的にコンテンツを出し分けるための実装

Slide 21

Slide 21 text

@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. モジュール / カスタムフィールド設置

Slide 22

Slide 22 text

0 表側はまずは変数の出力ができるよう 0 0 校正オプションを後回しにしない 管理画面側はある程度整え6 カスタムフィールドを生成 5. モジュール / カスタムフィールド設置

Slide 23

Slide 23 text

 拡張アプÇ  外部サービス連携 →予想外の事態に備えて早めに実装 機能的な箇所の実装 5. モジュール / カスタムフィールド設置

Slide 24

Slide 24 text

ÇÈ HTML / CSS / JS  ヘッダー / フッタ%   エントリーサマリ%  バナーモジュー"  フォーム  ブログフィールI  ナビゲーションモジュー"  リンクX エントリーボデV おすすめのモジュール調整順

Slide 25

Slide 25 text

ÇÈ HTML / CSS / JS ヘッダー / フッター 6 そのサイトらしさを確1 6 バランス確認に エントリーボディ 6 運用者が一番使e 6 データ入力工程を見据えて

Slide 26

Slide 26 text

ÇÈ HTML / CSS / JS マークアップのコツ P その要素が消えた場合はI P テキストが短くまたは長くなったときはI P アップロード画像サイズや比率が変わったときは？ 動的なサイトであることを意識

Slide 27

Slide 27 text

まとめ 4 プロジェクト全体をみながらの実 4 運用者のことを考えÇ 4 コンテンツファーストに

Slide 28

Slide 28 text

ご清聴ありがとうございました @rachicom_sugar イラスト：Loose Drawing a-blog cms での実装フローを紹介