この記事では、2025年5月23日にリリースした Ver. 3.1.49 と Ver. 3.0.53 の修正内容について紹介いたします。

現在お困りの問題に該当する項目がありましたら、お早めにバージョンアップのご検討をお願いいたします。

リリースノート

Ver. 3.1.49 修正点

• CMS-7208 ログアウト時や読者権限で、テンプレートに管理系・編集系のGETモジュールがあると403エラーになる場合がある問題を修正

Ver. 3.0.53 修正点

• CMS-7209 ログアウト時や読者権限で、テンプレートに管理系・編集系のGETモジュールがあると403エラーになる場合がある問題を修正

CMS-7208 ログアウト時や読者権限で、テンプレートに管理系・編集系のGETモジュールがあると403エラーになる場合がある問題を修正

ログアウト状態または読者権限で、テンプレートに以下管理系GETモジュールがあるページを表示した場合に403エラーになる問題を修正しました。

Admin_Errors モジュール

<!-- BEGIN_MODULE Admin_Errors -->
...
<!-- END_MODULE Admin_Errors -->

Admin_Entry_Edit モジュール

<!-- BEGIN_MODULE Admin_Entry_Edit -->
...
<!-- END_MODULE Admin_Entry_Edit -->

最後に

該当する問題がございましたら、できるだけ早めのバージョンアップをご検討ください。

今後もご報告いただいた内容に対して真摯に受け止め修正と改善を行ってまいります。
今後ともどうぞよろしくお願いいたします。

1. 概要

スマホなどの小さいディスプレイの時に、横に長いコンテンツ（テーブルなど）を横スクロールさせることはよくあると思います。 ただ横スクロールは、あまり行わない操作のため、横スクロールできることに気づきにくくUIとして悩むところです。

そこで、この組み込みJS「Scroll Hint」を導入することで、ユーザーに横スクロールできることを、認知させることに役立ちます。 以下のテーブルをご覧ください。アニメーションで、横にスクロールできることを知らせてくれます。

2. 使用方法

横スクロールするコンテンツの親要素に js-scroll-hint をclass属性として適用します。

<div class="js-scroll-hint">
  <table class="acms-table" style="white-space: nowrap;">
    ...
  </table>
</div>

3. オプション

オプションは js/config.js で設定されています。

オプション設定例

オプションを上書きする時の例になります。$.extend を使用して部分的に書き換えれるようになっています。

<script>
  ACMS.Ready(function() {
    ACMS.Config.scrollHintConfig = $.extend(ACMS.Config.scrollHintConfig, {
      suggestClass: 'is-active',
      scrollableClass: 'is-scrollable',
      scrollableRightClass: 'is-right-scrollable',
      scrollableLeftClass: 'is-left-scrollable',
      scrollHintClass: 'scroll-hint',
      scrollHintIconClass: 'scroll-hint-icon',
      scrollHintIconAppendClass: 'scroll-hint-icon-white',
      scrollHintIconWrapClass: 'scroll-hint-icon-wrap',
      scrollHintText: 'scroll-hint-text',
      remainingTime: -1,
      scrollHintBorderWidth: 10,
      enableOverflowScrolling: true,
      suggestiveShadow: false,
      applyToParents: false,
      offset: 0,
      i18n: {
        scrollable: 'スクロールできます'
      }
    });
  });
</script>

Ver. 3.0.10 より、スクロール可能時に表示されるアイコンの表示位置を変更できるようになりました。Ver. 3.0.9 以前の 「Scroll Hint」ではアイコンが表示される位置が js-scroll-hint クラスが適用された要素の高さの半分がビューポートと交差した時でしたので、縦に長い表などで、表の上側の位置でアイコンを表示することができませんでした。

表示位置の変更方法は簡単で、scrollHintIconClass で設定したクラス（アイコン要素）のスタイルを変更して、表示したい位置に配置するだけです。アイコン要素がビューポートと交差した時にアイコン要素が表示されるようになります。デフォルトでは scrollHintIconClass は scroll-hint-icon となっているため、以下のようにCSSを変更すると、js-scroll-hint を適用した要素の上から 25% の位置でスクロール可能時に表示されるアイコンを表示します。

.scroll-hint-icon {
  top: 25%;
}

a-blog cmsでは、スクロールに追従するサイドメニューを実装するためのJavaScript（Pretty Scroll）が標準で実装されています。

1. 設定の編集

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

// スクロール時の追随
//--------------------
prettyScrollMark: '.js-pretty-scroll',
prettyScrollConfig: {
  container: '.js-pretty-scroll-container',
  offsetTop: 20,
  offsetBottom: 20,
  breakpoint: 767,
  condition: function () {
    return true;
  }
},

HTMLは以下のように記述します。このように記述することで、.js-pretty-scroll-containerが適用された要素の範囲内で、.js-pretty-scrollの要素がスクロールに追従するようになります。

<div class="js-pretty-scroll-container">
  <div class="main">
  </div>
  <div class="sub js-pretty-scroll" data-offset-top="20">
  </div>
</div>

また、data-offset-top に数字を記述することでスクロールする際にその数字分、画面上端からのオフセット距離を記述できます。

オフキャンバスメニューとは、画面全体を右、もしくは左にスライドさせ画面外に隠れていたメニューを表示させる機能です。
この機能を使用するには、組み込みJSと合わせてacms.cssもしくはacms-admin.cssのどちらかを読み込む必要があります。

デフォルト設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

offcanvas     : {
    'fixedHeaderMark'  : '.js-offcanvas-header',
    'openBtnMark'      : '.js-offcanvas-btn',//offcanvasを開くボタンのクラス
    'openBtnRMark'     : '.js-offcanvas-btn-r',//offcanvasを右方向に開くボタンのクラス
    'openBtnLMark'     : '.js-offcanvas-btn-l',//offcanvasを左方向に開くボタンのクラス
    'closeBtnMark'     : '.js-offcanvas-close',//offcanvasを閉じるボタンのクラス
    'offcanvasMark'    : '.js-offcanvas',//offcanvasが適応されるエリアのクラス
    'breakpoint'       : 767, //max-widthで指定,'all'を指定すると全画面,
    'throttleTime'     : 100
}

使い方

オフキャンバスメニューを使用したHTMLの構造は例えば以下のようになります。

<ul class="js-offcanvas" id="offcanvas">
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
</ul>
<a class="js-offcanvas-btn js-offcanvas-btn-r" href="#offcanvas">メニューを表示</a>

まず、オフキャンバスメニューのコンテンツとして表示したいHTML要素に、offcanvasMarkで指定したセレクターを指定します。
（※画面幅がbreakpointで指定した値よりも数値が小さい場合はoffcanvasMarkで指定した範囲のHTMLが画面上に表示されなくなるので注意してください ）

さらに、js-offcanvas-btnのclass属性が適用された要素に対してdata-target属性もしくはhref属性に、オフキャンバスのコンテンツとして表示したいHTML要素のid名を指定する必要があります。