ファイルをアップロードする

ファイルをアップロードするカスタムフィールドついて詳しく説明します。
以下で説明しているファイルのカスタムフィールドは、ソースコードの生成はカスタムフィールドメーカーで簡単に作成できます。

ファイルをアップロードするカスタムフィールドの作成

例)PDFファイルをアップロードするカスタムフィールド(フィールド名:pdffile)

<!-- BEGIN pdffile@path:veil -->
<input type="hidden" name="pdffile@old" value="{pdffile@path}" />
<input type="hidden" name="pdffile@secret" value="{pdffile@secret}" />
<input type="hidden" name="pdffile@baseName" value="{pdffile@baseName}" />
<input type="hidden" name="pdffile@fileSize" value="{pdffile@fileSize}" />

<label for="input-checkbox-pdffile@edit">
<input type="checkbox" name="pdffile@edit" value="delete" id="input-checkbox-pdffile@edit" /> 削除
</label>
<a href="%{HTTP_ARCHIVES_DIR}{pdffile@path}"><img src="/images/fileicon/pdf.gif" width="64" height="64" alt="zip" /></a><!-- END pdffile@path:veil -->
<input type="file" name="pdffile" />
<input type="hidden" name="field[]" value="pdffile" />
<input type="hidden" name="pdffile:extension" value="file" />
<input type="hidden" name="pdffile@extension" value="pdf" />
<input type="hidden" name="pdffile@filename" value="pdf/example.pdf" />

各記述の説明

2行目:ファイルがアップロードされなかった場合に既存のアップロードされているファイルの情報を送信する記述【必須】

<input type="hidden" name="フィールド名@old" value="{フィールド名@path}" />

4行目:システムのファイル名を表示するための記述【任意】(v1.4.2から)

<input type="hidden" name="pdffile@baseName" value="{pdffile@baseName}" />

5行目:ファイルサイズを自動で取得するための記述【任意】(v1.4.2から)

<input type="hidden" name="pdffile@fileSize" value="{pdffile@fileSize}" />

7〜9行目:アップロードしてあるファイルを削除する記述【任意】

<label for="input-checkbox-フィールド名@edit">
<input type="checkbox" name="フィールド名@edit" value="delete" id="input-checkbox-フィールド名@edit" /> 削除
</label>

10行目:アップロードしたファイルのアイコンとリンク表示【必須】

<a href="%{HTTP_ARCHIVES_DIR}{フィールド名@path}"><img src="アイコンファイルのパス" width="64" height="64" alt="代替テキスト" /></a>

11行目:ファイルを入力する記述【必須】

<input type="file" name="フィールド名" />

12行目:カスタムフィールドであることの記述【必須】

<input type="hidden" name="field[]" value="フィールド名" />

13行目:通常のフィールドではなく、拡張フィールドであることの記述【必須】

<input type="hidden" name="フィールド名:extension" value="file" />

14行目:アップロードするファイルの拡張子を指定【任意】

value属性に拡張子を記述します。ここで指定した種類のファイルのみアップロードできます。拡張子は1つのみ指定可能です。
指定していない場合はコンフィグの設定が適用されます。

<input type="hidden" name="フィールド名@extension" value="pdf" />
拡張子を複数指定したい

拡張子を複数指定してユーザーに入力のヒントを提示したい場合は、HTMLのaccept属性を使用することを推奨しています。

以下の例では、.pdf、.docx、.docの拡張子を許可しています。ユーザーは指定された拡張子のファイルのみ選択できるようになります。 <input type="file" name="フィールド名" accept=".pdf,.docx,.doc" />

15行目:アップロードする場所とファイル名を指定【任意】

カスタムフィールドからアップロードされたファイルは、/archives/bid/内に格納されます。(その他の場所にはアップロードできません。)※@filenameは@baseNameと違い、ファイル名を指定することができます。

<input type="hidden" name="フィールド名@filename" value="アップロードするファイルのパス" />

PDFファイルをアップロードしたカスタムフィールド

PDFファイルをアップロードしたカスタムフィールド


ファイル名をランダムにするには

valueの値を空欄にすることでランダムになります

<input type="hidden" name="pdffile@filename" value="" />
ファイル名をアップロードされたファイル名のままにするには

valueの値を"@rawfilename"にすることでそのままになります

<input type="hidden" name="pdffile@filename" value="@rawfilename" />

カスタムフィールドでアップロードしたファイルを表示

例)「pdffile」というフィールド名でPDFファイルをアップロードした場合

<!-- BEGIN pdffile:veil --><a href="%{HTTP_ARCHIVES_DIR}{pdffile@path}"><img src="アイコンファイルのパス" width="64" height="64" alt="代替テキスト" /></a><!-- END pdffile:veil -->

画像をアップロードする

画像をアップロードするカスタムフィールドついて詳しく説明します。
以下で説明しているファイルのカスタムフィールドは、ソースコードの生成はカスタムフィールドメーカーで簡単に作成できます。

画像をアップロードするカスタムフィールドの作成

例)PNGファイルをアップロードするカスタムフィールド(フィールド名:topVisual)

