
Node.jsとNW.jsで作るJavaScript ローカルアプリ開発講座
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アプリケーションの作成。
このコースでは、以下のようなアプリケーションを作ります。ほとんどのアプリは、ソースコードが100~200行ほどで、容易に理解、改造が行えます。完成したアプリケーションの内容は、このページの下にある、各レクチャーのプレビューで確認可能です。
「ディレクトリ内のファイル一覧」アプリ
ドラッグ&ドロップしたディレクトリの、「ディレクトリ内のファイル一覧」を、表示するアプリです。
Windowsの「送る」にショートカットを保存しておけば、手軽にディレクトリ内のファイル一覧を、テキストファイルとして得ることができます。
「指定ファイルをローカルサーバーで開く」アプリ
HTMLファイルなどをドラッグ&ドロップすると、ローカルサーバーを起動して、ブラウザで開くアプリケーションです。
セキュリティ上の問題(ファイルを読み込むなど)で、Webページにファイルを置いてからWebブラウザで確認することは、Web開発の現場ではよくあります。
そうした際に、手軽にサーバーを起動させて、ローカルのIPアドレスでWebページを確認する。このアプリケーションのショートカットを、Windowsの「送る」に保存しておけば、Explorerの右クリックから、手軽にそうした確認ができるようになります。
「文字コード変換」アプリ
GUI(ウィンドウ、入力欄、ボタン、プルダウンリストなどのユーザーインターフェース)で、文字コードを変換するアプリケーションです。
このアプリケーションは、ファイルを開くダイアログ、ファイルを保存ダイアログを利用するサンプルになっています。
また、ウィンドウへのファイルのドラッグ&ドロップで、読み込むファイルを切り替えるコードのサンプルにもなっています。
「Webアプリに独自機能を追加」アプリ
URL指定でWebアプリを読み込み、保存ボタンなどの独自機能を追加する、アプリケーションのサンプルです。
特定のWebサイトに、機能を追加したい。また、公開済みのWebアプリのローカル版を手軽に作りたい。そうした用途に使える技術です。
ここでは、「画像をセピア調に変換するWebアプリ」に、保存ボタンを外部から挿入して、保存機能を追加します。
「検索順位の自動保存」アプリ
ブラウザを自動操縦して、複数のキーワードの、検索結果の順位を保存するアプリです。
サイトの自動巡回や定期投稿、そうしたアプリケーション作成のひな形にできる、サンプルです。NW.jsでは、こうした自動化ツールを簡単に作れます。
「Webページ画像キャプチャ」アプリ
Webページの、スクリーンショットを撮影するアプリケーションです。
NW.jsには、ブラウザで表示している画面を、手軽に画像として得る機能が備わっています。そうした機能を利用して、ウェブページの画像を定期保存したり、サムネールを作ったりすることが可能です。
受講の際に必要なもの
- 事前の準備は特に必要ありません。
- Windows上に開発環境を構築して、Windows用のローカルアプリケーションを開発します。
こんな方にオススメ
- JavaScriptで、Windows用のローカルアプリケーションを開発したい方。
- 既存のWebアプリを、ローカルアプリケーションにしたい方。
- 手間をかけずに、手軽にPC用アプリケーションを作りたい方。
- Node.js、NW.js(旧node-webkit)を使って、アプリケーションを作りたい方。
JavaScriptは、Webページの作成でよく利用されているプログラミング言語です。この簡単なプログラミング言語、そしてHTML、CSSといった知識を利用して、手軽にWindows向けローカルアプリケーションを作成しましょう!
About the Instructor

