netbeans.apache.org/src/old_content/content/tutorials/73/nbm-htmleditor_ja.adoc

// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= NetBeans プラットフォーム HTML エディタ
:jbake-type: platform_tutorial
:jbake-tags: tutorials 
:jbake-status: published
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:icons: font
:experimental:
:description: NetBeans プラットフォーム HTML エディタ - Apache NetBeans
:keywords: Apache NetBeans Platform, Platform Tutorials, NetBeans プラットフォーム HTML エディタ

このチュートリアルでは、簡単な HTML エディタの作成を通して、NetBeans プラットフォームのワークフローを簡潔に紹介します。簡単ではあっても、作成する HTML エディタは、NetBeans プラットフォームが提供するインフラストラクチャーを再利用するため、非常に成熟したものになります。たとえば、コーディングを行わなくても、HTML エディタは成熟したウィンドウシステムを持ちます。このチュートリアルを終了すれば、NetBeans プラットフォーム上でアプリケーションを作成、構築、および実行する方法に関する全般的な理解が得られます。

このチュートリアルを終了したら、 link:https://netbeans.apache.org/kb/docs/platform_ja.html[NetBeans プラットフォームの学習]のチュートリアルに進むことができます。学習の各チュートリアルは、さまざまな種類のアプリケーションに利用できる NetBeans API を幅広く網羅しています。このチュートリアルを省略し、「Hello World」アプリケーションを作成しないで学習のチュートリアルに進んでもかまいません。

NOTE:  このドキュメントでは NetBeans IDE 6.7 リリースを使用します。これ以前のバージョンを使用している場合、 link:61/nbm-htmleditor_ja.html[このドキュメントの 6.1 バージョン]を参照してください。NetBeans プラットフォームをはじめて使用する場合、このチュートリアルを進める前に「 link:nbm-quick-start_ja.html[NetBeans プラットフォームのクイックスタート]」を確認することをお勧めします。NetBeans プラットフォームアプリケーションを作成する方法を学習する代わりに、NetBeans プラグインを作成する方法を学習する場合は、「 link:nbm-google_ja.html[NetBeans プラグインクイックスタート]」を参照してください。







トラブルシューティングのために、 link:http://plugins.netbeans.org/PluginPortal/faces/PluginDetailPage.jsp?pluginid=6635[完了したサンプルをダウンロード]してソースを調べることもできます (任意)。

このチュートリアルの最後で、次のような HTML エディタができます。


image::images/htmleditor_html-editor-65.png[]

NOTE: 非常に簡単なデモアプリケーションですが、おもちゃではありません。コード補完、妥当性検査、事前定義済みの HTML スニペットなどの機能を備えた、HTML ページの簡単な編集をサポートする_実際_のプログラムです。

このチュートリアルで作成する HTML エディタは、「NetBeans プラットフォーム上」に構築されるリッチクライアントアプリケーションです。これは IDE のコア、つまり NetBeans プラットフォームがアプリケーションのベースになることを意味しています。NetBeans プラットフォーム上で必要なモジュールを追加し、IDE には必要だがアプリケーションでは必要のないモジュールを除外します。ここでは、NetBeans プラットフォームに追加される、ベースである IDE モジュールの一部が表示されます。


image::images/htmleditor_diagram.png[]

この HTML エディタを作成するということは、アプリケーションスケルトンを生成するということです。必要ないモジュールとユーザーインタフェース項目を除外し、IDE の起動時にデフォルトで開くウィンドウとして「お気に入り」ウィンドウを設定します。これらのアクティビティーはすべて、IDE のユーザーインタフェース要素でサポートされています。

NetBeans プラットフォーム上に各種機能を備えたアプリケーションを構築する、より正確には_アセンブル_することが、いかに単純で簡単であるかを自分で体験できます。最後に、WebStart を使用して簡単にダウンロードおよび起動できる最終製品の作成方法が表示されます。

NOTE:  それが単体の製品であっても、このチュートリアルのために NetBeans プラットフォームを別途ダウンロードする必要はありません。IDE でリッチクライアントアプリケーションを開発したあとで、アプリケーションにとって不要な IDE 特有のモジュールを除外します。


== スケルトンアプリケーションの生成

