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

by 3 contributors:

一般的に使われる種類のダイアログのひとつに、利用者がファイルを開いたり保存したりする際に利用されるファイル選択ダイアログがあります。

ファイルピッカー

利用者がファイルを選択するために使用するダイアログは、ファイルピッカー (file picker) と呼ばれています。 これは、「開く」と「保存」メニューコマンドでよく使われますが、 利用者がファイルを選択する必要のある場所ならばどこでも使用することが可能です。 ファイルピッカーの実装は、XPCOMnsIFilePicker インタフェースから利用できます。

ファイルピッカーは、chrome URL からのみ利用可能なことに注意してください。

ファイルピッカーは、以下の 3 つのモードで使用できます。

  • 開く - 利用者に、開くファイルの選択を求めます。
  • フォルダ選択 - 利用者に、フォルダ (ディレクトリ) の選択を求めます。
  • 保存 - 利用者に、保存するファイル名を選択するよう求めます。

ダイアログの外観は、モードによって異なり、 プラットフォームによっても変化することになります。 また、利用者がダイアログで選択したファイルやフォルダは、アプリケーションから読み書きすることが可能です。

ファイルピッカーのインタフェースである nsIFilePicker は、ダイアログを 3 つのモードのいずれかで表示する機能を担当しています。 このインタフェースを使用して、ダイアログにいくつかの機能を設定することが可能です。 また、ダイアログが閉じられるときの処理では、このインタフェースのプロパティから、選択されたファイルを取得することが可能です。

ファイルピッカーの生成

最初に、ファイルピッカーコンポーネントを作成して、初期化する必要があります。

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

まず、新しいファイルピッカーオブジェクトを作成して、変数 fp に保存します。 次に init 関数を使用して、ファイルピッカーの初期化を行います。 この関数は、引数として、ダイアログの開き元のウィンドウ、ダイアログのタイトル、モードの 3 つの引数を取ります。 この例の場合、モードは modeOpen で、これは「開く」用のダイアログにするために使用します。 また、これ以外に modeGetFoldermodeSave の 2 つのモードも使用することが可能です。 なお、これらのモードは、nsIFilePicker インタフェースの定数として定義されています。

デフォルトディレクトリとフィルタ

ダイアログを表示する前に可能な設定が 2 つあります。

  • 1 つ目はデフォルトディレクトリで、これによってダイアログが開かれたときに表示されるディレクトリを指定します。
  • 2 つ目はフィルタで、これによってダイアログに表示するべきファイル種別のリストを指定します。これを使うことで、例えば、HTML ファイル以外を非表示にすることが可能です。

デフォルトディレクトリは、ファイルピッカーオブジェクトの displayDirectory プロパティにディレクトリを設定することで指定できます。 このときのディレクトリは、nsILocalFile オブジェクトで指定する必要があります。 なお、設定を行わない場合には、デフォルトとして適当なものが選択されることになります。 また、フィルタを追加する場合は、appendFilters() 関数を呼び出すことで、 表示させたいファイル種別の設定を行います。

fp.appendFilters(nsIFilePicker.filterHTML | nsIFilePicker.filterImages);
fp.appendFilters(nsIFilePicker.filterText | nsIFilePicker.filterAll);
  • 最初の例は、HTML と画像ファイルのためのフィルタを追加します。この場合、利用者は、この種類のファイルからしか選択できません。このときの利用者の操作手順は、プラットフォームごとに固有になります。例えば、いくつかのプラットフォームでは、利用者には個々のフィルタ項目が分けて提示されることになるため、利用者は、HTML ファイル群と画像ファイル群のどちらを利用するかを選ぶことが可能です。
  • 2 番目の例は、テキストファイルとすべてのファイルのためのフィルタを追加します。これによって、利用者はテキストファイルだけを表示するか、すべてのファイルを表示するかを選択することができます。

また、フィルタには、 XML ファイルのための filterXML と、XUL ファイルのための filterXUL も使用することが可能です。 さらに、フィルタ対象のファイルを独自に指定したい場合には、以下のように appendFilter() 関数を使用することが可能です。

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

この行は、Wave と MP3 のオーディオファイルのためのフィルタを追加します。 最初の引数はファイルの種類を示すタイトルで、2 番目はファイルマスクのリストをセミコロンで区切って指定します。 必要ならば、リストに指定するマスクは、増やしても減らしても構いません。 また別のフィルタを追加するために、必要なだけ何度でも appendFilter() を呼び出すことが可能です。 フィルタの優先度は追加された順番によって決定され、 通常は最初に追加したものがデフォルトで選択された状態になります。

選択ファイルの取得

最後に show() 関数を呼び出すことで、ダイアログが表示されます。 この関数は引数を取りませんが、返り値には利用者が選択した操作を示すステータスコードが返されます。 なお、この関数を呼び出した場合、利用者がファイル選択を行うまで処理が戻らないことに注意してください。 また、この関数の返り値は、以下の 3 つの定数のうちのどれかになります。

  • returnOK - 利用者によってファイルの選択が行われ、OK が押されました。このとき利用者が選択したファイルは、ファイルピッカーの file プロパティに格納されます。
  • returnCancel - 利用者によって Cancel が押されました。
  • returnReplace - 保存モードのときに、利用者が既存のファイルを置き換えることを選択したことを示しています。(利用者が新規のファイル名を入力したときには、returnOK が返されます)

このため、ファイルピッカーの file プロパティからファイルオブジェクトの取得を行う場合には、 以下のように、まず返り値のチェックを行う必要があります。

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

次のセクションでは、ウィザードの作り方について見ていきます。

ドキュメントのタグと貢献者

Contributors to this page: ethertank, Mgjbot, Morishoji
最終更新者: ethertank,