このエントリーをはてなブックマークに追加 にほんブログ村 IT技術ブログへ
にほんブログ村
目次

はじめに

Visual Studio Code(VSCode)は、Microsoftが提供している無料で軽量、かつ強力なコードエディタです。
前回は、VSCodeでMarkdownとUMLを使ってソフトウェア設計書のような文書を書き、最終的にはMicrosoftのWord形式のファイルを生成する方法の概要を紹介しました。
今回は、VSCodeの環境構築のうち、必要なソフトウェア(拡張機能以外)のインストール方法を紹介します。
ちょっと気を付けないといけない部分もあるので、その点は強調して示しておきます。
なお、VSCodeのインストールと日本語化については、「Visual Studio Codeのインストールと日本語化」を参照してください。


必要なソフトウェアのインストール

前回の概要で紹介した通り、VSCodeをMarkdownとUMLを使ってソフトウェア設計書を書けるようにするために必要なソフトウェアは、以下の通りです。

  • Pandoc(MarkdownとUMLの図をWord形式で出力する)
  • Imagemagick(UMLの図をイメージ化する)
  • graphviz(UMLの図をSVG化する)
  • Java(PlantUMLに必要)

Pandocのインストール

インストール順は特に決まりはありませんが、まずはPandocをインストールします。
Pandocは、PandocのGitHUBのリリース(https://github.com/jgm/pandoc/releases)から最新版をダウンロードします。
2019/5/21現在では、最新版は2.7.2でした。
pandoc01.png

今回は、下図の「pandoc-2.7.2-windows-x86_64.msi」をダウンロードします。
pandoc02.png

ダウンロードした.msiを実行します。
チェックボックスをチェック(ライセンスの合意)し、「Install」をクリックします。
pandoc03.png

インストールが始まります。
pandoc04.png

インストールが終わりました。「Finish」をクリックします。
pandoc05.png

Pandocのインストールはこれで終わりです。

Imagemagickのインストール

次にImagemagickをインストールします。
Imagemagickは、Imagemagickのダウンロードサイト(https://imagemagick.org/script/download.php)から最新版をダウンロードします。
imagemagick01.png

Imagemagickはいくつかのダウンロードファイルがありますが、ここでは、「ImageMagick-7.0.8-46-Q16-x64-dll.exe」をダウンロードします。
「*-static.exe」だと、Pandocが使用する「convert.exe」が含まれないようです。
imagemagick02.png

ダウンロードした.exeを実行します。
「I accept the agreement」を選択(ライセンスの合意)し、「Next」をクリックします。
imagemagick03.png

「Next」をクリックします。
imagemagick04.png

「Next」をクリックします。
imagemagick05.png

「Next」をクリックします。
imagemagick06.png

★重要★ここで「Install legacy utilities(e.g. convert)」にチェックをして「Next」をクリックします。
imagemagick07.png

「Install」をクリックします。
imagemagick08.png

インストールが始まります。
imagemagick09.png

「Next」をクリックします。
imagemagick10.png

インストールが終わりました。「Finish」をクリックします。
imagemagick11.png

Imagemagickのインストールはこれで終わりです。

graphvizのインストール(PlantUML1.2020.21以降は不要になりました)

次にgraphvizをインストールします。
graphvizは、graphvizのダウンロードサイト(https://www.graphviz.org/download/)から最新版をダウンロードします。
graphviz01.png

少し下の「Stable 2.38 Windows install packages」のリンクをクリックします。
graphviz02.png

「graphviz-2.38.msi」をダウンロードします。
graphviz03.png

ダウンロードした.msiを実行します。「Next」をクリックします。
graphviz04.png

「Next」をクリックします。
graphviz05.png

「Next」をクリックします。
graphviz06.png

インストールが始まります。
graphviz07.png

インストールが終わりました。「Close」をクリックします。
graphviz08.png

graphvizのインストールはこれで終わりです。

Javaのインストール

次にJavaをインストールします。
JavaのOracle版は有償化されいるので、ここではOpenJDKを使用します。
OpenJDKは、ダウンロードサイト(http://jdk.java.net/)から、ダウンロードします。
ここでは、「JDK 12」をクリックします。
java01.png

「Windows/x64」から「zip」クリックしてダウンロードします。(sha256のリンクではありません)
java02.png

ダウンロードした.zipファイルを解凍します。
解凍したら「D:\jdk-12.0.1」のように任意のフォルダに移動またはコピーします。
コピー後は、以下のようになっていると思います。
java03.png

javaのインストールはこれで終わりです。

環境設定

インストール後は、各ソフトウェアの実行パスを環境変数PATHに追加します。
PandocとImagemagickは、それぞれインストール時に実行パスが追加されていますが、Javaはパスを通す必要があります。
ここでは、「D:\jdk-12.0.1\bin」をユーザーの環境変数に追加します。
環境変数の追加は、エクスプローラで「PC」を右クリック→「プロパティ」→「システムの詳細設定」→「環境変数」から行います。

以上で、必要なソフトウェアのインストールと設定ができました。

まとめ

今回は、VSCodeをMarkdownとUMLを使ってソフトウェア設計書のような文書を書き、最終的にはMicrosoftのWord形式のファイルを生成するための必要なソフトウェアのインストール方法を紹介しました。
次回は、VSCodeに必要な拡張機能をインストールして、テキストだけで文書書いてWord形式で出力できるようにしていきます。
 

関連記事
s-py.png

(8)Pythonの仮想環境をバージョン指定で切り替える

2021/03/05 13:48
Anacondaの有償化の対策として、Windows上での複数のPythonのバージョンの仮想環境の作成方法を紹介します。 この方法により、Anacondaほどではありませんが、自分の作ったテンプレート的な仮想環境を使いまわすことが可能になります。
visual-studio-code-word.png

Visual Studio Codeでソフトウェア設計書(Word文書)を書く環境を作る(PlantUMLによる作図1)

2019/05/30 11:02
Visual Studio Code(VSCode)でMarkdown Preview EnhancedとPlantUMLを使ってテキストだけでWord形式の文書を生成する方法を練習してみます。
visual-studio-code-word.png

Visual Studio Codeでソフトウェア設計書(Word文書)を書く環境を作る(設計書のテンプレートを作る)

2019/05/25 17:06
Visual Studio Code(VSCode)でMarkdown Preview EnhancedとPlantUMLを使ってテキストだけでWord形式のソフトウェア設計書を実際に生成します。
visual-studio-code-word.png

Visual Studio Codeでソフトウェア設計書(Word文書)を書く環境を作る(環境構築2)

2019/05/21 17:58
Visual Studio Code(VSCode)でMarkdown Preview EnhancedとPlantUMLを使ってテキストだけでWord形式文書を生成するために必要な拡張機能のインストール方法と設定を紹介します。
visual-studio-code-word.png

Visual Studio Codeでソフトウェア設計書(Word文書)を書く環境を作る(概要)

2019/05/18 23:43
Visual Studio Code(VSCode)でMarkdown Preview EnhancedとPlantUMLを使ってテキストだけでWord形式文書を生成するために必要なソフトウェアを紹介します。
visual-studio-code.png

Visual Studio CodeでProxy(認証あり)を設定する方法

2019/05/17 1:51
Visual Studio Code (VSCode)で認証のあるProxyを設定する方法を紹介します。
visual-studio-code.png

Visual Studio Codeのインストールと日本語化

2019/05/17 0:34
Visual Studio Code(VSCode)のインストールと日本語化の方法を紹介します。
visual-studio-code.png

(7)Visual Studio CodeでAnacondaの仮想環境を割り当てる

2019/03/26 23:02
Pythonによるソフトウェア開発を行うにあたって、コードエディタは必須のアイテムです。 今回は、マイクロソフトが提供しているVisual Studio…