Home

メディア機能のパーマリンクが画像とSVGファイルでも表示されるようになりました

2020年3月18日にリリースしたVer. 2.11.8では、メディア機能の画像のパーマリンクが表示されるようになりました。

以前まではドキュメントファイルのみパーマリンクの表示に対応しておりましたが、画像ファイルとSVGファイルもパーマリンクの表示に対応しています。

なお、メディアファイルを変更すると同時にパーマリンクのURLも変更されます。もし直接URLをHTMLなどに貼り付ける場合は、その点をご留意の上お使いください！

ディレクトリ構造

a-blog cmsで利用されているファイルの構成を見ていきましょう。

archives/

画像などのファイル類が保存されるディレクトリです。ファイルはこのディレクトリ以下に /ブログID/日付/ファイル の形で保存されます。

archives_rev/

Ver. 3.1 より archives_rev は廃止されました。Ver. 3.1 以降では、非公開エントリーバージョンのファイルも archives ディレクトリに保存されます。Ver. 3.1 未満からアップデートした場合で、エントリーのバージョン機能や承認機能をご利用の場合は、archives_revのファイルをarchivesにマージしてください。

archivesディレクトリと同じく、画像などのファイルを保存します。archivesディレクトリと違う点は公開されていないエントリーのバージョンのファイルが保存されるようになります。必要ならこのディレクトリのファイルにhttpで直接アクセスできないように制限をかけてください。

cache/

a-blog cms内部で利用されるキャッシュファイルが保存されます。Ver. 3.0 未満のページキャッシュはここに保存されません。

cron/

a-blog cms の機能を cron で定期実行する場合のサンプルプログラムが格納されているディレクトリです。

js/

a-blog cmsで利用するJavaScriptが置かれています。

js/config.js は直接編集を行わないでください。

ACMS.Ready(function(){
  // 自動的に外部リンクをブランクで開かないように設定
  ACMS.Config.linkOutsideBlankMark = '';
});

lang/

管理ページ系の多言語化で利用される言語ファイルです。多言語化は gettext ライブラリを使用しています。potファイル（翻訳テンプレート）から各言語に翻訳ファイルを作成することができます。

media/

メディア機能で利用される、画像が保存されます。

storage/

メディア機能で利用される、ファイルが保存されます。

php/

a-blog cmsの本体プログラムが格納されています。以下ディレクトリでプログラムの拡張が可能になっております。（Ver. 2.8から非推奨）

php/ACMS/User/ : モジュール単位で機能を拡張できます。
php/AAPP/ : 複数のモジュールが集まった機能単位で拡張できます。（拡張アプリ）

extension/

a-blog cmsのプログラムを拡張するためのディレクトリになります。Ver. 2.7.0 以下では、phpディレクトリ内のディレクトリで拡張していましたが、Ver. 2.8.0 からはこちらで拡張をお願いします。

extension/acms

モジュールやフック、校正オプション、バリデーターの拡張ができます。現在は非推奨の php/ACMS/User と同じ役割になります。ここでのカスタマイズはサイト全体で有効になります。

extension/plugins

モジュールやフック、校正オプション、バリデーターをまとめて拡張アプリとしてパッケージできます。ある程度まとまった機能を開発する場合、配布・再利用をし易くしたい場合はこちらをご利用ください。ブログ単位で機能を有効・無効にすることができます。現在は非推奨の php/AAPP と同じ役割になります。

この２つ以外で直接モジュールなどを拡張しないでください。アップデート時に動かなくなる可能性があります。

private/

コンフィグの初期値を設定するファイルなどが格納されています。

const/ : メールでの文字列変換の定義ファイルが置かれています
config.system.default.yaml : コンフィグの初期値ファイルです
config.system.yaml : config.system.default.yaml を拡張するファイルです

config.system.default.yaml は直接編集を行わないでください。config.system.yamlで拡張します。

setup/

a-blog cmsのインストーラー、メンテナンスツールになります。ドメインが変更された場合などはこのメンテナンスツールにアクセスして修正を行います。

インストール後、setupディレクトリを削除、またはリネームします。セキュリティを高めるために削除することが望ましいです。

themes/

テーマ類が格納されています。管理ページで利用されるテンプレートが system テーマに格納されています。

systemテーマは直接書き換えないでください。拡張する場合はご利用のテーマに同じファイルを作成し拡張してください。

.htaccess

全てのリクエストを index.php にリライトします。リライトができない場合、a-blog cmsが動作しません。Webサーバーで mod_rewrite が利用できるかご確認ください。

.env

環境変数を設定するためのファイルです。監査ログやキャッシュ機能などの設定をすることができます。

acms.js

組み込みJSの起点ファイルになります。ご利用のテンプレートで読み込み込んでください。

<!-- BEGIN_MODULE Js -->
<script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->

config.server.php

データベース接続などの各種設定ファイルになります。

config.user.php

a-blog cms 起動前に呼ばれるphpファイルになります。独自カスタマイズなどを行っている場合に、独自プログラムに使う設定や、起動前に独自処理を挟みたい場合などにご利用ください。

index.php