<!-- アップロード済みのファイルのプレビューエリア -->
<!-- BEGIN topVisual@path:veil -->
<img src="%{ARCHIVES_DIR}{topVisual@path}" width="{topVisual@x}" height="{topVisual@y}" alt="{topVisual@alt}" /><br />
<input type="hidden" name="topVisual@old" value="{topVisual@path}" />
<input type="hidden" name="topVisual@secret" value="{topVisual@secret}" />
<label for="input-checkbox-topVisual@edit">
<input type="checkbox" name="topVisual@edit" value="delete" id="input-checkbox-topVisual@edit" />
削除
</label><br /><!-- END topVisual@path:veil -->
<!-- イメージファイルをアップロードするフィールド -->
<input type="file" name="topVisual" size="20" />
<input type="hidden" name="field[]" value="topVisual" />
<input type="hidden" name="topVisual:extension" value="image" />
<input type="text" name="topVisual@alt" value="{topVisual@alt}" />
<input type="hidden" name="topVisual@extension" value="png" />
<input type="hidden" name="topVisual@filename" value="topVisual.png" />
<input type="hidden" name="topVisual@width" value="820" />

a-blog cms Ver. 2.7.0 GM

a-blog cms Ver. 2.7.0 GM

予定より遅くなっており申し訳ありません。やっとa-blog cmsの次期バージョンであるa-blog cms Ver. 2.7.0をリリースできる準備ができてきました。そこで今回は、ほぼリリース版と同じ a-blog cms Ver. 2.7.0 GM(ゴールデンマスター)をダウンロード出来るようにしました。

注意事項: このバージョンはサポート対象ではありません。

変更履歴

表示しているエントリーと同じフィールドの値をもつ記事一覧を表示する

この記事では、現在いるエントリーと同じカスタムフィールドの値を持つエントリーを表示する方法をご紹介します。

たとえば、{select_item}という変数があったとします。{select_item}では「りんご」「もも」「ぶどう」の中から値が選べるようになっています。記事Aというエントリーが、「りんご」という値を持っていたとき、記事Aの詳細ページに、{select_item}という変数で「りんご」を選択しているエントリーをリストにして一覧することができます。


select_itemが「りんご」だったときの詳細ページの図

select_itemが「りんご」だったときの詳細ページの図


今回はモジュールで出力されるカスタムフィールドの値を使用したいので、モジュールが出力された後にモジュールを実行しなければいけません。実行順序を少し遅らせるためには、ポストインクルードを使います。ポストインクルードについて詳しくはドキュメントをご覧ください。

<!-- BEGIN_MODULE Entry_Field id="current_eid" -->
  <form action="" method="post" class="js-post_include-ready">
    <input type="hidden" value="{select_item}" name="select_item">
    <input type="hidden" value="select_item" name="field[]">
    <input type="hidden" name="tpl" value="include/sub/entryList.html">
    <input type="submit" name="ACMS_POST_2GET" style="display:none;">
   </form>
<!-- END_MODULE Entry_Field -->

1行目と8行目の記述

今回はエントリーの情報を表示したかったため、Entry_Fieldのモジュールを使用しました。

あらかじめ、Entry_Fieldモジュールで、モジュールID名で作成しておきます。ここではモジュールID名を「current_eid」としました。新しく作成したモジュールIDでは、現在いるエントリーの情報を表示できるように、「エントリーID(eid)」のURLコンテキストにチェックをつけておきました。


ポストインクルードで使用するためのモジュールIDの設定

ポストインクルードで使用するためのモジュールIDの設定


5行目の記述

5行目で指定している、include/sub/entryList.html には、とくに特殊な設定は必要なく、通常のモジュールを置いてください。

<input type="hidden" name="tpl" value="include/main/curriculum/this_course_summary.html">

include/sub/entryList.html(通常のモジュール)の例

<!-- BEGIN_MODULE Entry_List id="select_item_list" -->
<div class="acms-margin-bottom-medium">
<!--#include file="/admin/module/setting.html"-->
  <ul class="acms-list-group">
    <!-- BEGIN entry:loop -->
    <li><a href="{url}" class="acms-list-group-item">{title}</a></li>
    <!-- END entry:loop -->
  </ul>
</div>
<!-- END_MODULE Entry_List -->

モジュール設定

entryList.htmlの中に記述したモジュールにはモジュールIDの設定をしておく必要があります。ポストインクルードでフィールドの情報を渡しているため、フィールドのURLコンテキストが有効になった状態になったので、モジュールでもフィールドの情報が表示できるようになりました。Entry_List でフィールドの情報を表示するため、モジュールの設定も「フィールド(field)」のURLコンテキストを有効にしましょう。


表示用のモジュールIDの設定

表示用のモジュールIDの設定


動作の確認

ポストインクルードの記述で値を渡したカスタムフィールドの変数(この記事では「select_item」)と同じカスタムフィールド(この記事ではエントリーのカスタムフィールド)を作成し、値を入力してください。

ポストインクルードを設置したページに戻り、「include/sub/entryList.html」のテンプレートの中身が表示されれば完成です。もし表示されなかった方は手順をもう一度ご確認ください。

モジュールIDとあわせて複数カテゴリーからのピックアップ表示を実現する方法

ピックアップ表示

特定のエントリーだけを表示したいことがあると思います。a-blog cmsではカスタムフィールドを応用することで、カテゴリーをまたがったピックアップ表示を実装することができます。

今回はモジュールIDを利用して、ブログ全体から特定のエントリー(ピックアップ用のフラグになるカスタムフィールドを設定したエントリー)だけを表示する設定について説明します。