2002年にクロノス・クラウン合同会社を設立。代表社員。ゲームやアプリケーションの開発、書籍や記事の執筆を行う。
秀和システムより「マンガでわかるJavaScript」「マンガでわかるAndroidプログラミング」「マンガでわかるJavaプログラミング」他、技術評論社より「JavaScript 仕事の現場でサッと使える! デザイン教科書」「プログラマのためのコードパズル」を出版。
2001年度のオンラインソフトウェア大賞に「めもりーくりーなー」で入賞。
2016年に第23回松本清張賞の最終候補となり、文藝春秋より「裏切りのプログラム」で小説家デビュー。
Course content
Section 1:イントロダクション | ||||
1 | イントロダクション | Preview | 3:09 | |
2 | サンプルコードのダウンロード | 1:00 | ||
3 | ソースコードについて | 0:32 | ||
4 | CUIアプリとGUIアプリの開発 | 2:07 | ||
5 | コマンドプロンプトの起動の仕方 | 1:22 | ||
6 | JavaScriptの基本文法について | 1:09 | ||
Section 2:第2章 CUIアプリ 環境構築編 | ||||
7 | [章頭] CUIアプリ 環境構築編 | 0:25 | ||
8 | node.jsとは | Preview | 1:34 | |
9 | nodistを利用した開発環境の構築 | 2:21 | ||
10 | パスを通す | 2:46 | ||
11 | エラー時の対策 | 1:24 | ||
12 | package.jsonの作成 | 3:20 | ||
13 | モジュールとrequire | 1:53 | ||
14 | npm install | 3:41 | ||
15 | 自作モジュール | 1:44 | ||
Section 3:第3章 CUIアプリ 実行編 | ||||
16 | [章頭] CUIアプリ 実行編 | 0:17 | ||
17 | バッチファイルのテンプレート | 6:26 | ||
18 | hello world | Preview | 1:31 | |
19 | 引数を受け取る | 3:22 | ||
20 | Node.jsを持っていないユーザーへの配布 | 3:26 | ||
Section 4:第4章 Node.js リファレンス編1 パスとファイル | ||||
21 | [章頭] Node.js リファレンス編1 パスとファイル | 0:27 | ||
22 | パス1 - path | 0:55 | ||
23 | パス2 - カレントパスからの相対パスを絶対パスに変換 | 2:57 | ||
24 | パス3 - パスの分解 | 4:33 | ||
25 | ファイル操作1 - fs、Sync | 3:01 | ||
26 | ファイル操作2 - ファイルの存在確認 | 8:37 | ||
27 | ファイル操作2 - ファイルの存在確認2 | 5:47 | ||
28 | ファイル操作3 - ディレクトリ内を走査 | Preview | 4:51 | |
29 | ファイル操作4 - ファイルのコピー | 6:37 | ||
30 | ファイル操作5 - ファイルの削除 | 4:16 | ||
Section 5:第5章 Node.js リファレンス編2 ファイル読み書き、実行 | ||||
31 | [章頭] Node.js リファレンス編2 ファイル読み書き、実行 | 0:30 | ||
32 | テキストファイル1 - 読み込み | 4:56 | ||
33 | テキストファイル2 - 書き込み | 5:04 | ||
34 | バイナリファイル - 読み書き | 4:20 | ||
35 | exe実行1 - exec、execSync | 6:57 | ||
36 | exe実行2 - Windowsコマンド | 3:07 | ||
37 | 文字コード1 - ファイルを変換 | 8:39 | ||
38 | 文字コード2 - exe実行のエラーを変換 | 3:52 | ||
Section 6:第6章 Node.js リファレンス編3 通信 | ||||
39 | [章頭] Node.js リファレンス編3 通信 | 0:33 | ||
40 | ファイルのDL1 - テキストファイル | 4:54 | ||
41 | ファイルのDL2 - 画像 | 3:04 | ||
42 | サーバー化 | 8:16 | ||
Section 7:第7章 Node.js リファレンス編4 その他 | ||||
43 | [章頭] Node.js リファレンス編4 その他 | 0:21 | ||
44 | Node.js を終了 | 1:26 | ||
45 | ZIP1 - ZIPの作成 | 5:20 | ||
46 | ZIP2 - ZIPの展開 | 5:55 | ||
47 | ZIP3 - 7-Zipでの圧縮 | 7:42 | ||
48 | ZIP4 - 7-Zipでの解凍 | 4:28 | ||
Section 8:第8章-1 CUIアプリ アプリ開発編1「ディレクトリ内のファイル一覧」 | ||||
49 | [章頭] CUIアプリ アプリ開発編1「ディレクトリ内のファイル一覧」 | 0:24 | ||
50 | どういったアプリか? | Preview | 1:34 | |
51 | コード解説 | 5:02 | ||
Section 9:第8章-2 CUIアプリ アプリ開発編2「指定ファイルをローカルサーバーで開く」 | ||||
52 | [章頭] CUIアプリ アプリ開発編2「指定ファイルをローカ… | 0:40 | ||
53 | どういったアプリか? | Preview | 1:24 | |
54 | コード解説 | 4:11 | ||
Section 10:第9章 GUIアプリ 開発準備編 | ||||
55 | [章頭] GUIアプリ 開発準備編 | 0:22 | ||
56 | NW.js(旧node-webkit)とは | Preview | 2:42 | |
57 | [補足] 古いNW.jsと、新しいNW.jsの違い | 5:14 | ||
58 | 開発環境の準備 | 2:32 | ||
59 | パスを通す | 4:03 | ||
60 | ファイル構成 | 2:11 | ||
61 | package.jsonの作成 | 3:23 | ||
62 | 開発者ツール | 2:10 | ||
Section 11:第10章 GUIアプリ 実行編 | ||||
63 | [章頭] GUIアプリ 実行編 | 0:21 | ||
64 | hello world | 4:29 | ||
65 | テンプレート1 - ファイル構成 | 3:32 | ||
66 | テンプレート2 - index.js | 8:13 | ||
67 | テンプレート3 - mngOpt.js | 2:27 | ||
68 | テンプレート4 - バッチファイル | 2:07 | ||
69 | ブラウザのデータ | 1:31 | ||
Section 12:第11章 GUIアプリ 配布ファイル作成編 | ||||
70 | [章頭] GUIアプリ 配布ファイル作成編 | 0:25 | ||
71 | 配布ファイルの作成 - 4ステップ | 2:59 | ||
72 | 配布ファイル自動作成 - 使い方 | Preview | 1:35 | |
73 | 配布ファイル自動作成 - コード解説 | 5:45 | ||
74 | 配布ファイル自動作成 - コード解説2 | 4:25 | ||
Section 13:第12章-1 GUIアプリ アプリ開発編1「文字コード変換」 | ||||
75 | [章頭] GUIアプリ アプリ開発編1「文字コード変換」 | 0:21 | ||
76 | どういったアプリか? | Preview | 2:55 | |
77 | 設定ファイル | 1:50 | ||
78 | package.json | 0:55 | ||
79 | index.html | 3:08 | ||
80 | コード解説 | 4:00 | ||
81 | コード解説2 | 6:41 | ||
82 | コード解説3 | 2:55 | ||
83 | コード解説4 | 3:58 | ||
Section 14:第12章-2 GUIアプリ アプリ開発編2「Webアプリに独自機能を追加」 | ||||
84 | [章頭] GUIアプリ アプリ開発編2「Webアプリに独自機能を追加」 | 0:26 | ||
85 | どういったアプリか? | Preview | 1:24 | |
86 | package.json | 1:00 | ||
87 | index.html | 4:17 | ||
88 | コード解説 | 6:47 | ||
Section 15:第12章-3 GUIアプリ アプリ開発編3「検索順位の自動保存」 | ||||
89 | [章頭] GUIアプリ アプリ開発編3「検索順位の自動保存」 | 0:24 | ||
90 | どういったアプリか? | Preview | 3:40 | |
91 | 設定ファイル | 0:52 | ||
92 | package.json | 1:10 | ||
93 | index.html | 1:50 | ||
94 | コード解説 | 6:21 | ||
95 | コード解説2 | 6:40 | ||
96 | コード解説3 | 7:10 | ||
Section 16:第12章-4 GUIアプリ アプリ開発編4「Webページ画像キャプチャ」 | ||||
97 | [章頭] GUIアプリ アプリ開発編4「Webページ画像キャプチャ」 | 0:22 | ||
98 | どういったアプリか? | Preview | 2:25 | |
99 | package.json | 1:21 | ||
100 | index.html | 1:41 | ||
101 | コード解説 | 3:11 | ||
102 | コード解説2 | 3:45 | ||
103 | コード解説3 | 2:24 |