NetBeans プラットフォーム上にアプリケーションを作成するときは、まず NetBeans プラットフォームアプリケーションプロジェクトを作成します。デフォルトの NetBeans プラットフォームアプリケーションプロジェクトには、NetBeans IDE に含まれている_すべて_のモジュールだけでなく、NetBeans プラットフォームに含まれている_すべて_のモジュールも含まれます。これらのモジュールのすべてが必要ではないため、必要のないものを除外します。


[start=1]
1. 「新規プロジェクト」(Ctrl-Shift-N) ウィザードを使用して、次に示すように、「NetBeans モジュール」カテゴリのテンプレートから「NetBeans プラットフォームアプリケーション」プロジェクトを作成します。


image::images/htmleditor_new-nb-app-wiz-65.png[]

「次へ」をクリックし、NetBeans プラットフォームアプリケーションプロジェクトの名前を「NetBeansHTMLEditor」にします。「完了」をクリックします。


[start=2]
1. プロジェクトノードを右クリックして「プロパティー」を選択し、NetBeans プラットフォームアプリケーションの「プロジェクトプロパティー」ダイアログでいくつかの変更を行います。
* 「構築」パネルで「スタンドアロンアプリケーションを作成」ラジオボタンがクリックされていることを確認し、NetBeans プラットフォーム上のリッチクライアントアプリケーションにすることを指定します。

実行可能アプリケーションのブランド名を確認し、タイトルバーのアプリケーションタイトルを次のように変更します。


image::images/htmleditor_html-editor-prop-1-65.png[]
* 「スプラッシュ画面」パネルで、次に示すように、アプリケーションのスプラッシュ画面、進捗バーのブランディングを提供できることを確認します。
image::images/htmleditor_html-editor-prop-2-65.png[]

NOTE:  スプラッシュ画面がない場合は、 link:images/htmleditor_splash.gif[これ]を使用してください。

.

[start=3]
1. 「プロジェクトプロパティー」ダイアログの「ライブラリ」パネルに、「クラスタ」が一覧表示されます。クラスタとは、関連するモジュールの集合のことです。ここで選択する必要のあるクラスタは、次に示すように、 ``ide11``  と  ``platform11``  のみです。


image::images/htmleditor_libraries-cust-1.png[]

次に、「解決」ボタンをクリックすると、アプリケーションの一部として選択したモジュールによって必要とされる一連のモジュールに、必要なモジュールが追加されます。「解決」ボタンが消え、エラーを示す赤いメッセージがなくなります。


image::images/htmleditor_libraries-cust-2.png[]

これで HTML エディタに関連する NetBeans モジュールのサブセットができました。ただし、今あるモジュールは必要ですが、これらのモジュールにあるユーザーインタフェース要素すべてが必要というわけではありません。次の節では、特に、作成する HTML エディタに対する、ユーザーインタフェースの調整と、ウィンドウレイアウトのカスタマイズを行います。


== ユーザーインタフェースの調整

選択したモジュールにあるユーザーインタフェースの多くを、保持したり拒否したりできます。たとえば、HTML エディタでは、「ツール」メニュー以下の項目の一部またはすべてはおそらく必要ありません。同様に、必要ないツールバーやツールバーボタンがある場合もあります。この節では、特定のリッチクライアントアプリケーションに有用なものだけ残すように、IDE のユーザーインタフェースを削除します。


[start=1]
1. NetBeans プラットフォームアプリケーションプロジェクトを展開し、次に示すように、「モジュール」ノードを右クリックして「新規を追加」を選択します。


image::images/htmleditor_add-module-61.png[]

「新規プロジェクト」(Ctrl-Shift-N) ウィザードが表示されます。プロジェクトの名前を  ``BrandingModule``  にして、「次へ」をクリックします。


[start=2]
1. 「コードベース名」フィールドに「 ``org.netbeans.brandingmodule`` 」と入力します。

[start=3]
1. 「XML レイヤーを生成」を選択し、「完了」をクリックします。

[start=4]
1. ブランドモジュールで、 ``layer.xml``  ノードを展開します。2 つのサブノードが展開されます。


image::images/htmleditor_expanded-xml-layer-61.png[]


[start=5]
1.  ``<コンテキスト内のこのレイヤー>``  ノードには、すべてのモジュールがレイヤーで登録する、すべてのフォルダおよびファイルがマージされた状態で表示されます。項目を除外するには、次に示すように、その項目を右クリックして「削除」を選択します。


image::images/htmleditor_this-layer-in-context-61.png[]

