地図クイズ

RichieCarmichael

<\/HEAD>

<\/A>

Map Quizは、Applications Prototype Labによって開発された楽しいJavaScriptベースのジオゲームです。このゲームは、6つのランダムに選ばれた衛星画像であなたの地理知識をテストします。自宅、学校、職場であなたがジオ天才であることを証明しましょう！

ライブアプリケーションにアクセスするにはこちら<\/A>をクリックしてください。

ソースコードをダウンロードするにはこちら<\/A>をクリックしてください。<\/P>

はじめに<\/H2>
このプロジェクトは、もともとWindows Storeアプリケーションとして開発されたアプリケーションの移植版です。このアプリケーションの目的は、Esri<\/A>技術に基づく楽しい地理中心のゲーム（または「ジオゲーム」）を提供することです。このアプリケーションは主にEsriのArcGIS API for JavaScript<\/A>に基づいており、スコアリングと問題にはArcGIS Online<\/A>（AGOL）ホストサービスが利用されています。元々Windows StoreベースのアプリケーションはAGOL認証を使用していましたが、JavaScript版ではより多くのユーザーに訴求するためFacebook認証を使用することにしました。<\/P>

なぜFacebookなのか？<\/H2>
ゲームの動機の一つは、個人的にも他者との競争でもスリルを味わうことです。ユーザーを識別し、自分や他者のスコアを監視できるようにするためには何らかの認証が必要でした。明らかな選択肢はAGOLですが、このアプリケーションの対象ユーザーの多くはAGOL資格情報を持っていない可能性があります。Facebookは完全に普及しているわけではありませんが確かに一般的です。そのため、ユーザー認証にはFacebookとFacebook APIを使用することにしました。プライバシーへの配慮として、このアプリケーションはプロフィール情報のごく一部、具体的にはプロフィール写真、姓、および名のイニシャルのみを要求し表示します。<\/P>ホストサービスへのアクセス制御<\/H2>
ゲームの問題、回答、およびスコアは2つのArcGIS Onlineホストフィーチャサービスに保存されています。ホストサービスは作成が簡単で強力な空間クエリを可能にします。しかしホストサービスへのアクセスは無制限か組織内限定か特定グループ所属ユーザー限定となります。このゲームは非AGOLユーザー向けなので、ホストサービスへのアクセスをMap Quizウェブアプリケーションだけに制限する方法が必要でした。

これはAGOL上でアプリ登録<\/A>によって実現されました。得られたアプリIDとシークレットはウェブプロキシで使用され、Map Quizウェブアプリケーションだけがホストサービスへ独占的にアクセスできるようになっています。プロキシとその実装方法についてはこちら<\/A>をご覧ください。<\/P>

スピニング<\/H2>
ランディングページの回転マップや各問題の徐々のズームインはCSS3アニメーションとanimo JavaScriptライブラリ（上記参照）を使って実現しています。最新ブラウザではアニメーション効果が滑らかで一貫しています。回転マップについては、白い隙間が角に現れないようマップ端を外側へ拡大する必要がありました。そのためピタゴラス計算による負のマージンを適用しました。回転マップの欠点として画像継ぎ目が時折見えることがあります。<\/P>Silverlight対JavaScript<\/H2>
元Silverlight開発者として、JavaScriptベースのウェブアプリケーションの性能と機能には驚いています。これまでHTML5\/CSS3で実現できないSilverlight機能には出会っていません。一番大きな課題は、大規模で文書化されたSilverlightフレームワークから軽量で文書化が少ない複数のオープンソースライブラリを扱うパラダイムシフトでした。<\/P>使用ライブラリ<\/H2>
前述したように、このプロジェクトはいくつかのオープンソースライブラリに基づいています。以下にそれらライブラリを列挙し説明します。<\/P>animo.js<\/A> by Daniel Raftery<\/A>これはCSSアニメーションのプログラム的作成と管理を提供する小さく強力なライブラリです。<\/EM><\/LI><\/UL><\/DIV><\/>ArcGIS API for JavaScript<\/A> by Esri<\/> Esriによるマッピングと分析用JavaScriptライブラリです。<\/><\/> <\/><\/> <\/><\/> <\/><\/> <\/><\/> <\/><\/> <\/><\/> <\/><\/> <\/><\/> <\/><\/> <\/><\/> <\/><\/> <\/><\/> <\/><\/> <\/><\/> <

Nore8429

Hello, I'm trying to use the app but the button to log in doesn't appear. Can any one tell what it's wrong please.

Thank you.