失敗
図1 デフォルトのツールチップは英語表記
Highslide JS は、スタイリッシュなポップアップ機能を提供する JavaScript ソフトウェアです。
付属のサンプルを参考にすれば、簡単に使用できます。 ただ、一つ落とし穴があります。 それは、ツールチップが英語表記ということです (図1) 。
環境
このレポートは、以下の環境について記述したものです。
| Ajax ライブラリ | Highslide JS 3.2.7 |
原因
ツールチップのメッセージは、highslide.js に英語で定義されています。 詳細は、以下の通りです。
| No | ユーザーのアクション | デフォルトのツールチップ |
|---|---|---|
| 1 | 原寸大ボタンにカーソルを合わせる | Expand to actual size |
| 2 | ポップアップ上でカーソルを移動後、一時停止 | Click to close image, click and drag to move. Use arrow keys for next and previous. |
| 3 | 背面のポップアップにカーソルを合わせる | Click to bring to front |
| 4 | ポップアップを表示させる (読み込みに時間がかかる場合のみ) | Loading... |
| 5 | No.4 のツールチップにカーソルを合わせる | Click to cancel |
解決策
これらのツールチップを日本語化するには、highslide.js の該当箇所を直接修正する必要があります。
【注意】
文字化け防止のために、highslide.js の文字コードを変換する必要があります。
テキストエディタなどを使用し、適切な文字コードに変換してください。
(1) Expand to actual size
No.1 のツールチップは、highslide.js の 50 行目付近に
fullExpandTitle : 'Expand to actual size',
として定義されています。
fullExpandTitle : '原寸大にします。',
(2) Click to close image, click and drag to move. Use arrow keys for next and previous.
No.2 のツールチップは、No.1 の 1行下に
restoreTitle : 'Click to close image, click and drag to move. Use arrow keys for next and previous.',
として定義されています。
restoreTitle : 'クリックで閉じます。ドラッグで移動します。矢印キーで次／前のリソースに切り替えます。',
(3) Click to bring to front
No.3 のツールチップは、No.2 の 1行下に
focusTitle : 'Click to bring to front',
として定義されています。
focusTitle : '最前面に表示します。',
(4) Loading...
No.4 のツールチップは、No.3 の 1行下に
loadingText : 'Loading...',
として定義されています。
loadingText : 'ロード中...',
(5) Click to cancel
No.5 のツールチップは、No.4 の 1行下に
loadingTitle : 'Click to cancel',
として定義されています。
loadingTitle : 'ロードを中止します。',
補足
■ Highslide JS (フリー版) のライセンス
Highslide JS のフリー版は、Creative Commons Attribution-NonCommercial ライセンスになっています。 加工・修正は、このライセンスの定める使用許諾条件を守って行わなければなりません。