Home

メディア機能のモーダルが個別URLで表示されるようになりました

Ver. 2.11.6より、メディア管理の詳細モーダルを個別URLごとに表示し、他者へ共有しやすくなりました。

今までは詳細モーダルを開いた時はURLが用意されておらず、一覧ページのURLのままになっていたため、特定のメディアについてコミュニケーションを図る時にIDやタグを伝えて一覧から探す手間が発生していました。

今回の改善により、表示中のURLをチャットやメールでシェアすることが可能になり、以前よりも特定のメディアについてコミュニケーションが取りやすいようになりました。

URLを共有した際、相手には下記のモーダルの画面が開いた状態のページが表示されます。

このメディアについて話したいな、と思った時はぜひご利用くださいね！

メディアのパーマリンクがランダム文字列で表示できるようになりました

以前からもファイルデータをメディアとして登録した際にはパーマリンクが生成される機能が用意されていましたが、Ver. 2.11.5よりパーマリンクがランダム文字列で表示されるようになりました。

改善が行われた理由

以前までのパーマリンクではURLに連番を採用していたため、ファイルをダウンロードした際に前後のファイルのURLを簡単に予測できてしまう恐れがありました。

今回の変更により、末尾にランダム文字列を付与することで簡単にメディアファイルが予測できないように改善されました。

以前までのパーマリンク

例）http://acms.lab/media-download/805/

Ver.2.11.5 以降のパーマリンク

例）http://acms.lab/media-download/805/df7a579224321ede/

Ver.2.11.4以前のパーマリンクに戻す方法

以前のURLをすでにURLとして公開している場合のことを考慮し、Ver. 2.11.6以降では旧URLへの表示に戻すことが可能になりました。

パーマリンクの仕様を旧バージョンに戻す時は、config.system.yaml に下記の項目を追加してください。値を「v2」に変更すると新しい仕様に戻すことが可能です。

media_download_link: v1 # v1: media-download/xxx/ v2: media-download/xxx/hash値/

htaccess.txt によく利用されそうな設定を新しく追加しました

2020年2月5日にリリースしたVer.2.11.5では、ルートディレクトリの htaccess.txt によく利用されそうなセキュリティ周りのヘッダーに関するものとPHPの設定を新しく追加しました。

使用する際は、サイトに合わせて内容を書き換えてください。

追加した htaccess.txt の内容

# セキュリティ周りのヘッダー
# Header set X-Frame-Options SAMEORIGIN
# Header set X-Content-Type-Options 'nosniff'
# Header set X-XSS-Protection '1; mode=block'
# Header set Strict-Transport-Security 'max-age=315360000'

CMSを通さない静的なファイルへのアクセス（例：CSS、JSや画像ファイル）の際にもセキュリティ周りのHTTPヘッダーを設定できるようにコメントとして追記しました。

# php 設定
# php_value max_input_vars 99999
# php_value memory_limit 512M
# php_value post_max_size 64M
# php_value upload_max_filesize 16M

デフォルトのPHPの制限が厳しくてユニット数が多いエントリーが保存できなかったり、ファイルサイズが大きいものをアップロードできなかった問題が起こった場合に、よく使う項目をコメントとして追加しました。

各項目については下記の記事をご覧ください。

ユニット数が多いと画像やユニット自体が表示されないものがでてくる|トラブルシューティング|a-blog cms developer

今までは設定をするときに毎回調べていた方も多いかと思いますが、これからはhtaccessの設定が以前より楽にできるようになりました。

設定の変更が必要になったときはぜひ活用ください！

前後リンクでeidを表示できるようになりました

2020年3月8日にリリースされたVer. 2.11.8より、前後リンク（SerialNavi ）を表示するブロック内でeidを表示できるようになりました。

Entry_Bodyの前後リンク部分の変数表をみるとeidが追加されています

前後リンクのeidを使ってできるようになること

前後リンクでeidが表示できるようになり、前後のエントリーのカスタムフィールド画像を表示する際には、以前まではポストインクルードで呼び出す必要がありましたが、代わりにctxを使って呼び出せるようになります。

ctxと併用することにより、カスタムフィールド画像を呼び出せるようになります

実装方法

ソースコードの例

<!-- BEGIN serialNavi:veil -->
<nav aria-label="ページ送り">
  <ul class="serial-nav clearfix">
    <li class="serial-nav-item serial-nav-item-prev"><!-- BEGIN prevLink -->
        <a href="{url}">&laquo;<!-- BEGIN_MODULE\ Entry_Field id="EF_no_context" ctx="eid/{eid}" --><img src="%{MEDIA_ARCHIVES_DIR}\{ogp_image@path\}" alt="" width="80">\{title\}<!-- END_MODULE\ Entry_Field --></a><!-- END prevLink -->
    </li>
    <li class="serial-nav-item serial-nav-item-next"><!-- BEGIN nextLink -->
        <a href="{url}"><!-- BEGIN_MODULE\ Entry_Field id="EF_no_context" ctx="eid/{eid}" -->\{title\}<img src="%{MEDIA_ARCHIVES_DIR}\{ogp_image@path\}" alt="" width="80">&raquo;<!-- END_MODULE\ Entry_Field --></a><!-- END nextLink -->
    </li>
  </ul>
</nav>
<!-- END serialNavi:veil -->

※上記のスクリーンショットの通りにするにはカスタムフィールドの作成と別途CSSの記述が必要になります。

モジュールIDの設定

Entry_Fieldのモジュールは別途モジュールIDを作成する必要があります。モジュールの設定は、エントリーのURLコンテキストのチェックを外した状態で作成してください。（※エントリーのURLコンテキストが優先された状態ではctxで指定した値が優先されません）

まとめ

これで、以前よりも楽にカスタムフィールド画像が表示できるようになります。よりリッチな前後リンクをぜひ実装してみてくださいね！

Pretty Scroll でオフセット距離を設定する

Site2019テーマで実装した例

今回の機能紹介記事では、2020年1月14日にリリースされたVer. 2.11.3より加わった、Pretty Scrollの属性をご紹介します。

data-offset-topとdata-offset-bottomの2つ属性が追加されたことにより、オフセット距離が設定できるようになります。

下記のコードではウィンドウの上部より100px離れた位置で要素を固定します。

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

data-offset-bottomを指定すれば、指定した数値のpx分だけウィンドウの下部から離れた位置で対象の要素を固定します。

Pretty Scrollの使い方はドキュメントをご覧ください。

スクロールに追従するサイドメニューを実装する（Pretty Scroll）を利用する