はじめに
Pleasanterをバックグラウンドに利用して販売・注文管理システム構築の２回目、今回は環境構築編です。
第一回(構成)
今回の開発ですが、IDEはVisualStudio、言語はC#、フレームワークはASP.Net Core MVCで行います。
必要なもの
- Pleasanterのインストール(またはPleasanterインストール済サーバ)
- VisualStudio等のIDE
1.Pleasanterの導入
何はなくとも、Pleasanterが必須です。
もしPleasanterが使える状態になっていない方は、公式マニュアル：Pleasanterセットアップを確認してセットアップを行ってください。
2.VisualStudioプロジェクトセットアップ
新しいプロジェクトの作成から、ASP.NET Core Webアプリ(Model-View-Controller)を選択します。
プロジェクト名をつけて作成します。今回は"PleasanterPOS"にしております。
フレームワークは、開発時.NET 8.0だったので8.0を使います。9.0でも問題はないと思いますがまだ確認しておりません。
3.TypeScriptコンパイラセットアップ(任意)
私はTypeScriptを使用して開発するため、JavaScriptへのコンパイラをセットアップします。
1.Node.jsをインストール
コンパイルにNode.js及びnpmが必要なので、Node.js公式からインストールしてください。なお構築時の最新環境はv24.11.1でした。
Node.jsを入手→Windowsインストーラー(.msi)をクリックしてダウンロードおよびインストールを行ってください。
2.TypeScriptコンパイラをインストール
コマンドプロンプトで次のコマンドを実行します。
npm install -g typescript
3.tsconfig.jsonファイルの作成
コンパイラが使用する設定ファイルを作成し、プロジェクト配下に配置します。以下はファイルの例です。TypeScriptソースをwwwroot/tsに配置する想定となっています。
{
"compilerOptions": {
"baseUrl": "./wwwroot/ts",
"paths": { "@root/*": [ "./*" ] },
"target": "ES2020",
"module": "ESNext",
"sourceMap": true,
"outDir": "./wwwroot/js",
"strict": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": false,
"moduleResolution": "node",
"skipLibCheck": true
},
"include": [
"./wwwroot/ts/**/*"
]
}
4.webpackをインストールする
TypeScriptを使いやすくするために、webpackを使用します。
プロジェクトフォルダでコマンドプロンプトを開き、次のコマンドを実行します。
npm install --save-dev webpack webpack-cli webpack-dev-server
5. package.jsonを編集する
TypeScriptをビルド時とリリース時でわけてコンパイルできるように、BuildとReleaseの設定を作成します。
以下の通りPackage.jsonにscriptを追加します。
{
"scripts": {
"build": "webpack --mode development",
"release": "webpack --mode=production"
},
"dependencies": {
"npm": "^11.6.4"
},
"devDependencies": {
"webpack": "^5.103.0",
"webpack-cli": "^6.0.1",
"webpack-dev-server": "^5.2.2"
}
}
6.globインストール
webpackで複数のファイルを自動的に抽出するため、パターンにマッチしたファイル名を抽出するパッケージであるglobを次のコマンドでインストールします。
npm install --save-dev glob
7. ts-loaderインストール
TypeScriptをトランスコンパイルするためにts-loaderを次のコマンドでインストールします。
npm install --save-dev ts-loader
8.webppack.config.jsファイルを作成する
webpackのコンパイル設定ファイルを作成します。細かい説明は割愛しますが、以下はwwwroot/ts/配下のIndex.tsを検出して複数エントリを作り、それぞれをTypeScriptからJavaScriptにビルドしてwwwroot/jsに出力する設計となっています。
wwwroot/ts/xxx/Index.tsを作成し、Index.tsに各TypeScriptソースをImportすることでxxx.jsというファイル名のJavaScriptファイルがwwwroot/jsに生成されます。
const path = require('path');
const glob = require('glob');
const webpack = require('webpack');
let entries = {};
glob
.sync("./wwwroot/ts/**/Index.ts", {
ignore: "./wwwroot/ts/**/*.d.ts"
})
.map(function (file) {
const rel = path.relative(path.join(__dirname, 'wwwroot/ts'), file).replace(/\\/g, '/');
const key = rel.replace(/\.ts$/, "").split("/")[0];
entries[key] = path.resolve(__dirname, file);
});
module.exports = (env, argv) => {
const IS_DEVELOPMENT = argv.mode === "development";
const configs = {
devServer: {
index: "Index.html",
port: 9223,
},
entry: entries,
output: {
path: path.join(__dirname, "/wwwroot/js"),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
}
],
},
resolve: {
extensions: [
'.ts', '.js',
],
alias: {
'@root': path.resolve(__dirname, './wwwroot/ts/')
}
}
}
if (IS_DEVELOPMENT) {
configs.devtool = 'source-map';
}
return configs;
};
以上でTypeScriptファイルの設定は終わりです。
4.EntityFrameworkCoreおよびEntityFrameworkCore.SqlServerインストール
プロジェクトにEntityFrameworkCoreと、EntityFrameworkCoreをSqlServerで使用するためのEntityFrameworkCore.SqlServerをインストールします。
ソリューションエクスプローラーからプロジェクトファイルを右クリックし、NuGetパッケージの管理を選択します。
以下二つをインストールします。
- Microsoft.EntityFrameworkCore
- Microsoft.EntityFrameworkCore.SqlServer
5.PlesanterAPIキーの発行
Pleasanterに外部からアクセスするためには、APIキーを発行する必要があります。以下の手順に従い、APIキーを発行してください。
公式マニュアル：APIキーの作成
おわりに
以上で基本的な環境構築は完了です。その他にも必要なパッケージのインストールなどはあるのですが、これらは開発中必要になり次第、その都度行っていきたいと思います。
次回は、いよいよ本格的な開発に入っていきたいと思いますので、よろしくお願いいたします。