ドシロウトがElectronではじめて作ってみた

4978 ワード
Electron ドシロウト 初心者 初心者 テキストリンク

１．初めに

この記事は「ドシロウトがelectronではじめて作ってみた」の話を書いています。インストールからの本当にはじめてなのでしょぼい物しかできませんでした。

ソースはお見せできるレベルではないので載せていません。わたしはプロのエンジニアではなくただの趣味の人です。

私みたいのが書いてもいいのかなと思いましたが同じような初心者向けにドシロウトのバタバタぶりを書いておこうと思いました

作ったのはただのメモ帳です。機能的には以下の事しかできません。

・ローカルのファイルを一覧表示・編集・保存・別名保存
・ファイルをDropboxにアップロード、ダウンロード、一覧表示

作った物の動作動画は以下です。ショボイです。※音有です　ご注意ください。

２．前提:作成・実行環境

作成・実行環境は以下です。

使用したパソコン:Diginnos DG-D11IWVL

  • OS:Windows 10 Home 64bit
  • CPU:インテル Atom x5-Z8350 (1.44GHz)
  • ディスプレイ:11.6インチ(1920×1080)
  • グラフィック:HDグラフィックス400
  • メモリ:4GB
  • ストレージ:64GB eMMC

非常にロースペックなモバイルPCになります。通常構成に加えストレージが少ないのでMicroSDカードを入れています。

  • MicroSD:SDHC 32GB UHS-1 スーパークラス３

仮想ディスク(VHD)化して、スタートアップに.vhdファイルを登録、起動時常時マウントするようにしています。少ないeMMCの容量を考慮しElectronのソースをおいています。

３．インストール

以下の記事を参考にインストールしました。

記事はマックでの操作を書かれています。Windowsでも可能と書いてあったのでこの記事を参考にしました。

まずnode.jsを導入しました。ICS MEDIA様の記事の説明どおりnode.jsのサイトからLTS版をダウンロード。何の問題もなくインストールできました。

次にElectron。コマンドプロンプト（管理者モード）で以下のコマンドを実行しました。

npm install electron -g

４．動作確認

ちゃんと必要なファイルサンプルはICS MEDIA様の記事に用意されていてとてもありがたいです。

私の場合vhd上にFirstAppディレクトリを作りファイルを配置しました。（文字コードUTF-8,改行コードLF)。

アプリケーションの実行は普通のコマンドプロンプトでFirstAppに移動して以下のコマンドを実行して動作確認できました。

electron src

５．メモ帳を作る

ここまでは記事の内容を試しただけなのでなんとか１本自作アプリを作りました。ベースはFirstAppを利用。別ディレクトリを作ってコピーして使いました。

まずは画面を一から作る能力が無いので探しました。結局、スライドメニューのメモ帳もいいかもと思い、以下をカスタマイズ。

動画の通り、ハンバーガーメニュー側にファイル操作メニューを置いてメイン側にtextareaを置く形にしました。

ファイル構成もよく分からなかったですが、以下のようにしました。

  • main.js（electronの画面処理メイン）
  • index.html（メモ帳の画面）
    • fdir.js（ローカルファイル操作、dropboxでのファイル操作）
    • index.js（ハンバーガーメニューのトグル）

動画の通りショボイですがなんとか動いています。

６．困った所

本当に初めて作ったのでいくつか悩んだところがありました。

A.jQueryがエラーになった

以下の記事を参考にjQueryを動かすscriptタグを追加しました。

B.JavaScriptのpromptが使えなかった

別名でメモを保存する時にファイル名をpromptで入力するようにしようとしてできませんでした。Electronで使えないということを知りませんでした。仕方なく画面上にファイル名の入力項目作って逃げました…

C.dropboxにファイル名が日本語のファイルがアップロード出来なかった

dropbox-v2-apiを使ってファイルのアップロードをしていますが英字のファイル名では問題ありませんが日本語だとエラーでアップロードできませんでした。

ファイル名をURIエンコードすればアップロードできましたがファイル一覧を取得すると当たり前ですがエンコードしたファイル名になりました。

仕方なくアップロード時はエンコード、ダウンロード、ファイル一覧取得時にはデコードするようにしています。

７．まとめ

ドシロウトが作ったのでショボイですが生まれて初めてのElectronのプログラムが作れました。

まぁ私みたいなのにも出来るということは簡単な構造なのかなとは思います。

８．参考にした記事

沢山参考にさせていただきありがとうございます。

ファイル一覧を作る時に参考にした記事です。

ローカルのファイル操作をする時に参考した記事です。

dropboxのファイル操作をする時に参考した記事です。

以　上