nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Webアプリのためのカスタムウィジェットを作成する...イントロ

RiccardoKlinger2

<\/HEAD>

GISを使って作業すると、時にはかなり高度なワークフローやモデルなどが生まれます。次のステップは、これらのツールを他の関係者や人々と共有して一緒に使うにはどうすればよいか、ということかもしれません。これを実現する方法はいくつかあります:<\/P>

ジオプロセシングをWebツールとして公開する。<\/LI>
ArcGIS JavaScript API<\/LI>
Web AppBuilder用のウィジェット<\/LI><\/UL>
このブログ記事では最後のアプローチについて説明し、Web AppBuilder用のカスタマイズ可能なウィジェットを作成したいと思います。<\/P>
Web AppBuilder Dev Edition<\/H3>なぜWeb AppBuilder Dev Edition<\/A>（略してWAB）が必要なのか疑問に思うかもしれません。ウィジェットを作成するので、AGOL上でカスタムアプリケーションとして公開する前にソリューションをテストするのが常に良いからです。Web AppBuilder Dev Editionを使うと、テンプレートウィジェットを利用でき、ローカルサーバー（または適切なドメイン名を持つリソース）上でウィジェットをテストできます。<\/P>
WABは
 Node.js<\/A>上で動作しますが、現時点ではWindowsのみ対応しています。<\/P>
