homeTOP keyboard_arrow_right 実装&技術Tips

introduce & technology

実装&Tips

設置方法

1. JS(JavaScript)での設置方法

設置の大きな流れ

  1. サイトの申し込みフォームから申し込み、マイページへログインします。
  2. マイページのメニューのキー管理から下記コードを取得します。
  3. 取得したコードを貼り付け、調整します。
  4. 送信テストをします。郵便番号を入力し、検索ボタンまたは自動入力ボタンを押して住所が出力されれば設置完了です。

具体的な設置手順

  1. サイトの申し込みフォームから申し込み、マイページへログインします。
  2. マイページのメニュー、キー管理をクリックし、アクセスキーの左にあるアイコンからコードを取得してください。
    ※下記のコードはサンプルのため、実際にご契約者様が利用するコードとは若干の違いがあります。
  3. 
    
    <script type="text/javascript" src="https://h20.zipserver.jp/zipserver/php/api/zs.js" charset="utf-8"></script>
    <script type="text/javascript">
    <!--
    	const zs_site_id="981a5bb7e9f948edc55a0cca82570a0e10976e54fcffcb1b88bb946853dbfd4c";
    	const zs_zipcode="zipcode"; // 郵便番号入力フォームのID
    	const zs_prefecture="address1"; // 県が設定されたフォームのID
    	const zs_city="address2"; // 市区が設定されたフォームのID
    	const zs_town="address3"; // 町丁が設定されたフォームのID
    	const zs_ziplist="ziplist"; // 郵便番号リスト表示用のdiv
    	const zs_data="json"; // 出力データ形式(未指定はレスポンスのみ)
    	function zsResponce(e){ if(e.result=="error") alert("error_code:"+e.code); }// 結果が必要な場合のレスポンスファンクション
    //-->
    </script>
    <input name="zipcode" type="text" id="zipcode" size="7" maxlength="7" value="" />
    	<button type="button" onclick="javascript:zs_search();">自動入力</button>
    <div id="ziplist" style="position:absolute; z-index:1000"></div>
    													
    
    
  4. お使いのWebフォームのHTMLファイルを開き、HTMLファイルの<body>の開始タグの直下に下記コード(サンプルでは3行目から15行目)を貼り付けてください。
  5. 
    
    <script type="text/javascript" src="https://h20.zipserver.jp/zipserver/php/api/zs.js" charset="utf-8"></script>
    <script type="text/javascript">
    <!--
    	const zs_site_id="981a5bb7e9f948edc55a0cca82570a0e10976e54fcffcb1b88bb946853dbfd4c";
    	const zs_zipcode="zipcode"; // 郵便番号入力フォームのID
    	const zs_prefecture="address1"; // 県が設定されたフォームのID
    	const zs_city="address2"; // 市区が設定されたフォームのID
    	const zs_town="address3"; // 町丁が設定されたフォームのID
    	const zs_ziplist="ziplist"; // 郵便番号リスト表示用のdiv
    	const zs_data="json"; // 出力データ形式(未指定はレスポンスのみ)
    	function zsResponce(e){ if(e.result=="error") alert("error_code:"+e.code); }// 結果が必要な場合のレスポンスファンクション
    //-->
    </script>
    
    
    
  6. ユーザーに郵便番号を入力してもらいたい欄に下記のコード(サンプルでは16行目から18行目)を貼り付けてください。
  7. 
    <input name="zipcode" type="text" id="zipcode" size="7" maxlength="7" value="" />
    <button type="button" onclick="javascript:zs_search();">自動入力</button>
    <div id="ziplist" style="position:absolute; z-index:1000"></div>
    
    

    以下、コード貼り付け後の具体例

    21行目から23行目のようにユーザーに郵便番号を入力してもらいたい場所にコードを貼り付けてください。(18行目から27行目が郵便番号の入力欄に関するコードになります。)

    
    <div class="row">
    <div class="col-sm-3">お名前 (*)</div>
    <div class="col-sm-5"><input type="text" class="form-control" name="name" id="name" value="" placeholder="例)インクレイブ 太郎"></div>
    <div class="col-sm-5"></div>
    </div>
    <div class="row error-message">
    <div class="col-sm-3"></div><div class="col-sm-10"><div class="text-danger" id="email_message"></div></div>
    </div>
    <div class="row">
    <div class="col-sm-3">電話番号 (*)</div>
    <div class="col-sm-3"><input type="text" class="form-control" name="tel" id="tel" value="" placeholder="例)0227966101">
    <small>
    <div class="pmessage">半角数字のみで入力してください。</div>
    </small>
    </div>
    </div>
    <div class="row">
    <div class="col-sm-3">郵便番号 (*)</div>
    <div class="col-sm-3">
    <input name="zipcode" type="text" id="zipcode" size="7" maxlength="7" value="" placeholder="例)9800804"/>
    <button type="button" onclick="javascript:zs_search();">自動入力</button>
    <div id="ziplist" style="position:absolute; z-index:1000"></div>
    <small>
    <div class="pmessage">半角数字のみで入力してください。</div>
    </small>
    </div>
    
    

    ポイント①
    住所変換ボタンの文言を変えたいときは「自動入力」の文言を変更すると、ボタンの文字も変更されます。
    ポイント②
    <div id="ziplist" style="position:absolute; z-index:1000"></div>は複数の郵便番号を表示するためのタグです。
    ※一つの郵便番号に複数の住所が割り当てられていることがあるためです。

    Ex)9812114
    宮城県 伊具郡丸森町 赤堀
    宮城県 伊具郡丸森町 泉
    宮城県 伊具郡丸森町 泉下
    宮城県 伊具郡丸森町 大目
    宮城県 伊具郡丸森町 北前
    宮城県 伊具郡丸森町 天王
    

    ポイント③
    sizeの数字を変えることで入力欄の大きさを変更できます。
    ポイント④
    placeholderの文言を変えることで入力欄にあらかじめ表示させておく文言を変えることができます。

  8. 都道府県を出力したい欄の<input>タグにid="address1"(参考:下記コードの37行目)、
    市区を出力したい欄の<input>タグにid="address2"(参考:42行目)、
    町村を出力したい欄の<input>タグにid="address3"(参考:46行目)、
    住所を都道府県から市町村まで連結させて出力したい場合は<input>タグにid="address4"を追加します。
  9. 
    <form id="frm" action="" method="POST">
    <h4><i class="material-icons">check_box</i>ご登録者情報</h4>
    
    <div class="row">
    <div class="col-sm-3">お名前 (*)</div>
    <div class="col-sm-5"><input type="text" class="form-control" name="name" id="name" value="" placeholder="例)インクレイブ 太郎"></div>
    <div class="col-sm-5"></div>
    </div>
    <div class="row">
    <div class="col-sm-3">電話番号 (*)</div>
    <div class="col-sm-3"><input type="text" class="form-control" name="tel" id="tel" value="" placeholder="例)0227966101">
    <small>
    <div class="pmessage">半角数字のみで入力してください。</div>
    </small>
    </div>
    </div>
    
    <div class="row">
    <div class="col-sm-3">郵便番号 (*)</div>
    <div class="col-sm-3">
    <input name="zipcode" type="text" id="zipcode" size="7" maxlength="7" value="" placeholder="例)9800804"/>
    <button type="button" onclick="javascript:zs_search();">自動入力</button>
    <div id="ziplist" style="position:absolute; z-index:1000"></div>
    <input type="text" class="form-control" name="zip" id="zip" value="" placeholder="例)9800804">
    <small>
    <div class="pmessage">半角数字のみで入力してください。</div>
    </small>
    </div>
    <div class="col-sm-3">
    <button type="button" class="form-control" onclick="javascript:search();">検 索</button>
    </div>
    </div>
    <div class="row">
    <div class="col-sm-3">都道府県 (*)</div>
    <div class="col-sm-4">
    <input type="text" class="form-control" name="address1" id="address1" value="" placeholder="例)宮城県">
    </div>
    </div>
    <div class="row">
    <div class="col-sm-3">市区 (*)</div>
    <div class="col-sm-7"><input type="text" class="form-control" name="address2" id="address2" value="" placeholder="例)仙台市青葉区"></div>
    </div>
    <div class="row">
    <div class="col-sm-3">町村</div>
    <div class="col-sm-7"><input type="text" class="form-control" name="address3" id="address3" value="" placeholder="例)大町"></div>
    </div>
    <div class="row">
    <div class="col-sm-3">ビル名など</div>
    <div class="col-sm-7"><input type="text" class="form-control" name="building" id="building" value="" placeholder="例)TAKAYUパークサイドビル5F"></div>
    </div>
    </form>
    
    
  10. 送信テストをします。郵便番号を入力し、検索ボタンを押して住所が出力されれば設置完了です。

