PowerCMS™

[セミナー情報]【東京開催】PowerCMS X 1.1 リリース説明会を行います。

PowerCMS ブログ

ホーム > PowerCMS ブログ

気づけばもう7月も後半ですが、皆さまお元気に過ごされていますしょうか?

早速ですが、以前の記事でContactFormのフォーム項目のカスタマイズ方法をご紹介しましたが、

今回はウェブ上でよく見られる、 "郵便番号から自動で住所入力する" タイプの住所入力欄を持つフォームについて、
ContactFormを用いて設ける方法をご紹介します。

はじめに

今回は、企業の担当者様からのお問い合わせを受け付けるフォームの構築を例に挙げて説明します。

執筆時点において、ContactFormの標準のフォーム項目には "郵便番号から自動で住所入力する" タイプの住所入力欄は用意されていません。
その為、今回も標準のフォーム項目をベースに、CMSテンプレートをカスタマイズして作成します。

前提

  • 対象となるウェブサイトもしくはブログに、フォーム・フォーム項目・フォームと関連付けるウェブページを、それぞれ設ける。
    • ※ここではウェブサイトを例に説明します。
    • ※フォーム・フォームと関連付けるウェブページは、ウェブサイト・ブログの新規作成時にPowerCMS系のテーマ(例:「PowerCMS Eiger」)を用いると自動作成されます。ここでは、既にこれらフォーム・ウェブページがあるものとします。
  • 「PowerCMS Eiger」テーマを利用。

作成手順

1. 住所自動入力を動作させる為のJS周りの変更

今回もjQueryをheadタグの前で読み込むように変更を行いますが、今回はそれに加え、住所自動入力機能の為のJSライブラリ「ajaxzip3」を併せて追加します。
※「ajaxzip3」については後述で説明します。

具体的には、対象ウェブサイトのCMSテンプレート「ウェブページ」を次の様に変更します。

フォームの有効なウェブページのみ、headタグの前にjQueryライブラリを読み込むlinkタグを出力する:

<mt:If tag="contactformselector">
    <script src="<$mt:StaticWebPath encode_html="1"$>jquery/jquery.min.js"></script>
    <script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>
</mt:If>
  </head>

コード下端付近のjQueryライブラリを読み込むlinkタグを出力しないよう、MTUnlessタグで囲む:

<mt:Unless tag="contactformselector">
    <script src="<$mt:StaticWebPath encode_html="1"$>jquery/jquery.min.js"></script>
</mt:Unless>
    <script src="<$mt:Link template="javascript_theme" encode_html="1">"></script>
  </body>
</html>
</mt:IncludeBlock>

2. フォーム項目を作成する

対象ウェブサイトに、フォーム項目を新規に追加します。
次にフォーム項目を一括作成する為のCSVファイルを設けました。

フォーム項目(郵便番号から住所自動入力).csv

当該CSVを用いて、次の手順でフォーム項目を作成します。

1.フォームを作成する対象のウェブサイトの管理画面のメニュー「フォーム>フォーム項目」をクリック。

→「フォーム項目の管理」画面が開く。

2.フォーム項目一覧上端のテキストリンク「CSVからインポート」をクリック。

→「参照」ボタンが表示される。

3.「参照」ボタンをクリックし、前述のインポート用CSVファイルを選択する。

→「参照」ボタン右側に、テキストリンク「送信」が表示される。

4.テキストリンク「送信」をクリック。

→ CSVのインポートが実行され、CSVに記載されたフォーム項目が作成される。

作成が成功すると、「フォーム項目の管理 」画面にて次のフォーム項目がある事が分かります。

  • 会社名
  • 本店所在地

フォーム項目の概要は次の通りです。

  • A.会社名:
    • 標準機能で作成した、一行テキスト型のフォーム項目。
  • B.本店所在地:
    • 標準機能で作成した一行テキスト型のフォーム項目をベースに、カスタマイズして作成した住所入力欄のフォーム項目。次の入力項目から成る。
      • 郵便番号(上3桁 + 下4桁のテキスト入力)
      • 「住所自動入力」ボタン
      • 「都道府県選択」ドロップダウン
      • 市区町村以降の住所を入力する為の1行テキスト入力
    • 郵便番号を入力し、「住所自動入力」ボタンを押すと、「都道府県選択」ドロップダウンと1行テキスト入力に、住所が自動入力される。

カスタマイズ後のイメージ

フォームの入力画面は次のようになります。

190718_1415__フォーム(入力初期表示).png

フォーム項目の郵便番号入力欄に入力して「住所自動入力」ボタンを押すと、

190718_1418__フォームに郵便番号入力.png

都道府県と市区町村以降の住所が自動で入力されます。

190718_1427__フォームに住所自動入力後.png

住所自動入力の仕組み

今回は住所の自動入力に、株式会社人気組を中心とする有志の方が公開されているJSライブラリ「ajaxzip3」を利用させていただいております。

配布元のGitHubリポジトリ
https://github.com/ajaxzip3/ajaxzip3.github.io

本ライブラリは MIT License で公開されているものです。

今回作成したフォーム項目「本店所在地」には、次の処理を行う為のJSコードが組み込まれています。

  • 「ajaxzip3」の機能を利用して郵便番号から住所の情報を取得する。
  • 取得した住所を住所入力欄に設定する。

なお、前述JSコードにおいて、「住所自動入力」ボタンを押した際に実行される処理の中で次の様に wait(1) を実行しているのですが、

            $.when(
                AjaxZip3.zip2addr('<mt:var name="field_basename" />-ajaxzip3',
                    '', '<mt:var name="field_basename" />_pref', '<mt:var name="field_basename" />_another'),
                wait(1)
                ).done( function(){
                    setValueToField();
                    } );

