UTSUWAテーマVer.2.0の紹介

a-blog cms LIVE Vol.7でお話ししたセッションのスライド資料です。

2022年9月にリリースしたUTSUWAテーマVer.2.0についてご紹介しています。
Ver.2.0では、デフォルトで使用できるモジュールやテンプレートの種類の追加を予定しております。

▼ 主な変更点

・ソースコードとデザインファイルをパブリックに
・カテゴリーリスト、タグ一覧、カレンダー、年間カレンダーの新規追加
・動的フォームのスタイリング
・ドロップダウン（グローバルナビゲーションの階層化へ対応）
・rem対応
・Type Scaleの導入
・日本語書体はヒラギノとメイリオ、英数字書体はHelveticaとArialへ

実際のセッションはYouTubeにアーカイブが残されておりますので、よければ合わせてご覧ください。

a-blog cms LIVE Vol.7をYouTubeで観る

Transcript

1. 例）山田太郎 例）山田太郎 例）山田太郎 例）山田太郎 山田太郎 例）山田太郎 例）キーワード 例）キーワード 検索 検索 ボタンをクリック ボタンをクリック ボタンをクリック ボタンをクリック ボタンをクリック ボタンをクリック ラベルを入れてください ラベルを入れてください ラベルを入れてください ラベルを入れてください 5月 月 火 水 木 金 土 日 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 2 3 4 ... 12 1 ... 9 10 11 12 アイテム01 アイテム02 アイテム03 アイテム01 アイテム02 アイテム03 アイテム01 アイテム02 アイテム03 アイテム01 アイテム02 アイテム03 Ver.2.0の紹介 UTSUWAテーマ 有限会社アップルップル 森田かすみ a-blog cms LIVE Vol.7
2. 有限会社アップルップル デザイナー 森田かすみ 新卒でアップルップルに入社。5年ほどHTML/CSS/CMS実装を中 心にフロントエンドエンジニアとして受託業務を経験し、現在はプ ロダクトのインハウスデザイナーとして勤務している。プロダクト のUI改善/サイト改善/イベントの企画/ノベルティ作成などを担当。 @KasumiMorita
3. 先日、UTSUWA Ver.2.0をリリースしました https://developer.a-blogcms.jp/blog/changelog/release-utsuwa200.html
4. 目次 ( アップデート内" ( 今後のリリース予 ( アップデート方È ( ソースコードの活É ( デザインファイルの活É ( 今後の予定
5. 01 アップデート内容
6. アップデート内容 I モジュールの新規追B I ドロップダウンメニューの実" I 動的フォームのスタイリン I TypeScaleの導& I rem対X I 採用フォントの見直し
7. モジュールの新規追加
8. ドロップダウンメニューの実装 実装時の注意点 ナビゲーションモジュールの表示設定
9. 動的フォームのスタイリング allow_tpl_path: [recruit/thanks.html] config.system.yamlの書き方 動的フォーム利用時には以下の記述を 行ってください
10. TypeScaleの導入 16px - 1.25倍（Major Third） Type Scale - A Visual Calculator .sample-heading { font-size: map.get(global.$font-scales, heading-ss); } 画面右側の[デザイン]パネル内の[テキスト] から利用可能です SCSSファイルの使用方法 Figmaファイルの使用方法 デフォルトの設定
11. t ユーザー側のブラウザのフォントサイズを優先していたときのための対A t rem対応に伴い8ptグリッドシステムを採% t 最小は4px、基本8px単位で余白を確保していますU t 関連してくる項目：フォントサイズ、padding、marginなどの余白、
 メディアクエリーなど 1rem=16px、.5rem = 8px、.25rem=4px rem対応 ルートのフォントサイズが16pxだったときのremとpxの考え方
12. 採用フォントの見直し Ver.2.0 のCSSのfont-familyの書き方 font-family: "Helvetica Neue", arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", meiryo, sans-serif; 以前のバージョン Ver. 2.0 英数字 Google Fonts Helvetica Neue、Arial 日本語 游ゴシック ヒラギノ角ゴシック、メイリオ
13. 02 今後のリリース予定
14. 今後のリリース予定 0 メインビジュアルの追% 0 メガナビゲーションメニューの新規追% 0 資料ダウンロードページの新規追% 0 イベント情報ページの新規追加
15. 03 アップデート方針
16. 従来よりもより速く最新のUTSUWAを利用可能になります 今後のアップデート方針 GitHub Figma
17. これからはマイナーバージョン公開のタイミングで そのとき最新版のUTSUWAが同梱されます CMS本体への反映 Ver. 3.0 Ver. 3.1
18. 04 ソースコードの活用
19. GitHub ソースコードの活用
20. GitHubから使う方法 https://github.com/appleple/acms-utsuwa themes/utsuwaフォルダをクローンまたはダウンロード
21. themesディレクトリの直下に「utsuwa」を新規作成して ダウンロードしたファイルを設置します ※すでにutsuwaテーマがある場合は、古い方のフォルダの名前をリネームまたは削除してください インストール方法
22. /_bin/utsuwa/を/bin/utsuwa/に設置する ※すでにutsuwaテーマがある場合は、古い方のフォルダの名前をリネームまたは削除してください インストール方法 /_bin/utsuwa/
 （GitHubからダウンロードしたファイル） /setupをリネームしたフォルダ/bin/
23. メンテナンスメニューにアクセスする
 （https://ドメイン/setupをリネームしたフォルダ/index.php） インストール方法
24. 「インポート実行画面へ」を押下する インストール方法
25. 1. インポート先またはその親になるブログを選択してください。
 →任意のものを選択
 2. インポートするブログデータ名を選択してください。
 →「utsuwa」を選択
 3. コンフィグ関連のインポート設定
 →新規インストールの場合は全てチェック インストール方法 「インポートを実行する」を押下する
26. インストール方法 UTSUWAを設置したURLへアクセス
27. インストール方法のドキュメント https://github.com/appleple/acms-utsuwa GitHub READMEで改めてご確認ください
28. 05 デザインファイルの活用
29. Figma デザインファイルの活用
30. Figmaの料金体系について チーム内に3ファイル、3ページまで 下書き（個人用ファイル）数無制限 以下の範囲なら無料で使用できます それ以上使う場合なら有料プランへ https://www.figma.com/ja/pricing/
31. ファイルをコピーする https://www.figma.com/community/file/1154719653085540673 要ログイン 　Figmaファイルを使う
32. その場でページを切り替える https://www.figma.com/community/file/1154719653085540673 Figmaファイルを閲覧する ログイン不要
33. 　Figmaファイルでできること  サイトの全体像を把握でき(  ロードマップが確認でき(  スタイルガイドが確認でき(  システムで使用しているユニットや組み込みJSの
 画像データを取得できる
34. 06 今後の予定
35. 今後もどんどんアップデートしていく予定です アップデート情報は開発ブログやSNS、Slackコミュニ ティで告知します 今後の予定
36. ご清聴ありがとうございました！ ご質問 ご意見 コメント欄にてお待ちしております