Open and Save Dialogs

「開く」「保存」ダイアログ

A common type of dialog in one where the user can select a file to open or save.

よくあるダイアログは、ユーザが開いたり保存したりするファイルを選択できる ものでしょう。

File Pickers

ファイルピッカー (File Picker)

A file picker is a dialog that allows the user to select a file. It is most commonly used for the Open and Save As menu commands, but you can use it any place in which the user needs to select a file. The XPCOM interface nsIFilePicker is used to implement a file picker.

ファイルピッカーとは、ユーザがファイルを選択できるダイアログです。 これが最もよく使われるのは、「開く」と「名前を付けて保存」メニューコマンドですが、 ユーザがファイルを選択する必要のある場所ならどこでも使うことができます。XPCOM インターフェイス nsIFilePicker がファイルピッカーを実装するのに使われています。

You can use the file picker in one of three modes:

ファイルピッカーは、次の 3 つのモードの一つで使用できます:

  • Open: the user is asked to select a file for opening.
  • Get Folder: the user is asked to select a folder (directory).
  • Save: the user is asked to select the name to save a file to.
  • 開く (Open): ユーザは、開くファイルを選択するよう求められる。
  • フォルダ選択 (Get Folder): ユーザは、フォルダ (ディレクトリ) を選択するよう求められる。
  • 保存 (Save): ユーザは、ファイルを何という名前に保存するかを選択するよう求められる。

The appearance of the dialog will be different for each type and will vary on each platform. Once the user selects a file or folder, it can be read from or written to.

ダイアログの外観は、その種類により違います。また、プラットフォームによっても 変化します。ユーザがファイルやフォルダーを選択すると、その読み書きができます。

The file picker interface nsIFilePicker is responsible for displaying a dialog in one the three modes. You can set a number a features of the dialog by using the interface. When the dialog is closed, you can use the interface functions to get the file that was selected.

ファイルピッカーインターフェイス nsIFilePicker は、3 つのモードのうちの 1 つでダイアログを表示する役割を果たします。インターフェイスを使うことにより、 ダイアログの機能の多くの設定ができます。ダイアログを閉じるとき、選択した ファイルを取得するためにインターフェイスの関数が使えます。

To begin, you need to create a file picker component and initialize it.

始めに、ファイルピッカーコンポーネントを作り、それを初期化する必要があります。

var nsIFilePicker = Components.interfaces.nsIFilePicker;
var fp = Components.classes["@mozilla.org/filepicker;1"]
        .createInstance(nsIFilePicker);
fp.init(window, "Select a File", nsIFilePicker.modeOpen);

First, a new file picker object is created and stored in the variable 'fp'. The 'init' function is used to initialize the file picker. This function takes three arguments, the window that is opening the dialog, the title of the dialog and the mode. The mode here is 'modeOpen' which is used for an Open dialog. You can also use 'modeGetFolder' and 'modeSave' for the other two modes. These modes are constants of the nsIFilePicker interface.

まず、新しいファイルピッカーオブジェクトを作り、変数 'fp' に保存しています。 'init' 関数を使ってファイルピッカーを初期化します。この関数は、引数を 3 つ取ります。 ダイアログを開いているウィンドウ、ダイアログのタイトル、そしてモードです。 モードはこの例では 'modeOpen' で、これは「開く」ダイアログのときに使います。 他の 2 つのモードの場合、'modeGetFolder' と 'modeSave' が使えます。 これらのモードは、nsIFilePicker インターフェイスの定数です。

There are two features you can set of the dialog before it is displayed. The first is the default directory that is displayed when the dialog is opened. The second is a filter that indicates the list of file types that are displayed in the dialog. This would be used, for example, to hide all but HTML files.

ダイアログを表示する前に、ダイアログに設定できる機能が 2 つあります。1 つ目は、 ダイアログが開かれるときに表示されるデフォルトディレクトリです。2 つ目は、 ダイアログに表示されるファイルの型のリストを示すフィルターです。これを使えば、 例えば、HTML ファイル以外のすべてのファイルを隠すことができます。

You can set the default directory by setting the displayDirectory property of the file picker object to a directory. The directory should be an nsILocalFile object. If you do not set this, a suitable default will be selected for you. To add filters, call the appendFilters function to set the file types that you wish to have displayed.

