Geolocationフィールドを使ってBing Mapsにピンを立ててみた

例えばですが、営業所や事業所の位置をGoogle マップみたいな地図サービス上で表示させることってよくありますよね。
それをSharePointでもやってみたいと思い、遅ればせながらSharePoint2013の新機能、Geolocationフィールドを使って試してみることにしました。

Geolocationフィールドってなんぞ？という向きはとりあえずこちらを見てください。
SharePoint 2013 でロケーションとマップ機能を組み込む

要するに、リストにGeolocationフィールドという列を追加して位置情報を登録しておくと、自動でBing Mapsにピン表示してくれるというスグレモノです。
・・・なんですが、実際に使えるようになるには、いろいろ前提条件やら準備やらあってなかなか大変でした。
ので、その顛末をまとめておきます。

以下の記事はPowerShellもVisual Studioも使わずに実装するやり方です。サーバーに権限がなく、手持ちの武器はテキストエディタだけ、というみなさんもぜひ試してみてください。

大前提
オンプレミス環境のみですが、上記MSの記事に、

地理位置情報フィールドの値またはデータをリストに表示するには、SQLSysClrTypes.msi という MSI パッケージをすべての SharePoint フロントエンド Web サーバーにインストールする必要があります。このパッケージは、新しい図形座標、地理、および階層 ID の種類を SQL Server 2008 に実装するコンポーネントをインストールします。

とあります。なので、オンプレ環境で検証する場合は、SQLSysClrTypes.msi がWFEにインストール済みか確認してください。
SharePoint Onlineであれば、既定でインストールされているのですぐに作業が開始できます。

準備その１：Bing Mapsキーを取得する
Bing Mapを使うためには、まず Bing Maps Account Centerでアカウント作ってキーを取得する必要があります。
Microsoftにアカウントがあればそれでサインインできるので、新規でアカウントつくる必要はありません。
サインインすると、左側の「My Account」のところに「Create or view keys」というメニューがあるのでクリックします。

クリックすると以下のような画面になるので、「Application name」に適当に入れてSubmitします。

これで、Bing Mapsキーが取得できました！

※今回は検証目的だったので、個人のアカウントでTrialキーを取得しちゃいましたが、実環境で使う場合はBing Mapの利用規約やライセンスをきちんと確認する必要があります。
ライセンスについてはこちらの記事が参考になりました。
Bing Maps Key のライセンスについて調べてみた – chorus log

準備その２：サイトコレクションにBing Mapsキーを設定する
MSDNの記事
[方法] SharePoint 2013 で、Web およびファーム レベルで Bing Maps キーを設定する
ではPower ShellかVisual Studioでコンソールアプリケーションを作って設定するやり方しか紹介されてません。
サーバーにログインできず、Visual Studioはおろかテキストエディタしか持たないエンドユーザーでは手も足も出ません。
ここでかなりめげそうになりTwitterでぶつぶつ言ってたところ、Microsoft MVP 太田さんから以下の記事をご紹介いただき（ありがとうございます！）、
SP 2013: Getting started with the new Geolocation field in SharePoint 2013 – Tobias Zimmergren's thoughts on technology and business
JavaScriptだけでキーを設定できるのがわかりました。コードを書く際は、上記の記事を参考にしてみてください。

準備その３：Geolocationフィールドをリストに追加する
これで、ようやくGeolocationフィールドを使える状態になったわけですが、このフィールド、MSDNの記事
[方法] SharePoint 2013 で地理位置情報列をプログラムでリストに追加する
によると

既定では、[地理位置情報] 列が SharePoint リストに含まれていません。[地理位置情報] 列を SharePoint リストに追加するには、コードを記述する必要があります。

とあり、ブラウザからGUIで追加することができません。
さらに、上記の記事はVisual Studioを使ってクライアント オブジェクト モデルでフィールドを追加するやり方しか紹介されてませんので、準備その２でご紹介したTobias Zimmergrenさんの記事を参照してJavaScriptでコードを書きます。

・・・と、ここまで書いたところで後出しジャンケンのようで申し訳ないですが、上記準備その２とその３をまとめてできちゃう素晴らしいコードを紹介している記事をみつけました。
My SharePoint Insight: Adding geolocation field to SharePoint Online
こちらのコードをまるっと使えば、フィールドの追加までいとも簡単にできてしまいます。

いやーほんとにありがたいですね・・・
（ただし、私の環境ではHTMLをそのままスクリプトエディタに貼り付けると、inputタグのonclickイベントが消えてしまったので別ファイルにしてコンテンツエディタ webパーツでリンクしました）

Geolocationフィールドを追加したリストの設定を見てみます。

ちゃんと追加されていますね。
これで、ようやくリストアイテムに位置情報を追加できるようになりましたのでアイテムを作ってみます。
新規アイテム作成フォームで、「Specify location」をクリックします。

すると、緯度経度を入力するポップアップが出ますので、入力します。

これだけで、さっそくフォーム上にBing Mapsに位置がピンされた状態で表示されます。

ビュー上で地球儀のマークをクリックするとBing Mapsがポップアップ表示されます。

もうここまでできれば終わったも同然で、あとはこちらのMSDNの記事なり
SharePoint 2013 で地理位置情報フィールドのマップ ビューを作成する
見ていただければいろいろと好きにできると思うのですが、実際作っててはまったりしたポイントをおまけに書いておきます。

