Y.A.M の雑記帳: enchant MOON の MOON.js を見てみる

めんどいので API だけ羅列します。気になる人は MOON.js 読んでください。別にそんな長くない。

html5CanvasToSerializableObject(canvas)
HTML5 の canvas オブジェクトを渡すと pixel データを文字列にしたオブジェクトが返ってくる
serializableObjectToHtml5Canvas(object)
html5CanvasToSerializableObject() で作成したオブジェクトを渡すと、HTML5 の canvas オブジェクトが返ってくる
loadData(src, callback)
src で指定した URL を XMLHttpRequest を使って GET アクセスし、結果の responseText を callback に渡す
view plain print ?
1. importJS(["lib/MOON.js"], function() {
2. MOON.loadData(url, function(code) {
3. eval(code);
4. MOON.finish();
5. }.bind(this));
6. });
importJS(["lib/MOON.js"], function() { MOON.loadData(url, function(code) { eval(code); MOON.finish(); }.bind(this)); });
alert(message, callback)
message を表示したアラートを出す
callback を渡して内部で MOON.finish() を呼ばないといけないとかなんとか。。。
view plain print ?
1. importJS(["lib/MOON.js"], function() {
2. var sticker = Sticker.create();
3. sticker.ontap = function() {
4. MOON.alert("Hello MOON", function() {
5. MOON.finish();
6. });
8. MOON.finish();
9. };
10. sticker.onattach = function() {
11. MOON.finish();
12. };
13. sticker.ondetach = function() {
14. MOON.finish();
15. };
16. sticker.register();
17. });
importJS(["lib/MOON.js"], function() { var sticker = Sticker.create(); sticker.ontap = function() { MOON.alert("Hello MOON", function() { MOON.finish(); }); MOON.finish(); }; sticker.onattach = function() { MOON.finish(); }; sticker.ondetach = function() { MOON.finish(); }; sticker.register(); });
penPrompt(message, callback)
手書き入力用のプロンプトがついたアラートを出す
view plain print ?
1. importJS(["lib/MOON.js"], function() {
2. var sticker = Sticker.create();
3. sticker.ontap = function() {
4. MOON.penPrompt("Hello MOON", function(input) {
5. MOON.alert(input, function() {
6. MOON.finish();
7. });
8. });
10. MOON.finish();
11. };
12. sticker.onattach = function() {
13. MOON.finish();
14. };
15. sticker.ondetach = function() {
16. MOON.finish();
17. };
18. sticker.register();
19. });
importJS(["lib/MOON.js"], function() { var sticker = Sticker.create(); sticker.ontap = function() { MOON.penPrompt("Hello MOON", function(input) { MOON.alert(input, function() { MOON.finish(); }); }); MOON.finish(); }; sticker.onattach = function() { MOON.finish(); }; sticker.ondetach = function() { MOON.finish(); }; sticker.register(); }); こんなん。プロンプト上にペンで文字を書くと認識して変換してくれる。
文字でかくて4文字しか書けんぞ。。。
openStickerPage(callback)
シール台帳を開く
（ちなみにページのどこかを長押しするとシール台帳が開くようになっている）
callback には選択したシール画像のパスが返ってくるらしい

どのシールを選択しても返ってくるパスが /nullimages/sticker1.png 固定でよくわからん。。。
view plain print ?
1. importJS(["lib/MOON.js"], function() {
2. var sticker = Sticker.create();
3. sticker.ontap = function() {
4. MOON.openStickerPage(function(path) {
5. MOON.alert(path, function() {
6. MOON.finish();
7. });
8. });
9. MOON.finish();
10. };
11. sticker.onattach = function() {
12. MOON.finish();
13. };
14. sticker.ondetach = function() {
15. MOON.finish();
16. };
17. sticker.register();
18. });
importJS(["lib/MOON.js"], function() { var sticker = Sticker.create(); sticker.ontap = function() { MOON.openStickerPage(function(path) { MOON.alert(path, function() { MOON.finish(); }); }); MOON.finish(); }; sticker.onattach = function() { MOON.finish(); }; sticker.ondetach = function() { MOON.finish(); }; sticker.register(); });
openNotebook(callback)
ページ一覧を開く
（ちなみにページでピンチアウトするとページ一覧が開くようになっている）
callback には選択したページのIDが返ってくるらしい

