EasyMail

概要

EasyMailは、MITソフトウェアライセンスの下で使用できます。

DownLoad »

要件

下記の条件で動作検証されています

サーバー

Apache2.4.6
PHP7.2.29
MySQL5.6
laravel6.x
HTTPS 対応

ブラウザー

Chrome last major version
Firefox last major version
Safari last major version
Edge last major version

セットアップ

  • パッケージをダウンロードして解凍。
  • サーバー上に EasyMail用のデータベースと、そのデータベースへの全アクセス権・編集権を持つ MySQL(あるいは MariaDB)のユーザーを作成。
  • サーバー上の任意の場所にEasyMailファイルを設置。
    • ドメインルート (http://example.com/ など) に EasyMail を置きたいときは、解凍した EasyMail ディレクトリの中身 (EasyMail ディレクトリ自体を除く全ファイル) をサーバーのルートディレクトリへアップロードします。
    • ウェブサイト上の EasyMail 用のサブディレクトリ (http://example.com/inquiry など) に設置したいときは、サーバー上で inquiry ディレクトリを作成し、解凍した EasyMail パッケージの中身をディレクトリにアップロードします。
      ※ 注意
      ・お使いのFTPクライアントにファイル名を小文字に変換する機能がある場合は、それが無効になっていることを確認してください。
      ・contactというディレクトリにした場合、SPAMメールが届きやすくなる事例が発生していますので、その他のディレクトリ名をおすすめします。
  • ブラウザで EasyMail を設置したURLにアクセスし、インストールスクリプトを実行。
    • EasyMail をルートディレクトリに設置した場合: http://example.com
    • inquiry というサブディレクトリに設置した場合: http://example.com/inquiry
以上です!これで EasyMail はインストールされたはずです。

管理画面URL

EasyMail をルートディレクトリに設置した場合: http://example.com/admin
inquiry というサブディレクトリに設置した場合: http://example.com/inquiry/admin

ファイル構成

inquiryフォルダにEasyMailを設置した場合には、下記のようなフォルダとファイルの構成になります。
以降は、inquiryフォルダに設置したと仮定して説明をしていきます。
ドキュメントルートなどに設置した場合は、適宜読み替えてください。
    
    inquiry/
    ├── em_laravel/
    │   ├── app/
    │   ├── bootstrap/
    │   ├── config/
    │   ├── database/
    │   ├── resources/
    │   ├── routes/
    │   ├── storage/
    │   └── vendor/
    ├── form_item_image/
    ├── .htaccess
    ├── index.php
    ├── README.md
    └── robots.txt
  

テーマ

EasyMailには、いくつかのデフォルトテーマがあります。
デフォルトテーマをそのまま利用し、デザインを組み込むこともできますが、デフォルトのテーマをコピーしオリジナルのテーマを編集する手順を説明します。
  • inquiry/em_laravel/views/theme/grayのフォルダをコピーし、themeフォルダにorignalと名前を付けてペーストします。
  • 作ったorignalフォルダをサーバーのinquiry/em_laravel/views/theme/にアップロードします。
  • 管理画面にログインし、「フォーム作成」をクリックします。
  • 画面内の「テーマ」のなかに、作ったorignalというテーマが表示されていますので、選択してフォームを作成します。

上記の内容でサーバーにテーマを設置した場合は下記のようなフォルダ構成になっています。

    
    inquiry/
    └── em_laravel/
        └── resources/
           └── views/
              └── theme/
                  ├── orignal/
                  ├── gray/
                  ├── one_column/
                  ├── two_column01/
                  └── two_column02/
  

デザイン組込とテーマ内ファイル

テーマ内のファイル構成は下記のようになっています。
それぞれの役割を説明します。
各ファイル内で使用している変数の詳細は「テーマファイル内の変数」を参考にしてください。

    
    ...
    └── theme/
        ├── orignal/
        │    ├── css/
        │    ├── images/
        │    ├── js/
        │    ├── manual_example/
        │    ├── denied_ip.blade.php
        │    ├── footer.blade.php
        │    ├── form.blade.php
        │    ├── header.blade.php
        │    ├── hidden.blade.php
        │    ├── index.blade.php
        │    ├── layout.blade.php
        │    ├── reply_mail.blade.php
        │    ├── reply_mail_for_admin.blade.php
        │    ├── screenshot.png
        │    └── thanks.blade.php
        ├── gray/
        ├── one_column/
        └── ...
  
ファイル名 概要
denied_ip.blade.php フォーム作成・編集時に「拒否IP・ホスト」を設定することができます。
「拒否IP・ホスト」に記載された、IP・ホストからアクセスがあったときには、フォームの表示を拒否しますが、
その際に表示される内容をHTML形式で記述しておきます。
footer.blade.php フッター部分のデザインをHTML形式で記述します。
form.blade.php フォームタグ内のHTMLを編集できます。
header.blade.php ヘッダー部分のデザインをHTML形式で記述します。
hidden.blade.php フォームが存在しない、もしくはフォームが一時的に非表示状態の時に、表示する内容をHTML形式で記述します。
index.blade.php Laravelから呼び出される最初のテーマファイルです。 layout.blade.phpとform.blade.phpを読み込んでいます。
layout.blade.php HTMLソースコードのheadタグ内を変更するときには、このファイルを編集してください。
デフォルトでいくつかのCSS、JSなどが読み込まれていますが、必要に応じて変更することができます。
新たにCSS、JSを読み込む際には、

<link href="{{ $data->theme_path }}css/style.css"/>

のように、{{ $data->theme_path }}をつけることで、テーマフォルダ内のフォルダを指定することができます。
reply_mail.blade.php フォームから送信された際に、自動返信するメールの内容を記述します。
reply_mail_for_admin.blade.php フォームから送信された際に、管理者に自動返信するメールの内容を記述します。
screenshot.png 管理画面内に表示する、テーマの画像です。
thanks.blade.php フォーム送信完了後のサンクスページの内容をHTML形式で記述します。

jquery.emform.jsの役割とオプション

デフォルトのテーマの中に js/jquery.emform.jsというファイルがあります。
このファイルは、フォームの動作にかかわっています。
form.blade.phpの中で、呼び出されています。
    $ (document).ready (function() {
      $ (".js_main_form").emform ({
        form_item: @json($form_items),
        file_limit_error_msg: '{{__("validation.js_file_limit_error_msg")}}',
        file_extension_error_msg: '{{__("validation.js_file_extension_error_msg")}}',
        input_error_msg: '{{__("validation.js_input_error_msg")}}',
        top_error_msg_view_flag: false
      });
    });
起動時にオプションを付与することで、フォームの表示内容を変更することができます。
オプション一覧は下記を参考にしてください。
オプション 概要 デフォルト値
top_error_msg_view_flag trueとすることで、入力エラー時に、ページ上部にエラーメッセージを表示させることができます。 true
input_error_msg 入力エラー時に、ページ上部のエラーメッセージを変更できます。
(例)input_error_msg: '入力内容をご確認ください',
"Error. Please confirm your entry."
file_limit_error_msg 添付ファイルの容量制限を超えた時の、ページ上部のエラーメッセージを変更できます。 "Check the file size."
file_extension_error_msg 添付ファイルの拡張子が違っていた時の、ページ上部のエラーメッセージを変更できます。 "Check the file extension."
conf_btn_class 確認画面へのボタンのclass名を変更できます。 ".js_conf_btn"
send_btn_class 送信ボタンのclass名を変更できます。 ".js_send_btn"
input_control_class フォームが入力状態の時に表示され、確認画面の時に非表示になるclass名を変更できます。 ".js_input_control"
conf_control_class フォームが確認画面の時に表示され、入力状態の時に非表示になるclass名を変更できます。 ".js_conf_control"
zip_class 郵便番号から住所を自動表示させる為の、郵便番号入力のclass名を変更できます。 ".js_zip"
pref_class 郵便番号から住所を自動表示させる為の、都道府県選択のclass名を変更できます。 ".js_pref"
address_class 郵便番号から住所を自動表示させる為の、住所入力のclass名を変更できます。 ".js_address"
input_error_color 入力エラー時の入力フォームの色を指定できます。 "#fff0f5"
input_init_color 入力状態の時の入力フォームの色を指定できます。 "#ffffff"
scroll_to 「確認画面へ」のボタンがクリックされた時と、確認画面で「戻る」がクリックされた時のスクロール位置を指定できます。
スクロールしたい位置にのjqueryのセレクターを指定してください。 (例)"#hoge" ".fuga" "h1" "h2"など
"form"
block 入力エラー時に、ページ上部のエラーメッセージのCSSを指定できます。
(例)
block: {
  width: "50%",
  top: "30px",
  left: "25%",
  color: "#fff",
  background_color: "darkgray",
},
block: {
  width: "90%",
  height: "auto",
  top: "10px",
  left: "5%",
  padding: "12px",
  color: "#dc143c",
  background_color: "#f8d7da",
  border_color: "#dc143c",
  border_width: "1px",
  border_radius: "3px",
  font_weight: "nomal",
  opacity: 1.0
},

テーマファイル内の変数

EasyMailのテーマファイルはbladeファイルで構成されています。
各bladeフィアル内で利用している、変数を説明します。

変数名 説明
$choices 「項目登録・編集」で「フォームの種類」にラジオボタン、チェックボックスを選択したときに入力する「選択肢」が配列で入っています。
$choice->image $choicesの中身です。 「選択肢」入力の際に画像を選択すると、その画像ファイル名が入っています。
ループの中で利用してください。
        
        @foreach($choices as $choice)
          @if($choice->image)
            <img src="{{ asset('form_item_image/'.$choice->image) }}" class="img-fluid choice_img"/>
@endif @endfor
$choice->label_text $choicesの中身です。 「選択肢」入力の際に入力したテキストが入っています。
ループの中で利用してください。
        
        @foreach($choices as $choice)
          {{$choice->label_text}}
        @endfor
        
$data->thanks_message 「フォーム作成」画面の「最終画面のお礼文」に入力した文字が入っています。
下記の例のように使用することでHTMLが利用できます。
        
        {!! $data->thanks_message ? $data->thanks_message : "" !!}
        
$data->theme_name テーマを保存しているフォルダ名が入っています。
ここまでの説明の流れですと、inquiryが入っています。
$data->theme_path テーマまでのパスが入っています。
layout.blade.phpなどでCSSファイルなどをよみこむときに利用できます。
下記の例では自身のテーマフォルダ内のCSSフォルダのstyle.cssを読み込んでいます。
        
        <link href="{{ $data->theme_path }}css/style.css" rel="stylesheet">
        
$form->conf_form_footer_message 「フォーム作成」画面の「確認画面のフッター文」に入力した文字が入っています。
下記の例のように使用することでHTMLが利用できます。
例ではclass名に「js_conf_control」をつけて「確認画面」のみでこれらの文字が表示されるように指定しています。
        
        {!! $form->conf_form_footer_message ? '<div class="js_conf_control">'.$form->conf_form_footer_message.'</div>' : "" !!}
        
$form->conf_form_header_message 「フォーム作成」画面の「確認画面のヘッダー文」に入力した文字が入っています。
下記の例のように使用することでHTMLが利用できます。
例ではclass名に「js_conf_control」をつけて「確認画面」のみでこれらの文字が表示されるように指定しています。
        
        {!! $form->conf_form_header_message ? '<div class="js_conf_control">'.$form->conf_form_header_message.'</div>' : "" !!}
        
$form->error_form_footer_message 「フォーム作成」画面の「エラー画面のフッター文」に入力した文字が入っています。
下記の例のように使用することでHTMLが利用できます。
例ではclass名に「js_error_control」をつけて「確認画面」のみでこれらの文字が表示されるように指定しています。
        
        {!! $form->error_form_footer_message ? '<div class="js_error_control">'.$form->error_form_footer_message.'</div>' : "" !!}
        
$form->error_form_header_message 「フォーム作成」画面の「エラー画面のヘッダー文」に入力した文字が入っています。
下記の例のように使用することでHTMLが利用できます。
例ではclass名に「js_error_control」をつけて「確認画面」のみでこれらの文字が表示されるように指定しています。
        
        {!! $form->error_form_header_message ? '<div class="js_error_control">'.$form->error_form_header_message.'</div>' : "" !!}        
        
$form->name 「フォーム作成」画面の「フォーム名」に入力した文字が入っています。
$form->url 「フォーム作成」画面の「フォルダ」に入力した文字が入っています。
$form_item->columns 「項目登録・編集」で「フォームの種類」にラジオボタン、チェックボックスを選択したときに入力する「1行に表示する選択肢数」が入っています。
下記の例ではbootstrap.cssを利用し、選択肢の列が指定の列数で並ぶようにしています。
      @foreach($choices as $choice)
        @if($choice->choice_type == "radio")
        <div class="col-12 col-md{{$form_item->columns ? "-".(12/$form_item->columns) : ""}} {{$form_item->html_id}}_wrap js_input_control">
          <label for="{{$form_item->html_id}}{{$loop->index}}" class="{{$form_item->html_id}}_label">
        @if($choice->image)
            <img src="{{ asset('form_item_image/'.$choice->image) }}" class="img-fluid choice_img"/>
          @endif
          <input type="checkbox" name="{{$form_item->name}}[]" value="{{$choice->label_text}}" id="{{$form_item->html_id}}{{$loop->index}}" class="{{$form_item->html_class}}">
          {{$choice->label_text}}
          </label>
          </div>
        @endif
      @endforeach
      
$form_item->file_capacity_limit 「項目登録・編集」で「フォームの種類」に「ファイル」を選択した時に入力する「容量上限(kbyte)」の数値が入っています。
下記の例では、ファイル選択フォームの下に、容量制限の注意を促した文字を表示しています。
        
          <input type="file" name="{{$form_item->name}}" id="{{$form_item->html_id}}" class="{{$form_item->html_class}} js_input_control" value="{{$form_item->initial_value}}" placeholder="{{$form_item->placeholder}}" accept="{{$form_item->file_type}}"/>
          @if($form_item->file_capacity_limit > 0)
            <span class="font80 js_input_control w-100">
            {{__("restriction.file_capacity_limit",["max" => $form_item->file_capacity_limit / 1024])}}
          
          @endif
        
        
$form_item->file_type 「項目登録・編集」で「フォームの種類」に「ファイル」を選択した時に入力する「ファイル形式」の文字が入っています。
ボタンクリックで入力される列は下記のようになります。
image/*
application/pdf
video/*
text/csv
text/plain
image/jpeg
image/png,image/jpeg
image/png,image/jpeg,image/gif
下記の例では、ファイル選択フォームを開いたときに、選択できるaccept属性を指定しています。
        
        <input type="file" name="{{$form_item->name}}" id="{{$form_item->html_id}}" class="{{$form_item->html_class}} js_input_control" value="{{$form_item->initial_value}}" placeholder="{{$form_item->placeholder}}" accept="{{$form_item->file_type}}"/>
        
$form_item->form_type 「項目登録・編集」の「フォームの種類」で選択した文字列が入っています。
下記が表示する選択肢と、変数に入る文字列の対応一覧です。
日本語選択の場合は、em_laravel\resources\lang\ja(各言語別のフォルダ名)\admin_messages.phpに記載されています。
      
      'text'            => 'テキスト',
      'number'          => 'テキスト(数字 type=number)',
      'email'           => 'テキスト(メール type=email)',
      'password'        => 'テキスト(パスワード type=password)',
      'tel'             => 'テキスト(電話番号 type=tel)',
      'url'             => 'テキスト(URL type=url)',
      'textarea'        => '複数行テキスト',
      'select'          => 'セレクト',
      'multi_select'    => 'セレクト(複数選択)',
      'raio'            => 'ラジオボタン',
      'checkbox'        => 'チェックボックス',
      'file'            => 'ファイル',
      'zp_address'      => '郵便番号付き住所',
      'first_last_name' => '姓名別2つの入力欄の氏名',
      'calendar'        => '日付(type=date)',
      'datetime'        => '日時(type=datetime)',
      'month'           => '月(type=month)'
      
$form_item->html_class 「項目登録・編集」の「class属性」に入力した文字列が入っています。
下記の例では、テキスト入力フォームにclass属性をつけています。
        
        <input type="text" name="{{$form_item->name}}" {{$form_item->html_id ? 'id='.$form_item->html_id:''}} class="form__input {{$form_item->html_class}} js_input_control" value="{{$form_item->initial_value}}" placeholder="{{$form_item->placeholder}}"/>
        
$form_item->html_id 「項目登録・編集」の「class属性」に入力した文字列が入っています。
下記の例では、テキスト入力フォームにid属性をつけています。
        
        <input type="text" name="{{$form_item->name}}" {{$form_item->html_id ? 'id='.$form_item->html_id:''}} class="form__input {{$form_item->html_class}} js_input_control" value="{{$form_item->initial_value}}" placeholder="{{$form_item->placeholder}}"/>
        
$form_item->initial_value 「項目登録・編集」の「初期値」に入力した文字列が入っています。
下記の例では、テキスト入力フォームに初期値を入力した状態にしています。
        
        <input type="text" name="{{$form_item->name}}" {{$form_item->html_id ? 'id='.$form_item->html_id:''}} class="form__input {{$form_item->html_class}} js_input_control" value="{{$form_item->initial_value}}" placeholder="{{$form_item->placeholder}}"/>
        
$form_item->max_length 「項目登録・編集」の「入力文字数制限(半角)」に入力した最大文字数の値が入っています。
$form_item->min_length 「項目登録・編集」の「入力文字数制限(半角)」に入力した最小文字数の値が入っています。
$form_item->name 「項目登録・編集」の「name属性」に入力した文字列が入っています。
下記の例では、テキスト入力フォームにname属性をつけています。
        
        <input type="text" name="{{$form_item->name}}" {{$form_item->html_id ? 'id='.$form_item->html_id:''}} class="form__input {{$form_item->html_class}} js_input_control" value="{{$form_item->initial_value}}" placeholder="{{$form_item->placeholder}}"/>
        
$form_item->placeholder 「項目登録・編集」の「Placeholder」に入力した文字列が入っています。
$form_item->required 「フォーム一覧」から「フォーム項目編集」に進み、「利用中項目」の必須をオンにすると、1が入ります。 下記の例では、必須項目の※印を表示しています。
        
        @if($form_item->required == 1)
          <span class="form__reqdMark">※</span>
        @endif
        
$form_item->restriction 「項目登録・編集」の「入力制限」で選択した文字列が入っています。
下記が表示する選択肢と、変数に入る文字列の対応一覧です。
        
        'katakana'            => '全角カタカナ',
        'hiragana'            => 'ひらがな',
        'num'                 => '半角数字',
        'alphabet_num'        => '半角英数',
        'alphabet'            => '半角英字',
        'alphabet_num_mix'    => '半角英数を混在',
        'num_hyphen'          => '半角数字か半角ハイフンのみ',
        'email'               => 'メールアドレス形式',
        'tel'                 => '電話番号09000000000',
        'tel_hyphen'          => '電話番号090-0000-0000',
        'zip'                 => '郵便番号1001111',
        'zip_hyphen'          => '郵便番号100-1111',
        
$form_req フォーム送信された内容が配列で入っています。
$row['title']
$row['value']
$form_reqの中身です。
下記の例では、自動返信メールの文内(reply_mail.blade.php reply_mail_for_admin.blade.php)で項目と入力された値を出力しています。
        
        @foreach($form_req as $row)
          {{$row['title']}}:{{$row['value']}}
        @endforeach
        
$form_title 「フォーム作成」時の「フォーム名」の文字列が入ります。 下記の例では、titleタグにフォーム名を出力しています。
        
          <title>{{ $form_title }}</title>
        
$include_submissions 「フォーム作成」時の「ユーザー確認メールに送信内容を含める」をオンにすると、1が入ります。
$reply_mail_footer_message 「フォーム作成」時の「自動返信メールのフッター文」の文字列が入ります。 下記の例ではreply_mail.blade.phpないでフッター文を表示しています。
        
          {{ $reply_mail_footer_message ? $reply_mail_footer_message : "" }}
        
$reply_mail_header_message 「フォーム作成」時の「自動返信メールのヘッダー文」の文字列が入ります。 下記の例ではreply_mail.blade.php内でヘッダー文を表示しています。
        
          {{ $reply_mail_header_message ? $reply_mail_header_message : "" }}
        
$request->name 項目に「お名前」を入れているときに、自動返信メールの中で入力値利用することができます。
下記の例ではreply_mail.blade.php内でお名前を表示しています。
__("messages.form.thanks_front_dear")と__("messages.form.thanks_behind_dear")は言語ファイルにある敬称です。
        
          {{$request->name ? __("messages.form.thanks_front_dear")." ".$request->name.__("messages.form.thanks_behind_dear") : ""}}
        
        

多言語化と言語ファイル

1つの言語のみに対応させればよい場合は、テーマファイルの中に直接文言を記述するのが簡単でお勧めです。
EasyMailは1つのテーマを多言語化することができます。
フォームを多言語対応させたい場合は、言語ファイルを利用します。
言語ファイルはem_laravel\resources\langフォルダの中にあります。
デフォルトでは中国語(cn) 英語(en) 日本語(ja)の3つの言語が入っています。
新しい言語を追加したい場合には、コピーペーストして、ファイル内の文言を変更することで、「フォーム作成」→「言語」で選択できるようになります。

言語ファイルをテーマ内で使用するには、
  
    __("ファイル名.配列名");
  
とすることで、テーマの中に文字を表示させることができます。

(例)
em_laravel\resources\lang\ja\message.phpの中に、下記のような構成があります。
  
  return [
    "form" => [
      .........
      "reply_thanks"               => "お問い合わせありがとうございます。",
      "accepted"                   => "問い合わせ内容は以下で受け付けました",
      "hidden"                     => "このフォームは、現在ご利用いただけません",
      .........
    ],
  ];
  
{{ __("messages.form.accepted") }}
このようにすると、「問い合わせ内容は以下で受け付けました」という文字が表示されます。

独自のものを置くこともできます。
  
  return [
    "hoge" => [
      "fuga" => "キャンペーンご応募ありがとうございます",
    ],
  ];
  
{{ __("messages.hoge.fuga") }}→「キャンペーンご応募ありがとうございます」
となります。

返信メール文の編集

em_laravel\resources\views\theme\gray\reply_mail.blade.phpがユーザー向けの返信メールの内容になります。
em_laravel\resources\views\theme\gray\reply_mail_for_admin.blade.phpが管理者向けのメール本文になります。
  
  @foreach($form_req as $row)
    {{$row['title']}}:{{$row['value']}}
  @endforeach
  
$row['title']と$row['value']の部分でフォームへの入力内容を、フォームの項目順にすべて表示させています。
上記の例ですと、
  
    お名前:山田太郎
  
と表示されます。

この内容を独自に編集したい場合には、
  
  {{$request->name}}様
  -----------------------------------
  問い合わせ内容は以下で受けしました
  -----------------------------------
  【お名前】{{$request->name}}
  【メールアドレス】{{$request->email}}
  【お好きな動物は?】{{$request->animal}}
  
  
このように{{$request->「タグのname属性」}}とすることで、入力内容を表示させることができます。

静的(固定)ページ

bladeファイルを使って静的(固定)ページを設置したい場合は、em_laravel/resources/views/themeの中にファイルを新規に作成してください。
管理画面で作ったフォーム表示よりも優先して、表示されます。
下記では、ドキュメントルート直下にEasyMailをセットアップしたときの例を示しています。
(例)
em_laravel/resources/views/theme/index.blade.php → https://example.com/
em_laravel/resources/views/theme/about_us.blade.php → https://example.com/about_us/
em_laravel/resources/views/theme/policy.blade.php → https://example.com/policy/

設定

URL

URL設定を変更したい場合は、em_laravel\config\app.phpをご覧ください。

データベース

データベースへの接続設定を変更する必要が出てきた場合は、em_laravel\config\database.phpで設定変更できます。