自前でアドイン(MVC Application Architecture)の仕組みを作る（その１）

ExtJS 4.0

この３ヶ月（実質触れていたのは1ヶ月弱か）、自分がなんとしても実現したかったことができたのでまとめておきます。
多分、理解できている人にとっては「なんでそんなことでつまづいてたんだ？」と思うかもしれませんがw

実現したかったことは、次の通りです。

  1. 複数のボタンを配置したナビゲーションエリアと、タブパネルを配置したメインエリアを持つベースアプリがある。
  2. 各ボタンにはGUI付きのサブアプリが割り当てられている。
  3. ボタンをクリックすると、該当するサブアプリをメインエリアの新しいタブで表示する。
  4. ベースアプリ、サブアプリともに MVC Application Architecture に従って作る。
  5. ベースアプリのルートディレクトリと、サブアプリのルートディレクトリは互いに独立している。
  6. サブアプリは独立したディレクトリをルートディレクトリとすることで複数作成することができ、
  7. ベースアプリに対してアドインのような形で配置することが可能。
  8. なので、ベースアプリにてサブアプリを静的ロードする構成にはできない。
  9. 結果的に、サブアプリは動的にロードされることになる。


もっとあっさり記述すると、

  1. 本体となるアプリに対して、
  2. 本体に組み込まれて動作するアドイン的なサブアプリを実装するが、
  3. そのサブアプリは本体への脱着がディレクトリ単位で簡単にでき、
  4. その上、そのサブアプリは「MVC Application Architecture」にならって実装される。


この条件をすべて満たす構成を見つけられず長々と悩みましたが、
こないだ参加させて頂いた「Perfect Day」のセミナーがきっかけとなり、
いろんな人と知り合うことができてあれよあれよという間に解決してしまいました！
てか、すごい人たちとのつながりってほんとにすごい。。（日本語おかしいな）
これからもよろしくお願いします。




さて、話を戻しましょう。


MVC Application Architecture と聞いて、よく巷に掲載されているサンプルやチュートリアルは、
一つのappディレクトリからcontroller、view、model、storeのディレクトリを作成し、
そこに必要に応じてコントローラ、ビュー、モデル、ストアの各クラス定義ファイルを配置していくという構成になっています。

例えば、次のような感じになります。

src
├index.html
├app.js
└app/
　├controller/
　│├Controller1.js
　│└Controller2.js
　├view/
　│├Viewport.js
　│├View1.js
　│└View2.js
　├model/
　│├Model1.js
　│└Model2.js
　└store/
　　├Store1.js
　　└Store2.js

このアプリに対して「独立性の高い機能（サブアプリ）」を追加していくとき、
ベースアプリのcontoller、view、model、storeディレクトリに、
サブアプリのクラス定義ファイルを配備したくないんです。

src
├index.html
├app.js
└app/
　├controller/
　│├Controller1.js
　│├Controller2.js
　│├SubController1.js ←混じってる
　│└SubController2.js ←混じってる
　├view/
　│├Viewport.js
　│├View1.js
　│├View2.js
　│├SubView1.js ←混じってる
　│└SubView2.js ←混じってる
　├model/
　│├Model1.js
　│├Model2.js
　│├SubModel1.js ←混じってる
　│└SubModel2.js ←混じってる
　└store/
　　├Store1.js
　　├Store2.js
　　├SubStore1.js ←混じってる
　　└SubStore2.js ←混じってる

どうです？混じってなんか汚い感じしません？
脱着だってものすごく面倒くさそうでしょ。
これが、↓こういう構成になったら綺麗に見えませんか？

src
├index.html
├app.js
├app/
│├controller/
││├Controller1.js
││└Controller2.js
│├view/
││├Viewport.js
││├View1.js
││└View2.js
│├model/
││├Model1.js
││└Model2.js
│└store/
│　├Store1.js
│　└Store2.js
│
└addins/
　├subapp1/
　│├controller/
　││└SubController1.js
　│├view/
　││└SubView1.js
　│├model/
　││└SubModel1.js
　│└store/
　│　└SubStore1.js
　│　
　└subapp2/
　　├controller/
　　│└SubController2.js
　　├view/
　　│└SubView2.js
　　├model/
　　│└SubModel2.js
　　└store/
　　　└SubStore2.js

サブアプリはサブアプリでディレクトリを作り、
その中にcontoller、view、model、storeディレクトリを作ってその中で完結しています。
これなら不要なサブアプリはディレクトリごと削除すれば済みます。
新しいサブアプリができたらaddinsディレクトリにコピーしてくるだけで済みます。
次のエントリでこれを実現するために調査した内容をアップします。