2. APIでの導入

現在準備中です。

3. タグの説明

HTML

<script>

<script> は、HTMLにおいて、JavaScript などのスクリプトを記述するために使用するタグです。タグとタグの間にJavaScriptを記述していきます。HTML4.01ではスクリプト言語をtype="text/javascript"を使用して指定することが必須でしたが、HTML5 では省略した際は type="text/javascript" と認識されるようになりました。

<input>

<input>タグは、Webフォームにテキスト入力欄や実行ボタン、チェックボックスなどのパーツを表示することができるタグです。役割を変更させたいときはtype属性を書き加えます。type属性は、checkbox,radio,button,email,url等があります。

<button>

<button>タグは、ボタンを作成する際に使用するタグです。submit、resetなどのtype属性を書き加えることでWebフォームの入力内容を送信する役割やWebフォームの入力内容をリセットする役割を持たせることができます。

<div>

<div>タグは、囲んだものをひとつのまとまりとして指定する際に使用するタグです。役割が似ているタグで<span>タグがありますが、<span>タグはインライン要素、<div>タグはブロック要素となっています。

CSS

position

positionプロパティはボックスを配置する際に、相対的な位置で配置するか、絶対的な位置で配置するかを指定する際に使用するプロパティです。positionプロパティで指定できるのは配置方法のみで、実際にトップから~pxと指定する際はtop,left,right,bottomを使用して配置します。値としてはstatic(指定なし),relative(相対位置),absolute(絶対位置),fixed(スクロールされても固定)の4つがあります。

