カテゴリー
Angular TypeScript

Angular で Material Design を使用する

Material Design はGoogleが提唱しているデザインフォーマットです。オープンソースで提供されています。Angular も Google が提唱している SPA フレームワークですので、Angular から簡単に Material Design を使用してみましょう。

1. Angular Material, Angular CDK, Angular Animations をインストールする。

以下のNPMからサクッとインストールします。


npm install --save @angular/material @angular/cdk @angular/animations

2. Material Icon を表示する方法

2.1. app.module.ts を修正して MatIconModule を import する

以下を先頭に追加します。


import {MatIconModule} from '@angular/material/icon';

imports の中に MatIconModule を追加します。


@NgModule({
    ... 省略 ...
  ],
  imports: [
    ... 省略 ...
    MatIconModule
    ... 省略 ...
})

2.2. index.html の中に Material Icon 用のstylesheet を追加します。


<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2.3. 表示したい箇所にMaterial Icon のHTMLを追加します。


<mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>

こんな風に表示されたら成功です。

3. ボタンを表示する方法

3.1. app.module.ts を修正して MatButtonModule を import する

以下を先頭に追加します。


import {MatButtonModule} from '@angular/material/button';

imports の中に MatButtonModule を追加します。


@NgModule({
    ... 省略 ...
  ],
  imports: [
    ... 省略 ...
    MatButtonModule
    ... 省略 ...
})

3.2. Material Design のテーマCSS をインポートします。

https://material.angular.io/guide/theming

例えばですが、style.css に以下を追加します。


@import '@angular/material/prebuilt-themes/indigo-pink.css';

3.3. 表示したい箇所にMaterial Button のHTMLを追加します。


<button mat-button>Basic</button>
<button mat-button color="primary">Primary</button>
<button mat-button color="accent">Accent</button>
<button mat-button color="warn">Warn</button>
<button mat-button disabled>Disabled</button>

こんな風に表示されたら成功です。

4. ラジオボタンを表示する方法

4.1. app.module.ts を修正して MatButtonModule を import する

以下を先頭に追加します。


import {MatRadioModule} from '@angular/material/radio';

imports の中に MatRadioModule を追加します。


@NgModule({
    ... 省略 ...
  ],
  imports: [
    ... 省略 ...
    MatRadioModule
    ... 省略 ...
})

4.2. 表示したい箇所にMaterial Button のHTMLを追加します。


<mat-radio-group aria-label="Select an option">
  <mat-radio-button value="1">Option 1</mat-radio-button>
  <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>

こんな風に表示されたら成功です。

カテゴリー
RPA 仕事効率化

RPAを導入する前にやる、業務効率改善検討の進め方

RPAすごく流行ってますね。PC作業が自動化されれば確かに作業効率が上がり、本来やるべき仕事に集中できますので、導入したくなりますよね。

ただし、その前に、どの業務に対してRPAが導入できるのか、そもそも本当にRPAがベストなのか、検討が必要です。そこで、RPAを導入する前にやるべき業務効率改善検討の進め方を紹介します。

1. そもそも、効率を改善する対象の業務とは?

RPAはRobotic Process Automation という名のとおり、PC操作やプログラム実行を自動化するロボットです。なので、新規プロジェクトの業務を行うためのシステムではありません。新規プロジェクトの業務であれば、その業務専用のアプリケーションを開発するはずですが、RPAはそのようなシステムではありません。

そのため、RPAが活躍する場所は、現在定常的に行っていて、かつ比較的単純な業務になります。

2. 効率改善を検討する部門および対象者を選定する。

だれの業務効率を改善させるのか、対象者を選定します。最初は、部門全体でなく、人にスポットを当てて検討を進めると、進みやすいかもしれません。

3. 改善検討チームを発足させる

対象者が決まったら、改善検討を行うチームを発足させます。対象者から業務内容をヒアリングしても、実際にどうしたら効率が上がるのか検討が出来ないと意味がありません。そのため、対象者の業務を熟知している人が必要です。

