Movable Type

ホーム » Movable Type » A-Form » A-Form ドキュメント » A-Formのインストールと初期設定

A-Formのインストールと初期設定

←A-Form ドキュメントTOPに戻る 

目次

インストール方法

1. アークウェブのサイトから 最新バージョンをダウンロード します。

2. ダウンロードファイルを解凍してください。解凍すると以下のディレクトリ、ファイルが展開されます。

  README.txt               <- 念のため、使い始める前にご一読ください。
  mt-static/plugins/AForm/ <- 以下、解凍ファイルの[mt-static]ディレクトリと呼称します。
  plugins/AForm/           <- 以下、解凍ファイルの[pluings]ディレクトリと呼称します。

3. Movable Typeにインストールします。

3-1. Movable Typeをインストールしたディレクトリの[plugins]ディレクトリに、
解凍ファイルの[plugins]ディレクトリ以下をまるごとアップロードしてください。

※[plugins]ディレクトリには不要なファイルを置かないようにしてください。
例えば古いバージョンを plugins/AForm.old/ とバックアップのように置いていると、新旧の両ソースともプラグインとして認識され誤動作のもとになります。

3-2. Movable Typeをインストールしたディレクトリの[mt-static]ディレクトリに、
解凍ファイルの[mt-static]ディレクトリ以下をまるごとアップロードしてください。

※[mt-static]ディレクトリがブログごとにある場合ブログごとに異なる[mt-static]ディレクトリを設けている場合は、それぞれの[mt-static]ディレクトリに、解凍ファイルの[mt-static]ディレクトリをコピーしてください。

4. ファイルのパーミッションを変更します。

4-1. 次のファイルのパーミッションを 755 に設定してください。

  [plugins]/AForm/aform_engine.cgi
  [plugins]/AForm/aform_logger.cgi
  [plugins]/AForm/aform_checker.cgi

※環境によっては777や775に設定する必要があるかもしれません。

4-2. 次のディレクトリのパーミッションを 777 に設定してください。
このディレクトリは、フォームからアップロードした添付ファイル保存先として使われます。

  [plugins]/AForm/data

※クラウド環境では必要ありません。

5. Movable Typeの管理画面にアクセスしてください。
自動的にインストール処理が実行されますので、画面の案内にしたがってインストールしてください。

初期設定

A-Form4 の初期設定

A-Form4からは、A-Form用のjsとcssの読み込みをA-Formテンプレートから切り離し、サイトのテンプレートで読み込むようになりました。
下記を参考に、サイトのヘッダー/フッター等のテンプレートに、A-Form用のjsとcssを読み込むタグを記述してください。

aform_jsのインストール

  1. MTの管理画面に システム管理者権限 でログインします
  2. システムメニュー＞Aform＞aform_jsをインストール をクリックすると、システム配下にテンプレートモジュール「aform_js」がインストールされます
    aformjsのインストールメニュー.png
    ※インストール後は、テンプレート管理画面に遷移します
    ※aform_jsには、A-Formで使用するJavascriptを読み込む記述がまとまっています。
※aform_jsの内容
＜MTStaticWebPath setvar="static_uri"＞
＜mt:unless name="exclude_jquery_js"＞＜script src="＜$mt:var name="static_uri"$＞plugins/AForm/js/jquery.js" type="text/javascript"＞＜/script＞＜/mt:unless＞
＜script src="＜$mt:var name="static_uri"$＞plugins/AForm/js/jquery.validate.js" type="text/javascript"＞＜/script＞
＜script src="＜$mt:var name="static_uri"$＞plugins/AForm/js/jquery.cookie.js" type="text/javascript"＞＜/script＞
＜script type="text/javascript"＞jQuery.query = { numbers: false };＜/script＞
＜script src="＜$mt:var name="static_uri"$＞plugins/AForm/js/jquery.query.js" type="text/javascript"＞＜/script＞
＜script src="＜$mt:var name="static_uri"$＞plugins/AForm/js/jquery-ui.min.js" type="text/javascript"＞＜/script＞
＜mt:if name="aform_lang" eq="ja"＞
＜script src="＜$mt:var name="static_uri"$＞plugins/AForm/js/jquery.ui.datepicker-ja.js" type="text/javascript"＞＜/script＞
＜/mt:if＞
＜script src="＜$mt:var name="static_uri"$＞plugins/AForm/js/aform.js" type="text/javascript"＞＜/script＞

テンプレートの設定

<mt:include module="aform_js">

※埋め込むページですでにjQueryを読み込んでいる場合、jQuery同士で衝突が起ため、この場合は以下の記述にすることで、aform_jsでのjquery.jsの読み込みをしないようにできます

<mt:include module="aform_js" exclude_jquery_js="1">

※A-Memebrテーマを適用している場合は、上記テンプレートの設定は不要です（テーマにて対応済みのため）

<mt:include module="aform_js" aform_lang="ja">

<mt:include module="aform_js" exclude_jquery_js="1" aform_lang="ja">

