Electronでエディタを作る(ACE使用) ～ローカルファイルの読み込み～
2016/06/11
[ad#top-1]
前回の記事はこちら。
今回はファイルを読み込んでエディタに表示させます。
基本的にWebページではJavaScriptだろうがPHPだろうが、ローカルファイルへのアクセスは原則できません。これはウェブページからの不正アクセスを防ぐためにあるんですが、Electronはデスクトップアプリを想定して作られた技術なので、そこについては解決されています。
まずはHTML(index.html)にファイル読込用のボタンを仕込みます。
<button onclick=”openFile();”>Open</button>
で、JavaScript側は以下の通りです。ソースファイルはここからダウンロードしてください。
| var fs = require(‘fs’); |
| var remote = require(‘remote’); |
| var browserWindow = remote.require(‘browser–window’); |
| var dialog = remote.require(‘dialog’); |
| var editor = null; |
| function onLoad() { |
| editor = ace.edit(“input_txt”); |
| editor.getSession().setMode(“ace/mode/csharp”); |
| editor.setTheme(“ace/theme/chrome”); |
| } |
| function openFile(){ |
| var win = browserWindow.getFocusedWindow(); |
| dialog.showOpenDialog( |
| win, |
| //ダイアログの設定 |
| { |
| properties: [‘openFile’], |
| filters: [ |
| { |
| name: ‘C#ソースファイル’, |
| extensions: [‘cs’, ‘txt’] |
| } |
| ] |
| }, |
| //ファイル選択後の処理 readFile関数へ |
| function (filenames) { |
| if (filenames) { |
| readFile(filenames[0]); |
| } |
| }); |
| } |
| function readFile(path) { |
| fs.readFile(path, function (error, text) { |
| if (error != null) { |
| alert(‘error : ‘ + error); |
| return; |
| } |
| //alert(text.toString().length); |
| editor.setValue(text.toString(), –1); |
| }); |
| } |
特に難しくなく簡単なコードで以下の通り読込みできました。
ところが、ここで問題発生。相手の文字コードがShift-JISであるため、読み込むとこのように日本後部分が文字化けしてしまうんです。Electron側はUTF-8なので、互いにアンマッチとなってしまいました。うーむ。何か良い方法はないだとうか・・・。目下ここが課題です。
[ad#ad-1]
スポンサーリンク