実例でわかる JavaScript ローカルアプリ開発講座 Windows版 node.js NW.js

node.jsとNW.js(旧node-webkit)を使い、JavaScriptで、Windows用のローカルアプリケーション(CUI、GUIアプリ)を作ろう!
4.4 (23 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.
252 students enrolled
$19
$85
78% off
Take This Course
  • Lectures 101
  • Length 5.5 hours
  • Skill Level Intermediate Level
  • Languages Japanese
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2016 Japanese

Course Description

 このコースは、Webページ作成の知識を利用して、JavaScriptで、Windows用のローカルアプリケーションを、手軽に開発する方法を網羅しています。

 node.js、NW.js(旧node-webkit)をWindows環境で使いこなし、アプリケーション開発を行うために必要な知識と、豊富な作例をまとめています。

 このコースを習得すれば、次のような事ができるようになります。

- Windowsでの開発環境の構築。

- 配布可能なアプリケーションの作成。

- node.js、NW.jsの利用。

- ファイルアクセスなど、ローカルアプリケーション開発に必要な知識の習得。

- JavaScriptとnode.jsを利用した、Windows用CUIアプリケーションの作成。

- HTML、JavaScript、NW.jsを利用した、Windows用GUIアプリケーションの作成。

 コースで紹介されるコードは、サンプルコードとして、全てダウンロードすることができます。

 本講座では、Windowsでの開発環境の構築からはじめ、ファイルアクセスなど、ローカルアプリケーション開発に必要な知識を学び、配布可能なアプリケーションを作成するまでをマスターします。

‥‥‥‥‥‥‥‥‥‥

 このコースは、以下のように進みます。

● CUIアプリの準備(node.js)

 ・node.jsの紹介、導入、使い方。

● node.jsのリファレンス

 ・パスとファイル。ファイル読み書き、実行。通信。その他(ZIPの読み書き)。

● CUIアプリの開発

 ・「ディレクトリ内のファイル一覧」アプリ

 ・「指定ファイルをローカルサーバーで開く」アプリ

● GUIアプリの準備(NW.js)

 ・NW.jsの紹介、導入、使い方。配布ファイルの作り方。

● GUIアプリの開発

 ・「文字コード変換」アプリ

 ・「Webアプリに独自機能を追加」アプリ

 ・「検索順位の自動保存」アプリ

 ・「Webページ画像キャプチャ」アプリ

‥‥‥‥‥‥‥‥‥‥

 このコースでは、以下のようなアプリケーションを作ります。ほとんどのアプリは、ソースコードが100~200行ほどで、容易に理解、改造が行えます。

 各アプリケーションの動作は、無料プレビューで確認可能です。

●「ディレクトリ内のファイル一覧」アプリ

 ドラッグ&ドロップしたディレクトリの、「ディレクトリ内のファイル一覧」を、表示するアプリです。

 Windowsの「送る」にショートカットを保存しておけば、手軽にディレクトリ内のファイル一覧を、テキストファイルとして得ることができます。

●「指定ファイルをローカルサーバーで開く」アプリ

 HTMLファイルなどをドラッグ&ドロップすると、ローカルサーバーを起動して、ブラウザで開くアプリケーションです。

 セキュリティ上の問題(ファイルを読み込むなど)で、Webページにファイルを置いてからWebブラウザで確認することは、Web開発の現場ではよくあります。

 そうした際に、手軽にサーバーを起動させて、ローカルのIPアドレスでWebページを確認する。このアプリケーションのショートカットを、Windowsの「送る」に保存しておけば、Explorerの右クリックから、手軽にそうした確認ができるようになります。

●「文字コード変換」アプリ

 GUI(ウィンドウ、入力欄、ボタン、プルダウンリストなどのユーザーインターフェース)で、文字コードを変換するアプリケーションです。

 このアプリケーションは、ファイルを開くダイアログ、ファイルを保存ダイアログを利用するサンプルになっています。

 また、ウィンドウへのファイルのドラッグ&ドロップで、読み込むファイルを切り替えるコードのサンプルにもなっています。

●「Webアプリに独自機能を追加」アプリ

 URL指定でWebアプリを読み込み、保存ボタンなどの独自機能を追加する、アプリケーションのサンプルです。

 特定のWebサイトに、機能を追加したい。また、公開済みのWebアプリのローカル版を手軽に作りたい。そうした用途に使える技術です。

 ここでは、「画像をセピア調に変換するWebアプリ」に、保存ボタンを外部から挿入して、保存機能を追加します。

●「検索順位の自動保存」アプリ

 ブラウザを自動操縦して、複数のキーワードの、検索結果の順位を保存するアプリです。

 サイトの自動巡回や定期投稿、そうしたアプリケーション作成のひな形にできる、サンプルです。NW.jsでは、こうした自動化ツールを簡単に作れます。

●「Webページ画像キャプチャ」アプリ

 Webページの、スクリーンショットを撮影するアプリケーションです。

 NW.jsには、ブラウザで表示している画面を、手軽に画像として得る機能が備わっています。そうした機能を利用して、ウェブページの画像を定期保存したり、サムネールを作ったりすることが可能です。

‥‥‥‥‥‥‥‥‥‥

 JavaScriptは、Webページの作成でよく利用されているプログラミング言語です。この簡単なプログラミング言語、そしてHTML、CSSといった知識を利用して、手軽にWindows向けローカルアプリケーションを作成しましょう!

What are the requirements?

  • 事前の準備は特に必要ありません。
  • Windows上に開発環境を構築して、Windows用のローカルアプリケーションを開発します。

What am I going to get from this course?

  • HTML+JavaScript+CSSを利用した、Windows用ローカルアプリケーションの開発。
  • 開発したアプリケーションを、他人に配布するためのファイルの作成。
  • ローカルアプリケーション開発に必要な処理(ファイルアクセス、テキスト、バイナリの読み書き、EXEファイルの実行、通信、ZIPファイルの操作など)。

What is the target audience?

  • JavaScriptで、Windows用のローカルアプリケーションを開発したい方。
  • 既存のWebアプリを、ローカルアプリケーションにしたい方。
  • 手間をかけずに、手軽にPC用アプリケーションを作りたい方。
  • node.js、NW.js(旧node-webkit)を使って、アプリケーションを作りたい方。

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: 第1章 イントロダクション
03:09

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

00:31

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

02:07

CUIアプリ、GUIアプリとはどのようなものか、そして、それらをどうやって作るかを解説します。

01:22

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

01:09

本講座は、ある程度JavaScriptの基本文法を知っている方向けの講座です。そのため、JavaScriptの基本文法を、手軽に学ぶ方法を紹介します。

Section 2: 第2章 CUIアプリ 環境構築編
00:25

「第2章 CUIアプリ 環境構築編」についての前置きです。

01:34

node.jsとは何かという話をします。また、CUIアプリを作る道具として、node.jsをどのように使うかを説明します。また、公式サイトやドキュメントのURLも紹介します。

02:20

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

02:46

node.jsを利用しやすいようにパスを通します。

01:24

環境構築でエラーが発生した時の対策を紹介します。

03:19

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

01:53

node.jsのモジュールと、requireを使った呼び出しの仕組みについて学習します。

03:41

各種パッケージをインストールする方法を紹介します。グローバルインストールとローカルインストールについて理解して、使いこなせるようになります。

01:44

node.jsで、プログラムのファイルを分けたい際に、自作モジュールを使う、簡単な方法を紹介します。

Section 3: 第3章 CUIアプリ 実行編
00:17

「第3章 CUIアプリ 実行編」についての前置きです。

06:26

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

01:31

console.logを利用して、コマンドプロンプトに「hello world」と出力するシンプルなプログラムを書けるようになります。

03:22

node.jsのCUIアプリで、引数を受け取る方法を紹介します。バッチファイルに、各種ファイルをドラッグ&ドロップすることで、そのパスを得ることができるようになります。

03:25

node.jsの実行ファイルは単一ファイルです。「node.exe+JSのプログラム+バッチファイル」を、ディレクトリに適切に配置することで、単独で実行可能なファイル構成を作ることができます。その方法を紹介します。

Section 4: 第4章 node.js リファレンス編1 パスとファイル
00:27

「第4章 node.js リファレンス編1 パスとファイル」についての前置きです。

00:55

pathモジュールについての概要を説明します。

02:56

カレントパスの得方、また、そのパスからの相対パスを、絶対パスに変換する方法を身に付けます。

04:33

パスから、ディレクトリ名やファイル名、拡張子などを取り出す方法を身に付けます。

03:01

fsモジュールについての概要を説明します。また、非同期関数と、Syncの付く同期関数の違いについて学びます。

08:37

ファイルの存在確認方法を学びます。複数あるので、その特製の違いを理解します。

05:47

ファイルの存在確認方法を学びます。複数あるので、その特製の違いを理解します。 その2。

04:51

ディレクトリ内を走査して、ファイルやサブディレクトリのパスを得る方法を学習します。

06:36

ファイルのコピー方法を学びます。簡易な方法と、丁寧な方法を紹介します。

04:15

ファイルの削除方法を学びます。

Section 5: 第5章 node.js リファレンス編2 ファイル読み書き、実行
00:30

「第5章 node.js リファレンス編2 ファイル読み書き、実行」についての前置きです。

04:56

テキストファイルの読み込み方法をマスターします。

05:03

テキストファイルの書き込み方法をマスターします。

04:20

バイナリファイルの読み書き方法をマスターします。

06:56

Windowsのexeファイル(実行ファイル)を、node.jsから引数付きで実行する方法を学びます。

03:06

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

08:38

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

03:51

exeファイルやWindowsコマンドを実行した際のエラーをnode.jsでそのまま受け取ると、文字化けします。そのエラーメッセージの文字コードを変換して読み取る方法を学びます。

Section 6: 第6章 node.js リファレンス編3 通信
00:33

「第6章 node.js リファレンス編3 通信」についての前置きです。

04:54

テキストファイルをダウンロードする方法を学びます。

03:04

画像をダウンロードする方法を学びます。

08:15

node.jsは、元々サーバーとして動作することを目的とした実行環境です。そのため、サーバーになる機能が備わっています。そのサーバー化の方法を学び、実際にサーバーとして動作させます。

Section 7: 第7章 node.js リファレンス編4 その他
00:20

「第7章 node.js リファレンス編4 その他」についての前置きです。

01:26

node.js を終了する方法を学びます。プログラムを途中で打ち切りたい時に必要な知識です。

05:20

ZIPファイルの作成について学びます。

05:54

ZIPファイルから、ファイルを取り出して展開する方法について学びます。

07:42

7-Zipのコマンドライン版を使い、ファイルを圧縮する方法を学びます。

04:28

7-Zipのコマンドライン版を使い、ファイルを解凍する方法を学びます。

Section 8: 第8章-1 CUIアプリ アプリ開発編1「ディレクトリ内のファイル一覧」
00:23

「第8章-1 CUIアプリ アプリ開発編1 ディレクトリ内のファイル一覧」についての前置きです。

01:34

本章で作成するアプリが、どのようなアプリなのか紹介します。引数のディレクトリ内のファイル一覧を、テキストで出力して表示するアプリです。

05:02

「ディレクトリ内のファイル一覧」アプリのコード解説です。

Section 9: 第8章-2 CUIアプリ アプリ開発編2「指定ファイルをローカルサーバーで開く」
00:40

「第8章-2 CUIアプリ アプリ開発編2 指定ファイルをローカルサーバーで開く」についての前置きです。

01:23

本章で作成するアプリが、どのようなアプリなのか紹介します。実行とともにサーバーを起動して、引数のファイルをサーバー上のファイルとして開くアプリです。

04:11

「指定ファイルをローカルサーバーで開く」アプリのコード解説です。

Section 10: 第9章 GUIアプリ 開発準備編
00:21

「第9章 GUIアプリ 開発準備編」についての前置きです。

02:41

NW.js(旧node-webkit)とは何なのかを学びます。また、その使いどころを紹介します。

02:31

NW.jsのファイルをダウンロードして、開発の準備を行います。また、ドキュメントのURLを紹介します。

04:02

NW.jsを使いやすくするために、実行ファイルのある場所にパスを通します。

02:11

NW.jsでローカルアプリを作成する際に、使いやすいファイル構成を紹介します。

03:23

NW.js用のpackage.jsonを作成します。node.jsのpackage.jsonを拡張したものになっています。また、それらの情報がまとまっているURLも紹介します。

02:10

NW.jsでデバッグを行うための、開発者ツールを紹介します。

Section 11: 第10章 GUIアプリ 実行編
00:20

「第10章 GUIアプリ 実行編」についての前置きです。

04:29

NW.jsを利用して、GUIでの情報表示を行えるようになります。

03:32

NW.jsを利用したGUIアプリのテンプレートを作成していきます。まずは、そのファイル構成を紹介します。

08:13

NW.jsを利用したGUIアプリのテンプレートを作成していきます。今回は、index.jsのプログラムを解説します。

02:27

NW.jsを利用したGUIアプリのテンプレートを作成していきます。今回は、mngOpt.jsのプログラムを解説します。

02:07

NW.jsを利用したGUIアプリのテンプレートを作成していきます。今回は、バッチファイルの内容を紹介します。

01:31

NW.jsは、ブラウザを内部に持っています。そのブラウザのキャッシュや設定が、どこに保存されるかを解説します。

Section 12: 第11章 GUIアプリ 配布ファイル作成編
00:25

「第10章 GUIアプリ 配布ファイル作成編」についての前置きです。

02:59

NW.jsで配布ファイルを作る4ステップ「ZIP化、リネーム、ファイルのコピー、結合」を学びます。

01:35

NW.jsを利用したGUIアプリから、自動で配布ファイルを作成する、CUIアプリの使い方を紹介します。

05:45

NW.jsを利用したGUIアプリから、自動で配布ファイルを作成する、CUIアプリのコードを紹介します。

04:25

NW.jsを利用したGUIアプリから、自動で配布ファイルを作成する、CUIアプリのコードを紹介します。その2。

Section 13: 第12章-1 GUIアプリ アプリ開発編1「文字コード変換」
00:21

「第12章-1 GUIアプリ アプリ開発編1 文字コード変換」についての前置きです。

02:54

本章で作成するアプリが、どのようなアプリなのか紹介します。ファイルダイアログを使ったファイルの読み込みや保存、ドラッグ&ドロップによるパスの読み取りを行い、テキストファイルの文字コードを変換します。

01:50

本章のアプリの設定ファイルについて紹介します。

00:55

本章のアプリのpackage.jsonについて紹介します。

03:08

本章のアプリのindex.htmlについて紹介します。

04:00

「文字コード変換」アプリのコードを解説します。

06:41

「文字コード変換」アプリのコードを解説します。その2。

02:55

「文字コード変換」アプリのコードを解説します。その3。

03:58

「文字コード変換」アプリのコードを解説します。その4。

Section 14: 第12章-2 GUIアプリ アプリ開発編2「Webアプリに独自機能を追加」
00:26

「第12章-2 GUIアプリ アプリ開発編2 Webアプリに独自機能を追加」についての前置きです。

01:24

本章で作成するアプリが、どのようなアプリなのか紹介します。画像をドラッグ&ドロップして、セピア調に変換するWebアプリに、ファイルを保存するボタンを追加します。また、保存機能も実装します。

01:00

本章のアプリのpackage.jsonについて紹介します。

04:16

本章のアプリのindex.htmlについて紹介します。

06:47

本章のアプリのコードを解説します。

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

柳井 政和, ゲーム、アプリケーション開発 書籍の執筆 Java JavaScript

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

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

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

Ready to start learning?
Take This Course