デフォルトディレクトリは、ファイルピッカーオブジェクトの displayDirectory プロパティにディレクトリを設定する ことにより指定できます。ディレクトリは、 nsILocalFile オブジェクトでなければ なりません。これを設定しない場合、適切なデフォルトが選択されます。フィルターを 追加するには、appendFilters 関数を呼び出して、表示させたいファイルの型を設定します。

fp.appendFilters(nsIFilePicker.filterHTML | nsIFilePicker.filterImages);
fp.appendFilters(nsIFilePicker.filterText | nsIFilePicker.filterAll);

The first example will add filters for HTML and for image files. The user will only be able to select those types of files. The manner in which this is done is platform specific. On some platforms, each filter will be separate and the user can choose between HTML files and image files. The second example will add filters for text files and for all files. The user therefore has the option to display text files only or all files.

最初の例は、HTML とイメージファイルのためのフィルターを追加しています。ユーザは、 この型のファイルからしか選択できません。これを行なう方法は、プラットフォームに よって異なります。プラットフォームによっては、個々のフィルターは区別され、 ユーザは HTML ファイルとイメージファイルから選ぶことができます。2 番目の例は、 テキストファイルとすべてのファイルのためのフィルターを追加しています。 このため、ユーザにはテキストファイルだけを表示するかすべてのファイルを表示するか のオプションが与えられています。

You can also use 'filterXML' and 'filterXUL' to filter for XML and XUL files. If you would like to filter for custom files, you can use the appendFilter function to do this:

XML ファイルまたは XUL ファイルのフィルター用に、'filterXML' と 'filterXUL' を使うこともできます。カスタムファイル用のフィルターが欲しい場合、次のように appendFilter 関数が使えます:

fp.appendFilter("Audio Files","*.wav; *.mp3");

This line will add a filter for Wave and MP3 audio files. The first argument is the title of the file type and the second is a semicolon-seperated list of file masks. You can add more masks or fewer masks as needed. You can call appendFilter as many times as necessary to add additional filters. The order you add them determines their priority. Typically, the first one added is selected by default.

この行は、Wave と MP3 オーディオファイルのためのフィルターを追加します。 最初の引数はファイルの型のタイトルで、2 番目はセミコロンで区切ったファイルマスク のリストです。必要に応じて、マスクを増やしたり減らしたりできます。別のフィルター を追加するために、何度でも appendFilter を呼び出すことができます。フィルターを 追加する順序により、優先度が決まります。多くの場合、最初に追加したものが デフォルトで選択されます。

Finally, you can show the dialog by calling the show function. It takes no arguments but returns a status code that indicates what the user selected. Note that the function does not return until the user has selected a file. The function returns one of three constants:

最後に、show 関数を呼び出すことによりダイアログを表示できます。これは引数を 取りませんが、ユーザが選択したものを示すステータスコードを返します。ユーザが ファイル選択を行うまで、コードは返されないことに注意してください。次の 3 つの定数のどれかを返します:

  • returnOK: the user selected a file and pressed OK. The file the user selected will be stored in the file picker's file property.
  • returnCancel: the user pressed Cancel.
  • returnReplace: in the save mode, this return value identifies that the user selected a file to be replaced. (returnOK will be returned when the user entered the name of a new file.)
  • returnOK: ユーザはファイルを選択し、OK を押した。ユーザが選択したファイルは、 ファイルピッカーの file プロパティに保持される。
  • returnCancel: ユーザは Cancel を押した。
  • returnReplace: 保存モードで、この戻り値はユーザが置き換えるファイルを 選択したことを示す。(ユーザが新しいファイルの名前を入力したときには、 returnOK が返される。)

You should check the return value and then get the file object from the file picker using the file property.

戻り値をチェックしてから、file プロパティを使って ファイルピッカーからファイルオブジェクトを取得すべきです。

var res = fp.show();
if (res == nsIFilePicker.returnOK){
  var thefile = fp.file;
  // --- do something with the file here ---
}

(Next) Next, we'll see how to create a wizard.

(進む) 次は、ウィザードの作り方を見ることにしましょう。


Copyright (C) 1999 - 2004 XulPlanet.com
訳者: kmine
このドキュメントのオリジナルは XULPlanet において英語で公布されています。
またドキュメントの管理の言語は現在も英語です。この日本語訳は、
利用者の利便のために Mozilla Japan 翻訳部門によって提供されたものです。
フィードバックは英語で、元の著者に送って下さい。
翻訳された文書の一覧は、現在以下のURLで見ることが出来ます。
http://www.mozilla.gr.jp/jt/xul/progress.html