Invalid Script もなくページ選択画面になるのだが、ページを選択すると画面が真っ暗になってうんともすんともいわなくなる。。。
こうなると再起動するしかない。。。
view plain print ?
1. importJS(["lib/MOON.js"], function() {
2. var sticker = Sticker.create();
3. sticker.ontap = function() {
4. MOON.openNotebook(function(pageId) {
5. MOON.finish();
6. });
7. MOON.finish();
8. };
9. sticker.onattach = function() {
10. MOON.finish();
11. };
12. sticker.ondetach = function() {
13. MOON.finish();
14. };
15. sticker.register();
16. });
importJS(["lib/MOON.js"], function() { var sticker = Sticker.create(); sticker.ontap = function() { MOON.openNotebook(function(pageId) { MOON.finish(); }); MOON.finish(); }; sticker.onattach = function() { MOON.finish(); }; sticker.ondetach = function() { MOON.finish(); }; sticker.register(); });
uploadCurrentPageToEvernote(onsuccess, onfailure)
Evernote に現在のページをアップロードする
getPageThumbnail(pageId)
指定したページIDのページのサムネイルが canvas オブジェクトとして返ってくる
getEditPaperThumbnail()
現在のページ（たぶん）のサムネイルが canvas オブジェクトとして返ってくる
createAPIBind()
以下の API を MOON 以下に割り当てるのに使っている
peel()
そのシールをはがす
finish()
MOON を終了するっぽいことだけはなんとなくわかる
openUrl(url)
ブラウザで url を開く
view plain print ?
1. importJS(["lib/MOON.js"], function() {
2. var sticker = Sticker.create();
3. sticker.ontap = function() {
4. MOON.openUrl("http://www.google.co.jp");
5. MOON.finish();
6. };
7. sticker.onattach = function() {
8. MOON.finish();
9. };
10. sticker.ondetach = function() {
11. MOON.finish();
12. };
13. sticker.register();
14. });
importJS(["lib/MOON.js"], function() { var sticker = Sticker.create(); sticker.ontap = function() { MOON.openUrl("http://www.google.co.jp"); MOON.finish(); }; sticker.onattach = function() { MOON.finish(); }; sticker.ondetach = function() { MOON.finish(); }; sticker.register(); });
openPage(pageId)
ページを開く
view plain print ?
1. importJS(["lib/MOON.js"], function() {
2. var sticker = Sticker.create();
3. sticker.ontap = function() {
4. MOON.openPage("iZjSL9Ve1375584059045");
5. MOON.finish();
6. };
7. sticker.onattach = function() {
8. MOON.finish();
9. };
10. sticker.ondetach = function() {
11. MOON.finish();
12. };
13. sticker.register();
14. });
importJS(["lib/MOON.js"], function() { var sticker = Sticker.create(); sticker.ontap = function() { MOON.openPage("iZjSL9Ve1375584059045"); MOON.finish(); }; sticker.onattach = function() { MOON.finish(); }; sticker.ondetach = function() { MOON.finish(); }; sticker.register(); });
setPenColor(red, green, blue, alpha)
ペンの色を変える
red, green, blue, alpha は 0 〜 255 までの整数
view plain print ?
1. importJS(["lib/MOON.js"], function() {
2. var sticker = Sticker.create();
3. sticker.ontap = function() {
4. var red = 255;
5. var green = 102;
6. var blue = 95;
7. var alpha = 255;
8. MOON.setPenColor(red, green, blue, alpha);
9. MOON.finish();
10. };
11. sticker.onattach = function() {
12. MOON.finish();
13. };
14. sticker.ondetach = function() {
15. MOON.finish();
16. };
17. sticker.register();
18. });
importJS(["lib/MOON.js"], function() { var sticker = Sticker.create(); sticker.ontap = function() { var red = 255; var green = 102; var blue = 95; var alpha = 255; MOON.setPenColor(red, green, blue, alpha); MOON.finish(); }; sticker.onattach = function() { MOON.finish(); }; sticker.ondetach = function() { MOON.finish(); }; sticker.register(); }); 背景色や描画色は rgba 合わさった値が入っている
view plain print ?
1. var page = MOON.getCurrentPage();
2. var backing = page.backing;
3. var paper = MOON.getPaperJSON(backing);
5. // 背景色を取得する
6. var color = paper.color;
7. var transparent = paper.transparent;
9. // color には #aarrggbb を10進数に直した値がはいっている例）-16777216 = 0xff000000, -1 = 0xffffffff
var page = MOON.getCurrentPage(); var backing = page.backing; var paper = MOON.getPaperJSON(backing); // 背景色を取得する var color = paper.color; var transparent = paper.transparent; // color には #aarrggbb を10進数に直した値がはいっている例）-16777216 = 0xff000000, -1 = 0xffffffff
setPenWidth(width)
ペンの太さ（筆圧に対する倍率）を変える
view plain print ?
1. importJS(["lib/MOON.js"], function() {
2. var sticker = Sticker.create();
3. sticker.ontap = function() {
4. MOON.setPenWidth(5.0);
5. MOON.finish();
6. };
7. sticker.onattach = function() {
8. MOON.finish();
9. };
10. sticker.ondetach = function() {
11. MOON.finish();
12. };
13. sticker.register();
14. });
importJS(["lib/MOON.js"], function() { var sticker = Sticker.create(); sticker.ontap = function() { MOON.setPenWidth(5.0); MOON.finish(); }; sticker.onattach = function() { MOON.finish(); }; sticker.ondetach = function() { MOON.finish(); }; sticker.register(); });
getCurrentPage()
現在のページのオブジェクトが返ってくる
view plain print ?
1. {
2. backing:"DC9g1Jkj1375584059045",
3. papers:"GOXracRB1375753891252"
4. }
{ backing:"DC9g1Jkj1375584059045", papers:"GOXracRB1375753891252" } backing にはストローク情報のID、papers にはシールIDが入っているもよう
/Data/MyNotebook1/[現在のページのID]/info.json の内容と同じっぽいが、 info.json では "stickers" だったのが "papers" になってる
view plain print ?
1. importJS(["lib/MOON.js"], function() {
2. var sticker = Sticker.create();
3. sticker.ontap = function() {
4. var page = MOON.getCurrentPage();
5. MOON.finish();
6. };
7. sticker.onattach = function() {
8. MOON.finish();
9. };
10. sticker.ondetach = function() {
11. MOON.finish();
12. };
13. sticker.register();
14. });
importJS(["lib/MOON.js"], function() { var sticker = Sticker.create(); sticker.ontap = function() { var page = MOON.getCurrentPage(); MOON.finish(); }; sticker.onattach = function() { MOON.finish(); }; sticker.ondetach = function() { MOON.finish(); }; sticker.register(); });
setCurrentPage(page?)
よくわからないけど、現在のページを変更する？
getPaperJSON(pageId)
指定したストローク情報IDに対応するストローク情報が返ってくる

