リリースされました!コンテンツを管理しやすく、扱いやすいUIを提供することを目的として開発が進められ、ようやくリリースとなりました。新しく追加された機能や変更点などを紹介していきたいと思います。*最後に変更点一覧を載せてあります。目次アップデート機能紹介の前にアップデート方法を紹介しておきます。管理画面からのアップデート機能が追加されました。アップデートするためには設定を変更する必要があります。移動し、「オンラインアップデート」を「マイナーバージョンも含める」に変更してください。更新できるようになります。メディア機能の大幅なアップデートメディアの検索性の向上メディアをタグやファイル名、拡張子、タグなどから登録日時、ファイルサイズなどの「降順」「昇順」で検索できます。ページ遷移せずにシームレスに探したいメディアにアクセスできます。今までCMSの中で直接画像をトリミングすることができなかったので画像編集ソフトなどで一回画像を加工してからCMSに登録するケースが多々ありました。そこで今回は以下の画像のように画像をアップロードしてその場でトリミングできるような機能を追加しました。画像は、「カスタム、1:1、4:3、16:9」の中から選択してトリミングできます。焦点座標の指定機能メディアに登録した画像に対して「トリミング」や焦点を決められる機能が追加されました。画像の焦点を決めることによって例えば以下の画像のように縦長の画像の特定の部分に焦点を合わせて画像を表示するカスタマイズも可能になります。js-focused-image先ほど画像に対して設定した焦点座標は新しく追加された組み込みJS「js-focused-image」を利用することによって効力を発揮します。以下はエントリーサマリーを表示しているのですが、全く同じ二つの画像をテスト的に用意しました。一つは焦点座標が設定されていない画像、もう一つは焦点座標が設定された画像です。焦点座標が設定された画像は綺麗に人物が中央に表示されているのがわかります。Entry_Summaryモジュールでの表示場合、以下のようなHTMLをかくことで簡単に実装することができます。同梱のsite2018テーマではすでに実装されているのでぜひ参考にしてみてください。メディアユニットの機能追加アップロードボタンを用意メディアユニットにある以下の「アップロード」ボタンをクリックすると画像やファイルをアップロードできるモーダルウィンドウが表示されます。画像やファイルのドラッグ&ドロップまた画像ユニットと同じようにファイルをユニットにドラッグできます。すると以下のようなモーダル画面が表示されるので「アップロードして挿入」というボタンをクリックしましょう。すると以下のようにユニットに先ほどアップロードした画像が登録されました。メディアユニットの画像をメイン画像として利用いままでエントリーのメイン画像として利用できる画像は画像ユニットに登録してある画像に限られていました。今回の改良でメディアユニットに登録した画像もメイン画像として利用できます。メディアのカスタムフィールドを用意js-media-fieldというクラスを振ると、そのクラスが振られた要素内で画像ユニットと同じように選択した画像のプレビューや削除、画像の編集ができるようになります。カスタムフィールドメーカーで簡単にそのためのソースコードを生成できるのでぜひ試してみましょう。カスタムフィールドメーカーから生成されたソースコードを利用することでメディアユニットとほぼ同じ機能がカスタムフィールドでも利用できます。カスタムフィールドの場合、アップロードできるメディアのタイプを「全て、画像、ファイル」の中から指定してメディアの選択モーダルを表示することも可能です。メディアバナーモジュールをあらたに追加しました。このモジュールを使うとメディアに登録した画像の中から画像を選択して、バナーモジュールのように利用することができます。バナーモジュールよりも画像を登録する際の使い勝手が大きく向上しており、エントリー編集ページのようなユニット形式で画像を登録することができます。モジュール側で利用できる変数はバナーモジュールと同じです。バナーモジュールよりも優れている点バナーモジュールでは同じ画像を別のバナーモジュールでも利用したい場合、そのモジュールのためにわざわざ画像をアップロードする必要がありました。メディアバナーモジュールではすでにアップロードされた画像をメディアから選択できるので、同じ画像をわざわざモジュールごとにアップロードする手間が省けます。複数の画像をドラッグ&ドロップで一度に登録することができます。1エントリーにつき1カテゴリーというシングルカテゴリー方式でした。この仕様を拡張し、メインカテゴリーの他に、複数のサブカテゴリーをエントリーに設定できるようになりました。カテゴリーはよく使う機能であり、設計にも大きく関わってくるところになりますので、インパクトのある変更だと思います。互換性はありますので、いままで通りの設計・運用もできますのでご安心ください。移動し、「エントリー項目設定」の「サブカテゴリー」にチェックをつけます。サブカテゴリーの有効化エントリー編集画面さっそく、エントリーの編集画面をみてみましょう。カテゴリーの下に「サブカテゴリー」入力欄が増えていると思います。同じように、入力していくことで候補が絞られていく方式になります。仕様サブカテゴリーは一覧での絞り込み時に利用されるフィールドとなります。メインに設定したカテゴリーがURLに反映されます。以下のようなエントリーがあったとします。新製品(new)この場合、一覧ページでは以下のURLで、このエントリーを表示させることができるようになります。https://example.com/article/https://example.com/news/https://example.com/new/詳細ページでは、メインカテゴリーのみを使ったURLで表示されます。https://example.com/article/enrty-123.htmlコンフィグセット機能の追加こちらも大きな変更の1つです。いう考えでカスタマイズされてきた方も多いと思います。その設定を指定できるようになりました。コンフィグを一元管理コンフィグのセットを一元管理するので、同じような設定をブログやカテゴリーにそれぞれ設定する手間も省けメンテナンス負荷も下がります。カテゴリー毎にもコンフィグが設定できるようになりました。設計の幅が大きく広がる機能ですのでぜひ利用してみてください。OFFできる機能を追加コンフィグセットができたことにより、コンテンツの編集設定を一元管理できるようになりました。編集画面もコンテンツ毎に簡単に変更できる機能を追加しました。設定をおこなうことができます。設定できる項目は表示・非表示ラベルの変更デフォルトの設定などを変更できるようになっています。エントリー編集画面は、運用時によく使う画面です。コンテンツ毎にわかりやすい編集画面を簡単に用意することができるようになると思います。便利な見出し一覧を出力するための組み込みJSが追加されました。cms以外でも利用可能です。新しいルールが追加になりました。ログインユーザーのUID指定ログインしているユーザーの権限指定これにより、権限・ユーザー個人により表示させるメニューを変更したり、より細かな制御が可能になると思います。キャッシュルールを追加できるHookを追加(addCacheRule)フックに機能が1つ追加されました。キャッシュの振り分けルールをカスタマイズできるもので、ルール毎に違うものを設定することにより、キャッシュを振り分けることができるようになります。cmsのルール機能でルールを作ることで、キャッシュを振り分けていましたが、ルール機能にない要素でもキャッシュ振り分けができるようになりました。}管理メニューのカスタマイズ機能を追加(メニュー管理)いままでのカスタマイズいままで管理画面のサイドバーのメニューをカスタマイズするには直接テンプレートを編集する必要がありました。項目数が多いので権限ごとに表示するメニューを分けたい場合は記述量がとても多くなってしまい大変でした。Dropでメニューを管理できるようになりました。カードを直接編集すれば、メニューのアイコンやURL、表示内容などを簡単に書き換えられます。コンフィグに設定されているないようなので、コンフィグセットやルールを利用することによって権限やブログごとに表示するメニューの内容を変更することが可能です。管理メニューのバーティカルバーに表示されているクエスチョンマークをおすと下のようにメニューが表示されますので、そのメニューから「メニュー管理」に移動します。UIが多々使われていますが、管理画面のフラットなデザインと整合性があわなくなってきました。日付選択のUIはjs-datepicker2というクラスをinput要素にあてると適応されます。時間選択のUIにはjs-timepickerというクラスをinput要素にあてます。今回、Ver2.10にて管理画面のデザイン変更を行いました。developerにてご紹介いたしましたが、今回は決定した変更をお伝えいたします。従来の検索フィルターはすこし頓挫した印象があったため、すっきりして見えるように整理しました。従来の検索フィルターは全ての項目が表示されていたため、使用頻度が高いと想定している項目とそうではない項目に分けています。「詳細検索」をクリックすれば、検索の詳細条件が表示されます。エントリー以外の検索フィルターでも新デザインが適用されています。人それぞれ使い方は変わってくると思いますので、従来のように使いたい方のために「詳細検索」を開いた状態かまた閉じた状態か記憶できるようになっております。詳細検索を使用する使用頻度が高い方は、詳細検索を開いだ状態でページを移動すると次回ページに訪れた時も詳細検索が開いたままの状態を維持します。以前まで作成ボタンは白いボタンとなっておりましたが、作成ボタンを発見しづらい問題が発生していたため、視覚的にボタンを探しやすいように緑色に変更いたしました。管理画面はクライアントやチームメンバーなどの誰かに操作方法を説明するすることがある(デモや、電話などを想定)ため、より説明しやすいことを考え配色変更を行なっています。この変更は、エントリーだけではなく、カテゴリーやブログなどその他の作成ボタンにも適用されています。ボタン、入力欄、セレクトメニューの高さの通常サイズを26pxに統一ボタン、セレクトメニューの高さを26pxに統一いたしました。これは、一覧の余白が要素によって統一されていなかったことにより、バラバラとした印象になってしまっていた問題が理由です。この変更により、通常サイズ高さは30pxから26pxに変更になり、ウィンドウ幅が767px以前のときは38pxから34pxへ変更になりました。44pxフォントサイズは、ウィンドウ幅が768px以降のときは12px、大きいサイズが16pxとなっており、ウィンドウ幅が767px以前ではフォントサイズは16px、大きいサイズのみ20pxとなっています。今回の変更により、paddingの値やline-heightの値が変更されています。オリジナルテーマ内でスタイルを継承してお使いの場合、従来のacms.cssを入れていない状態だと影響が出る場合がございます。.acms-admin-admin-title2に背景色を追加タブ内の見出しが探しやすくなるように、背景色を追加しました。.acms-admin-admin-title2を見出しのクラス名に使った際に、反映されます。管理画面内データ一覧の区分分け以前のデータ一覧では、例えばエントリーの場合はタイトル、コード、日時、ブログ、カテゴリーが同じセル内に入っておりましたが、これを区分分けしました。合わせて、コンテンツとヘッダーを識別しやすいように、背景色をヘッダーに適用しています。現状のラベルのコントラスト比を調べると、Webアクセシビリティのことを考えるとコントラスト比が満たしていませんでした。今回はレベルAAを満たす配色にしました。レベルAAを11pxの文字サイズのときに達成するためには、4.5以上のコントラスト比が必要になります。配色を変更したことにより、黄、緑、灰のラベルは基準を満たしていませんでしたが満たすようになりました。developerの記事からすこし配色を調整しています。これは、管理画面内の背景色がありのUIとを考慮したことによる調整です。数値としては黄色ラベルについては検討段階よりもコントラスト比が下がりましたが、背景色が白でも背景色が灰色でも識別しやすくなるよう色を選んでいます。ラベルの配色変更に伴い、バッジの配色も変更しております。2019/03」を開催しました。今回はVer.2.10の機能について開発者スタッフからご紹介いたしました。設定が可能になりました。変更点いつもお世話になっております。変更点についてまとめてみたいと思います。CTO(最高技術責任者)も務める、開発者の伊藤淳が語ります。2.1...続きを読む201904/19Ver.2.10.8より追加されたlp@site2019(ランディングページテーマ)の使い方Ver.2.10.8よりランディングページテーマが「lp@site2019」にアップデートいたしました。フィックスバージョンなのですが、テーマ類が2019版になったりと大きな変更が加えられています。