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

登録日を変更不可能にする方法(日付を自動的に入力する方法)

最終更新日: 2012-01-09

概要

「すぐ使えるCGI」の管理画面からの登録時に作業するユーザに日付を変更させない方法を紹介します。
デザインテンプレートの編集だけで設定できます。

以下のいずれかの設定が可能です。

  1. 新規登録日を自動入力して固定(編集時にも日付が変わらない)
  2. 最新の編集日を自動入力

実装イメージ

新着情報更新時に日付を固定-すぐ使えるCGI

対象

全製品

A. 新規登録日を自動入力して固定する方法

新規登録日を自動入力して固定するには、管理画面用テンプレート templates/admin/2.html を編集して下さい。
いったん登録後違う日に編集を行った場合でも日付を登録日に固定できます。

入力画面 templates/admin/2.html の編集

disabled 属性を付けた <input> フィールドを表示用に追加し、既存のフィールドは隠し項目に変更します。
下記の青字部分を変更して下さい。

入力画面 templates/admin/2.html編集例:編集前

<TR>
<TH CLASS="titem">日付※</TH>
<TD CLASS="contents">
<INPUT name="yyyy" type="text" value="%_yyyy_%" size="8" maxlength="4" onFocus="set_imemode(this, 0)">
年 
<INPUT name="mm" type="text" value="%_mm_%" size="4" maxlength="2" onFocus="set_imemode(this, 0)">
月 
<INPUT name="dd" type="text" value="%_dd_%" size="4" maxlength="2" onFocus="set_imemode(this, 0)">
日 (半角。年は西暦 4 桁。)
</TD>
</TR>

入力フィールド(type="text")の name 属性は 「4show」を付記して変更した上、disabled 属性を付けます。
もともとあった日付フィールド(name 属性が「yyyy」「mm」「dd」のもの)は隠しフィールド(type="hidden")に変更します。

入力画面 templates/admin/2.html編集例:編集後

<TR>
<TH CLASS="titem">日付※</TH>
<TD CLASS="contents">
<INPUT name="yyyy4show" type="text" value="%_yyyy_%" size="8" maxlength="4" disabled>
<INPUT TYPE="hidden" name="yyyy" value="%_yyyy_%">
年 
<INPUT name="mm4show" type="text" value="%_mm_%" size="4" maxlength="2" disabled>
<INPUT TYPE="hidden" name="mm" value="%_mm_%">
月 
<INPUT name="dd4show" type="text" value="%_dd_%" size="4" maxlength="2" disabled>
<INPUT TYPE="hidden" name="dd" value="%_dd_%">
日 (半角。年は西暦 4 桁。)
</TD>
</TR>

テンプレートのアップロード

変更が終わったら編集した以下のテンプレートをサーバに上書きアップロードして下さい。

templates/admin/2.html

アップロード後管理画面にアクセスすれば、変更が反映されています。

B. 最新の編集日を自動入力する方法

最新の更新日を自動入力するには、管理画面用テンプレート templates/admin/2.html を編集して下さい。
最後に編集作業をした日付が自動入力され、ユーザは日付を編集できません。

入力画面 templates/admin/2.html の編集:その1

日付を自動入力するための JavaScript を追加して下さい。
以下の赤字部分が追加です。

入力画面 templates/admin/2.html編集例:編集後

function set_imemode(myobj, mymode){
    switch(mymode){
        case 0: myobj.style.imeMode = "inactive"; break;
        case 1: myobj.style.imeMode = "active"; break;
        default: break;
    }
}
function sprint_d(num){
    if (0 <= num && num <=9){
        return "0"+num;
    } else {
        return num;
    }
}
function set_date(){
    var MyForm = document.getElementById("mainform");
    var TODAY = new Date();
    MyForm.yyyy.value = TODAY.getFullYear();
    MyForm.mm.value = sprint_d(TODAY.getMonth()+1);
    MyForm.dd.value = sprint_d(TODAY.getDate());
    MyForm.yyyy4show.value = MyForm.yyyy.value;
    MyForm.mm4show.value = MyForm.mm.value;
    MyForm.dd4show.value = MyForm.dd.value;
}
// --></script>
</HEAD>

<BODY BGCOLOR="#FFFFFF" onLoad="set_date();hide_format();">
<H1>Webサイト管理ツール</H1>
<H2>%_mode_title_%</H2>

入力画面 templates/admin/2.html の編集:その2

続けて同じファイル templates/admin/2.html を編集します。

disabled 属性を付けた <input> フィールドを表示用に追加し、既存のフィールドは隠し項目に変更します。
下記の青字部分を変更して下さい。

入力画面 templates/admin/2.html編集例:編集前

<TR>
<TH CLASS="titem">日付※</TH>
<TD CLASS="contents">
<INPUT name="yyyy" type="text" value="%_yyyy_%" size="8" maxlength="4" onFocus="set_imemode(this, 0)">
年 
<INPUT name="mm" type="text" value="%_mm_%" size="4" maxlength="2" onFocus="set_imemode(this, 0)">
月 
<INPUT name="dd" type="text" value="%_dd_%" size="4" maxlength="2" onFocus="set_imemode(this, 0)">
日 (半角。年は西暦 4 桁。)
</TD>
</TR>

入力フィールド(type="text")の name 属性は 「4show」を付記して変更した上、disabled 属性を付けます。
もともとあった日付フィールド(name 属性が「yyyy」「mm」「dd」のもの)は隠しフィールド(type="hidden")に変更します。

入力画面 templates/admin/2.html編集例:編集後

<TR>
<TH CLASS="titem">日付※</TH>
<TD CLASS="contents">
<INPUT name="yyyy4show" type="text" value="%_yyyy_%" size="8" maxlength="4" disabled>
<INPUT TYPE="hidden" name="yyyy" value="%_yyyy_%">
年 
<INPUT name="mm4show" type="text" value="%_mm_%" size="4" maxlength="2" disabled>
<INPUT TYPE="hidden" name="mm" value="%_mm_%">
月 
<INPUT name="dd4show" type="text" value="%_dd_%" size="4" maxlength="2" disabled>
<INPUT TYPE="hidden" name="dd" value="%_dd_%">
日 (半角。年は西暦 4 桁。)
</TD>
</TR>

テンプレートのアップロード

変更が終わったら編集した以下のテンプレートをサーバに上書きアップロードして下さい。

templates/admin/2.html

アップロード後管理画面にアクセスすれば、変更が反映されています。

関連リンク

さらに詳しく