IT技術で仕事を減らしたい!

ITエンジニアのメモ+α

VScodeでdraw.ioを使ってみる

どうも、nippa です。

drawio を使う機会が出てきたので、便利に使う方法を調べたら、VScode で使えるようなので、まとめておこうと思います。

基本的には local で drawio を利用できるという内容です。

エンジニアならフローチャート、ネットワーク図、ER 図、システム構成図などで使うことがありますので、ぜひ試してみてください。

環境

Draw.io について

draw.io はダイアグラムやチャートを作成するのに適したソフトウェアです。

オンラインで利用する場合は Draw.ioにアクセスして利用可能です。

また、ソースコードgithubApache-2.0 License で公開されています。

デスクトップ用、docker 用の draw.io のレポジトリも公開されています。

今回はそんな draw.io が VScode で利用できるというので利用したいと思います。

VScode 用の Drawio をインストール

[EXTENTIONS] -> [Drow.io]を検索 -> [Draw.io Integration]をインストール

f:id:NIPPA:20210506205211p:plain
VScode Drow.io Integration

もしくは以下からインストールしてください。

https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

操作方法

基本的には直感的に使えますので、実際触ってみてください。

試しに試すのであれば、Draw.ioで触ってみるのが良いと思います。

AWS や Azure のアイコンも用意されていますので、非常に便利です。

感想

今回、draw.io を使ったことがないエンジニアの方向けに draw.io を紹介しました。

JIRA でも使えるので、会社や案件によっては非常に重宝するかもしれません。

エンジニアの方は1度は使用してみることをおすすめします。

ではでは、また次回。

Typescript 環境構築

どうも、NIPPA です。

Typescript を少しずつ触っているのですが、環境構築方法を忘れやすいのでメモしておきます。

Typescript の型制限は、型がガチガチに決まっている言語を触っていた身としては嬉しいところです。

書く手間は少し増えますが、デバッグでの洗い出しが簡単だったりするので、個人的には好きです。

環境

  • MacOS 10.15
  • node 14.16.0

node は nodenv で環境を整えています。node の環境構築については、以下の参考にしてください。

1. npm の初期化

以下のコマンドで npm の初期化を行います。

npm init -y

を実行するとpackage.jsonが作成されます。内容は以下の通りです。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-node": "^9.1.1",
    "typescript": "^4.2.4"
  }
}

2. モジュールのインストール

Typescript に最低限必要なモジュールをインストールします。

今回は dev 環境でインストールするため、--save-dev オプションを使っています。

prod 環境でもインストールする場合は、--saveオプションをつけてください。

  • ts-node
  • typescript
# Dev環境のみ
npm install --save-dev ts-node typscritpt

# 本番環境
npm install --save-dev ts-node

3. Typescript の環境設定

以下のコマンドで、Typescript の環境の初期設定を行います。

npx tsc --init

message TS6071: Successfully created a tsconfig.json file.

生成されたtsconfig.jsonで Typescript の設定を行えます。

変数の詳細もファイル内にかかれています。

4. Typescript の実行

簡単は Typescript をtest.tsのファイル名で作成します。

const HellowWorld: string = "Hello World!";

console.log(HellowWorld);

コンソールにHello World!を出力するコードです。

Typescript を直接実行する場合は、

npx ts-node test.ts

で実行可能です。また Typescript を node.js は

npx tsc test.ts

で変換可能です。test.jsが生成されますので、

node test.js

で node.js を実行することができます。

感想

今回は Typescript の環境構築と hello world についてまとめました。

Typescript を使って、AWS CDK や Node.js でのバックエンドなどを作っていますが、

Front 側を typescript + React.js で作成してみたいと思います。

ではでは、また次回。

macOS bashのバッチ処理(commandファイル)

どうも、nippa です。

今回は macOS での バッチ処理用の command 拡張子ファイルについてまとめたいと思います。

command 拡張子ファイルは自動でターミナルの起動し、shell の内容を実行してくれます。

簡単な作業で Finder からクリックで実行したいときに便利です。

今回は bash を使って試していきたいと思います。

環境

command 拡張子ファイルについて

command 拡張子ファイルは macOS のバッチファイルになります。

ターミナルを開いてコマンドを打ち込むことが面倒な作業を Finder からファイルをクリックするだけで実行可能です。

例えば、ルールに従ったファイル名の書き換え等にはとても便利です。

command 拡張子ファイルの実行例:ファイル名の修正処理