改善検討チームには、対象者の上司または業務内容を熟知している人が必須です。それ以外にも、システム化を検討する情報システム部門担当者が必要です。別の視点からも検討できるよう、他部門の担当者が居てもいいかもしれません。

4. 対象者から業務リストを提供してもらう

対象者がどのような業務を行っているのか、知る必要があります。ここで出してもらう情報は以下のとおりです。

  • (1)作業内容および手順
  • (2)作業完了までの平均時間
  • (3)その作業にかかる人数
  • (4)作業を実施する頻度と回数(毎週1回、など)

5. 改善検討チームにて、改善策を検討する。

業務改善策を検討しますが、ねらい目は 年間で多くの作業時間をかけている業務です。3時間かかるけど年1回しかやらない業務より、毎月2時間かかっている業務の方が、年間ののべ作業時間は多くなりますよね。そのような、年間ののべ作業時間が多い業務がねらい目です。なぜなら、RPAは年間ライセンスが多いので、1年間にどれだけの工数が削減できるかが重要になります。

検討した結果、本当に必要なシステムはRPAではない可能性もあります。実はEXCELのテンプレートがあるだけで良かったり、社内CMSを構築して問合せ数を減らす方が効果があるかもしれません。RPAに囚われず、本当に効果があるシステムは何なのか、検討しましょう。

6. 改善施策(案)を対象者とレビューし、対策を実施する。

改善施策を対象者とレビューすることで、本当に改善ができるのか、実際に業務を行う人が無理のない内容になっているか、確認します。その結果、改善後の内容で問題ないというものに対して、実際に対策を行っていきます。

7. 改善後の方法で業務を行い、効果を測定して改善検討チームへフィードバックする

実際にどれだけの効果が出たのか、改善検討チームにフィードバックしましょう。どれくらいのコストをかけて、年間でどれくらいの工数が削減できるのか、分析していきましょう。

8. 一連の内容をまとめ、全社展開する

一通り分析が完了したら、分析結果を全社に展開しましょう。他部門の誰かの目にとまり、自分の部署でも適用できそうだと分かれば、水平展開ができるかもしれません。同じシステムが使える業務が増えれば、コストメリットも上がります。他部門の上司から声がかかれば、自分の評価アップにもつながるかもしれません。

9. 次の対象者を選定して改善検討をおこなう。

これ以後は繰り返しです。このような業務分析は1回サイクルを回しただけでは終わりません。何度も改善検討を行い、結果を蓄積して全社展開を繰り返しましょう。そうすることで、年間でかなりの工数削減ができるかもしれません。

カテゴリー
Angular TypeScript

Angular で SPAの開発を始めよう

Angular はSPAフレームワークの1つです。よくReact や Vue.js と比較されます。Angular の特徴は、Typescriptで記述できることや、パッケージの導入により開発を進められることです。

Angular での開発の始め方

1. Angular CLI のインストールとひな形ソースの作成


npm i -g @angular/cli

でインストールできます。

そのあと、SPAアプリケーションのひな形を生成します。今回は app1 というアプリケーション名でひな形を作成します。


ng new app1

ルーティングを使用するかどうか聞かれますので、 y または N を入力します。


? Would you like to add Angular routing? (y/N) 

使用するスタイルシートフォーマットを選択します。十字キーの上や下で選択し、エンターキーを押します。