次に、IDE ではモジュールの  ``layer.xml``  ファイルにタグが追加されます。そのファイルにより、モジュールがインストールされるときに、削除した項目が非表示になります。たとえば、 ``「Menu Bar/Edit」`` を右クリックすると、HTML エディタに必要のないメニュー項目を「編集」メニューから削除できます。これにより、 ``layer.xml``  ファイルに次のようなスニペットを生成します。


[source,xml]
----

<folder name="Menu">
    <folder name="Edit">
        <file name="org-netbeans-modules-editor-MainMenuAction$StartMacroRecordingAction.instance_hidden"/>
        <file name="org-netbeans-modules-editor-MainMenuAction$StopMacroRecordingAction.instance_hidden"/>
    </folder>       
</folder>
----

前のスニペットの結果、ほかのモジュールによって提供された  ``Start Macro Recording``  および  ``Stop Macro Recording``  アクションが、ブランドモジュールによってメニューから削除されます。それらをふたたび表示するには、 ``layer.xml``  ファイルから上部のタグを削除するだけです。


[start=6]
1. 前の手段で説明されている方式を使用して、必要な数のツールバー、ツールバーのボタン、メニュー、およびメニュー項目を非表示にします。この段階を終了したら、 ``layer.xml``  ファイルを確認します。これを行うと、削除した項目に応じて、次のようなものが表示されるはずです。

[source,xml]
----

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE filesystem PUBLIC "-//NetBeans//DTD Filesystem 1.1//EN" "https://netbeans.org/dtds/filesystem-1_1.dtd">
<filesystem>
    <folder name="Menu">
        <file name="BuildProject_hidden"/>
        <folder name="File">
            <file name="Separator2.instance_hidden"/>
            <file name="SeparatorNew.instance_hidden"/>
            <file name="SeparatorOpen.instance_hidden"/>
            <file name="org-netbeans-modules-project-ui-CloseProject.shadow_hidden"/>
            <file name="org-netbeans-modules-project-ui-CustomizeProject.shadow_hidden"/>
            <file name="org-netbeans-modules-project-ui-NewFile.shadow_hidden"/>
            <file name="org-netbeans-modules-project-ui-NewProject.shadow_hidden"/>
            <file name="org-netbeans-modules-project-ui-OpenProject.shadow_hidden"/>
            <file name="org-netbeans-modules-project-ui-RecentProjects.shadow_hidden"/>
            <file name="org-netbeans-modules-project-ui-SetMainProject.shadow_hidden"/>
            <file name="org-netbeans-modules-project-ui-groups-GroupsMenu.shadow_hidden"/>
        </folder>
        <file name="Refactoring_hidden"/>
        <file name="RunProject_hidden"/>
        <folder name="Window">
            <file name="ViewRuntimeTabAction.shadow_hidden"/>
            <file name="org-netbeans-modules-project-ui-logical-tab-action.shadow_hidden"/>
            <file name="org-netbeans-modules-project-ui-physical-tab-action.shadow_hidden"/>
        </folder>
    </folder>
</filesystem>
----


== ウィンドウレイアウトの調整

 ``<コンテキスト内のこのレイヤー>``  ノードを使用して、既存の項目を削除するだけではなく、それらの内容を変更することもできます。たとえば、HTML エディタは HTML ファイルを対象とします。したがって、Java ソースファイルやプロジェクトにも使用する通常の IDE とは異なり、初期レイアウトに「 ``お気に入り`` 」ウィンドウを表示することは理にかなっています。

ウィンドウレイアウトの定義も、このレイヤーにファイルとして記述され、 ``Windows2``  フォルダにすべて格納されます。 ``Windows2``  フォルダ内のファイルは、 link:http://bits.netbeans.org/dev/javadoc/org-openide-windows/org/openide/windows/doc-files/api.html[ウィンドウシステム API] によって定義された、擬似的に読解可能な XML ファイルです。これらはかなり複雑です。ただし次に示すように、HTML エディタのためにはこれらを完全に理解する必要はありません。


[start=1]
1. ブランドモジュールの  ``<コンテキスト内のこのレイヤー>``  ノードで、次に強調表示されている「favorites.settings」および「favorites.wstcref」という名前の 2 ファイルについて、 ``Windows2/Components``  および  ``Windows2/Modes``  を確認します。


image::images/htmleditor_find-favorites2-61.png[]

