logo
home > web > MovableType

MovableTypeの最近のブログ記事

MovableType フォームプラグイン CreamForm その3

5. 入力チェックについて
入力チェックは下記の9つ用意されています。
    email      メール
    tel        電話番号
    zip        郵便番号
    integer    整数
    alphabet   アルファベット
    alphadigit  英数
    uri        URL
    max_length  最大入力字数
    min_length  最小入力字数

フォームの入力値とこの9つの入力チェックを結びつけているのは
 plugins/CreamForm/lib/CreamForm/Cream.pm
のファイルになります。

該当箇所は下記。
use constant RULE => [
  {
    name        => 'email',
    check       => [qw(email not_null)],
    max_length  => undef,
    min_length  => undef,
    label       => 'メールアドレス',
  },
  {
    name => 'name',
    check => [qw(not_null)],
    max_length => 50,
    min_length => 1,
    label       => '名前',
  },
  {
    name => 'type',
    check => [qq(not_null)],
    max_length => undef,
    min_length => undef,
    label       => 'お問い合わせ理由',
  },
  {
    name => 'content',
    check => [qw(not_null max_length)],
    max_length => 200,
    min_length => undef,
    label       => '本文',
  },
];


name フォームテンプレートのnameと紐づきます。
check 9つのうちどのチェックを適用するかを指定します。複数可。
max_length 最大文字数
min_length 最小文字数
label エラー時の項目表示名です。



例としてメールアドレス入力について見てみましょう。
  {
    name        => 'email',          
  →フォームテンプレのnameがemailの入力値について
   判定をすることになります。
    check       => [qw(email not_null)],    
  →9つのチェックのうちemailとnot_nulの判定をします。
    max_length  => undef,         
  →最大値文字数はチェックしません
    min_length  => undef,         
  →最小値文字数はチェックしません
    label       => 'メールアドレス',      
  →エラー時の表示名称は「メールアドレス」と表示されます
  },


上記の例でフォームのメールアドレスを必須項目から任意入力にする場合は
not_nullを削除してしまえば良い訳です。

また最大文字数を30文字までにするなら
    max_length  => 30,
とすればよいです。         



6. 項目の追加や拡張について
準備中。




MTフォームプラグインCreamFormの使用方法その2です。


3. テンプレートの設置
設定が完了したら、フォームのテンプレートを設置しましょう。
インデックステンプレートに3つのテンプレートを追加します。どのウェブサイト、ブログのインデックステンプレートでもかまいません。

・CreamForm入力
・CreamForm確認
・CreamForm完了

※テンプレートの名前を必ず上記の名前にしてください。上記のテンプレート名でフォームのテンプレートを判別していますので間違えないようにしてください。


各テンプレートに下記のMTタグ、HTMLタグを挿入してください。
スタイルやHTMLタグはお好みで変更してください。あくまでサンプルです。


formのactionにはドキュメントルートからCreamFormプラグインのcm.cgiへ送信してください。
本サイトでは下記のサンプルの通りです。
hiddenで__modeの値も渡しています。こちらには確認なのか完了なのかを判別するための値が入っています。


○ CreamForm入力

<p class="error">
    <mt:Loop name="errors">
    <mt:getvar name="__value__{label}" /><br />
    </mt:Loop>
</p>

<form action="/mt/plugins/CreamForm/cm.cgi" method="post">
    <input type="hidden" name="__mode" value="confirm">
            <table class="tableCreamForm" cellspacing="1">
                <tr>
                    <th>名前</th>
                    <td>
                        <input id="mail_author" name="name" size="30" 
value="<mt:var name="param" key="name">" style="width:90%;" />
                    </td>
                </tr>
                <tr>
                    <th>メールアドレス</th>
                    <td>
                        <input id="mail_email" name="email" size="30" 
value="<mt:var name="param" key="email">" style="width : 90%;" />
                    </td>
                </tr>
                <tr>
                    <th>お問い合わせ理由</th>
                    <td>
                    <select name="type" >
