まずは、メールで連絡があったユーザーポータルのログイン画面にアクセスします。

• https://portal.secure.ne.jp/loginform/

Zoho CRM とはオンラインの顧客管理システムです。a-blog cmsのフォームと連携することによってお客様が入力した情報をZoho CRM 上に蓄積することができます。

カスタマイズ

今回のハンズオンではsimple2017テーマで、拡張アプリ「Zoho」を使って、お問い合わせ内容を「見込み客（Leads）」に新規に登録することが目標です。

下準備

以下の3つのステップでa-blog cmsとzohoを連携します。

1. Zoho CRMの登録

まずはZoho CRM に登録します。機能は制限されますが、無料版がありますのでアカウントがない人はまずは無料版を使ってみましょう。

2. 認証トークンの取得と登録

https://crm.zoho.com/crm/ShowSetup.do?tab=devSpace&subTab=api&action=developerapiにて認証トークンを作成します。下の画像の歯車アイコンをクリックすると認証トークンを作成という項目が出てきます。

その項目をクリックすると、「認証トークン」作成用のモーダルウィンドウが出現しますので、そこに任意のアプリケーション名を入力し、作成ボタンを押すことで認証トークンが取得できます。ただしアプリケーション名は英語にしてください。 この認証トークンをあとで使いますので覚えておいてください。

3. a-blog cmsの拡張アプリ zoho に認証トークンを登録

管理ページ > 拡張アプリ より「拡張アプリ管理」のページに移動します。そのページより下の図のようにZohoをインストールします。

インストール完了後は、管理ページ > ZohoよりZohoの管理ページに移動します。その後、「認証トークンの設定」という項目がありますので、その項目に先ほど覚えておいた認証トークンを入力します。 これでa-blog cmsとZohoを連携させる準備は整いました。

注意

config.server.phpでHOOKを有効にしておく必要があります。

define('HOOK_ENABLE', 1);

拡張アプリ Zohoの使い方

1. Formの権限設定
2. Zohoのカスタムフィールドの設定

1. Formの権限設定

フォームIDごとに、Zohoのどのスコープに対してInsert（データの挿入）及びUpdate（データの更新）ができるかを設定できます。例えば、下の画像の場合、フォームIDがcontactFormのフォームは、Leads及び、Potentialsのスコープに対してInsert権限があり、Contacts及びLeadsの項目に対してはUpdate権限があることになります。 一方で、この場合 submitFormにはLeadsのスコープに対してInsert権限があります。

2. Zohoのカスタムフィールドの設定

次は、カスタムフィールドの設定です。ここではa-blog cmsのフォーム側の変数とZoho側のカスタムフィールドの紐付けを行います。例えば、一番最初の列では、twitterの項目はzoho側のLeadsとContactsのスコープのTwitterに対応しています。

課題

simple2017のお問い合わせフォームを使って、入力された内容をZOHO CRMに見込み客（Leads）として登録しましょう。 そのとき、メールアドレス（Email）名前（First Name）苗字（Last Name）会社（Company）郵便番号（Zip Code）電話番号（Phone）が登録されるものとします。

IPから地域を判別して表示するコンテンツを制御してみる

今回は、どこどこ.jpというサービスを使い、アクセスしている地域により表示するコンテンツを制御してみたいと思います。

例えば、制作会社一覧ページにアクセスした時にアクセスしている県で絞り込んで表示しています。

制作者会社一覧

1. 今回用意するカスタムユニット
2. 管理側のフォームの実装
3. 管理ページの設定
4. エントリー編集画面での確認
5. 表示側のテンプレートの実装
6. 画像ユニットと同等までのカスタマイズ

カスタムユニットの実装には、1つだけ追加する方法（custom.html）と、複数設定する方法（extend.html）があります。今回は複数設定する方法での実装を行います。

カスタムユニット名：custom_svg

• SVGファイル : {svg@path}
• サイズを指定 : {svg_x} , {svg_y}

カスタムユニットの HTML を書くには、カスタムフィールドメーカー に用意されている「カスタムユニット」のフォームから準備します。

ファイルの設置場所は /themes/＊テーマ名＊/admin/entry/unit/extend.html で、カスタムフィールドメーカーで作った HTML を <!-- BEGIN custom_svg -->　〜　<!-- END custom_svg --> で囲みます。

<!-- BEGIN custom_svg -->

　＊　カスタムフィールド　タグ　＊

<!-- END custom_svg -->

コンフィグの3ヶ所の設定をおこないます。「アップロード許可ファイル拡張子」は、忘れがちになりますので注意してください。

管理ページ > カスタマイズ管理 > コンフィグ > エントリー > 編集設定 > ユニット追加ボタン に「custom_svg」というモードを設定します。 ラベル部分は「SVG」とすることで（SVG）ボタンが追加されることになります。

管理ページ > カスタマイズ管理 > コンフィグ > エントリー > ユニット設定 の画面の最後に何も設定していない空の「SVG」ユニットが用意されていますので、（SVG）のボタンを一度クリックして SVG ユニットを追加します。

管理ページ > カスタマイズ管理 > コンフィグ > エントリー > 編集設定 >アップロード許可ファイル拡張子の項目に追記します。SVGファイルはテキストファイルになりますので、「テキストファイルのアップロードを禁止」のチェックボックスを外し、ドキュメントに「 , svg 」と追加します。

この段階で SVG カスタムユニットを追加して保存が可能かどうかをテストしてみましょう。ユニットに（SVG）ボタンが追加されていて追加すると、カスタムフィールドメーカーの HTML のままであれば、以下のようなフォームが表示されます。 まずは項目が正しく出るのを確認して、OKであればスタイル等の調整をしていきましょう。

unit.html には、あらかじめ extend.html の include の記述が準備されていますので、指定の場所に extend.html を用意します。

<!-- BEGIN unit#custom_svg -->
<img src="%{ARCHIVES_DIR}{svg_file@path}" width="{svg_x}" height="{svg_y}" alt="svg">
<!-- END unit#custom_svg -->

これで、正しく設定ができていれば SVG ファイルを表示が可能になります。縦横のサイズを設定してみたり、片側だけ設定してどのように表示になるかを検証してみてください。

時間があれば、以下のような実装を試してみましょう。

配置、代替えテキスト、リンクなどを設定できるようにすると以下のようなフォームを作ることができるようになります。ここまで作って何かの時に使えるパーツとして持っておいてみては、いかがでしょうか。

<!-- BEGIN unit#custom_svg -->
<div class="column-image-{svg_align}">
	<!-- BEGIN_IF [{svg_link}/nem] -->
	<a href="{svg_link}"><!-- END_IF -->
		<img src="%{ARCHIVES_DIR}{svg_file@path}"<!-- BEGIN x:veil --> width="{svg_x}"<!-- END x:veil --><!-- BEGIN svg_y:veil --> height="{svg_y}"<!-- END svg_y:veil --> alt="{svg_alt}">
		<!-- BEGIN_IF [{svg_link}/nem] -->
	</a>
	<!-- END_IF -->
</div>
<!-- END unit#custom_svg -->