UpsNエージェント

UpsNエージェントは、WEBページ内に下記コードを加えることにより、動作するようになります。

<script src="https://www.mellow-fellows.com/UpsN/?script=APIトークン"></script>

※APIトークンは、UpsNカスタマー登録時に発行されます。

以下のようなコードになっています。※jQueryを使用しています

<script src="https://www.mellow-fellows.com/UpsN/?script=202014c52ce754bd3c44cc4c92050bdf9e67fb77"></script>
<script type="text/javascript">
$(function(){
	var form_sample_1 = new UpsNAgent(
		{
			"last_name" : "lastName",
			"first_name": "firstName",
			"last_kana" : "lastKana",
			"first_kana": "firstKana",
			"company"   : "organization",
			"email"     : "email",
			"email_confirm": "email",
			"zip1"      : "zip1",
			"zip2"      : "zip2",
			"prefecture": "state",
			"address1"  : ["city","street1"],
			"address2"  : "street2",
			"phone1"    : "phone1",
			"phone2"    : "phone2",
			"phone3"    : "phone3"
		},
		"form_sample_1",
		{deviceOwner: false}
	);
});
</script>

第１引数のキーである"last_name"や"first_name"は、フォームの入力項目につけられた名前です。以下のようなHTMLになっています。

<input type="text" name="last_name" value="" />
<input type="text" name="first_name" value="" />

第１引数の値である"lastName"や"firstName"は、UpsN定義パラメーターで、iPhone（またはAndroid）に登録されている連絡先から、どの情報をどの形式で取得するかを指定できます。

16行目の"address1": ["city","street1"], は、入力項目"address1"に、"city"と"street1"の２つのデータを繋げて入れる指定方法です。
（"city"と"street1"の詳細はコチラを参照ください）

第２引数の"form_sample_1"は、UpsNアイコンを表示したいコンテナのidを指定します。
コンテナというと専門的な感じがしますが、要は以下のようなHTMLを、ボタンを表示したい場所に入れていただくだけです。

<div id="form_sample_1"></div>

第３引数の「deviceOwner: false」は、iPhone（またはAndroid）の所有者の情報を要求しない設定で、UpsNアプリは常に連絡先の選択画面を表示するようになります。
省略するか、もしくは「deviceOwner: true」をセットすると、所有者の情報を要求します。
所有者の情報は１度選択するとUpsNアプリが記憶しますので、記憶内容がクリアされるまでは、連絡先の選択を省略できます。
（例えばECサイトでは、ご注文者はtrue、お届け先はfalseにするのが、オススメです）