Codenvy (Eclipse Che) で Spring Boot + Gradle ウェブプロジェクトを動作させる

ブラウザ版 Eclipse である Eclipse Che は、Docker を活用しさまざまな言語の開発環境をクリックひとつで構築でき、ブラウザから操作できる利点と合わせ「どこでも開発」が実現できるんじゃないかと思わせる、現在も活発に開発が進んでいる期待のプロジェクトです。 😀

今回、Eclipse Che の Saas である Codenvy を使って Spring Boot + Gradle ウェブプロジェクトを動作させるケースで、ハマりポイントや手間が結構ありましたので設定を記載したいと思います。

現在 Eclipse Che 上で Spring Boot + Gradle を動かそうとすると、いくつかの問題点があります。

  • Gradle (build.gradle) を解釈してくれないないため、ソースやクラスパスを通すことができない。 Eclipse でいうところの buildship 相当の実装がまだされていない。
  • IDE にインクリメンタルビルドが実装されてない(ですよね?)ため、Spring Boot DevTool のリロード機能を使うことができない。
  • Codenvy のリソースの問題か、ブラウザ上で動作する JS の問題か、結構フリーズする…

最後の問題はさておき、上の 2点は gradle を駆使してなんとかすることができましたので、Codenvy のログイン後からの手順を書いてみます。

Workspace の作成

プロジェクトを動作させるためのワークスペースを作成します。左メニュー Workspaces から Add を押下します。

SELECT STACK のフィルターで All を選択し、検索文字列に java debian を入力し “Java Debian” スタックを選択します。(2018/06/09 時点で CentOS を使っている Docker イメージを選択すると Workspace 開始がエラーになりましたので Debian にしています)

また、マシンのメモリーはデフォルト 2G になっていますが、3G まで無料で使えるようなので上げてしまってもいいかもしれません。

次に Spring Boot + Gradle (gradlew 入り)のソースコードを git から取得するため Add Project に git の Repository を指定します。

ここではサンプルで自分が公開している Spring Boot + Vue.js + Gradle + webpack のテンプレートプロジェクトを指定しています。

https://github.com/h1romas4/springboot-template-web.git

保存したら Create ボタンを押下してワークスペースを作成します。作成後、画面がワークスペースに遷移し Docker で環境が構築され起動し、git からリポジトリーからソースコードが取り込まれます。

build.gradle を修正し pom.xml を生成する

Eclipse Che は現在 build.gradle を認識できないため、このままであると .java はただのテキストファイル扱いで補完などができません。これを解決するため、Eclipse Che が扱える Maven の pom.xml を生成します。

Gradle に pom.xml を生成するプラグインがありますので、プロジェクトの build.gradle を次のように修正します。

maven プラグインを追加。(と maven プラグインが要求するため groud, version を追加)

plugins {
    id 'java'
    id 'eclipse'
    id 'maven'
    id 'com.moowork.node' version '1.2.0'
    id 'org.springframework.boot' version '1.5.9.RELEASE'
}

group = 'com.example'
version = '1.0-SNAPSHOT'

次に、dependencies に使うバージョンを追記します。(Gradle の Spring Boot プラグインは指定したプラグインのバージョンから、依存関係のライブラリバージョンも自動で認識してくれますが、Maven プラグインからは参照できないため)

また合わせて、gradle build 時に pom.xml が自動的に生成されるようにタスクを追加します。(task createPom 以降)

dependencies {
    compile('org.springframework.boot:spring-boot-starter-web:1.5.9.RELEASE')
    compile('org.thymeleaf:thymeleaf-spring4:3.0.2.RELEASE')
    compile("org.springframework.boot:spring-boot-devtools:1.5.9.RELEASE")
}

task createPom {
    description "Generates a pom.xml in the project root directory; useful e.g. for IDEs which can read POM but don't directly support Gradle."
    doLast {
        pom {
        }.writeTo("pom.xml")
    }
}

compileJava.dependsOn createPom

build.gradle の修正が終わったら、画面下部の Terminal から次のコマンドを入力し初期ビルドします。

$ cd springboot-template-web/
$ ./gradlew build
$ mvn package
$ ./gradlew build

mvn package の後に再度 ./gradlew build しているのは”おまじない”です。(pom.xml に刺激を与えることで Eclipse Che が Maven プロジェクトとして認識してくれるようです。この手順を確立するまでハマりました。。)

Eclipse Che が pom.xml を認識するとプロジェクトのツリーに External Libraries として無事 dependencies が入るはずです。

.java も Java ソースファイルとして扱ってくれ、補完なども効くようになります。

アプリケーションの起動

Spring Boot のウェブアプリケーションを起動するために実行構成を作成します。

Create new command から bootRun タスクを次のように作成します。

Command Line

