Electronで自分用のcsv閲覧デスクトップアプリを開発

こんにちは、大画面でモンハンソロプレイは寂しくて死にそうな豆珈琲です。

前回Electronを触り始めたので、今回は自分用のデスクトップアプリを作成しました。 

mamecafe.hatenablog.com

 作成したアプリは「csvファイルを読み込んでさくっと見る」です。

mamecafe.hatenablog.com

仕様

  1. csvファイルの読み込み
  2. csvファイルの内容表示
  3. デスクトップアプリを閉じる
  4. (格好いいらしいので、半透明)
  5. (なんとなく、アプリアイコン設置)

今回は、csvファイル以外の形式ファイルが読み込まれることを想定していません。当たり前ですが、外に出す予定はないのでセキュリティ対策は考えておりませんw

開発工程

html

ファイル自体は前回作成したものを引用しているため、jQueryのものが残っています。そのため、テーブル表示がjQueryのものではなくなっています。(jQueryを使って読み込んだファイルを表示する方法がわからず……(;´∀`))

<html>
<header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://jsgt.org/lib/jquery/plugin/csv2table/v002/js/jquery.csv2table-0.02-b-4.7.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="./css/sample.css">
</header>
<body>
<script>
$(function(){
$('#view_table').csv2table('./helloworld.csv');
});
</script>
<br>
<br>

<dir>
<input type="file" id="files" />
<output id="list"></output>
</dir>


<div id="view_table"></div>
<script src="lib/event.js"></script>
</body>
</html>

inputタグはtypeをファイルにし、idをつけることによってファイル操作が可能可能です。またoutputもidを指定しておくことによって、jsからの出力操作が行なえます。

 

  • input:files →ファイルの読み込み用
  • output :list →横込んだファイル名表示
  • div :view_table →読み込んだファイルテーブル表示
js

'use strict';//いつもの警告おまじない

const electron = require("electron");

//以下electronから使用するコンテキストの読み込み
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const Tray = electron.Tray;
const Menu = electron.Menu;
const shell = electron.shell;
const dialog = electron.dialog;

var fs = require('fs');

let mainWindow;

app.on('window-all-closed',function() {
  if (process.platform != 'darwin'){
  app.quit();
 }
});


let appIcon = null;
app.on('ready', function() {
 appIcon = new Tray(__dirname + '/images/icon2.png');//アプリのアイコンの読み込み
 var contextMenu = Menu.buildFromTemplate([//メニューバーの設定
 {
  label: '終了',
  submenu: [
  {
   label: 'Quit',
   accelerator: 'Command+Q',//コマンドで終了
   click:function() {app.quit();}
  }
  ]
  }
 ]);
 Menu.setApplicationMenu(contextMenu);
 mainWindow = new BrowserWindow({
  width: 800,
  height:600,
  'transparent': true, //透過
  'frame' : false
 });

 mainWindow.openDevTools();//開発者用ツールの表示   
 mainWindow.loadURL('file://' + __dirname + '/index.html');
 mainWindow.on('closed', function(){
  mainWindow = null;
 });
});

 

 

'use strict' //いつもの警告おまじない

window.onload = function (){

 document.getElementById('files') ? document.getElementById('files').addEventListener('change', handleFileSelect, false) : null;//filesの中身を読み、空でなければイベントリスナー


 function handleFileSelect(evt) {//ファイル処理の実体
  var files = evt.target.files;
  var reader = new FileReader();
  var output = ;
  var file_output;

  for (var i = 0, f; f = files[i]; i++) {
   output.push('<li><strong>',f.name,'</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString(), '</li>');
   reader.readAsText(f);
   var type = f.name.split('.');
   if (type[type.length - 1].toLowerCase() == 'csv') {
    getCSV(reader);//csvファイルを読み込む
   }

 }
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';

}

 function getCSV(reader){
  reader.onload = function() {
   var lineArr = reader.result.split("\n");
   var itemArr = ;
   for (var i = 0; i < lineArr.length; i++) {
    itemArr[i] = lineArr[i].split(",");
 }

 var insert = '<table>';
  for (var i = 0; i < itemArr.length; i++) {
   insert += '<tr>';
   for (var j = 0; j < itemArr[i].length; j++) {
    insert += '<td>';
    insert += itemArr[i][j];
    insert += '</td>';
   }
   insert += '</tr>';
 }
  insert += '</table>';
  document.getElementById('view_table').innerHTML = insert;
 }
}
}//window.onload

css(おまけ程度に、デザインはここの好みで)

 

body {
overflow: hidden;
margin: 0;
padding: 0;
border: 5px solid rgb(42, 42, 42);
background-color: rgba( 255, 255, 255, 0.9 );
box-shadow: 0 0 8px 3px #000 inset;
color: rgba( 1, 1, 1, 1 );

-webkit-app-region: drag;
-webkit-user-select: none;
}

#digital_clock {
font-family: "Iceland";
font-size: 25px;
line-height: 22px;
margin-top: 9px;
text-align: center;
color: #fff;
text-shadow: 1px 1px 3px #000;
}

 

反省

コメント少なめの、駆け足開発したので、どう開発したか思い出せぬ……。