Posted at

Chrome App で最小限のテキストエディタを作る

Chromebook を入手したのでちょっとしたテキストエディタを作る。ローカルのファイルを開いて、編集して、保存するだけの最小限のもの。こんな感じのやつ。Chrome 75.0 で作成。

_SS 0001-07-15 2.34.01.png

GoogleChromeLabs が開発しているシンプルな text-app を参考にした。こちらはエディタ部分に CodeMirror を使っておりシンタックスハイライトが出来、また複数ファイルを同時に開く程度のことはできる。

https://github.com/GoogleChromeLabs/text-app

まずマニフェストファイル。テキストエディタなのでファイルの書き込み許可が必要。


manifest.json

{

"manifest_version": 2,
"name": "MinimalEditor",
"version": "0.1",
"app": {
"background" : {
"scripts": ["background.js"]
}
},
"permissions": [{"fileSystem": ["write"]}]
}

続いて background.js だが、これは index.html をウィンドウとして開くだけ。


background.js

chrome.app.runtime.onLaunched.addListener( function() {

chrome.app.window.create('index.html', {
id: 'main',
bounds: {width: 640, height: 640}
});
});

続いて index.html は、ヘッダーに「開く」「上書き保存」「名前をつけて保存」とファイル名の <span> 要素を並べ、その下にエディタ本体の <textarea> を置く。CSS はいいかんじに書く。


index.html

<!DOCTYPE html>

<html>
<head>
<meta charset='utf-8'>
<link rel='stylesheet' href='style.css'>
</head>
<body>

<div class='wrap'>

<div class='header'>
<a href=# id='menu-open'>Open</a>
<a href=# id='menu-save'>Save</a>
<a href=# id='menu-saveas'>Save As</a>
<span id='filename'></span>
</div>

<textarea id='editor'></textarea>

</div>

<script src='third_party/jquery/jquery-3.4.1.min.js'></script>
<script src='app.js'></script>

</body>
</html>


最後に app.js だが面倒なので $(document).ready() の内部に全部ぶちこむ形で書いている。Chrome FileSystem API を使用。半端にES6が混じってるけど気にしないでほしい。


app.js

function MinimalEditorApp() {}

let app = new MinimalEditorApp();

$(document).ready(function () {
$("#menu-open").on("click", function (e) {
e.preventDefault();
chrome.fileSystem.chooseEntry({type: "openFile"}, function(entry) {
app.entry = entry;
$("#filename").text(app.entry.name);
console.log(app.entry);
app.entry.file(function(file) {
let reader = new FileReader();
reader.onload = function(e) {
$("#editor").text(e.target.result);
};
reader.readAsText(file);
});
});
} );

$("#menu-save").on("click", function(e) {
e.preventDefault();
const content = $("#editor").val();

app.entry.createWriter(function(writer) {
let blob = new Blob([content], {type: 'text/plain'});
writer.onwrite = function() {
writer.onwrite = function() {};
writer.write(blob);
};
writer.truncate(blob.size);
console.log("Saved!");
}, function(error) {
console.log("Writing Error");
});
});

$("#menu-saveas").on("click", function(e) {
e.preventDefault();
const content = $("#editor").val();

chrome.fileSystem.chooseEntry({type: "saveFile"}, function(entry) {
app.entry = entry;
app.entry.createWriter(function(writer) {
let blob = new Blob([content], {type: 'text/plain'});
writer.onwrite = function() {
writer.onwrite = function() {};
writer.write(blob);
};
writer.truncate(blob.size);
console.log("Saved!");
}, function(error) {
console.log("Writing Error");
});
});
});
});


とりあえずこれで一応テキストエディタとして動くが、なんのエラー処理もしていないので新規ファイルを「上書き保存」するとエラーを吐くし、編集中にウィンドウを閉じるとなんの警告も出ずに消える。