cd ${current.project.path} && ./gradlew bootRun

Preview URL

${server.8080}

なお、それぞれの入力部分はマルチラインになっていますが、必ず 1行で書いてください。空行でも改行コードが混在すると Windows(のブラウザ)では動かなくなります。どうやら LF スプリットしているらしく Linux なら動作してしまうという…(ハマり2)

Save 後 RUN ボタンでアプリケーションが起動します。

タスクのビューの preview: 欄にある URL をクリックするとポート 8080 で起動したアプリケーションにブラウザから接続でき、実行を確認することができます。

なお、アプリの停止は画面上部右の「■」から行えます。

インクリメンタルビルドとリロード

この Spring Boot プロジェクトには Spring DevTool の依存関係が入っており、Eclipse ではソースを修正すると自動的にアプリケーションが再起動し、ビルドアンド確認が簡単にできるように設定されています。

残念ながら Eclipse Che はソース修正後に自動的にコンパイルは走らないようなので、bootRun しているとは別の gradle を使って、ウォッチとインクリメンタルビルドをしてあげます。

Terminal から次のコマンドを入力します。

./gradlew build --continuous

これでファイルウォッチに入りますので、.java ファイル修正でアプリケーションが自動的に再起動されるはずです。(停止は Ctrl + d です)

webpack ビルド

このプロジェクトは webpack/nodejs のビルドを使い、JavaScript を ES2015 としたり CommonJS を取り入れたりしています。 nodejs のランタイムは Gradle のプラグインにより自動的にダウンロードされるようになっていますので、上部メニューの Run から Terminal で新しいターミナルを開き次のコマンドを入力するとビルドがかかります。

./gradlew webpack

また、JavaScript の修正からの自動ビルドをするには次のコマンドを入力するとウォッチモードに入ります。

./gradlew watch

詳しくは「フロントエンド技術を導入した Java ウェブアプリケーション開発」をご覧ください。

さて、Eclipse Che にて .js を開くと…

おっ(ΦдΦ)!!という感じになりましたが、自分の環境ではこの後ブラウザが何度やってもフリーズしてしまいました。。いい感じに動きそうなだけに、無念。。

最後に

実際に Codenvy で Eclipse Che を使ってみるとフリーズも多くまだまだこれからといった印象ですが、今後はエディタ部が Eclipse Orion ベースのものから VS Code でおなじみ Monaco Editor になるなど改良が進んでいくようです。

個人的にはブラウザから使うより、Eclipse Che の REST API を活用して任意のクライアントから Docker 環境や language-server に接続できる方向にも発展してくれると嬉しいですが、継続してウォッチしていきたいと思います。

とりあえず、本手順でいろいろ検証できると思いますので、余暇にでもお試しください。 🙂

Arduino Pro Micro を使ってセガサターンのコントローラーを USB に変換する

Arduino Pro Micro の勉強も兼ねまして、セガサターンのバーチャスティックを USB HID 化して PC に接続できるようにしてみました。

使いました Arduino Pro Micro 互換機はこちらです。

KEYESTUDIO Pro Micro Atmega32U4 5V、ピンヘッダーを交換Pro Micro for Arduino

この機械は SparkFun  社が設計した本家の Arduino には存在しないラインナップで、KeyeStudio のはさらにその互換機になります。 1000円くらいなり。

ということで、まずは Arduino のボードマネージャーに以下の URL を指定して、SpackFun Pro Micro をボードに追加します。

https://raw.githubusercontent.com/sparkfun/Arduino_Boards/master/IDE_Board_Manager/package_sparkfun_index.json

ボードを追加したら書き込み対象の Arduino に、 SpackFun Pro Micro の 5V/16MHz を指定します。 vscode-arduino を使っている場合は、arduino board configuration が次のようになります。

