こんにちは。
ライジングサン・システムコンサルティングの岩佐です。
こちらの記事は、執筆した2020年6月10日時点で最新のFileMakerのバージョン19に対応した、ドラッグアンドドロップ操作の可能なカレンダーソリューションを実装する方法の解説になります。
以前に公開させていただいたこちらのブログ記事では、当時のFileMakerのバージョンが15だったこともあり、非常に非効率で、あまりクールではない方法で実装していました。
しかしそこからFileMakerは、バージョンを重ねまして、執筆時点での最新バージョンは19になっています。
この間にFileMakerは、バージョン16でJSON形式のデータをハンドリングするための関数が標準実装されました。そして今回のバージョン19では、JavaScriptとの連携を強化する２つの大きな機能が標準実装されました。
目次
1.Ver19から実装された２つの大きな機能
バージョン19では、以下２つの大きな JavaScript との連携機能が実装されました。
1-1.WebビューアでJavaScriptを実行スクリプトステップの追加
FileMakerのスクリプトステップに、新しく「WebビューアでJavaScriptを実行」というスクリプトステップが追加されました。
バージョン18までは、FileMaker側からWebビューア内に記述されているJavaScript を実行する方法は、非常に大掛かりな仕組みを用意しなければならず、余程の知識がある技術者ではない限り実装するのはほぼ不可能でした。
しかし今回バージョン19から、新たにこのスクリプトステップが加わったことにより、容易に FileMakerスクリプトから、 Web ビューワー内に記述された JavaScript 関数を呼び出すことができるようになりました。
WebビューアでJavaScriptを実行スクリプトステップは、以下３つのオプション設定が用意されています。
オブジェクト名
実行するJavaScript関数が記述されているWebビューアのオブジェクト名を指定します。
関数名
実行するJavaScript関数名を指定します。
引数
実行するJavaScript関数に渡す引数を設定します。引数の数は＋ボタンをクリックすることで増やすことができます。
上記のスクリーンショットでは、 WebViwerと命名されたWebビューアに記述されているupdateEventsという JavaScript 関数を呼び出しています。その際 FileMaker の$listJSONという変数に格納されている値を引数として渡しています。
1-2.FileMaker.PerformScript によるFileMakerスクリプトの呼び出し
バージョン18までも、fmpURLプロトコルを用いることで、 JavaScript から FileMaker スクリプトを実行することはできました。
ですがこの手法は fmpURLプロトコルを使うので、使える実行環境は FileMaker ProとFileMakerGoに限られおり、WebDirectでは利用不可能でした。
しかし今回、FileMaker.PerformScriptというJavaScritの標準ライブラリとして利用可能なメソッドがWebViewerに組み込まれたことでWebDirectでも、JavaScriptからFileMakerスクリプトを実行することが可能になりました。
以下は、実際に今回のサンプルソリューションの中で使っているFileMaker.PerformScriptの記述部分になります。
FileMaker.PerformScript( 'viewRender' , JSON.stringify ( fmScriptParam ) );
１つ目の引数が、FileMakerのスクリプト名、そして２つ目の引数が FileMakerスクリプトに渡す引数になります。
このように、JavaScriptとの連携を強化する２つの新機能が搭載されたことで、FullCalendar のような JavaScript で構築されたユーザインタフェースライブラリを、FileMakerのソリューションに組み込むことがとても容易になりました。
今回のサンプルソリューションも、前回公開させていただいたものと同じく FullCalendar を Web ビューワーに組み込む形で実現しています。
このサンプルソリューションですが、以前に配布させていただいたバージョン15の時に公開したものと比較して、ソフトウェアの外側から見た主な振る舞いについては、大きく変わっていません。
しかし、内部構造に関しては、先に述べた通り、今回のバージョン19で新たにFileMakerに実装された2つの大きな新機能を利用したことで、大幅に洗練されています。
また、この記事を執筆している時点の FullCalendar の最新バージョンはV4なのですが、Windows版FileMakerの WebViwer のレンダリングエンジンが InternetExplorer11であることから、今回は jQuery で記述されている FullCalendar V3 をサンプルソリューションに組み込んでいます。
それではまず簡単に、サンプルソリューションに実装されている機能について説明していきます。
2.ドラッグアンドドロップ操作が可能な３つの機能
前回公開させていただいたソリューションと同じく今回もドラッグ&ドロップ操作が可能な機能は三つ組み込まれています。
2-1.タイムスロットをドラッグして新規スケジュールを追加（select)
まずはこちらの動画のようにタイムライン上でスケジュールを予約したい時間帯をマウスでドラッグすると、該当する時間の開始終了時刻が自動的にセットされたスケジュール入力ウィンドウが開きます。
2-2.スケジュールをドラッグ＆ドロップで移動（eventDrop）
登録されているスケジュールは、ドラッグ&ドロップで別の日、及び別の時間帯に移動することが可能です。特に頻繁にスケジュール変更が発生するような業務をサポートするソフトウェアで、でこの操作感が実現できるのは生産性の向上に貢献できると思います。
2-3.イベントの下端をドラッグして時間を変更（eventResize）
この機能はスケジュールの下端をドラッグすることで登録されている時間枠を変更できる機能です 。こちらも同じく時間帯の変更は頻発するような業務をサポートするソフトウェアに実装すると喜ばれそうな機能です。
3.内部構造の解説
それでは具体的に、サンプルソリューションの内部構造について解説します。今回のソリューションはシングルファイル構成です。
library
ライブラリテーブルには、 雛形になっているHTMLコードや、JavaScriptが格納されています。1レコードのみです。
Schedule
Scheduleテーブルには、カレンダーに描画されているイベントデータが、１イベント１レコードで格納されています。
eventType
eventTypeは、カレンダー上に色分けされているイベントの種類を管理するマスターテーブルです。サンプルソリューションでは全部で7レコード登録しています。
global
ユーザーインターフェースをコントロールしているテーブルです。名前の通りグローバルフィールドのみで構成されています。FullCalendarを表示しているレイアウトは、このテーブルが基底となっているレイアウト上で表示しています。
3-2.WebViewerにカレンダーを描画する。
サンプルソリューションは、 onFirstWindowOpen イベントに登録されているスクリプトで、まず 空白のカレンダーを WebViewer上に表示します。
起動直後、最初に表示するカレンダーは、ソリューション起動日をデフォルト日したとした、月表示のカレンダーです。
onFirstWindowOpen（FileMakerスクリプト）
Libraryテーブルに格納されているHTML / JavaScript のコードを結合して実行可能な htmlファイルをビルドし、WebViewerに、何のイベントも表示されない空白状態である最初のカレンダーを表示します。
すると、WebViwerに描画したFullCalendarで、viwerRendarというイベントが発火します。このviewRendarというイベントは、何らかの操作で、カレンダーの描画（レンダリング）が発生した時に発火します。
今回のサンプルソリューションには、このビュー連動イベントが発火した時に、FullCalendarからFileMaker側へ、イベント発火時点で表示しているカレンダーの状態を通知する処理を実装しています。
viewRendarイベントに実装されているJavaScriptのコードは以下の通りです。
viewRender: function ( view, element ) {
var fmScriptParam = {};
fmScriptParam.viewStart = view.start.format();
fmScriptParam.viewEnd = view.end.format();
fmScriptParam.viewIntervalStart = view.intervalStart.toISOString();
fmScriptParam.viewIntervalEnd = view.intervalEnd.toISOString();
fmScriptParam.viewName = view.name;
FileMaker.PerformScript( 'viewRender' , JSON.stringify ( fmScriptParam ) );
}
この JavaScript関数には、Ver19から実装された、JavaScriptからFileMakerのスクリプトを実行する、FileMaker.PerformScriptという標準ライブラリとして実行可能なメソッドが組み込まれています。
そしてこのFileMaker.PerformScriptは、FileMaker側に実装されている viewRendar という名前のFileMakerスクリプトを実行します。そのスクリプトには、 fmScriptParamというJSONオブジェクトを文字列に変換（stringify）し、引数として渡すという意味の命令が記述されています。
viewRendarスクリプト（FileMakerスクリプト）
次にFileMakerは、このFileMaker.PerformScript でキックされた viewRendar というFileMakerスクリプトを実行します。このうFileMakerスクリプトは、FullCalendarから渡された、イベント発火時の表示対象期間となっている開始・終了日や、表示形式（月表示・週表示・非表示）を受け取ります。
この引数をもとに、FileMakerスクリプトは、カレンダーに表示すべきイベントデータを、Scheduleテーブルから検索し、FullCalendarが要求するEventObjectを生成します。FullCalendarが要求するEventObjectはJSON形式です。
ですので、FileMakerのバージョン16から実装されたJSONSetElement関数を使って簡単に生成することができます。
EventObjectを生成するメカニズム
FullCalendarが要求するEventObjectは、標準的な JSON形式のデータです。ですので FileMaker バージョン16から搭載されたの標準関数であるJSONSetElement関数を使うことで、容易に生成することができます。
具体的には schedule テーブルの中の xc_json フィールドに記述している以下の計算式で、１つのイベントのJSONデータを生成しています。
この計算フィールドは、いかのようなJSONオブジェクトを返します。
{
"allDay" : false,
"color" : "#FC6E51",
"end" : "2020-07-03T13:00:00",
"id" : "296BDF15-0ED6-2F4E-8B42-904CF059736F",
"start" : "2020-07-03T12:00:00",
"title" : "新しいスケジュールですわ"
}
今回のサンプルソリューションでは、カレンダーに描画すべき Scheduleテーブルに格納されているレコードを、リレーションシップグラフの関連レコードとして取得しています。
関連レコードなので、List関数を用いれば先に定義したxc_jsonの計算結果を改行区切りとして取得することができます。
次に、取得した計算結果の改行区切り値の改行コードを、Substitute関数を使ってカンマに変換し、更にその結果をブラケットで囲めば、JSON配列データとして成立します。具体的には次のような計算式でJSONオブジェクトの配列データを生成しています。
Let ( [
~xc_json1 = List ( T01_global » schedule|currentView1::xc_json ) ;
~xc_json2 = List ( T01_global » schedule|currentView2::xc_json ) ;
~xc_json3 = List ( T01_global » schedule|currentView3::xc_json ) ;
~xc_json4 = List ( T01_global » schedule|currentView4::xc_json ) ;
~xc_json = List ( ~xc_json1 ; ~xc_json2 ; ~xc_json3 ; ~xc_json4 )
];
"[" & Substitute ( ~xc_json ; ¶ ; "," ) & "]"
)
あとは、生成したJSONオブジェクトの配列をそのまま JavaScript関数 に渡し、 JavaScriptの標準機能を使ってパースすればOKです。
ちなみにVer15時代に公開したサンプルソリューションでは、このEventObjectのJSONデータ生成処理に、約50ステップものスクリプトを記述していました。これだけを見ても、FileMakerの劇的な進化を感じて頂けると思います。
3-3.JavaScriptの関数を実行してカレンダーを描画
次にFileMakerのスクリプトは、Webビューア内に実装されている initializeEvents、及び updateEvents という JavaScript の関数をコールして、空白表示されているカレンダー上にスケジュールを描画するメソッドを実行します。
現在カレンダーに表示されているイベントデータをすべてクリア
function initializeEvents() {
$('#calendar').fullCalendar('removeEvents');
$("#calendar").fullCalendar("rerenderEvents");
$("#calendar").fullCalendar('unselect');
}
引数で受け取ったEventObjectをもとに、カレンダーを描画
function updateEvents(stringEvents) {
$("#calendar").fullCalendar("addEventSource", JSON.parse(stringEvents));
$("#calendar").fullCalendar("rerenderEvents");
}
このFileMakerからWebWebビューア内に実装されている initializeEvents、及びupdateEvents というJavaScript関数の実行は、今回のバージョン19から新たに搭載された「WebビューアでJavaScriptを実行」スクリプトステップを用います。
それでは、より具体的な動きを動画で解説したいと思います。
如何でしょうか？
バージョン19より実装された、JavaScriptとの連携を容易にする２つの新機能が、具体的にどのように動くのか、確認いただけたと思います。
3-4.新しいスケジュールを登録する機能の解説
それでは次に、タイムスロット上をドラッグ操作して新規スケジュールを登録する時の具体的な動きについて解説します。
FullCalendarのタイムスロット上で新たなスケジュールを登録するためのドラッグ操作が実行されると、まず WebViewer内で FullCalendar の select イベントが発火します。
selectイベント（JavaScript関数）
select: function(start, end, jsEvent, view) {
var strStart = start.toISOString();
var strEnd = end.toISOString();
var viewObject = $('#calendar').fullCalendar('getView');
var viewName = viewObject.name;
var viewStart = viewObject.start;
var viewIntervalStart = viewObject.intervalStart.toISOString();
var viewIntervalEnd = viewObject.intervalEnd.toISOString();
var fmScriptParam = {};
fmScriptParam.start = strStart;
fmScriptParam.end = strEnd;
fmScriptParam.viewName = viewName;
fmScriptParam.intervalStart = viewIntervalStart;
fmScriptParam.intervalEnd = viewIntervalEnd;
FileMaker.PerformScript( 'select' , JSON.stringify ( fmScriptParam ) );
$calendar.fullCalendar('renderEvent',
{
title: 'TEST',
start: start,
end: end
},
true
);
$calendar.fullCalendar('unselect');
}
いろいろとJavaScriptのコードが書かれていますが、やっていることは、以下の４つです。
- ドラッグ操作が発生したときの表示状態（月 or 週 or 日 及び 開始・終了日）の取得
- ユーザがドラッグして選択した日時の取得
- 取得した情報をFileMaker側の select スクリプトに引数として渡す。
- ユーザがドラッグ操作で塗りつぶした時間帯の表示をクリア（unselect）する。
selectスクリプト（FileMakerスクリプト）
次に、JavaScript が FileMaker.PerformScript によって呼び出す FileMaker側のselectスクリプトが実行されます。このとき、JavaScriptで取得した、イベントが実行された時の表示状態と、ユーザがドラッグして選択した日時が引数として渡されます。
FileMakerのselecスクリプトは、引数で渡ってきたそれらの情報をもとに、カードウインドウを起動して、新規スケジュール登録のユーザ操作を待ちます。このカードウインドウ上に描画しているのは、もちろんFileMakerの標準機能のみで実装したレイアウトです。
次に、FileMakerのレイアウト上で、新規スケジュールの登録操作が終了すると、FileMaker側のスクリプトは、改めて現在表示中のカレンダーの期間中に表示すべきイベントデータをscheduleテーブルから再取得して、JSON形式のEventObjectデータを生成します。これは、ユーザが新規登録操作をしている最中に、別のユーザが、カレンダーに表示中の期間に、別のスケジュールを登録しているケースが想定されるためです。
後は、先の初回起動時で解説した処理と同じく、上記で生成したEventObjectを JavaScript に渡して、カレンダー上にスケジュールを描画します。
それでは、具体的な動きを動画で解説します。
3-5.イベントの移動や時間帯の変更操作を解説
次にカレンダー上でユーザーが操作する、イベントのドラッグ操作による日時移動、同じくドラッグ操作による時間帯の変更、及びクリック操作によるカレンダーの表示について解説します。
実は、これら３つの操作で実行される JavaScript のロジック、及びFileMaker側のスクリプトは全く同じです。ですので、この記事ではイベントのドラッグ操作による日時と移動を例に解説します。
まずユーザーは、WebViwer内に描画されたカレンダー上で、ターゲットのイベントをドラッグ&ドロップして別の日時に移動します。このドロップ操作が終了したタイミングで、FullCalendarの eventDrop イベントが発火します。eventDropイベントで実行される JavaScript のコードは以下のとおりです。
eventDrop 関数（JavaScript関数）
eventDrop: function(event, delta, revertFunc) {
var ID = event.id;
if ( event.allDay ) {
var startDateTime = event.start;
var endDateTime = event.end;
var allDay = true;
} else {
var startDateTime = event.start.toISOString();
var endDateTime = event.end.toISOString();
var allDay = false;
};
var viewObject = $('#calendar').fullCalendar('getView');
var viewName = viewObject.name;
var viewStart = viewObject.start;
var viewIntervalStart = viewObject.intervalStart.toISOString();
var viewIntervalEnd = viewObject.intervalEnd.toISOString();
var fmScriptParam = {};
fmScriptParam.ID = ID;
fmScriptParam.startDateTime = startDateTime;
fmScriptParam.endDateTime = endDateTime;
fmScriptParam.viewName = viewName;
fmScriptParam.viewStart = viewStart;
fmScriptParam.viewIntervalStart = viewIntervalStart;
fmScriptParam.viewIntervalEnd = viewIntervalEnd;
fmScriptParam.allDay = allDay;
FileMaker.PerformScript( 'eventEdit' , JSON.stringify ( fmScriptParam ) );
},
様々な処理が記述されていますが、実行している処理の概要は以下のとおりです。
・移動したイベントを識別するID値の取得
・ドラッグ＆ドロップ操作が発生したときの表示状態（月 or 週 or 日 及び 開始終了日）の取得
・イベントをドロップした場所の日時の取得。
・上記で取得した情報をFileMaker側の ‘eventEdit’ スクリプトに引数として渡す。
eventEditスクリプト（FileMakerスクリプト）
次に、JavaScriptから FileMaker.PerformScript によって呼び出されたFileMaker側の eventEdit スクリプトが実行されます。このとき、JavaScriptで取得した、イベントを一位に識別するID値、イベントが実行された時に表示状態、及びユーザがドラッグ＆ドロップ操作で移動したあとの日時が引数として渡されます。
eventEditスクリプトには、ドラッグアンドドロップ操作で移動したイベントの レコードID 値が渡されます。その レコードID 値をもとにFileMakerのスケジュールテーブルを検索し、該当のレコードを Findsetしてカードウィンドウに表示し、エンドユーザーのレコード確定処理を待ちます。
後はイベントの新規登録時と同じように、カレンダーの表示条件に合わせて、Scheduleテーブルから、表示すべきレコードを取得してEventObjectを生成し、JavaScriptの updateEvent 関数を実行します。
JavaScriptの updateEvent 関数 を呼び出すのは、FileMaker側の T01_updateCalendar というスクリプトにモジュール化されているので、あらゆるイベント発生時でも、最後はこのスクリプトを実行して、Scheduleテーブルから最新のデータを取得してカレンダーに描画します。
それではこの動きを動画で解説します。
いかがでしたでしょうか。
バージョン19から強化された JavaScript の連携機能がいかに素晴らしい機能か、実際の動きを見ていただいてご理解いただけたのではないかと思います。
4.WebDirectでの実行
更にバージョン19から、 WebDirectでもFullCalendarのような JavaScript ライブラリを組み込んだソリューションを実行できるようになりました。
4-1.WebDirectでサンプルソリューションを動かす
こちらの動画では、実際に WebDirect でドラッグ操作によるスケジュールの新規登録を実行している様子です。キャプチャーしているウィンドウがウェブブラウザ（Safari）であること、そして FileMaker Web Direct であることを示すステータスツールバーが、画面上部に表示されていることに着目してください。
4-2.WebDirectでカードウインドウの利用が可能に
そしてバージョン19からは、この動画にある通り WebDirectでもカードウインドウが起動できるようになりました。
バージョン18までは、 WebDirectで複数ウィンドウを起動することができず、常にシングルウィンドウでの操作を前提にソリューションを構築 する必要がありました。しかし、 Ver 19よりカードウィンドウが起動可能になったことで、より操作性の高いソリューションを、 WebDirectでも実装できるようになりました。
※WebDirectでの利用は、バージョン19以降の FileMaker Server が必要になります。
5.Windows環境での高解像度モニター利用時の問題
最後に、Windows + FileMaker Pro + 高解像度モニター という３つの条件が重なった場合に発生する問題について補足しておきたいと思います。
昨今は、Surfaceを始めとして、MacのRetinaディスプレイに該当する高解像度モニターが増えてきました。また、外付けのモニターとして4Kモニターを利用されているユーザさんも増加傾向にあります。
このような高解像度のモニタに、Windows + FileMakerPro で実行すると、 WebViwer内のコンテンツが、こちらのスクリーンショットのように、非常に小さなフォントで表示されてしまう問題が発生します。
これは、Windows版のFileMakerProに搭載されるWebViwerのレンダリングエンジンに Internet Explorer 11が使われていることに起因します。
5-1.MBS Plugin で解決可能
今回のサンプルソリューションでは、この問題解決に MBS Plugin という有料プラグインの機能を使って対応しています。サンプルソリューションの onFirstWindowOpen で実行されるスクリプト内で、実行環境がWindowsの場合に限り、以下の RSC_setInternetExplorerHiDPI スクリプトが実行されます。
このスクリプトでは、最初に実行中のFileMakerProにインストールされているプラグインを取得して変数に格納します。
次に、この取得した変数値から、MBS Plugin のバージョン10.2以降がインストールされていて、ステータスがEnabledの状態になっていたら、以下の２つのMBSプラグインのメソッドを実行して、高解像度モニターに対応可能な設定を有効にします。
高解像度モニター表示の設定状態の取得
MBS( “WebView.GetInternetExplorerHiDPI” )
高解像度モニター表示の設定状態の更新
MBS( “WebView.SetInternetExplorerHiDPI”; 1 )
5-2.設定変更を有効にするにはFileMakerProの再起動が必要
設定状態が無効な状態から有効な状態に変更した場合、FileMakerProの再起動が必要です。WebView.SetInternetExplorerHiDPIメソッドを実行しただけでは、設定が有効化されないことに注意してください。
Surfaceを始めとする高解像度モニターが搭載されたハイスペックなWindowsマシン、及び4Kモニターを外部ディスプレイとして使用していなければ、このような問題は発生しません。もしWebViwerを用いたリッチなUI/UXソリューションを高解像度モニターでも動かしたい場合は、MBS Plugin の導入をご検討ください。
6.まとめ
この記事では、FileMaker のバージョン15時代に公開させていただいた、 「FileMakerでドラッグ＆ドロップ操作が可能なカレンダーソリューションを実装する方法」のサンプルソリューションをリメイクする形で、バージョン19より標準実装された、 JavaScript の連携機能を解説させていただきました。
この記事でご紹介させていただいた通り、 Webビューア内に実装されたJavaScriptの機能を、FileMakerのスクリプトから 簡単に呼び出せるようになったことで、FileMakerの標準機能だけでは実装することができない、よりリッチなUI/UXの実装が可能になりました。
更に記事内でも触れたとおり、バージョン19から、WebDirectでもカードウィンドウが利用できるようになったことで、より操作性の良いソリューションを、WebDirectでも実行可能になりました。
6-1.合わせて学習したいコンテンツのご紹介
今回、こちらの記事では、あくまでも FullCalendar の組み込みを例に、具体的なJavaScriptとの連携について解説してきました。しかし、その詳しい動作原理や、利用上の注意点などには言及しておりません。
このあたりの技術をより詳しく学習されたい方は、株式会社寿商会の若林さんが講師を務めていらっしゃるこちらのWebセミナーを視聴することをお勧めいたします。
6-2.サンプルソリューションのダウンロード
今回の記事になっているサンプルソリューションは、以下よりダウンロードしていただくことができます。
また、こちらのサンプルソリューションは、あくまでも学習を目的とししたものです。ユーザの入力ミスのチェック機能等は実装していないことにご注意ください。
実際の業務で、こちらのサンプルソリューションを使うとなると、上記のようなエラーチェック処理をご自身で実装した上で、十分なテストを行ってからご利用ください。
さらに、カスタマイズ等の開発依頼や、テクニカルコンサルティングのご契約が伴わない個別の質問に関してはご対応しかねることをご了承ください。
上記のことをご注意してお試しいただければと思います。
サンプルソリューションのファイルを起動すると、アカウント情報を要求します。以下のアカウント名とパスワードでログインしてください。
{
"アカウント名" : "User",
"パスワード" : "SfxG77CYedkc2rAW"
}
こちらのボタンからサンプルのカスタムAppをダウンロードしてください。
※Ver19以上の Claris FileMakerPro が必要です。
※WebDirectで動かす場合は、Claris FileMakerServer19 以上が必要です。
※OSのバージョンや特定の環境下においては正常に動かない可能性もあります。
上記のアカウントは、FileMakerの [データ入力のみ] 権限のアカウントです。
学習を目的に、サンプルソリューションの中身を解析するには、完全アクセス権が必要です。
ぜひこちらから完全アクセス権の情報をご請求ください。
完全アクセス権のリクエストに、会社情報やメールアドレスをご提供いただく理由は、今回のブログ記事のような情報に興味を持たれている企業やご担当者様の属性を把握させていただきたいからです。
弊社は、頂戴した会社名やメールアドレスのドメインから、事業内容や事業規模、所在地などを知ることができます。このような情報をご提供いただくことで、より質の高い情報を皆様に届けることができます。
また、こちらのブログには公開してないコンサルティングサービスの割引クーポン情報等を、頂いたメールアドレスにいち早くお届けすることもできます。
もし、このような主旨にご賛同いただけない方は、こちらのような使い捨てのメールアドレスサービスをご利用いただくと良いと思います…
最後までお読みいただき、誠にありがとうございました。
