Easy Mail Home Download EasyMail2.00 EasyMail2.01

EasyMail2.01

概要

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

DownLoad »

要件

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

サーバー

Apache2.4.x NGINX1.2x
PHP7.3 - 8.1
MariaDB10.3+ MySQL5.7以上
laravel8.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/
    ├── app/
    ├── bootstrap/
    ├── config/
    ├── database/
    ├── public/
    ├── resources/
    ├── routes/
    ├── storage/
    ├── tests/
    ├── vendor/
    ├── styleci.yml
    ├── artisan
    ├── .gitignore
    ├── .gitattributes
    ├── .htaccess
    ├── .env.example
    ├── .editorconfig
    ├── composer.json
    ├── composer.lock
    ├── docker-compose.yml
    ├── index.php
    ├── Makefile
    ├── package-lock.json
    ├── package.json
    ├── phpunit.xml
    ├── postcss.xml
    ├── postcss.config.js
    ├── README.md
    ├── server.php
    ├── tailwind.config.js
    ├── vite.config.js
    └── webpack.mix.js

テーマ

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

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

    
    inquiry/
        └── 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 「項目登録・編集」の「フォームの種類」で選択した文字列が入っています。
下記が表示する選択肢と、変数に入る文字列の対応一覧です。
日本語選択の場合は、\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") : ""}}

返信メール文の編集

独自タグをメール文に設定

「自動返信メール」「最終画面のお礼文」以下の独自タグをメール文に設定できます。

■日時タグ
説明 タグ
4桁の西暦 #YYYY#
末2桁の西暦 #YY#
2桁の月 #MM#
2桁の日 #DD#
漢字の曜日 #KWE#
英語の曜日 #AWE#
2桁の時 #HH#
2桁の分 #MI#
2桁の秒 #SS# 
        #YYYY#年#MM#月#DD#日 #HH#時#MI#分

■送信元タグ
説明 タグ
IPアドレス #IP#
ホスト名 #HOST#
ユーザーエージェント #UA#
■回答タグ
#[name属性]#を記述すると、ユーザーの入力値を表示することができます。
<input type="text" name="onamae">
となっている場合は下記のように入力することで、ユーザーの入力した文字が表示されます。 
        #onamae#
※回答タグは「メールのタイトル」「最終画面のお礼文」に設定することも可能です。

テーマファイルを使ってメール文設定

\resources\views\theme\gray\reply_mail.blade.phpがユーザー向けの返信メールの内容になります。
\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ファイルを使って静的（固定）ページを設置したい場合は、/resources/views/themeの中にファイルを新規に作成してください。
管理画面で作ったフォーム表示よりも優先して、表示されます。
下記では、ドキュメントルート直下にEasyMailをセットアップしたときの例を示しています。
（例）
/resources/views/theme/index.blade.php → https://example.com/
/resources/views/theme/about_us.blade.php → https://example.com/about_us/
/resources/views/theme/policy.blade.php → https://example.com/policy/

設定

URL

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

データベース

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