Visual Studio Code で Java を使うにはJDK11が必要になりました。

 以前も書いたように、仕事ではJavaを使って仕事している私ですが、IDEはEclipseではなくVisual Studio Code(以下、VScode)を使っています。軽快ですし、コード補完等も機能するので満足しています。

 そんなJava開発を実現している拡張機能「Langage Support for Java」ですが、先日そのバージョンが「0.65」に更新されました。拡張機能を更新後にVScodeを再起動すると、下記のようなエラーが表示されました。

image

Java 11 or more recent is required to run. Please download and install a recent JDK

 急になんだ?!と思ったら、どうやらver0.65からは拡張機能の実行にJDK11が必須になった模様。(引き続きJava8での開発は可能)

◆JDK11をインストール

 驚きましたが、そういうことなら仕方ないです。私はJDK8を使っていたのでJDK11はインストールしてなかったため、まずはそこからです。「Amazon Corretto 11」をダウンロードしてきてインストールします。

image

 msiファイルのほうを使えばインストール完了後、環境変数JAVA_HOMEが自動的にJDK11のものに変わってるはずです。

image

 そしたらVScodeを再起動しましょう。これで冒頭のエラーは出なくなりました。

◆VScodeの設定

 JDK11をインストールしましたが、プロジェクトで使用するのは11ではなく8です。なので、次はVScode側で設定を行います。

 settings.jsonを開いて、以下のような設定を追記します。「path」の部分は、インストール済みのJDK8のインストールパスで読み替えてください。

    "java.configuration.runtimes": [
        {
            "default": true,
            "name": "JavaSE-1.8",
            "path": "C:\\Program Files\\Amazon Corretto\\jdk1.8.0_262"
        }
    ],

image

 これで、もう一度VScodeを再起動します。これでJDK11を入れていてもJDK8でプロジェクトの作成やデバッグが可能なはず、です。

◆JAVA_HOMEは変えたくない

 JDK11の使用はVScodeの拡張機能のためだけなので、JAVA_HOMEは変えたくない場合。この場合は、環境変数のJAVA_HOMEは今までの値に手動で戻しつつ、VScode側だけ設定を書き換えてやればOKです。

 JAVA_HOMEをもとに戻してVScodeを起動すると再度、冒頭のエラーが出てきますが無視して、先ほどと同じように「settings.json」を開いて以下のように追記します。例によって、インストールパスはご自身の環境の内容に読み替えてください。
(先ほどとの差異は1行目の強調部分)

    "java.home": "C:\\Program Files\\Amazon Corretto\\jdk11.0.3_7",
    "java.configuration.runtimes": [
        {
            "default": true,
            "name": "JavaSE-1.8",
            "path": "C:\\Program Files\\Amazon Corretto\\jdk1.8.0_262"
        }
    ],

 書き換え後、もう一度VScodeを再起動してください。これで解決してる、はず、です。

VScodeのPostgreSQL拡張が便利

 

 私がお仕事で作っているシステムが扱っているデータベースは、現状すべてがPostgreSQLだったりします。システム開発しているとプログラムだけじゃなくてSQLも色々書いたりしますし、日によっては一日中SQLとにらめっこしているなんてことも。
 プログラムの編集はVScodeで快適にやってますが、ちょっとしたSQLを実行したり、PL/pgSQLの関数書いたりするときに、編集だけならVScodeで可能ですが実行時にはいちいちツール切り替えるのが面倒だなぁ、って思っていました。(そんなに頻繁には切り替えませんが)

 で、そこはやはりVScode。探せばええ感じの拡張機能あるやろと思って調べたら、個人的に気に入ったものがありました。今回はそれを紹介します。

 

◆拡張機能「PostgreSQL」

 https://marketplace.visualstudio.com/items?itemName=ckolkman.vscode-postgres

image

 名前がまんまですが、これ非公式です。(その名前でええんか……と思いつつも)
 開発者はChris Kolkman氏。

 こいつをさくっとインストールすると、サイドメニューのとこにPostgreSQLの象のアイコンが出てきます。そいつを選んで上にある「+」のアイコンをクリックすると、DB接続を設定できます。