a-blog cmsの起動ファイルになります。.htaccessなどでこのファイルにリライトするようになっています。

license.php

ライセンスファイルです。開発環境では差し替える必要はありません。本番環境で公開するときに https://mypage.a-blogcms.jp よりライセンスを購入してファイルを置き換えてください。

Ver. 2.11.37 をダウンロード

前後リンクで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で指定した値が優先されません）

まとめ

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

カスタムフィールドの作成

カスタムフィールドとは

エントリーや、カテゴリー・ブログ・ユーザーに対して独自のデータを追加することができる機能です。追加したデータは表示や検索用のキーとして利用されます。例えば、ひとつの商品を紹介するエントリーに対して「値段・発売日・サイズ」などの情報をカスタムフィールドとして追加することで、商品情報のデータベースを作ることができます。

カスタムフィールドのタグの基本

カスタムフィールドはフォームタグのようにHTMLベースで書くことができます。値段を入れるカスタムフィールドを追加してみます。カスタムフィールドの変数は price にします。

<input type="text" name="price" value="{price}" />
<input type="hidden" name="field[]" value="price" />

これでカスタムフィールドが１つできました。HTMLなので入力画面を入力しやすいレイアウトできます。

カスタムフィールドでできること

カスタムフィールドは以下のような入力フォームが追加できます。

テキスト（テキスト、テキストエリア、チェックボックス、ラジオボタン、セレクトボックス）
画像
ファイル
地図（GoogleMaps）

今回作成するカスタムフィールド

では、site2015テーマを元に以下のようなカスタムフィールドを追加してみたいと思います。（site2015テーマでインストールした事を前提としています。）

エントリー（記事）データに独自フィールドを追加
商品価格のテキストデータを追加
商品画像の画像データを追加

編集画面のカスタマイズ

SFTPに接続し、/themes/site2015/admin/entry/field.html に以下のコードを追記します。

<table class="acms-admin-table-admin-edit">
  <tr>
    <th>商品価格</th>
    <td>
      <input type="text" name="price" value="{price}" class="acms-admin-form-width-full"/>
      <input type="hidden" name="field[]" value="price" />
    </td>
  </tr>
  <tr>
    <th>商品画像</th>
    <td>
      <!-- BEGIN productImage@path:veil -->
      <img src="%{ARCHIVES_DIR}{productImage@path}"/>
      <input type="hidden" name="productImage@old" value="{productImage@path}" /><br />
      <label class="acms-admin-form-checkbox">
        <input type="checkbox" name="productImage@edit" value="delete" />
        <i class="acms-admin-ico-checkbox"></i> 削除
      </label>
      <!-- END productImage@path:veil -->
      <input type="file" name="productImage" size="20" /><br />
      <input type="hidden" name="field[]" value="productImage" />
      <input type="hidden" name="productImage:extension" value="image" />
      <input type="hidden" name="productImage@size" value="300" />
      <input type="hidden" name="productImage@filename" value="" />
    </td>
  </tr>
</table>

保存できるか確認

では実際にサイトにログインして、「エントリー作成」ボタンを押して記事編集画面を出してみます。以下の画像のように、商品価格と商品画像というフィールドが追加されていると思います。実際にデータを入力して記事を保存してみましょう。保存後、編集画面を再度開くと保存されている事が確認できると思います。

追加された独自フィールド

独自フィールドが保存できた

サイトに表示させる

編集画面ができましたので、作ったカスタムフィールドをサイトに表示させます。

エントリーのカスタムフィールドはEntry_Fieldモジュール、Category_EntryListやCategory_EntrySummary、Entry系モジュールのentry:loop内で使うことができます。以下のコードでは Entry_Fieldモジュール を使い表示しています。

<!-- BEGIN_MODULE Entry_Field -->
<p>{price}</p>
<!-- END_MODULE Entry_Field -->

表示側のカスタマイズ

SFTPに接続し、/themes/site2015/include/module/entry/body.html の 40行目付近に追記します。

<h2 class="entryTitle"><a href="{titleUrl}">{title}[raw]</a></h2><!-- END_MODULE Touch_NotEntry -->
</header>
<!-- END title:veil -->

<!-- ここから追記 -->
<table class="acms-admin-table-admin-edit">
  <tr>
    <th>商品価格</th>
    <td>
      {price}
    </td>
  </tr>
  <tr>
    <th>商品画像</th>
    <td>
      <!-- BEGIN productImage@path:veil -->
      <img src="%{ARCHIVES_DIR}{productImage@path}"/>
      <!-- END productImage@path:veil -->
    </td>
  </tr>
</table>
<!-- ここまで追記 -->

<!-- BEGIN entry:veil -->
<div class="acms-entry entryColumn">
  <div class="acms-grid-r">

独自フィールドのサイト表示

カスタムフィールドの追加からサイトへの表示まで一通り行ってみました。HTMLのみで追加・表示できるので表現の幅が広がると思います。またコードのみで追加できるので、バージョン管理ツールなどで管理しやすくなるのもメリットです。

詳しいカスタムフィールドのドキュメントは以下よりご覧ください。

カスタムフィールドのドキュメントはこちら