Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
実例でわかる JavaScript ローカルアプリ開発講座 Windows版 node.js NW.js
Rating: 3.9 out of 5(165 ratings)
2,768 students
Created by柳井 政和
Last updated 8/2023
Japanese

What you'll learn

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

Course content

16 sections103 lectures5h 23m total length
  • イントロダクション3:09

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

  • ソースコードについて0:31

    本講座で出てくるソースコードは、本レクチャーの「ダウンロード可能なリソース」から一括してダウンロードできます(2017-05-31 最新の「sample_code_170531.zip」を追加しました。genApp、wrap_web_appの改良)。

  • CUIアプリとGUIアプリの開発2:07

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

  • コマンドプロンプトの起動の仕方1:22

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

  • JavaScriptの基本文法について1:09

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

Requirements

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

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

Who this course is for:

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