image

 

 設定は、コマンドパレットの入力のように画面上部に入力欄が出てきます(下みたいな感じ)ので、そこに入力していく形式です。

image[1]

 この記事を書いている時点では、それぞれ順番に

 ・接続先ホスト名
 ・接続ユーザー名
 ・パスワード
 ・ポート番号
 ・SSL接続するかどうか(選択)
 ・表示するDB(全てか、選択したものだけか)
 ・この接続の名前

 となっているので、入力していきましょう。

 

 全部入力が終わると、左側のパネル内に作った定義が表示されます。これを展開していけば、そのDBのテーブル、ビュー、ファンクションなどの各オブジェクトが表示されます。テーブルをさらに展開すればカラムの一覧も出てきます。定義の確認などに使えますね。

image

image

 

 ここからテーブルの中身も見たい場合は、テーブルを右クリックして「Select Top 1000」を選べば先頭1000行が表示されます。ただしこれは参照だけであり、中身を書き換えたりすることは出来ません。
 また、Create/Delete Tableとかのデータ定義は、GUI上からは出来ません。あくまでもこのGUI部分はクエリ作成の補助機能である、と拡張機能の説明ページにも記載がありますのでご注意を。まあクエリを自分で書けば実行できますけど。

image

 

 

 

◆クエリを実行してみる

 定義が済んだら、VScodeのステータスバー上に出ている「Select Postgres Server」をクリックしましょう。そして先ほど定義しておいた接続を選択し、続けてDBを選択します。選択したものがステータスバー上に表示されたら準備完了!

image

image

image

 以上でVScode上から簡単にクエリが実行できるようになりました。これで、例えばVScodeでつれづれなるままにファイル編集などしている最中に、ふと急にクエリを実行したくてしかない症候群になったときでも大丈夫。

 

 

 

image

image

 このように、プログラムだろうがただのテキストファイルだろうが関係なく、エディタ上にいきなりSQL文をガガガっと書き込みます。書き込んだらその部分を選択して右クリックし、メニューから「Run Query」を選択すれば・・・。

 

 

 

image

 

 この通り

 実行できるクエリはSELECTに限らず、INSERT/UPDATE/DELETEはおろか、TRUNCATE/DROPなども。ようはクエリで書けるなら何でも。保存してあるPL/pgSQLのファイルを開いた場合も、全選択してRun Queryしてやれば実行できます。これでDB関数更新するためにいちいちpsql叩いたりpgAdmin起動したりしなくて済むぞ!やった!!

 

 

 なんでもかんでもこれを使えばいいというわけではありませんが、この使い方で十分という人も結構いるのではないでしょうか。もし興味のある方がいらっしゃれば是非、お試しあれ。

Visual Studio Codeでもっと雑に背景画像を設定したい

 気が付けば8月どころか9月も終わりそうで大慌てしている僕です。御機嫌よう。相も変わらず社畜業に

 

 以前、「Visual Studio Code のデバッグコンソールとかに背景画像を設定したい」という記事でVScodeの背景画像を設定する方法を書きました。あの方法ならエディタ部分の背景、コンソール部分の背景など個別に設定するのには向いています。

 が。
 「そんなに細かく設定はいらなくて、1枚だけビターンと全体的に反映させてはい終了!みたいな、もっと雑でいいから楽に設定したい」という要望が出てきました。自分の中から。なのでもっと簡単な方法を紹介しときます。これもまた、CSS詳しい人なら最初から思いついてそうな内容ではありますが。

 

◆やり方

 基本的なやり方は同じで、CSSファイルをいじるだけです。前回の記事では書き忘れましたが、CSSファイルの場所は

C:\Users\{ユーザー名}\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench

 です。ユーザー名部分は適宜置き換えてください。CSSファイルはVer1.38.1時点で「workbench.desktop.main.css」です。少し前までは「workbench.main.css」というファイル名でしたが、最近変わりました。今後も変わっていくかもしれないですね。
 ファイルの末尾に、以下の感じで追記します。