一度解凍してArcGISアカウントで設定（Portal for ArcGISに接続し、Portal上でアプリを作成し、そのアプリをPortalに登録）すれば準備完了です:<\/P>
<\/P>
<\/P>
Get started section<\/A>に定義された手順に従ってください。<\/P>
ウィジェットの目的<\/H3>この導入では、地図のスケールと現在のズームレベルを表示するウィジェットを作成したいと思います。もちろんこれは標準のScalebar Widgetの強化版とも言えます。まずは単独での方法を示し、その後デフォルトのScalebarウィジェットを拡張して同様にスケールバーだけでなくズームレベルも表示する方法について説明します。<\/P>ウィジェットの構造<\/H3>ウィジェット自体はいくつかのファイルで構成されており、それらは以下の通りです:<\/P>ウィジェット機能を定義するJavaScriptファイル (Widget.js<\/EM>)<\/LI>ウィジェットのユーザーインターフェースを定義するテンプレートファイル(Widget.html<\/EM>)<\/LI>ウィジェットの設定ファイル (config.json<\/EM>)<\/LI>公開に必要なマニフェストファイル(manifest.json<\/EM>)<\/LI>必要に応じて文字列の国際化用i18n<\/A>文字列ファイル (nls\/strings.js<\/EM>)<\/LI>ボーダー丸めや背景画像、スライダーや円などがお好きなおしゃれな方用スタイルファイル (css\/style.css<\/EM>)<\/LI><\/UL>最終的にはあなたのウィジェットの構造は以下のようになるはずです:<\/P><\/P>お気づきかもしれませんが、この構造には setting.<\EM> というフォルダも含まれています。これはウィジェットの動作をカスタマイズしたいため、いくつか設定項目を定義し、それらと連携させる必要があるからです。<\/P>コードについて<\/H3>ファイルを見ていきましょう。ユーザーがスケール、ズームレベル、または両方を表示したいかどうか定義できるようにします。これは setting.html で行います。<\/P>Setting.html / Setting.js<\/H4>そのために2つのチェックボックスを表示します。私はシンプルなバニラが好きなので（dijitチェックボックスはうまく動かなかったので 😉）、HTML入力チェックボックスを使います:<\/P><<\/>div><\/> <<\/>div class="title">Zoom Level Info</div> <<\/>div class="row"> <<\/>input type="checkbox" id="ZoomSetCheckbox"></input> <<\/>p style="display:inline">Show Zoom Info <<\/>/div> <div class="row"> <input type="checkbox" id="ScaleSetCheckbox"></input> <p style="display:inline">Show Approx. Scale </div> </div> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<<EMOJI_2>><\/> <<EMOJI_3>><\/> <<EMOJI_4>><\/> <<EMOJI_5>><\/> <<EMOJI_6>><\/> <<EMOJI_7>><\/> <<EMOJI_8>><\/> <<EMOJI_9>><\/> <<EMOJI_10>><\/> <<EMOJI_11>><\/> <<EMOJI_12>></PRE>しかしこれはウィジェットなので、デフォルト設定は config.json<\/> に保存したいため、setting.html を設定ファイルと連携させる必要があります。 settings.js <\/EM>ファイル。<\/P>したがって、ボタンのidだけでなく（各ウィジェットは同一のidを持つアイテムを含む可能性があります...）、data connectorsも使用します:<\/P><PRE class="lia-code-sample line-numbers language-none"><CODE><<\/SPAN>div<\/SPAN>><\/SPAN><\/SPAN>   <<\/SPAN>div<\/SPAN> class<\/SPAN>=<\/SPAN>"<\/SPAN>title"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN>ズームレベル情報<\/<\/span>div<\/span>><\/span><\/span>   <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>row"<\/span><\/span>><\/span><\/span>     <<\/span>input<\/span> type<\/span>=<\/span>"<\/span>checkbox"<\/span><\/span> id<\/span>=<\/span>"<\/span>ZoomSetCheckbox<sp anclass=\"punctuationtoken\">"<\ / span > < spanclass=\"attr-name token\" > data-dojo-attach-point < spanclass=\"attr-value token\" > < spanclass=\"punctuationtoken\" > = < spanclass=\"punctuationtoken\" > " ZoomSetCheckbox < spanclass=\"punctuationtoken\" > " < spanclass=\"punctuationtoken\" > > < spanclass=\"token tag\" >< spanclass=\"token tag\" >< spanclass=\"punctuationtoken\" > < \/ input < spanclass=\"punctuationtoken\" > >     < spanclass=\"token tag\" >< spanclass=\"token tag\" >< spanclass=\"punctuationtoken\" > < spanclass=\"style-attr language-css token\" >< spanclass=\"attr-name token\" > style = " display : inline " > Show Zoom Info   < / div >   < divclass= " row " >     < inputtype = " checkbox " id = " ScaleSetCheckbox " data-dojo-attach-point = " ScaleSetCheckbox " ></ input >     Show Approx. Scale   </ div > </ div >‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SP ANCLASS= " line-numbers-rows " >< SP AN >< EMOJI_1 >< \/ SP AN >< SP AN >< EMOJI_2 >< \/ SP AN >< SP AN >< EMOJI_3 >< \/ SP AN >< SP AN >< EMOJI_4 >< \/ SP AN >< SP AN >< EMOJI_5 >< \/ SP AN >< SP AN >< EMOJI_6 >< \/ SP AN >< SP AN >< EMOJI_7 >< \/ SP AN >< SP AN >< EMOJI_8 >< \/ SP AN >< SP AN >< EMOJI_9 >< \/ SP AN >< SP AN >< EMOJI_10 >< \/ SP AN >< SP AN >< EMOJI_11 >< \/ SP AN ></ SP AN ></ CODE ></ PRE > 今、ボタンの状態と通信できます。<\/P>setting.jsファイルには主に2つの機能があります：設定をconfig.jsonファイルに読み書きし、新しいアプリでウィジェットが常に正しい設定を使用するようにすることです。<\/P>config.json<\/EM>ファイルの設定は以下のようにします:<\/P><PRE class="lia-code-sample line-numbers language-none"><CODE>{ "settings": { "ZoomSetCheckbox": true, "ScaleSetCheckbox": true } }<EMOJI_12><SP ANCLASS= " line-numbers-rows " > <SP AN><EMOJI_13></SP> <SP AN><EMOJI_14></SP> <SP AN><EMOJI_15></SP> <SP AN><EMOJI_16></SP> <SP AN><EMOJI_17></SP> <SP AN><EMOJI_18></SP>
ご覧の通り、ウィジェットのデフォルト状態は両方のチェックボックスを有効にすることです。configの状態は2つの関数を使って設定および読み取りが可能です：getConfigとsetConfig（投稿の最後にあるzipをダウンロードしてスクリプト全体を入手してください）：define([ 'dojo/_base/declare', 'jimu/BaseWidgetSetting' ], function(declare, BaseWidgetSetting) { return declare([BaseWidgetSetting], { startup: function() { this.inherited(arguments); console.log(this.config); this.setConfig(this.config); }, setConfig: function() { class="punctuation token">(<\/SPAN>config)<\/SPAN>{<\/SPAN>                this<\/SPAN>.<\/SPAN>config =<\/SPAN> config;<\/SPAN>                this<\/SPAN>.<\/SPAN>ZoomSetCheckbox.<\/SPAN>checked =<\/SPAN> config.<\/SPAN>settings.<\/SPAN>ZoomSetCheckbox;<\/SPAN>                this<\/SPAN>.<\/SPAN>ScaleSetCheckbox.<\/SPAN>checked =<\/SPAN> config.<\/SPAN>settings.<\/SPAN>ScaleSetCheckbox;<\/SPAN>                console.<\/SPAN>log<\/SPAN>(<\/SPAN>"ファイルから読み取った設定: "<\/SPAN>)<\/SPAN>;<\/SPAN>                console.<\/SPAN>log<\/SPAN>(<\/SPAN>config)<\/SPAN>;<\/SPAN>           }<\/span>,<\/span>      getConfig:<\/span> function<\/span>(<\/span>)<\/span>{<\/span>    settings =<\/span> this<\/span>.<\/span>config.<\/span>settings;<\/span>   if (<\/span>this<\/span>.<\/span>ZoomSetCheckbox)<\/span> {<\/span>   settings.<\/span>ZoomSetCheckbox =<\/span> this<\/span>.<\/span>ZoomSetCheckbox.<\/span>checked;<\/span>   }    if (<\/this.ScaleSetCheckbox){                 settings<spanclass="operatortoken">=</pan>this.ScaleSetCheckbox.checked;</pan>   }   this<spanclass="keywordtoken">.config<spanclass="operatortoken">=</pan>settings<spanclass="punctuationtoken">; console.log("設定をファイルに書き込み中: " + settings); console.log(this.config); return this.config; } }, }); ‍‍‍‍‍‍‍‍‍‍ ‍‍‍‍‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ このコードはボタンの状態（this.XXXSetCheckbox）を読み取り、それが使用されている各アプリのconfigに書き込み、使用されている設定に従って構成を読み取ります。 <h4 id="toc-hId-1555079577" id="toc-hId-1555079577"> Widget.html / Widget.js </h4> 前述の段落で設定について説明したので、ここでは主にWidget.htmlとWidget.jsのメインコードに集中しましょう。 ウィジェットには2行だけ表示しています：ズームレベル用の1行とスケール用の1行です。したがって、Widget.htmlファイルは非常に短く、2行で構成されています： <div class=\"ZoomLeveLInfo\"> <div data-dojo-attach-point=\"zoomInfoDiv\"> Zoom Level: </div> <div data-dojo-attach-point=\"scaleInfoDiv\"> Approx. Scale: token">"<\/SPAN><\/SPAN> data-dojo-attach-point<\/SPAN>=<\/SPAN>"<\/SPAN>scaleInfo"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN><\/<\/SPAN>p<\/SPAN>><\/SPAN><\/SPAN><\/<\/SPAN>div<\/SPAN>><\/SPAN><\/SPAN> <\/<\/SPAN>div<\/SPAN>><\/SPAN><\/SPAN> ‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN><\/SPAN><\/CODE><\/PRE>同様のアプローチは Setting.html<\/EM> にも見られます: data-dojo-attach-points を使って div 要素にアクセスし、この div の内容を変更します。インラインで行うこともできますが、構造を維持し、JavaScript 部分は Widget.js<\/EM> に定義しています。<\/P><PRE class="lia-code-sample line-numbers language-none"><CODE>define<\/SPAN>(<\/SPAN>[<\/SPAN>     'dojo\/_base\/declare'<\/SPAN>,<\/SPAN>     'dojo\/_base\/lang'<\/SPAN>,<\/SPAN>     'jimu\/BaseWidget'<\/SPAN>,<\/SPAN>     'dojo\/on'<\/SPAN>,<\/SPAN> // マップがパンされたときに "on.extent-change" で div を変更するため<\/SPAN>     'esri\/map'<\/SPAN> // マップとやり取りするため<\/SPAN> ]<\/SPAN>,<\/SPA... class="number token">1000<\/SPAN>)<\/SPAN>*<\/SPAN>1000<\/SPAN> ;<\/SPAN> }<\/SPAN> else<\/SPAN> {<\/SPAN> dojo.<\/SPAN>destroy<\/SPAN>(<\/SPAN>this.<\/SPAN>scaleInfoDiv<\/SPAN>)<\/SPAN>;<\/SPAN> }<\/SPAN> }<\/SPAN> }<\/SPAN>)<\/SPAN>;<\/SPAN> }<\/SPAN>)<\/SPAN>;<\/SPAN> ‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/Span >‍‍ <‍ <‍ <‍ 
Manifest.json

web app new custom app implement manifest.json file create need. manifest.json.file name main settings basic information hold:
{   "name": "ZoomLevelInfo",   "platform": "HTML",   "version": "2.8",   "wabVersion": "2.8",   "author": "Esri Deutschland GmbH // Riccardo Klinger",   "description": "This is a widget to show scale and zoom level of the underlying map.",   "copyright": "",   "license": "http://www.apache.org/licenses/LICENSE-2.0",   "properties": {     "inPanel": false, //as it is off-panel     "hasUIFile": true, // we do have a settings ui file     "supportMultiInstance": false´// we just allow one instance of the widget.   } }<<EmoJi_34>> <<EmoJi_35>> <<EmoJi_36>> <<EmoJi_37>> <<EmoJi_38>> <<EmoJi_39>> <<EmoJi_40>> <<EmoJi_41>> <<EmoJi_42>> <<EmoJi_43>> <<EmoJi_44>> <<EmoJi_45>> <<EmoJi_46>> <<EmoJi_47>> <<EmoJi_48>> 
widget test now can.
testing the Widget
main widget create as, WAB Developer installation test should now. Therefore whole folder (our case ZoomLevelInfo) WAB client widget folder (my case "C:\WebAppBuilderForArcGIS\client\stemapp\widgets") place.
test for, Web AppBuilder restart and new application create:

widget now Web AppBuilder part and widget as select can:

Hosting the Widget

tests successful if, server on widget host and ArcGIS Online or ArcGIS Enterprise (>10.5) environment as custom widget implement can. Portal own if, portal WAB inside folder add also want might (my case "C:\Program Files\ArcGIS\Portal\apps\webappbuilder\stemapp\widgets").

Download the Example

example use want if, github here. Or directly below download can.

タグ付けされた投稿をもっと見る

Technologie

There are no comments yet

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.