CodeZine(コードジン)

特集ページ一覧

Dojoツールキットで始めるオブジェクト指向

渋谷テクニカルナイト講師陣が語る新技術動向 第1回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/02/02 14:01

目次

継承

 次に継承を試します。sample02.htmlでは、dijit.form.Buttonクラスを継承しています。

リスト3 sample02.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>クラスの定義:1ファイルバージョン</title>
<script type="text/javascript" src="../dojo-release-1.1.1/dojo/dojo.js"
    djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
    dojo.require("dojo.parser");
    dojo.require("dijit.form.Button");
    dojo.declare(
"yone.MyButton",
dijit.form.Button,
{
}
);
</script> </head> <body> <div dojoType="yone.MyButton" id="button1">米持のボタン</div> </body> </html>

 このように宣言すると「MyButton」クラスは、dijit.form.Buttonと同じ機能を持ちますので、dojoTypeに指定することができます。これでボタンが表示されるようになります。

クラスを別ファイルに分ける

 クラスは一旦作成したらさまざまなアプリケーションで共有して使いたいものです。となると、同じファイルに定義されているだけでなく、別のjsファイルから読み込むことができなければいけません。

 Dojoツールキットでは、クラスが定義されているjsファイルをdojo.requireで読み込みますが、このとき読み込むファイルの検索方法に一定のルールがあります。

 例えば、先ほどのyone.MyButtonクラスを読み込む場合、名前をピリオドで分解し、Dojoツールキットのルート(dojoディレクトリの一つ上のディレクトリ)からフォルダ名として探しにいきます。yone.MyButtonなら、dojoフォルダと横並びのyone\MyButton.js というファイルを探します。

図3 MyButton.jsを配置する
図3 MyButton.jsを配置する

 もう一つのルールとして、クラスが定義されているファイルを読み込むとき、「このファイルでyone.MyButtonが宣言されるよ」ということを名言しなければいけません。これは、クラス宣言のされたファイルを一度読み込んだら二度と読み込まないように、クラス名を登録するためです。そのための関数がdojo.provideです。

リスト4 yone\MyButton.js
dojo.provide("yone.MyButton");
dojo.require("dijit.form.Button");
dojo.declare(
    "yone.MyButton",
    dijit.form.Button,
    {
    }
);

 このファイルを、dojoフォルダと同じ並びの「yone」フォルダを作ってその下に「MyButton.js」というファイル名で保存します。そして、このクラスを使いたい時は「dojo.require("yone.MyButton");」としてあげると、見つけ出して読み込んでくれます。

リスト5 sample03.html
    :
<script type="text/javascript" src="../dojo-release-1.1.1/dojo/dojo.js"
    djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
    dojo.require("dojo.parser");
    dojo.require("yone.MyButton");
</script>
</head>
<body>
<div dojoType="yone.MyButton" id="button1">米持のボタン</div>
</body>
    :

 自分のクラスをdojo.requireするのは、なんかうれしい瞬間です。

別の場所に配置する

 dojoフォルダと並ぶ箇所に自分のクラスを配置する、ということになると、アプリケーションとDojoツールキットをまぜてしまうことになるため、あまり望ましくありません。例えば、Dojoツールキットを取り替えたりするときにフォルダごとごっそり、ってのができなくなりますからね。

 では、Dojoツールキットのルートフォルダより外へ自分のクラスを置く方法をお教えしましょう。

 Dojoのルートにクラスを置く場合、置く側が工夫するのではなく使う側が工夫する、という考えかたに基づいています。これは、一度作ったクラスファイルはそのままでよく、使うときに「どこに置いてあるよ」と宣言して使う、という考え方と思えばよいです。

 「どこに置いてあるよ」と宣言する方法は2つあります。一つ目はdojo.registerModulePath関数を使う方法です、引数としてクラスの接頭辞とdojo.jsからの相対パスを指定します。

 例えば、MyButton.js をDojoツールキットのルート(dojoフォルダの上のフォルダ)と横並びにある「yone2」フォルダに置いてあり、yone2.MyButtonを提供しているとすると、使う時にsample04.htmlのようにファイルの場所を設定します。

リスト6 sample04.html
    :
<script type="text/javascript" src="../dojo-release-1.1.1/dojo/dojo.js"
    djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
    dojo.require("dojo.parser");
    dojo.registerModulePath("yone2", "../../yone2");
    dojo.require("yone2.MyButton");
</script>
</head>
<body>
<div dojoType="yone2.MyButton" id="button1">米持のボタン</div>
    :

 この指定は、dojo.js(Dojoのブートローダー)の読み込み引数であるdjConfigに指定することもできます。文法は次のとおりです。

リスト7 djConfigの例
djConfig="parseOnLoad: true, modulePaths:{yone2: '../../yone2'}"

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:渋谷テクニカルナイト講師陣が語る新技術動向

もっと読む

著者プロフィール

  • 米持 幸寿(ヨネモチ ユキヒサ)

    日本アイ・ビー・エム公認 ソフトウェア・エバンジェリスト。alphaWorks、developerWorks、インキュベーション系製品、アセットなどのテクノロジーの推進をしつつ、テクノロジー戦略、エバンジェリストチームをリードしている。講演や執筆も多数。主な著書に「かんたんサーバーサイドJava」(...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5