Esperanto用のテキスト変換ライブラリを組み込んだEsperantipo version 0.1.0 を公開しました。
公開フェーズはティザー期としていて、「こんなのって使い道ある？」的な問いかけをEsperantistな皆様にしていこうかという段階です。
使い道がなければ放置、あればライブラリ化・ライセンスほぼフリーでの公開を目指します。
ローカル環境での変換用のアプリケーションは存在してるみたい（下部リンク参照）だったけど、ウェブアプリとしてのライブラリ的なものをネット上で見なかったので開発しました。
需要があればBBSやブログなどの記事入力欄やコメント欄なんかに組み込めるようなライブラリになればよいかなと。
Windowsのローカル環境をEsperanto仕様にしたい場合はIMEの言語設定にEsperantoを指定する（下部リンク参照）のが適切だと思います。
本ライブラリはローカルアプリと競合する立場ではなく、あくまでもウェブアプリとして最近のOSと一般的なブラウザさえあれば成立するようなお手軽な立ち位置なのではないでしょうか。
本ライブラリも他ローカルアプリ同様、Unicodeが持ち込まれる以前のPC（WindowsMe以前）上では文字コードの越えられない壁があり、正常な動作が絶望的です。
以下はEsperantipoの主な仕様です。
-
使い方
- ボタン方式
- ボタンを押して、’ĉ’,'ĝ’などを入力する。
- X方式
- ‘cx’,'gx’のように変換対象文字に’x'や’X'を後置すると、’ĉ’,'ĝ’に変換する。
- キャレット方式
- ‘c^’,'g^’のように変換対象文字に’^'を後置すると、’ĉ’,'ĝ’に変換する。
-
動作環境
- 動作確認済みOS
- WindowsVista/WindowsXP/MacOSX
-
- 動作確認済みブラウザ(Windows)
- Firefox2/Safari3/InternetExplorer6or7
-
- 動作確認済みブラウザ(Mac)
- Firefox2/Safari2
-
ライセンス
- Esperantipo.js
- Flabo.js
- Announce.js
- Creative Commons 表示-非営利 2.1 日本
-
協力
- Yasukaさん
- YasukaWeb
動作環境については、個人の情報収集能力に限界があるためユーザーの協力をお願いします。
ライセンスとありますが、動作環境が確定後もっと組み込みやすい形にしてから積極的に公開していく予定です。
- 字上符付き文字についての参考文献
- エスペラントWikipedia
- エスペラント語キーボードレイアウト
- 最近のWindowsでの字上符文字の扱い方
ExternalInterfaceでActionScriptとJavaScript間で相互にObjectを渡す。
ソースコードは以下の通り。
<input type="button" name="" value="sendObject()" onclick="sendObject();" id="send" /> <input type="button" name="" value="clearTextField()" onclick="clearTextField();" id="send" /> <li><p class="param">parameter
</p><p class="value">value
</p><div class="clear"></div></li> <li><input type="text" name="param" value="" class="param" /><input type="text" name="value" value="" class="value" /></li> <li><input type="text" name="param" value="" class="param" /><input type="text" name="value" value="" class="value" /></li> <li><input type="text" name="param" value="" class="param" /><input type="text" name="value" value="" class="value" /></li> <li><input type="text" name="param" value="" class="param" /><input type="text" name="value" value="" class="value" /></li> <li><input type="text" name="param" value="" class="param" /><input type="text" name="value" value="" class="value" /></li> <li><input type="text" name="param" value="" class="param" /><input type="text" name="value" value="" class="value" /></li> <li><input type="text" name="param" value="" class="param" /><input type="text" name="value" value="" class="value" /></li> <li><input type="text" name="param" value="" class="param" /><input type="text" name="value" value="" class="value" /></li> <li><input type="text" name="param" value="" class="param" /><input type="text" name="value" value="" class="value" /></li> <li><input type="text" name="param" value="" class="param" /><input type="text" name="value" value="" class="value" /></li>
// send Object
function sendObject() {
debugText("send Object to swf(ActionScript)");
getEmbedElementByName('externalSWF').loadObject(getObject());
}
function getObject(name) {
var obj = new Object();
var arrParam = document.getElementsByName('param');
var arrValue = document.getElementsByName('value');
var param, value;
for (var i = 0; i <arrParam.length; i++) {
param = arrParam[i].value;
value = arrValue[i].value;
obj[param] = value;
}
return obj;
}
// load Object
function loadObject(obj) {
clearTextField();
debugText("load Object from swf(ActionScript)");
var arrParam = document.getElementsByName('param');
var arrValue = document.getElementsByName('value');
var i = 0;
for (var param in obj) {
arrParam[i].value = param;
arrValue[i].value = obj[param];
i++;
}
}
// clear Input Text
function clearTextField() {
debugText("clear text field");
var arrParam = document.getElementsByName('param');
var arrValue = document.getElementsByName('value');
for (var i = 0; i <arrParam.length; i++) {
arrParam[i].value = '';
arrValue[i].value = '';
}
}
// debugText
function debugText(str) {
var element = document.getElementById('debugText');
removeChildren(element);
element.appendChild(document.createTextNode(str));
}
// common
function getEmbedElementByName(name) {
return (/*@cc_on!@*/false)? window[name]: document[name];
}
function removeChildren(element) {
while (element.hasChildNodes()) element.removeChild(element.firstChild);
}
import flash.external.ExternalInterface;
init();
function init() {
setupEI();
setupButton();
setupTabIndex();
}
// ExternalInterface
function setupEI() {
var isAvailable = ExternalInterface.available;
if (isAvailable) {
debug("ExternalInterface is available");
addCallbackEI("loadObject", null, loadObject);
} else {
debug("ExternalInterface is not available");
}
}
function addCallbackEI(strMethodName_js, objInstance_as, fncMethod_as) {
ExternalInterface.addCallback(strMethodName_js, objInstance_as, fncMethod_as);
}
function callJS(strMethodName_js, objParameter_as) {
ExternalInterface.call(strMethodName_js, objParameter_as);
}
// Button
function setupButton() {
mcSendObject.onRelease = function() {
sendObject();
};
mcSendObject.onReleaseOutside = mcSendObject.onRollOut;
mcClearTextField.onRelease = function() {
clearTextField();
};
mcClearTextField.onReleaseOutside = mcClearTextField.onRollOut;
}
// Tab Index
function setupTabIndex() {
mcSendObject.tabIndex = 1;
mcClearTextField.tabIndex = 2;
txtDebug.tabEnabled = false;
var txtParam, txtValue;
for (var i = 0; i <10; i++) {
txtParam = this["txtParam_" + i];
txtValue = this["txtValue_" + i];
txtParam.tabIndex = 3 + i * 2;
txtValue.tabIndex = 4 + i * 2;
}
}
// send Ojbect
function sendObject() {
debug("send Object to browser(JavaScript)");
callJS("loadObject", getObject());
}
function getObject() {
var obj = new Object();
var param, value;
for (var i:Number = 0; i <10; i++) {
param = this["txtParam_" + i].text;
value = this["txtValue_" + i].text;
obj[param] = value;
}
return obj;
}
// load Object
function loadObject(obj) {
clearTextField();
debug("load Object from browser(JavaScript)");
setObject(obj);
}
function setObject(obj) {
var i = 0;
var txtParam, txtValue;
for (var param in obj) {
txtParam = this["txtParam_" + i];
txtValue = this["txtValue_" + i];
txtParam.text = param;
txtValue.text = obj[param];
i++;
}
}
// clear TextField
function clearTextField() {
debug("clear text field");
var txtParam, txtValue;
for (var i = 0; i <10; i++) {
txtParam = this["txtParam_" + i];
txtValue = this["txtValue_" + i];
txtParam.text = "";
txtValue.text = "";
}
}
// debug
function debug(str) {
txtDebug.text = str;
}
- JavaScript
- //sendObject : ObjectをSWFに渡す。
- //loadObject : ObjectがSWFから渡される。
- ActionScript
- //ExternalInterface : Browserから呼び出し可能なActionScriptのメソッドを登録する。
- //sendObject : ObjectをBrowserに渡す。
- //loadObject : ObjectがBrowserから渡される。
これ以外のメソッドはActionScript/JavaScript共にオブジェクト生成用のテキストフィールドのセットアップに使ってるだけで、ExternalInterfaceには関係ない。
エレメントに対してname属性を動的に付加する際に、element.setAttribute('name', name);とかelement.name = 'name';とかやってはみるものの、IEだとまともにname属性を付加してくれない。
そんな時は、DOM操作の範疇を逸して無理やりラップ。
function createElementWithName(tag, name) {
var isIE =/*@cc_on!@*/false;
var element;
if (name) {
element = (isIE)? document.createElement('<' + tag + ' name="' + name + '">'): document.createElement(tag);
element.name = name;
} else {
element = document.createElement(tag);
}
return element;
}
- /*@cc_on@*/とは？
-
- IE限定の@cc_onステートメント。
"/*@cc_on"と"@*/"の間に書いたものをIE限定で認識してくれる。
この場合IEのみ"!"を認識するので、isIEはIEにおいてのみtrueとなる。
イベントリスナのMOZ/IEのブラウザ間の差異を吸収。
function setEventListener(element, type, listener) {
if (element.addEventListener) element.addEventListener(type, function(event){listener(this)}, false);
else if (element.attachEvent) element.attachEvent('on' + type, function(event){listener(event.srcElement)});
}
- element
- document.getElementById('hoge')等で取得したDOM Element
- type
- イベントの種類。"click"とか"focus"とか"blur"とか。"on"抜きで渡しませう。
- listener
- イベントが起こったときに叩く関数名
- ブラウザ間の差異
- addEventListenerはMOZ/Safari
- attachEventはIE
"テストする"というボタンをクリックした時に、ボタンの背景色を赤くするサンプル。
var element = document.getElementById('button');
setEventListener(element, 'click', writeText);
function setEventListener(element, type, listener) {
if (element.addEventListener) element.addEventListener(type, function(event){listener(this)}, false);
else if (element.attachEvent) element.attachEvent('on' + type, function(event){listener(event.srcElement)});
}
function writeText(targetElement) {
targetElement.style.backgroundColor = 'red';
}
イベントが起きたとき、リスナーであるwriteTextに引数としてtargetElementが渡される。
これは、イベントが起きたエレメント自身のことで、今回の場合はクリックされたボタン自身が渡されます。
