UTSUWA Ver.2.0 リリースのお知らせ
先日、UTSUWA Ver.2.0 をリリースしました！
ソースコードはGitHubにて、デザインファイルはFigma Communityにて配布しております。
最新バージョンは以下のリンク先のページよりダウンロードしてお試しください。
ぜひ、新しいバージョンをご活用いただけたら幸いです。
主な変更点は以下になります。
主な変更点
- ソースコードとデザインファイルをパブリックに
- カテゴリーリスト、タグ一覧、カレンダー、年間カレンダーの新規追加
- 動的フォームのスタイリング
- ドロップダウン（グローバルナビゲーションの階層化へ対応）
- rem対応
- Type Scaleの導入
- 日本語書体はヒラギノとメイリオ、英数字書体はHelveticaとArialへ
今後アップデート予定
まだ実装されていませんが、今後予定しているアップデート内容です。
- メインビジュアルの新規追加（予定）
- メガナビゲーションメニューの新規追加（予定）
- イベント情報の新規追加（予定）
- 資料ダウンロードの新規追加（予定）
今回のアップデートで大きなポイントは、CMSのリリースサイクルと切り離されたことで今後はUTSUWA単体でアップデートをお届けできるようになった点です。
これにより、ユーザーの皆様に従来よりもより速く最新のUTSUWAテーマをご活用いただけるようになります。
本記事では、主な変更点について詳しくご紹介します。
ソースコードとデザインファイルをパブリックに
Ver.2.0からは、ソースコードとデザインファイルをWeb上で最新の状態を随時公開していく予定です。CMSのリリースサイクルから切り離され、UTSUWA単体でリリースしていくことが可能になりました。
今後は随時GitHubおよびFigmaにて公開していき、CMS本体にはマイナーバージョンアップ時にその際に最新版のUTSUWAテーマが反映される予定です。
各ファイルの配布ページ
GitHubでできること
- 最新版のUTSUWAテーマのソースコードとインポートデータをダウンロード
- バージョンごとのパッケージのダウンロード
クローン（ダウンロード）方法
- acms-utsuwaにアクセスする
- ブランチのセレクトメニューをを「main」に設定されているのを確認する（設定されていなかったら「main」にする）（※）
- 「Code」メニューをクリックし、お好きなクローン方法を選ぶ
クローン（ダウンロード）方法
※mainブランチにて最終的にリリースしている状態を公開しております。developブランチまたはfeatureブランチは現在開発途中の環境となりますので、動作の保証をいたしかねます。基本的には、mainブランチをクローンされることをお勧めいたします。
バージョンごとのパッケージのダウンロード
過去のバージョンごとにパッケージをダウンロードしたい場合は、Releasesにまとめてありますので、こちらからご利用可能です。
GitHubレポジトリのページ
Releasesのスクショ内では「+2 reeases」となっているテキストリンクをクリックすると、過去のバージョン一覧が表示されます。それぞれパッケージが配布されているので、過去バージョンを利用したい場合はご利用ください。
Releasesでは、合わせて簡単にアップデート内容を記載しておりますので、確認したい場合もReleasesをご覧ください。
Releasesの一覧ページ
Figmaでできること
デザインカンプとしての再利用
UTSUWAテーマを開発時に使用したデザインカンプを公開しています。このデータを元に、UTSUWAテーマの再利用にご活用いただいたり、サイトの全体像を掴んでいただくことも可能です。
デザインカンプの一部
スタイルガイドの把握やロードマップの確認
Figmaのデザインファイルには、デザインカンプだけでなく、スタイルガイドや今後のロードマップを掲載しています。スタイルガイドはUTSUWAテーマを元にデザインを拡張したり把握するためにお使いいただいたり、ロードマップでは今後のアップデート予定をご確認いただけます。
ロードマップ
スタイルガイド内のカラースケールの設定
デザインファイルの利用方法
- Figmaにログインする（Figmaのアカウントがない場合は新規作成する）
- Figmaコミュニティの配布ページへ移動する
- 「Get a copy」ボタンで複製する
Figma Communityに公開されているUTSUWAのページ
カテゴリーリスト、タグ一覧、カレンダー、年間カレンダーの新規追加
カレンダー、カテゴリーリスト、タグ一覧
年間カレンダー
カテゴリーリスト、タグ一覧、カレンダー、年間カレンダーを新しく追加しました。それぞれ、お知らせまたはスタッフブログにてご利用いただけます。
動的フォームのスタイリング
採用上カテゴリーのウェブエンジニア職のエントリーで動的フォームを実装しています。旧バージョンでも問題なく動的フォームをご利用いただけますが、Ver.2.0からはUTSUWAテーマで用意しているスタイルが適用されます。
詳細ページ、確認ページ、完了ページ
希望職種のデータ引き継ぎ
フォームに入力欄を設定していませんが、エントリータイトルの情報が含まれるように、type属性のhiddenで希望職種の値をメールテンプレートまで引き継ぐカスタマイズを行っています。
フォーム前の見出しとメッセージの表示
フォーム前の見出しとメッセージの表示は、include/entry/body-recruit.htmlにて変更できるようになっています。
tplの有効化
動的フォームでは完了ページを表示するためにURLコンテキストにtplを使用しています。Ver. 2.11.25より仕様変更があり、tplはログアウト時にはデフォルトでは無効化される使用となっております（この仕様変更に関しては詳しくはVer. 2.11.25からのテンプレートの仕様変更についての記事をご覧ください）。
動的フォーム利用前には、private/config.system.yamlにあるallow_tpl_pathを有効にしてください。なお、ログインしている状態ではtplは有効化されているため問題なく完了ページまで移動することができますので、確認時はログアウトをしてからまたはシークレットウィンドウにてご確認ください。
記述例
allow_tpl_path: [recruit/thanks.html]
ドロップダウン（グローバルナビゲーションの階層化へ対応）
デスクトップのグローバルナビゲーション
以前からスマートフォンのナビゲーションは階層に対応しておりましたが、Ver.2.0からはデスクトップのナビゲーションも階層化に対応しました。これにより、スマートフォンとデスクトップのナビゲーションのモジュールIDが統一されました。
階層化する際のポイント
階層化する際は、ナビゲーションモジュールの設定にて、親要素の属性欄に.is-expandを忘れないように記述してください。このクラス属性があることによって適切なスタイルが適用されます。
ナビゲーションモジュールの設定画面
rem対応
今回のバージョンから、remに対応しています。それに伴い、以下のサイズ感を見直しています。
- 余白
- コンテナー幅
- ブレイクポイント幅
余白
余白は、基本8px基準で設計していますが、調整のため4pxを使用しているケースがあります。
コンテナー幅
- 1120px
- 928px
- 736px
| 幅 | 説明 |
|---|---|
| 1120px、928px | 基本的に一覧ページで使用することを想定しています。 |
| 736px | 詳細ページやフォームを利用するページで使用することを想定しています。文字数が多いと視線移動の距離が長くなり疲れてしまうので、文章量が多くなりそうなコンテンツで利用を推奨しています。基本の文字サイズが16pxなので、全幅で46文字入る計算です。 |
ブレイクポイント幅
- 30rem（フォントサイズ16pxの時：480px）
- 48rem（フォントサイズ16pxの時：768px）
- 64rem（フォントサイズ16pxの時：1,024px）
- 90rem（フォントサイズ16pxの時：1,440px）
基本的にはacms.cssの数値からずれないように設定していますが、rem対応を行なっています。そのためルートのフォントサイズが変わればブレイクポイントも変更されますのでその点はお気をつけください。
Type Scaleの導入
Ver.2.0からはType Scaleを導入して、見出しのサイズが一定の比率を保てるようにしています。
SCSSファイルの記述
変数には以下のように登録してあります。
_variables.scss
$font-size: 1rem; $font-scale: 1.25; $font-scales: ( display-m: $font-size * $font-scale * $font-scale * $font-scale * $font-scale * $font-scale * $font-scale, display-s: $font-size * $font-scale * $font-scale * $font-scale * $font-scale * $font-scale, heading-l: $font-size * $font-scale * $font-scale * $font-scale * $font-scale, heading-m: $font-size * $font-scale * $font-scale * $font-scale, heading-s: $font-size * $font-scale * $font-scale, heading-ss: $font-size * $font-scale, body-m: $font-size, body-s: calc($font-size / $font-scale) ) !default;
Type Scaleを使用したくない場合は、font-scalesのmapを上書きして修正してください。
使い方
使い方は、以下のようにして記述します。
.sample-heading {
font-size: map.get(global.$font-scales, heading-ss);
}日本語書体はヒラギノとメイリオ、英数字書体はHelveticaとArialへ
Ver.2.0からは游ゴシック体からヒラギノとメイリオへ、さらに英数字はGoogle Fontsを使用していましたが、HelveticaとArialへ変更しました。
游ゴシック体は書体がかすれてしまうことがあり、対処法も世の中にはありますがその対処法もブラウザのアップデートの影響で効かなくなったことから万能な対応策とはいえなかったことと、Google FontsはCDNで呼び出すとGDPRへ抵触してしまう恐れがあったためデフォルトを現在の書体へ変更いたしました。
_variables.scss
$font-hiragino: "Helvetica Neue", arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", meiryo, sans-serif; $font-yu-gothic: "Helvetica Neue", arial, yugothic,yu gothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans",meiryo, sans-serif; $font-meiryo: "Helvetica Neue", arial, meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans",sans-serif; $font-base: $font-hiragino;
従来のように游ゴシック体を使用したい場合は、_variables.scssの$font-baseを$font-yu-gothicへ変更していただければ、従来の設定を適用することが可能です。
参考記事
まとめ
今回はテーマ自体の成長としては微細ではありますが、GitHubやFigmaで随時進捗をユーザーの皆様と共有する仕組みを作ったり、テーマ自体で使用している単位の変更や、Type Scaleの導入など、設計の根本に関わってくるアップデートになりました。
今後のアップデートには、サイトの目標として設置されることも多い資料ダウンロードやイベントスケジュールのページの追加を予定していますので、アップデートを楽しみにお待ちいただけたら幸いです。
a-blog cms LIVE Vol.7
2022年10月11日（火）に開催するa-blog cms LIVE Vol.7 で本記事の内容を改めてお話しいたします。
実際に質問したい箇所などありましたらぜひリアルタイムで参加してご質問ください。
UTSUWAの最新版の配布ページ
本記事でご紹介したUTSUWAの最新版のご利用は、GitHubまたはFigmaからお願いいたします。
ご意見・ご要望は Slack コミュニティ、公式ツイッター からお気軽にご連絡ください！
引き続き a-blog cms をよろしくお願いいたします。
画像がアップロードできない
画像がアップロードできない現象が発生した場合は、以下の項目を試してみてください。
archives, archives_rev, media ディレクトリに書き込み権限を与える
archives, archives_rev, media ディレクトリ（内部ディレクトリ含め）のパーミッションをWebサーバが書き込めるようになっているかご確認ください。なっていなければ、書き込めるようにパーミッションを変更してください。
画像エンジンを切り替える
ディレクトリのパーミッションを変更しても改善しない場合は、画像エンジンを切り替えてください。画像エンジンは GD と ImageMagick があり、ImageMagick が使える場合は、デフォルトでImageMagickが適用されていますが、GDを適用できるように切り替えてみましょう。
以下のコードを private/config.system.yaml に追記することにより、GDが適用されるようになります。
image_magick : off
画像圧縮で失敗している
画像圧縮ライブラリで使用している「exec」関数が、お使いのサーバーでセキュリティ上の理由により使用できなくなっている可能性があります。 こちらが原因の場合、DEBUG_MODE有効時、以下のようなエラーが出力されます
exec" function is not available. Please check if it is not listed as "disable_functions" in your "php.ini" file.
対応方法1
php.ini で「disable_function」設定を変更し「exec」関数を使用可能にする
対応方法2
画像圧縮機能をオフにする。
private/config.system.yaml に 以下コードを追記ください。
img_optimizer: off
Ver. 3.0.16 リリースのお知らせ
この記事では、2022年10月21日にリリースした Ver. 3.0.16 の修正内容について紹介いたします。
＊ 現在は Ver. 3.0.17 がリリースされています。バージョンアップ時は、Ver. 3.0.17 へのアップデートをお願いします。
現在お困りの問題に該当する項目がありましたら、お早めにバージョンアップのご検討をお願いいたします。
Ver. 3.0.16 リリースノート
変更点
- CMS-6104 メディア（ファイル）に「ログイン限定」ステータスを追加
- CMS-5960 config.server.php内でHOOK_ENABLEが1に設定されている時のみ表示する Touchモジュール、Touch_HookEnableを追加
- CMS-5961 config.server.php内でHOOK_ENABLEが1に設定されていない時のみ表示する Touchモジュール、Touch_NotHookEnableを追加
不具合修正
- CMS-6056 siteテーマのお問合せフォームで、emailのバリデーションのエラーメッセージに required の記述がされている問題を修正
- CMS-6058 オンラインアップデートで「更新メニューを非表示」だった場合、自動的に更新があるかチェックしないように修正
- CMS-6061 ダンロードモジュールが環境によって、中身が空になってしまう問題を修正
- CMS-6063 Tag_Cloudモジュールでブログの階層のセレクトボックスにdisabledがついてしまい、ブログの階層が設定できない問題の修正
- CMS-6065 編集設定のチェックボックスのクリック範囲が広く、意図せずチェックが外れてしまう問題を修正
- CMS-6068 siteテーマとbeginnerテーマで、inputの高さが小さくなってる問題を修正
- CMS-6069 lpテーマの画像名がなくなってしまう問題を修正
- CMS-6070 UTSUWAのユーザー画像の表示を修正
- CMS-6072 コンフィグ > アクセス設定のベーシック認証でユーザー名とパスワードの入力フィールドが自動入力されてしまう問題の修正
- CMS-6075 テーマのscssファイルのコメントを修正
- CMS-6076 beginnerテーマのREADME.txtに「編集画面について」の説明を追記
- CMS-6080 UTSUWA：body要素開始直後と終了直前にscript要素を読み込めるように修正
- CMS-6080 UTSUWA：body要素開始直後と終了直前にscript要素を読み込めるように修正
- CMS-6079 UTSUWA：CTAの編集ボタンが動いていなかった問題を修正
- CMS-6086 beginnerテーマに scss ディレクトリを含めるよう変更
- CMS-6090 シークレットブログだと、プレビューの共有ができない問題を修正
- CMS-6044 メディア機能で設定したタグに「&, ', ?」が含まれていると検索できない問題の修正
- CMS-6089 linkMatchLocationClassを変更しても、linkMatchLocationEntryClass で上書きされてしまう問題を修正
- CMS-6049 acmsPath 関数のURLエンコード対応
- CMS-6096 & ” ' < > の文字列でタグを登録すると2重エスケープが起きる問題の修正
- CMS-6106 Siteテーマでメールテンプレートで名前が表示されていない問題を修正
- CMS-6107 罫線ユニットの余白を上下方向へ変更
- CMS-6091 ESLIntを導入してソースコードの品質向上
- CMS-6114 ユーザーのCSVインポートで、ファイルによってインポートできない場合がある問題を修正
- CMS-6116 PHP8.xでスケジュール登録ページでエラーが出る問題を修正
- CMS-6122 承認フローの中のグループに同じユーザーが別グループに所属している場合に承認フローがおかしくなる問題を修正
- CMS-6139 CKEditor を適用したカスタムフィールドグループ（fieldgroupSortable）で並び替えを行った場合、CKEditor で編集できなくなる問題の修正
- CMS-6101 モジュールID設定 > 条件設定のエントリーID参照でカテゴリーの検索ができない問題の修正
- CMS-6150 CKEditor とリッチエディター（SmartBlock）を同じページで使用すると、リッチエディター編集時に CKEditor の編集ツールバーが表示されてしまう問題の修正
- CMS-6133 エントリー編集ページの時刻が直接入力できない問題を修正
- CMS-6153 UTSUWA：ヘッダーのロゴ画像の推奨サイズの記載とスタイル対応
- CMS-6154 UTSUWA：.is-ctaクラス属性がな かった時のスタイル対応
- CMS-6152 WordPressのインポート（XML）で、インポートに失敗する場合がある問題を修正
- CMS-6156 承認画面で、ユーザーのカスタムフィールドを出力できるように調整
- CMS-6157 フィールドキャッシュがクリアされない場合がある問題を修正
- CMS-6159 承認機能で、サブカテゴリーの値が保存されない問題を修正
- CMS-6164 エンタープライズ版で、承認ワークフローを無効にできない問題を修正
- CMS-6168 中間承認グループの並びを調整
- CMS-6160 モジュールIDのエントリーID選択UIの絞り込みやページネーション移動が動作しない問題を修正
- CMS-6170 エントリーのCSVインポートで、ユニークキーによるアップデートでユニット情報がなくなる不具合を修正
- CMS-6108 セキュリティフィックス
主なリリースノート内容
CMS-6104 メディア（ファイル）に「ログイン限定」ステータスを追加
メディア（ファイル）のステータスに新しく「ログイン限定」ステータスを追加しました。このステータスは、CMSにログインしている場合のみ、ダウンロードできるステータスになります。
会員限定サイトや、会員限定コンテンツなどで、会員限定でダウンロードさせたいファイルがある時に設定ください。
CMS-5960 config.server.php内でHOOK_ENABLEが1に設定されている時のみ表示する Touchモジュール、Touch_HookEnableを追加
CMS-5961 config.server.php内でHOOK_ENABLEが1に設定されていない時のみ表示する Touchモジュール、Touch_NotHookEnableを追加
フック機能を有効・無効にする config.server.php の設定（HOOK_ENABLE）によるTouchモジュールを追加しました。
拡張アプリなどを作成してフック機能を利用する際に、フック機能が無効になっていた場合のアラート表示などにご利用ください。
Touchモジュール一覧：https://developer.a-blogcms.jp/document/reference/touch.html
CMS-6086 beginnerテーマに scss ディレクトリを含めるよう変更
beginnerテーマで、CSSファイルのみ梱包されていたのを、SCSSファイルも同梱するようにいたしました。
これにより、SCSSを使った開発をされる方でも「beginnerテーマ」で開発がしやすくなりました。
CMS-6072 コンフィグ > アクセス設定のベーシック認証でユーザー名とパスワードの入力フィールドが自動入力されてしまう問題の修正
ベーシック認証を設定するための管理画面で、ベーシック認証のユーザー名とパスワードが、ブラウザのオートコンプリート機能により自動入力されてしまい、入力されているのを気が付かず保存してしまうと、ベーシック認証がかかってしまう問題が報告されていました。
今回このベーシック認証設定欄のオートコンプリート入力を拒否する対策をしましたので、気が付かず設定がされることがなくなりました。
CMS-6089 linkMatchLocationClassを変更しても、linkMatchLocationEntryClass で上書きされてしまう問題を修正
ナビゲーションなどで現在いる要素にクラスをつける組み込みJS「linkMatchLocation」で、以下のようなコードでクラス名を変更するカスタマイズを行っても、設定が上書きできない問題を修正しました。
ACMS.Ready(function() {
ACMS.Config.linkMatchLocationEntryClass = 'current';
});
CMS-6122 承認フローの中のグループに同じユーザーが別グループに所属している場合に承認フローがおかしくなる問題を修正
エンタープライズ版の多段階の承認フローの不具合を修正しました。
例えば「営業一課」「営業本部」「マーケ本部」のような承認フローだった場合、「営業一課」と「営業本部」両方のユーザーグループに同じユーザーが所属している場合、該当ユーザーが承認画面を開いても、うまく次の承認フローへ流せなくなっていました。この問題を修正し、承認フローにあるユーザーグループに複数所属していても正常に承認が流れるようになりました。
CMS-6159 承認機能で、サブカテゴリーの値が保存されない問題を修正
承認機能でサブカテゴリーを設定している場合、承認フローでサブカテゴリーの設定値（保存した値）が外れてしまう問題を修正しました。
CMS-6168 中間承認グループの並びを調整
エンタープライズ版での直列承認機能で、中間承認グループの設定の順番が、下から上への順番に承認フローが流れるのを、上から下の順番に承認フローが流れるように修正しました。
CMS-6139 CKEditor を適用したカスタムフィールドグループ（fieldgroupSortable）で並び替えを行った場合、CKEditor で編集できなくなる問題の修正
カスタムフィールドグループでCKEditorを利用している場合に、フィールドの順番を入れ替えした時に、フィールドの内容が消えてしまい、編集できなくなる問題を修正しました。
CMS-6170 エントリーのCSVインポートで、ユニークキーによるアップデートでユニット情報がなくなる不具合を修正
プロフェッショナル版以上の場合、エントリーID以外のキーでエントリーをCSVで更新できるようになります。
今回ここの処理に問題がみつかり、エントリーID以外のキーで更新をした場合、CSVにユニット情報があっても、ユニット情報が消えてしまう不具合が見つかったためユニットが削除されないよう修正いたしました。
最後に
該当する問題がありましたら、お早めにバージョンアップのご検討をお願いいたします。
また、迅速にご報告いただいたユーザーの皆さま、誠にありがとうございました。
今後もご報告いただいた内容に対して真摯に受け止め修正と改善を行ってまいります。
今後ともどうぞよろしくお願いいたします。