? Which stylesheet format would you like to use? (Use arrow keys)
>  CSS
  SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ]
  Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html       ]
  Less   [ http://lesscss.org                                                 ]
  Stylus [ http://stylus-lang.com                                             ]

app1 フォルダに移動します。


cd app1

テスト用httpサーバーを起動します。


ng serve

正常に処理が終われば、以下のように表示されます。


** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2019-04-02T03:12:16.952Z
Hash: b3a0c7750e80c3ca761e
Time: 25170ms
chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial] [rendered]
chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.76 MB [initial] [rendered]
i 「wdm」: Compiled successfully.

http://localhost:4200/にアクセスします。

このように表示されるはずです。

2. コンポーネントの作成方法

Angular ではコンポーネント単位に開発を行います。コンポーネントは独自のHTMLタグで呼び出しができるようになります。

以下の例では、 component1 というコンポーネントを作成します。


ng generate component component1

以下のように表示されるはずです。


CREATE src/app/component1/component1.component.html (29 bytes)
CREATE src/app/component1/component1.component.spec.ts (656 bytes)
CREATE src/app/component1/component1.component.ts (285 bytes)
CREATE src/app/component1/component1.component.css (0 bytes)
UPDATE src/app/app.module.ts (491 bytes)

src/app/component1/component1.component.ts ファイルには以下のように作成されています。


import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html',
  styleUrls: ['./component1.component.css']
})
export class Component1Component implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

この中の selector がHTMLタグになります。

src/app/app.component.html の末尾に以下を追記します。


<app-component1></app-component1>

component1 works! と表示されていれば、成功です。

以下にチュートリアルがあります。

https://angular.jp/tutorial

Angular Material という、Material UI のAngularコンポーネントが用意されています。

https://material.angular.io/

カテゴリー
TypeScript

Visual Studio Code ライクなテキストエディタJavascriptモジュール monaco-editor

Visual Studio Code かなり便利ですよね。自動補完できますし。VSCodeによく似たエディタでJavascriptのモジュールである monaco-editor を紹介します。

1. NPMパッケージ

https://www.npmjs.com/package/monaco-editor

インストール方法は以下のとおりです。


npm install monaco-editor

2. サンプルソースコードの実行方法

以下のとおりコマンドを実行して、monaco-editor のモジュールとサンプルソースコードをインストールしてください。


git clone https://github.com/Microsoft/monaco-editor-samples.git
cd monaco-editor-samples
npm install 
npm run simpleserver

http://localhost:8888にアクセスします。

browser-amd-editorにアクセスすると、VSCodeライクなテキストエディタが表示されます。

インテリセンスもばっちりです。

ダウンロードしたソースコードを見ると分かりますが、 script タグ内でプログラム言語が定義されています。

サンプルソースのgithubリポジトリは以下にあります。

https://github.com/Microsoft/monaco-editor-samples/

3. 差分表示

差分表示もできるようです。

browser-amd-diff-editorにアクセスして表示できます。

4. Electron

Electronで使用するサンプルも electron-amd の中に含まれています。
Electron をインストールして、以下のコマンドで表示できます。


electron.cmd electron-amd\main.js

5. Angular 用コンポーネント

ngx-monaco-editorというNPMモジュールがあります。

https://github.com/atularen/ngx-monaco-editor

まだ使ったことないので、使ってみたらブログに残します。

カテゴリー
仕事効率化

思考を書き残すことのメリット

最近は、自分の頭の中に思い浮かんだことや熟考している過程を、テキストに残すようにしています。なぜこんなことをしているのか紹介します。

1. 以前考えたことを忘れないようにするため

自分は結構忘れっぽい性格で、プログラムの実装方法や参考にしたサイトなど、数週間も経てばすぐに忘れてしまいます。それだけならまだしも、一度考えたことをまたもう一度考えるなど、思考の繰り返しを行うこともあります。これでは、効率的に成長できませんので、考えたことを日単位でテキストファイルに書き込み、たまに読み返すということを行なっています。そうすることで、以前の失敗原因と解決方法など復習ができて、効率よく自分の実になります。

2. 自分がどんな思考過程を辿って結論を得たのか分かる、自分の思考を俯瞰できる

