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

JavaScriptとnode.js、NW.jsを使用して、Windows向けローカルアプリケーションを簡単に開発する方法を学びます。

  • Overview
  • Curriculum
  • Instructor
  • Review

Brief Summary

このコースでは、JavaScriptを利用してWindows用のローカルアプリケーションを作るための基礎を学びます。node.jsやNW.jsの使い方から、CUIやGUIアプリの開発方法まで、実践的な内容が詰まっています!

Key Points

  • node.jsとNW.jsを使ってアプリケーション開発
  • CUIとGUIアプリケーションの作成方法
  • Windows環境での開発環境構築
  • ファイルアクセスの基本を学ぶ
  • サンプルコードが全てダウンロード可能

Learning Outcomes

  • Windowsでアプリ開発環境を作れるようになる
  • 配布可能なローカルアプリケーションを作成できるようになる
  • JavaScriptを使ってCUIアプリを開発できるようになる
  • HTMLとJavaScriptでGUIアプリを開発できるようになる
  • ファイルアクセスなどのスキルを習得する

About This Course

node.jsとNW.js(旧node-webkit)を使い、JavaScriptで、Windows用のローカルアプリケーション(CUI、GUIアプリ)を作ろう!

 このコースは、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向けローカルアプリケーションを作成しましょう!

  • HTML+JavaScript+CSSを利用した、Windows用ローカルアプリケーションの開発。

  • 開発したアプリケーションを、他人に配布するためのファイルの作成。

  • ローカルアプリケーション開発に必要な処理(ファイルアクセス、テキスト、バイナリの読み書き、EXEファイルの実行、通信、ZIPファイルの操作など)。

Course Curriculum

3 Lectures

3 Lectures

Instructor

Profile photo of 柳井 政和
柳井 政和

2002年にクロノス・クラウン合同会社を設立。代表社員。ゲームやアプリケーションの開発、書籍や記事の執筆をおこなう。SBクリエイティブより「JavaScript[完全]入門」、MdNコーポレーションより「プロフェッショナルWebプログラミング JavaScript」、秀和システムより「マンガでわかるJavaScript」「マンガでわかるAndroidプログラミング」「マンガでわかるJavaプログラミング」他、技術評論社より「JavaScript 仕事の現場でサッと使える! デザイン教科書」「プログラマのためのコードパズル」を出版。2001年度のオンラインソフトウェア大賞に「めもりーくりーなー」で入賞。2016年に第23回松本清張賞の最終候補となり、文藝春秋より「裏切りのプログラム」で小説家デビュー。2018年に新潮社より「レトロゲームファクトリー」を出版。

Review
4.9 course rating
4K ratings
ui-avatar of 早山和弥
早山和弥
1.5
1 year ago

他の講師の方々が、一緒にコーディングを行いながら、
作る過程を含めて説明をしているのに比べると、
出来合いのコードを読み上げるだけであり、
何のために動画として提供しているのかが正直わかりませんでした。
(すでに参考書を出版されているようなので、
 なおのこと、わざわざ動画を作らなくてもいいのでは?と思ってしまいます。)

また、アップデートに対する更新もやっつけであり、
最後の2サンプルはまともに動作すらしないのが残念でした。

とても良い題材を扱っているだけに、
惜しい部分が多いと思いました。

  • Helpful
  • Not helpful
ui-avatar of Naoto Tanuki
Naoto T.
1.5
1 year ago

実質ラジオ放送です。
初学者にいちばん面倒な環境設定のところ、例えばソフトウェアをダウンロードしてくる説明など、ただ文字列と口頭でだけでスクリーンショットや画面が皆無で分かりにくい。
他の講師の方々の様々な講義も受けていると大変失礼ながら手抜き感が否めない。文字だけのホームページを読み上げてもらっているだけに感じてしまう。内容は決して悪くないし講師のお声も良いのにもったいない。ラジオ代わりの聞き流し復習には良い。

  • Helpful
  • Not helpful
ui-avatar of 大平 洸
大平 �.
3.0
1 year ago

良かった点
・完成したサンプルファイルがある
・内容が難しすぎない
・説明がゆっくりで聞き取りやすい
悪かった点
・動画がぶつ切りすぎる
・抑揚が少ない
・なぜそのコードが必要なのかの説明が少ない

  • Helpful
  • Not helpful
ui-avatar of 伊藤 孝徳
伊藤 �.
5.0
2 years ago

内容は,難しすぎず,簡単すぎず,自分にとってはちょうどいい感じ.
説明がゆっくりなので,ついていけないということもなかった.

  • Helpful
  • Not helpful
ui-avatar of Saitoh _t
Saitoh _.
3.0
2 years ago

ところどころ字幕に誤りがあります。

  • Helpful
  • Not helpful
ui-avatar of 浮間五郎
浮間五郎
1.5
4 years ago

話が棒読み、かつブツ切りでとても聞きにくい。解説画面も飛び飛びで繋がりが分かりづらい。

  • Helpful
  • Not helpful
ui-avatar of 佐々木 栄一
佐々木 �.
5.0
5 years ago

ファイル名の取得について、同期・非同期のパターンを説明してもらった点が非常に良かった。

  • Helpful
  • Not helpful
ui-avatar of 大久保 仁人
大久保 �.
4.5
5 years ago

node.jsの使い方を一からサンプル付きで教えてくれるため、とても勉強になります。
まだ修了してはいませんが想像以上に分かりやすく技術を教えてくれています。

  • Helpful
  • Not helpful
ui-avatar of junichi matsuo
Junichi M.
2.5
5 years ago

環境構築の説明はもう少し丁寧にやったほうがいいと思います

  • Helpful
  • Not helpful
ui-avatar of 河盛和行
河盛和行
5.0
5 years ago

2倍速で見て丁度いい!

  • Helpful
  • Not helpful
Leave A Reply

Your email address will not be published. Required fields are marked *

Ratings

Courses You May Like

Lorem ipsum dolor sit amet elit
Show More Courses