<option value="">選択する</option>
<option value="アプリについて">サイトについて</option>
<option value="MovableTypeについて">MovableTypeについて</option>
<option value="Perlについて">Perlについて</option>                    
<option value="イラスト・デザインについて">イラスト・デザインについて</option>
<option value="その他について">その他について</option>
                    </select>                      
                    </td>
                </tr>
                <tr>
                    <th>本文</th>
                    <td>
 <textarea id="mail_text" name="content" rows="15" 
cols="20" style="width : 90%;">
<mt:var name="param" key="content">
 </textarea>
                    </td>
                </tr>
            </table> <br />
            <input type="submit" value="確認">
        </form>



○ CreamForm確認
<table class="tableCreamForm" cellspacing="1">
    <tr>
        <th>名前</th>
        <td>
        <mt:var name="name" />
        </td>
    </tr>
    <tr>
        <th>お問い合わせ理由</th>
        <td><mt:var name="type" /></td>
    </tr>
    <tr>
        <th>メールアドレス</th>
        <td><mt:var name="email" /></td>
    </tr>
    <tr>
        <th>本文</th>
        <td><mt:var name="content"  remove_html="1" nl2br="xhtml"/></td>
    </tr>
</table>

<form action="/mt/plugins/CreamForm/cm.cgi" method="post">
    <input type="hidden" name="__mode" value="finish">
    <input type="hidden" name="name" value="<mt:var name="name">">
    <input type="hidden" name="type" value="<mt:var name="type">">
    <input type="hidden" name="email" value="<mt:var name="email">">
    <input type="hidden" name="content" value="<mt:var name="content">">
    <input type="hidden" name="token" value="<mt:var name="token">"><br />
    <a href="#" onClick="history.back(); return false;" >戻る</a>
    <input type="submit" value="送信する"/>
</form>


○ CreamForm完了
完了フォームには完了のメッセージを入力してください。





4. 管理画面について
入力されたデータはすべてDBに保存されます。保存されたデータを確認するには管理画面のシステムの左メニューに追加されお「お問い合わせ」メニューにアクセスしてください。
otoiawase.jpg


送信された一覧が表示されます。

削除の場合はチェックボックスにチェックを入れて削除ボタンを押してください。
CSVダウンロードを押すとCSVファイルがダウンロードされます。文字コードはShit-jisになってます。

また詳細を押すと内容が全て表示されます。




MovableType フォームプラグイン CreamForm

MovableType フォームプラグインを作ってみました。 
MT plugin Creamシリーズ第一弾 CreamForm です。

Plugin作成を勉強しようと思い、どうせ作るなら企業サイトでも使えるものにしたいということでお問い合わせフォームプラグインを作成してみました。ソースコードが汚い部分がありますが(特にテンプレ周り)後々修正して行きます。

基本的に使用は無料です。
詳しくはプラグインのご利用についてをお読みください。


CreamFormの主な機能については下記の通りです。


基本機能について
 ・フォーム機能(入力チェック、リロード対策)
 ・メール送信機能
 ・メール送信テンプレート編集機能
 ・DBデータ保存機能
 ・データ参照機能
 ・CSVダウンロード機能

デフォルトで用意されているフォーム入力項目は限られていますが、
プラグインをインストールする前にファイルに修正を加えておけば追加が可能です。


○ダウンロード
CreamForm.1.0.zip(MT5で動作します。MT4では動作未検証です。)
本プラグインをご利用される方は必ずプラグインのご利用についてをお読みください。

フォームについては、本サイトのお問い合わせフォームがCreamFormでできているので
必要があれば確認して頂ければと思います。



使用方法について
 1. インストールについて
 2. プラグインの設定
 3. テンプレートの設置
 4. 管理画面について
 5. 入力チェックの変更について
 6. 項目の追加や拡張について


1. インストールについて

まずはプラグインをダウンロードしてプラグインディレクトリにアップロードしましょう。

次にCreamFormディレクトリ配下にあるdataディレクトリのパーミッションを777に
cm.cgiのパーミッションを755にして実行権限を与えておきます。

管理画面にアクセスするとアップグレードが開始され、スキーマが拡張されます。
up2.png


databaseupgrade.jpg


最初から用意されているカラムは下記です。

