Mixinを活用しよう

ReneRubalcava

<\/HEAD>

<\/P>

カスタムウィジェットを使ったアプリケーションの開発を始めて、ウィジェットが少しずつ手に負えなくなってきたと感じたことはありませんか？コードが50行から100行、200行、1000行に増えてしまったかもしれません。恥ずかしがることはありません。ニーズによっては、仕事を成し遂げるために多くのコードが必要なウィジェットもあります。それこそが私たちの目的ですよね？仕事を成し遂げることです。<\/P>

<\/P>

一歩引いて、そのウィジェットをどう分割できるか考えてみましょう。特定のウィジェットイベントに基づいてマップにグラフィックを追加していますか？現在のマップ範囲とマップに読み込まれていない別のサービスを使って分析するためにマップのアクティビティを監視していますか？あるいは、ウィジェットが起動されるたびにユーザーの現在位置をFeatureServiceに送信したいけれど、この機能をすべてのウィジェットで使いたいと思っていますか？あなたのユースケースはわかりませんが、一歩引いてウィジェットを小さなパーツに分解し始めれば、管理が楽になるかもしれません。<\/P>

<\/P>

動作を分割する<\/H2>ウィジェット構成を見る良い方法は、ウィジェットに必要な動作を見ることです。例えば、有名なdijit\/_WidgetBase<\/A>を見てみましょう。おそらく自分のウィジェット構築に使ったことがあるでしょう。_WidgetBase<\/STRONG>を拡張すると、主にdijitライフサイクルという一連のメソッドが提供され、それらをオーバーライドしてウィジェット作成時の処理を書けます。カスタムウィジェットやdijitライフサイクルについて詳しくは、この私のブログのビデオ<\/A>をご覧ください。また、属性の変更監視が可能なdojo\/_Stateful<\/A>からのset\/_get<\/STRONG>メソッドという別の動作セットも得られます。<\/P><\/P>さらに、このウィジェットでテンプレート化されたHTML文字列をUI定義に使いたい場合は、dijit\/_TemplatedMixin<\/A>を拡張できます。これには一つだけシンプルなプロパティ、templateString<\/STRONG>が追加されます。このプロパティ一つでウィジェット全体のUIを構築できます。これはかなり強力です。<\/P><\/P>

最高の振る舞いをしよう<\/H2>では、自分のプロジェクトにmixinsを取り入れるにはどうすればよいでしょう？例えば、あなたのウィジェットで何かが起きたときにマップを再中心化する機能を常に追加していることに気づいたとします。この動作をmixinとして切り出す方法があります。慣習かどうかわかりませんが、dijitライブラリ<\/A>ではmixinはアンダースコアで始まる名前が付けられているので、ここでは_RecenterMixin<\/STRONG>というmixinを作りましょう。<\/P><\/P>例はこんな感じです:<\/P>define([\n  'dojo\/_base\declare'\n], function(declare) {\n  return declare(null, {\n    \/\/- このmixinは以下の前提で動作します\n    \/\/- ウィジェットにmapが割り当てられていること\n    \/\/- mapはcenterとzoomで初期化されていること\n    recenter: function() {\n      var map = this.get('map');\n      var params = map._mapParams;\n      if (params.center) {\n        map.centerAt(params.center);\n      }\n    }\n  });\n});<\/PRE><\/P>これでこのmixinを拡張したウィジェットを作り、必要なときにrecenterメソッドを呼べます。例えばBasemapGallery<\/A>をラップするウィジェットで使い、ベースマップ変更時にマップを再中心化できます。<\/P>

define([\n  'dojo\/_base\declare',\n  'dojo\/_base\lang',\n  'dojo\/dom',\n  'dojo/dom-construct',\n  'esri/domUtils',\n  'esri/dijit/BasemapGallery',\n  'dijit/_WidgetBase',\n  'dijit/_TemplatedMixin',\n  '.\/_RecenterMixin',\n  'dojo/text!.\/templates/BasemapSwitcher.html'\n], function(\n  declare, lang, dom, domConstruct,\n  esriDomUtils, BasemapGallery,\n  _WidgetBase, _TemplatedMixin,\n  _RecenterMixin,\n  template\n) {\n  return declare([_WidgetBase, _TemplatedMixin, _RecenterMixin], {\n    templateString: template,\n    postCreate: function() {\n      var node = dom.byId('map_root');\n      esriDomUtils.hide(this.domNode);\n      domConstruct.place(this.domNode, node);\n      var map = this.get('map');\n      this.gallery = new BasemapGallery({\n        map: map,\n        showArcGISBasemaps: true\n      }, this.bmNode);\n      this.gallery.startup();\n      this.gallery.on('selection-change', lang.hitch(this, function() {\n        this.recenter(); \/\/ MIXIN MAGIC\n      }));\n    },\n    hide: function() {\n&nbsp:& nbsp ;& nbsp ; esriDomUtils.hide(this.domNode); \ n & nbsp ; & nbsp ; }, \ n & nbsp ; & nbsp ; show: function() { \ n & nbsp ; & nbsp ; esriDomUtils.show(this.domNode); \ n & nbsp ; & nbsp ; } \ n }); \ n}); < / PRE > < P > < SPAN style = "font-size: 8pt ; color : #505050 ; " > < EM > このサンプルを見ると、hide/showメソッドもmixinに移して他でも再利用できそうだと感じました < / EM > < / SPAN > < / P > < P > < / P > < H2 id = "toc-hId-1015442459" id = "toc-hId-1015442459" > ちょっと待ってください < / H2 > < P > あなたはこう思うかもしれません：_WidgetBaseとmixinの違いは何ですか？ 通常、mixin単体ではあまり役に立ちません。上記例では、もし単独で_RecenterMixinだけ拡張しても、操作するためのpostCreateメソッドやtemplateStringはありません。mixinは場合によってはライフサイクルメソッドにフックするために_WidgetBaseなどに依存していることもあります。本質的にはモジュール拡張であり、ウィジェットやその動作を拡張しているわけです。<\/P><\/P>

このプロジェクトのデモリポジトリもgithubで公開していますので試してみてください。<\/P><\/P>ぜひあなたもプロジェクトでmixinsを切り出してみて、アプリケーション保守の簡素化につなげてみてください。異なるウィジェット間で動作を再利用できる能力が気に入るかもしれませんし、コードへの努力がより活用されるでしょう。コードへの努力がより活用されるわけです。<\/P><\/P>さらにgeodev関連のヒントやコツについては私のブログをご覧ください。<\/P><\/BODY><\/HTML>