はまりポイント１：マップビューでBing Mapsの大きさを変えたい！
私の環境のせいかもなのですが、マップビューにしたときにBing Mapsが横長になってしまって、広範囲の地図を表示させたいときにあんまりうれしくありません。

ウィンドウの大きさに左右されるのかなーってちょっと思ったのですが・・・
で、リストビューwebパーツの編集で高さを固定にしてみたりもしたのですが、地図の大きさは変わってくれず。
最終的に以下のようなCSSで高さを固定しました。

#cardsContainer_WPQ2, #mapContainer_WPQ2{
	height: 650px !important;
}

※CSSで指定しているid名は環境によって違うと思うので、ご自身の環境に合わせて変えてくださいね。

はまりポイント２：左側のリストとポップアップで表示させるプロパティを変えたい！
デフォルトだと、地図左側のリストに表示されるのと、ピンにマウスホバーしたときに表示されるポップアップのプロパティは同じになるようです。

でも、左側のリストはタイトルだけでいいけど、ポップアップではタイトルに加えて詳細説明も、ってしたいシチュエーションがあると思います。
マップ ビューの設定にはそのように出しわけるオプションがなかったので、やはりCSSで表示を変えてみました。
ついでに、プロパティの列名が「Description:」みたいにポップアップ内に表示されてしまうので、それも非表示にしてみました。

div[id^='cardContent'], span[id^='MapCalloutContent'] span.ms-floatLeft.ms-soften{
	display: none;
}

完成形はこんな感じです。

そのほか、参考にさせていただいた記事です。
Adding Geolocation Columns to SharePoint Lists | Marc D Anderson's Blog

いかがでしたしょうか？
なんだか長い記事になっちゃいましたが、参考にしていただけるとうれしいです！

JSリンクを使ってビューにニコちゃんマークを表示してみた

SharePointの「はい／いいえ」のチェックボックス列。値の表示が「はい」と「いいえ」で固定なんですよね。
「有／無」とか「可／不可」とか画像アイコンとか、自分の任意の表示にできればいいのに・・・と思ったことありませんか？私はあります。

そこで、SharePoint2013から導入されたJS リンクの機能を使って「はい」ならニコちゃんマーク、「いいえ」なら残念顔のアイコンを表示してみました。

JS リンクのくわしい使い方は、MVP太田さんのブログに手取り足取りの解説がありますので、まずはそちらをご参照いただくとして・・・
SharePoint 2013 「JS リンク」を試してみた | idea.toString;
続・SharePoint 2013 「JS リンク」を試してみた | idea.toString;

ソースコードです。
JSLink.js

(function(){
	var overrideCtx = {};
	overrideCtx.Templates = {};
	overrideCtx.ListTemplateType = 100;
	overrideCtx.BaseViewID = 1;
	overrideCtx.Templates.Fields = {
		'YesNo': { 'View' : dispIcon }
	};
	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
	function dispIcon(ctx){
		var txt = ctx.CurrentItem.YesNo;
		if((txt == 'Yes')||(txt == 'はい')){
			return '<img src="/[your site]/SiteAssets/emoticon_smile.png" alt="smile">';
		}
		else if((txt == 'No')||(txt == 'いいえ')) {
			return '<img src="/[your site]/SiteAssets/emoticon_unhappy.png" alt="sad">';
		}
	}
})();

上記JSファイルをマスターページギャラリーに格納します。
コンテンツタイプは 「JavaScript の表示テンプレート / JavaScript Display Template」を選択します。
プロパティ設定は以下でOKでした。
対象コントロールの種類 / Target Control Type： ビュー / View
スタンドアロン / Standalone ：上書き / Override
対象範囲 / Target Scope ： {適用サイトのパス}
対象リストテンプレートID / Target List Template ID： 100

そして、表示を変えたいリストビューの設定で、JSリンクの欄に格納したjsファイルのURLを以下のような感じで入力して保存します。
JSリンク欄の設定値： ~sitecollection/_catalogs/masterpage/js/JSLink.js

以上でOKです！表示を任意に変えることができれば、今まで以上に「はい／いいえ」列の活用場面が増えそうですね。

そのほか、海外にはJSリンクについてたくさん記事がありますが、私には以下がわかりやすかったです。
JS Link for SharePoint 2013 Web Parts–A Quick Functional Primer | idubbs.com

なお、画像のニコちゃんアイコンはこちらのサイトからいただきました！
famfamfam.com: Silk Icons

SharePoint 2010のwikiページを2013のosloテーマっぽくするCSS

先日ひさびさにバンドの練習で歌ってきたのですが、背中と脇腹が筋肉痛になりました。普段からまじめにトレーニングしないとだめですね・・・

さて、SharePoint2013になってosloテーマができ、サイドリンクバーなしの中央固定幅のレイアウトが選べるようになりました。
SharePoint2010のチームサイトでもosloっぽいレイアウトにしてみたく、CSSで強引につくってみました。
これを適用したいwikiページにコンテンツエディタ webパーツで埋め込んでください。

CSS

#s4-leftpanel
{
    display : none;
}
.s4-ca
{
    margin-left : 0px !important;
} 

.ms-rtestate-field{
    max-width: 1024px;
    min-width: 768px;
    margin: 0 auto;
    padding: 0;
}

max-width、min-widthはお好みや環境に応じて設定してください。

いちおう、wikiページのテキストレイアウトをいろいろ変更しても中央固定幅になることは確認してますが、そんなにしっかりテストはしてないので、実環境に適用される場合は副作用がないか十分検証してくださいね。