FLOSS Manuals

 English |  Español |  Français |  Italiano |  Português |  Русский |  Shqip

OpenStreetMap Ja

Customising Potlatch 2

Potlatch 2のカスタマイズ

Potlatch2の実行に必要なものはフラッシュ互換ブラウザとインターネット接続だけです。potlatch2のカスタマイズには、基本的なウェブ サーバとそこにファイルをアップロードする権限があればできます。フラッシュやActionscriptの知識は必要ありません。Potlatch2をビ ルドする必要はありません。

Potlach2には特定のニーズに対してエディタのスタイルを決めたりカスタマイズできる機能があります。Potlatch2エディタを入手してあなた 自身のウェブサイトに置くことができ、ユーザが、あなたのウェブサイトの特定の関心領域に関連するOpenStreetMapデータを追加したり編集した りするのを容易にします。例えば、CycleStreets ウェブサイト (http://www.cyclestreets.net/) はOpenStreetMapデータを使ってサイクリスト向けの旅行計画サービスを提供しています。cycleStreetはカスタマイズしたオンライン エディタを提供することで、人々がサイクリストに関係するデータを追加したり、旅行計画を改善したりすることを容易にしています。別のサンプルはTom ChanceによるopenEcoMaps (http://www.openecomaps.co.uk) で、これはグリーンな空間についてのものです。

あなたは、Flash/ActionScriptのコードを書いたりPotlatch2をコンパイルしたりすることなしに、マップのスタイルとマップ左サ イドのコントロールを変更することができます。しかし、これにはHTML及びJavaScriptと同様にウェブサーバ運用の基礎を知っている必要があり ます。

あなた自身のサイトにPotlatch2をデプロイする

あなたは自分のサイトにカスタマイズ無しでPotlatch2を追加することができます。このアプローチは初めてやるのに良いやり方です。

ファイルの入手

http://random.dev.openstreetmap.org/potlatch2/ から features/, icons/ そして fills/ ディレクトリを含む全てのファイルをダウンロードします。ここにはpotlatch2に必要なリソースファイルがあります。

アプリケーションの実体はpotlatch2.swf です。potlatch2.htmlというファイルはカスタマイズした追加内容をユーザが訪問して使うことができるためのウェブページのサンプルファイル です。potlatch2のswfとリソースは頻繁に更新されますので、最新の改善を確実に入手するために定期的にファイルを更新してください!

potlatch2ディレクトリにある全てのファイルをあなたのウェブサーバ上にアップロードしてください。potlatch2.swf及び potlatch2.htmlはpotlatch2ディレクトリに置いてください、しかしpotlatch2ディレクトリのサンプルファイルは以下のサン プルで上書きして下さい。

Potlatch 2 のセットアップ

あなた自身のウェブサイトでアプリケーションを稼動させるためにはpotlatch2.swfファイルを修正する必要のある設定があります。

あなたは最初にマップの開始位置とズームレベルを指定する必要があります。これを行うために、あなたはurlの末尾にあるlat,lonそしてzoomク エリーパラメータで渡します。ズームレベルは1から18まであり、1は全世界ビューで、18はとても詳細であるということを憶えておいてください。例えば あなたのURLが http://mycustompotlatch2.com/potlatch2.html だとすれば、次の"?lat=53.293456&lon=-6.20537&zoom=17"を終端に追加したくなるでしょう。また、 あなたは以下のような記述行のあるHTMLファイルの中でクエリーパラメータが渡されなかった場合のデフォルトの位置を指定することができます:

lat=53.2934;
lon=-6.2053;
zoom=16;

potlatch2.html 構成ファイルのデフォルトの構成はOpenStreetMap開発サーバを指しています。もし間違っていたら結果の出ないテストにこのサーバを使うことが できます。テストが終わり、メインのOpenStreetMapサーバを使いたい時には"api06.dev"を"www"で置き換えてください。

args["api"] = "http://api06.dev.openstreetmap.org/api/0.6/";
args["policy"] = "http://api06.dev.openstreetmap.org/api/crossdomain.xml";
args["oauth_policy"] = "http://api06.dev.openstreetmap.org/oauth/crossdomain.xml";
args["oauth_request_url"] = "http://api06.dev.openstreetmap.org/oauth/request_token";
args["oauth_access_url"] = "http://api06.dev.openstreetmap.org/oauth/access_token";
args["oauth_auth_url"] = "http://api06.dev.openstreetmap.org/oauth/authorize";
args["serverName"] = "api06 Test On Dev";

あなたは自分のウェブサイトからマップ情報を閲覧するためにすぐにPotlatch2を使うことができます。これは開発サーバでもメインの OpenStreetMapサーバでも動作します。しかし、実際にデータを編集する際にはOpenStreetMapであなたのウェブサイトを新しいウェ ブサイトとして登録しなければなりません。これを行うには、OpenStreetMapアカウントが必要で、OpenStreetMapウェブサイトにロ グインする必要があります。

ウェブページ右隅にあるあなたのユーザ名をクリックしてあなたのOpenStreetMapユーザページに行ってください。それからoauth設定をク リックし、ページ最下部であなたのアプリケーションを登録してください。Potlatch2をカスタマイズするウェブサイトごとにアプリケーションを登録 しなければならないことに注意してください。テストサーバに向けたテストをするにも (api06.dev.openstreetmap.org)、そのサーバに登録しなければなりません。

注意: Flashのセキュリティが許可していないので、あなたのコンピュータ上でローカルにファイルシステム経由でページをオープンしたりOSMサーバと会話することはできません。

入力待ちになったら、あなたのインスタンスの名前 (例. "My Custom Potlatch 2")とそのURL (例. "http://mycustompotlatch2.com/")を入力してください。

'コールバックURL'の下で、オプションとして中間のページを入力することもでき、これであなたのユーザに、ログイン済みでウェブサイト上での編集を開始できる、ということを知らせることができます。


あなたのpotlatch2インスタンスを動かすには、マップを変更チェックボックスをチェックして登録をクリックしてください。OAuthの 'consumer key' と 'consumer secret'を得られます。これらをコピーして下記例にあるようにあなたのHTMLファイルの関連行に貼り付けてください。

args["oauth_consumer_key"] = "fiM1IoqnKJk4JCfcl63DA";
args["oauth_consumer_secret"] = "7fYgJK9M4vB1CvBZ6jEsPGxYK9UD1hEnI6NqTxNGs";

あなたのpotlatch2インスタンスは準備できました!

Potlatch2のデプロイについてもっと知りたい場合は次を参照してください: http://wiki.osm.org/wiki/Potlat2/Deploying_Potlat2

コントロールの編集

Potlatch2エディタの左側のアイコンはXMLファイル resources/map_features.xml に定義されています。このXMLファイルは一般にプリセットファイルと呼ばれています。単一の大きなファイルだと一緒に動作させるのがむしろ難しいので、 コントロールのいくつかを一緒にグループ化するためにこのファイルの中に他のファイルへのリンクがあります。map_features.xmlファイルに 追加のXMLファイルをリンクするには、"include"タグを使います。

<include file="map_features/barriers.xml" />

注意: ネストしたファイルは妥当なXMLである必要があります、これは単一のルート要素を -規則により、<featureGroup/>を持つべき、ということを意味します。

プリセットファイルに追加するXMタグの種別には所定の規則があります。

feature はユーザに"これは何か"を提示できる明確な、認識しやすい種別です。例えば:国道、学校、貯水池。

feature カテゴリグループは似たものを集めます。例えば:道路、小道、宿泊施設、スポーツ及びレジャー。

ひとつのタグに対する input はひとつの編集可能なコントロールです。例えば:yes/noオプション付きのドロップダウンウィンドウ、または名前用の自由入力テキストフィールド。

input set は input のグループです。ファイルのどこでも再利用でき、他の入力セット内でネストすることができます。例えば:橋の種別のドロップダウン(bridgeタグ)と レイヤーのスライダー(layerタグ)は一緒にしてひとつの input set にすることができます。

これらのタグを使ってシンプルなタグエディタを作成するには、最初にあなたが興味を持っている特定のタグ、例えば"学校"の feature を作成すべきです。次に category を作成します、この例では"教育"に属します。そしてどの種別の形状を適用するか定義します - 例えば、point なのか line なのか area なのか。このケースでは学校はポイントまたはエリアのどちらにもなりえます。feature を定義するタグとこの feature に追加または編集できる input を追加します。学校用のXMLの短い記述例は下記にあります。

 <feature name="School">
	<category>eduction</category>
	<icon image="features/school.png">${name}</icon>
	<help>http://wiki.openstreetmap.org/wiki/Tag:amenity%3Dschool</help>
	<point/>
	<area/>
	<tag k="amenity" v="school"/>
	<inputSet ref="buildingInfo"/>
</feature>

この特別な例の中には説明の必要な明細が2つあります。"<point/>" と "<area/>"はともに学校がポイントまたはエリアで描くことができることを示します。加えて、 "${name}"は feature の実際の名前です。

line, area, point 及び relation 要素はこの feature がどのエンティティ種別になり得るかということを定義します。例えば、国道は<line/> または <area/> (ロータリー用)に; スーパーマーケットは <area/> または <point/>に; サッカー場や野球場は <area/>にのみなり得ます。

tag 要素はこの feature を識別する全てのタグを定義します。

name 属性はユーザが選択できるドロップダウンメニュー内に表示される名前を定義します。

category 要素はこの feature がグループ化されている feature category (下記参照)を定義します。

help 要素 はこの feature についてのより詳細な情報を提供するURLを定義します。

input 要素 はこの feature 用に利用できる編集コントロールを定義します(下記参照)。

inputSet 要素はこの feature が利用できる入力セット(編集コントロールのグループ)を参照します。その ref 属性はファイルのどこか別の場所で定義されたinputSetのIDに関連します(下記参照)。

icon 要素はtagパネル内のfeature のグラフィカルな外見を定義します。

Tag 要素の文法

tag 要素はこの feature を識別する全てのタグを定義します。しばしばこれは単一のタグ(例えば; highway=trunk)となりますが、ひとつ以上の要素を指定することもできます(例.amenity=public_building; building=yes )。

個々について、その k 属性はマッチするキーを定義し、その v 属性はマッチする値を定義します。これらのタグはユーザがドロップダウンメニューからこの feature を選んだときにオブジェクトに適用されます。

オプションの vmatch 属性ではマッチしたが適用されない値を指定することができます。これは古い、または数の少ないタグ付けスキームとの互換を取るのに有効です。属性は正規表現としてパースされます (特別な値 "*" は"任意の値"を意味します)。例えば:

<tag k="route" v="hiking" vmatch="hiking|foot"/> 

Icon 要素文法

icon 要素は feature のタグパネル内でのグラフィカルな外見を定義します。通常<feature/>内にありますが、同じフォーマットはルートリレーションの input でも使われます(下記参照)。

その image 属性は feature が選択されて、ドロップダウンメニューが開いた時に表示される画像のURLです。

その dnd 属性はドラッグ&ドロップアイコンパネル内に表示される画像のURLです(デフィルト:image 属性と同じ)。

その background 及び foreground 属性はHTMLフラグメントが表示される色です。

その content は feature が選択された時に画像の隣に表示されるHTMLフラグメントです。タグ値(nameやrefのような)は ${key} 文法を使ってエンベッドされるかもしれません。

フィーチャー カテゴリ

フィーチャーカテゴリは似たものを集めます。サンプルのカテゴリは道路、小道、宿泊施設、スポーツ、そしてレジャーを含んでいます。これらのカテゴリの明細はメインのドロップダウンfeatureメニュー内に現れます。例えば road カテゴリの道路の種別明細にはresidential, primary, secondary といったものが現れます。

feature categoryはこのように定義します:

<category name="Roads" id="roads"/> 

feature をその category に割り当てるには、<feature>要素内の<category>タグを使います。

<category>roads</category> 

Inputs

input は単一のタグ用の単一の編集コントロールです。これは通常<feature/>内の要素です。feature 間で共有できるようにするには、<inputSet/>の一部を形成することもできます(下記参照)。

input の最もシンプルなフォームは freetext inputです:

<input type="freetext" presence="always" category="Naming" name="Ref" key="ref" description="Reference number of the road"/> 

key 属性はどのOSMキーを編集するか定義します(例えば、"highway")。

name 属性はコントロールが表示するラベルを定義します。

description 属性はマウス通過時に表示されるツールチップを定義します。

layout 属性はコントロールのレイアウトが'horizontal' か 'vertical' (デフォルト)かを定義します。

inputタグ内のcategory 属性はinput がその下に表示されるタブの名前を定義します(featureカテゴリとは無関係です)。

subcategory 属性(オプション)はそのタグの下のsubgroup を定義します(より使用頻度の低いタグ向けを想定)。

presence 属性はこのinput が'Basic'タブに表示されるかどうかを定義します:

  • always - 常に表示
  • onTagMatch - タグがセットされた時だけ表示
  • withCategory - Basicタブには表示しない

priority 属性はタブ内での順番を制御します。取り得る値は上から順にhighest, high, normal, low そして lowest です。

type 属性はこれが何のコントロールなのか定義します。このセクションの残りではこれらのコントロールとその属性を定義します。

type="choice"

ドロップダウンメニュー。<choice/>要素はオプションの値を定義するのに使われます(HTMLの </select> 要素中の<option/>のように)。例えば:

<input type="choice" presence="always" category="" name="Religion" key="religion" description="The religion worshipped here.">
     <choice value="christian" text="Christianity (church)"/>
     <choice value="jewish" text="Judaism (synagogue)"/>
     <choice value="muslim" text="Islam (mosque)"/>
</input> 

type="checkbox"  

タグの値を'yes'または'no'のセットするのに使われるチェックボックス("1", "0", "true" そして "false"といった値は認識されますがセットはされません)。

type="freetext"

シンプルなテキストエディタ。absencetext 属性でセットされていない場合の値を定義できます。

type="number"

数値エントリのテキストフィールドで、脇に"上向き"と"下向き"の増減できるボタンがあります。例えば:

 <input type="number" minimum="0" maximum="99999" stepSize="1"
         presence="always" category="Parking" name="Capacity" key="capacity" description="The number of cars that can be parked in the car park"/>

minimum 及びmaximum 属性は増減ボタンが許可する値の幅を定義します(既定値 0, 100)。

stepSize 属性は上向き/下向きの増減ボタンをクリックした時の増分を定義します(既定値 1)。

absenceText 属性は値が設定されていない場合に表示するテキストを定義します。

notValidText 属性は値が数値で無かったり、最小/最大値の範囲外であった時に表示するテキストを定義します。

type="slider"

2極値間で選べる任意の数値を指定できるスライダーです。例えば:

<input type="slider" presence="onTagMatch"
       name="Layer" category="Physical" description="Relative vertical positions (-5 lowest, +5 highest)"
       key="layer" minimum="-5" maximum="5" default="0" snapInterval="1" labels="Lowest,Ground,Highest"
       defaultName="Ground"/> 

minimum 及びmaximum 属性は許可された値の幅を定義します(既定値 0, 100)。

snapInterval 属性はこれらの値間の最小増分を定義します(既定値1)。

default 属性は値がセットされない場合の既定の数値を定義します(既定値0)。

labels 属性はカンマ区切りの一覧で最小値から最大値の間で等間隔に表示されるラベルです。

数値入力のテキストフィールドにはその脇に"上向き"と"下向き"の増減できるボタンがあります。例えば:

<input type="number" minimum="0" maximum="99999" stepSize="1"
       presence="always" category="Parking" name="Capacity" key="capacity" description="The number of cars that can be parked in the car park"/> 

minimum 及びmaximum 属性は増減ボタンに許可された値の幅を定義します(既定値 0, 100)。

stepSize 属性は上向き/下向きの増減ボタンの増分を定義します(既定値 1)。

absenceText 属性は値がセットされていない場合に表示するテキストを定義します。

notValidText 属性は値が数値でなかったり最小/最大値の範囲外であった場合に表示するテキストを定義します。

type="speed"

専用の速度制限エディタ。  

type="route"

専用のルートリレーション編集エディタで、エンティティがそのメンバーであるリレーションを表示して、ユーザはそれを他のリレーションに追加することができます。例えば:

<input type="route" name="National Cycle Routes" description="A signposted route in a National Cycle Network, or nearest equivalent." category="Cycle" priority="low">
  <match k="type" v="route"/>
  <match k="route" v="bicycle"/>
  <match k="network" v="ncn"/>
  <icon image="features/route__ncn.png" background="#ff6f7a" foreground="white">${ref} ${name}</icon>
</input> 

match 要素はマッチする親リレーションに必要なタグを定義します。

icon 要素はマッチするリレーションのために表示されるコントロールの外観を定義します( 内のと同じ文法です)。

type="turn"

専用の方向転換エディタで、このエンティティがメンバーである方向転換制限を表示し、ユーザはそれを他の方向転換リレーションに追加できます。例えば:

<input type="turn" name="Turn restriction" description="Turn restriction" category="Turn" priority="normal" presence="onTagMatch">
   <match k="type" v="restriction"/>
   <role role="via"/>
 </input> 

match 要素はマッチする親リレーションに必要なタグを定義します。

role 要素はマッチする親リレーションに必要なメンバーロールを定義します。

Input セット  

input set はinputのグループです。どのフィーチャでも使うことができます。

上述のように <input/> 要素を含みます。例えば:

<inputSet id="roadRefs">
  <input type="freetext" presence="always" name="Reference" category="Naming" priority="high" key="ref" />
  <input type="freetext" presence="onTagMatch" name="International Reference" category="Naming" key="int_ref" />
  <input type="freetext" presence="onTagMatch" name="Old Reference" category="Naming" priority="low" key="old_ref" />
</inputSet> 

inputSet は他のネストしたinputSet 要素を含むこともできます:

<inputSet id="common">
  <inputSet ref="source"/>
  <inputSet ref="designation"/>
</inputSet> 

Potlatch2のシンプルエディタ用のコントロールの編集についての最新情報はこちらを参照: http://wiki.osm.org/wiki/Potlatch_2/Developer_Documentation/Map_Features

マップスタイル

potlatch2が表示するマップのスタイルもカスタマイズすることができます。これはMapCSSフォームを使って定義されており、カスケードスタイルシートとよく似ています。もしあなたがウェブページ作成に慣れているなら、この部分はさほど難しくはないでしょう。

マップのスタイルはMapCSSで定義されており、これはCSSのフォーマットに似ています。MapCSSの仕様についての詳細はこちらを参照:http://wiki.openstreetmap.org/wiki/MapCSS/0.2

There has been error in communication with Booktype server. Not sure right now where is the problem.

You should refresh this page.