本日は「 Drupal と Google Maps で作るかんたん地図アプリ」と題しまして、 Drupal （ドルーパル）を使ってちょっとした地図アプリを作る方法をご紹介してみたいと思います。
Drupal に馴染みのない方には Drupal を使えば安定した地図アプリがスムーズに作れることを実感していただけるかと思いますし、 Drupal 開発をはじめて間もないという方には定番モジュール Views を使った一覧マップの作り方の参考にしていただけるかと思います。
Drupal の大きな特徴のひとつは、いわゆる「 DRY の原則」「車輪の再開発の防止」の風土がコミュニティ全体で守られていることです。 「地図情報を扱いたい」「 Google Maps 上で一覧表示したい」というようなよくある要件については、コーディングを行わずに実現できてしまうことが少なくありません。
Drupal は一般には「 CMS 」（コンテンツマネジメントシステム）というグループに分類されますが、 Web アプリケーションフレームワーク的な機能を豊富に備えています。 海外では「 CMF 」（コンテンツマネジメントフレームワーク）と呼ばれることもあり、かなり独自のポジショニングをしているソフトウェアです。
想定読者
今回は Drupal の利用を検討中の Web 担当者の方、コーディングなしで地図アプリを作ってみたいという方を対象にしています。
今回作るもの
今回の成果物を先にあげておきたいと思います。 次の画像で表されるイメージのような機能を作ります。
必要なもの
今回は以下の環境が整っている前提で始めていきます。
- Drupal コア
- Drupal モジュール
Drupal の動かし方などがあまりよくわからないぞという方には以下のカテゴリの記事などがご参考になるかと思います。
作り方
では実際に作っていきたいと思います。 大まかなステップは次のとおりとなります。
- Drupal サイトをセットアップ
- 必要なモジュールをインストール
- 地図情報を持つコンテンツタイプを作成
- 詳細ページの表示方法を設定
- 一覧ページを作成
以下順に見ていきましょう。
1. Drupal サイトをセットアップ
いわずもがなですが、まずは Drupal をセットアップします。 XAMP/MAMP や VirtualBox を使うのがかんたんかもしれません。 このあたりの作業にあまり馴染みのない方は以下の記事などをご参考にしてみてください。
2. 必要なモジュールをインストール
これから作成する地図アプリに必要なモジュールをインストールします。 Drupal の地理情報/地図情報を扱うモジュールは数多くありますが、今回は比較的かんたんに利用できる以下のモジュールを使うことにしましょう。
「依存するモジュールがないよ！」と怒られる場合はそれらもあわせてインストールしてください。 Views などの定番モジュールがあわせて必要になるかと思います。 このあたりは Drush を使うととてもスムーズです。
すべてインストールが完了したら次のステップへと進みましょう。
3. 地図情報を持つコンテンツタイプを作成
まずはモデルとなる地図情報を持つコンテンツタイプを作成しましょう。 Drupal の管理画面から「構造 -> コンテンツタイプ」へと進み、コンテンツタイプを新規作成します。
コンテンツタイプ新規作成ページのパスはこちらです。
/admin/structure/types/add
今回は「 Shop 」という名前のコンテンツタイプにします。
デフォルトのタイトルとボディに追加する形で 2 つのフィールドを追加しましょう。
- 住所
- 緯度経度
住所: 利用者が住所を入力する場所になります。フィールドタイプに「 Text 」を選んでください。その後の設定はデフォルトのままで保存しましょう。「 Text processing 」は「 Plain text 」にしておきましょう。
緯度経度: 住所フィールドの内容から緯度経度を自動計算して格納する場所です。ユーザーには見せずに裏側で格納するためのものとなります。こちらはフィールドタイプに「 Geolocation 」を選んでください。さらにウィジェットタイプは「 Geocode from another field 」を選んで、その後の設定は「 Geocode from field 」には上で作成した「住所」を、「 Geocoder 」には「 Google Geocoder 」を入れてください。
以上でコンテンツタイプの作成はひとまず完了です。 これで CRUD に必要なモデルと画面ができました。
続いて個別ページの表示方法をカスタマイズしましょう。
4. 詳細ページの表示方法を設定
管理画面の詳細ページの表示方法の設定ページを開きます。 上で「 Shop 」という名前のコンテンツにした場合、このページのパスは次のとおりになるはずです。
/admin/structure/types/manage/shop/display
こちらの画面で先ほど作成した 2 つのフィールドの設定を行います。
- 住所
- 緯度経度
住所: フォーマットを「 Google Map from one-line address 」に変更します。こちらの設定により住所情報が Google Maps 上のピンで表示されるようになります。今回は割愛しますが、詳細の設定もできますのでお好みに応じて右側のナットアイコンをクリックして設定を行ってください。
緯度経度: フォーマットを「非表示」に変更します。
詳細は次の画像のイメージを参考にしてください。
これでおおよその設定ができました。 ここまで来たらひとつサンプルコンテンツを作成してみましょう。
私はスタジオ・ウミを登録してみました。 以下のようなページが表示されるようになればここでの設定は完了です。
ここまで来たら一応地図連携のアプリはできますが、最後の仕上げに一覧ページも作成してみましょう。
5. 一覧ページを作成
今回一覧の地図を作るには Drupal の定番モジュールである Views とその拡張モジュールを使います。 拡張モジュールについてはステップ 2 でインストール済なのでそのまま進めていきましょう。
同じ管理画面より Views の view 作成画面を開きます。 view 作成画面は Views 本体だけでなく Views UI というサブモジュールを有効にする必要があります。 モジュールの管理ページから Views UI を有効化してください。
/admin/modules
無事有効化できたら view の作成画面を開きます。 パスは次のとおりです。
/admin/structure/views/add
こちらの画面で以下のとおりに入力して保存してください。
- View name: shop list
- Show Content of type Shop sorted by Newest first
- Create a page: チェックオン
- Path: http://ドメイン/shop
- display format: Map (Google API, via IPGV&M)
その他の部分はデフォルトあるいは自動入力される内容のままで OK です。 いったん保存したら編集画面を開きましょう。
FIELD の部分に以下の 3 つを追加してください。
- 緯度経度フィールド: lat: 緯度
- 緯度経度フィールド: lon: 経度
- 住所フィールド: 住所
画面上で実際に選択する際には上の名前そのままで出てくるわけではないため、適宜読み替えていただければと思います。
つづいて FORMAT のところで「 Map (Google API, via IPGV&M) 」が正しくセットされていることを確認したらその横の「 Settings 」をクリックして以下のとおりに設定しましょう。
- Name of latitude field in Views query: Content: 緯度経度
- Name of longitude field in Views query: Content: 緯度経度
ここには同名の「緯度経度」というものが 2 つあり少し紛らわしいのですが、上の「 lat 」「 lon 」の区別があるため FORMAT 上の並びを参考にどちらか正しそうなものを選択する必要があります。 上の順序で FORMAT を並べている場合は「緯度」が上に来るようになっているので「 lat 」の方には 2 つある上の方を、「 lon 」は下の方を選択しましょう。
ここまでひととおり完了したら「 Save 」をクリックして view を保存します。
設定が問題なく行えている場合は、コンテンツを追加したら自動的に地図上での一覧が生成されるはずです。 サンプルを実際に追加して動作確認してみましょう。
パスは上の「 Path 」のところで設定したとおり /shop になるはずです。
私の環境では次のような一覧が表示されるようになりました。
さらに設定や調整を少し加えれば、次のようなページにすることができます。
以上です。 いかがだったでしょうか？
今回は Drupal と Google Maps で地図アプリを作る方法についてご紹介しました。 Drupal のコアといくつかのコントリビュートモジュールを使うことで、コーディングを行わず管理画面での設定だけで地図情報を扱うモデルの CRUD 一式の機能と詳細画面、一覧画面を作ることができました。
実際の開発では他にも気にすべきことがたくさんありますが、地図アプリの核となる部分はこのような感じで比較的かんたんに作成できるということが感じ取っていただけたのではないかと思います。
募集しています
スタジオ・ウミは「Drupal」に特化したサービスを提供する Drupal のエキスパートチーム。
フルリモート＆フレックス制だから、働く場所を選ばず時間の使い方も自由です。
そんなワークライフバランスの整った環境で、当ブログに書かれているような
様々な技術を共に学びながら、Drupalサイト開発に携わってみたい方を募集しています。
まずはお話だけでも大歓迎！ぜひお気軽にご連絡ください。