小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

ファイルの自動判別アイコンの種類を増やす方法

最終更新日: 2015-01-14
自動判別アイコンの種類を追加

「添付ファイル付 ウェブページ更新ツール」(含 大容量版)では、アップロードしたファイルの拡張子から自動的にファイルタイプを判別してアイコンを表示します。

判別できるファイルは下表の通りですが、さらに JavaScript を利用して対応アイコンを増やす方法をご紹介します。

この方法で、有料カスタマイズを行わずに表示するアイコンの種類を増やす事ができます。

製品の初期設定で対応しているファイルタイプ

以下のファイルタイプは製品の初期設定で自動判別に対応しています。このページの方法は不要です。

Ver. 4.2 までVer. 4.8 以上
PDF、ワード、エクセル、パワーポイント、テキスト 左に加えて ZIP、画像(png, gif, jpg, svg, svgz)

このページの方法の対象製品

準備1:添付ファイル付 ウェブページ更新ツールの設置

ダウンロードと設置

上のリンクから製品をダウンロードして設置して下さい。これからダウンロードされる方は、ダウンロード終了ページに設置の「ステップ by ステップガイド」へのリンクが表示されますのでそれを参考に設置して下さい。お手元にファイルをお持ちの場合は、docs/index.html から「ステップ by ステップガイド」をご覧下さい。

1ヶ月間無料でお試しいただけます。

テスト登録

テストデータとして記事を1件登録して下さい。その際、添付ファイルを色々添付してみて下さい。

対応の無いファイルについては「その他」扱いで単純なアイコンが表示されます。

準備2:アイコン画像の準備

アイコン画像の作成

追加表示させるアイコン画像を準備して下さい。その際、ピクセルサイズを他のアイコンと同じにして下さい。「すぐ使えるCGI」に同梱されているアイコンのサイズは 16ピクセル × 16ピクセル です。

アイコンアップロード

作成したアイコンを webdir/icons/ ディレクトリにアップロードして下さい。

自動更新されるページの編集方法

では、アイコンを切り替えるためにテンプレート編集を行います。

ファイルリンクの編集 (templates/article/article_file.txt)

テンプレートファイル templates/article/article_file.txt を編集して、span タグを追加して下さい(赤字部分)。

なお、周辺のタグはバージョンによって異なります。下記例の追加部分だけに注目して下さい。また、もしアイコン用画像タグがなく、<a> タグの class 属性に %_icon_class_% というテンプレート変数が設定されている場合、下記のように <img> タグを使った表示に書き換えて下さい。

変更後 templates/article/article_file.txt (例)

<tr>
<td>
<span><!-- span でひとつひとつのファイル領域をくくる -->
<img src="./icons/%_icon_map_%" width="16" height="16" alt="">
<a href="%_d_%/%_filename_escaped_%">%_filetext_%</a>
(%_filename_%)<br>
</span><!-- span 終わり -->
</td>
</tr>

ファイル表示部分のID付け (templates/article/article.html)

記事用テンプレート templates/article/article.html を編集して、ファイル表示部分にID属性を付けて下さい。

変更後 templates/article/article.html (青字が追加部分)

<table cellpadding="2" cellspacing="0" border="0" id="atchfiles"><!-- id 属性を追加 -->
<!-- attached files : generate from article_file.txt -->
%_file_list_%
</table>

スクリプトの追加 (templates/article/article.html)

続けて同じテンプレートファイル templates/article/article.html を編集します。
ファイルの末尾、</body> の直前に以下のコードを追加して下さい。

赤字の「atchfiles」は上で追加したID属性です。また、赤字の span は templates/article/article_file.txt に追加したタグに対応します。デザイン上他のタグに変更した場合は、ここでも変更して下さい。

青字部分は、アイコンンを切り替える画像拡張子とそれに対応させるアイコンファイルの名前を指定します。アイコンの種類を追加する分、行をコピーして指定して下さい。

※下記の例では、Ver. 4.8では既に対応している画像やZIPファイルが例に挙げられています。

templates/article/article.html への追加

<!-- アイコン切り替え用スクリプト -->
<script type="text/javascript"><!--
var MyContainer = document.getElementById("atchfiles"); /* ファイル領域の親要素 */

/* 変更するアイコンを1行に一つ指定:
左から 拡張子、拡張子文字数(ドット含)、表示するアイコンファイル名 */
var myIcons = new Array(
[".zip", "4", "icon_zip.gif"]
,[".jpg", "4", "icon_img.gif"]
,[".png", "4", "icon_img.gif"] /* 追加するときはこの行をコピー */

);

/* span を一つずつ調べていく */
var FileList = MyContainer.getElementsByTagName("span");
for (i=0; i<FileList.length; i++){
var MyFile = FileList[i];
var MyExt = MyFile.getElementsByTagName("a")[0].getAttribute("href"); /* 添付ファイルパス */
var MyImg = MyFile.getElementsByTagName("img")[0]; /* アイコン */
var OrgSrc = MyImg.getAttribute("src"); /* アイコンsrc */
for (j=0; j<myIcons.length; j++){
if (MyExt.lastIndexOf(myIcons[j][0], MyExt.length - myIcons[j][1])>=0){
MyImg.src = OrgSrc.replace(/general\.gif/, myIcons[j][2]);
}
}
}
// --></script>

<!-- この直後に body 終了タグ -->

アップロード

変更した以下の2つのファイルをサーバに上書きアップロードして下さい。

templates/article/article.html
templates/article/article_file.txt

再構築

管理画面一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。

確認

ページを再読み込みして、アイコンが変更される事を確認して下さい。

関連リンク

さらに詳しく