Node.js/Framework
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン概論/2024
ソーシャルデザイン演習/2024
情報デザイン論/2024
情報デザイン演習IIA/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*Node.js|Framework
~
**はじめに
フレームワークとは、システム開発時によく利用する機能をあ...
-[[Express>Google:Node.js Express]]:Webアプリ開発のデフ...
-Meteor:フルスタックのJavaScriptプラットフォーム
-[[Electron>Google:Node.js Electron]]:Webの技術でデスク...
-NW.js:Webの技術でデスクトップアプリが手軽に作れる
~
~
**Express でWebサーバー
https://expressjs.com/ja/
npm には様々なパッケージが存在しますが、Expressは 定番Web...
***準備
-適当な場所に webserver フォルダを作って下さい。
-ターミナルでそこへ移動します。
$ cd /Users/XXXX/webserver
~
***プロジェクトの初期化 > package.json の生成
$ npm init
package name: (webserver)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /webserver/package.json:
{
"name": "webserver",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "koichi inoue",
"license": "ISC"
}
Is this ok? (yes) yes
以上で、カレントディレクトリに package.json が生成されま...
~
***Expressのインストール
$ npm install express
このコマンドで、カレントディレクトリに node_modules フォ...
~
***server.js を書いてカレントに保存
静的なファイルをホスティングするコードは以下のとおり、簡...
const express = require("express");
const app = express();
const port=8000;
app.use(express.static('./'));
app.listen(port, ()=> {
console.log('Server running on port:'+port);
});
~
***サンプルページの投入
カレントディレクトリに適当な index.html を投入して下さい。
~
***起動と動作確認
-package.json に起動コード(以下の "start":・・の一行のみ...
:
"scripts": {
"start":"node server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
:
-npmコマンドで起動
$ npm start
Server running on port:8000
-ブラウザでアクセス
http://localhost:8000 にアクセス
''付記'':ディレクトリ内に置いた sample.html にアクセスす...
http://localhost:8000/sample.html でアクセス可能です。
-終了方法等は前述の事例と同様です。
[CTRL]+[C]
~
~
**Express でWebサーバー|Files
前節の説明内容に沿って作成したパッケージを以下に置いてい...
https://github.com/koichi-inoue/NodeJS_WebServer
-1) 緑のボタン [Download.zip] でまるごとダウンロードして...
以下の4つのファイルがあります。
--package.json:npmプロジェクトの管理情報(依存関係の明記)
--package-lock.json:package.jsonに記載の各依存先のリスト
--server.js:サーバーのプログラム
--index.html:配信されるHTMLのサンプル(自由に変更して構...
-2) 展開したフォルダを適当な場所に置いて、ターミナルから...
-3) 必要なパッケージをインストールします。
$ npm install
この操作で、package.json の記述にしたがって、パッケージが...
-4) パッケージを起動します。
$ npm start
すなわち、スクリプトにしたがって node server.js が実行さ...
-5) 以下のように表示されて、サーバーが動きます。
nodejs_webserver@1.0.0 start / [ path to ] /NodeJS_WebSe...
node server.js
Server running on port:8000
-6) ブラウザから以下にアクセスすると、サンプルとして置か...
http://localhost:8000
-7) ターミナルから、以下の操作でサーバーは停止します。
[CTRL]+[C]
~
~
**Electron について
Electron (エレクトロン)は、Web技術でデスクトップアプリケ...
HTML・CSS・JavaScript により、各OSのアプリケーションを同...
~
***特徴
-クロスプラットフォーム型の実行フレームワーク(Mac、Windo...
-Webの技術で作ったものをデスクトップアプリケーション化
-オープンソース(開発元:GitHub)
~
***実用事例
有名なところでは、以下のようなアプリケーションが Electron...
-Slack
-[[Atom]]
-Visual Studio Code (Microsoft)
-Docker GUI
https://github.com/sindresorhus/awesome-electron
~
***参考になる記事
-https://ics.media/entry/7298/
-https://qiita.com/umamichi/items/6ce4f46c1458e89c4cfc
~
~
終了行:
*Node.js|Framework
~
**はじめに
フレームワークとは、システム開発時によく利用する機能をあ...
-[[Express>Google:Node.js Express]]:Webアプリ開発のデフ...
-Meteor:フルスタックのJavaScriptプラットフォーム
-[[Electron>Google:Node.js Electron]]:Webの技術でデスク...
-NW.js:Webの技術でデスクトップアプリが手軽に作れる
~
~
**Express でWebサーバー
https://expressjs.com/ja/
npm には様々なパッケージが存在しますが、Expressは 定番Web...
***準備
-適当な場所に webserver フォルダを作って下さい。
-ターミナルでそこへ移動します。
$ cd /Users/XXXX/webserver
~
***プロジェクトの初期化 > package.json の生成
$ npm init
package name: (webserver)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /webserver/package.json:
{
"name": "webserver",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "koichi inoue",
"license": "ISC"
}
Is this ok? (yes) yes
以上で、カレントディレクトリに package.json が生成されま...
~
***Expressのインストール
$ npm install express
このコマンドで、カレントディレクトリに node_modules フォ...
~
***server.js を書いてカレントに保存
静的なファイルをホスティングするコードは以下のとおり、簡...
const express = require("express");
const app = express();
const port=8000;
app.use(express.static('./'));
app.listen(port, ()=> {
console.log('Server running on port:'+port);
});
~
***サンプルページの投入
カレントディレクトリに適当な index.html を投入して下さい。
~
***起動と動作確認
-package.json に起動コード(以下の "start":・・の一行のみ...
:
"scripts": {
"start":"node server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
:
-npmコマンドで起動
$ npm start
Server running on port:8000
-ブラウザでアクセス
http://localhost:8000 にアクセス
''付記'':ディレクトリ内に置いた sample.html にアクセスす...
http://localhost:8000/sample.html でアクセス可能です。
-終了方法等は前述の事例と同様です。
[CTRL]+[C]
~
~
**Express でWebサーバー|Files
前節の説明内容に沿って作成したパッケージを以下に置いてい...
https://github.com/koichi-inoue/NodeJS_WebServer
-1) 緑のボタン [Download.zip] でまるごとダウンロードして...
以下の4つのファイルがあります。
--package.json:npmプロジェクトの管理情報(依存関係の明記)
--package-lock.json:package.jsonに記載の各依存先のリスト
--server.js:サーバーのプログラム
--index.html:配信されるHTMLのサンプル(自由に変更して構...
-2) 展開したフォルダを適当な場所に置いて、ターミナルから...
-3) 必要なパッケージをインストールします。
$ npm install
この操作で、package.json の記述にしたがって、パッケージが...
-4) パッケージを起動します。
$ npm start
すなわち、スクリプトにしたがって node server.js が実行さ...
-5) 以下のように表示されて、サーバーが動きます。
nodejs_webserver@1.0.0 start / [ path to ] /NodeJS_WebSe...
node server.js
Server running on port:8000
-6) ブラウザから以下にアクセスすると、サンプルとして置か...
http://localhost:8000
-7) ターミナルから、以下の操作でサーバーは停止します。
[CTRL]+[C]
~
~
**Electron について
Electron (エレクトロン)は、Web技術でデスクトップアプリケ...
HTML・CSS・JavaScript により、各OSのアプリケーションを同...
~
***特徴
-クロスプラットフォーム型の実行フレームワーク(Mac、Windo...
-Webの技術で作ったものをデスクトップアプリケーション化
-オープンソース(開発元:GitHub)
~
***実用事例
有名なところでは、以下のようなアプリケーションが Electron...
-Slack
-[[Atom]]
-Visual Studio Code (Microsoft)
-Docker GUI
https://github.com/sindresorhus/awesome-electron
~
***参考になる記事
-https://ics.media/entry/7298/
-https://qiita.com/umamichi/items/6ce4f46c1458e89c4cfc
~
~
ページ名: