A certain engineer "COMPLEX"

開発メモ その155 Visual Studio CodeでPython仮想環境を指定する

Introduction


備忘録。

Resolution


拡張機能のインストール

MicrosoftPythonをインストールします。
インストール後はVisual Studio Codeを再起動します。

Extension for Visual Studio Code - Linting, Debugging (multi-threaded, remote), Intellisense, code...

ユーザ設定の変更

ここは人の好みによりますが、自分のように特定のディレクトリに仮想環境を集めている場合について説明。
まず、画面左下の歯車アイコンから設定を選択。

次に、Settingsが表示されるので、検索バーにvenvPathと入力し、仮想環境を集めているディレクトリを指定します。
この際、パス区切り文字列はバックスラッシュのままでかまいません。

設定後はVisual Studio Codeを再起動します。

仮想環境を選択

Visual Studio Codeが起動したら、Ctrl+Shift+Pでコマンドパレットを表示させ、Pythonと入力し、その中からPython: インタープリターを選択を選択します。

少しすると、システムにインストールしてある、Pythonと仮想環境に加え、先ほど指定したフォルダの配下にある仮想環境が一覧に表示されます。

Visual Studio Codeを起動したばかりの時だと、仮想環境の一覧が表示されないことがあります。
その時は、コマンドパレットからもう一度選択すれば表示されます。

開発メモ その154 Chainer with CUDA for Windowsを使う

Introduction


以前、CUDAを含むChainerのインストール手法を書きましたが、もう少しわかりやすく整理しました。

Introduction会社でChainerを使う案件が来ました。まずは環境構築から実施。2018/11/01 更新仮想環境はcondaを使わない方が良いです。condaの仮想環境ではpipでインスト...

Resolution


CUDA_PATHの確認

Chainerで利用するCUDAを確認します。


> set CUDA_PATH
CUDA_PATH=C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v9.2
CUDA_PATH_V9_0=C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v9.0
CUDA_PATH_V9_1=C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v9.1
CUDA_PATH_V9_2=C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v9.2

cuDNNの確認

cuDNNが適切に展開されていることを確認します。


> dir /B /D "%CUDA_PATH%\bin\cudnn64_7.dll"
cudnn64_7.dll

> dir /B "%CUDA_PATH%\include\cudnn.h"
cudnn.h

> dir /B "%CUDA_PATH%\include\cudnn.h"
cudnn.h

仮想環境の作成


> cd <仮想環境の管理ディレクトリ>
> python -m venv <仮想環境名>
> cd <仮想環境名>

仮想環境のアクティベート


> cd <仮想環境名>
> Scripts\activate.bat

パッケージのインストール

cupycupy-cudachainerのバージョンは一致させます。
cupy-cudaの末尾の数値は、先ほど確認したCUDAのバージョンに合わせます。

また、下記の順番を守ってインストールします。


> python -m pip install --upgrade pip
> python -m pip install cupy==4.5.0
> python -m pip install cupy-cuda92==4.5.0
> python -m pip install chainer==4.5.0

最終確認

Chainerがインストールされたこと、ChainerがCUDA、cuDNNを認識していることを確認します。


> python -c "import chainer; chainer.print_runtime_info()"
Platform: Windows-10-10.0.17134-SP0
Chainer: 4.5.0
NumPy: 1.15.4
CuPy:
CuPy Version : 4.5.0
CUDA Root : C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v9.2
CUDA Build Version : 9020
CUDA Driver Version : 9020
CUDA Runtime Version : 9020
cuDNN Build Version : 7104
cuDNN Version : 7104
NCCL Build Version : None

開発メモ その153 Visual Studio CodeのMarkdown機能を強化 その3

Introduction


前回の続き。

Introduction前回の続き。どうもMarkdown Preview Enhancedでもヘッダー、フッターの調節ができる模様。よく考えたら、markdown-pdfと同じpuppeteerを使っているのだか...

仕事で前回書いたことを適用して、まだ改善できるな、と思い調べてみました。

Resolution


フォント変更 (コードハイライトのブロック含む)

箇条書き、コードハイライト、シーケンス図のActor(mermaid)に対応させます。


