2023年10月23日月曜日

United Codesが提供しているプラグインEnhanced Grid Proを日本語化する

 ベルギーのUnited Codesが提供しているOracle APEXの有償プラグインEnhanced Grid Proを日本語化する手順を紹介します。Enhanced Grid ProはUnited Codesが開発しているOracle APEXのプラグインPlug-ins Proに含まれています。

日本語化した結果は、Enhanced Grid Proのサンプル・アプリケーションのBasic Exampleのページで確認します。


Enhanced Grid Proは共有コンポーネントのプラグインにUnited Codes - Enhanced Grid Proとしてインストールされています。


プラグインを開き、United Codesが開発したJavaScriptのファイルを確認します。ucGrid.min.jsを開きます。


JavaScriptのファイルを確認すると、メッセージはUC_GRID.TOOLTIP_NOT_POSSIBLEといった形で、Oracle APEXのテキスト・メッセージで定義されていることが確認できます。


以下のスクリプトを実行し、APEXアプリケーションのグローバリゼーションのテキスト・メッセージを作成します。先頭のC_APP_IDは、テキスト・メッセージを作成するアプリケーションのアプリケーションIDに変更します。

declare
C_APP_ID constant number := <日本語化するアプリケーションのIDに置き換える>;
/*+
* 翻訳メッセージの追加または編集を行なう。
*/
procedure create_or_update_message(
p_application_id in number
,p_translatable_message in varchar2
,p_message_text in varchar2
,p_language_code in varchar2 default 'ja'
,p_is_js_message in varchar2 default 'Y'
)
as
l_translation_entry_id number;
p_used_in_javascript boolean;
begin
/* メッセージをJavaScriptで使うかどうかの条件をBoolean型に変換する */
p_used_in_javascript := p_is_js_message = 'Y';
/* すでに翻訳メッセージが登録済みであれば更新する。 */
select translation_entry_id into l_translation_entry_id
from apex_application_translations
where 1=1
and application_id = p_application_id
and translatable_message = p_translatable_message
and language_code = p_language_code;
/* 翻訳メッセージの更新 */
apex_lang.update_message(
p_id => l_translation_entry_id
,p_message_text => p_message_text
);
exception
when no_data_found then
/* 翻訳メッセージが未登録なので追加する。 */
apex_lang.create_message(
p_application_id => p_application_id
,p_name => p_translatable_message
,p_language => p_language_code
,p_message_text => p_message_text
,p_used_in_javascript => p_used_in_javascript
);
end create_or_update_message;
begin
create_or_update_message(C_APP_ID,'UC_GRID.CORRECT_ERRORS_BEFORE_SAVE','保存する前にエラーを修正してください。');
create_or_update_message(C_APP_ID,'UC_GRID.SELECT_ONLY_ONE_ROW_TO_DUPLICATE','複製できるのは１行に限られます。');
create_or_update_message(C_APP_ID,'UC_GRID.PASTE_DATA_TOO_MANY_COLUMNS','ペーストしようとしている列が多すぎます。');
create_or_update_message(C_APP_ID,'UC_GRID.CREATE_ROW_PREVENTED','ペーストするには新規行の追加が発生します。\n\n新規行の追加は設定により許可されていません。');
create_or_update_message(C_APP_ID,'UC_GRID.TOOLTIP_NOT_POSSIBLE','ツールチップを設定するには、行索引が０より大きい必要があります。');
create_or_update_message(C_APP_ID,'UC_GRID.RELOAD_DATA_QUESTION','再ロードしますか？\n\n変更は保存されません。');
create_or_update_message(C_APP_ID,'UC_GRID.CHANGES_SAVED','変更が保存されました！');
create_or_update_message(C_APP_ID,'UC_GRID.UNSAVED_CHANGES_EXIST','未保存の変更があります。\n\n続けますか？');
create_or_update_message(C_APP_ID,'UC_GRID.DELETE_ROWS_CONFIRM','本当に行を削除しますか？');
create_or_update_message(C_APP_ID,'UC_GRID.CONTEXT_MENU.ADD_ROW','行の追加');
create_or_update_message(C_APP_ID,'UC_GRID.CONTEXT_MENU.DUPLICATE_ROW','行の複製');
create_or_update_message(C_APP_ID,'UC_GRID.CONTEXT_MENU.DELETE_ROWS','行の削除');
create_or_update_message(C_APP_ID,'UC_GRID.CONTEXT_MENU.REFRESH_ROWS','行のリフレッシュ');
create_or_update_message(C_APP_ID,'UC_GRID.CONTEXT_MENU.UNDO','元に戻す');
create_or_update_message(C_APP_ID,'UC_GRID.CONTEXT_MENU.REDO','やり直す');
create_or_update_message(C_APP_ID,'UC_GRID.CONTEXT_MENU.COPY','コピー');
create_or_update_message(C_APP_ID,'UC_GRID.CONTEXT_MENU.CUT','カット');
create_or_update_message(C_APP_ID,'UC_GRID.CONTEXT_MENU.HIGHLIGHT_CELLS','セルのハイライト');
create_or_update_message(C_APP_ID,'UC_GRID.CONTEXT_MENU.HIGHLIGHT_CELLS.CLEAR_ALL','すべてをクリア');
create_or_update_message(C_APP_ID,'UC_GRID.CONTEXT_MENU.HIGHLIGHT_CELLS.CLEAR_SELECTION','選択をクリア');
create_or_update_message(C_APP_ID,'UC_GRID.CONTEXT_MENU.HIGHLIGHT_CELLS.','選択したセル/行はハイライトできません。');
create_or_update_message(C_APP_ID,'UC_GRID.CONTEXT_MENU.HIGHLIGHT_CELLS.YELLOW','黄');
create_or_update_message(C_APP_ID,'UC_GRID.CONTEXT_MENU.HIGHLIGHT_CELLS.ORANGE','オレンジ');
create_or_update_message(C_APP_ID,'UC_GRID.CONTEXT_MENU.HIGHLIGHT_CELLS.GREEN','緑');
create_or_update_message(C_APP_ID,'UC_GRID.CONTEXT_MENU.HIGHLIGHT_CELLS.BLUE','青');
create_or_update_message(C_APP_ID,'UC_GRID.CONTEXT_MENU.HIGHLIGHT_CELLS.PINK','ピンク');
create_or_update_message(C_APP_ID,'UC_GRID.CONTEXT_MENU.HIGHLIGHT_CELLS.PURPLE','紫');
create_or_update_message(C_APP_ID,'UC_GRID.VALIDATION.VALUE_REQUIRED','値は必須です。');
create_or_update_message(C_APP_ID,'UC_GRID.VALIDATION.VALUE_TOO_LONG','値が長すぎます。最大長: %0');
create_or_update_message(C_APP_ID,'UC_GRID.BUTTON.SAVE','保存');
create_or_update_message(C_APP_ID,'UC_GRID.BUTTON.RELOAD_DATA','再ロード');
create_or_update_message(C_APP_ID,'UC_GRID.BUTTON.ADD_ROW','行の追加');
create_or_update_message(C_APP_ID,'UC_GRID.BUTTON.DELETED_ROWS','行の削除');
create_or_update_message(C_APP_ID,'UC_GRID.BUTTON.RESET','リセット');
create_or_update_message(C_APP_ID,'UC_GRID.BUTTON.RESET_HTML_TITLE','ソートおよびフィルタのリセット');
create_or_update_message(C_APP_ID,'UC_GRID.BUTTON.MAXIMIZE','最大化');
create_or_update_message(C_APP_ID,'UC_GRID.NO_DATA_FOUND','データが見つかりません。');
create_or_update_message(C_APP_ID,'UC_GRID.TOTAL_ROWS','トータル： %0');
end;
view raw uc-grid-japanese.sql hosted with ❤ by GitHub