/Data/MyNotebook1/[現在のページのID]/[ストローク情報ID]/info.json の内容っぽい
view plain print ?
1. {
2. version:"0.2",
3. x:0,
4. y:0,
5. width:768,
6. height:1024,
7. scale:1.0,
8. color:-16777216,
9. transparent:false,
10. strokes:[{"width":2.5,"color":-1,"type":"pen","data":[...]}, ...]
11. }
{ version:"0.2", x:0, y:0, width:768, height:1024, scale:1.0, color:-16777216, transparent:false, strokes:[{"width":2.5,"color":-1,"type":"pen","data":[...]}, ...] }
view plain print ?
1. importJS(["lib/MOON.js"], function() {
2. var sticker = Sticker.create();
3. sticker.ontap = function() {
4. var page = MOON.getCurrentPage();
5. var backing = page.backing;
6. var paper = MOON.getPaperJSON(backing);
8. var version = paper.version;
9. var x = paper.x;
10. var y = paper.y;
11. var width = paper.width;
12. var height = paper.height;
13. var scale = paper.scale;
14. var color = paper.color;
15. var transparent = paper.transparent;
16. var strokes = paper.strokes;
18. MOON.finish();
19. };
20. sticker.onattach = function() {
21. MOON.finish();
22. };
23. sticker.ondetach = function() {
24. MOON.finish();
25. };
26. sticker.register();
27. });
importJS(["lib/MOON.js"], function() { var sticker = Sticker.create(); sticker.ontap = function() { var page = MOON.getCurrentPage(); var backing = page.backing; var paper = MOON.getPaperJSON(backing); var version = paper.version; var x = paper.x; var y = paper.y; var width = paper.width; var height = paper.height; var scale = paper.scale; var color = paper.color; var transparent = paper.transparent; var strokes = paper.strokes; MOON.finish(); }; sticker.onattach = function() { MOON.finish(); }; sticker.ondetach = function() { MOON.finish(); }; sticker.register(); });
setPagerJSON(backing, paperJSON)
ストローク情報を書き換える
view plain print ?
1. importJS(["lib/MOON.js"], function() {
2. var sticker = Sticker.create();
3. sticker.ontap = function() {
4. var page = MOON.getCurrentPage();
5. var backing = page.backing;
6. var paper = MOON.getPaperJSON(backing);
8. // paper のプロパティを変更する
9. paper.color = -6710887; // 背景色を #ff666666 にする
10. MOON.setPaperJSON(backing, JSON.stringify(paper));
12. MOON.finish();
13. };
14. sticker.onattach = function() {
15. MOON.finish();
16. };
17. sticker.ondetach = function() {
18. MOON.finish();
19. };
20. sticker.register();
21. });
importJS(["lib/MOON.js"], function() { var sticker = Sticker.create(); sticker.ontap = function() { var page = MOON.getCurrentPage(); var backing = page.backing; var paper = MOON.getPaperJSON(backing); // paper のプロパティを変更する paper.color = -6710887; // 背景色を #ff666666 にする MOON.setPaperJSON(backing, JSON.stringify(paper)); MOON.finish(); }; sticker.onattach = function() { MOON.finish(); }; sticker.ondetach = function() { MOON.finish(); }; sticker.register(); });
getImagePath(?)
よくわからない
searchWeb(query)
ブラウザを開いて検索する
view plain print ?
1. importJS(["lib/MOON.js"], function() {
2. var sticker = Sticker.create();
3. sticker.ontap = function() {
4. MOON.searchWeb("enchant MOON");
5. MOON.finish();
6. };
7. sticker.onattach = function() {
8. MOON.finish();
9. };
10. sticker.ondetach = function() {
11. MOON.finish();
12. };
13. sticker.register();
14. });
importJS(["lib/MOON.js"], function() { var sticker = Sticker.create(); sticker.ontap = function() { MOON.searchWeb("enchant MOON"); MOON.finish(); }; sticker.onattach = function() { MOON.finish(); }; sticker.ondetach = function() { MOON.finish(); }; sticker.register(); });
searchStorage(filter)
各ノートの storage.json を検索する
view plain print ?
1. importJS(["lib/MOON.js"], function() {
2. var sticker = Sticker.create();
3. sticker.ontap = function() {
4. // storage.json に fav:1 が入っているノートをピックアップする
5. // function の引数には各ノートの storage.json をオブジェクト化したものが入っている
6. MOON.searchStorage("function matches(j){return j[\'fav\'] > 0;}");
8. MOON.finish();
9. };
10. sticker.onattach = function() {
11. MOON.finish();
12. };
13. sticker.ondetach = function() {
14. MOON.finish();
15. };
16. sticker.register();
17. });
importJS(["lib/MOON.js"], function() { var sticker = Sticker.create(); sticker.ontap = function() { // storage.json に fav:1 が入っているノートをピックアップする // function の引数には各ノートの storage.json をオブジェクト化したものが入っている MOON.searchStorage("function matches(j){return j[\'fav\'] > 0;}"); MOON.finish(); }; sticker.onattach = function() { MOON.finish(); }; sticker.ondetach = function() { MOON.finish(); }; sticker.register(); }); storage.json にプロパティを追加するには localStorage オブジェクトを使う
view plain print ?
1. localStorage['fav'] = 1;
localStorage['fav'] = 1;
showParticle(particle?)
showParticles() との違いがよくわからない
showParticles(particles)
パーティクルを表示する
particles は配列で x, y, vx, vy, ?, x, y, vx, vy, ?, ... のようにデータを入れる
5番目がわからない。フレーム数？時間？距離？
view plain print ?
1. importJS(["lib/MOON.js"], function() {
2. var sticker = Sticker.create();
3. sticker.ontap = function() {
4. var page = MOON.getCurrentPage();
5. var backing = page.backing;
6. var paper = MOON.getPaperJSON(backing);
7. var x = paper.width / 2;
8. var y = paper.height / 2;
10. var particles = [];
11. for (var i = 0; i < 10; i++) {
12. particles.push(x + i, y + i, 0.1, 0.1, 40);
13. }
14. MOON.showParticles(particles);
16. MOON.finish();
17. };
18. sticker.onattach = function() {
19. MOON.finish();
20. };
21. sticker.ondetach = function() {
22. MOON.finish();
23. };
24. sticker.register();
25. });
importJS(["lib/MOON.js"], function() { var sticker = Sticker.create(); sticker.ontap = function() { var page = MOON.getCurrentPage(); var backing = page.backing; var paper = MOON.getPaperJSON(backing); var x = paper.width / 2; var y = paper.height / 2; var particles = []; for (var i = 0; i < 10; i++) { particles.push(x + i, y + i, 0.1, 0.1, 40); } MOON.showParticles(particles); MOON.finish(); }; sticker.onattach = function() { MOON.finish(); }; sticker.ondetach = function() { MOON.finish(); }; sticker.register(); });
recognizeStrokes(?)
よくわからない

Y.A.M の雑記帳

2013年8月8日木曜日

enchant MOON の MOON.js を見てみる

0 件のコメント:

コメントを投稿