これは AjaxZip3.zip2addr() の処理が確実に終わった後に done() 内の処理を実行させる為のものです。

最後に

冒頭の以前の記事でも述べてきましたが、PowerCMSのContactFormは、CMSの管理画面上からのカスタマイズで、CMSの標準機能に無いタイプのフォーム項目を作成し利用する事ができます。
今後も皆さまが実際にカスタマイズをされる際により簡単にできるように、今後もカスタマイズの例を紹介していく予定です。

カテゴリー
PowerCMS 4PowerCMS 5テンプレート作成Tips技術情報

CMS管理画面で出力ページの情報を個別に入力できるようになっていると、
入力する人にとっては出力されるHTMLを気にする必要がないためミスの防止やトーン&マナーの統一といったメリットがあります。

しかし入力項目が多すぎると編集画面の情報量が増えすぎて入力が煩雑になり、
かえって分かりづらくなるといった状況は往々にしてあるかと思います。

PowerCMSはスニペットフィールドという機能を使って便利な入力欄を作成することができますが、
今回は既存のカスタムフィールドをグループ化するためにスニペットフィールドを使う方法を紹介させて頂きます。

実装イメージ

下記の編集画面のキャプチャ画像はスニペットフィールドを使用して複数のカスタムフィールドを一纏めにしたものです。

snippet_02.png項目が増えすぎて縦に長くなってしまった入力欄を一つ分のサイズに収めた上でタブで切り替えられるようにしてあります。

実装手順

以下の設定でカスタムフィールド(スニペットフィールド)を作成します。

システムオブジェクト (任意)
名前 (任意)
種類 スニペット
オプション _dummy_
ベースネーム (任意)
テンプレートタグ (任意)

既定値


<script>
	jQuery(function($){
		var basenames = [
			'customfield_a',
			'customfield_b',
			'customfield_c',
			'customfield_d',
			'customfield_e'
		];
		
		var this_basename = '<$MTVar name="basename"$>';
		
		var $container = $('<div>').appendTo('#customfield_' + this_basename + '-field > .field-content');
		var $tabs = $('<ul>').appendTo($container);
		
		$.each(basenames,function(){
			var basename = this;
			var $field = $('#customfield_' + basename + '-field');
			var $content = $field.children('.field-content');
			
			$content
				.removeClass('.field-content')
				.attr('id','customfield_' + basename + '-field-tab-content')
				.appendTo($container);
			
			var $tab = $('<li>').appendTo($tabs);
			var $anchor = $('<a>')
				.attr('href','#customfield_' + basename + '-field-tab-content')
				.text($field.children('.field-header').children('label').text())
				.appendTo($tab);
			
			$field.addClass('hidden');
		});
		
		$container.tabs();
	});
</script>

上記「既定値」内の下記部分でまとめたいカスタムフィールドのベースネームを指定することでグループ化することができます。(形式はJavaScriptの配列です)


'customfield_a',
'customfield_b',
'customfield_c',
'customfield_d',
'customfield_e'

各カスタムフィールドの入力欄をこのスニペットフィールド内に集約して表示させます。
そのため、入力内容を取り出すテンプレートも各カスタムフィールドのテンプレートタグで取り出す事ができます。

つまるところ、スニペットフィールドを入力欄としてではなく、
編集画面に任意のJavaScriptを差し込む手段として使っているということになります。

メリット

スニペットフィールドは本来、高度な入力欄を提供する目的で使用することが多く、
今回ご紹介した入力欄のグループもスニペットフィールドの通常の機能で作成することはできます。
が、例えば以下のような使い方をすることができます。

  • 既に運用が始まっている環境でカスタムフィールドの入力欄を整理する
    • 既に登録されている入力データをスニペットフィールドへ移し替える必要がない
    • テンプレート修正の必要がない
  • CSVインポート機能による記事の作成などでCSVの変更が必要がない
  • スニペットフィールドでの実装で難易度が高い画像やオブジェクト(記事やページ等)選択フィールドなどの標準フィールドがそのまま使える

運用状況に合わせて利用していただければと思います。

注意点

実際のカスタムフィールド入力欄とグループ化を実施しているスニペットフィールドが別れているため、メンテナンス時にどこを直せば入力欄が変更できるのか分かりづらくなりますので、
スニペットフィールドのソース内にコメントを記述しておくなど工夫が必要となります。

ご参考

カテゴリー
設定・管理画面カスタマイズ
投稿者
Fujimoto

先日お客様より「スライダーのがリンクしなくなっています。お調べいただけますでしょうか。」というご依頼がありました。すでに記事になっているサイトなどもありますが、弊社で行った作業も書いておきたいと思います。

そもそも、これは Google Chrome や Safari など、WebKit 系統の Web ブラウザの2019年3月ごろの更新で仕様変更があり、スライダーに利用している JavaScript の「スワイプ操作またはマウスでのドラッグ操作によるスライド切り替え機能」が動作しなくなったことで、クリック時のリンク先への遷移ができなくなっていました。

bxSlider の旧バージョンを利用していて、スライドがリンクになっている場合に、PC 版 Google Chrome でスライダーページを開いて、スライドをクリックしてみればチェックできます。

正攻法の対応としては
https://cdnjs.com/libraries/bxslider
などから入手可能なバージョン 4.2.15 以上に更新すれば解消します。

今回は bxSlider バージョン4.2.15への更新はせず、bxSlider のオプションで touchEnabled を false にするようにしました。

<script>
$("#hoge ul").bxSlider({
controls: false,
pager: false,
auto: true,
autoHover: true,
pause: 6000,
touchEnabled: false>>>変更点
});
</script>

スライドショーを実装した案件がある方は確認してみた方がいいかもしれません。

カテゴリー
サイト制作全般

Recent Entries