カテゴリー別アーカイブ: Web

Amber Smalltalk で Three.js を利用する


 Amber Smalltalk (以下、Amber)は Web ブラウザから利用出来る Smalltalk 処理系です。Smalltalk でクライアントサイドの Web アプリを作れるのは嬉しい事です。

 Amber そのものについての説明は他のサイト等に譲るとして、今回は Amber の特徴の一つとして JavaScript のオブジェクトメソッドを透過的に評価出来るという点に注目して、Three.js を使うことに挑戦してみました。

Amber を始める

 Web サイトでのデモでは、雰囲気を味わうには十分ですが、変更の保存などが出来ません。実際に開発を進めるためには手元の環境に導入する必要があります。
 といっても、ローカル環境への導入は非常に簡単です。内部で Node.js を利用しているので、インストールしておきます。次に GitHub などから Amber 自体を入手します。ホームページの Download にあるアーカイブを落とした方が簡単です。そうしたら "./bin/server" を実行し、サーバーを起動したらブラウザから "http://localhost:4000/index.html" を叩くだけです。
 これで、変更の保存も出来るようになりました。ちなみに "http://localhost:4000/helios.html" とすると新しい IDE が立ち上がりますが、挙動が違うようですので今回は使わない事にしました。

JavaScript ライブラリとして Three.js を追加する

 Amber ではおなじみの JavaScript ライブラリとしてデフォルトで jQuery が導入されています。それを参考にすれば Three.js も導入出来そうです。
 まずはここから Three.js を入手して "js/lib/Three.js" に移動します。
 次に Three.js を Amber からロード出来るようにしてみます。jQuery がどこからロードされているか調べてみると js/amber.jsloadDependencies でロードされているようなので、同じようにしてみます。追加した内容は次のようになりました。

function loadDependencies() {
  if (typeof jQuery == 'undefined') {
    addJSToLoad('js/lib/jQuery/jquery-1.8.2.min.js');
  }
 
  if ((typeof jQuery == 'undefined') || (typeof jQuery.ui == 'undefined')) {
    addJSToLoad('js/lib/jQuery/jquery-ui-1.8.16.custom.min.js');
  }
 
  if (typeof THREE == 'undefined') {
    addJSToLoad('js/lib/Three.js/three.min.js');
  }
}

 これでページを再読み込みして、コンソールにはエラーが出ていないことを確認し、THREE オブジェクトが存在することを確認出来れば OK です。

Amber から Three.js オブジェクトが使える事を確認する

 いよいよ Amber から Three.js を使ってみます。
 Workspace で「JavaScript ⇒ Smalltalk」に従って書いてみると次のようになります。
スクリーンショット 2013-11-22 22.09.55
 これを “Print it” や “Inspect it” するとオブジェクト生成されることを確認出来ます。

WordPress で翻訳するプラグイン “Transposh Translation Filter”


サイトを多言語化しようと思って切り替えのためのプラグインを探していたのですが、切り替えるどころか翻訳してくれるプラグインを見つけたのでそちらを紹介します。

Transposh Translation Filter

こちらのプラグインをインストールすると設定に “Transposh” が追加されるので、適当な設定を行います。主に翻訳を行う言語の指定になります。

ウィジェットにも “Transposh” が追加されるのでサイドバーなどに追加します。

こうするとウィジェットが追加され、先ほど指定した言語を選択できるプルダウンボックスが表示されます。このサイトでは英語、日本語、韓国語を選択してみました。

最近は Google 翻訳などのサービスがあるのでそちらを利用することで翻訳を手軽に行うことが出来ますね。

こちらの欠点といえば自動翻訳なので当然、翻訳間違えがあるということです。とはいっても、自分で一から翻訳する労力と比べると許容できるレベルなのではないかと思います。

WordPress で数式を扱うプラグイン ”Youngwhan’s Simple Latex”


「ポリゴンの表と裏」
でテキストでは表すことが難しい数式を扱う必要がありました。そこで

  • 一旦 LaTeX で書いて出力を画像ファイルとして貼り付ける
  • MathML で記述する

のどちらかを考えたのですが、どちらも気軽にやるというには手間がかかりすぎます。何か他に方法はないかと考えていたところ、 WordPress のプラグインで何か良いものがあるのではないかと思いつき探したところ次のものにたどり着きました。

Youngwhan’s Simple Latex

ほぼ LaTeX と同じ感覚で数式を記述することが出来ます。プラグインを有効化したら[math][/math](全角で書いていますが実際は半角で入力)タグで囲んで記述します。次からの例は前後をタグで囲むのを忘れないように注意して下さい。

単純な例

例えば次のように書けば

x^{2} + y^{2} = z^{2}

次の出力になります。

ベクトルの例

次のように書けば(-(マイナス)記号の前後にスペースを挟んではいけないようです)

\overrightarrow{AB} = (B_{x}-A_{x}, B_{y}-A_{y}, B_{z}-A_{z})

次の出力になります。

行列の例

次のように書けば

\overrightarrow{AB} \times \overrightarrow{BC} =
\left(\begin{array}{ccc}

\left|\begin{array}{rr}
A_{y} & B_{y} \\ A_{z} & B_{z}
\end{array}\right|, &

\left|\begin{array}{rr}
A_{x} & B_{x} \\ A_{z} & B_{z}
\end{array}\right|, &

\left|\begin{array}{rr}
A_{x} & B_{x} \\ A_{y} & B_{y}
\end{array}\right| &

\end{array}\right)

次の出力になります。

MathML に比べればとても簡単に綺麗な出力が得られて気持ちが良いです。