Top Programming Node.jsとNW.jsで作るJavaScript ローカルアプリ開発講座
PRO COURSE

Node.jsとNW.jsで作るJavaScript ローカルアプリ開発講座

Node.jsとNW.js(旧node-webkit)を使って、JavaScriptでWindows用のローカルアプリケーションを手軽に開発する方法を学びます。

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回松本清張賞の最終候補となり、文藝春秋より「裏切りのプログラム」で小説家デビュー。

See more

Course content

Total 5 hours 22 minutes
Preview You can preview lectures with this label
イントロダクション
1 イントロダクション Preview 3:09
2 サンプルコードのダウンロード 1:00
3 ソースコードについて 0:32
4 CUIアプリとGUIアプリの開発 2:07
5 コマンドプロンプトの起動の仕方 1:22
6 JavaScriptの基本文法について 1:09
第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
第3章 CUIアプリ 実行編
16 [章頭] CUIアプリ 実行編 0:17
17 バッチファイルのテンプレート 6:26
18 hello world Preview 1:31
19 引数を受け取る 3:22
20 Node.jsを持っていないユーザーへの配布 3:26
第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
第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
第6章 Node.js リファレンス編3 通信
39 [章頭] Node.js リファレンス編3 通信 0:33
40 ファイルのDL1 - テキストファイル 4:54
41 ファイルのDL2 - 画像 3:04
42 サーバー化 8:16
第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
第8章-1 CUIアプリ アプリ開発編1「ディレクトリ内のファイル一覧」
49 [章頭] CUIアプリ アプリ開発編1「ディレクトリ内のファイル一覧」 0:24
50 どういったアプリか? Preview 1:34
51 コード解説 5:02
第8章-2 CUIアプリ アプリ開発編2「指定ファイルをローカルサーバーで開く」
52 [章頭] CUIアプリ アプリ開発編2「指定ファイルをローカ… 0:40
53 どういったアプリか? Preview 1:24
54 コード解説 4:11
第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
第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
第11章 GUIアプリ 配布ファイル作成編
70 [章頭] GUIアプリ 配布ファイル作成編 0:25
71 配布ファイルの作成 - 4ステップ 2:59
72 配布ファイル自動作成 - 使い方 Preview 1:35
73 配布ファイル自動作成 - コード解説 5:45
74 配布ファイル自動作成 - コード解説2 4:25
第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
第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
第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
第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

Related Courses