グローバリゼーションのテキスト・メッセージを開き、日本語のテキスト・メッセージが作成されていることを確認します。


アプリケーション定義のプライマリ言語を日本語(ja)に変更します。


これまでの作業でボタンやコンテキスト・メニューが日本語化されています。


コンテキスト・メニューの一部およびフィルタの文字列については、Enhanced Grid Proが採用しているWebコンポーネントHandsontableを日本語化する必要があります。

Handsontableのローカライズの方法について、以下を参考にしました。


Enhanced Grid Proの日本語化では、この中の3. Universal Module Definition (UMD)の手法が使えそうです。

DemoのEditを開いて、手法について確認します。jsFiddleが起動します。


HTMLの記述はそのままでも良いのですが、日本語に限定するため、all.jsをja-JP.jsに変更します。

JavaScriptについては、言語に関する記述（deDEが現れる行）をコメントアウトします。それに加えて、Handsontableを生成する（new）するときのlanguageの指定をde-DEからja-JPに変更します。

上記の変更を行ったあと、左上でのRunをクリックします。

コンテキスト・メニューが日本語で表示されることが確認できます。


以上の操作で確認できた実装を、United CodesのEnhanced Grid Proに適用します。

プラグインに含まれていてるHandsontableが実装されているファイルhandsontable_12_3_0.full.min.jsより、バージョンが12.3.0であることが分かります。


