のぞみElectron184前回の記事「Electron入門」では、ElectronというHTML/JavaScriptのフレームワークを使って、デスクトップアプリケーションを作成するまでの手順を紹介しました。今回は応用サンプルとしてテキストエディターの作り方を解説します。テキストエディターを作成することで、Node.jsのファイルの読み込み/書き込みや、ダイアログモジュールなどアプリケーション開発で必須となるElectronの技術を習得できます。15分程度で試せる内容になってますので、ぜひご覧ください。10にて動作検証を行いました。今回のサンプルのテキストエディターのデモをご覧ください。このオリジナルのテキストエディターではテキストの編集ができ、JavaScriptファイルのカラーリングにも対応しています。このテキストエディターを一緒に作っていきましょう!デモのソースコードはGitHubで公開してます。ダウンロードして読み進めてください。ファイル構成Electronで必要なファイルやアプリケーション作成手順については記事「Electron入門」にまとめています。本記事では今回追加したファイルについて説明します。前回の記事から内容に変更・追加があったファイルは、画面構成用のindex.html、実装を記述するeditor.js、デザインを記述するためのmain.cssです。BootstrapとAce.jsはCDNを利用します。今回作成したテキストエディターは、[保存する]ボタン・[読み込む]ボタン・[テキスト入力領域]・[フッター]と4つの部品で構成されています。テキストエディターライブラリを組み込むテキスト入力部分には、AceというJSライブラリを使用しました。Aceを使用するには以下のコードで読み込みます。ace.jsがメインのファイル、mode-javascript.jsがシンタックス設定用のファイル、theme-twilight.jsがカラーテーマ用のファイルです。公式サイトに記載もありますが、CDNのサービスであるcloudflareで提供されているので、これを利用します。src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/theme-twilight.js"></script>次に入力エリアを作成します。ace.edit()関数に入力エリアとなるdiv要素のid属性を引数で渡し、戻り値として入力エリアを操作するためのeditor変数を獲得します。editor.getSession().setMode()関数でシンタックスをJavaScriptに変更し、editor.setTheme()関数でカラーテーマを設定しています。Reference」をご参照ください。[ファイル選択]ダイアログを使用して、読み込み先ファイルを選択する[読み込み]ボタンを押した時にopenLoadFile()関数が呼ばれます。この関数内でdialogモジュールの[showOpenDialog()](https://github.com/atom/electron/blob/master/docs/api/dialog.md#dialogshowopendialogbrowserwindow-options-callback)関数を使用して、現在開いているブラウザウィンドウから[ファイル選択]ダイアログを開きます。第1引数には現在フォーカスされているウィンドウ、第2引数にダイアログのオプション、第3引数にダイアログが閉じられたあとのコールバック関数を指定します。ダイアログでファイルが選択された場合にコールバック関数の第1引数にファイルパスの配列が渡されます。配列が渡ってきた場合に実際にファイルの内容を読み込むreadFile()関数を呼び出します。dialog」をご参照ください。ファイル内容を読み込むfsモジュールをrequire()関数で獲得し、fsモジュールのreadFile()関数からファイルの内容を読み込みます。第1引数で読み込みパス、第2引数で読み込みが終わった際によばれるコールバック関数を指定します。コールバック関数にはエラーが発生した場合のerror(エラーオブジェクト)とtext(読み込んだテキスト)が渡されます。editor.setValue()関数でテキストエディター部分に文字列を設定します。第1引数で文字列を設定し、第2引数でカーソルの位置を設定します。-1と入れるとテキストの開始地点へ移動し、1とするとテキストの終了位置に移動します。テキストを読み込み、テキストを入力エリアに設定します。[メッセージ]ダイアログを使用して、保存確認をする保存確認のメッセージの表示には、dialogモジュールのshowMessageBox()関数を使用します。第1引数には現在フォーカスされているウィンドウ、第2引数にはダイアログのオプション設定、第3引数にはダイアログ選択後のコールバック関数を指定します。コールバック関数の第1引数に選択されたボタンのインデックスが返って来ます。インデックスが「0」つまり「OK」のボタンを押された場合、実際にファイルへ書き込みを行うwriteFile()関数を呼び出します。writeFile()関数には現在開いているファイルのパスと、テキストエディターに設定されている文字列を引数に指定します。テキストエディターに設定されている文字列はeditor.getEditor()関数で取得します。ファイルを保存します。"ファイルの上書き保存を行います。ファイルへ書き込むfsモジュールのwriteFile()関数でファイルを保存します。第1引数で保存先のパス、第2引数で書き込むデータ、第3引数で保存後のコールバック関数を指定します。コールバック関数経由でエラーが発生した場合のerror(エラーオブジェクト)が返ってきます。ファイルを書き込みます。ドラッグ&ドロップを実装するデモでは上記で説明した内容以外に、ファイルをドラッグ&ドロップして読み込む処理を実装しました。ドラッグ&ドロップを実装するための記事をQiitaに投稿しましたので、気になった方はご参照ください。Electronでファイルのドラッグ&ドロップを実装する動画で振り返る開発手順ここまでの開発手順を動画に撮影しました。記事を読み進めてわからなかった箇所があれば、動画を参考ください。みなさんもぜひ素敵なアプリケーションを作成してみてくださいね。平成30年3月29日に内容をメンテナンスしています。のぞみインタラクティブデベロッパー。好きな生き物はハムスター、好きな食べ物は豚汁です。ツールは使うより作りたい派。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。