Lightroomプラグイン開発「書き出し..」ダイアログにテキストボックスを実装する。

Adobe Lightroom プラグインを開発しています。「書き出し..」機能を使ってウェブサイトの写真ページを生成してしまおうと目論んでいまして、今回は「書き出し..」ダイアログ内に追加したセクションにテキストフィールドを配置する方法を紹介します。

前回までのおさらい

「書き出し..」のダイアログに新しくテキストフィールドを足すには、「書き出し..」の「書き出し先」プルダウンリストに候補を追加しなければなりません。

---

Lightroomプラグイン開発、ひとまず「書き出し..」リストに追加したい。 | IT-Gate
関連記事をご参照ください。

---

そして、「書き出し先」から追加した候補を選んだ際に、新しいダイアログのセクションを追加してあげなければなりません。

---

Lightroomプラグイン開発「書き出し..」ダイアログにセクションを追加する。 | IT-Gate
関連記事をご参照ください。

---

これで、テキストフィールドを追加する準備ができました。

テキストフィールド追加の概要

テキストフィールドを追加して、ユーザーが任意の文字列を入力できる様にしようと思います。

当然、入力してもらった値はLuaスクリプト内で使いたい値なので、内部の変数を追加して入力値を格納できる様にします。

ではやってみます。

まずは変数を準備する。

テキストフィールド自体は値を設定する手段ですので、まず先に設定した値を保存する変数を準備します。

変数はInfo.luaでLrExportServiceProviderに指定したfile(今回はSorairoPageGenServiceProvider.lua)に定義します。

SorairoPageGenServiceProvider.lua

require "SampleDialogSections"

return {
  exportPresetFields = {
    { key = 'fieldName', default = 'default value' },
  },
  sectionsForBottomOfDialog = SampleDialogSections.sectionsForBottomOfDialog,
}

緑色の字が今回追加した部分です。exportPresetFieldsという変数はLightroom SDK で予め定義されているテーブル変数です。

これにテーブル形式でkey(変数名)とdefault(デフォルト値)を代入します。今回は1セットだけ追加しました。keyが「fieldName」で、デフォルト値が「default value」です。

exportPresetFieldsについては、Lightroom SDK 6.0 Guide.pdf の「CHAPTER 3: Creating Export and Publish Services」の「Remembering user choices」60ページに書かれています。

ダイアログにテキストフィールドを実装する。

先ほどのコードで「require “SampleDialogSections”」と書いていた部分、これがダイアログの実装を書いているSampleDialogSections.luaをロードしている部分でした。

前回までで、このSampleDialogSections.luaは次の様なソースコードになっています。

SampleDialogSections.lua(おさらい)

local LrView = import 'LrView'

SampleDialogSections = {}

function SampleDialogSections.sectionsForBottomOfDialog( _, propertyTable )
  local f = LrView.osFactory()
  local result = {
    {
      title = "出力セクションのタイトル",
      f:static_text {
        title = "Hello World LR!",
      },
    },
  }
  return result	
end

“Hello World LR!”と表示したラベルの隣に、テキストフィールドを追加するには以下の様に記載を加えます。

SampleDialogSections.lua(実装)

local LrView = import 'LrView'

SampleDialogSections = {}

function SampleDialogSections.sectionsForBottomOfDialog( _, propertyTable )
  local f = LrView.osFactory()
  local result = {
    {
      title = "出力セクションのタイトル",
      f:static_text {
        title = "Hello World LR!",
      },
      f:edit_field {
        width_in_chars = 50,
        immediate = true,
        value = LrView.bind( 'fieldName' ),
      },
    },
  }
  return result	
end

fはLrView.osFactory()で取得したオブジェクトです。f:edit_fieldがテキストフィールドを現しています。

edit_fieldの、width_in_chars=50はテキストフィールドの幅を50文字が入る長さに指定、immediate=trueは変数とフィールドの値を即時に同期する設定です。

valueはテキストフィールドの値です。変数を対応づけることで、変数にテキストフィールドの値を設定できたり、テキストフィールドの値として変数の値を表示したりできる様になります。

今回は「value = LrView.bind( ‘fieldName’ )」で、テキストフィールドの値に‘fieldName’という変数名を割り当て(bind)しています。

こんな感じに表示されました。

おや･･･、ラベルとテキストフィールドは縦に並ぶんですね。

まぁひとまずは、変数に設定した初期値の’default value’という文字列もテキストフィールドに表示されていますし、変数とテキストフィールドの紐付けはうまくいっていることが分かります。

テキストフィールドは、ラベルと横並びで実装したい。

よくあるパターンとして、設定項目名をラベルで実装し、その右隣りに入力用のテキストフィールドを置くという項目配置があります。

先ほどのシンプルな実装では縦並びになってしまったので、これを横並びにしようと思います。

項目を横に並べるには、次の様にf:rowで並べたい項目をくくります。fは LrView.osFactory()を格納した変数です。

local LrView = import 'LrView'

SampleDialogSections = {}

function SampleDialogSections.sectionsForBottomOfDialog( _, propertyTable )
  local f = LrView.osFactory()
  local result = {
    {
      title = "出力セクションのタイトル",
      f:row {
        f:static_text {
          title = "Hello World LR!",
        },
        f:edit_field {
          width_in_chars = 50,
          immediate = true,
          value = LrView.bind( 'fieldName' ),
        },
      },
    },
  }
  return result	
end

これで横並びになります。

だいぶイメージに近づきました。