HandsontableのソースコードはGitHub上でホストされています。GitHubからHandsontable 12.3.0の各国語対応を含んだ完全なコードをダウンロードします。


12.3.0のAssetsからSource codeをダウンロードします。


ダウンロードされたファイルhandsontable-12.3.0.zipを展開します。この中にja_JP.jsというファイルが含まれます。

handsontable/dist/languages/ja-JP.js

プラグインUnited Codes - Enhanced Grid Proのファイルのファイルの作成をクリックし、このファイルja_JP.jsをプラグインを構成するファイルとして追加します。


ファイルをドラッグ・アンド・ドロップをクリックして、ja-JP.jsを選択します。

作成をクリックします。


ファイルのアップロードが行われ、ja-JP.jsがスクリプト・エディタで開かれます。スクリプト自体の変更は行わず、変更の保存をクリックします。ja-JP.jsがミニファイされ、ja-JP.min.jsが作成されます。

ファイルが保存され、縮小されました、というメッセージを確認し、ブレッドクラムのUnited Codes - Enhanced Grid Proをクリックして、プラグインの設定画面に戻ります。


ファイルja-JP.min.jsが作成されていることを確認し、ロードするファイルURLのセクションに移ります。


ロードするファイルURLのJavaScriptに、以下のファイルを追加します。handsontable_12_3_0.full.min.jsより後に配置します。

#PLUGIN_FILES#ja-JP.min.js


Enhanced Grid Proをタイプとして選択しているリージョンの属性の初期化JavaScriptファンクションに以下のコードを記述し、languageをja-JPに指定します。
function (pOptions) {
    pOptions.language = 'ja-JP';
    return pOptions;
}


本来であれば、これでHandsontableのlanguageがja-JPとなり、jsFiddleで確認したようにコンテキスト・メニューが日本語化されるはずですが、現行のバージョンではそうなりません。

ワークアラウンドとして、ucGrid.min.jsに含まれるlanguage指定を直接更新します。

プラグインのファイルに含まれるucGrid.min.jsを開きます。


以下のように続くコードを見つけます。

this.hot=new Handsontable(document.getElementById(this.regionID),{language:"en-US",licenseKey:

"en-US"の部分を、初期化JavaScriptファンクションで設定するlanguageを参照するように変更します。

this.hot=new Handsontable(document.getElementById(this.regionID),{language:o.options.language,licenseKey:


以上の変更により、Handsontableが提供するフィルタが日本語で表示されます。


まだ、コンテキスト・メニューの一部が日本語化されていません。


Handsontableのローカライズは、本体の機能追加の後に、各国の有志によってローカライズのためのリソースが提供されているようです。Copy with headersの機能の日本語訳は12.3.1で追加されています。


12.3.1のSource codeをダウンロードし、Enhanced Grid Proに追加したja-JP.jsを12.3.1のものに入れ替えます。

アップロード済みのja-JP.jsを一旦削除し、12.3.1のja-JP.jsをアップロードします。


以上で、コンテキスト・メニューのCopy with headersなども日本語表記になります。


以上が、United Codesが提供しているEnhanced Grid Proの日本語手順の紹介になります。

完
投稿者 時刻:
ラベル: , ,