name 名前
email メールアドレス
type お問い合わせ理由
content お問い合わせ内容

他にも項目が必要な場合は、6. 項目の追加や拡張についてを参照してください。


2. プラグインの設定
管理画面にログインして、システムからプラグインの一覧を開きましょう。
CreamFormが表示されているはずです。
sysplug.jpg


設定を開いて必要情報を入力しましょう。
sysmailnyuuryoku.jpg

管理画面で設定するのは自動返信メールの内容になります。
メール本文ではタグを使うことで、フォームに入力された情報を埋め込むことができます。

・From
 自動返信メールのFromです。必ず実在するアドレス、かつ自分で運用しているアドレスにしてください。

・Cc
 Ccで入力されたアドレスにメールを送信します。

・Bcc
 Bccで入力されたアドレスにメールを送信します。

・メールタイトル
 自動返信メールのタイトルになります。

・メール本文
 自動返信メールの本文になります。フォームで入力された値を挿入するには下記のタグを使用してください。
  {name} 名前
  {email} メールアドレス
  {type} お問い合わせ内容
  {content} 内容





プラグインのご利用について

本サイト内で公開配布しているプラグインはmarooonの著作物です。
これらの著作物は自由にご利用頂けますが,必ず下記の注意事項をお読みの上ご利用ください。
なお,下記の各項に同意頂けない場合はご利用できません。

著作権はmarooonが保有しています。
原則として特に指定がない限り、個人・法人を問わず無償でご利用頂けます。

対価を設定して販売したり、サポートを販売したり、商品に組み込んで製品の一部として販売することはできません。
ただし特に指定がない限り、制作会社などの代理者が納品物に組み込んで利用することができますが、プラグインに対価を設定することはできません。

公開配布されているプラグインやテンプレートを利用された結果のデータ破損、システム破損などあらゆる損害や不具合はこれを補償いたしません。
利用者の責任においてご利用ください。

サポート業務は行っておりませんが、できる限り質問等にはお答え致します。

これらの著作物の二次著作物を再配布することはできません。

これらの著作物の著作権表示を改変しないでください。
MTをインストールしようとファイルを設置して管理画面にアクセスしたら
Got an error: Can't locate object method "install_properties" via package "MT::Tag" (perhaps you forgot to load "MT::Tag"?)
とエラーが出たのでパーミッションか?と思ったらperlのバージョンでした。

mt-check.cgiで確認したところ何やらバージョンがダメっぽいこと言われたので
perl5.8.0を5.8.8にしたら大丈夫でした。

必要インストール環境と、ブラウザ動作環境 を見たら
Perl 5.8.1 以上と書かれてました。よかった。
管理画面にいつものようにBasic認証をかけていたら検索にも認証がかかっていた!
どうやらコメントやトラックバックもだ。。

検索用のCGIがmt.cgiと同ディレクトリにあるためだ。
mt.cgiを介した時だけbasic認証をかけたい。

では.htaccessの設定はどのようにしたらよいか?
下記の通りです。

<Files mt.cgi>
AuthUserFile /path/to/.htpasswd
AuthGroupFile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic
require valid-user
order deny,allow
</Files>

こんな風に書いてやることでmt.cgiを介する管理画面には認証がかかります。
これで検索したときにアクセスするmt-search.cgi等は大丈夫!

参考:
http://hyper-text.org/archives/2008/07/mt_basic_authentication.shtml
MTテンプレート内で変数にMTタグ情報を格納するときの方法が2種類ありました。
今まではSetVarBlockとか一生懸命使ってたけどモディファイアが存在してたのね。。


こう書いていたものが、
<MTSetVarBlock name="last5">
<MTEntries lastn="5">
    <MTEntryTitle>
</MTEntries>
</MTSetVarBlock>

↓↓↓

servarモディファイアを使ってこう書ける
<MTEntries lastn="5" setvar="last5">
    <MTEntryTitle>
</MTEntries>

ソースが汚くならずに済みますね!

参考:
http://www.movabletype.jp/documentation/appendices/modifiers/setvar.html


MTの動きが重たいので、高速化してみる。手始めにFastCGIを導入して動かしてみる。