今回、フォルダに入っているファイル名の先頭に文字列を追加するバッチ処理を作成してみたいと思います。

フォルダに入れたファイルの先頭に00_をつける処理をバッチで行ってみます。

バッチ処理の作成

prefix.commandというファイル名で作成していきます。

#!/bin/bash

DIR='Path' #path
FILE='prefix.command'

fs=$(ls ${DIR} | grep -v 00_* | grep -v ${FILE})

for f in $fs ; do
    mv "${DIR}/${f}" "${DIR}/00_${f%%*/}"
done

unset DIR
unset fs
unset f
exit 0

バッチ処理を実行する際は、ターミナルにログインしホームディレクトリで実行されます。

そのため、絶対パスで処理することをおすすめします。

また、クリックで実行するためには、バッチ処理ファイルには実行権限をつけて置く必要があります。

chmod 744 prefix.command

テストファイルの作成

以下の bash コマンドでファイルを 5 つ作成します。

i=0; while [ $i -lt 5 ] ; do ; touch "file${i}.txt" ; i=$((++i)); done

以下の 5 つの空のファイルが生成されます。

file0.txt
file1.txt
file2.txt
file3.txt
file4.txt

バッチ処理の実行

Finder からprefix.commandをクリックで実行するとファイル名の先頭に00_が追加されます。

00_file0.txt
00_file1.txt
00_file2.txt
00_file3.txt
00_file4.txt

感想

command ファイルを使えば bash で簡単なバッチ処理を行うことができます。

日頃の面倒だと感じる作業をこれでバッチ化してみてはいかがでしょうか。

ではでは、また次回。

Python pyinstallerで実行ファイル化(exe化)

どうも、nippa です。

python のライブラリの pyinsteller を使って配布用の実行ファイルの作成ができます。

プログラマを他人に渡したいが、ソースコード自体は渡したくないような場合に便利です。

少し使ってみたところ意外と便利だったため、まとめておこうと思います。

pyinstaller の公式を参考にしています。

環境

pyinstaller のインストール

  • pip でインストールする場合
pip install pyinstaller
  • Anaconda でインストールする場合
conda install pyinstaller

pyinstaller の基本

1 ファイルの python スクリプトの場合

pyinstaller [スクリプト名]

を実行するとdist/[スクリプト名]ディレクトリに実行ファイル化されたファイル群が作成されます。

配布する場合は、ディレクトリの中身をすべて渡す必要があります。

また、生成された実行ファイルを別環境で利用する場合は import している python ライブラリを別環境でもインストールが必要です。

コンソールへの出力が不要な場合は、-wを指定することでコンソール出力させなくすることができます。

pyinstaller -w [スクリプト名]

複数の python ファイルの1つの実行ファイル化

pyinstaller -F [スクリプト名]

Mac であれば app ファイル、Windows であれば exe ファイルがdist内に生成されます。

-Fもしくは--onefileオプションは macwindows 共通オプションになります。

pyinstaller の設定ファイルを利用

pyinstaller をインストールすると pyi-makespecというコマンドもインストールされます。

このコマンドは pyinstaller の設定ファイルを生成するコマンドになります。

pyi-makespec [スクリプト名]

オプションが色々あるので指定する、もしくは生成される spec ファイルを編集することで pyinstaller 実行時の設定を指定することができます。

spec ファイルからの pyinsaller の実行は以下のとおりです。

pyinstaller [specファイル名]

spec ファイルの設定

spec ファイルの内容は以下の通りです。

# -*- mode: python ; coding: utf-8 -*-

block_cipher = None


a = Analysis(['test.py'],
             pathex=['path'],
             binaries=[''],
             datas=[''],
             hiddenimports=[],
             hookspath=[],
             runtime_hooks=[],
             excludes=[],
             win_no_prefer_redirects=False,
             win_private_assemblies=False,
             cipher=block_cipher,
             noarchive=False)
pyz = PYZ(a.pure, a.zipped_data,
             cipher=block_cipher)
exe = EXE(pyz,
          a.scripts,
          [],
          exclude_binaries=True,
          name='test',
          debug=False,
          bootloader_ignore_signals=False,
          strip=False,
          upx=True,
          console=True )
coll = COLLECT(exe,
               a.binaries,
               a.zipfiles,
               a.datas,
               strip=False,
               upx=True,
               upx_exclude=[],
               name='test')

実行ファイルの指定(--add-binary)

pyinstaller を実行する場合には、--add-binaryオプションで指定することができます。

