JavaScript+HTML:Electronでつくるローカルアプリ実例講座 for Windows
4.4 (11 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
96 students enrolled
Wishlisted Wishlist

Please confirm that you want to add JavaScript+HTML:Electronでつくるローカルアプリ実例講座 for Windows to your Wishlist.

Add to Wishlist

JavaScript+HTML:Electronでつくるローカルアプリ実例講座 for Windows

Electronを使い、JavaScriptとHTMLでローカルアプリを作る実例講座。Windows環境向け。
4.4 (11 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
96 students enrolled
Created by 柳井 政和
Last updated 4/2017
Japanese
Curiosity Sale
Current price: $10 Original price: $85 Discount: 88% off
30-Day Money-Back Guarantee
Includes:
  • 3 hours on-demand video
  • 10 Articles
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • JavaScriptとHTMLでローカルアプリを作れるようになります
  • プロセス間通信や、メニュー、ショートカットなど、Electronの機能を使いこなせるようになります
  • ファイルダイアログの利用やファイル操作、文字コードの自動変換などができるようになります
  • Webページのキャプチャ、PDF化、画像をまとめてDLなど、各種処理ができるようになります
View Curriculum
Requirements
  • 初歩的なJavaScriptのプログラミングの経験が必要
  • Windows環境
Description

 このコースでは、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

Who is the target audience?
  • JavaScriptとHTMLで、GUIのローカルアプリを作りたい人
  • Web技術を使い、ローカルアプリを作りたい人
  • Electronについて学びたい人
  • プロセス間通信など、Electronの機能を使いこなしたい人
Students Who Viewed This Course Also Viewed
Curriculum For This Course
69 Lectures
03:11:05
+
第1章 イントロダクション
7 Lectures 17:31

本コースの説明をおこない、おおまかなロードマップを示します。

Preview 03:55

Electronとは何なのか、node.jsとWebKit、CUIアプリとGUIアプリの違いを解説します。

Preview 04:03

Electronと、類似開発環境であるNW.jsとの違いを解説します。

Preview 04:11

今後よく出てくる、コマンドプロンプトの起動の仕方を、説明しておきます。

コマンドプロンプトの起動の仕方
02:04

本コースは、ある程度JavaScriptの基本文法を知っている方向けのコースです。そのため、JavaScriptの基本文法を、手軽に学ぶ方法を紹介します。また、本コースで利用するテキストエディタについて紹介します。

JavaScriptとテキストエディタ
02:00

本コースで出てくるソースコードは、本レクチャーの「ダウンロード可能なリソース」から一括してダウンロードできます。

ソースコード
01:00

本セクションの参考URLなどをまとめたページです。

本セクションの参考ドキュメント
00:18
+
第2章 node.js 環境構築編
7 Lectures 19:27

「node.js 環境構築編」についての前置きです。

[章頭] node.js 環境構築編
00:17

Windowsで、手軽にnode.jsの開発環境を構築するnodistを利用して、node.jsを導入します。また、nodistの公式サイトのURLも紹介します。

Preview 01:48

package.jsonの作成の仕方を説明します。また、このファイルの各項目の意味についても解説します。

package.jsonの作成
02:54

Windowsで、node.jsをCUIアプリとして使うための、バッチファイルのテンプレートを示します。また、そのプログラムについて解説します。

バッチファイルのテンプレート
03:22

console.logを利用して、コマンドプロンプトに「hello world」と出力します。また、アプリの引数を受け取り、アプリを途中で終了する方法も学びます。

hello world、アプリの引数、終了
03:27

node.jsのモジュールと、requireを使った呼び出しの仕組みについて学習します。また、各種パッケージのインストール方法、自作モジュールの作り方を学びます。

モジュールとrequire
07:31

本セクションの参考URLなどをまとめたページです。

本セクションの参考ドキュメント
00:08
+
第3章 Electron 環境構築編
6 Lectures 08:42

「Electron 環境構築編」についての前置きです。

[章頭] Electron 環境構築編
00:14

Electronをインストールします。

Preview 01:02

Electronでローカルアプリを作成する際に、使いやすいファイル構成を紹介します。また、Electronアプリの実行方法を学びます。

ファイル構成
04:02

Electronでは、メインプロセス(Main Process)とレンダラープロセス(Renderer Process)の2つのプロセスがあります。その概要を学びます。

2つのプロセス
01:19

メインプロセス、レンダラープロセスで、ログを表示する方法を学びます。

ログ表示の方法
01:46

本セクションの参考URLなどをまとめたページです。

本セクションの参考ドキュメント
00:19
+
第4章 node.js リファレンス編
9 Lectures 31:18

「node.js リファレンス編」についての前置きです。

[章頭] node.js リファレンス編
00:22

node.jsを利用した、基本的な処理を分類して、サンプルコードの格納場所を紹介します。

処理の種類
00:56

「カレントパスからの相対パスを絶対パスに変換」「パスの分解」について学びます。

パス
02:17

「ファイルの存在確認」「ディレクトリ内を走査」「ファイルのコピー」「ファイルの削除」について学びます。

ファイル操作
08:40

「ファイルの存在確認」「ディレクトリ内を走査」「ファイルのコピー」「ファイルの削除」について学びます。その2。

ファイル操作2
06:57

「テキストファイルの読み書き」「バイナリファイルの読み書き」について学びます。

ファイル読み書き
05:24

テキストファイルの文字コードを、変換する方法を学びます。Windowsでは、ShifJISが主流なので、Windowsでローカルアプリを作る際には、必須の知識になります。

文字コード
04:02

Windowsのexeファイルを、node.jsから引数付きで実行する方法を学びます。また、node.jsから、バッチファイルなどで使用するWindowsコマンドを実行する方法も学びます。

exe実行
02:33

本セクションの参考URLなどをまとめたページです。

本セクションの参考ドキュメント
00:07
+
第5章 Electron アプリ作成編 テキストエディタ1
6 Lectures 16:19

「Electron アプリ作成編 テキストエディタ1」についての前置きです。

[章頭] Electron アプリ作成編 テキストエディタ1
00:19

本章で作成するアプリが、どのようなアプリなのか紹介します。

Preview 02:14

作成するアプリケーションのファイル構成を紹介します。

ファイル構成
05:26

「electron_pack.js」「electron_pack_64.bat」「electron_pack_32.bat」「app/src/release.js」を使い、アプリの配布用ファイルを作成します。

アプリのパッケージ化
04:12

「electron_pack.js」「electron_pack_64.bat」「electron_pack_32.bat」「app/src/release.js」を使い、アプリの配布用ファイルを作成します。その2。

アプリのパッケージ化2
04:01

本セクションの参考URLなどをまとめたページです。

本セクションの参考ドキュメント
00:07
+
第6章 Electron アプリ作成編 テキストエディタ2
6 Lectures 17:50

「Electron アプリ作成編 テキストエディタ2」についての前置きです。

[章頭] Electron アプリ作成編 テキストエディタ2
00:19

アプリで最初に実行されるmain.jsについて紹介します。

main.js
02:22

「app/src/my_modules/browser.js」のコードを見ながら、ブラウザウィンドウの表示方法を学びます。また、外部リンクをクリックした際に、外部のブラウザでURLを開く方法を学びます。

ブラウザの表示と外部ブラウザの利用
04:08

アプリのindex.htmlについて紹介します。また、レンダラープロセスの処理のルートになる「app/src/js-my/app.main.js」のコードを解説します。

index.htmlとapp.main.js
06:30

src外のファイルの相対パスは、配布用ファイルを作成した際に変化します。その仕様と対策を学びます。

src外のファイルの相対パス
04:28

本セクションの参考URLなどをまとめたページです。

本セクションの参考ドキュメント
00:03
+
第7章 Electron アプリ作成編 テキストエディタ3
5 Lectures 17:12

「Electron アプリ作成編 テキストエディタ3」についての前置きです。

[章頭] Electron アプリ作成編 テキストエディタ3
00:19

メインプロセスとレンダラープロセスの間で行なわれるプロセス間通信について学びます。

プロセス間通信
03:54

「app/src/my_modules/menu.js」「app/src/js-my/app.menu.js」のコードを見ながら、メニューを作成する方法を学びます。

メニュー
06:54

「app/src/my_modules/shortcut.js」「app/src/js-my/app.shortcut.js」のコードを見ながら、ショートカット操作を追加する方法を学びます。

ショートカット
05:55

本セクションの参考URLなどをまとめたページです。

本セクションの参考ドキュメント
00:10
+
第8章 Electron アプリ作成編 テキストエディタ4
6 Lectures 16:01

「Electron アプリ作成編 テキストエディタ4」についての前置きです。

[章頭] Electron アプリ作成編 テキストエディタ4
00:18

「app/src/js-my/app.filDlg.js」のコードを見ながら、ファイルの読み込み、保存に利用するファイルダイアログの使い方を学びます。

ファイルダイアログ
03:33

「app/src/js-my/app.dAndD.js」「app/src/css/main.css」のコードを見ながら、ファイルのドラッグ&ドロップの使い方を学びます。

ドラッグ&ドロップ
03:09

「app/src/js-my/app.file.js」のコードを見ながら、自動文字コード判定テキスト読み込みの処理方法を学びます。

文字コード自動判定テキスト読み込み
03:29

「app/src/js-my/app.editor.js」「app/src/js-my/app.ui.btn.js」のコードを見ながら、エディターのファイル読み込みや保存、ボタンの処理を学びます。

エディターやボタンの処理
05:29

本セクションの参考URLなどをまとめたページです。

本セクションの参考ドキュメント
00:03
+
第9章 Electron アプリ作成編 WebView
10 Lectures 32:24

「Electron アプリ作成編 WebView」についての前置きです。

[章頭] Electron アプリ作成編 WebView
00:16

本章で作成するアプリが、どのようなアプリなのか紹介します。

Preview 02:45

WebViewを利用して、ウィンドウ内にウェブページを表示します。また、Webブラウザのように、URLを入力してページの内容を変更します。

WebViewの利用
04:50

WebViewに表示したページを、PNGファイルとして保存します。

Webページのキャプチャ
03:54

WebViewに表示したページを、PDFファイルとして保存します。

PDFの作成
04:04

WebViewに表示したページ内の画像や、リンク先の画像を、まとめてダウンロードして保存します。

ページ内の画像をまとめてDL
02:38

WebViewに表示したページ内の画像を、まとめてダウンロードして保存します。その2。

ページ内の画像をまとめてDL2
03:54

WebViewに表示したページ内の画像を、まとめてダウンロードして保存します。その3。

ページ内の画像をまとめてDL3
03:55

WebViewに表示したページ内の画像を、まとめてダウンロードして保存します。その4。

ページ内の画像をまとめてDL4
05:57

本セクションの参考URLなどをまとめたページです。

本セクションの参考ドキュメント
00:11
+
第10章 ドキュメント斜め読み
6 Lectures 11:00

「ドキュメント斜め読み」についての前置きです。

[章頭] ドキュメント斜め読み
00:15

Electron関係の、各種ドキュメントをまずは紹介します。

各種ドキュメント
02:11

ローカルアプリ開発に関係する内容を中心に、node.jsのドキュメントを見ていきます。

node.jsのドキュメント
02:31

ローカルアプリ開発に関係する内容を中心に、Electronのドキュメントを見ていきます。

Electronのドキュメント
03:52

ローカルアプリ開発に関係する内容を中心に、Electronのドキュメントを見ていきます。その2。

Electronのドキュメント2
01:51

本セクションの参考URLなどをまとめたページです。

本セクションの参考ドキュメント
00:20
1 More Section
About the Instructor
柳井 政和
4.3 Average rating
324 Reviews
2,992 Students
6 Courses
ゲーム、アプリケーション開発、書籍の執筆、JavaScript、Java

2002年にクロノス・クラウン合同会社を設立。代表社員。ゲームやアプリケーションの開発、書籍や記事の執筆をおこなう。

秀和システムより「マンガでわかるJavaScript」「マンガでわかるAndroidプログラミング」「マンガでわかるJavaプログラミング」他、技術評論社より「JavaScript 仕事の現場でサッと使える! デザイン教科書」「プログラマのためのコードパズル」を出版。

2001年度のオンラインソフトウェア大賞に「めもりーくりーなー」で入賞。

2016年に第23回松本清張賞の最終候補となり、文藝春秋より「裏切りのプログラム」で小説家デビュー。