Electronでエディタを作る(ACE使用)　～ローカルファイルの読み込み～

2016/02/16 2016/06/11

[ad#top-1]

前回の記事はこちら。

Electronでエディタを作る　～まずはACEを導入～

今回はファイルを読み込んでエディタに表示させます。

基本的にWebページではJavaScriptだろうがPHPだろうが、ローカルファイルへのアクセスは原則できません。これはウェブページからの不正アクセスを防ぐためにあるんですが、Electronはデスクトップアプリを想定して作られた技術なので、そこについては解決されています。

まずはHTML(index.html)にファイル読込用のボタンを仕込みます。

で、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);

   });

}