デフォルトが 3.3V/8Mhz になるようですので要注意です。 この指定でもすんなり書き込めてしまうようですが、どんなプログラムを実行しても不明な USB デバイスになってしまう悲しい機械になってしまいます。(ちょっとはまりました…

また、Pro Micro に USB HID になるプログラムを書き込み、実行が始まると USB HID と COM ポートが OS に認識されますが、この際に COM ポートが書き込み時のものと異なるポートに配置され、次回のプログラム書き込みができなくなるケースがあるようです。 Windows であればデバイスマネージャから、どのように認識されたかを確認して、書き込みできない場合は COM ポートの設定を合わせてみてください。

特殊な操作として、起動中の Pro Micro の RST 端子を GND にちょいちょいと 2回落とすとリセットがかかり初期状態の COM ポートが 8秒間だけ現れる機能があります。

8MHz で設定してしまったなど、どうしても書き込みができなくなった場合は、コンパイルから書き込みに入ったあたりでリセットをかけ、出現した COM ポートめがけて Lチカなどを転送すると元に戻ってほっとします。 😀

てなわけで若干癖があるボードですが、無事セガサターンのバーチャスティックを USB 化することができました。

結線やソースコードは github に公開してみました。

Convert Sega Saturn controller to USB HID joypad using Arduino Leonardo / Pro Micro.

https://github.com/h1romas4/arduino-saturn-joystick

ジョイスティックデバイスとして認識したら、Windows では次の画面で動作確認をすることができます。

ボタンキーアサインは手持ちしていました HORI のファイティングスティックmini を真似てつくってみました。

ソースコードの次の部分でボタン番号を指定できますので、好みに変えてみてください。 0,1,2… が画面上 1,2,3… ボタン相当です。(9は存在しないボタン)

uint8_t buttonMap[3][4] = {
    { 4, 9, 9, 9 },     // L  -  -  - 
    { 6, 0, 3, 5 },     // R  X  Y  Z
    { 8, 1, 7, 2 }      // S  A  C  B
};

なるべく入力断面を合わせたり、遅延しないようにつくったつもりですが果たして…

違和感なく動作しているようなので、ザック島に急ぎます。3D プリンターでケースをつくろう。 🙂

PocketStation(ポケステ) 開発 2018年版

初代プレイステーションと連携して動く 1999年発売の携帯ゲーム機 PocketStation(ポケステ) をお友達が発掘してお借りすることができたので、当時流行っていた、ポケステをゲーム機として使わずに ARM マイコンとして遊ぶプレイを蘇らせてみました。 😛

さすがにこれだけ年数が経過すると解説しているサイトさんも消え始めていていますので、2018 年版ポケステ・Hello World の手順を書いてみたいと思います。

ポケステメモリの読み書き

ポケステはプレイステーションのメモリーカードとしても動作し、ポケステ用として目印がついているメモリー領域が、ポケステ上でプログラムとして動作する構造になっています。

ということで、まずはプレステ用のメモリーカードリーダーを Arduino マイコンで製作しました。

ポケステが刺さるカードエッジコネクターの入手が難関ですが、昔使っていたパラレル接続のプレステメモリーカードリーダーが宝箱入れから発掘されたので、基板からコネクターだけ拝借しました。(コネクターがない方で Arduino を使いたい方は、8本ですのでなんとか足を引っ張りだしてください)

発掘されたもの(オリジナルの商品名は失念…)

分解してはんだ吸いですっぽんしたら割と簡単に抜けました。この機械は、セントロニクスパラレルポートで SPI を制御、PS/2 の端子から 5V を取っていたようです。

外からは見えませんでしたが、密かにコントローラーの端子もついていました。

カードエッジコネクターが入手できたら、これを Arduino に接続していきます。

資料と Arduino のファームは MemCARDuino を使わせていただきました。

https://github.com/ShendoXT/memcarduino

Arduino PlayStation 1 Memory Card reader

Looking at the Memory Card:
_________________
|_ _|_ _ _|_ _ _|
 1 2 3 4 5 6 7 8

1. DATA - Pin 12 on Arduino
2. CMND - Pin 11 on Arduino
3. 7.6V - External 7.6V power (only required for 3rd party cards and knockoffs)
4. GND - GND Pin on Arduino
5. 3.6V - 5V pin with a voltage divider to 3.6V
6. ATT - Pin 10 on Arduino
7. CLK - Pin 13 on Arduino
8. ACK - Pin 2 on Arduino

ポケステに関しては、3pin は結線不要。 5pin は 5V を入れても動作するようです。(3.3V だと動きませんでした)

クロック制御に Arduino の SPI を使っているため、Arduino “UNO” 以外の方は接続するピンが違いますので注意してください。 Arduino “MEGA” だと SPI は 50pin あたりからです。Arduino “Nano” は Arduino language が SPI 非対応のため使えません。

シールドに乗る大きさだったので、Arduino UNO の上に載せました。 🙂

配線できたら、PC に接続し MemCARDuino.ino をコンパイルして Arduino に転送します。

次に MemCARDuino のファームに対応した memcardrex クライアントを使わせていただき、メモリー吸い出しをして動作確認してみます。(一番下のリンクにコンパイル済みのバイナリがあります)

https://github.com/ShendoXT/memcardrex

Advanced PlayStation 1 Memory Card editor

Shendo’s software

MemcardRex 1.8 released

MemcardRex は Windows 用 C#.NET のデスクトップクライアントですので、他の OS をお使いの方は MemCARDuino に付属の Python2 スクリプトを使うと良いと思います。( Linux で動作することを確認しました。機械の動作がおかしい場合のデバッグにも使えます)

MemcardRex を起動し Option から接続した Arduino の COM ポートを選択、Hardware から read -> MemCARDuino あたりで吸い出しが開始されます。もし進捗メーターが進まなければ、配線がおかしいので確認してみてください。

読み出したら内容をバックアップしておきましょう。

MemcardRex は .mcs のメモリーカード形式をインポートして書き込むことができます。というわけで次からは、ポケステ用のソースをコンパイルしてバイナリを作成し、 .mcs に変換して書き込んであげるという手順になります。

ポケステ用開発環境とひな形のダウンロード

ポケステの CPU は ARM7 だということで、本家 ARM さんのページから GNU Arm Toolchain をダウンロードします。 今回は Windows を使っていたので、 gcc-arm-none-eabi-7-2017-q4-major-win32.zip をダウンロードして展開します。

https://developer.arm.com/open-source/gnu-toolchain/gnu-rm/downloads

The GNU Embedded Toolchain for Arm is a ready-to-use, open source suite of tools for C, C++ and Assembly programming targeting Arm Cortex-M and Cortex-R family of processors.

次に、ポケステ開発のひな形とライブラリ、ビットマップや bin2mcs などの周辺ツールを公開されている方がいらっしゃいますので、ありがたくダウンロードさせていただきます。(左フレーム PocketStation です)

http://onorisoft.free.fr/retro.htm

PocketStation DevKit, Lib & Tools v3.4

This is my complete devkit for the PocketStation, I used it to make PKBIOSTool and the NyanCat.
Full source and tools included !
Please give credits if you use it ! and drop me a mail if you make PocketStation stuff 🙂

psdevkit.zip を展開すると tools と Example がありますので、この手順では Example の中のプログラムをコンパイルして動作させてみたいと思います。

psdevkit Example のコンパイル

Example のコンパイルでは make コマンドを使っていますので、OS に導入されていない場合はインストールします。今回は Windows を使いましたので Windows 10 の bash on Windows(WLS)上の Ubuntu の make を使いました。(Cygwin でも良いと思います)

bash を起動し、試しに make と入力し “コマンドが見つかりません” なら表示された apt の手順で導入します。

次に、Makefile から呼び出される GNU Arm Toolchain の arm-none-eabi-gcc.exe などが入っている bin ディレクトリと、psdevkit 同梱の tools の mcpad.exe への PATH を bash に次のような感じで設定します。(相対パスで指定した例)

export PATH=../../gcc-arm-none-eabi/bin:../tools/mcpad/:$PATH

bash on Windows は bash 内から .exe ファイルを実行することができますが、.exe 拡張子がついていないと Linux のコマンドと混乱するため Makefile を次のように変更してコマンド名に .exe をつけてあげます。

CC	= arm-none-eabi-gcc.exe
LD	= arm-none-eabi-ld.exe
AS	= arm-none-eabi-as.exe
OBJCOPY	= arm-none-eabi-objcopy.exe
OBJDUMP	= arm-none-eabi-objdump.exe
...(略)
${PROG}.bin: ${PROG}
	${OBJCOPY} -O binary ${PROG} ${PROG}.bin
	mcpad.exe ${PROG}.bin

これにて make を実行してあげると ARM バイナリの test.bin ができるハズです。

なお、tools に入っている mcpad.exe や次で使う bin2mcs.exe などはソースファイルが同梱されていますので、Windows 以外の方は事前にコンパイルして実行可能な状態にしておいてください。

バイナリをポケステに転送する

最後に出来上がった .bin バイナリを tools に入っている bin2msc.exe で memcardrex で import できる .mcs に変換します。

../tools/bin2mcs.exe BESNESP00000GAMETEST test.bin test.mcs

第一引数の文字列指定の詳細は bin2msc.exe のヘルプから参照できます。

test.mcs が出来上がったら MemcardRex を起動し、メモリーを読み込み後、未使用スロットの上で右クリックし test.mcs を import して Hardware -> Write してあげれば…

めでたい 😀

Example で使われている pocketlib.h (& header.S) はポケステ用のライブラリです。初期化・終了処理、スプライト、vsync 割り込み、オーディオ用の割込み処理などなど大変便利なものです。

また pocketlib.h と合わせて次の資料も大変参考になりました。(ありがとうございます!)

DEEPER THAN POCKETS

本ページはPocketStationの情報を後世に残すことを目的としています。

POCKETSTATION GENERATION

ポケットステーション対応ソフトの開発資料や関連資料を掲載したサイトを紹介します。

ポケステは 32×32 液晶と LED と IrDA と 10bit DAC がメモリマップドI/O でコントロールでき、プログラミングはアセンブラが必要な部分があったりちょっとプロフェッショナルですが、それも含めて楽しめるのではないかと思います。

お店で見かけましたら、1台ぜひ。 😀