メインコンテンツまでスキップ

カスタマイズ

IwashiIME は、見た目の色（テーマ）の変更だけでなく、キー配列（レイアウト）そのものを自由に作成・変更できる柔軟な設計になっています。

🎨 UIテーマカラーの設定​

ThemeManager コンポーネントを使用することで、キーボードの配色を一括で管理・変更できます。

1. 編集対象の選択​

設定を行う前に、「プロジェクト全体の設定を変更するか」、「現在のシーンのみ変更するか」 によって編集する対象を選んでください。

  • プロジェクト全体で統一したい場合（推奨）:
    • Assets/IwashiAssets/Iwashiime/Runtime/IwashiIME.prefab をダブルクリックして、プレハブモードで開いて編集します。
    • 注意: ここでの変更は、このプレハブを使用している 全てのシーンに影響します。
  • シーンごとに色を変えたい場合:
    • 重要: 基本的な使い方では「自動配置」を推奨していますが、シーン個別の設定を行いたい場合は、手動でプレハブをシーンに配置する必要があります。
    1. Assets/IwashiAssets/Iwashiime/Runtime/IwashiIME.prefab を Hierarchy にドラッグ＆ドロップで配置してください。
    2. 配置した IwashiIME オブジェクトを選択して編集します。
    • 複数のワールドを1つのプロジェクトで管理しており、シーンごとにテーマを使い分けたい場合はこの方法をとってください。

2. 配色の変更手順​

  1. 編集対象（プレハブまたはシーン上のオブジェクト）の Theme Manager コンポーネントを見つけます。
  2. Inspector で各箇所のカラーを変更します。
    • Background Color: 全体の背景色
    • Text Color 1 / 2: 文字色
    • Input Field Background / Text: 入力欄の色
    • Primary / Secondary / Tertiary ...: 各ボタンやアクセントに使用されるパレットカラー
  3. Apply Theme ボタンをクリックして、変更を適用します。

注意

Inspector 上で色を変更しただけでは、シーン上の見た目には反映されません。 必ず Apply Theme ボタンを押して変更を確定させてください。

テーマの保存と読み込み​

作成したテーマは JSON ファイルとして書き出し、いつでも読み込むことができます。

  • 保存 (Save as JSON): 現在の設定を JSON ファイルとして保存します。
  • 読み込み (Load): 保存済みのプリセットを読み込みます。
プロファイルの保存場所

保存した JSON ファイルを以下のフォルダに配置すると、ThemeManager のドロップダウンリストに自動的に表示されるようになります。

Assets/IwashiimeAsset/Profiles

配布用のテーマを作成する場合も、このフォルダに入れてパッケージ化してください。

⌨️ キー配列のカスタマイズ​

IwashiIME では、Unity の uGUI システムを使って自由にボタンを配置し、独自のキー配列を作成できます。

1. キーボードの登録​

自作したキー配列をシステムに認識させるためには、そのキーボードのルート（親）となるオブジェクトに KeyboardMarker コンポーネントをアタッチする必要があります。

  • 設定方法: キーボードの親オブジェクトを選択し、Add Component から KeyboardMarker を追加します。
  • 注意: これが付いていないプレハブは、オリジナルキーボードとしてロードされません。

2. ボタンの配置フロー​

  1. uGUI の Selectable コンポーネント（Image など）を持つオブジェクトを配置します。
    • Button コンポーネントでも動作しますが、システム側で EventTrigger が自動付与されるため、通常の Image + Selectable 等で十分です。
  2. 対象のオブジェクトに ButtonMarker コンポーネントをアタッチします。
  3. Button Type を設定して、キーの役割を決定します。

ボタンの種類 (Button Type)​

タイプ説明
Input Button文字を入力する通常のキーです。
Flick Buttonフリック入力用のキーです。（設定が複雑なため後述）
Backspace / Delete文字を削除します。
Enter / Send改行や送信を行います。
Full Space / Half Space全角・半角スペースを入力します。
Caret Prev / Nextカーソル（キャレット）を移動します。
Toggle Case大文字・小文字を切り替えます。

Input Button の設定要件​

Input Button タイプを使用する場合、入力される文字は子オブジェクトの TextMeshPro から取得されます。 ボタンの子オブジェクトに Text (TMP) という名前のオブジェクトを作成し、そこに入力させたい文字（「あ」や「A」など）を設定してください。

Flick Button の構造詳細​

フリック入力ボタンは構造が少し複雑です。基本的には既存のプレハブ（Assets/IwashiAssets/Iwashiime/Runtime/Prefabs/Common/FlickButton.prefab）をコピーして使うことになります。

  • Candidates オブジェクト
    • フリック入力の候補を管理するコンテナです。この配下に方向ごとの定義が含まれています。
  • 方向オブジェクト (Center / Left / Up / Right / Down)
    • それぞれ「タップ（真ん中）」、「左フリック」、「上フリック」、「右フリック」、「下フリック」に対応しています。
  • Text オブジェクト
    • 各方向オブジェクトの中にある Text (TMP_Text) コンポーネントに入力されている文字が、実際に送信される文字になります。
    • 例えば「あ行」のキーであれば、Center の Text に「あ」、Left の Text に「い」...といった形で登録されています。

🖌️ 自作キーへのテーマ適用​

自作したキーボードのボタンを、テーマカラー変更に対応させるには ThemeMarker コンポーネントを使用します。

設定手順​

  1. 色を変えたいオブジェクトに ThemeMarker をアタッチします。
  2. Color Type で、どの色（Primary, Secondary, Accentなど）を適用するかを選択します。

グラフィックへの適用（優先順位）​

Selectable（ボタン機能）と Graphic（画像）が両方ついているオブジェクトの場合、デフォルトでは Selectable の Color Block（ボタンの状態遷移色）に対して色が適用されます。

ボタンの色ではなく、アイコン画像や背景画像の color プロパティを直接変更したい場合は、以下のように設定してください。

  1. Graphic フィールドに、色を変えたい Image や TextMeshPro コンポーネントをドラッグ＆ドロップで指定します。
  2. これにより、Selectable ではなく指定された Graphic の色が変更されるようになります。