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 に渡す importJS(["lib/MOON.js"], function() { MOON.loadData(url, function(code) { eval(code); MOON.finish(); }.bind(this)); });
  
  
• alert(message, callback)
  message を表示したアラートを出す
  callback を渡して内部で MOON.finish() を呼ばないといけないとかなんとか。。。 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)
  手書き入力用のプロンプトがついたアラートを出す 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 固定でよくわからん。。。 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 もなくページ選択画面になるのだが、ページを選択すると画面が真っ暗になって うんともすんともいわなくなる。。。
  こうなると再起動するしかない。。。 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 を開く 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)
  ページを開く 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 までの整数 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 合わさった値が入っている 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)
  ペンの太さ（筆圧に対する倍率）を変える 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()
  現在のページのオブジェクトが返ってくる { backing:"DC9g1Jkj1375584059045", papers:"GOXracRB1375753891252" } backing にはストローク情報のID、papers にはシールIDが入っているもよう
  /Data/MyNotebook1/[現在のページのID]/info.json の内容と同じっぽいが、 info.json では "stickers" だったのが "papers" になってる 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 の内容っぽい { 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":[...]}, ...] } 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)
  ストローク情報を書き換える 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)
  ブラウザを開いて検索する 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 を検索する 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 オブジェクトを使う localStorage['fav'] = 1;
  
  
• showParticle(particle?)
  showParticles() との違いがよくわからない
  
  
• showParticles(particles)
  パーティクルを表示する
  particles は配列で x, y, vx, vy, ?, x, y, vx, vy, ?, ... のようにデータを入れる
  5番目がわからない。フレーム数？時間？距離？ 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(?)
  よくわからない