レトロPC・手作りハードウェア・西田ラヂオのブログ
AmebaAmeba 20th Anniv.ホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

レトロPC・手作りハードウェア・西田ラヂオのブログ

手作りハードウェア工房、西田ラヂオのブログです。
レトロPC関連の手作りハードウェアを中心に、
楽器やエフェクターの実験、製作も始めました。
Apple II 関連の作品は、海外にも多く旅立っています。

Amebaでブログを始めよう！
次ページ >>

js_of_ocaml の覚え書き2

canvasのマウス座標の取得の仕方がわかったのでメモしておきます。

test2.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js_of_ocaml test</title>
</head>
<body>
<script type="text/javascript" src="test2.js"></script>
<canvas id="canvas_id" style="background-color:yellow;height:200;width:200;" width=200 height=200 >
</canvas>
</body>
</html>

test2.ml

open Dom_html
open Js
open Graphics_js

let get_element_by_id id = begin
  match Opt.to_option (Dom_html.window##document##getElementById (Js.string id)) with
  | None -> failwith ("can't find " ^ id ^ ".")
  | Some e -> e
end


let start _ = begin
    let (graph: Dom_html.canvasElement Js.t) = (Js.Unsafe.coerce (get_element_by_id "canvas_id")) in
    open_canvas graph;
    graph##onmousedown <- Dom_html.handler
        (fun ev ->
            let alert msg = window##alert(msg) in
            let (doc_x, doc_y) = Dom_html.getDocumentScroll () in
            let x0 = (ev##clientX - graph##offsetLeft+doc_x) in
            let y0 = (ev##clientY - graph##offsetTop+doc_y) in
            alert (Js.string ((string_of_int x0)^","^(string_of_int y0)));
            Js._true
        );
    clear_graph();
    set_line_width 2;
    set_color (rgb 255 0 0);
    draw_circle 100 100 30;
    Js._true
end

let _ = Dom_html.window##onload <- Dom_html.handler start

コンパイル

ocamlfind ocamlc -linkpkg -o test2 -syntax camlp4o -package js_of_ocaml,js_of_ocaml.syntax +graphics.cma +../js_of_ocaml/graphics.cma test2.ml

js_of_ocaml +graphics.js test2

テストプログラムの実行

実行

js_of_ocaml の覚え書き

はじめに

OCaml は、おそらく最も実用的な関数型言語の一つです。強力なデータ型、型推論の機能を持ち、手続型、オブジェクト指向としても書ける、とても効率良いプログラミング言語だと思います。

js_of_ocaml を使えば、OCaml で書いたプログラムを JavaScript に変換し、Webブラウザ上で実行できるようになります。殆どの OCaml ライブラリを使用でき、さらにブラウザ上のボタンやテキストエリア、Canvas などの DOM も Ocaml から制御でき、しかも動作にはプラグインが要りません。ようやく OCaml を実用的に使える時代が来ました！

http://proofcafe.org/~keigoi/pplss2012-ocaml.pdf
http://ocsigen.org/js_of_ocaml/manual/
http://wise9.jp/archives/7866
http://d.hatena.ne.jp/camlspotter/20111015/1318664763

このあたりを参考にしました。

しかし。。プログラミング環境を作るのに、結構苦労しました。。そこで、ここに簡単なテストプログラムが走るまでを、以下にまとめておきます。

インストール

Linuxのみ（Lubuntuで確認）。Windowsは、Cygwinも含め、今のところ公式には出来ない。Mac は出来るそうですが、わかりません。

OCaml の仮インストール

これをやっておかなと、最終的に OCaml/js_of_ocaml にグラフィックライブラリが入らない。

sudo apt-get install ocaml

make m4 のインストール

sudo apt-get install make m4

OPAM のインストール

ここに書いてある Binary installer の方法でOPAMをインストール。今のところ apt-get では新しいバージョンが取れないのでダメ。

opam_installer.sh をダウンロードして、

sh ./opam_installer.sh /usr/bin

~/.profile を書き換えるか聞かれるので、y

終わったら、

eval `opam config env`

js_of_ocaml のインストール

opam install js_of_ocaml

emacs のインストール

sudo apt-get install ocaml-mode

テスト・プログラム

test.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js_of_ocaml test</title>
</head>
<body>
<script>
function f(str)
{
	alert(str);
}
</script>
<script type="text/javascript" src="test.js"></script>
<textarea cols="10" rows="3" id="textarea_id"></textarea><br>
<button id="button_id">Button</button>
<div id="div_id">
</div>
<canvas id="canvas_id" style="background-color:yellow;height:200;width:200;" width=200 height=200>
</canvas>
</body>
</html>

test.ml

open Dom_html
open Js
open Graphics_js

let get_element_by_id id = begin
  match Opt.to_option (Dom_html.window##document##getElementById (Js.string id)) with
  | None -> failwith ("can't find " ^ id ^ ".")
  | Some e -> e
end

let start _ = begin
  let _ = Unsafe.fun_call (Unsafe.variable "f") [| Unsafe.inject (Js.string "Onload! (Calling JavaScript function from OCaml)") |] in
  let alert msg = window##alert(msg) in
  let button = get_element_by_id "button_id" in
  let div = get_element_by_id "div_id" in
  let (textarea: Dom_html.textAreaElement Js.t) = (Js.Unsafe.coerce (get_element_by_id "textarea_id")) in
  textarea##defaultValue <- (Js.string "TextArea");
  button##onclick <- (handler (fun _ ->
    alert (textarea##value);
    div##innerHTML <- (Js.string "innerHTML is changed!");
    let (graph: Dom_html.canvasElement Js.t) = (Js.Unsafe.coerce (get_element_by_id "canvas_id")) in
    (*open_graph"200x100"; when write in a separate window *)
    open_canvas graph;
    clear_graph();
    set_color (rgb 0 0 255);
    set_line_width 2;
    moveto 0 0;
    lineto 200 200;
    set_color (rgb 255 0 0);
    draw_circle 100 100 30;
    Js._true
  ));
  Js._false
end

let _ = Dom_html.window##onload <- Dom_html.handler start

コンパイル方法

ocamlfind ocamlc -linkpkg -o test -syntax camlp4o -package js_of_ocaml,js_of_ocaml.syntax +graphics.cma +../js_of_ocaml/graphics.cma test.ml

js_of_ocaml +graphics.js test

デモ

テストプログラムの実行

今年もありがとうございました。



こちらのブログの更新をさぼっており、申し訳ありません。

今年後半は、海外からの注文の対応でてんてこ舞いで、まだ嵐が続いております。大変な経験をさせて頂いていると思っています。

細かいケーブルやアダプタを除いても、250以上の商品を作りました。そのうち、半分以上は海外へ旅立ちました。アメリカ、ヨーロッパ各国、オーストラリア、ブラジル。世界各国へ西田ラヂオの商品が旅立つという信じられない事態が発生しています。

ハンドメイドとしては限界点であり、今後、考えていかなければならないかもしれません。ただ小規模にやっていきたいので、できればこのペースで続けていければと思います。お金もかかるので、ビジネスとしては厳しい状況ですが。。

大きな時代の変換点にいるという印象です。西田ラヂオは、既に次の時代にいます。ローテクがもてはやされる時代。私に役割が与えられていることに感謝しています。

少し、新しい作品のために時間が欲しいところですが、贅沢は言えません。どんな楽しいことが待っているのか、ワクワクしながらお正月を過ごしたいと思います。

お買い上げ下さった皆様、サポートして下さった皆様、色々な経験をさせて下さった皆様、心より感謝いたします。

皆様、良いお年をお迎えください。

西田
次ページ >>