コンピュータにルビーのコードを保存するの機能を実装しました #115

t-kazu · 2018-10-28T06:13:21Z

#112　の内容です。
SB3Downloaderと同じように、zipファイルでダウンロードします。

rbファイルのダウンロードは、Google Chromeの場合警告がでるみたいですね。（参考までに）

ダウンロードしたファイルの中身の例

require "smalruby"
Sprite.new("スプライト1",
           costumes: [
             {
               asset_id: "01ae57fd339529445cb890978ef8a054",
               name: "コスチューム1",
               bitmap_resolution: 1,
               md5: "01ae57fd339529445cb890978ef8a054.svg",
               data_format: "svg",
               rotation_center_x: 47,
               rotation_center_y: 55
             }
           ]) do
  move(10)
end

takaokouji · 2018-10-28T07:23:04Z

1つ1つはマージしなくて、全部ができたらマージしようとおもいます。
次のタスクができたら、このブランチにpushして、このPRを成長させてくださいね。

package.json

t-kazu · 2018-10-28T09:18:14Z

src/containers/ruby-downloader.jsx

+        const downloadLink = document.createElement('a');
+        document.body.appendChild(downloadLink);
+
+        this.saveRuby().then(content => {


zipではなく、テキストでcontentを取得する方法がわからなかったです。

zipの場合は処理時間がかかるため、非同期で処理しています。generateAsycなのが、それです。
今回はその必要はないため、thenメソッドの呼び出しは必要ありません。

let content = this.saveRuby();
のあと、
下記の行をそのまま処理すればいいと思うよ

let content = `require "smalruby"\n${this.props.rubyCode}`;

とした場合、

const url = window.URL.createObjectURL(content);

でエラーがでます

糸口が見えそうなので、これに関しては私の方でやってみます

@t-kazu
https://qiita.com/ledsun/items/93b0965c9720e0baf81c
の内容を参考にして、テキストファイルをどうにかして、Blobにしないといけないようですね。
詳しくは見れてないけど、なんとかなるといいな。

// saveRubyの戻り値をBlobにする。 const code = `require "smalruby"\n${this.props.rubyCode}`; return new Blob([JSON.Stringfy(code, null, 2)], { type: "text/plain" });

上記の Blob の戻り値を content とすればいいような気がします。

typeを確認しました。
text/x-ruby-script
でした。

なので、以下が正しいですね。

// saveRubyの戻り値をBlobにする。 const code = `require "smalruby"\n${this.props.rubyCode}`; return new Blob([JSON.Stringfy(code, null, 2)], { type: "text/x-ruby-script" });

mime-typeのチェックは、以下のHTMLで行いました。
https://qiita.com/Toshino3/items/4fec70fae9e85f693563
mime-checker.htmlとしてローカルファイルに保存して、chromeで表示しました。

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> </head> <body> ファイル選択 <input type="file" id="targetBinFile"> <input type="button" id="selectBinFileButton" value="読込"> <br /> <span id="fileTypeView"></span> <span>　</span> <span id="mimeTypeView"></span> <script> // 実際のヘッダを見てMIMEタイプをチェックする。 function getMimeType(header) { 'use strict'; var retv = ''; switch (true) { case header.startsWith('89504e47'): retv = 'image/png'; break; case header.startsWith('424d'): retv = 'image/bmp'; break; case header.startsWith('47494638'): retv = 'image/gif'; break; case header.startsWith('ffd8ff'): retv = 'image/jpeg'; break; case header.startsWith('25504446'): // こんな風に画像以外にも応用可能ですよ。 retv = 'application/pdf'; break; case header.startsWith('0'.repeat(128) + '4449434d'): // DICOMは先頭128byteのNULL文字のあと、DICMが来る。 // …まあ、DICOMヘッダが無い // いわゆる規約違反のDICOMファイルもたまにあるんですけどね… retv = 'application/dicom'; break; default: retv = 'unknown'; break; // 他にもシグネチャに応じた対応は可能かと思いますので、 // Wikipediaなど参考にされるのもよいのではないでしょか。 } return retv; } (function () { 'use strict'; document.getElementById('selectBinFileButton').onclick = function () { var file = document.getElementById('targetBinFile').files[0]; var fileReader = new FileReader(); fileReader.onloadend = function (e) { // 先頭150byteも取得すれば // 大方のシグネチャはカバーできるはず。 // そう、医用画像のDICOMファイルもね。 var arr = (new Uint8Array(e.target.result)).subarray(0, 150); var header = ''; for (var i = 0; i < arr.length; i++) { header += arr[i].toString(16); } // 拡張子で判断してるっぽい。 document.getElementById('fileTypeView').innerHTML = 'file.type: ' + (file.type === '' ? '(空)' : file.type); // 自前で判定したMIMEタイプを表示してます。 document.getElementById('mimeTypeView').innerHTML = 'getMimeType: ' + getMimeType(header); }; fileReader.readAsArrayBuffer(file); } }()); </script> </body> </html>

src/containers/ruby-downloader.jsx

nacl-takaokouji · 2018-10-28T09:27:02Z

ひとまずzipね。了解です。先に進めてください。マージすべきではありませんので、タイトルにWIPをつけます。

nacl-takaokouji · 2018-10-28T09:27:44Z

と、僕のほうでは修正できないや。
このPRのタイトルに [WIP] をつけてください。

[WIP] コンピュータにルビーのコードを保存するの機能を実装しました

src/components/menu-bar/menu-bar.jsx

t-kazu · 2018-10-29T02:20:02Z

src/containers/ruby-downloader.jsx

+        const downloadLink = document.createElement('a');
+        document.body.appendChild(downloadLink);
+
+        this.saveRuby().then(content => {


let content = `require "smalruby"\n${this.props.rubyCode}`;

とした場合、

const url = window.URL.createObjectURL(content);

でエラーがでます

糸口が見えそうなので、これに関しては私の方でやってみます

takaokouji · 2018-10-29T02:50:21Z

rbファイルのダウンロードは、Google Chromeの場合警告がでるみたいですね。（参考までに）

これはそのままでいいよ。

takaokouji · 2018-10-29T02:51:18Z

src/containers/ruby-downloader.jsx

+        ]);
+    }
+    saveRuby () {
+        const projectRuby = `require "smalruby"\n${this.props.rubyCode}`;


#115 (comment)
を参考にして、"をエンコードするように、修正してくださいませ。

takaokouji · 2018-10-29T02:55:03Z

src/containers/ruby-downloader.jsx

+
+const mapStateToProps = state => ({
+    projectFilename: getProjectFilename(state.scratchGui.projectTitle, projectTitleInitialState),
+    rubyCode: state.scratchGui.rubyCode.code


このままだと、rubyCodeが更新されていないと古いままのスクリプトが出力されてしまいますね。
ここでは、rubyCodeを使わずに、RubyDownloader の内部で vm の targets の blocks を使って、rubyCode を出力しないといけないだろうな。

workspaceからしか変換したことがないので、少し時間が掛かってしまうかもしれません。

はい、理解しています。じっくりいきましょう。これが武本さんの最後のタスクになると思います。

最終的にはこの方法はよくないのですが、とりいそぎにやり方です。

プログラムで、ステージ、スプライトの先頭から末尾、というように順番に選択して、選択するたびに、 workspaceToCode を呼び出します。
そうすると、ステージとすべてのスプライトの rubyCode が得られます。

RubyDownloader の内部で vm の targets の blocks を使って、rubyCode を出力しないといけないのですが、 blocks から直接 ruby のコードを生成できるようにするのは次の段階とします。 scratch-vm のコードを読む限り、 scratch-blocks の block からコードを生成することよりも簡単そうなんだけど、Generatorが使えないけど、僕の方でなんとかする。

ステージやスプライトを変更すると、少なくともundoがリセットされるという不都合があるため、最終的には、この方法は採用しません。

t-kazu · 2018-10-29T03:42:56Z

すみません。間違えて、git push -f してしまったので、

// saveRubyの戻り値をBlobにする。
const code = require "smalruby"\n${this.props.rubyCode};
return new Blob([JSON.Stringfy(code, null, 2)], {
type: "text/x-ruby-script"
});

というコメントが消えてしまいました。

t-kazu · 2018-10-29T03:58:08Z

// saveRubyの戻り値をBlobにする。
const code = require "smalruby"\n${this.props.rubyCode};
return new Blob([JSON.Stringfy(code, null, 2)], {
type: "text/x-ruby-script"
});
の実行後は、

"require \"smalruby3\"\n\nSprite.new(\"スプライト1\",\n           costumes: [\n             {\n               asset_id: \"01ae57fd339529445cb890978ef8a054\",\n               name: \"コスチューム1\",\n               bitmap_resolution: 1,\n               md5: \"01ae57fd339529445cb890978ef8a054.svg\",\n               data_format: \"svg\",\n               rotation_center_x: 47,\n               rotation_center_y: 55\n             }\n           ]) do\n  move(10)\nend"

のように特殊文字がそのまま表示されるようです。

個人的には、以下のようにすれば良いと思っています。

const code = `require "smalruby"\n${this.props.rubyCode}`;
return new Blob([code], {
   type: "text/x-ruby-script"
 });

takaokouji · 2018-10-29T06:31:04Z

特殊文字がそのまま表示されるようです。

なるほど。手元では動作確認していませんでしたので、 JSON.Stringfy が期待と異なるようですので、使わなくてもいいです。

コンピュータにルビーのコードを保存するの機能を実装しました

bb4c5f6

takaokouji reviewed Oct 28, 2018

View reviewed changes

package.json Outdated Show resolved Hide resolved

t-kazu commented Oct 28, 2018

View reviewed changes

t-kazu changed the title ~~コンピュータにルビーのコードを保存するの機能を実装しました~~ [WIP] コンピュータにルビーのコードを保存するの機能を実装しました Oct 28, 2018

t-kazu commented Oct 29, 2018

View reviewed changes

defalutMessageを変更しました

7cc48e0

t-kazu changed the title ~~[WIP] コンピュータにルビーのコードを保存するの機能を実装しました~~ コンピュータにルビーのコードを保存するの機能を実装しました Oct 29, 2018

rbファイルでダウンロードできるようにしました

2eea0c4

takaokouji reviewed Oct 29, 2018

View reviewed changes

t-kazu force-pushed the feature/download-ruby-code branch from cff049a to 2eea0c4 Compare October 29, 2018 02:51

takaokouji reviewed Oct 29, 2018

View reviewed changes

t-kazu changed the title ~~コンピュータにルビーのコードを保存するの機能を実装しました~~ [WIP]コンピュータにルビーのコードを保存するの機能を実装しました Oct 29, 2018

rubyコード保存時のエンコードを変更しました

8b5e9c2

eslintのエラーを解消しました

b910f2e

t-kazu changed the title ~~[WIP]コンピュータにルビーのコードを保存するの機能を実装しました~~ コンピュータにルビーのコードを保存するの機能を実装しました Nov 6, 2018

t-kazu changed the title ~~コンピュータにルビーのコードを保存するの機能を実装しました~~ [WIP]コンピュータにルビーのコードを保存するの機能を実装しました Nov 6, 2018

t-kazu changed the title ~~[WIP]コンピュータにルビーのコードを保存するの機能を実装しました~~ コンピュータにルビーのコードを保存するの機能を実装しました Nov 6, 2018

takaokouji merged commit 0c72c15 into smalruby:develop Nov 6, 2018

コンピュータにルビーのコードを保存するの機能を実装しました #115

コンピュータにルビーのコードを保存するの機能を実装しました #115

Uh oh!

Conversation

t-kazu commented Oct 28, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

takaokouji commented Oct 28, 2018

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t-kazu Oct 29, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nacl-takaokouji commented Oct 28, 2018

Uh oh!

nacl-takaokouji commented Oct 28, 2018

Uh oh!

Uh oh!

t-kazu Oct 29, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

takaokouji commented Oct 29, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t-kazu commented Oct 29, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

t-kazu commented Oct 29, 2018

Uh oh!

takaokouji commented Oct 29, 2018

Uh oh!

Uh oh!

t-kazu commented Oct 28, 2018 •

edited

Loading

t-kazu Oct 29, 2018 •

edited

Loading

t-kazu Oct 29, 2018 •

edited

Loading

t-kazu commented Oct 29, 2018 •

edited

Loading