Home

クエリストリングの値をグローバル変数として取得する

a-blog cms ではクエリストリングを取得するために「%{QUERY} 」や「%{QOL}」などのグローバル変数が用意されています。これらのグローバル変数はURLエンコードされているため使用場面によってはURLデコードする必要があるかもしれません。また、クエリストリングの変数名まで取得するようになっているためそのままでは使用できない場合もあるかもしれません。今回はクエリストリングの変数値（バリュー）のみを簡単に取得できるa-blog cmsの機能についてご紹介します。

クエリストリングとは

サーバーに情報を送るためにURLの末尾につけ足す文字列のことです。URLの「?」以降がクエリストリングとなります。

例）https://developer.a-blogcms.jp/document/search.html?keyword=テスト&start=1

上記例だと「?keyword=テスト&start=1」の部分がクエリストリングとなります。

クエリストリングの基本構造

クエリストリングは基本的に、変数名と変数値を指定する「?変数名=変数値」という構造になっています。また、上記例の場合「&」を使うことで複数の値を設定しており、変数名（キー）にあたる部分が「keyword」と「start」で、変数値（バリュー）にあたる部分が「テスト」と「1」になります。

※ここではクエリストリングについて詳しく解説しないため、詳しく知りたい方は「URLクエリパラメータ」とは何か、どのような場合に「除外」するべきなのか？［第4回］ | Googleアナリティクスとは／衣袋教授のGoogleアナリティクス入門講座などの他サイトをご参照ください。

今回は、このクエストリングの変数値（バリュー）のみを取得する方法についてご紹介していきます。

記述方法

クエリストリングを渡す

例えば、下記のようにクエリストリングを設定します。

<p>クエリストリングテストURL：<a href="https://exmple.com/?test=クエリストリングテストです！">クエリストリングテストです！</a></p>

上記例の遷移先は「https://exmple.com/?test=クエリストリングテストです！」のようなURLになります。

クエストリングの変数値（バリュー）を取得する

取得時は a-blog cms のグローバル変数と同じで、下記のように「%{クエリストリングの変数名}」と記述します。これでクエリストリングの変数値（バリュー）を取得することができます。

<p>クエリストリングを取得：%{test}</p>

上記例の出力結果は「クエリストリングを取得：クエリストリングテストです！」のようになります。

前後リンクで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）を利用する

エントリー一覧のときに、タイトルと一緒に表示されるステータスを出力したくないときのカスタマイズ

エントリー一覧などでエントリータイトルと一緒に表示される【下書き】、【非公開】などのステータスの状況を出力しないようにする方法をご紹介します。

サイト全体に対応する方法

/private/config.system.default.yamlの900行〜908行目付近にあるステータスの設定をconfig.system.yamlに空の状態で記述すると、実現できます。

config.system.yamlの記述例

admin_entry_title_prefix_close :
admin_entry_title_prefix_draft :
admin_entry_title_prefix_secret :
admin_entry_title_prefix_trash :
admin_entry_title_prefix_pre_approval :
admin_entry_title_prefix_trash_approval :
admin_entry_title_prefix_awaiting :
admin_entry_title_prefix_start :
admin_entry_title_prefix_end :

ただし、上記の方法ではサイト全てが適用されてしまいます。個別に対応したい場合は、下記の対応を行ってください。

個別に対応する方法

エントリーサマリーやエントリーボディには{status}という変数が用意されているので、校正オプションと合わせれば個別に非表示にすることも可能です。

HTMLの記述例

<!-- BEGIN_IF [{status}/neq/open] -->
{title}[split('】', 1)]
<!-- ELSE -->
{title}
<!-- END_IF -->

{status}は英語でそれぞれのステータスの情報が表示される変数となっており、公開時にはステータスが出力されないため、公開時以外の時にsplitの校正オプションを使ってタイトルのみを表示しています。

校正オプションsubstringを新規作成し、PDFのサムネイル画像にresizeImgの校正オプションを適用する方法

この記事では、先日メールサポートで質問をいただいたメディアに登録したPDFのサムネイル画像にresizeImgの校正オプションを適用する方法についてご紹介します。

PDFのサムネイル画像をカスタムフィールドで表示するためには、{hoge@thumbnail}のような変数を使いますが、resizeImgの校正オプションは/media/001/xxxx.jpgではなく、/001/xxxx.jpgのように/media/を含まないパスでしか扱えない仕組みとなっております。

そこで、PDFのサムネイル画像を表示する{hoge@thumbnail}（出力結果：/media/001/xxxx.jpg）でもresizeImgを使用する方法を本記事でご紹介します。

substring 校正オプションを新しく追加して、適用する

「/media」を削除する校正オプションを追加する校正オプションを追加し、適用しましょう。

まず、config.server.phpのHOOK_ENABLEの項目を1にします。

そして、 /extension/acms/Corrector.php を開き、class Corrector { ... } の部分に以下を記述してください。

public function substring($txt, $args = array())
{
    $start = isset($args[0]) ? $args[0] : 0;
    $length = isset($args[1]) ? $args[1] : false;
    if ($length === false) {
        return substr($txt, $start);
    }
    return substr($txt, $start, $length);
}

校正オプションの拡張についての詳しい説明は下記のドキュメントをご覧ください。

校正オプションの拡張について

{hoge@thumbnail}を表示したいHTMLのテンプレートを開き、以下のように記述します。

<img src="%{MEDIA_ARCHIVES_DIR}{hoge@thumbnail}[substring(6)|resizeImg(300)]" alt="{hoge@alt}" />

[substring(6)]という校正オプションは、冒頭から6文字目までを削除します。今回の場合は、校正オプション適用前は「/media/001/xxxx.jpg」と出力されてしまうので、適用後は「/001/xxxx.jpg」のみを表示できるようになります。

さらにパイプ（|）でresizeImgを繋げることで、{hoge@thumbnail}に2つの校正オプションを適用しています。

最後に

splitの校正オプションもとても便利ではありますが、たとえば、「3つ目の/から4つめの/までの値を取り除く」という指定になってしまうので、今回のような問題の場合は記述が冗長になってしまいます。冒頭の何文字目かを削除したいという場合は今回のsubstring校正オプションを追加し、ご使用いただくのがHTMLファイルの記述ががシンプルになり、便利かと思います。

今回はPDFのサムネイル画像にresizeImgを適用する方法を一例としてご紹介しましたが、他の手段においてもご活用いただけると幸いです。