body {
    background: url("///C:/vscode_custom/backgroundimg.jpg") no-repeat;
    background-position: left top;
    background-size: cover;
    opacity: 0.7;
}

 以前は「.monaco-workbench .part.panel」という名の要素だかクラスだかを指定してましたが、全体に貼り付けるだけならそんな深い階層探さなくても、「body」で全体的にはっつけちゃえばいいわけですね。

 

image

  適用した感じはこんな感じ。エディタやコンソール、そしてエクスプローラーやウィンドウバーなど全体に背景画像が設定されていますね。これでええやん!

 もちろん使用する場合は自己責任で、となりますが、これで皆さんも開発中のモチベをUPさせて、快適な 社畜ライフ プログラミングタイムを送れるようにしていきましょう。

VisualStudioCode で 「Building workspace」とか「Compile」がいつまで経っても終わらない現象。あるいは異常に時間がかかる。

 

 結論だけ見たいって人は、「◆見つけた回避策」までスキップ。

 

◆前置き

 推し事 お仕事では、JavaでWEBアプリケーションの開発を行っている部隊に所属している私です。これまでは、関連会社間で標準として定められた、プラグインマシマシ過ぎのEclipseを使っていたのですが、これが資産管理系のツールやら社内ネットワークやらと大変に相性が悪く、頻繁に固まる(落ちる)ような環境でして……。そんな環境での開発を強いられていました。
 変数コピーしようとして選択状態にしたり、コード打ち込んだり、ファイル切り替えたり……そんな些細なことで、固まりやがるのですよ。ストレスで寿命がマッハです。

 そんなある日、いつも通り応答なしになったEclipseさんを放置しながらネットを見ていたところ、VisualStudioCodeでJava開発環境を整える、という記事がたまたま目に入りました。完全に思いつきて、ものは試しにと使い始めてみたところ、これがとても快適でめっちゃ気に入ってしまい、上司らとの色々な交渉の末にこっちをメインの開発環境に切り替えられることになりました。

 これでEclipseから解放されるぞ、と喜んでいたのですがしかし、そこで遭遇したのが、この表題の現象。

image

 この写真にある「Building workspace – 0%」が点滅を繰り返し、ずっと終わらんのです。
(警告数とか、他の情報は気にしないでください、撮影のために色々したやつなので。本件とは関係ありません。キャプチャではなく写真なあたりも、察して!)

 これが終わらないせいで、いつまで経ってもデバッグ実行が出来ず、また定義情報の参照なども出来ず、Javadocは表示されずF12を押しても定義に飛べず、といった感じで、このままでは開発に支障が出てしまう状態でした。
 ネットで調べても同様の現象に引っかかっている人はあまりおらず、Githubのコメント欄に海外の人で似たような人が何人かいた程度でした。(そしてその人達も未解決っぽい?)

 厳密には、待ってればちゃんとビルドは終わるんです。2時間くらい待てばですが
 一度終わってしまえば、そのあとはしばらく平和な状態になり、ソース書き換えたりしてもちゃんとすぐ反映されるし、その際の自動ビルドもすぐ終わってるんです。しかし何かがトリガーになるようで、いきなりまた現象が再発する、という状態でした……。

 この現象に、かれこれ2か月ほど悩まされてきていました。それでもVisualStudioCodeを使い続けて、色々と試行錯誤してました。(こんな状態でも、弊社のEclipse使い続けるよりマシだったので)
 そして先日ついに! この現象を回避する方法を特定したので、情報共有も兼ねて、ここに記事として残しておきたいと思います。同じ問題で悩まされてる人に少しでも参考になれば……と思いますが……。(ただ、うちの場合は環境が変だったことに依存してそうなため、あまり参考にはならないかもしれません)

 というわけで、次からが本題。

 

◆環境

 まず、使用OSやVScodeのバージョン、主な拡張機能等を整理します。

Windows 7 SP1(現象発生時点での最新のWinUpd適用済)
Visual Studio Code 1.30.1(user setup)
 ・Java Extension Pack
 ・Spring Boot Extension Pack
 ・Lombok Annotations Support for VSCode