.markdown-preview.markdown-preview {
// modify your style here
// eg: background-color: blue;

- h1, h2, h3, h4, h5, h6, p {
- font-family: 'ヒラギノ丸ゴ ProN W4', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'MS Pゴシック', 'MS PGothic', sans-serif;
- }
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ p,
+ pre,
+ li,
+ text.messageText,
+ tspan {
+ font-family: 'ヒラギノ丸ゴ ProN W4', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'MS Pゴシック', 'MS PGothic', sans-serif;
+ }
}

コードハイライトのブロックを折り返す

CSSをカスタマイズします。


.markdown-preview.markdown-preview {
// modify your style here
// eg: background-color: blue;
+ pre {
+ overflow-x: auto;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ }
}

開発メモ その152 Visual Studio CodeのMarkdown機能を強化 その2

Introduction


前回の続き。

Introduction仕事ではVisual Studio Codeを使ってMarkdownを書いています。拡張機能のmarkdown-pdfにはお世話になっております。最近、mermaidというガントチャートやフ...

どうもMarkdown Preview Enhancedでもヘッダー、フッターの調節ができる模様。
よく考えたら、markdown-pdfと同じpuppeteerを使っているのだから当然と言えば当然なのかな?

Resolution


Puppeteerのインストール

前回は省略したので。
Chocolatelyが入っているとインストールが簡単です。

Chocolatey is software management automation for Windows that wraps installers, executables, zips, and scripts into compiled packages. Chocolatey integrates ...

管理者でコンソールを起動します。


$ choco install nodejs /y
Chocolatey v0.10.10
Installing the following packages:
nodejs
By installing you accept licenses for the packages.
Progress: Downloading nodejs 10.13.0... 100%

nodejs.install v10.13.0 [Approved]
nodejs.install package files install completed. Performing other installation steps.
Installing 64 bit version
Installing nodejs.install...
nodejs.install has been installed.
nodejs.install may be able to be automatically uninstalled.
Environment Vars (like PATH) have changed. Close/reopen your shell to
see the changes (or in powershell/cmd.exe just type `refreshenv`).
The install of nodejs.install was successful.
Software installed as 'msi', install location is likely default.

nodejs v10.13.0 [Approved]
nodejs package files install completed. Performing other installation steps.
The install of nodejs was successful.
Software install location not explicitly set, could be in package or
default install location if installer.

Chocolatey installed 2/2 packages.
See the log for details (C:\ProgramData\chocolatey\logs\chocolatey.log).

続いてNode.js command promptを起動します。


> npm install -g puppeteer

> puppeteer@1.10.0 install C:\Users\TAKUYA\AppData\Roaming\npm\node_modules\puppeteer
> node install.js

Downloading Chromium r599821 - 135.9 Mb [====================] 99% 0.0s
Chromium downloaded to C:\Users\TAKUYA\AppData\Roaming\npm\node_modules\puppeteer\.local-chromium\win64-599821
+ puppeteer@1.10.0
added 42 packages from 22 contributors in 17.873s

-gオプション必須です。

起動中のVisual Studio Codeは再起動します。でないとpuppeteerが反映されません。

ヘッダー・フッターを付与する

Markdownファイルの先頭に下記のような記述を追記。


---
puppeteer:
displayHeaderFooter: true
headerTemplate: "<span>This is header</span>"
footerTemplate: "<span>This is footer</span>"
---

ただし、デフォルトだと出力文字がすごく小さい。
この領域は、タグが使える。なので下記のようにフォントを使って調整可能。


---
puppeteer:
displayHeaderFooter: true
headerTemplate: "<div style=\"font-size: 9px; margin-left: 1cm;\"> <span>This is header</span></div>"
footerTemplate: "<span>This is footer</span>"
---

ヘッダー・フッターにはテンプレートが使える。

定義 意味 使用例
date 日付 <span class='date'></span>
title ファイル名 <span class='title'></span>
url フルパスファイル名 <span class='url'></span>
pageNumber 現在のページ番号 <span class='pageNumber'></span>
totalPages ドキュメントの総ページ数 <span class='totalPages'></span>

背景を印刷する

前回言及したコードハイライトのブロックの背景が白くなる問題の解決。


