「Writing Your First AddOn」の編集履歴（バックアップ）一覧はこちら

「Writing Your First AddOn」(2006/03/29 (水) 06:15:27) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

※このコンテンツは[[World of Warcraft Hell>http://wow.mmhell.com/]] の内容を翻訳した内容になります。原文は2005/3/7に書かれたもので、それを2006/3/28現在の内容に修正しながら訳してあります。

訳者の英語力の拙さをご理解いただいた上で閲覧していただけると幸いです(^ ^; (誤訳はご指摘ください)

原文：[[Writing Your First AddOn (Interface Modification) - World of Warcraft Hell>http://wow.mmhell.com/articles/interface_modification/writing_your_first_addon.html]]


*Writing Your First AddOn

あなたは[[Beginners Guide]]を読んだかUIを少しいじってみましたが、次に何をするか、何ができるかわからないですか？ここでは、短い紹介と初めての例を書きたいと思います。

このHow Toでは[[Telo's Clock>http://ui.worldofwar.net/ui.php?id=68]]からTooltip機能を引いたようなものを作ることになります。デフォルトのミニマップにアンカー表示されるようなものではなく、サーバー時間を表示する新しいWindowを表示します。

この例ではXMLとLuaの基本的な使い方への十分な理解と今後のAddOn作成のFrameworkを提供して、開発工程初期の「まずどうするの？」を削減できればと思います。それでは始めましょう。この例では、「hellClock」という名前にしますが、もちろんどんな名前に変えてもかまいません。

*1. フォルダとファイルの準備

まずは、フォルダの準備です。もしすでにあなたのWoWインストールフォルダの中に[Interface]とういフォルダがあったらそこに切り替えてください。無ければ作成してください。Interfaceフォルダの中に[AddOns]というフォルダを作成してください-すでにあればそこに切り替えてください。このAddOnsフォルダに、hellClockを入れるフォルダを作成します。もちろんhellClockというフォルダです。

次はWoWに何を（どのXMLをファイルを）読み込んだらよいか伝えるTable of Contents（目次）です。それは、フォルダ名と同じ名前でならないのでず、ここでは[hellClock.toc]というファイルをテキストエディターで作成して、下記の情報をファイルに記述してください。

 ## Interface: 11000
 ## Title: Clock from Hell
 ## Notes: It's a Clock.. get over it, nothing fancy here.
 hellClock.xml

[[Beginners Guide]]を読んでいればこの意味はわかるはずです。読んでなければ読んでみてください。これは、WoWに"hellClock.xml"というファイルをAddOnフォルダから読み込むように伝えます。では、次に何をしましょう。そう、XMLファイルを作成しましょう。

*2. The XML: hellClock Windowのインサート

すべてのWoWのXMLで、<Ui>タグですべての内容を囲む必要があります。下記をいま作ったhellClock.xmにコピー＆ペーストしてください。

 <Ui xmlns="http://www.blizzard.com/wow/ui/" 
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://www.blizzard.com/wow/ui/ ..\..\FrameXML\UI.xsd">
 
 </Ui>

すべてのデータはこのタグの間にはいります！最初に書くのは、このAddOnに属するLUAスクリプトをWoWに読み込ませるScriptタグです。このようになります。

 <Script file="hellClock.lua" />

繰り返しになりますが、">"の前のスラッシュに気をつけてください。XML（ここでは関係ないですが、もちろんHTMLでも）では、タグに入るデータが無ければ、２つのやり方でタグを閉じることが出来ます。属性だけ、（"<"と">"の間にあって、タグの名前のあとにあります。ここでは、file="hellClock.lua"）スラッシュをいれることで、すぐにタグを閉じることが出来ます。

とにかく、この行がゲームに"hellClock.lua"を読み込ませますが、まだ無いので作りましょう！

では、実際の作業として、新しいwindowを作成しましょう。windowはここではFramesというので混乱しないでください。Framesはテキストも画像でも制限されることなく、何個でも作れます。このAddOnでは、テキストと、枠線のためのフォームと背景が必要ですが、まずは簡単な時計のためのFrameから始めましょう。

 <Frame name="ClockFrame" frameStrata="HIGH" toplevel="true" enableMouse="true"
 movable="true" parent="UIParent">
 <Size>
 <AbsDimension x="128" y="32"/>
 </Size>
 <Anchors>
 <Anchor point="TOP"/>
 </Anchors>
 </Frame>

このちょっとした記述は、幅が128pixelで高さが32pixelのFrameについて説明します。<Frame>タグに設定する重要な属性を噛み砕いて説明していきましょう。

''name'' :
Frameの名前（name）は、他と重複してはいけません。ここのClockFrameはとても一般的なので、このAddOnでベースにしているTellの"Clock"と"hellClock"一緒に使うと両方のClockframeが同じ名前のためうまく動きません。


''enableMouse'' :
enableMouseに"true"を設定すると、驚くことに(?)、frameとマウスに関連性を持たせます。

''parent'' :
parentの値は、（Frame,その他）このFrameの親になるインターフェース要素です。例えば、別のFrameと相対的に設置するときに使われます。"UIParent"は特定のFrameではなく、画面全体のことです。

movable:
Setting movable to true enables you to register functions to drag your window. In the end, if you develop things like this for other users, they might have a different taste on where their elements should be placed. So if possible, always make your frames movable.

Inside your <Frame> tag resides other information that would not logically fit into an attribute or clutter it up, like the Anchor (the side of the parent element on which the Frame should be positioned, TOP here will be the top of the screen), the position and the size of your Frame.

AbsDimension here means that it is an Absolute Dimension and the Anchor point, as said above, will position this window relative to the TOP of it's parent (UIParent, the entire screen).

By now, you should be able to save all files and log in to the game with your AddOn enabled. You will not see anything as of now, as there is nothing to see, but if you wish to follow the next steps more "visually" you can log into the game with the AddOn enabled, go on in the How To, and refresh your UI on every step to see what it changes.

*3. Raw FrameとBackdrop（背景）の作成

In order to be able to see something, it must have a color or in our case a texture.

In the World of Warcraft Interface you have different methods available to add textures or fonts to a Frame. You could shove a picture (texture) underneath it or you can assign a so called Backdrop. I prefer Backdrops for the most part, because you can resize the window (dynamically or by editing it's properties) any time in development without the need to change the texture that represents your Frame. A Backdrop consists of a background and an edge, here is how we are using it in this sample:

 <Backdrop name="$parentBackdrop" bgFile="Interface\TutorialFrame\TutorialFrameBackground"
 edgeFile="Interface\DialogFrame\UI-DialogBox-Border" tile="true">
 <EdgeSize>
 <AbsValue val="16"/>
 </EdgeSize>
 <TileSize>
 <AbsValue val="32"/>
 </TileSize>
 <BackgroundInsets>
 <AbsInset left="5" right="5" top="5" bottom="5"/>
 </BackgroundInsets>
 </Backdrop>

Let me explain the various attributes and tags you see above.

The <Backdrop> Tag that is encapsulating it all goes anywhere within the <Frame> Tag, just like the <Anchors> and <Size> tags that we have inserted in it above. Attributes to <Backdrop> used here are:

name:
Obviously, the name for the Backdrop. "$parent" here will be replaced by the name of it's parent element, which is in our case, "ClockFrame". So the name of the Backdrop will be "ClockFrameBackdrop" within the game.

bgFile:
This tells the game which texture to use as the Background. In our case this is the semi-transparent TutorialFrameBackground.blp from the original World of Warcraft Interface Files. Read my Beginners Guide if you want to know how to unpack the original files and see what textures are in there.

edgeFile:
This is telling which texture should be used for the edge. Edge textures are special 4x16 or 4x32 wide textures that contain a texture for the sides, and all four corners of a square. In our case, this is UI-DialogBox-Border.blp, which is also used for DropDown boxes for example. Scaled down it makes for a smooth frame for our Clock.

#ref(UI-DialogBox-Border.jpg)

Let's Recap before we move on to page two. We have populated the hellClock.xml with enough data to log into the game and have a Frame display that is not yet draggable and does not yet display any clock value.

On page two you will learn how to make the window draggable and of course how to make it display a clock! Move on..


[[次のページへ続く>Writing Your First AddOn2]]

※このコンテンツは[[World of Warcraft Hell>http://wow.mmhell.com/]] の内容を翻訳した内容になります。原文は2005/3/7に書かれたもので、それを2006/3/28現在の内容に修正しながら訳してあります。

訳者の英語力の拙さをご理解いただいた上で閲覧していただけると幸いです(^ ^; (誤訳はご指摘ください)

原文：[[Writing Your First AddOn (Interface Modification) - World of Warcraft Hell>http://wow.mmhell.com/articles/interface_modification/writing_your_first_addon.html]]


*Writing Your First AddOn

あなたは[[Beginners Guide]]を読んだかUIを少しいじってみましたが、次に何をするか、何ができるかわからないですか？ここでは、短い紹介と初めての例を書きたいと思います。

このHow Toでは[[Telo's Clock>http://ui.worldofwar.net/ui.php?id=68]]からTooltip機能を引いたようなものを作ることになります。デフォルトのミニマップにアンカー表示されるようなものではなく、サーバー時間を表示する新しいWindowを表示します。

この例ではXMLとLuaの基本的な使い方への十分な理解と今後のAddOn作成のFrameworkを提供して、開発工程初期の「まずどうするの？」を削減できればと思います。それでは始めましょう。この例では、「hellClock」という名前にしますが、もちろんどんな名前に変えてもかまいません。

*1. フォルダとファイルの準備

まずは、フォルダの準備です。もしすでにあなたのWoWインストールフォルダの中に[Interface]とういフォルダがあったらそこに切り替えてください。無ければ作成してください。Interfaceフォルダの中に[AddOns]というフォルダを作成してください-すでにあればそこに切り替えてください。このAddOnsフォルダに、hellClockを入れるフォルダを作成します。もちろんhellClockというフォルダです。

次はWoWに何を（どのXMLをファイルを）読み込んだらよいか伝えるTable of Contents（目次）です。それは、フォルダ名と同じ名前でならないのでず、ここでは[hellClock.toc]というファイルをテキストエディターで作成して、下記の情報をファイルに記述してください。

 ## Interface: 11000
 ## Title: Clock from Hell
 ## Notes: It's a Clock.. get over it, nothing fancy here.
 hellClock.xml

[[Beginners Guide]]を読んでいればこの意味はわかるはずです。読んでなければ読んでみてください。これは、WoWに"hellClock.xml"というファイルをAddOnフォルダから読み込むように伝えます。では、次に何をしましょう。そう、XMLファイルを作成しましょう。

*2. The XML: hellClock Windowのインサート

すべてのWoWのXMLで、<Ui>タグですべての内容を囲む必要があります。下記をいま作ったhellClock.xmにコピー＆ペーストしてください。

 <Ui xmlns="http://www.blizzard.com/wow/ui/" 
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://www.blizzard.com/wow/ui/ ..\..\FrameXML\UI.xsd">
 
 </Ui>

すべてのデータはこのタグの間にはいります！最初に書くのは、このAddOnに属するLUAスクリプトをWoWに読み込ませるScriptタグです。このようになります。

 <Script file="hellClock.lua" />

繰り返しになりますが、">"の前のスラッシュに気をつけてください。XML（ここでは関係ないですが、もちろんHTMLでも）では、タグに入るデータが無ければ、２つのやり方でタグを閉じることが出来ます。属性だけ、（"<"と">"の間にあって、タグの名前のあとにあります。ここでは、file="hellClock.lua"）スラッシュをいれることで、すぐにタグを閉じることが出来ます。

とにかく、この行がゲームに"hellClock.lua"を読み込ませますが、まだ無いので作りましょう！

では、実際の作業として、新しいwindowを作成しましょう。windowはここではFramesというので混乱しないでください。Framesはテキストも画像でも制限されることなく、何個でも作れます。このAddOnでは、テキストと、枠線のためのフォームと背景が必要ですが、まずは簡単な時計のためのFrameから始めましょう。

 <Frame name="ClockFrame" frameStrata="HIGH" toplevel="true" enableMouse="true"
 movable="true" parent="UIParent">
 <Size>
 <AbsDimension x="128" y="32"/>
 </Size>
 <Anchors>
 <Anchor point="TOP"/>
 </Anchors>
 </Frame>

このちょっとした記述は、幅が128pixelで高さが32pixelのFrameについて説明します。<Frame>タグに設定する重要な属性を噛み砕いて説明していきましょう。

''name'' :
Frameの名前（name）は、他と重複してはいけません。ここのClockFrameはとても一般的なので、このAddOnでベースにしているTellの"Clock"と"hellClock"一緒に使うと両方のClockframeが同じ名前のためうまく動きません。


''enableMouse'' :
enableMouseに"true"を設定すると、驚くことに(?)、frameとマウスに関連性を持たせます。

''parent'' :
parentの値は、（Frame,その他）このFrameの親になるインターフェース要素です。例えば、別のFrameと相対的に設置するときに使われます。"UIParent"は特定のFrameではなく、画面全体のことです。

''movable'' :
movableに"true"を設定するとwindowをドラックできるようになります。結局、他のユーザー向けにAddOnを作るとユーザー毎にどこに配置するか違うかもしれません。なので、可能であれば、いつもFramesは動かせるようにしてください。

Inside your <Frame> tag resides other information that would not logically fit into an attribute or clutter it up, like the Anchor (the side of the parent element on which the Frame should be positioned, TOP here will be the top of the screen), the position and the size of your Frame.

AbsDimension here means that it is an Absolute Dimension and the Anchor point, as said above, will position this window relative to the TOP of it's parent (UIParent, the entire screen).

By now, you should be able to save all files and log in to the game with your AddOn enabled. You will not see anything as of now, as there is nothing to see, but if you wish to follow the next steps more "visually" you can log into the game with the AddOn enabled, go on in the How To, and refresh your UI on every step to see what it changes.

*3. Raw FrameとBackdrop（背景）の作成

In order to be able to see something, it must have a color or in our case a texture.

In the World of Warcraft Interface you have different methods available to add textures or fonts to a Frame. You could shove a picture (texture) underneath it or you can assign a so called Backdrop. I prefer Backdrops for the most part, because you can resize the window (dynamically or by editing it's properties) any time in development without the need to change the texture that represents your Frame. A Backdrop consists of a background and an edge, here is how we are using it in this sample:

 <Backdrop name="$parentBackdrop" bgFile="Interface\TutorialFrame\TutorialFrameBackground"
 edgeFile="Interface\DialogFrame\UI-DialogBox-Border" tile="true">
 <EdgeSize>
 <AbsValue val="16"/>
 </EdgeSize>
 <TileSize>
 <AbsValue val="32"/>
 </TileSize>
 <BackgroundInsets>
 <AbsInset left="5" right="5" top="5" bottom="5"/>
 </BackgroundInsets>
 </Backdrop>

Let me explain the various attributes and tags you see above.

The <Backdrop> Tag that is encapsulating it all goes anywhere within the <Frame> Tag, just like the <Anchors> and <Size> tags that we have inserted in it above. Attributes to <Backdrop> used here are:

name:
Obviously, the name for the Backdrop. "$parent" here will be replaced by the name of it's parent element, which is in our case, "ClockFrame". So the name of the Backdrop will be "ClockFrameBackdrop" within the game.

bgFile:
This tells the game which texture to use as the Background. In our case this is the semi-transparent TutorialFrameBackground.blp from the original World of Warcraft Interface Files. Read my Beginners Guide if you want to know how to unpack the original files and see what textures are in there.

edgeFile:
This is telling which texture should be used for the edge. Edge textures are special 4x16 or 4x32 wide textures that contain a texture for the sides, and all four corners of a square. In our case, this is UI-DialogBox-Border.blp, which is also used for DropDown boxes for example. Scaled down it makes for a smooth frame for our Clock.

#ref(UI-DialogBox-Border.jpg)

Let's Recap before we move on to page two. We have populated the hellClock.xml with enough data to log into the game and have a Frame display that is not yet draggable and does not yet display any clock value.

On page two you will learn how to make the window draggable and of course how to make it display a clock! Move on..


[[次のページへ続く>Writing Your First AddOn2]]