頭の中だけで考えたときの思考スピードはかなり早いです。判断材料の洗い出しや判断基準、結論を出すまでの時間はあまりかかりません。ただし、早すぎることも問題で、結論に至った要因や、前提条件、ある条件のときはこうするべき、など、細かいポイントを忘れがちです。なぜこの結論に至ったのか忘れてしまうと、いざというときに説得力に欠けるだけでなく、もう一度考えないといけないという無駄が発生します。そのため、思考過程の保存は重要で、思考を俯瞰できると、別の視点でも考えられるようになります。

カテゴリー
TypeScript

TypeScript で TCP サーバーを実装する

キーエンスハンディターミナル(BT-Wシリーズ)で、照合結果を受け取ったり、結果をハンディ(クライアント)に返すサーバー機能が必要だったので、TypeScript で実装してみました。

その中で、キープアライブパケットを受け取り、クライアントへ応答するサーバープログラムのソースを紹介します。

TCPサーバー(main.ts)


// main.ts
import * as net from "net"
import {ProtocolClass} from "./protocol"
import {LoggingClass} from "./logger"
/**
 * サーバープロトコル定義クラス
 */
const Protocol = new ProtocolClass()
/**
 * ログ出力クラス
 */
const Logging = new LoggingClass()
/**
 * サーバー待ち受けポート番号
 */
const ListeningPort:number = 2001;
Logging.Logging(Server Initialized)
var server = net.createServer(function(conn){
  Logging.Logging(----------)
  Logging.Logging(Connection Established from ${conn.remoteAddress} : ${conn.remotePort});
  conn.on('data', function(data:Buffer){
    Logging.Logging(Received : ${data} from ${conn.remoteAddress} : ${conn.remotePort});
    var SendMessage = Protocol.ReceivedMessageParse(data.toString());
    var buff = Buffer.from(SendMessage, 'utf8');
    Logging.Logging(Send : ${buff.toString()} to ${conn.remoteAddress} : ${conn.remotePort})
    //conn.write(server -> Repeating: ${data})
    conn.write(${(buff).toString()})
  });
  conn.on('close', function(){
    Logging.Logging(Connection closed by client ${conn.remoteAddress} : ${conn.remotePort});
    Logging.Logging(----------)
  });
}).listen(ListeningPort);
Logging.Logging(listening on port ${ListeningPort});
  • Nodeの net API を使用します。公式ドキュメントはこちらです。

https://nodejs.org/api/net.html

  • ProtocolClass は、クライアントからのリクエストを受け取って、処理を行うクラスです。

  • LoggingClassは、log4jsを使ってログをファイルに出力するクラスです。ブログ記事はこちら。

Typescriptでlog4jsを使ってログ出力処理を簡単に実装する方法

  • net.createServer(callback).listen(ListeningPort)でTCPの待受を行います。

  • conn.on(“data”, callback) は、クライアントからデータを受け取ったときに実行されます。

  • conn.on(“close”, callback)は、クライアントから接続が切断されたときに実行されます。

Protocol制御クラス(Protocol.ts)


import {LoggingClass} from "./logger"
let Logging = new LoggingClass()
export interface IReceivedMessageParse{
  ReceivedMessageParse(ReceivedMessage:string): string
  KPAL(ReceivedMessage:string):string
}
export class ProtocolClass implements IReceivedMessageParse{
  ReceivedMessageParse(ReceivedMessage:string){
    Logging.Logging(ReceivedMessage);
    switch (ReceivedMessage.slice(0,4)) {
        case 'KPAL':
            return(this.KPAL(ReceivedMessage));
        default:
            Logging.Logging(Invalid Command)
            return(0500);
    }
  }
  /**
   ### KPAL(Keep Alive:キープアライブ)
   - e.g. KPAL
   * @param ReceivedMessage クライアント受信文字列
   * @returns クライアント送信文字列(処理ステータス)
   1. 0200 正常終了
   - e.g. 0200
   */
  KPAL(ReceivedMessage:string){
    Logging.Logging(KPAL(Keep Alive) Received);
    return 0200
  }
}