Spring Boot 1.5.12
PostgreSQL 10.5
Gradle使用(version 2.6)
バージョン管理:Subversion 1.9..以下省略 (クライアント側はTortoiseSVNを使用)

 主だったところはこんな感じ。VScodeでJava(+ Spring boot)開発をやるって場合のごくありふれた構成です。強いて上げるとするなら、Gradleが大分古い(2.6)ことやバージョン管理がGitではなくSubversionってところがレトロな感じですね。これでも少し前までバージョン管理使ってなかった状況からは大分改善されてるんだぜ……?

 バージョンはともかく、Subversionのディレクトリ構成が少し変わってるので、下図に提示します。

・branches
  –各ブランチ(省略)
・tags
  –各tags(省略)
・trunk
  –ドキュメント類(省略)
・src
  –各プロジェクトのソース類
  |-project_a
  |-project_b

 こんな感じの構成です。
 trunkではなく、別途「src」というソース管理専用のディレクトリを作って、その中で開発を行っていました。ちなみにこの構成を決めたのは前任者(退職済)なので、どうしてこういう構造にしたのか、その理由は誰も知りません。コワイ!

 ここでは、現象の起きている対象のプロジェクトを「project_a」という名前に仮定して話を進めます。

 

◆調査経緯

 さて。
 わざわざ「Subversion」の構造を挙げたので勘のいい方はお気づきかもしれませんが、今回の事象の原因にはこれがか関わってきます。めっちゃ重要です。しかしその、構成がちょっとアレなのと再現確認が不十分なので、あまり自信はないのですが……。
 それはそれとして、私はこの件に関しては、以下のような経緯で調査してました。

 まず、この環境は一応自分が管理者となっていることもあって、TortoiseSVNを使って全ディレクトリをローカルにチェックアウトして使っておりました。VScodeでは、このチェックアウトしたディレクトリの中にある src/project_a を開いて開発を行おうとしており、その際にこの現象が発生していました。
 拡張機能やVScodeのログ確認、ワークスペースフォルダやキャッシュフォルダのクリア、VScodeの再インストール、System Setup版への変更や、前回記事のような改造CSSをやめるなど、色々やりましたが全く解決せず。その後も色々調べていたところ、この現象、部内で私だけでなく複数人で発生しており、しかしその一方で現象が発生しない人もいることがわかりました。何人かに協力を仰いで調査したところ、以下のことが判明しました。

・現象が起きない人は、今まで一度も起きていない
・現象が起きる人は、ほぼ確実に発生する
・OSやVScodeのバージョンは関係なさそう?(混在してたので)
・上記拡張機能以外は、各自自由な状態
現象が起きる人のPCでも、branchesに置いたソースならば現象が発生しない
もう一つの「project_b」では現象が発生しない

 下2つがかなり気になりますね。ここら辺を重点的に見てみることにしました。

 まずは「project_b」ですが、これはproject_aと比べると圧倒的に小さいプロジェクトです。ソースのファイル数も10個程度しかないもので、こいつは基本的に「project_a」の補助ツール的なものでした。こちらをVScodeで開いても、特に現象は発生しておりません。一方で、「project_a」はソースファイル、JSやHTMLなどのリソースも含めると数千ファイルあるような規模です。
 次にbranchesのほうですが、ここには project_a の専用カスタマイズを行う場合のソースが、srcからブランチを切って格納されています。なので基本的に規模としては「src」の中にあるものと大差ありません。ですが、こちらのソースをいくつかVScodeで開いてみたのですが、なんと全く現象が起きないではありませんか!

 個の段階で一先ずメンバーには、srcからbranchesのほうに新しくブランチを切って、当面の間、メインの開発環境をそっちに移動してもらい、私だけがsrcに残って調査を続けることになりました。そしてそこからさらに数日……ついに現象の回避策を見つけるに至ったのです!

 