まずはCPANでモジュールをインストール

#perl -MCPAN -e shell
> install FCGI
> install CGI


httpd-develのインストールをyumコマンドで行います

# yum install httpd-devel



FastCGIライブラリ(fcgi)のインストール

以下のページからダウンロードを行います。
http://www.fastcgi.com/

ダウンロード
# wget http://www.fastcgi.com/dist/fcgi-2.4.0.tar.gz

tarballの伸張
# tar zxvf fcgi-2.4.0.tar.gz -C /usr/local/src
# cd /usr/local/src/fcgi-2.4.0

configureの実行
# ./configure

make, make installの実行
# make
# make install


mod_fcgidのインストール

以下のページからダウンロードを行います。
http://httpd.apache.org/mod_fcgid/

ダウンロード
# wget http://ftp.riken.jp/net/apache/httpd/mod_fcgid/mod_fcgid-2.3.5.tar.gz

tarballの伸張
# tar zxvf mod_fcgid-2.3.5.tar.gz -C /usr/local/src/
# cd /usr/local/src/mod_fcgid-2.3.5/

DSOとしてインストールするためにconfigure.apxsを実行します。
# ./configure.apxs

make, make installの実行
# make
# make install


FastCGIの設定

設定ファイルを新しく作成します。
# vi /etc/httpd/conf.d/fcgid.conf

設定ファイル(通常)
<IfModule mod_fcgid.c>
    AddHandler fcgid-script .fcgi
    SocketPath /tmp/fcgid_sock/
    IPCConnectTimeout 20
    MaxProcessCount 8
    DefaultMaxClassProcessCount 2
    TerminationScore 10
    SpawnScore 80
    IdleTimeout 300
</IfModule>

設定ファイル(make installで正しく設定出来なかった場合)
通常はmake install時に自動的に/etc/httpd/conf/httpd.confにmod_fcgid.soの情報が追記されますが、追記されない場合は下記のように明示的にLoadModule行を指定してください。

LoadModule fcgid_module /usr/lib/httpd/modules/mod_fcgid.so

<IfModule mod_fcgid.c>
    AddHandler fcgid-script .fcgi
    SocketPath /tmp/fcgid_sock/
    IPCConnectTimeout 20
    MaxProcessCount 8
    DefaultMaxClassProcessCount 2
    TerminationScore 10
    SpawnScore 80
    IdleTimeout 300
</IfModule>


MTの設定方法

設定をMTディレクトリ内だけで行う方法

「MTの設定方法(その1)」と違い、Apacheの設定変更を必要しないという利点があります。

FastCGIでMTを動かすため、拡張子を"cgi"から"fcgi"に変更します。
# cd /var/www/cgi-bin/mt/
# cp -a mt.cgi mt.fcgi
# cp -a mt-comments.cgi mt-comments.fcgi
# cp -a mt-tb.cgi mt-tb.fcgi
# cp -a mt-search.cgi mt-search.fcgi
# cp -a mt-ftsearch.cgi mt-ftsearch.fcgi
# cp -a mt-cp.cgi mt-cp.fcgi (Community Solution を利用する場合)

FastCGIで起動するようにMTの設定ファイル「mt-config.cgi」を修正する必要があります。
# vi /var/www/cgi-bin/mt/mt-config.cgi

mt-config.cgiの最後に追加してください。
AdminScript mt.fcgi
CommentScript mt-comments.fcgi
TrackbackScript mt-tb.fcgi
SearchScript mt-search.fcgi (もしくは mt-ftsearch.fcgi)
ViewScript mt-view.fcgi
CommunityScript mt-cp.fcgi (Community Solution を利用する場合)
httpdサービスの再起動

設定の変更とモジュールの読み込みを行うためhttpdをリスタートします。
# service httpd restart

以上

MTでSEO対策をしましょう!
Googleにページを早くインデックスさせるためにsitemap.xmlを登録です。

まずはGoogleのWebMasterToolへアクセスしてアカウントを取得しましょう。
サイトを追加して、sitemap.xmlを登録します。

