
本講座の説明をおこない、おおまかなロードマップを示します。
本講座で出てくるソースコードは、本レクチャーの「ダウンロード可能なリソース」から一括してダウンロードできます(2017-05-31 最新の「sample_code_170531.zip」を追加しました。genApp、wrap_web_appの改良)。
CUIアプリ、GUIアプリとはどのようなものか、そして、それらをどうやって作るかを解説します。
今後よく出てくる、コマンドプロンプトの起動の仕方を、説明しておきます。
本講座は、ある程度JavaScriptの基本文法を知っている方向けの講座です。そのため、JavaScriptの基本文法を、手軽に学ぶ方法を紹介します。
「第2章 CUIアプリ 環境構築編」についての前置きです。
node.jsとは何かという話をします。また、CUIアプリを作る道具として、node.jsをどのように使うかを説明します。また、公式サイトやドキュメントのURLも紹介します。
Windowsで、手軽にnode.jsの開発環境を構築するnodistを利用して、node.jsを導入します。また、公式サイトやドキュメントのURLも紹介します。
node.jsを利用しやすいようにパスを通します。
環境構築でエラーが発生した時の対策を紹介します。
package.jsonの作成の仕方を説明します。また、このファイルの各項目の意味についても解説します。
node.jsのモジュールと、requireを使った呼び出しの仕組みについて学習します。
各種パッケージをインストールする方法を紹介します。グローバルインストールとローカルインストールについて理解して、使いこなせるようになります。
node.jsで、プログラムのファイルを分けたい際に、自作モジュールを使う、簡単な方法を紹介します。
「第3章 CUIアプリ 実行編」についての前置きです。
Windowsで、node.jsをCUIアプリとして使うための、バッチファイルのテンプレートを示します。また、そのプログラムについて解説します。
console.logを利用して、コマンドプロンプトに「hello world」と出力するシンプルなプログラムを書けるようになります。
node.jsのCUIアプリで、引数を受け取る方法を紹介します。バッチファイルに、各種ファイルをドラッグ&ドロップすることで、そのパスを得ることができるようになります。
node.jsの実行ファイルは単一ファイルです。「node.exe+JSのプログラム+バッチファイル」を、ディレクトリに適切に配置することで、単独で実行可能なファイル構成を作ることができます。その方法を紹介します。
「第4章 node.js リファレンス編1 パスとファイル」についての前置きです。
pathモジュールについての概要を説明します。
カレントパスの得方、また、そのパスからの相対パスを、絶対パスに変換する方法を身に付けます。
パスから、ディレクトリ名やファイル名、拡張子などを取り出す方法を身に付けます。
fsモジュールについての概要を説明します。また、非同期関数と、Syncの付く同期関数の違いについて学びます。
ファイルの存在確認方法を学びます。複数あるので、その特製の違いを理解します。
ファイルの存在確認方法を学びます。複数あるので、その特製の違いを理解します。 その2。
ディレクトリ内を走査して、ファイルやサブディレクトリのパスを得る方法を学習します。
ファイルのコピー方法を学びます。簡易な方法と、丁寧な方法を紹介します。
ファイルの削除方法を学びます。
「第5章 node.js リファレンス編2 ファイル読み書き、実行」についての前置きです。
テキストファイルの読み込み方法をマスターします。
テキストファイルの書き込み方法をマスターします。
バイナリファイルの読み書き方法をマスターします。
Windowsのexeファイル(実行ファイル)を、node.jsから引数付きで実行する方法を学びます。
node.jsから、バッチファイルなどで使用するWindowsコマンドを実行する方法を学びます。
テキストファイルの文字コードを、変換する方法を学びます。Windowsでは、ShifJISが主流なので、Windowsでローカルアプリを作る際には、必須の知識になります。
exeファイルやWindowsコマンドを実行した際のエラーをnode.jsでそのまま受け取ると、文字化けします。そのエラーメッセージの文字コードを変換して読み取る方法を学びます。
「第6章 node.js リファレンス編3 通信」についての前置きです。
テキストファイルをダウンロードする方法を学びます。
画像をダウンロードする方法を学びます。
node.jsは、元々サーバーとして動作することを目的とした実行環境です。そのため、サーバーになる機能が備わっています。そのサーバー化の方法を学び、実際にサーバーとして動作させます。
「第7章 node.js リファレンス編4 その他」についての前置きです。
node.js を終了する方法を学びます。プログラムを途中で打ち切りたい時に必要な知識です。
JSZip ver3 への対応についてです。
ZIPファイルの作成について学びます。
ZIPファイルから、ファイルを取り出して展開する方法について学びます。
7-Zipのコマンドライン版を使い、ファイルを圧縮する方法を学びます。
7-Zipのコマンドライン版を使い、ファイルを解凍する方法を学びます。
「第8章-1 CUIアプリ アプリ開発編1 ディレクトリ内のファイル一覧」についての前置きです。
本章で作成するアプリが、どのようなアプリなのか紹介します。引数のディレクトリ内のファイル一覧を、テキストで出力して表示するアプリです。
「ディレクトリ内のファイル一覧」アプリのコード解説です。
「第8章-2 CUIアプリ アプリ開発編2 指定ファイルをローカルサーバーで開く」についての前置きです。
本章で作成するアプリが、どのようなアプリなのか紹介します。実行とともにサーバーを起動して、引数のファイルをサーバー上のファイルとして開くアプリです。
「指定ファイルをローカルサーバーで開く」アプリのコード解説です。
「第9章 GUIアプリ 開発準備編」についての前置きです。
NW.js(旧node-webkit)とは何なのかを学びます。また、その使いどころを紹介します。
古いNW.jsと、新しいNW.jsで、いくつか仕様が異なる点があります。その紹介をおこなっておきます。以降の動画のいくつかの箇所では、この新しい情報に読み換えてください。
NW.jsのファイルをダウンロードして、開発の準備を行います。また、ドキュメントのURLを紹介します。
NW.jsを使いやすくするために、実行ファイルのある場所にパスを通します。
NW.jsでローカルアプリを作成する際に、使いやすいファイル構成を紹介します。
NW.js用のpackage.jsonを作成します。node.jsのpackage.jsonを拡張したものになっています。また、それらの情報がまとまっているURLも紹介します。
NW.jsでデバッグを行うための、開発者ツールを紹介します。
このコースは、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向けローカルアプリケーションを作成しましょう!