z-index

z-indexプロパティは、ボックスの重なりの順序を指定する際に使用するプロパティです。イメージ としてはレイヤーの概念や数学のZ軸が似ています。重なりの順序は値を整数値で入れることにより指定できます。

JavaScript

const

変数の宣言に使われます。constで宣言された変数は再代入が不可能。他にも変数の宣言にはvar,letがある。

function

関数宣言をするための構文です。

技術Tips

1.Webフォームとユーザビリティ

ARIA属性を使う

ARIA属性を使うことで、セマンティックなHTMLにすることを助けます。 セマンティックなHTMLとは、タグや要素の役割や働きを、人にも機械にも分かりやすく記述したHTMLのことです。セマンティックにHTMLを書くことで、アクセシビリティの向上、SEO効果、共同開発者の理解力の助けとなります。

  • アクセシビリティの向上
  • ページの要素をタイトル、見出し、段落、各パーツというように正しく記述することでスクリーンリーダーなどの補助機能がそれを正しく構造的に読み取り、エンドユーザーへと伝えます。障害を持っているエンドユーザーへも親切なWebサイト作りに役立ちます。

  • SEO効果
  • 検索エンジンはHTMLテキストをスキャンしてWebサイトに対する評価を与えます。そのため、HTMLテキストが構造化して書かれていると、検索エンジンも構造の通りにHTMLを読み込み、ペナルティを与えることがありません。その結果、Webサイトに対する評価が上がり、SEOの効果があがるという仕組みです。

  • 共同開発者の理解の助け
  • Webサイトの制作の際、誰かと共同でWebサイトを制作するという場合があります。その際に、タグ本来の使いかたをして、セマンティックに記述してあることで、共同開発者がコードを理解するのを早めることができます。<div>に意味の分からないクラス名が名づけられているだけのコードよりも、<header><nav><article>といったようなタグが使われていた方がコードを読み解く際も分かりやすいことでしょう。

コードをセマンティックにする属性
role属性
この属性を設定することで、HTMLの要素に意味的な情報を与えることができ、支援技術の情報読み取りの手助けをすることができます。
支援技術とは…コンピューターを使うために支援が必要な方のニーズに合うようにデザインされたソフトウェアやハードウェアのことです。
以下がWebフォームで使えるrole属性です。
  • checkbox
  • progressbar
  • radio
  • slider
  • spinbutton
  • textbox

2.Webフォームにおける小テクニック

いくつかの疑似要素を使うことでWebフォームをユーザーにとって より快適なものへ改善することができます。

:valid
:validは入力内容が正しい時に適用されるCSSを指定できる疑似クラスです。ユーザーがWebフォームに入力している際に正しい情報が入力されていますよということをデザインを通して伝えることができます。
使用例

input:valid {
    border: 2px solid blue; 
}

:invalid
:invalidは入力内容が正しくないときに適用されるCSSを指定できる疑似クラスです。入力された値が正確ではないということをユーザーに視覚的に伝えることができます。
使用例

input:invalid {
    border: 2px solid red;
}

:focus
:focusとは 選択中のエリアにCSSを適用させる際に使用する疑似クラスです。ユーザーが選択しているエリアを明確にする、選択中のエリアの補足情報を表示することでユーザーの入力を手助けすることができます。
使用例

input:focus{
border: 2px solid green;
}

疑似要素と同じように、いくつかのHTMLの属性を使うことでWebフォームをより快適なものへと改善することができます。

placeholder

placeholder属性はユーザーが入力欄に入力する前に情報を提供することができる属性です。ユーザーに入力のヒントを提供することができます。

使用例

<form action="" method="post">
<fieldset>
<label>お名前</label>
<input type="text" name="namae" placeholder="お名前">
<label>電話番号</label>
<input type="tel" name="tell" placeholder="お電話番号">
</fieldset>
</form>

:valid、:invalid、:focus、placeholderを使った具体例です。実際に打ち込んでみて、使用感を確かめてください。



contact

お問い合わせ

お問い合わせ

導入・技術・活用に関する
ご相談・ご質問はこちらから(無料)

Tel. 022-796-6101

受付時間:平日10:00~17:00
製品パンフレットをダウンロードいただけます。

お申込み

社員数数名の小規模な企業から有名な大企業まで、
幅広いウェブサイトでご利用いただいています。
最大30日間無料で、ZIPSERVERをはじめてみましょう。