最初のファイルはコンポーネントがどのように見えるか、またどのように作成されるかを定義します。これは変更する必要がないので、このファイルは編集する必要はありません。2 番目のファイルは目的に関わるファイルです。その内容は次のようになっています。


[source,xml]
----

<tc-ref version="2.0">
    <module name="org.netbeans.modules.favorites/1" spec="1.1" />
    <tc-id id="favorites" />
    <state opened="false" />
</tc-ref>
----


[start=2]
1. この XML のほとんどの意味がわからないとしても、ほかのドキュメントを読まずに理解できる箇所が 1 行だけあります。 ``false``  を  ``true``  に変更すると、そのコンポーネントをデフォルトで開くことができます。これをやってみましょう。

[start=3]
1. 同様に、「コンポーネントパレット」をデフォルトで開くように  ``CommonPalette.wstcref``  ファイルを変更できます。

これで、ブランドモジュールに新しいファイルが含まれていることが表示されます。変更したファイルそれぞれに一つです。実際には、これらのファイルは前の手順で検出したファイルをオーバーライドします。これらは、モジュールの  ``layer.xml``  ファイルに自動的に登録されます。


== 「お気に入り」ウィンドウの調整

「ファイル」ウィンドウに表示される、NetBeans プラットフォームアプリケーションプロジェクトの  ``branding``  フォルダのサブフォルダでは、NetBeans のソースで定義された文字列をオーバーライドできます。この節では、「お気に入り」ウィンドウで使用されるラベルを定義する文字列をオーバーライドします。たとえば、特に HTML ファイル用にそのウィンドウを使用するため、「お気に入り」ラベルを「HTML ファイル」に変更します。


[start=1]
1. 「ファイル」ウィンドウを開いて NetBeans プラットフォームアプリケーションプロジェクトの  ``branding``  フォルダを展開します。

[start=2]
1.  ``branding/modules``  内に新しいフォルダ構造を作成します。IDE では、フォルダを右クリックし、「新規」>「その他」を選択して「その他」カテゴリからフォルダを選択することで、フォルダを作成できます。新しいフォルダに  ``org-netbeans-modules-favorites.jar``  という名前を付けます。そのフォルダ内に、 ``org/netbeans/modules/favorites``  のフォルダ構造を作成します。最終フォルダ、つまり  ``favorites``  内に、新しい  ``Bundle.properties``  ファイルを作成します。


image::images/htmleditor_favorites-branding-61a.png[]

このフォルダ構造とプロパティーファイルは、「お気に入り」ウィンドウに関係する NetBeans のソースのフォルダ構造と一致します。


[start=3]
1. 次のスクリーンショットに示す文字列を追加し、「お気に入り」ウィンドウのソース内の一致するプロパティーファイルで定義されている同じ文字列をオーバーライドします。


image::images/htmleditor_favorites-branding-61b.png[]

この手順を簡素化するには、前に定義した文字列をコピー＆ペーストします。


[source,java]
----

Favorites=HTML ファイル
ACT_AddOnFavoritesNode=HTML ファイルを検索(&amp;F)
ACT_Remove=HTML ファイルの一覧から削除(&amp;R)
ACT_View=HTML ファイル
ACT_Select=HTML ファイル
ACT_Select_Main_Menu=HTML ファイルの一覧から選択

# JFileChooser
CTL_DialogTitle=HTML ファイルの一覧に追加
CTL_ApproveButtonText=追加
ERR_FileDoesNotExist={0} が存在しません。
ERR_FileDoesNotExistDlgTitle=HTML ファイルの一覧に追加
MSG_NodeNotFound=HTML ファイルの一覧にドキュメントノードは見つかりませんでした。
----

あとでアプリケーションを起動すると、「お気に入り」ウィンドウのテキストとラベルが、前述の一覧のように変更されていることがわかります。これは、NetBeans プラットフォームからコンポーネントを取得し、必要に合わせてブランディングできることを示しています。


== アプリケーションの実行

アプリケーションの実行は、プロジェクトノードを右クリックしてメニュー項目を選択するのと同じくらい簡単です。


[start=1]
1. アプリケーションのプロジェクトノードを右クリックし、「すべてを削除して構築」を選択します。

[start=2]
1. アプリケーションのプロジェクトノードを右クリックし、「実行」を選択します。

[start=3]
1. アプリケーションが配備されたら、「お気に入り」ウィンドウ内を右クリックし、HTML ファイルを含むフォルダを選択します。次に、次に示すように、HTML ファイルを開くことができます。