クライアントから KPAL という文字を受け取ると、 0200 をクライアントへ応答します。よくあるキープアライブのようなものを実装してみました。

カテゴリー
TypeScript

Typescript の tsconfig.json の簡単作成方法と設定について

typescriptで開発をしていると必要になってくるのが、tsconfig.json です。ですが、これに何を書いたらいいのか、どんな意味なのかさっぱりでしたので、簡単に残しておきます。

1. tsconfig.json の自動生成

以下のコマンドで、生成できます。


tsc --init

実行すると、こんな感じで成功するはずです。


D:\playground\ts-init>tsc --init
message TS6071: Successfully created a tsconfig.json file.

2. 自動生成された tsconfig.json の中身

こんな感じで出力されます。


{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    // "lib": [],                             /* Specify library files to be included in the compilation. */
    // "allowJs": true,                       /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    // "outDir": "./",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true,                     /* Enable project compilation */
    // "removeComments": true,                /* Do not emit comments to output. */
    // "noEmit": true,                        /* Do not emit outputs. */
    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,              /* Enable strict null checks. */
    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
    /* Additional Checks */
    // "noUnusedLocals": true,                /* Report errors on unused locals. */
    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
    /* Module Resolution Options */
    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    // "types": [],                           /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
    /* Source Map Options */
    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
    /* Experimental Options */
    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
  }
}

3. それぞれのパラメーターと設定値

ちょっと数が多すぎるので、自分が必要なところだけ記載しています。
(少しずつ追記していきます)。

target

対象とするECMAScriptのバージョンを指定します。

‘ES3’ (default), ‘ES5’, ‘ES2015’, ‘ES2016’, ‘ES2017′,’ES2018’, ‘ESNEXT’ から選択します。

初期値は "ES3"です。

module

生成するモジュールを指定します。

‘none’, ‘commonjs’, ‘amd’, ‘system’, ‘umd’, ‘es2015’, ‘ESNext’ から選択します。

初期値は、targetES3 または ES5のときはcommonjsが設定されます。

declaration

trueのとき、*.d.tsファイルを生成します。

sourceMap

trueのとき、マップファイル*.js.mapを生成します。

rootDir

tscが処理を行う、ルートディレクトリを指定します。

outDir

コンパイル済みファイルの出力先ディレクトリを指定します。

4. 自動生成された tsconfig.json には出力されていないけど、tsconfig.json に記載可能なパラメタ

tsc --init で全部出してくれないの?と思ってしまいますが。あるんです、他にもパラメタが。

files

tscでコンパイルする対象の*.tsファイルを指定します。
例はこんな感じです。


    "files": [
        "./DailyLogRotate.ts",
        "./main.ts"
    ]

include

というのがあるそうですが、使ってないので、よく分かりません。使ったら追記します。

5. 自分がよく使う tsconfig.json

自分はこんな感じで使っています。


{
    "compilerOptions": {
        "target": "es2018",
        "module": "commonjs",
        "sourceMap": true,
        "rootDir": ".",
        "outDir": "../build/"
    },
    "files": [
        "./DailyLogRotate.ts",
        "./main.ts"
    ]
}

この状態で、ソースファイルが格納しているフォルダでtsc(引数なし)を実行すると、filesに指定したTypeScriptファイルをコンパイルし、../build/フォルダに*.jsファイルと*.js.mapファイルが出力されます。

6. 公式ドキュメント

tsconfig.json の公式ドキュメントは以下にあります。

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

カテゴリー
TypeScript

Typescript で圧縮ファイルを展開する方法

typescript で tar, gzip, tgz, zip 形式にのファイルを展開する方法を紹介します。

1. Compressing モジュールのインストール

compressing というモジュールを使用します。

https://www.npmjs.com/package/compressing


npm install compressing

でインストールできます。

2. 展開を行う _uncompress クラス