Mac の場合

pyinstaller [スクリプト名] --add-binary "参照先のパス:ビルド時に配置する位置"

Windows の場合

pyinstaller [スクリプト名] --add-binary "参照先のパス;ビルド時に配置する位置"

また、spec ファイルに期日する場合はbinariespython のタプル形式で指定します。

('参照先のパス','ビルド時に配置する位置')

spec ファイルへの記述は以下のようになります。

binaries=[('../bin/test1', '../bin'), ('../bin2/test*', '../bin'),],

データファイルの指定(--add-data)

pyinstaller を実行する場合には、--add-dataオプションで指定することができます。

Mac の場合

pyinstaller [スクリプト名] --add-data "参照先のパス:ビルド時に配置する位置"

Windows の場合

pyinstaller [スクリプト名] --add-data "参照先のパス;ビルド時に配置する位置"

python ファイルを実行する際に必要なデータは、datasにてタプル形式で指定します。

('参照先のパス','ビルド時に配置する位置')

spec ファイルへの記述は以下のようになります。

datas=[('../data1/data*', '../data'), ('../data2/data.csv', '../data'),],

同梱するライブラリの指定(--hidden-import)

pyinstaller を実行する場合には、--hidden-importオプションで指定することができます。

Mac / Windows の場合

pyinstaller [スクリプト名] --hidden-import "ライブラリ名"

python ファイルを実行する際に必要なデータは、ライブラリは hiddenimports に list 形式で指定します。

hiddenimports = ['json', 'matplotlib.pyplot', 'matplotlib.dates']

hiddenimportsに指定することで、ライブラリが同梱されるため、別環境でライブラリのインストールが不要になります。

感想

python スクリプト配布用などに実行ファイル化を pyinstaller を使って行ってみました。

方法がわかると非常に簡単にできますね。

ぜひ、試してみてください。

ではでは、また次回。

macOS TerminalとFinder間の切り替え方法

どうも、nippa です。

macOS で開発作業を行なっていると、ターミナル(Terminal)とファインダー(Finder)を同時に利用しています。

その作業の中で、以下のようなことがよくあります。

  • ターミナルのコマンド入力時に同じ場所をファインダーで開きたい
  • 現在開いているファインダーからターミナルで同じ場所に移動したい

毎回コマンド入力やファインダーの移動は面倒です。

そこで、今回は時短の意味も含めて、ターミナルとファインダー間の移動方法をまとめて起きたいと思います。

これでターミナルとファインダーの移動のイライラから開放されます。

前提として、ターミナル には iTerm2 を利用します。

iTerm2 のダウンロードは以下から。 iTerm2

環境

Terminal から現在のフォルダを Finder を開く

ターミナルからファインダーを開きたい場合、以下のコマンドで開くことが可能です。

open .

現在のフォルダをファインダーで開けます。

Finder から現在のフォルダに Terminal で移動する

GUI で移動する

GUI で移動する場合は、

開きたいフォルダを「右クリック」-> 「サービス」-> 「iTerm2 でタブで開く」もしくは「iTerm2 で新しいウィンドウで開く」

で可能です。

ショートカットを設定して移動する

システム管理からショートカットを登録し、ショートキーからターミナルで開きます。

設定方法は、

「システム管理」->「キーボード」->「ショートカット」-> 「サービス」->「iTerm2 で新しいタブで開く」もしくは「iTerm2 で新しいウィンドウで開く」-> ショートカットキーを登録する

で、好きなショートカットキーの組み合わせを登録します。

ファインダーでターミナルで開きたいファイルを選択して、ショートカットキーでターミナルで開かれます。

Terminal からファイルを指定アプリケーションで開く

openコマンドの応用になります。

test.txt というファイルをopenコマンドで開くと、.txtを開くデフォルトのアプリケーションで test.txt が開かれます。

open test.txt

特に設定していなければ、macOS 標準のテキストエディタでファイルが開かれます。

例えば、test.txt を Visual Stadio Code で開きたい場合、オプションで以下のように指定することで開くことができます。

open -a /Applications/Visual\ Studio\ Code.app test.txt

感想

今回、ターミナルとファインダー間で切り替え方法についてまとめました。

openコマンドは応用ができ、アプリケーションを指定して開くことができるので、

いくつか alias を登録しておけば、好きなアプリケーションでファイルを開くことができます。

これでイライラを覚えずに、さらに作業の時短になります。

ぜひ、使ってみてください。

ではでは、また次回。