【Processing】プルダウンメニューを日本語で使いたい

2023年12月21日 12:39

【状況】プルダウンメニューを使い，さらに日本語で出すのに一番楽な方法は何か模索．探したコードそのままでもうまく動かず．（Processing 4.3）
【対処】ControlP5を使うのが一番楽みたい．ちょこちょこ設定を修正したら動いた，のメモ．

ControlP5を導入

「スケッチ」→「ライブラリをインポート」→「Manege Libraries」
Filterに，「controlp5」を入れると出てくるので，「Install」する．
インポートして使えるように（「スケッチ」→「ライブラリをインポート」の「ControlP5」を選択すると出る）．

import controlP5.*;

日本語フォントの設定

createFontで日本語を指定して使う．ControlP5とこんな感じで組み合わせる．メニューに個別に設定することもできる模様．

ControlP5 cp5;
PFont japaneseFont;

// 日本語フォントの読み込み
japaneseFont = createFont("MS Gothic", 12); // ここで使用するフォントに置き換える

cp5 = new ControlP5(this);
cp5.setFont(japaneseFont);  // フォントを設定

メニューの設定

パラメータは見たままだけど，setSizeの縦の値は，個々のメニューの高さではなく，メニューを展開したときの範囲みたい．そのため，適度な大きさが必要．

  // プルダウンメニューの作成
  dropdown = cp5.addDropdownList(namePulldown)
               .setPosition(100, 100)  // 位置
               .setSize(200, 100)      // メニューを全展開したときの幅と高さ
               .setBarHeight(24)       // 一番上のボックスの高さ
               .setItemHeight(24);     // 選択肢ボックスの高さを設定
  
  // 選択肢を追加（↑にくっつけられるが，ここでは分離した）
  dropdown.addItem("オプション 1", 0);
  dropdown.addItem("オプション 2", 1);
  dropdown.addItem("オプション 3", 2);

メニュー選択後の処理

選択された項目のインデックス番号（0からスタート）を取得．addItemで設定した第２引数を取得したかったけど，仕様上，直接取得できないみたい．いろいろ組み合わせる方法が出てきたけど面倒w
メニュー名をnamePulldownに入れています．

// メニュー選択後の処理
void controlEvent(ControlEvent event) {
  // プルダウンメニューのイベントをチェック
  boolean is_controller = event.isController();
  boolean is_dropdown = event.getName().equals(namePulldown);
  if (is_controller && is_dropdown) {
     // 選択された項目のインデックスを取得
    int index = (int) event.getController().getValue();
    println("選択されたインデックス番号: " + index);
   }
}

完成版

import controlP5.*;

ControlP5 cp5;
PFont japaneseFont;
DropdownList dropdown;

String namePulldown = "選択してください";  // メニューの表示タイトル（部品名としても利用）

void setup() {
  size(400, 400);

  // 日本語フォントの読み込み
  japaneseFont = createFont("MS Gouthic", 12); // ここで使用するフォントに置き換える

  cp5 = new ControlP5(this);
  cp5.setFont(japaneseFont);  // フォントを設定（以降，全て同じフォントが適用される模様）

  // プルダウンメニューの作成
  dropdown = cp5.addDropdownList(namePulldown)
               .setPosition(100, 100)  // 位置
               .setSize(200, 100)      // メニューを全展開したときの幅と高さ
               .setBarHeight(24)       // 一番上のボックスの高さ
               .setItemHeight(24);     // 選択肢ボックスの高さを設定
  
  // 選択肢を追加（↑にくっつけられるが，ここでは分離した）
  dropdown.addItem("オプション 1", 0);
  dropdown.addItem("オプション 2", 1);
  dropdown.addItem("オプション 3", 2);
}

void draw() {
  background(200);
}

// イベントリスナー
void controlEvent(ControlEvent event) {
  // プルダウンメニューのイベントをチェック
  boolean is_controller = event.isController();
  boolean is_dropdown = event.getName().equals(namePulldown);
  if (is_controller && is_dropdown) {
     // 選択された項目のインデックスを取得
    int index = (int) event.getController().getValue();
    println("選択されたインデックス番号: " + index);
   }
}

インデックス番号しか取れないのはモヤモヤするけど，実用上は問題ないので，これでよし♪