すこし長いですが、各関数を1つのクラスにまとめています。


// uncomp.ts
import * as compressing from "compressing";
//
export interface IUnCompress {
    unzip(filepath: string, destdir: string): any;
    ungzip(filepath: string, destdir: string): any;
    untar(filepath: string, destdir: string): any;
    untgz(filepath: string, destdir: string): any;
}
export default class _UnCompress implements IUnCompress{
//
    unzip(filepath: string, destdir: string) {
        compressing.zip.uncompress(filepath, destdir)
        .then( () => {
            return 0;
        })
        .catch( (e) => {
            return e;
        })
    }
//
    ungzip(filepath: string, destdir: string) {
        compressing.gzip.uncompress(filepath, destdir)
        .then( () => {
            return 0;
        })
        .catch( (e) => {
            return e;
        })
    }
//
    untar(filepath: string, destdir: string) {
        compressing.tar.uncompress(filepath, destdir)
        .then( () => {
            return 0;
        })
        .catch( (e) => {
            return e;
        })
    }
//
    untgz(filepath: string, destdir: string) {
        compressing.tgz.uncompress(filepath, destdir)
        .then( () => {
            return 0;
        })
        .catch( (e) => {
            return e;
        })
    }
//
}

3. 関数の説明

1. unzip 関数

  • 処理内容:zip形式のファイルを展開します。
  • 引数: filepath 展開するファイルパス, destdir 展開先ディレクトリパス
  • 返り値: 正常終了の場合は 0、異常終了の場合はエラー内容を返します。

2. ungzip 関数

  • 処理内容:gzip形式のファイルを展開します。
  • 引数: filepath 展開するファイルパス, destdir 展開先ディレクトリパス
  • 返り値: 正常終了の場合は 0、異常終了の場合はエラー内容を返します。

3. untar 関数

  • 処理内容:tar形式のファイルを展開します。
  • 引数: filepath 展開するファイルパス, destdir 展開先ディレクトリパス
  • 返り値: 正常終了の場合は 0、異常終了の場合はエラー内容を返します。

4. untgz 関数

  • 処理内容:tgz形式のファイルを展開します。
  • 引数: filepath 展開するファイルパス, destdir 展開先ディレクトリパス
  • 返り値: 正常終了の場合は 0、異常終了の場合はエラー内容を返します。

4. 使い方


import _UnComp from "./uncomp";
//
const UnComp = new _UnComp;
//
let zipfile: string = "./sample.zip";
let gzipfile: string = "./sample.gzip";
let tarfile: string = "./sample.tar";
let tgzfile: string = "./sample.tgz";
let destdir:string = "./test/"
//
UnComp.unzip(zipfile, destdir);
UnComp.ungzip(gzipfile, destdir);
UnComp.untar(tarfile, destdir);
UnComp.untgz(tgzfile, destdir);

クラスをimoprt して、new でインスタンスを生成している感じです。
あとは、関数を呼び出します。

5. ダウンロード

uncomp.ts はこちらからダウンロード可能です。

uncomp.ts

カテゴリー
TypeScript

Typescript でファイルやフォルダを圧縮する方法

typescript で ファイルやフォルダを tar, gzip, tgz, zip 形式に圧縮する方法を紹介します。
なお、gzip形式でのフォルダ圧縮はできません。

1. Compressing モジュールのインストール

compressing というモジュールを使用します。

https://www.npmjs.com/package/compressing


npm install compressing

でインストールできます。

2. 圧縮を行う _compress クラス

すこし長いですが、各関数を1つのクラスにまとめています。


