見出し画像

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

【状況】プルダウンメニューを使い,さらに日本語で出すのに一番楽な方法は何か模索.探したコードそのままでもうまく動かず.(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で設定した第2引数を取得したかったけど,仕様上,直接取得できないみたい.いろいろ組み合わせる方法が出てきたけど面倒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);
   }
}

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

この記事が気に入ったらサポートをしてみませんか?