<link rel="stylesheet" type="text/css" href="<$mt:StaticWebPath$>plugins/AForm/style.css" />
<link rel="stylesheet" type="text/css" href="<$mt:StaticWebPath$>plugins/AForm/jquery-ui.min.css" />

MTタグの編集（A-Form3、A-Form4 共通）

1. MTの管理画面に テンプレート編集可能な権限でログイン してください。

2. テンプレート内の次のタグに「aform="1"」属性を追記してください。

例）
<$MTEntryBody$> → <$MTEntryBody aform="1" $>

これらのタグは次の画面遷移でアクセスされるテンプレートに記述されています。

<$MTPageBody$>と<$MTPageMore$>の場合、

  対象のブログを選択->
    メニューから[デザイン] -> [テンプレート]を選択->
      [ウェブページ]を選択 -> 
        テンプレートを修正

<$MTEntryBody$>と<$MTEntryMore$>の場合、

  対象のブログを選択->
    メニューから[デザイン] -> [テンプレート]を選択->
      [ブログ記事]を選択   -> インクルードテンプレート一覧から[ブログ記事の詳細]を選択
        テンプレートを修正

※MTの任意のテンプレートをヘッダ、フッタに利用したい場合は以下をご参照ください。
任意のテンプレートをヘッダ、フッタに利用する | 「A-Form」ドキュメント

動作確認レポート設定

※フォームの安定稼動、および障害発生時にこれをすみやかに検出するために
以下の設定を行って 動作確認レポート機能をご利用されることを強くおすすめ します。

1. MTの管理画面に システムメニューにアクセス可能な権限でログイン してください。

2. システムメニューの[プラグイン]にアクセスしてください。

3. インストールしているプラグインの一覧が表示されます。一覧から、
[A-Form 3.x.x]または[A-Form 4.x.x]を選び、[設定]をクリックします。　※ 3.x.x、4.x.x はインストールされているバージョンになります

4. サーバでcronが使えない環境の場合

5. [変更を保存]ボタンをクリックして、以上の設定を保存します。

6. cronが使える環境を利用している場合 

   0 0 * * * perl [plugins]/AForm/aform_checker.cgi cron
※ [plugins]のパスはインストールした環境に合わせて変更してください。
たとえば、[plugins]ディレクトリが/var/www/cgi-bin/mt/plugins/の場合は
下記のように設定します。また、cronで起動するときは最後にパラメータ「cron」を渡します。
0 0 * * * perl /var/www/cgi-bin/mt/plugins/AForm/aform_checker.cgi cron

動作環境（インストール環境）

以下の環境で動作確認を行っております。

デザイン変更

CSSを切り替えることで、デフォルトデザインから変更することができます。

A-Form 3.1から 2つのA-Formテーマをmt-staticに追加しています。
それを読み込むようにすることで見た目の変更が可能です。

A-Formテーマ比較画像
クリックで拡大(1190×1330px)

1. CSSをテンプレートに追記します。

対象のブログを選択->
メニューから[デザイン] -> [テンプレート]を選択->
[HTMLヘッダー]を選択 ->
下記のように追記 (4行目)
<meta http-equiv="Content-Type" content="text/html; charset=<$mt:PublishCharset$>" />
<meta name="generator" content="<$mt:ProductName version="1"$>" />
<link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" />
<link rel="stylesheet" href="<$MTStaticWebPath$>plugins/AForm/theme/theme01.css" type="text/css" />
<link rel="start" href="<$mt:BlogURL$>" title="Home" />
<link rel="alternate" type="application/atom+xml" title="Recent Entries" href="<$mt:Link template="feed_recent"$>" />

<$mt:CCLicenseRDF$>

2. [変更を保存]ボタンをクリックして、再構築します。

3. このテーマをさらにカスタマイズするには、自作のスタイルシートをテーマ用CSSの後に追加で読み込んでください。

<link rel="stylesheet" href="<$MTStaticWebPath$>plugins/AForm/theme/theme01.css" type="text/css" />
<link rel="stylesheet" href="/common/css/form.css" type="text/css" />

A-Formのインストールと初期設定 についてのお問い合わせはこちら

お問い合わせ

多機能なフォームプラグイン A-Form

機能追加プラグイン

会員制サイト構築プラグイン A-Member

予約サイト構築プラグイン A-Reserve

アークウェブのMovable Typeブログ

→アークウェブのMovable Typeブログ

MTによるサイト構築はこちら

アークウェブはシックス・アパート ProNet Japanのメンバーです。
Movable Typeなどシックス・アパート製品のシステム導入や構築を手がけるパートナー企業のネットワークに参加しています。

MovableTypeを使ったソリューションのご紹介はこちら。

サービスおよびソリューション一覧

サービス
Zen Cartソリューション
Movable Typeソリューション
その他ソリューション
アークウェブのCSR(企業の社会的責任)

最新情報・投稿をチェック

このページのトップに戻る

Photo by ....

Powered by Movable Type Pro