// comp.ts
import * as compressing from "compressing";
export interface ICompress {
    file2zip(filepath: string, destpath: string): any;
    file2gzip(filepath: string, destpath: string): any;
    file2tar(filepath: string, destpath: string): any;
    file2tgz(filepath: string, destpath: string): any;
    dir2zip(inputdir: string, destpath: string): any;
    dir2tar(inputdir: string, destpath: string): any;
    dir2tgz(inputdir: string, destpath: string): any;
}
export default class _compress implements ICompress{
    file2zip(filepath: string, destpath: string) {
        compressing.zip.compressFile(filepath, destpath)
        .then( () => {
            return 0
        })
        .catch( (e) => {
            return e
        })
    }
    file2gzip(filepath: string, destpath: string) {
        compressing.gzip.compressFile(filepath, destpath)
        .then( () => {
            return 0
        })
        .catch( (e) => {
            return e
        })
    };
    file2tar(filepath: string, destpath: string) {
        compressing.tar.compressFile(filepath, destpath)
        .then( () => {
            return 0
        })
        .catch( (e) => {
            return e
        })
    };
    file2tgz(filepath: string, destpath: string) {
        compressing.tgz.compressFile(filepath, destpath)
        .then( () => {
            return 0
        })
        .catch( (e) => {
            return e
        })
    };
    dir2zip(inputdir: string, destpath: string) {
        compressing.zip.compressDir(inputdir, destpath)
        .then( () => {
            return 0
        })
        .catch( (e) => {
            return e
        })
    }
    dir2tar(inputdir: string, destpath: string) {
        compressing.tar.compressDir(inputdir, destpath)
        .then( () => {
            return 0
        })
        .catch( (e) => {
            return e
        })
    }
    dir2tgz(inputdir: string, destpath: string) {
        compressing.tgz.compressDir(inputdir, destpath)
        .then( () => {
            return 0
        })
        .catch( (e) => {
            return e
        })
    }
}

3. 関数の説明

1. file2zip 関数

  • 処理内容:ファイルをzip形式に圧縮します。
  • 引数: filepath 圧縮するファイルパス, destpath zipファイル出力先ファイルパス
  • 返り値: 正常終了の場合は 0、異常終了の場合はエラー内容を返します。

2. file2gzip 関数

  • 処理内容:ファイルをgzip形式に圧縮します。
  • 引数: filepath 圧縮するファイルパス, destpath gzipファイル出力先ファイルパス
  • 返り値: 正常終了の場合は 0、異常終了の場合はエラー内容を返します。

3. file2tar 関数

  • 処理内容:ファイルをtar形式に圧縮します。
  • 引数: filepath 圧縮するファイルパス, destpath tarファイル出力先ファイルパス
  • 返り値: 正常終了の場合は 0、異常終了の場合はエラー内容を返します。

4. file2tgz 関数

  • 処理内容:ファイルをtgz形式に圧縮します。
  • 引数: filepath 圧縮するファイルパス, destpath tgzファイル出力先ファイルパス
  • 返り値: 正常終了の場合は 0、異常終了の場合はエラー内容を返します。

5. dir2zip 関数

  • 処理内容:ディレクトリをzip形式に圧縮します。
  • 引数: inputdir 圧縮するディレクトリ, destpath zipファイル出力先ファイルパス
  • 返り値: 正常終了の場合は 0、異常終了の場合はエラー内容を返します。

6. dir2tar 関数

  • 処理内容:ディレクトリをtar形式に圧縮します。
  • 引数: inputdir 圧縮するディレクトリ, destpath tarファイル出力先ファイルパス
  • 返り値: 正常終了の場合は 0、異常終了の場合はエラー内容を返します。

7. dir2tgz 関数

  • 処理内容:ディレクトリをtgz形式に圧縮します。
  • 引数: inputdir 圧縮するディレクトリ, destpath tgzファイル出力先ファイルパス
  • 返り値: 正常終了の場合は 0、異常終了の場合はエラー内容を返します。

4. 使い方


