いま、キャロルシステムで「旬」な情報をお届け！
【HeartCore連載】List関数で実現するドロップダウンリスト
Post date : 2017年11月10日｜Created by Nishiyama
こんにちは。
このコラムでは、HeartCoreの標準関数である「List関数」の便利な使い方をご紹介します。
第二回目は、「List関数」の応用テクニック「ドロップダウンリストの実現」についてお話したいと思います。
対象の読者ですが、以下に該当するような方向けのコラムとなります。
- ・List関数をある程度理解されている方
- ・JavaScriptについてある程度知識のある方
なお、「List関数ってなに？」を知りたい方は、以下の記事を先にお読みいただければと思います。
【HeartCore連載】まずはこれから。List関数を使いこなすためのポイント。
動的なドロップダウンリストをつくりたい
Webページの入力フォームとしてよく使われるのが、
<select>タグによるドロップダウンリストです。
商品のカテゴリや都道府県など、手で入力せずに選択できるため便利な入力項目ですよね。
<ドロップダウンリスト>
ドロップダウンリストには、「都道府県を選んだら、その都道府県に属する市区町村が表示される」というような二段階式のものがよくあります。
都道府県のような大カテゴリのデータは少なくても、市区町村のような小カテゴリのデータが大量にある場合に使われます。
この二段階式のドロップダウンリストを実現するには、大カテゴリに属する小カテゴリのデータを取得するという動的な処理が必要です。
最初にすべての小カテゴリのデータを読み込んでおき、JavaScriptで表示を制御する方法もありますが、大カテゴリが選択された時点でサーバからデータを取得する必要があるため、読み込むデータが膨大な場合は処理が重くなります。
HeartCoreでは、このような読み込み処理などを意識せずに、標準機能であるList関数とHeartCoreデータベース、JavaScriptを組み合わせることで、ドロップダウンリストを作成することが可能です。
では、実際に作成してみたいと思います。
JavaScriptとList関数でHeartCoreデータベースからJSONを取得する
「都道府県を選択すると、市区町村のドロップダウンリストが表示される」という二段階式のドロップダウンリストを作成します。作成の流れは以下の通りです。
- <ドロップダウンリスト作成手順>
- ①JSONを生成するList関数を書いたスクリプトコンテンツを登録する
- ②List関数で使うエントリーを作成する
- ③表示用のコンテンツにJSONを取得するJavaScriptを記述する
また、今回は事前にHeartCoreデータベースに都道府県のテーブルとして「prefecture」、市区町村のテーブルとして「municipality」を作成しておきます。
※「コンテンツデータベース」とは、HeartCoreデータベースを指します。
<都道府県テーブル>
<市区町村テーブル>
①JSONを生成するList関数を書いたスクリプトコンテンツを登録する
まず、JavaScriptでアクセスするスクリプトコンテンツを登録します。
ファイル名は「json/municipality」とします。
※ページデザインの都合上、コードを改行して掲載していますが、HeartCoreのテキストエリアに入力する際は改行しないように設定してください。
②List関数で使うエントリーを作成する
次に、①のList関数でエントリーとして指定していた「entry/municipality」を作成します。
エントリーのファイル名は「entry/municipality」とします。
※エントリーについては、「【HeartCore連載】まずはこれから。List関数を使いこなすためのポイント。」にある、
具体的な使用方法の②エントリーページ（初回のみ設定）を参照してください。
また、都道府県表示用のエントリーページを作成します。
エントリーのファイル名は「hc/entry/hccolumn/prefecture」とします。
エントリーページには以下を設定します。
③表示用のコンテンツにJSONを取得するJavaScriptを記述する
最後に、実際にアクセスするページを登録します。今回のコラムではjQueryを用いています。
都道府県のドロップダウンリストに「prefecture」というIDを付与しています。
<HTML>
<Javascript(Jquery)>
以上で作成作業は完了となります。表示用のコンテンツにアクセスすると以下のように二段式のドロップダウンリストが表示されるはずです。
<作成したドロップダウンリスト>
神奈川県の市区町村が表示されるようになりました。
まとめ
今回は、List関数とHeartCoreデータベース、JavaScriptを組み合わせて動的にドロップダウンリストを生成する方法をご紹介しました。
今回はデータ量が少ない参考例ですが、もっと大量のデータを扱う場合にも、今回ご紹介したHeartCore標準機能とJavaScriptの組み合わせるだけで動的なデータ取得が実現できます。
本コラムが少しでも参考になれば幸いです。
HeartCore導入の技術支援も行っています！ まずは、お気軽にご相談ください！