---
puppeteer:
printBackground : true
---

日本語が文字化け

フォントの問題と思われる。


プレビュー

PDF出力

中国語フォントっぽいなぁ...

ただ、puppeteerのバージョンの問題という情報が。

yagish履歴書のHTML→PDF変換で使っているpuppeteerのバージョンを1.8.0から1.10.0にしたところ、PDFで日本語が表示できなくなった。 Ubuntu16.04上のDockerで動かしてお...

1.10.0が問題とのことなので1.9.0に戻してみる。


> npm install -g puppeteer@1.9.0

直りました。

フォント変更

前回との同じくCSSをカスタマイズします。


.markdown-preview.markdown-preview {
// modify your style here
// eg: background-color: blue;

h1, h2, h3, h4, h5, h6, p {
font-family: 'ヒラギノ丸ゴ ProN W4', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'MS Pゴシック', 'MS PGothic', sans-serif;
}
}

開発メモ その151 Visual Studio CodeのMarkdown機能を強化

Introduction


仕事ではVisual Studio Codeを使ってMarkdownを書いています。拡張機能のmarkdown-pdfにはお世話になっております。

Markdown converter for Visual Studio Code. Contribute to yzane/vscode-markdown-pdf development by creating an account on GitHub.

最近、mermaidというガントチャートやフローチャートをテキストで記述できるライブラリが気になっており、これがVisual Studio Codeで使えると聞いて興奮しています。
しかし、markdown-pdfがこれに対応していません。

では、これに対応しているpdf変換というと、Markdown Preview EnhancedというAtomでも有名な拡張になります。

しかし、これはこれで結構癖があります。
PDF出力に5種類の方法がありますが、これがまぁ微妙。

  • Chrome (Puppetter)
    • 一番まとも。ただし、Nodejsのインストールが必要。結果はHTML化してChromeからPDF化したのと変わらない感じ。
  • phantomjs
    • 開発が終了している。出力結果はそこそこ。
  • prince
    • 商用利用不可。また結果は微妙。有償の価値はない。
  • eBook
    • ためしてない
  • pandoc
    • cssを指定しても微妙。mermaidの結果は解釈できていない。

あと、

  • Alt textの解釈がおかしい
  • h1タグの直下に水平線が表示されない
  • コードハイライトの背景が白くなる
    • これは印刷オプションで背景を印刷しない、にしていることが要因
  • コードハイライトのブロックに境界線がない
  • 表の形式が古くさい
    • ただ、Githubも表の4隅の境界線がある。違いは1行おきに背景色が変化するところ。

が気になった問題。

良い点として、

  • 見出しのフォントが適度に太字
  • mermaidが使える
  • 改行するのに末尾に空白が不要

があります。

何はともあれ、気になった点を改善していきます。

Resolution


Alt text の解釈

諦める。使わなければ良い。仕事で使ったことはないからOK。

h1に水平線が表示されない

これはMarkdown Preview Enahancedのcssを修正することで対応。
Ctrl + Shift + Pを押下し、Markdown Preview Enhanced: Customize Cssを開きます。
そして下記のように修正を行います。


.markdown-preview.markdown-preview {
// modify your style here
// eg: background-color: blue;

+ h1 {
+ padding-bottom: 0.3em;
+ line-height: 1.2;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ }
}

コードハイライトの背景が白くなる

前述の通り、印刷設定で背景が描画されないのが問題である。
対処として、PDFに出力するのではなく、htmlに出力し、ChromeでPDFに出力する際、背景を出力するようにすればOK

コードハイライトのブロックに境界線がない

これもMarkdown Preview Enahancedのcssを修正することで対応。
Ctrl + Shift + Pを押下し、Markdown Preview Enhanced: Customize Cssを開きます。
そして下記のように修正を行います。


.markdown-preview.markdown-preview {
// modify your style here
// eg: background-color: blue;

h1 {
padding-bottom: 0.3em;
line-height: 1.2;
border-bottom-width: 1px;
border-bottom-style: solid;
}

+ pre[class*="language-"] {
+ border: 1px solid #ddd;
+ }
}

Conclusion


片方だけを使うというのは駄目かな。しばらくは両方使っていきます。