
本コースの説明をおこない、おおまかなロードマップを示します。
Electronとは何なのか、node.jsとWebKit、CUIアプリとGUIアプリの違いを解説します。
Electronと、類似開発環境であるNW.jsとの違いを解説します。
今後よく出てくる、コマンドプロンプトの起動の仕方を、説明しておきます。
本コースは、ある程度JavaScriptの基本文法を知っている方向けのコースです。そのため、JavaScriptの基本文法を、手軽に学ぶ方法を紹介します。また、本コースで利用するテキストエディタについて紹介します。
本コースで出てくるソースコードは、本レクチャーの「ダウンロード可能なリソース」から一括してダウンロードできます。(2021-09-28 更新)
本セクションの参考URLなどをまとめたページです。
「node.js 環境構築編」についての前置きです。
Windowsで、手軽にnode.jsの開発環境を構築するnodistを利用して、node.jsを導入します。また、nodistの公式サイトのURLも紹介します。
package.jsonの作成の仕方を説明します。また、このファイルの各項目の意味についても解説します。
Windowsで、node.jsをCUIアプリとして使うための、バッチファイルのテンプレートを示します。また、そのプログラムについて解説します。
console.logを利用して、コマンドプロンプトに「hello world」と出力します。また、アプリの引数を受け取り、アプリを途中で終了する方法も学びます。
node.jsのモジュールと、requireを使った呼び出しの仕組みについて学習します。また、各種パッケージのインストール方法、自作モジュールの作り方を学びます。
本セクションの参考URLなどをまとめたページです。
Electron は、頻繁に更新があり、いつの間にか仕様が変わります。ここでは、そうした違いによる情報をまとめておきます。参考にしてください。(2021-09-28 更新)
「Electron 環境構築編」についての前置きです。
Electronをインストールします。
Electronでローカルアプリを作成する際に、使いやすいファイル構成を紹介します。また、Electronアプリの実行方法を学びます。
Electronでは、メインプロセス(Main Process)とレンダラープロセス(Renderer Process)の2つのプロセスがあります。その概要を学びます。
メインプロセス、レンダラープロセスで、ログを表示する方法を学びます。
本セクションの参考URLなどをまとめたページです。
「node.js リファレンス編」についての前置きです。
node.jsを利用した、基本的な処理を分類して、サンプルコードの格納場所を紹介します。
「カレントパスからの相対パスを絶対パスに変換」「パスの分解」について学びます。
「ファイルの存在確認」「ディレクトリ内を走査」「ファイルのコピー」「ファイルの削除」について学びます。
「ファイルの存在確認」「ディレクトリ内を走査」「ファイルのコピー」「ファイルの削除」について学びます。その2。
「テキストファイルの読み書き」「バイナリファイルの読み書き」について学びます。
テキストファイルの文字コードを、変換する方法を学びます。Windowsでは、ShifJISが主流なので、Windowsでローカルアプリを作る際には、必須の知識になります。
Windowsのexeファイルを、node.jsから引数付きで実行する方法を学びます。また、node.jsから、バッチファイルなどで使用するWindowsコマンドを実行する方法も学びます。
本セクションの参考URLなどをまとめたページです。
「Electron アプリ作成編 テキストエディタ1」についての前置きです。
本章で作成するアプリが、どのようなアプリなのか紹介します。
作成するアプリケーションのファイル構成を紹介します。
「electron_pack.js」「electron_pack_64.bat」「electron_pack_32.bat」「app/src/release.js」を使い、アプリの配布用ファイルを作成します。
「electron_pack.js」「electron_pack_64.bat」「electron_pack_32.bat」「app/src/release.js」を使い、アプリの配布用ファイルを作成します。その2。
本セクションの参考URLなどをまとめたページです。
「Electron アプリ作成編 テキストエディタ2」についての前置きです。
アプリで最初に実行されるmain.jsについて紹介します。
「app/src/my_modules/browser.js」のコードを見ながら、ブラウザウィンドウの表示方法を学びます。また、外部リンクをクリックした際に、外部のブラウザでURLを開く方法を学びます。
アプリのindex.htmlについて紹介します。また、レンダラープロセスの処理のルートになる「app/src/js-my/app.main.js」のコードを解説します。
src外のファイルの相対パスは、配布用ファイルを作成した際に変化します。その仕様と対策を学びます。
本セクションの参考URLなどをまとめたページです。
「Electron アプリ作成編 テキストエディタ3」についての前置きです。
メインプロセスとレンダラープロセスの間で行なわれるプロセス間通信について学びます。
「app/src/my_modules/menu.js」「app/src/js-my/app.menu.js」のコードを見ながら、メニューを作成する方法を学びます。
「app/src/my_modules/shortcut.js」「app/src/js-my/app.shortcut.js」のコードを見ながら、ショートカット操作を追加する方法を学びます。
本セクションの参考URLなどをまとめたページです。
「Electron アプリ作成編 テキストエディタ4」についての前置きです。
「app/src/js-my/app.filDlg.js」のコードを見ながら、ファイルの読み込み、保存に利用するファイルダイアログの使い方を学びます。
「app/src/js-my/app.dAndD.js」「app/src/css/main.css」のコードを見ながら、ファイルのドラッグ&ドロップの使い方を学びます。
「app/src/js-my/app.file.js」のコードを見ながら、自動文字コード判定テキスト読み込みの処理方法を学びます。
「app/src/js-my/app.editor.js」「app/src/js-my/app.ui.btn.js」のコードを見ながら、エディターのファイル読み込みや保存、ボタンの処理を学びます。
本セクションの参考URLなどをまとめたページです。
「Electron アプリ作成編 WebView」についての前置きです。
本章で作成するアプリが、どのようなアプリなのか紹介します。
WebViewを利用して、ウィンドウ内にウェブページを表示します。また、Webブラウザのように、URLを入力してページの内容を変更します。
WebViewに表示したページを、PNGファイルとして保存します。
WebViewに表示したページを、PDFファイルとして保存します。
WebViewに表示したページ内の画像や、リンク先の画像を、まとめてダウンロードして保存します。
WebViewに表示したページ内の画像を、まとめてダウンロードして保存します。その2。
WebViewに表示したページ内の画像を、まとめてダウンロードして保存します。その3。
WebViewに表示したページ内の画像を、まとめてダウンロードして保存します。その4。
本セクションの参考URLなどをまとめたページです。
「ドキュメント斜め読み」についての前置きです。
Electron関係の、各種ドキュメントをまずは紹介します。
ローカルアプリ開発に関係する内容を中心に、node.jsのドキュメントを見ていきます。
ローカルアプリ開発に関係する内容を中心に、Electronのドキュメントを見ていきます。
ローカルアプリ開発に関係する内容を中心に、Electronのドキュメントを見ていきます。その2。
本セクションの参考URLなどをまとめたページです。
このコースでは、Web開発の知識を利用して、JavaScriptとHTMLで、GUIのローカルアプリケーションを作成する方法を学びます。
Windows環境に、node.js、Electronの導入を行ない、メニューや文字コード変換機能を備えたテキストエディタや、特殊機能を複数持ったWebブラウザを、実際に作っていきます。
コースで紹介されるコードは、サンプルコードとして、全てダウンロードすることができます。
このコースを習得すれば、次のような事ができるようになります。
・Windowsでの、node.js、Electronの開発環境の構築。
・配布可能なアプリケーションの作成。
・ファイルアクセスなど、ローカルアプリケーション開発に必要な知識の習得。
・Electronのプロセス間通信。
・メニューやショートカットなど、高度なGUI機能の利用。
・Webページのキャプチャや、PDF化、画像をまとめてDLといった操作。
‥‥‥‥‥‥‥‥‥‥
このコースは、以下のように進みます。
● 第1章 イントロダクション
● 第2章 node.js 環境構築編
● 第3章 Electron 環境構築編
● 第4章 node.js リファレンス編
● 第5~8章 Electron アプリ作成編 テキストエディタ
● 第9章 Electron アプリ作成編 WebView
● 第10章 ドキュメント斜め読み
‥‥‥‥‥‥‥‥‥‥
本コースで作成するアプリケーションは、以下の機能を持っています。ローカルアプリの基本的な機能を一通り学べるようにしています。
・ファイルダイアログを使ったファイルの読み込みや保存
・ドラッグ&ドロップによるファイルの読み込み
・文字コードの自動変換
・メニュー
・ショートカット
・複数ウィンドウ
・Webページのキャプチャ
・WebページのPDF化
・Webページ内の画像をまとめてDL