◆見つけた回避策

 Subversionでチェックアウト済みの「project_a」を、別のディレクトリに直接チェックアウトしなおして、そこを開く。

 

 以上。

 

 終わり!

 

 閉廷!!!!!

 

 いや、本当にこれだけだったんです。

 例えば、「C:\svn」ってディレクトリに全部チェックアウトしていたとすると、これまでは「C:\svn\src\project_a」を開いていたのですが、これをやめて「C:\svn_src_pj_a」というディレクトリに /src/project_a だけをチェックアウトして、これを開くようにした。こう変えただけで、まったく現象が発生しなくなりました。うっそだろお前、と叫んでしまったのも無理ない話です。

 私だけの環境かもしれない、と思ったのですが、これを他の人にも試してみてもらったところ、全員が解決しました。お前マジかよお前ェー!

 

◆推察

 ここからは推察というかただの妄想ですが、何故、これだけで現象が回避できたのでしょうか。
 VScodeはバージョン管理との連携機能を備えていますが、これはGitにしか対応しておらず、Subversionは対応しておりません。しかし、どこかで見かけたのですが、Subversionのチェックアウトしたときに作成される「.svc」のディレクトリがある場合にはそれを無視するよう設定する、的な記述を見た覚えがあるのです。もしそれが自分の記憶違いでないなら、VScodeはSubversionに非対応だとしても、Subversionそのものについては何かしら認識しているのかもしれません。

 そうなると、Subversionでは一般的ではない(かもしれない)ディレクトリ構造でのソースフォルダで、ソースを開いていたことが、裏側で何か予期せぬ動作を引き起こしていたのかもしれません。branchesディレクトリのほうなら何も問題が無かったというのも、そこらへんが理由なのかな?と。
 ちなみにproject_bについては単に、現象が起きているものの規模が小さすぎてbuild時間が伸びていることに気付けてないだけなのでは?という予想しています。

 ちなみに、別フォルダにあらためてリポジトリ全部まるごとチェックアウトしなおしてproject_aを開いてみましたが、現象が再現しました。やっぱり構造の問題なのでしょうか……?

 

 推察部分に関しては完全に未検証ですし、これといった根拠もあるわけではないので、素っ頓狂なことを言っている可能性もあります。しかしいずれにせよ、もし同現象で悩まれている方は、一度別ディレクトリにソースフォルダをチェックアウトしなおす、という手段を、是非一度お試ししてみてもらいたいものです。

Visual Studio Code のデバッグコンソールとかに背景画像を設定したい

 

 メリークリスマスを通り越して、気が付けば大晦日も大晦日。みなさん如何お過ごしでしょうか。僕はAqoursの紅白出場が見れたので満足しているところです。

 

 で、ふと、そうおいえば12月はまだブログ更新してなかったことを思い出して、今あわてて書いているところです。別にノルマとか無いんですけども。というわけでタイトルの通りです。

 本題。エディタとかに背景画像を設定するのは、ぐぐればすぐ出てくるので簡単に出来てるんですよ。主に幻想ツバメさんとこの記事を参考にさせてもらいまして。要はCSSいじってあれこれ弄っちゃうってわけですね。これによって、こんな感じにするところまではあっさり出来ました。

image

 

 

 そこまでは良かったんですが、エディタやターミナルは画像設定できてもデバッグコンソールとかのタブが出来なかったんですよね。(ターミナルと共通だと思ってた)

 

image

 

 

 これがググってもどう書けばいいのか出てこなかったので、自分で適当に調べて、設定してみました。のでそれ晒しときます。ただ、ぶっちゃけCSSとか全然詳しくないので、なんか変な書き方してたらゴメンナサイね、適宜修正して使ってください。(もちろん自己責任でお願いします)

 

 ヘルプの開発者ツールから適当に要素を調べた感じ、デバッグコンソールの要素名はpanelみたいなので、「 workbench.main.css 」に以下を書き加えてみました。

.monaco-workbench .part.panel {
    background: url("///C:/MyData/vscode_custom/panel.jpg") no-repeat;
    background-position: right top; 
    background-size: contain;
}

 

 したらばこんな感じで、デバッグコンソールにも画像を設定できました。

image

 

 細かい調整とかは必要ですが、ひとまず画像設定するだけならこれで……。誰かの役に立てば幸いです。

 

 

 それではみなさん、よいお年を。