はじめに
多くの開発者にとって、Javaはひどく退屈なエンタープライズアプリケーションと同義です。 多数のXML構成ファイル、定型コードなどに関連付けられています。 したがって、原則として、開発者は、特に単純なユーティリティ、マッシュアップなどのプロジェクトを開発するために、Ruby、Python、PHPなどの動的言語の代わりに動的言語を使用します。
ただし、Java環境では、過去数年間で多くの変化がありました。 多くのフレームワークは、開発者を企業（「エンタープライズ」）アプリケーションの負担から解放するように見えます。 Grailsはおそらく最高の1つです。 これは、動的Javaプラットフォーム言語であるGroovyに基づいています。 GroovyはJavaプログラマー向けに特別に作成されたものであり、可能な限り簡単に移行できます。 Grailsは、有名で信頼性が高く効率的なJavaライブラリ（Spring、Hibernateなど）を使用して、すべてのハードワークを実行します。 プラグインのシステムと、ほぼすべての広く使用されているJavaライブラリ用のプラグインもあります。
この投稿では、TwitterとGoogleマップからわずか20分でマッシュアップする方法を紹介します。 最終結果は次のようになります。
開発環境の準備
まず、正しいバージョンのJDKがインストールされていることを確認しておくといいでしょう。 ここから最新のJDKをダウンロードすることをお勧めします 。
それをインストールし、
JAVA_HOME
環境変数を設定して、インストールディレクトリを指すようにします。
次に、ここから最新のGrailsリリースをダウンロードします 。
アーカイブを任意の場所に解凍し、アーカイブが解凍されたディレクトリを指すように
GRAILS_HOME
環境
GRAILS_HOME
設定します。 また、Grailsインストールディレクトリの
bin/
サブディレクトリがPATH環境変数に記載されていることを確認してください。
上記の手順を完了すると、コンソールでGrailsコマンドを実行できるようになります。 これを確認するために
grails help
と入力できます。 使用可能なコマンドのリストが表示されます。
基本的な概念
GrailsはMVC設計パターンに基づいています 。 モデルは、ドメインクラス、コントローラークラスを持つコントローラー、マッピング-GSPページで表示されます。 モデルはTwitter APIによって提供されるため、このプロジェクトではコントローラークラスとGSPのみが使用されます。
クイックスタートガイドを読むことは害ありません。 詳細については、 ユーザーマニュアルを参照してください。 特に、この投稿では コントローラーとGSPに関する情報が役立ちます。
アプリケーションワイヤフレームを作成する
Javaの「エンタープライズ」負担から開発者を解放するGrailsの機能の1つは、メインアプリケーションのフレームワークを自動的に生成する機能です。
これを行うには、単に次を入力します。
grails create-app geo_twitter
これにより、現在の作業ディレクトリに
geo_twitter
アプリケーションが作成されます。 これ以降のすべての手順については、このディレクトリに移動します。
Googleマップを使い始める
Googleマップの統合はシンプルで、Googleによって十分にサポートされています。 ただし、すべてのサービスにアクセスするには、最初にAPIキーを取得する必要があります。 恐れてはいけません-それは簡単、高速、無料です。
まず、メインレイアウトテンプレート（レイアウト）をクリーンアップするとよいでしょう。Grailsロゴなどを削除できます。
grails-app/views/layout/main.gsp
、次のようにします。
<html>
<head>
<title><g:layoutTitle default= "Grails" /></title>
<link rel= "stylesheet" href= "${resource(dir:'css',file:'main.css')}" />
<link rel= "shortcut icon" href= "${resource(dir:'images',file:'favicon.ico')}" type= "image/x-icon" />
<g:layoutHead />
</head>
<body>
<g:layoutBody />
</body>
</html>
次に
grails-app/views/index.gsp
を編集して、次のようなGoogleマップを統合します。
<html>
<head>
<title> Welcome to GeoTwitter! </title>
<meta name= "layout" content= "main" />
<script src= "www.google.com/jsapi?key=YOUR_GOOGLE_MAPS_API_KEY" type= "text/javascript" ></script>
<script type= "text/javascript" >
google.load("maps", "2.x");
google.load("jquery", "1.3.1");
google.setOnLoadCallback(function() {
$(document).ready(function() {
var map = new GMap2(document.getElementById('map'));
var vinnitsa = new GLatLng(49.2325477, 28.4744695); // Replace this by coordinates of your own city ;)
map.setCenter(vinnitsa, 8);
map.addControl(new GLargeMapControl());
});
});
</script>
</head>
<body>
<div id= "map" style= "width:800px; height:600px" >
</div>
</body>
</html>
最終結果は次のようになります。
Twitterのフォームとレイアウト
index.gsp
単純なユーザー名フォームを追加します。
<div class= "form" >
<form action= "" id= "twitter" >
<p>
<label> twitter id: </label>
<input type= "text" id= "name" name= "name" value= "" />
</p>
<p class= "submit" >
<input type= "submit" value= "Map my friends!" >
</p>
</form>
</div>
次に、
web-app/css/main.css
のメインスタイルを次のように置き換え
web-app/css/main.css
。
body {
font-family : Verdana , Helvetica , sans-serif ;
margin : 1em ;
}
#map {
position : absolute ;
width : 800px ;
height : 600px ;
left : 19em ;
top : 1em ;
}
.form {
border : 1px dashed gray ;
width : 15em ;
padding : 0.5em ;
}
.form label {
width : 7em ;
display : block ;
float : left ;
}
.form input {
width : 10em ;
}
.form .submit {
padding-left : 7em ;
}
次のようなものが得られます。
少し特別なサーバーロジックロジックの杯
実際に機能させるには、サーバーロジックを追加する必要があります。 まず、 Twitterで動作するGrailsプラグインをインストールします 。
grails install-plugin twitter
次に、位置情報などを含むTwitterからの友人リストを発行するコントローラーを作成する必要があります。
grails create-controller Twitter
上記のコマンドは、コントローラースケルトンを
grails-app/controllers/TwitterController.groovy
ファイルを
grails-app/controllers/TwitterController.groovy
ます。 JSON形式で友人に関する情報を提供するコントローラーの実装に置き換える必要があります。 また、ジオコーディングサービスに連絡して、指定されたエリアの名前で地図上の座標を取得します。
import grails.converters.*
class TwitterController {
// Google Maps API key
static def API_KEY = "Insert your Google Maps API key here"
// TwitterService instance will be injected into this variable by Spring
def twitterService
def friendsJson = {
// Get friends of given user
def friends = getFriends ( params . name )
// Render friends list as JSON
render ( friends as JSON )
}
private def getFriends ( String userName ) {
def friends = twitterService . getFriends ( params . name )
// Return only the needed fields for each user and retrieve coordinates for location
friends . collect { it ->
[
screenName: it . screenName ,
name: it . name ,
pictureUrl: it . profileImageUrl as String ,
bio: it . description ,
status: it . status ?. text ,
coords: getCoordsFromLocation ( it . location )
]
}
}
/**
* This method gets coordinates on map for given location string.
*/
private def getCoordsFromLocation ( String location ) {
if ( location ) {
if ( location . contains ( "iPhone:" )) {
// There can be coords specified in location
// like iPhone: 39.035248,-77.138687
location = location . replace ( "iPhone: " , "" )
def parts = location . split ( "," )
return [ latitude: parts [0], longitude: parts [1]]
} else {
// Encode location as URL
def encodedLocation = URLEncoder . encode ( location )
// Call web service by retrieving URL content
def response =
"maps.google.com/maps/geo?q=${encodedLocation}&output=xml&key=${API_KEY}" . toURL (). getText ()
// Parse response XML
def root = new XmlSlurper (). parseText ( response )
if ( root . Response . Placemark . size () == 1) {
def coords = root . Response . Placemark . Point . coordinates . text ()
def parts = coords . split ( "," )
if ( parts . size () > 1) {
return [ latitude: parts [1] as Double , longitude: parts [0] as Double ]
}
}
}
}
// No coordinates are determined
return null
}
}
AJAXを使用してサーバーからデータを取得する
コントローラーロジックを作成した後、サーバーからデータを受信してマップに表示するJSコードを作成する必要があります。 このコードはフォーム送信ハンドラーに配置できますが、最初にフォームに正しいアクションを設定する必要があります。
action="${createLink(controller: 'twitter', action: 'friendsJson'}"
次に、次のようなハンドラーを
index.gsp
追加します。
google.load( "maps" , "2.x" );
google.load( "jquery" , "1.3.1" );
google.setOnLoadCallback( function () {
$( document ).ready( function () {
// Create and configure Google Map control
var map = new GMap2( document .getElementById( "map" ));
var vinnitsa = new GLatLng( 49.2325477 , 28.4744695 );
map.setCenter(vinnitsa, 4 );
map.addControl( new GLargeMapControl());
// Add form submit handler
var form = $( "#twitter" );
form.submit( function () {
$.getJSON(form.attr( "action" ) + "?" + form.serialize(), function (data) {
// Clear all markers
map.clearOverlays();
// Loop through friends list and add markers to map
$.each(data, function (i, item) {
if (item.coords) {
var marker = new GMarker( new GLatLng(item.coords.latitude, item.coords.longitude));
map.addOverlay(marker);
var popup = '<img style="width: 48px; height:48px;" src="' + item.pictureUrl + '">' +
item.name + ' (' + item.screenName + ') <br>' +
item.bio + '<br>' + item.status;
GEvent.addListener(marker, "click" , function () {
marker.openInfoWindowHtml(popup);
});
}
});
});
// Indicate that form should not actually be submitted
return false ;
});
});
});
ここで、名前を入力して[友達をマップ]ボタンをクリックすると、次の画像が表示されます。
デモとソース
- デモプロジェクトのソースは、 GitHubリポジトリで取得できます。
- デモは、デモサーバーで見ることができます（英語のブログのリンクを参照）。落ちない場合でも落ちます:)