全てのブログをsitemap.xmlに追加したいので、MT上のウェブサイトのインデックステンプレートで
XMLを作成します。設定は下記。ファイル名はここではsitemap.xmlとしています。
(アーカイブのページを含めたい場合やプライオリティを変更した場合は自分で追加してー)


<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.google.com/schemas/sitemap/0.84" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://www.google.com/schemas/sitemap/0.84 
http://www.google.com/schemas/sitemap/0.84/sitemap.xsd">
<MTMultiBlog blog_ids="all">
<MTEntries>
<url>
    <loc><MTEntryPermalink></loc>
    <changefreq>always</changefreq>
    <lastmod><MTEntryDate format="%Y-%m-%d">T00:00:00+00:00</lastmod>
    <priority>1.0</priority>
</url>
</MTEntries>
</MTMultiBlog>
</urlset>

MTMultiBlogでウェブサイト配下にある全てのブログから記事をひっぱって来ています。

loc:ページのURL
changefreq:更新頻度(always、hourly、daily、weekly、monthly、yearly、never)
lastmod:最終更新日時
priority:他のージと比較して優先度を、0.0~1.0までの値で設定

適当ですいませんが参考まで


MTの管理画面にテキストを追加したり、修正を加えたい場合、どのテンプレートファイルを修正して良いかよくわかりませんでした。

そんな時は管理画面で表示に使用されているテンプレート名をフッターに表示させておきましょう。
そうすればどのテンプレートを修正して良いか簡単に見つけることができます。

テンプレート名を表示させるにはlib/MT.pmの下記の部分を修正します。


中略・・・
sub load_tmpl {
    my $mt = shift;
    if ( exists($mt->{component}) && ( $mt->{component} ne 'Core' ) ) {
        if (my $c = $mt->component($mt->{component})) {
            return $c->load_tmpl(@_);
        }
    }

    my($file, @p) = @_;
    my $param;
    if (@p && (ref($p[$#p]) eq 'HASH')) {
        $param = pop @p;
    }
    my $cfg = $mt->config;
    require MT::Template;
    my $tmpl;
    my @paths = $mt->template_paths;

    my $type = {'SCALAR' => 'scalarref', 'ARRAY' => 'arrayref'}->{ref $file}
        || 'filename';
    $tmpl = MT::Template->new(
        type => $type, source => $file,
        path => \@paths,
        filter => sub {
            my ($str, $fname) = @_;
            if ($fname) {
                $fname = File::Basename::basename($fname);
                $fname =~ s/\.tmpl$//;
                $mt->run_callbacks("template_source.$fname", $mt, @_);
            } else {
                $mt->run_callbacks("template_source", $mt, @_);
            }
            return $str;
        },
        @p);
    return $mt->error(
        $mt->translate("Loading template '[_1]' failed.", $file)) unless $tmpl;
    $mt->set_default_tmpl_params($tmpl);
    $param->(template_file) = $file;
    $tmpl->param($param) if $param;
    $tmpl;
}
・・・中略

赤字部分を追記しましょう。
さらに、tmpl/cms/include/footer.tmplに赤字部部を追記。

中略・・・
            <mt:include name="include/copyright.tmpl">
            <p id="version">
                <strong><__trans phrase="<a href="[_1]"><mt:var name="mt_product_name"></a> version [_2]" params="<mt:var name="portal_url">%%<mt:var name="mt_version_id">"></strong>
<mt:if name="packs_installed">
                <__trans phrase="with">: <mt:loop name="packs_installed" glue=", "><a href="<__trans phrase="http://www.sixapart.com/movabletype/">pack/<mt:var name="id">/"><mt:var name="label" escape="html"> <mt:var name="version" escape="html"></a></mt:loop>
</mt:if>
            <MTVar name="template_file">
            </p>
        </div><!-- /footer -->
・・・中略

これでフッターにテンプレート名が表示されるはずです。

JavaScript Journal | JavaScript総合情報サイト

このアーカイブについて

このページには、過去に書かれたブログ記事のうちMovableTypeカテゴリに属しているものが含まれています。

前のカテゴリはMacBookAirです。

次のカテゴリはOpenCVです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。