image::images/htmleditor_html-editor-65.png[]

これで、Java コードを 1 行も入力せずに、完全で機能的な HTML エディタを作成できました。


== アプリケーションの配布

アプリケーションの配布用として、2 つの方法のうち 1 つを選択します。アプリケーションの制御をできるだけ維持する場合、Web 経由でアプリケーションを配布する Web Start (JNLP) を使用します。このシナリオでは、アプリケーションをアップデートする場合は、ローカルで作業し、エンドユーザーにアップデートについて知らせます。エンドユーザーが次回 Web からアプリケーションを起動するときに、自動的に使用可能になります。または、アプリケーションを含む ZIP ファイルを配布します。エンドユーザーは、ローカルで利用できるアプリケーションを入手できます。次に説明するアップデート機構を使用して、アップデートおよび新しい機能を配布します。


=== ZIP ファイルを使用したアプリケーションの配布

アプリケーションを拡張可能にするには、ユーザーにアプリケーションの機能を拡張するためのモジュールをインストールさせる必要があります。これを行うため、アプリケーションはすでにプラグインマネージャーをバンドルしています。


[start=1]
1. 「ツール」>「プラグイン」メニュー項目を選択し、HTML エディタで役立つプラグインをいくつかインストールします。 link:http://plugins.netbeans.org/PluginPortal/[プラグインポータル]を参照し、適切なものをいくつか検索します。これも、エンドユーザーがアプリケーションのローカルインストールを更新する方法です。

[start=2]
1. アプリケーションのプロジェクトノードを右クリックし、「配布用 ZIP を構築」を選択します。

[start=3]
1.  ``dist``  フォルダ (「ファイル」ウィンドウに表示される) で、展開可能な ZIP ファイルとその内容を確認できるはずです。


image::images/htmleditor_unzipped-app-61.png[]

NOTE:  アプリケーションの起動ツールは、前に示すように、 ``bin``  フォルダに作成されます。


=== 共有の NetBeans Web Start リポジトリからの HTML エディタの配布

ZIP ファイルを配布する代わりに、「JNLP アプリケーションを実行」を使用してアプリケーションを最初に起動するときに生成される  ``master.jnlp``  ファイルを調整して、Web Start による配布を準備してみましょう。作業を行なっていても、まだ配布の準備は整っていません。少なくとも、情報セクションを変更して、より良い説明やアイコンを提供する必要があります。

標準 JNLP インフラストラクチャーに対するほかの変更は、www.netbeans.org での共有 JNLP リポジトリの使用です。デフォルトでは、スイート用に生成される JNLP アプリケーションには、常に、そのすべてのモジュールと依存するすべてのモジュールが含まれます。これはイントラネットでの使用時に便利な場合もありますが、幅広くインターネットで使用する場合には、やや実用性に欠けることがあります。インターネットの場合、NetBeans プラットフォームに構築されたすべてのアプリケーションは、NetBeans モジュールの 1 つのリポジトリを参照するほうがよいでしょう。これは、そのようなモジュールは共有されるため、何度もダウンロードする必要がないからです。

NetBeans 6.1 にはそのようなリポジトリがあります。NetBeans IDE のすべてのモジュールは含まれていませんが、HTML エディタのような IDE 以外のアプリケーションを作成するのに十分なものが含まれています。リポジトリを使用するには、正しい URL を追加して、 ``platform.properties``  を変更するだけです。


[source,java]
----

# netbeans.org の共通のリポジトリからライブラリを共有
# この URL は release65 JNLP ファイル専用:
jnlp.platform.codebase=http://bits.netbeans.org/6.5/jnlp/

----

アプリケーションが JNLP アプリケーションとして起動されるとすぐに、すべての共有プラグインモジュールが netbeans.org から読み込まれ、同様のアプリケーション間で共有されます。

link:http://netbeans.apache.org/community/mailing-lists.html[ご意見をお寄せください]


== 関連項目

これで、NetBeans の HTML エディタのチュートリアルは終わりです。NetBeans プラットフォームでのアプリケーションの作成と開発の詳細については、次のリソースを参照してください。

*  link:https://netbeans.apache.org/kb/docs/platform_ja.html[その他の関連チュートリアル]
*  link:https://bits.netbeans.org/dev/javadoc/[NetBeans API Javadoc]