import _compress from "./comp";
// ---
const compress = new _compress;
const inputFilePath:string = "./sample.txt"
const zipFilePath:string = "./sample.zip"
const gzipFilePath:string = "./sample.gzip"
const tarFilePath:string = "./sample.tar"
const tgzFilePath:string = "./sample.tgz"
const inputDir:string = "./sample"
const zipFilePath2:string = "./sampledir.zip"
const tarFilePath2:string = "./sampledir.tar"
const tgzFilePath2:string = "./sampledir.tgz"
// ---
compress.file2zip(inputFilePath, zipFilePath);
compress.file2gzip(inputFilePath, gzipFilePath);
compress.file2tar(inputFilePath, tarFilePath);
compress.file2tgz(inputFilePath, tgzFilePath);
compress.dir2zip(inputDir, zipFilePath2);
compress.dir2tar(inputDir, tarFilePath2);
compress.dir2tgz(inputDir, tgzFilePath2);

クラスをimoprt して、new でインスタンスを生成している感じです。
あとは、関数を呼び出します。

5. ダウンロード

comp.ts はこちらからダウンロード可能です。

comp.ts

カテゴリー
仕事効率化

会社でしか出来ないこと・得られないこと

会社で働いていて仕事がかなりつまらなくなったときや、今の会社で働く意義が分からなくなったときは、よく「会社でしか出来ないこと・得られないことは何なのか」と言い聞かせています。

今はフリーランスや個人開発、クラウドワークスなどで自由に働ける時代です。インターネットとパソコンがあればどこでも一人で仕事ができます。なので、会社がつまらなくなったらやめてしまえばいいよね、という意見が多くみられます。

心を病んでしまった人や、どうしても自分だけの力で利益をあげてみたいと思う人など、様々なバックグラウンドを持った方がいらっしゃいますので、この考えを押し付ける気は全くありませんが、せっかく会社の従業員として働いているのですから、「会社でしか出来ないこと」「会社でしか得られないこと」は何なのか、考えてみました。

1. 大規模なプロジェクトで仕事ができる

個人での仕事は、マンパワーがそんなに多くありませんので、仕事としての規模もそれなりに小さくなります。当人含めて数人程度が限界です。しかし会社であれば自社の人間だけでなく、グループ会社や外注先の担当者など、多くの人が関わるプロジェクトを仕事にできます。この記事を書いている私は、メキシコ現地工場の生産管理およびERPシステムの要件定義から携わったり、RPAの導入検討も行っています。こんな仕事は会社にいないとできません。

2. 休んでもお金がもらえる。退職してもお金がもらえる。

会社には有給休暇という制度があります。もちろん、取得のしやすさは会社によって異なりますが、こんなことはフリーランスにはありません。退職金制度もそうです。「今まで働いて貢献してくれて、ありがとう」がダイレクトにお金になって返ってきます。お金ってサイコーです。

3. 会社の仕事で苦労したことや改善したことをブログに書いて、自分に還元できる。

自分が困っていることは、誰かも困っていることだと、私は思います。多い少ないはあるにせよ、自分だけが困っている、ということは余りありません。その困ったことは、会社での時間を大いにつかい、会社の上司や取引先などの人脈をフル活用して、解決することができます。何かの片手間で、かつ自分だけの力で考えるのではなく、たくさんの方々に協力を得ながらまとまった時間をかけて取り組むことができます。そこで得られた成果・解決方法は必ず誰かの助けになります。広告収入も得られますし、ブログに書くということは様々なメリットがあります。

4. 怒ったり、怒られたりすることで成長できる

これはメリットでもありデメリットでもありますので、該当しない方もいるかもしれません。怒られたり何か指摘されるということは、自分に欠けているものを認識させてもらえる、ということです。ストレスにもなりますが、自分一人では気付けなかったことを、誰かに気付かせてもらえます。逆に、誰かを叱るというのは、かなりのエネルギーを使います。言い方に気を付けたり、その後のフォローをどうやっていくかなど、たくさんのことを考えないといけません。しかし、そのエネルギーを使った分だけ、自分の成長につながると思います。