Quantcast
Channel: ひろまさ – hiromasa.another :o)
Viewing all 96 articles
Browse latest View live

OSC 北海道 2016 baserCMS & WordPress セミナー・ブース出展

$
0
0

2016/6/18(土)に開催されました「OSC 北海道 2016(2日目)」で、WordPress & baserCMS セミナー・ブース出展を行いました。

お越しになってくださいった方、本当にありがとうございました!

baserCMS セミナー & ブース出展

baserCMS セミナーでは「コーポレートサイトにちょうどいい、国産 CMS 「baserCMS」の紹介」ということで、baserCMS の紹介をさせていただきました。

baserCMS 4.0 開発系のデモも江頭さんのご協力のもとすることができ、興味を持っていただいた方も多かったと思います。

セミナー直前にデモサイトが壊れるという、びっくりアクシデントがありましたが、セミナー中に江頭さんがなんとかしてくれ、最後は江頭さんによる詳細な解説もしていただきました。 ありがとうございました!

ブースにて江頭さん。WP のタトゥーとは 🙂

13467683_1167016726683780_360936745_o

福岡より、上田さん、はまちさんも来ていただき、ブースも盛況でした。 楽しかったです、ありがとうございました!

WordPress セミナー & ブース出展

WordBench セミナーでは「REST API を活用した、新しい WordPress サイト製作手法」を解説しました。

最近、REST を使ったサイトも増えてきていますので、活用していただければと思ってスライドをつくりました。

13467514_1167016766683776_1331953622_o

baserCMS と SaCSS(sapporo.css) の真ん中ブースでした。(写真右、コモモ氏による、お手製べっしーにも注目ですw

13487363_1167016833350436_1735057596_n

大懇親会

終了後の大懇親会にて SaCSS ハムさんとぱちり。 セミナー2本やりましたゆえ、疲労が色濃くでております(笑

13480142_1167016536683799_2104078938_n

ということで、OSC 北海道スタッフ、関係者のみなさまお疲れ様でした! 重ねまして来てくださった方、お話させていただいたかたありがとうございました。

今後ともよろしくお願いいたします!


Visual Studio Code の PHP 言語サポート vscode-php-intellisense

$
0
0

Visual Studio Code Advent Calendar 2016 の 12日目です!

ここのところずっとウォッチしていました、Visual Studio Code(vscode)で利用可能な PHP サポート拡張になります “vscode-php-intellisense” が完成度をあげ、かなり良い感じになっています。 🙂

https://github.com/felixfbecker/vscode-php-intellisense

Advanced PHP IntelliSense for Visual Studio Code. In opposite to the included PHP IntelliSense and other PHP extensions, this uses an AST to parse the source code instead of relying on naive regular expression parsing.

少し前まで PHP をかくときは、Eclipse の PHP Developer Tools を使っていましたが、vscode-php-intellisense がほぼ同様の機能を実装しましたので、検証しながら乗り換えをしております。

以下、vscode-php-intellisense で WordPress を読ませて動作させている様子です。(サイトの横幅の関係でスクリーンキャストがつぶれてしまいましたので、見づらい場合は画像をクリックしてフルサイズでご覧ください)

まずはエラーチェック。構文間違えなどをリアルタイムに指摘してくれます。

error

定義ジャンプ。PHPDoc が表示でき、関数・メソッドの定義位置に F12 でジャンプします。これがないと困ります 🙂

jump

「定義をここに表示」と「参照先検索」機能。「ここに表示」はインラインで関数定義の内容をぱらっとみるとき便利です。また、PHP は動的型付け言語なので完全ではありませんが、呼び出し元検索があるのは嬉しい部分です。

ref

最後は入力補完。 PHP の標準関数を補完しています。 PHPDoc を表示しながら、引数が入力できます。

comp

ユーザ定義関数の補完も現在 master ブランチでは可能になっています。 コメントアノテーションもみて、参照を解決しているのが分かります。

https://github.com/felixfbecker/php-language-server/pull/165

comp2

Ecipse PDT や PHPStorm 並の機能です。すごい。

このペースでいきますと、おそらく年内にはユーザ定義関数の補完も実装が完了し使える形になると思います。つまりは、WordPress や baserCMS のテンプレートタグの補完が可能になります。 😀

ユーザ定義関数補完以外は既に動作するものが Marketplase にリリースされていますので、まずは導入してアップデートを楽しみに待ちましょう。 🙂

https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-intellisense

Advanced PHP IntelliSense for Visual Studio Code.
In opposite to the included PHP IntelliSense and other PHP extensions, this uses an AST to parse the source code
instead of relying on naive regular expression parsing.

その他の機能のスクリーンキャストは以下で見ることができます。(ぼくのへたなアニメよりずっと分かりやすいのでぜひご覧ください…)

https://github.com/felixfbecker/vscode-php-intellisense

さて、この拡張は同じ作者の方がかかれている PHP 7 で実装された php-language-server を利用して動作しています。(このため、拡張を動作させるには vscode を動かすマシンに PHP 7 が導入され、パスが通っている必要があります)

この親となっている php-language-server ですが、これは Microsoft Language Server Protocol の実装です。

Language Server Protocol は、エディタ(IDE)と言語解析器をつなぐための共通プロトコルですので、今後 php-language-server は vscode 以外のテキストエディタと接続できる可能性があります。 (既に Eclipse Che が PHP サポートの実装に php-language-server を使っています)

逆に Visual Studio Code から見た場合、新しく追加された言語サーバーに接続することで、どんどん対応言語を増やすことができる仕組みです。(現在 vscode は Language Server Protocol クライアントのリファレンス実装のような形になっています)

vscode と Language Server Protocol を使って対応されている言語の一覧は以下で見ることができます。

https://github.com/Microsoft/language-server-protocol/wiki/Protocol-Implementations

Language Maintainer Repository
PowerShell MS VS Code PowerShell extension
C++ MS VS Code C++ extension
C# OmniSharp Many integrations, repository
JSON MS Bundled with VS Code
CSS/LESS/SASS MS Bundled with VS Code
Xtext language framework Eclipse Eclipse Xtext
Crane PHP HvyIndustries VS Code Extension
PHP Felix Becker php-language-server
Haxe Dan Korostelev (@nadako) VS Code Haxe extension
Java (javac) @georgewfraser Javac based Java support
RAML RAML Workgroup raml-language-server Work in Progress
API Elements Vincenzo Chianese(@XVincentX) vscode-apielements
groovy Palantir groovy-language-server
Java (Eclipse) Eclipse, RedHat java-language-server, becoming Eclipse JDTLS
OCaml/Reason freebroccolo ocaml-language-server
Go Sourcegraph sourcegraph-go
Rust Jonathan Turner rustls
Scala Iulian Dragos dragos-vscode-scala
Polymer Polymer Team polymer-editor-service

まだまだ未完成のものもありますが、PowerShell などは完成形になっていてかなり使いやすいです。 標準の PowerShell ISE より良いかも?

というわけで、このような言語サポートも手伝って Visual Studio Code は愛用のエディタになりました。開発も活発なので今後も楽しみです。 😀

OSC 北海道 2017 baserCMS & WordPress セミナー・ブース出展

$
0
0

7/13, 14に開催されましたオープンソースカンファレンス 2017 北海道にて、baserCMS & WordPress セミナー・ブース出展を行ってきました。

お越しになられた皆様、ご協力いただきました皆様、OSC スタッフの皆様、ありがとうございました!

セミナーで使いましたスライドをこちらに公開いたします。

15万ダウンロード達成!国産 CMS である baserCMS の紹介

baserCMS のほうは、CMS が初めての方、まだ baserCMS をご存じない方向けに特徴を紹介するセミナーとさせていただきました。

WordPress REST API と Vue.js を使ったフロントエンド開発

WordPress と JavaScript は既に経験がある方が多くいらっしゃいますので、Vue.js との組み合わせや利点の部分をサンプルサイドとソースコードベースに解説しています。

解説で使いましたサンプルサイトは以下のような動きになっています。

時間の関係でかなり早く進めてしまいました(すいません…)ので、ゆっくりスライドでみていただければと思います。 省略しないソースコード全体は github にコミットしました。

https://github.com/h1romas4/wp-vuejs-sample

baseCMS & WordPress ブース展示

OSC 大懇親会でもお話がありましたが、今年は学生さんの参加が多くありみなさん熱心にブースで内容を聞かれていきましたので嬉しかったです。

ちょうど baser と WP の 2ブースをやっていましたので、CMS とはどういったものか、それぞれどのような特徴があるのかを実際に動かしてお話させていただきました。

WordBench 札幌(WordPress)のブースには yuriko さんからお送りいただいた、スクロールワプーが登場。こちらに興味を持たれてブースに立ち寄られた方も多くいらっしゃいましたので、baserCMS & WP 公式キャラの経緯などをお話することができました。:)

というわけで数えてみたところ OSC 北海道の出展は 2010 年からなので 8回目となっていました。引き続き 10回連続出場を目指してがんばります。やってみたい!という方がいらっしゃればいつでもお声がけください!よぼよぼ。

フロントエンド技術を導入した Java ウェブアプリケーション開発

$
0
0

Visual Studio Code Advent Calendar 2017 の 11日目の記事です。 🙂

今年の自分は Java と PHP と JavaScript と電子工作の年だったような気がするのですが、そんな中、全てにおいて随分お世話になりました VS Code。Microsoft から Arduino 拡張がリリースされたのが一番驚きました。

ということで、今日より 3日間 VS Code について書いていこうと思います。まず最初は Language Support for Java(TM) by Red Hat(vscode-java) から。「フロントエンド技術を導入した Java ウェブアプリケーション開発」です。

この記事では VS Code で Java とフロントエンド系の開発を行うサンプルプロジェクトを準備しました。

簡単な操作で昨今のフロントエンド技術を使った Java ウェブアプリケーションのビルドができるようになっていますので、興味がある方は手順を追って試していただければと思います。

OS は macOS、Linux、Windows と VS Code がオフシャルサポートする全ての環境で動作することを確認しています。

準備

お使いの環境に次のソフトウェアを導入してください。

  • Java (JDK) 8 以上
  • VS Code 1.18 以上

JDK については、コマンドライン・ターミナルから java -version コマンドが次のように実行できていれば準備完了です。(Linux の例)

$ java -version
openjdk version "1.8.0_151"
OpenJDK Runtime Environment (build 1.8.0_151-8u151-b12-0ubuntu0.17.10.2-b12)
OpenJDK 64-Bit Server VM (build 25.151-b12, mixed mode)

また、VS Code には次の拡張を導入してください。Language Support for Java(TM) by Red Hat が必須の拡張になります。

なお、ESLint 及び HTMLHint については動作に Node.js の実行環境が必要となりますが、本サンプルプロジェクトのビルドでは自動導入されるようになっていますので別途操作は不要です。

最後に Windows をお使いの方は、VS Code のファイル -> 基本設定 -> 設定より、vscode-java の java.jdt.ls.vmargs プロパティーに対して次の設定をしてください。

{
  "java.jdt.ls.vmargs": "-noverify -Xmx1G -XX:+UseG1GC -XX:+UseStringDeduplication -Dfile.encoding=UTF-8"
}

vscode-java の起動引数の最後に “-Dfile.encoding=UTF-8” を追加します。

Windows 版の JDK ではデフォルトファイルエンコードが Shift_JIS になっていますが、本サンプルプロジェクトの文字コードは UTF-8 です。この設定により、ソースコード中に直接日本語を書いた場合に vscode-java の自動ビルドで実行するアプリケーションに文字化けが発生するのを防ぎます。

サンプルプロジェクトのダウンロード及び初期ビルド

github から次の操作でサンプルプロジェクトをクローンし、初期ビルドをかけてください。この操作は一度だけで大丈夫です。git の導入がされていない方は git clone の代わりに .zip ファイルをダウンロード・展開した後、ビルドすれば OK です。

プロジェクトフォルダを配置する場所はどこでも大丈夫ですが、日本語パスを含む場所は避けてください。(後述する Spring Boot 開発者ツールのファイル監視&自動リロード処理が動かないケースがあります)

Windows の場合(cmd.exe もしくは powershell.exe で実行)

git clone https://github.com/h1romas4/springboot-template-web.git
cd springboot-template-web
.\gradlew.bat build
.\gradlew.bat eclipse
.\gradlew.bat webpack
code .

macOS、Linux の場合(ターミナルで実行)

git clone https://github.com/h1romas4/springboot-template-web.git
cd springboot-template-web
./gradlew build
./gradlew eclipse
./gradlew webpack
code .

初期ビルドはライブラリのダウンロードを伴うため少し時間がかかります。

サンプルプロジェクトは Gradle を使ってビルドされます。 gradle wapper を使っているため gradle の導入は不要です。 手順では 3つの gradle タスクを実行しており、それぞれ次のような動作を行っています。

./gradlew buiild

サンプルプロジェクトにある build.gradle を元に Java アプリケーションをビルドします。サンプルは Spring Boot を用いたウェブアプリケーションとなっていますが、必要となるライブラリ jar をインターネットから自動的にダウンロードし、アプリケーションが実行可能なように構成します。

./gradlew eclipse

VS Code の記事なのに eclipse と指定されていて不思議な感じですが、実は vscode-java(Language Support for Java(TM) by Red Hat) の実体は Eclipse の JDT と buildship という機能を language-server として外に出し、VS Code から使えるようにしたものです。

このことから vscode-java は Eclipse 用の .project や .classpath ファイル、そして build.gradle を解釈できるようになっています。

この gradle の eclipse タスクは、build.gradle から .project や .classpath を実行環境に合わせて構成するものです。起動した vscode-java はこれらのファイルを参照し、Java の編集・ビルド環境を初期化します。

./gradlew webpack

本サンプルプロジェクトでは以下の Node.js の実行環境を使ったフロントエンドのビルド技術を活用しています。

gradle の webpack タスクではこれらのセットアップを gradle-node-plugin を使って行っています。 gradle-node-plugin は Node.js の実行環境を自動的にインターネットからダウンロードし、package.json を参照して必要なモジュールを node_modules にプロジェクトローカルとして格納します。(内部的には、使っている OS の Node.js 実行環境を自動的に選択、ダウンロードし npm install コマンドを発行しています)

アプリケーションの実行

これにて VS Code によるウェブアプリケーション開発の準備完了です。まずはアプリケーションを実行してみましょう。

VS Code の統合ターミナルを起動し、次の gradle タスクを実行してください。

Windows の場合

.\gradlew.bat bootRun

macOS、Linux の場合

./gradlew bootRun

ターミナルに “Started Application” と表示されたら準備完了です。

ブラウザから http://127.0.0.1:8080/ にアクセスしてみます。

おめでとうございます。 🙂

では、VS Code に戻って src/main/java/HomeController.java を開き「こんにちは。」となっているところを「こんにちは!」などと書き換えてみてください。先ほど統合ターミナルで起動した gradle bootRun タスクが自動的に .java ファイルの編集・ビルドを検知し、アプリケーションにリロードがかかり、ブラウザを更新すると修正した文字列で動作することと思います。

この動作は build.gradle ファイルの次の指定によるものです。

eclipse {
  classpath {
    defaultOutputDir = file('build/classes/java/main')
  }
}
dependencies {
  // ...
  compile("org.springframework.boot:spring-boot-devtools")
}

gradle eclipse タスクで、vscode-java が .java ファイルを保存後に自動ビルド .class ファイルの格納先を gradle bootRun タスクが実行に使う build/classes/java/main に指定しています。

また、spring-boot-devtools を依存に入れることで、bootRun タスク中に build/classes/java/main 内の .class ファイルの書き換えを監視し自動的にアプリケーションのリロードがかかるようになります。(なお、2017/12 時点最新の gradle 4.4 では eclipse タスクに修正がかかっておりこの記述だけでは動作しないため、今回は暫定的に 4.3 を指定して使っています)

さらに、このアプリケーションで使われている JavaScript も修正してみましょう。本サンプルプロジェクトは、JavaScript の記述に webpack/babel を用いた CommonJS/Modue、ES2015 が使えるようにセットアップされています。

gradle bootRun タスクが動作中の VS Code の統合ターミナルの右側に配置されている「+」アイコンをクリックし、さらにもう一つ統合ターミナルを起動し、以下のコマンドを実行してください。

Windows の場合

.\gradlew.bat watch

macOS、Linux の場合

./gradlew watch

Module/ES2015 で記述された src/main/js/app.js が監視され、修正を検知しブラウザで動作する形にコンパイルされ、実際に .html から読み込まれる resources/static/js/bundle.js に出力されるようになります。

ためしに app.js を書き換えてみると監視が動作し、bundle.js が書き換わるのが分かります。

開発時の手順は以上です。フローをまとめると次のようになります。

  1. VS Code でプロジェクトのフォルダを開く。
  2. 統合ターミナルで gradlew boouRun を実行する。
  3. JavaScript の開発をする際はもう一つ統合ターミナルを起動して gradlew watch する。
  4. ソースファイルを編集して開発を進める。

サンプルプロジェクトは Spring Boot のウェブアプリケーションとなっています。ソースコードを修正しながら VS Code の機能とプログラミングを楽しんでみてください。

Language Support for Java(TM) by Red Hat

vscode-java では現在、Java 編集時のリアルタイムコンパイルエラー検出、定義ジャンプ、インテリセンス(補完)などの基本的な機能がサポートされています。

まだクイックフィックスやソースのオートジェネレート系は弱いものの、auto import が実装されましたのでほとんどの場面で困ることはなくなりました。逆にこのほうが Java の勉強になっていいかもです… 😛

import の構成は解決できないパッケージ(赤波線)の上で一度クリックすることで表示される、電球アイコンから行うことができます。

JavaScript

VS Code は標準で JavaScript の編集が非常に強いエディタです。

package.json ファイルを自動で認識して、モジュール構成の JavaScript ファイルであれば適切に IntelliSense することができます。補完は TypeScript 用の型定義を見てくれるようで非常に快適です。

VS Code は Module/ES2015 でソースが書かれていることを認識しますので、例えば Vue.js ライブラリを import した状態で IntelliSense を発動させると次のように Vue がもつプロパティーを表示してくれたりします。(便利!)

また、利用するパッケージを定義する package.json の記述では、次のようにパッケージの名称やバージョンを補完することができます。(便利!)

プロジェクトで利用する JavaScript のライブラリを増やす手順は次のようになります。

  1. package.json の dependencies に(IntelliSenseをつかいつつ)必要なライブラリとバージョンを指定する。
  2. gradle watch  タスクを実行し、ライブラリを自動的にインターネットからダウンロードさせる。(watch タスクは必要な依存ライブラリ全てを動作するように bundle.js に固めてくれるため .html の .js 読み込み部分に修正の必要はない)
  3. JavaScript のソースコードで import を構成して、(IntelliSenseで補完しつつ)コーディングする。

非常に快適です。 🙂

ESLint

サンプルプロジェクトでは package.json の devDependencies に eslint を設定しています。node_modules に eslint があると、VS Code の ESLint 拡張が働くようになり、上のスクリーンショットのように JavaScript の誤りをリアルタイムに検出してくれます。

ソースコードが揃いますので入れておくと便利だと思います。

サンプルプロジェクトでは eslint の設定ファイルである .eslintrc.js を最小限にしていますので、必要に応じてルールを修正してみてください。

HTMLHint

ESLint と同様に node の htmlhint を活用した拡張です。 HTML のタグの閉じ忘れや誤ったマークアップなどをリアルタイムで指摘してくれます。

サンプルプロジェクトでは、テンプレートエンジンに Thymeleaf を使っていますが、このような HTML を壊さない系のテンプレートと非常に相性が良いと思います。

HTML & CSS

VS Code 標準で HTML の emmet 入力及び CSS の IntelliSense に対応しています。 VS Code の emmet は今年に入り 2.0 化され、プレビューができるなど便利になりました。

CSS の自動補完も i マークを押すことで対応ブラウザが出力されるなど便利になっています。

EditorConfig for Visual Studio Code

プロジェクトのルートファイルにある .editoerconfig ファイルをみて、ソースコードの文字コードや改行、タブ指定などを揃えてくれます。

root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

最近はさまざまな OS で開発することが多く、ソースコードの体裁を揃えるために必要な拡張となっています。(今回も 3 OS で検証中、Windows の git の改行コード変換が auto になっていたため、この拡張に助けられました…)

VS Code で Java 開発を始めよう

VS Code による Java 開発は適当にフォルダをつくり、ビルドを入れれば始められるという手軽さが魅力です。

特に、Java はできるが JavaScript は苦手という方にも、JavaScript に対して一般的なプログラミング言語と同等なモジュール構成や補完機能が Java 開発環境内で同時にサポートされますので、楽しくモダンなフロントエンドを学べる良い環境になるのではないかと思います。

お正月休みの研究にいかがでしょうか。

Visual Studio Code の PHP 言語サポート vscode-php-intellisense 2017年版

$
0
0

Visual Studio Code Advent Calendar 2017 の 12日目の記事です。 🙂

昨日の「フロントエンド技術を導入した Java ウェブアプリケーション開発」に続きまして今日は PHP です。

実は昨年の Visual Studio Advent Calendar 2016 でも vscode-php-intellisense について書かせていただいておりましたが、2016年 12月時点ではユーザー定義関数の IntelliSense が git master ブランチ上にはあったものの未リリースの段階でした。(VS Code 側の対応待ちがあった)

1年経ちましてユーザー定義関数の補完も無事動作するようになり、また PHP パーサーが Microsoft 謹製のものに変わるなどパフォーマンスを大幅にあげ、実際のプログラミングで活用されている方も多くなったように思います。

準備

vscode-php-intellisense は、同じ作者の方が PHP 7 で実装された php-language-server が使われています。このためお使いの OS に PHP 7.0 以上が導入されている必要があります。

コマンドライン・ターミナルから php -v コマンドを実行し次のようになっていれば使い始められます。(Windows / powershell.exe の例)

PS C:\> php -v
PHP 7.0.13 (cli) (built: Nov 8 2016 13:45:28) ( ZTS )
Copyright (c) 1997-2016 The PHP Group
Zend Engine v3.0.0, Copyright (c) 1998-2016 Zend Technologies

OS (パス)の実行環境を変えたくないよという方は、VS Code の基本設定の次のキーに PHP 7 実行ファイルへのパスを設定してください。優先して使われるようになります。

{
  "php.executablePath": "...."
}

また、VS Code 内蔵の PHP サポートが有効になっていると IntelliSense が混乱しますので無効に設定してください。

{
  "php.suggest.basic": false
}

これにて準備完了です。 PHP プロジェクトのフォルダを VS Code で開き、いずれかの .php ファイルを開くと php-language-server が浮き上がり vscode-php-intellisense の機能が使えるようになります。

拡張の起動ログは「出力」の PHP Language Server から見ることができます(パースが完了すると IntelliSense が使えるようになります。Microsoft の PHP パーサーになってからかなり速くなりました!)

ログを確認すると分かりますが、現在のところパース対象の .php ファイルの大きさが 150000byte に制限されています。 例えば WordPress では制限容量を超えたファイルがいくつか存在し、IntelliSense の対象から外されてしまいますので、拡張のファイルを直接書き換えて対応してください。

Windows の場合

C:\Users\[ユーザー名]\.vscode-insiders\extensions\felixfbecker.php-intellisense-2.0.4\vendor\felixfbecker\language-server\src\PhpDocumentLoader.php

macOS / Linux の場合

~/.vscode-insiders/extensions/felixfbecker.php-intellisense-2.0.4/vendor/felixfbecker/language-server/src/PhpDocumentLoader.php

ソースファイルを 150000 で検索し、300000 くらいにすれば OK です。

    public function load(string $uri): Promise {
        return coroutine(function () use ($uri) {
            $limit = 150000; // ここを修正します

拡張のソースファイルを直接書き換えているため、バージョンアップがあると上書きされます。(再設定してください)

設定から limit が調整できるようなプルリクが届いていますので、近い将来改善されることを期待しています。(実は結構前のプルリクで進展がないのですが… 😛

以上で拡張を使う準備完了です。

PHP IntelliSense

ユーザー定義系の補完以外は去年紹介しましたので、今年はユーザー定義系のIntelliSense を確認してみます。

WordPress プロジェクトをサンプルに、テーマをコーディングしている想定です。

add_filter は WordPress が定義するグローバル関数ですが正しく IntelliSense できています。

ちなみに PowerShell の拡張などでは次のように引数のホバーを確認しながら入力を進めことができますが、残念ながらこの動きは vscode-php-intelliSense では未実装です。(TODO に入っていますので期待です!)

と思っていたら、昨日のアップデートで実装されてしまいました!

素晴らしい…

IntelliSense 確定後はコードレンズ(定義をここに表示)でシグネチャーを確認できますので、こちらで代用すると良いと思います。

残念ながら PHP の標準関数はコードレンズできませんので、カーソルホバーで確認しましょう。 🙂

PHP は動的型付け言語ですので、完全な型参照はできなく IntelliSense の対応もある程度までになりますが、コメントアノテーションや PHP 7 の型定義で補完が効くようになります。

class Test {
    /** @var wpdb */
    private $wpdb1;

    /**
     * @param wpdb $wpdb2
     */
    public function hoge($wpdb2) {
        $this->wpdb1->query(); // OK!

        $wpdb2->query(); // OK!

        /** @var wpdb $wpdb3 */
        global $wpdb3;
        //$wpdb3->; 無念...
    }
}

例にしている $wpdb は WordPress がグローバルに定義する DB のアクセサです。

  • PHPDoc 付き private メンバーの $wpdb1 は補完 OK!
  • PHPDoc 付きメソッドパラメーターの $wpdb2 は補完 OK!
  • メソッド内のインラインコメントアノテーション $wpdb3 は補完できず

という結果でした。

ちなみに、Eclipse PDT や PhpStome ではインラインコメントアノテーションも OK です。このアノテーション方式が何かしらの規格なのかは存じ上げませんがもしかすると将来対応されるかもしれませんね。 🙂

VS Code で PHP

ここ 1年ほど PHP は全て VS Code と vscode-php-intelliSense でコーディングしましたが、VS Code の操作系ともマッチしており快適に作業を進めることが出来ました。

また、昨日紹介しましたが、VS Code は昨今のフロントエンド系の技術との親和性が高いため、PHP などのウェブアプリケーションと相性が良いです。合わせて使うと強力な相棒となってくれることと思います。

Visual Studio Code extension for Arduino で電子工作

$
0
0

Visual Studio Code Advent Calendar 2017 の 13日目の記事です。 🙂

昨日の「Visual Studio Code の PHP 言語サポート vscode-php-intellisense 2017年版」に続きまして今日は VS Code と Arduino による電子工作です。

なんだか今年は趣味の電子工作をよくしていた年だったように思いますが、そんな中でも我らが VS Code が活躍してくれました。

Microsoft 謹製 “Visual Studio Code extension for Arduino” という思わぬ伏兵のリリースにびっくりしてしまいましたが、IntelliSense が使える快適なマイコンプログラミングができるようになりました。 🙂

この記事は Windows と Linux で動作することを確認しています。(シリアルポートドライバーの関係で電子工作では  macOS を使う機会がなかったのでした…)

準備

vscode-arduino は、VS Code 上で Arduino のマイコンプログラミングを可能にする拡張です。vscode-cpptools と依存関係があり、C++ の IntelliSense と Arduino 操作が協調して動作します。

Arduino のコンパイラや転送ソフトウェア自体は Arduino IDE に含まれるものが使われますので Arduino IDE の導入が必要です。導入された Adruino IDE は vscode-arduino により自動的に認識されます。

Arduino IDE と vscode-arduino 拡張の導入後、vscode-arduino の次の基本設定を “Default” から “Tag Parser” に変更してください。

{
    "C_Cpp.intelliSenseEngine": "Tag Parser"
}

Arduino の C like なソースコードは include することなく標準ライブラリが使えるようになっていますが、Default パーサーの場合は厳密にソースコードで #include <Arduino.h> などとしないとパースできず IntelliSense が効きません。

このことから “Fuzzy” な検索が出来る “Tag Parser” を使うことでこれを解決してあげます。

ここまでの準備ができたら、空のフォルダを vscode で開き、Arduino のソースファイルとなる空の hogehoge.ino ファイルを作成し開くと vscode-arduino が活動を開始します。(ステータスバーに Arudino の情報がでれば OK です)

Visual Studio Code extension for Arduino

空の hogehoge.ino ファイルができたらまずはターゲットとなる Arduino ボードの設定をします。

F1 キー押下後 “Arduino Board Config” を選択してください。

設定画面がでますので、ターゲットとなるボードを選択します。

選択後、プロジェクトフォルダに .vscode と 2つのファイルが作成されます。

  • arduino.json – Arduino の設定情報が入ります。
  • c_cpp_properties.json – C/C++ パーサーの設定情報が入ります。

c_cpp_properties.json を開き、Arduino IDE の位置を正しく自動認識して brows.path に設定されていることを確認してください。

"browse": {
    "limitSymbolsToIncludedHeaders": false,
    "path": [
        "C:\\Users\\hirom\\AppData\\Local\\Arduino15\\packages\\arduino\\hardware\\avr\\1.6.19\\cores\\arduino"
    ]
}

先に設定した “C_Cpp.intelliSenseEngine”: “Tag Parser” では、解析の設定に brows.path が用いられます。外部ライブラリなどで IntelliSense が正しく働かない場合は、この部分にパスを追加してみてください。(なお Default パーサーでは “includePath” が使われるようです)

では早速ソースコードを書いてみましょう。

IntelliSense やコードレンズが効いて良い感じです。標準の Arduino IDE は補完がサポートされておらず、また Java / Swing でできていることもありフォントなども綺麗にでませんでしたが、vscode-arduino なら全て解決で嬉しくなってしまいます 🙂

最後に Arduino へのプログラムの転送ですが、 “Arduino Board Config” と同様に F1 キーから “Arduino Select Serial Port” で接続先の COM (/dev/ttyUSB) を指定した後、”Arduino Upload” をすれば OK です。

シリアルモニターも同じ操作から “Arduino Open Serial Monitor” で起動可能です。

hexdump for VS Code

vscode-arduino とは直接関係ありませんが、hexdump for VS Code 拡張が便利でしたので合わせて紹介します。

マイコンプログラミングをしているとバイナリデーターと格闘しなくてはいけないことがありますが、hexdump for VS Code は VS Code 内でバイナリ表示・編集を可能にする拡張です。

VS Code エクスプローラーのファイル右クリックコンテキストメニューが拡張され、”Show Hexdump” できるようになります。表示されたバイナリではカーソル選択による “Hex Inspector” が使え、選択値の各種長さの 10進数表現を見たり、右クリックメニューから 1byte 単位の編集が行えます。(便利!)

VS Code で電子工作

今年は実際に Visual Studio Code extension for Arduino を活用して、数台の電子工作を行ってみましたが、トラブルもなく非常に快適でした。

では最後にそんな中の 1台の “未来ガジェット” の紹介をして今年の VS Code Advent Calendar 2017 の担当分を終わろうと思います。 3日間に渡りすいませんでした。

また来年。

# 動画中 vscode-arduino のコンソールが文字化けしているのは半年ほど前の古いバージョンの不具合で、現在は修正されています。:)

未来ガジェット 3号 “古の電子オルゴール”

何十年前ものPC ゲーム少年達を魅了したYAMAHA のシンセサイザー LSI YM2151 で、今再び楽曲を奏でるという、未来ガジェットと呼ぶにふさわしい趣味の一品。

YM2151 は YAMAHA 自身が iOS でエミュレーターをつくるなど、今なお多くの人を魅了する FM 音源と呼ばれるシンセサイザーで、暖かみのあるエレピやゲーム向きのエッジの効いた音が発声できることを特徴としています。

発売から数十年経過し、当然生産終了しているこの LSI を海外ルートから取り寄せ、先人が残した情報を元に回路を再現。オルゴールの盤面ともいえる ROM に格納した楽曲データーをマイコンから LSI に送信することで発声させています。

特にマイコン側の制御ソフトウェアが難しかったですが、小中学校時代に毎夜毎晩打ち込んでいた MML を思い出しながら、ついに楽曲が奏でられた時は泣きそうになったのでした。

この作品は基板が小さく、自分の腕前ではデジタル側とアナログ側の GND をうまく分離できず、よく聴くとチリチリと裏でデジタルノイズが鳴ってしまっているのですが、小学生の頃 PC から奏でられていた楽曲にも同じノイズが乗っていたことがフラッシュバックしタイムリープ寸前に。

いつか僕らが未来振り返る時には。骨董品を極めた作品となりました。

 

Arduino + MAX7219 + 1088AS 8×8 matrix LED + MIDI でパターン表示

$
0
0

手持ちしていました 1088AS 8×8 matrix LED とコントローラー MAX7219 の DIG/SEG 配線にちょっと手こずりましたので備忘録です。最終的に出来上がったシールドは MIDI と接続してみました。:)

MAX7219 データーシート

MAX7219/MAX7221は、コンパクトなシリアル入力/出力コモンカソードディスプレイドライバで、マイクロプロセッサ(μP)と、最大8桁の7セグメント数字LEDディスプレイ、バーグラフディスプレイ、または64の個別LEDをインタフェースします。

Arduino の LedControl ライブラリサンプルで MAX7219 をふたつ接続した場合は次のようになると思います。

LedControl lc = LedControl(12, 11, 10, 2);
1088AS MAX7219 Arduino 備考
1 3  DIG 4
2 5  DIG 6
3 14  SEG A
4 16  SEG B
5 8  DIG 7
6 23  SEG D
7 10  DIG 5
8 6  DIG 2
9 2  DIG 0
10 20  SEG C
11 21  SEG E
12 7  DIG 3
13 22  SEG DP
14 11  DIG 1
15 15  SEG F
16 17  SEG G
1 12  DIN
4 GND
9 GND
12 10 MAX7219#2 の LOAD(CS) も
13 11 MAX7219#2 の CLK も
18 ISET (LED 電流制限 10KΩ)
19 Vcc 0.1μF(+10μF)のパスコン入れる
24 MAX7219#2 の DIN(1) へ

1088AS は型番が書いてある真ん中にとんがりがある方が下で、左下が 1pin となり、あとは IC といっしょで反時計回りに 1, 2, 3pin となります。(右上が 9pin、左上が 16pin)

Arduino MEGA のシールドにマトリクス LED と MAX7219 をそれぞれ 2つ実装してみました。(狭いので半田付けが結構厳しかったです…)

出来上がったシールドの活用として、Arduino の ATmega16u2 側のファームを Midi Firmware for Arduino Uno (Moco) で書き換え MIDI USB デバイスにし、プログラムをかいて MIDI IN をひろって 8×8 LED でパターン表示できるようにしています。 🙂

反応も良くてなかなか良い感じです!ヒョー

dfu-programmer で Arduino UNO の ATmega16U2 に Windows から書き込む

$
0
0

Windows 版の dfu-programmer で Arduino UNO の ATmega16U2 に書き込む方法をいつも忘れて調べてしまうので、メモです。

Arduino UNO などについている ATmega16U2 にカスタムファームを書き込んであげることで、Arduino を USB-MIDI や HID デバイスにすることができます。

Windows から書き込むには、dfu-programer の Windows 版ダウンロードしてを使うと簡単です。

dfu-programmer
dfu-programmer is a multi-platform command-line programmer for Atmel (8051, AVR, XMEGA & AVR32) chips with a USB bootloader supporting ISP. Most Atmel devices having a USB port come pre-programmed with the bootloader, and this is a lightweight alternative to Atmel’s own FLIP/BatchISP program. This is a mostly Device Firmware Update (DFU) 1.0 compliant user-space application.

You can download the source distribution from the project files page. Windows users can download a pre-compiled executable, a set of USB drivers and the HTML help file in a separate zip file from the same page.

project files にコンパイル済みの dfu-programer.exe と USB デバイスドライバが同梱されたアーカイブファイルがあるので展開しておきます。

次に Arduino の次のジャンパーをショートさせたまま USB で PC に接続し、Arduino の電源ランプが点灯したらショートを解除します。(本来はドライバーなどでなくジャンパピンを使いましょう。。

ショートを解除すると Windows がデバイスドライバを検索しにいきますので、先ほど展開したアーカイブに同梱されている atmel_usb_dfu.inf を指定してあげると次のように ATmega16U2 がデバイスとして認識されます。

認識後、dfu-programmer.exe でデバイスを指定して erase 後、ファイルを指定して flash してあげると書き込みできます。(自分の環境では erase でエラーがでましたが書き込みは大丈夫のようです)

C:>dfu-programmer.exe ATmega16U2 erase
Checking memory from 0x0 to 0x2FFF...  Not blank at 0x1.
Erasing flash...  Success
Checking memory from 0x0 to 0x2FFF...  ERROR.

C:>dfu-programmer.exe ATmega16U2 flash hogehoge.hex
Checking memory from 0x0 to 0xFFF...  Empty.
0%                            100%  Programming 0x1000 bytes...
[>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>]  Success
0%                            100%  Reading 0x3000 bytes...
[>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>]  Success
Validating...  Success
0x1000 bytes written into 0x3000 bytes memory (33.33%).

デバイス名の指定は USB の認識名と同じ名称にするようにしてください。大文字小文字も区別するようで、正しく指定しないとデバイスが見つけられません。

なお、オリジナルのファームウェアは次からダウンロードできます。(Arduino SDK にも含まれているはずです)

https://github.com/arduino/Arduino/tree/master/hardware/arduino/avr/firmwares/atmegaxxu2/arduino-usbserial

Arduino の ATmega16u2 側のファームを Midi Firmware for Arduino Uno (Moco) で書き換え MIDI USB デバイスにした様子です。 🙂

Arduino で MIDI や HID デバイスがつくれるといろいろ活用範囲が広がりますです!  😀


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

$
0
0

初代プレイステーションと連携して動く 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台ぜひ。 😀

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

$
0
0

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秒間だけ現れる機能があります。

どうしても書き込みができなくなった場合は、コンパイルから書き込みに入ったあたりでリセットをかけ、出現した 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 プリンターでケースをつくろう。 🙂

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

$
0
0

ブラウザ版 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 で YAMAHA YM2151 を VGM ファイルで演奏させる

$
0
0

1990年代の多くのアーケードゲーム機に搭載されていた音源チップ YAMAHA YM2151 を Arduino からこの手でどうしても発声させてみたい。

電子工作を始めて Lチカもそこそこに製作を始めた”未来ガジェット”のひとつです。

結構前につくったものでしたが、どのように製作したか忘れぬよう github に Arduino スケッチと参考させていただいた資料・回路図のリンクを掲載してみました。

Play back the VGM format file with Arduino. (only YM2151)

https://github.com/h1romas4/arduino-vgmplayer

本スケッチでは VGM Format と呼ばれる、音源チップに流すデーターダンプ形式を、そのまま YM2151 に write して発声させる方式を採っています。

このことから Arduino のスケッチは 100行ほどの単純なものになり、まずは発声させてみたい方にはちょうど良い規模感のプログラムになっています。たとえば PSG を同時に鳴らしたい、なんて時も数行足してもらえれば実装できると思います。

演奏データとなる VGM ファイルは mml2vgm を使わせて頂き MML (Music Macro Language)で作成しました。MML の書き方は体が覚えていることでしょう 😀

https://github.com/kuma4649/mml2vgm

[概要]
このツールは、ユーザーが作成したMMLファイルを元にVGM/XGMファイルを作成します。

[機能、特徴]
[VGM]
・メガドライブ2台分の音源構成(YM2612 + SN76489 + RF5C164)*2にそったVGMを生成します。
(他にYM2151,YM2203,YM2608,YM2610B,SegaPCM,HuC6280に対応しています。)

github 上のサンプルは次のようにしてみました。(カエルの歌の3声輪唱です)

assets/vgmsaple.gwi

'@ M 110
   AR  DR  SR  RR  SL  TL  KS  ML  DT1 DT2 AME
'@ 022,005,000,004,005,041,000,001,005,000,000
'@ 016,008,008,008,002,000,001,002,005,000,000
'@ 031,018,000,004,010,044,000,008,009,000,000
'@ 031,009,007,008,002,003,001,001,009,000,000
   ALG FB
'@ 004,007

'X6 T160@110l4 r1r1r1r1 cdefedcrefgagfercrcrcrcrc8c8d8d8e8e8f8f8edc
'X7 T160@110l4 r1r1     cdefedcrefgagfercrcrcrcrc8c8d8d8e8e8f8f8edc
'X8 T160@110l4          cdefedcrefgagfercrcrcrcrc8c8d8d8e8e8f8f8edc

このテキストファイルを mml2vgm により .vgm 化して、Arduino のスケッチから PROGMEM で Flash メモリーに書き込んでいます。(music/vgmsample.h

曲の大きさによっては Arduino の 32KByte Flash に載りきらないため、作例では EEPROM を接続し書き込んだデーターを演奏させることもしています。(ちなみに EEPROM を単純に 1Byte 読みすると速度が追いつかなかったため、先読みのリングバッファのような実装を入れました)

ハードの方は Arduino UNO のシールドで実装しています。(まずはブレッドボードで動作を確認した方が良いと思います)

足の数に対して基板が結構小さく、おまけに全部ビニール線で繋いだため結構大変でした。。とはいえ、初心者の自分が、2日くらいハンダ付けをがんばれば完成しましたので、おそらくみなさまいけるかと思います。(部品は AliExpress で入手しています)

さて完成した機械から奏でられた音色は…

リーディングシュタイナー発動…!!!

苦労した甲斐もありまして、無事タイムリープに成功。 😀

子供の頃からゲームの音楽と言えば FM 音源で、なんとかいい音で聴こうと PC からラインを引っ張り出してステレオコンポに接続して、何度も何度も聴いていたことを思い出します。

この機械は、電源を入れればすぐ楽曲が奏でられますので「古の電子オルゴール」として現在も活躍中です。

M5Stack/ESP32 でメガドライブ音源をエミュレート

$
0
0

勉強会で見せていただいて気になっていた M5Stack を買ってみました。  🙂

内蔵スピーカーもついていますので hello world がてら、 PSG 音源をエミュレーションしてみようと始めたところ、なかなか鳴ってくれなくて苦労しました…

「エンディングI/SORCERIAN/Copyright© Nihon Falcom Corporation」

追記。FM音源 + YM2612 の DAC もエミュレートできて無事メガドライブ(GENESIS/MEGADRIVE)音源になりました 😀

勢いがあるうちに忘れないようメモしておきます。

ソースは github で公開しています。(力尽きたので不出来、手抜きの部分は大目に見てください)

https://github.com/h1romas4/m5stack-synth-emulation

GENESIS/MEGADRIVE(YM2612+SN76496) VGM player on ESP32/M5Stack

開発環境

PSG エミュレーターを移植するのに gcc ツールチェインを使いたかったので開発環境は(Arduino ではなく) ESP-IDF を使いました。 リンク先の通りに SDK ファイルを展開して、 $IDF_PATH を設定してあげれば OK です。

今回は Linux を使ってやりましたが、Windows 10 の場合は WSL を使うと楽かもしれません。(未確認)

M5Stack ESP-IDF 用の雛形が github に提供されていますので、手順の通り git clone して make menuconfig してシリアルを設定して、make flash monitor すれば hello world できると思います。

https://github.com/m5stack/M5Stack-IDF
To use as a M5Stack component of ESP-IDF

ちなみに monitor の抜け方は ctrl + [ です。

自分がやったときは Makefile にバグがありいきなり、make flash できないという不具合に遭遇しています。

Detected overlap at address: 0xe000 for file:

これは Makefile にパッチする次のワークアラウンドで解消できました。(m5stack リポジトリは既に修正済みだと思います)

(esp-idf) make flash fails due to the overlapping of offset addresses #1724

https://github.com/espressif/arduino-esp32/issues/1724

static heap の上限

static heap をたくさん使おうとすると

region `dram0_0_seg' overflowed by 67900 bytes

とリンクエラーになります。 がびーん。

どうやら static heap にサイズ上限が決められているようなので、static で取得するのをやめて動的に heap_caps_malloc() して回避しました。

build/ 下に app-template.map というファイルができていて、static heap のサイズが分かります。(この場合 DECAY_TO_ATTACK 変数に 0x4000 取られています)

.bss._ZL15DECAY_TO_ATTACK
0x000000003ffbd1cc     0x4000 /home/..../libsynth.a(ym2612.o)

また、make size すると次のように現在のメモリーサイズが表示できます。

Total sizes:
 DRAM .data size:    6488 bytes
 DRAM .bss  size:  118632 bytes
Used static DRAM:  125120 bytes (  55616 available, 69.2% used)
Used static IRAM:   36140 bytes (  94932 available, 27.6% used)
      Flash code:  181978 bytes
    Flash rodata:   64104 bytes
Total image size:~ 288710 bytes (.bin may be padded larger)

static heap を回避しても malloc で失敗することもありますので、あちこち移動させてうまいことメモリーに載せていきます。 なお、heap_caps_get_free_size() で動作中の残りメモリーを知ることができるようです。

内蔵 DAC の鳴らし方

なかなか鳴らなくて PSG エミュレーションが悪いのか DAC の操作が悪いのかで苦労しました…。

I2S 経由の DAC は次のようなイメージで鳴ると思います。

static const i2s_port_t i2s_num = I2S_NUM_0; // i2s port number

i2s_config_t i2s_config = {
    .mode = static_cast<i2s_mode_t>(I2S_MODE_MASTER | I2S_MODE_TX | I2S_MODE_DAC_BUILT_IN),
    .sample_rate = SAMPLING_RATE, // #define SAMPLING_RATE 44100
    .bits_per_sample = I2S_BITS_PER_SAMPLE_16BIT,
    .channel_format = I2S_CHANNEL_FMT_RIGHT_LEFT,
    .communication_format = static_cast<i2s_comm_format_t>(I2S_COMM_FORMAT_I2S_MSB),
    .intr_alloc_flags = 0,
    .dma_buf_count = 16,
    .dma_buf_len = 512,
    .use_apll = false,
    .fixed_mclk = 0
};

i2s_driver_install(i2s_num, &i2s_config, 0, NULL);
i2s_set_pin(i2s_num, NULL);

size_t bytes_written = 0;
uint16_t buf[2];
buf[0] = 0x0000; // right sample
buf[1] = 0x0000; // left  sample
i2s_write((i2s_port_t)i2s_num, buf, sizeof(uint16_t) * 2, &bytes_written, portMAX_DELAY);

buf には符号付き符号なしリトルエンディアンのステレオサンプリングを渡します。(内蔵 DAC の場合は符号なしでした… どうにも音が割れると思ったら…)上のサンプルソースは 1フレームですが、この config で 4096 フレーム * 2(ステレオ)が一気に渡せました。

flash への任意データーの書き込み

partitions.csv ファイルをつくり make menuconfig (sdkconfig) で指定してあげることにより、内蔵の flash メモリーの任意の位置に esptool.py でバイナリを書き込みプログラムから read できます。

esptool.py --chip esp32 --port "/dev/ttyUSB0" --baud 115200 write_flash -fs 4MB 0x211000 "バイナリファイル"

プログラムから読み込むときは、

esp_partition_find_first() して esp_partition_mmap() でポインターがもらえます。便利。 🙂

その他

  • 普通に printf すると make flash monitor するだけで実行してコンソール出力されるので嬉しい。
  • プログラムが大きくなったせいか途中から “Make error of dangerous relocation” と怒られてリンクできなくなりました。 CFLAGS に -mlongcalls をつけることで解消しました。
  • M5STACK の内蔵スピーカーはそこそこ音が割れます。 PSG くらいがちょうど良さそうです。
  • 実はがんばって FM音源も移植したのですが、いい音で鳴りませんでした… さすが ESP32 だけあって処理速度は十分です。 ソースに残骸がありますので、気になる方は鳴らしてみてください…)
  • FM音源(YM2612)も鳴らすことができました!
  • YM2612 + SN76489 + YM2612 の内蔵 PCM をエミュレートしたら CPU の 1コアを使い切っているようです。

以前から充電できるポケステがあったらいいのになぁと思っていたのですが、ちょうどでてきてくれた M5Stack さん。 久しぶりに夢中になってしまいました。

今回の hello world で一通りの困りそうなことは踏んだ気がしますので、引き続き何か作っていきたいと思います。 🙂

Rust/WebAssembly でレトロシンセをエミュレートする

$
0
0

以前から WebAssembly を使ってレトロシンセ音源をエミュレートしてブラウザーで発声させてみたいと思っていたのですが、Rust が WebAssembly に直接コンパイルできるようになったのをきっかけに挑戦し、なんとか動かすことができました。

以下からデモを見ることができます。 🙂

Synth emurator by Rust/WebAssembly

Rust/WebAssembly を使いレトロシンセサイザーをウェブブラウザ上でエミュレートして楽曲を再生します。

WebAssembly 非対応の IE を除く、PC とモバイルのほとんどのブラウザーで動作すると思います。(なお、iOS 11 Safari と Android Chrome はサンプリングレートを無視してしまう処理があるようで高め・速めで再生されています。iOS 12 Safari では修正されたようです。)

ソースコードも github にコミットしました。

https://github.com/h1romas4/rust-synth-emulation

PSG(SN76489) VGM player by Rust

さて、初めての Rust だったこともあり製作に結構時間がかかりましたので顛末でも…。

何はなくとも Rust 言語を覚えなければということで、ちょうどオライリーから「プログラミング言語 Rust」が発売されたので購入。

読み進めるも若干飛ばし気味に進む展開に、まだ早かった…と先に公式ドキュメント版プログラミング言語 Rust を読みました。

プログラミング言語Rust: 2nd Edition”の日本語版PDFを作成した

プログラミング言語Rust: 2nd Editionの日本語版PDFを公開しました!

550ページ以上の素晴らしい翻訳と組版で本当に感謝しかありません…。2週間ほどかかりましたが最後まで通して読むことができました(オライリーは少しできるようになってから読んだほうがいいかもしれません)

合わせて、海外のハッカーさんが Rust でライブコーディングしている youtube 動画を見ながらプログラムの組み立て方などを覚えています。こちらも非常に参考になりました。

そんなこんなで半月ほどかけて、C 言語でかかれた SN76498(PSG)エミュレーターを Rust に移植し、PCM サンプリングファイルを出力させることに成功。 🙂

このプログラムを元に WebAssembly 化していきました。

Rust 側での状態の保持

WebAssembly は JavaScript と WebAssembly 間で関数を公開し、互いに呼び出すことができますが、WebAssembly(Rust)側で状態を保持したいことがあります。

今回のプログラムの構成は JavaScript 側で AudioContext イベントを回し、発声バッファが必要になったタイミングで Rust 側で PSG をエミュレーションし 2048 サンプルごとに渡すようなロジックになっていますが、Rust 側では楽曲のどこまで再生したかなどなどを覚えている必要があります。

保持したいデーターをつめた Rust 側の構造体は次のようにしました。

struct VgmPlay {
    sn76489: SN76489,
    vgmpos: usize,
    remain_frame_size: usize,
    vgmend: bool,
    buffer: [f32; MAX_BUFFRE_SIZE],
    vgmdata: [u8; 65536]
}

C言語であれば static にしておけば OK ですが、Rust の static は実行前に大きさが決まっていないとコンパイルエラーとなるため、lazy_static! マクロを用いて Mutex 内にこの構造体を保持しています。

lazy_static! {
    static ref DATA: Mutex<VgmPlay> =
        Mutex::new(VgmPlay::from());
}

JavaScript に公開する関数では Mutex をロックした上で中の構造体を取得し、構造体に impl した関数を呼び出します。

#[no_mangle]
pub unsafe extern "C" fn play() -> f32 {
    let vgmplay = &mut DATA.lock().unwrap();
    vgmplay.play() as f32
}

ブラウザに実装された JavaScript はシングルスレッドであるため、関数に再入がかかったり同じ構造体を使う別な関数が呼び出されることはありませんが、Mutex につめておくと安心ですね。 このあたりは次の記事が大変参考になりました。

Rocket – A Rust game running on WASM
Technically, this isn’t necessary in the case of Javascript, since there will only be one thread. Still, the type system knows nothing about that… Hence the mutex.

感謝。

メモリーの共有

JavaScript/WebAssembly 間でメモリーのポインタを共有をすることができます。今回はサンプリングバッファを割当て、Rust 側で PSG をレンダリングしたメモリーをそのまま JavaScript からアクセスして AudioContext に書き込むことで発声させています。

Rust 側でメモリーの位置を返却。

#[no_mangle]
pub unsafe extern "C" fn get_audio_buffer() -> *const f32 {
    let vgmplay = &mut DATA.lock().unwrap();
    &amp;(vgmplay.buffer[0])
}

JavaScript 側で ArrayBuffer としてアクセス。

wasm_audio_buffer = new Float32Array(
    wasm_memory.buffer, wasm_exports.get_audio_buffer(), SAMPLE_LENGTH);
// ...
ev.outputBuffer.getChannelData(0).set(wasm_audio_buffer);

また、楽曲データーである .vgm ファイルを http して Rust のメモリーに格納することもしています。

Rust で上記のサンプリングバッファ同様 vgm_data のポインタを関数で公開した上で JavaScript 側から fetch した値を Uint8Array として set。

wasm_vgm_data = new Uint8Array(
    wasm_memory.buffer, wasm_exports.get_vgm_data(), MAX_VGM_DATA);
// load vgm data
fetch('./vgm/vgmsample.vgm')
    .then(response => response.arrayBuffer())
    .then(bytes => wasm_vgm_data.set(new Uint8Array(bytes)))
    .then(results => {
        // ...
    });

JavaScript/WebAssembly でメモリーが共有できるため、余分なコピーが発生せず高速に処理することができました。今回は実装していませんが、Rust 側でサンプリングをフーリエ変換してフレームバッファメモリーにビジュアライズして書き込み、canvas に転送なんてこともできると思います。(Web Audio API にも FFT がありますが :D)

Web Audio API

WebAssembly だけの話ってわけでもないのですが、ブラウザの Web Audio API の使い方にちょっと困りました。

Rust 側としてはサンプリングを全て再生したタイミングで次のサンプリングを送り込みたいのですがそれを Rust 側で知るすべがなかったため、JavaScript 側の AudioContext の onaudioprocess イベントを使い(バッファを吐ききると発動する) Rust 側からサンプリングを渡す方式としています。

残念ながら現在 onaudioprocess イベントは JavaScript のメインスレッドを使いきる可能性があるということで非推奨となっており、Audio Workers を使えということのようです。

Audio Workers

Audio workers を利用すると web worker のコンテキストで音声処理をおこなえます。Audio Workers は比較的新しいいくつかのインタフェース (2014 年 8 月 29 日に定義)によって定義されているため、これを実装したブラウザはまだありません。実装が完了すると、 ScriptProcessorNode, と JavaScript による音声処理 で述べた機能を置き換えることとなります。

が、まだ実装が進んでいないようです…。 とりあえず今のところ WebAssembly では、JavaScript のタイマーやイベントを契機に処理するという流れが良いかと感じました。

(追記:Audio Worker は仕様から消えて AudioWorklet になったようです)

というわけで、なんとなく WebAssembly でのプログラムの形がつかめてきました。 Rust も少しだけ分かってきましたのでまた何かつくってみようと思います。

WebAssembly はブラウザベンダー4社でつくってるだけあり、互換性もよく(今回 WebAssembly 的には何のトラブルもなく全てのブラウザで動作しました)、次のステップでは GC やスレッドも入ってくるということなので楽しみな技術です。

ついにブラウザーで好きなプログラムを動作させることができるようになって嬉しいす。 😀

Alacritty 高速ターミナルエミュレーター

$
0
0

Rust 方面で気になっていた高速ターミナルエミュレーターである Alacritty を Ubuntu 18.10 にて試してみました。

まだ alpha levelとのことですが、2日ほど使い続けてみましたが不具合もなく、むしろ速くてとても快適でしたので常用させていただいております。:)

https://github.com/jwilm/alacritty

Alacritty is the fastest terminal emulator in existence. Using the GPU forrendering enables optimizations that simply aren’t possible in other emulators.Alacritty currently supports macOS and Linux, and Windows.

サイトに導入手順がありますが、Ubuntu の場合はライブラリ依存関係と Rust のツールチェインを入れビルドをかけると .deb が作成されパッケージとしてインストール・することができます。

Rust ツールチェインの導入

https://rustup.rs/

curl https://sh.rustup.rs -sSf | sh

依存関係の導入

https://github.com/jwilm/alacritty/blob/master/INSTALL.md#debianubuntu

apt-get install cmake libfreetype6-dev libfontconfig1-dev xclip

Alacritty のビルドとインストール

https://github.com/jwilm/alacritty#debianubuntu

git clone https://github.com/jwilm/alacritty.git
cd alacritty
cargo install cargo-deb
cargo deb --install

起動すると設定ファイルが、$HOME/.config/alacritty/alacritty.yaml として作成されますので、画面サイズやフォントの設定をします。自分はプロンプトなどに Powerline を使っていますのでフォントの指定を Ricty Diminished w/ Powerline patched に変更しました。

font:
  # Normal (roman) font face
  normal:
    family: Ricty Diminished Discord for Powerline
    # The `style` can be specified to pick a specific face.
    # style: Regular

ということで起動してみると、、

フォントずれも発生せず日本語環境でもいい感じに動作しました!

IM による漢字入力についてはまだインライン入力ができないようですが、カーソル位置の適切な場所に吹き出し形式でインサートすることができますので、大量に日本語を入力しない限り違和感はないと感じました。

マウスエミュレーションも動作し、スクリーンショットのように tmux を動作させるとペインの移動やスクロールなどがマウスで行うことができます。

tmux(アプリケーション)にマウスを奪わせたくない場合は、一般的なターミナルエミュレーターのアサインと同様 Shift キーを押しながらマウス操作すればOKです。また OS に対するコピーアンドペーストは、Shift + Ctrl + c や v などが使えます。

検証もかねまして 2日ほどがちゃがちゃいじってみましたが、不具合を起こすこともなく快適に動作しています。すごい 🙂

(画面を覆い尽くす)Ctrl + Enter のフルスクリーンモードがあれば自分的には完璧だったのですが、issue も上がっていましたので少し経てば実装されるものと思います。

Alacritty は Windows 版も開発が進んでおり先日起動が成功したようです。

ためにし WSL(bash on Windows)で試したところ、マウスエミュレーションが動作しませんでしたが、かなり動き始めているようです。(残念ながら IM による日本語入力窓はへんな位置にポップアップしてしまいました)

Windows 上の Alacritty で WSL を起動する場合は $HOME\alacritty.yaml のシェルの指定を次のようにします。

shell:
  program: "C:\\Windows\\sysnative\\bash.exe"

Rust でつくられているということで高速で強固。自分は Rust の勉強中にてソースコードもかなり参考になりそうです。継続してウォッチしていきたいと思います。 🙂


AsciidoctorとGradleでつくる文書執筆環境

$
0
0

技術文書を書く環境が欲しくなり、VS Code と Gradle を使って Asciidoc 文書を執筆する環境を整えてみました。 お手軽に構成できて、300ページくらいの文書でも耐えられそうです。 🙂

VS Code でリアルタイムプレビューしながら Asciidoc 文書を執筆し、最後に HTML/PDF 文書にすることができように仕込んだ Gradle ビルド、フォントや CJK パッチ、.vscode 設定などをパッケージして github で公開しています。

https://h1romas4.github.io/asciidoctor-gradle-template/index.html

本文書は Asciidoc とその Ruby による実装である Asciidoctor を用いて Asciidoc 文書を執筆する環境を構築する手順を示します。実行環境は Windows、Linux、macOS の各 OS に対応しています。

上記のサイト(Asciidoc 文書のサンプルになっています)で詳しく手順を書いていますが、基本的にリポジトリを取得し、文書を書いて、 ./gradlew docs するだけでいい感じに Asciidoc を HTML/PDF 文書に変換して公開できるようになっています。

PDF 文書は次のようなものが出力されます。

AsciidoctorとGradleでつくる文書執筆環境(PDF版)

https://h1romas4.github.io/asciidoctor-gradle-template/index.pdf

PDF に関しては本文フォントを明朝体にできるとより技術書らしくなると思うのですが、残念ながら prawnpdf ライブラリが OpenType に対応していないため導入を断念しました。しかし、対応は進んでいるようなので期待します。

https://github.com/prawnpdf/ttfunk/issues/53

Hey there maintainers! I’ve been working for the last several months on supporting OpenType fonts, which really just means supporting the CFF font table.

さて、今回このプロジェクトを作成するにあたり初めて Asciidoc の書式を全て確認しましたが、表現力が高く、思ったことは思った通り書けばよい感じなのでお気に入りました。 😀

リポジトリを github に置けば Github Pages ですぐ綺麗な文書を公開できるようになりますので、良ければお試しください!

Visual Studio Live Share の活用

$
0
0

Visual Studio Code Advent Calendar 2018 の 16日目です。 🙂

今年もいろいろな分野で活躍してくれた VS Code でしたが、拡張として提供されている Visual Studio Live Share にもずいぶん助けられました。

Visual Studio Live Share は自分の Visual Studio から他の Visual Studio に接続してコード編集することを基本とするコラボレーション用の拡張です。ソースコード以外にも相手ホストのいろいろな機能に接続することができます。

  • ランゲージサーバーへの接続(相手の環境を使ってコード補完ができる)
  • プロジェクトファイル全体の grep 検索
  • 任意のポートにブラウザで接続
  • ターミナルに接続
  • デバッグ実行

自分の環境にソースコードや実行環境を持っていない状態でも、相手の環境を使って簡単にプログラミングを開始することが可能で、相手の環境で発生している不具合を手元で再現させながら修正するといったことが数分の準備で簡単に行えます。

接続はインターネット上に配置された Micsoroft の Live Share サーバーを介して行いますので、残念ながらクローズドな LAN 環境では使うことができませんが、代わりにルーターのポート開放など難しい設定なしに、どんな場所にいても機能を使うことが出来ます。

またクロスプラットフォームにも対応していますので、Windows から macOS に接続して動作させるようなことも可能です。ということで、いくつかの例を紹介してみたいと思います。

ランゲージサーバーとコンソール接続

Rust を編集している Linux をホストに Windows ゲストから接続して、Linux 上にあるソースコードと Rust Language Server に接続してみたところです。

補完も定義表示も相手の環境のものを使っていい感じに動作します。

Windows から Linux への bash の接続も OK で、ショートカットキーや Powerline の制御文字などもそのまま転送してくれます。相手の環境のコマンドがそのまま打てますので、Windows 側からビルドなんかもすることができます。すごい。

デバッガーへのアタッチ

ホスト側で起動したデバッガーにアタッチして、ゲストからステップオーバーやウォッチなどの操作をすることができます。 Linux / Rust / LLDB ホスト環境に Windows ゲストからアタッチした図です。

デバッグコンソールなども転送されてきます。

たとえば、Windows で動く LLDB を準備するのはちょっと大変ですが、このように Linux に接続できると簡単に環境を揃えることができます。(残念ながらゲスト側からデバッグの実行構成を起動することができませんでした。”The host doesn’t allow starting the debugger.” と言われてしまうので何かできそうな気がするのですが、引き続き調査してみます)

任意のポートにブラウザから接続

ウェブ開発をしている時に大きな力を発揮するのが、サーバーへのポート開放です。

今度は Windows で動作している Java ウェブアプリ環境に、macOS から接続してみます。Windows ホストに macOS ゲストから接続した上で、Live Share の Share Server を選択して、開けるポートを “localhost:8080” のように指定します。(この例は SpringBoot アプリケーションなので 8080 で起動します)

あとは macOS ゲスト側のブラウザから http://localhost:8080/ にアクセスするだけです。(localhost なのが不思議な感じですが VS Code がプロキシーして、ホストに接続してくれます)

macOS から Windows のターミナル(Powershell)に接続することもできますので、gradle を動かしてアプリケーションの起動停止をするようなこともでき、ソースコードを編集しながら、ブラウザで動作確認といったことがリモートで簡単にできるようになっています。

今年はお隣におられる方の環境につないでプログラムを修正したり、一番遠くは北海道・福岡間でプログラムの修正を行ったりしました。

特に不具合の修正では、それを手元で再現させる環境をつくるまでに時間がかかるものですが、VS Live Share を使えば不具合が起きている環境に接続してすぐ修正を開始することができます。(これができなかったら修正箇所が分らなかったのではないかということもありました。

VS Code はそれ自体の導入も手軽ですので、そのようなシチュエーションに出会ったら試してみてはいかがでしょうか。

あ、ひとつまえのポストも VS Code ネタですのでよければご一緒にどうぞ。。

AsciidoctorとGradleでつくる文書執筆環境

技術文書を書く環境が欲しくなり、VS Code と Gradle を使って Asciidoc 文書を執筆する環境を整えてみました。 お手軽に構成できて、300ペジくらいの文書でも耐えられそうです。

てなわけでまた来年もよろしくお願いいたします。。 🙂

YM2612 + SN76489 メガドライブ音源を ESP32 で鳴らす (SPI接続編)

$
0
0

メガドライブのゲームミュージックをどうしても今再び実チップで鳴らしてみたい…。DNA がそうしろと言っているのだからしょうがない。

あれこれ部品を集めてがんばっておりましたが、なんとか PCM 付きで YM2612(FM音源) と SN76489(PSG音源)を発声させることができましたので、顛末を少しずつブログに書いていきたいと思います。

ハードウェアは次のように構成しています。

  • YM2612 + SN76489(メガドライブ搭載音源)
  • ESP32 DevkitC(制御用マイコン)
  • MCP23S17(SPI I/Oエクスパンダー)
  • LTC6904 * 2(I2C クロックジェネレーター)

作成中のものでソースコードも未整理、まだ回路図も書いていませんが(結線だけ README.md にメモしてあります) github に一式コミットしてあります。一応、現段階のものでフルスピードで PCM 付き .vgm が再生できています。:)

https://github.com/h1romas4/esp32-genesis-player

構成ですが、ESP32 マイコンは GPIO が少ないのと、将来的に音源を増やしたり、PC からも音源制御をしたいと考え、SPI 制御の I/Oエクスパンダー MCP23S17 を使ってシリアルパレラル変換を試みています。

音源制御のマイコン部分は、実際にゲームから送信された音源制御コマンドを44100Hz でサンプリングして保存した VGM Format 形式を事前に準備して、マイコンからデーターを読み取り音源に送信する形式をとっています。

さて、このシリーズの最初の難関は SPI MCP23S17 を使って 44100Hz(22us) に間に合う形で音源にコマンドを送りつけることで、最初はどうやっても間に合わず途方にくれてしまいした。。

esp-idf SPI Master Driver の spi_device_transmit でコマンドを送信すると、50us 程度次のコマンドを送るまでに間隔があいてしまいます。いきなり企画倒れか!がびーん。

これはどうやら SPI Master Driver が FreeRTOS マルチタスクに対応しており、処理に mutex と割り込みを使っていてその時間が乗っかってきているという事情のようです。

このため杓子定規に音源制御シーケンスを、YM2612 データーバスをセットして、CS と WR を落として…というふうに MCP23S17 に送ると、音楽がものすごいゆっくりに…。かつ YM2612 は 6ch 目を PCM に割り当てることができ、PCM の大きいデーターをひっきりなしに送信しますので、PCM を活用した楽曲ではまったく太刀打ちできず。

ということで、まずは音源制御のコマンドをなるべくまとめて送信すべく、MCP23S17 のデーターシートを読んでいたところ、良さそうなモードを発見。

特殊なモード(IOCON.BANK = 0のバイトモード)にすると、関連付けられたA/Bレジスタペア間でアドレスポインタが切り換わります。例えばBANKビットをクリアし、アドレスポインタをアドレス12h (GPIOA)またはアドレス13h (GPIOB)に初期設定した場合、アドレスポインタがGPIOAとGPIOBとの間で切り換わります。アドレスポインタは最初レジスタペアのどちらのアドレスを指していてもかまいません。

MCP23S17 の I/O は GPIOA と GPIOB の 8本ずつに分かれていますが、これらに ひとつのSPI シーケンス中にコマンドを連続で送ると A->B->A->B… とくるくる回ってくれます。

MCP23S17 と YM2612 の接続を、GPIOB に YM2612 データバスに、GPIOA に制御系の足を接続として、次のようにコマンドをおくる用に修正。赤い線の中がひとつのSPI シーケンスのイメージです。

(下の図はプロトでつくった I2C 版 MCP23012 で行ったものなので速度は無視してください… I2C 版でも同じ動きになります)

最初(0xB1)にアドレスバス(GPIOB)をセットし、次に CS/WR を落として同時にA0/A1 を設定(0x04)、次は GPIOB に戻ってしまうので最初と同じデーターをセットし、最後に CS/WR を上げて完了です。ひとつの音源コマンドを、ひとつのSPI シーケンスで送れるようになりました。

また、YM2612 より SN76489 は遅く、このような最短シーケンスだと音源が反応できなかったので(WR を下げてから上げるまで 12us くらいいるみたいです)ダミーの同一データーをコマンドに挿入して時間待ちし、こちらも同じようにひとつの SPI シーケンスで送れるようにしています。

ということで、これにて 4つの SPI シーケンスがいるところをひとつにまとめられシーケンス間隔問題を 1/4 削減できましたが、依然としてまとめられないシーケンス間に 50us 程度間隔があいてしまう問題は残りました。

いくつか考えて、ダミーデーターを送り続けてシーケンスを繋ぎっぱなしにすればいいじゃないかと思いつきましたがちょっと普通にやるとコマンドのタイミングを取るのが難しそうです。 一応鳴るにはなりましたがテンポがずこっとなりがちでした。。

再び途方に暮れましたが、いろいろ調べていたところ ESP32 本家のサンプルで SPI の液晶コントローラーをつかった NES(ファミコン)エミュレーターがあることを思い出す。

既存のエミュレーター移植なので、最終的にメモリーにレンダリングされた 320x240x8bit という大量データーを 60fps で SPI で転送しているとすれば何かあるハズ…とソースを確認。

https://github.com/espressif/esp32-nesemu/blob/master/components/nofrendo-esp32/spi_lcd.c#L402

かくしてそこで見つけたのは ESP32 の SPI ペリフェラルを直接たたくソースでした。

ESP32 Technical Reference Manual とにらめっこで命令を理解しつつ、はたして…。

1コマンド 7us キター! 😀

YM2612 は実際には 2コマンドで1セットなので 14us になりますが 1サンプルには十分間に合っていますのでこれで大丈夫そうです。(ここもまとめようと思えばできるハズです)

そんなこんなでメガドライブ楽曲が実チップで鳴るところまでごきつけました。嬉しい…。ベアナックル2が奏でられてしばし放心…。

タイムリーなことに、ぼくのゲームミュージック好きの原点にして頂点である古代祐三さんが MUCOM88 音源ドライバーをベアナックル2を含むサンプル曲付きで CC 公開されており、mucom MML を VGM に変換するプログラム mucomMD2vgm を kumatan さんが公開されています。

現時点残念ながら mucomMD2vgm で変換した .vgm はぼくの vgm パーサーだと unknown のコマンドがでてしまってまだ完全に発声できないのですが、おそらく vgmpos ずれだと思うのでちょっと直してみたいと思います。

他にも回路図をかいたり、基板をおこしたり、クロックを安定させたりまだ仕事が残っていますので、引き続きこの未来ガジェット製作をやっていきたいと思います。:D

関連

ESP32/M5Stack の開発環境構築(esp-idf と Arduino Core)

$
0
0

ESP32/M5Stack 開発環境構成の整理がてら構築手順をまとめてみました。Arduino IDE は使わずに VS Code でプログラムがかけるところまで書いてみます。

Windows 向けに書いていますが、ツールチェインの導入部分が異なるだけで他の OS でも基本的な考え方や手順は同じです。

当初 Windows 上の WSL(Windows Service for Linux)を使い Linux 用のツールチェインを使っていたのですが、コンパイルがちょっと待てないくらい遅いので普通の Windows 向けツールチェインを使うように変更しました。 🙂

ひとつずつ確認しながら進む手順になっていますので、フルコンパイルが何度かかかり少し時間がかかりますがご勘弁を。慣れてきたら飛ばしてやってください。

WSL から Windows のツールチェインに変更してもどうにも Linux と比較してコンパイルが遅いので、さくさく開発を求める方は生か仮想の Linux 上で作業するといいかもです。なお、現在開発版(v3.2)の esp-idf にはプレビューとして CMake ベースのWindows のツールチェインが提供されており、将来的にネイティブの cmake/gcc 構成になるようなのでコンパイル速度は恐らく今後改善されるのではないかと思います。

本記事では以下の文書を参考に make 時に -j4 オプションをつけて CPU コアを活用してコンパイル時間を改善した手順となっています。(8コアの方は -j8 にしてください) Windows Defender をお使いの場合、プロジェクトフォルダを監視から外すのも有効なようです。

[Advice] Boost ESP-IDF Compile time on Windows 10

I have been building ESP-IDF projects for a while now, and as many of you I think have noticed, compile time on Windows 10 is VERY slow.

I just want to share some steps i have done to boost ESP-IDF project compile time on Windows 10.

ESP32/M5Stack の開発系の構成

ESP32/M5Stack オフィシャル開発系の構成は次のようになっています。

  • xtensa-esp32 – ツールチェイン(gccクロスコンパイラ+転送ツール等) Windows/Linux/macOS 用に分かれています。
  • esp-idf – ESP32 用のフレームワーク(ライブラリ)
  • Arduino Core for the ESP32– ESP32 で Arduino 風の関数やコンポーネントを使うライブラリ(要 esp-idf)
  • M5Stack-IDF – M5Stack から提供される esp-idf + Arduino Core + M5用のライブラリー

Arduino Core for the ESP32 に関しては esp-idf の追加コンポーネントのような形となっていますので ESP32 開発で必須なのは上の2つです。

拡張として Arduino Core は esp-idf に依存し、さらに M5Stack は Arduino Core に依存しているという構成になります。(といってもプロジェクトテンプレートがうまくできているので導入は簡単です)

ツールチェインの導入

まずコンパイラや周辺ツールを含むツールチェインを導入します。

Windows 上の任意の場所に開発系の作業フォルダー(ここでは C:\develop\esp)を作成しダウンロードしたツールチェインの .zip を展開します。執筆時点では esp32_win32_msys2_environment_and_toolchain-20180110.zip でした。

Toolchain Setup

展開できたら C:\develop\esp\msys32 の形にフォルダーを移動して、C:\develop\esp\msys32\mingw32.exe をダブルクリックして起動します。

mingw32 が起動したらホームディレクトリに作業用のディレクトリを作成してカレントディレクトリを移しておきます

$ mkdir ~/esp
$ cd ~/esp

なおこれらの Windows 的なファイルの実態は C:\develop\esp\msys32\home\[ユーザー名]\esp になります。またツールチェイン(コンパイラ)は C:\develop\esp\msys32\opt\xtensa-esp32-elf にあり事前にパスが通っています。

esp-idf の導入

引き続き mingw シェル上で次のコマンドから esp-idf を導入します。(こちらも最新情報は次のリンクを確認してください)

Get ESP-IDF

$ cd ~/esp
$ git clone -b v3.1.3 --recursive https://github.com/espressif/esp-idf.git

git clone で指定している v3.1.3 が esp-idf のバージョンになります。ディレクトリ esp-idf が作成され esp-idf が格納されます。

次にソースファイルの Makefile で指定されている IDF_PATH 環境変数に上記で得られた esp-idf のパスを設定します。

公式では mingw 上のシェル環境に設定することになっていますが、Windows 側で設定した方が後述の VS Code からも見ることができるので、システム詳細設定でユーザ環境設定で IDF_PATH を追加します。

新規ボタンで IDF_PATH を追加し C:\develop\esp\msys32\home\[ユーザー名]\esp\esp-idf を設定します。できたらいったん mingw32 シェルを exit で落として、 C:\develop\esp\msys32\mingw32.exe をダブルクリックして再起動し設定を反映させます。

$ echo $IDF_PATH
# 設定した値が取れれば OK!
C:\develop\esp\msys32\home\hirom\esp\esp-idf

M5Stack の場合はこの後は飛ばし、手順「M5Stack テンプレート のコピー」まで進んでください。

esp-idf 開発の テンプレートとなる hello world ソースファイルをコピー

引き続き mingw32 シェル上で、テンプレートとなるソースファイルをコピーして開発の準備をします。

$ cd ~/esp
$ cp -r $IDF_PATH/examples/get-started/hello_world .
$ cd hello_world
$ make menuconfig

make 設定のメニューが表示されますのであれば必要な設定をします。(ここでは Component Config > ESP32-specific > CPU frequrncy で CPU クロックを 160MHz から 240MHz に変えてみました)

<Exit> で終了させると sdkconfig が更新されますのでいったんここでコンパイルしてみます。 sdkconfig 更新後のコンパイルはフルコンパイルになりますので少し時間がかかります。

$ make -j4
# エラーがでなければコンパイル成功
To flash all build output, run 'make flash' or:
python /mnt/c/develop/esp32/esp-idf/components/esptool_py/esptool/esptool.py --chip esp32 --port /dev/ttyS3 --baud 115200 --before default_r
eset --after hard_reset write_flash -z --flash_mode dio --flash_freq 40m --flash_size detect 0x1000 /mnt/c/develop/esp32/hello_world/build/b
ootloader/bootloader.bin 0x10000 /mnt/c/develop/esp32/hello_world/build/hello-world.bin 0x8000 /mnt/c/develop/esp32/hello_world/build/partit
ions_singleapp.bin

Arduino Code を使わずに esp-idf のみで開発する方はこの手順で終了です。この後は飛ばし、手順「プログラムの転送」まで進みます。

Arduino Core テンプレートのコピー

ESP32 で Arduino Core を使う場合は、次のコマンドでプロジェクトに Arduino Core コンポーネントを追加することができます。上記で配置した ESP32 テンプレートプロジェクトに Arduino Core を追加してみます。

To use as a component of ESP-IDF

$ cd ~/esp/hello_world
$ mkdir -p components
$ cd components
$ git clone -b 1.0.0 https://github.com/espressif/arduino-esp32.git arduino
$ cd arduino
$ git submodule update --init --recursive
$ cd ../..
$ make menuconfig

git clone で指定している 1.0.0 が Arduino Core for the ESP32 のバージョンになります。もし後述の make が通らないようであれば esp-idf と Arduino Core の依存バージョンが不整合していますので最新の情報を確認してみてください。

この手順では esp-idf v3.1.3 と Arduino Core 1.0.0 の組み合わせを使っています。 Arduino Core 1.0.1 は esp-idf v3.2(現在rc) に依存するため v3.1.3 だとコンパイルエラーとなります。将来の手順は esp-idf v3.2 と Arduino Core 1.0.1 以降の組み合わせになるでしょう。

Arduino Core コンポーネントを追加すると menuconfig に「Arduino Configuration」が追加されますので「Autostart Arduino setup and loop on boot」を enable にします。プログラムを loop/setup の Arduino 構成でかくことができるようになります。

また、デフォルトの sdkconfig であると Flash の容量が 2M 設定になっているので「Serial flasher config」から「Flash Size」を 4M に変更します

最後に Arduino Core で C++ の例外ハンドリングに依存しているソースがありますので設定を有効化します。「Compiler Options」から「Enable C++ Exceptions」

exit して menuconfig を終了させ sdkconfig を保存します。

Arduino Core を使った場合の main/hello_world_main.cpp は次のようになります。

ESP32 のテンプレートは hello_world_main.c と C になっていますので .cpp にリネームします。実ファイルが C:\develop\esp\msys32\home\[ユーザ名]\esp\hello_world にありますので任意の Windows 操作でリネーム、ファイルの編集を行います。

#include "Arduino.h"

void setup() {
    Serial.begin(115200);
}

void loop() {
    Serial.println("loop");
    delay(1000);
}

ソースファイルを変更後 make してみてコンパイルが通れば成功です。(Arduino Core が大きいので初回コンパイルには結構時間がかかります)

$ make clean # 手順の流れで ESP32 でコンパイルしているのでいったんクリーン 
$ make -j4
# エラーがでなければ OK!
To flash all build output, run 'make flash' or:
python /home/hirom/esp/esp-idf/components/esptool_py/esptool/esptool.py --chip esp32 --port /dev/ttyUSB0 --baud 115200 --before default_reset --after hard_reset write_flash -z --flash_mode dio --flash_freq 40m --flash_size detect 0xe000 /home/hirom/esp/hello_world/components/arduino/tools/partitions/boot_app0.bin 0x1000 /home/hirom/esp/hello_world/build/bootloader/bootloader.bin 0x10000 /home/hirom/esp/hello_world/build/hello-world.bin 0x8000 /home/hirom/esp/hello_world/build/default.bin

Arduino Code のセットアップはこの手順で終了です。「プログラムの転送 」まで進みます。

M5Stack テンプレートのコピー

M5Stack の場合は、M5 が事前に準備してくれている git リポジトリをクローンすることで Arduino Core と M5Stack-IDF コンポーネントが入った hello world テンプレートプロジェクトを得ることができます。

$ cd ~/esp
$ git clone --recursive https://github.com/m5stack/M5Stack-IDF.git
$ mv M5Stack-IDF/ hello_m5stack # 分りやすい名前にリネーム
$ cd hello_m5stack
$ make -j4
# ウイザードでいろいろ質問がありますが全て ENTER で OK
# コンパイル完了後、エラーがでなければ OK!
To flash all build output, run 'make flash' or:
python /home/hirom/esp/esp-idf/components/esptool_py/esptool/esptool.py --chip esp32 --port /dev/tty.SLAB_USBtoUART --baud 115200 --before default_reset --after hard_reset write_flash -z --flash_mode dio --flash_freq 80m --flash_size detect 0xe000 /home/hirom/esp/hello_m5stack/components/arduino/tools/partitions/boot_app0.bin 0x1000 /home/hirom/esp/hello_m5stack/build/bootloader/bootloader.bin 0x10000 /home/hirom/esp/hello_m5stack/build/app-template.bin 0x8000 /home/hirom/esp/hello_m5stack/build/default.bin

初回コンパイルは少し時間がかかります。

プログラムの転送

コンパイルしたプログラムをマイコンへ転送してみます。

ESP32 Devkit もしくは M5stack を USB で PC に接続すると Windows 10 であれば自動的に認識して COM ポートが増えます。

COM ポート番号を覚えて make menuconfig から Serial flasher config でポートを設定します。

保存したら準備完了です。次のコマンドでプログラムの転送後リセットがかかりプログラムが動作します。 ハローハッピーワールド!

$ make -j4 flash monitor
# フラッシュ後起動すれば OK!
Flashing binaries to serial port COM3 (app at offset 0x10000 )...
esptool.py v2.6
Serial port COM3
Connecting....
Chip is ESP32D0WDQ6 (revision 1)

なお、起動後のシリアルモニターは ctrl + ] で停止することができます。

VS Code によるソースの編集とコンパイル

ここまでの手順でコンパイルとフラッシュができるようになりましたので、これを Visual Studio Code でソースの編集とともにできるようにします。

VS Code インストール後、拡張機能「ms-vscode.cpptools」を導入します。

次に編集したいプロジェクトを VS Code で開きます。(ここでは先ほどつくった C:\develop\esp\msys32\home\[ユーザ名]\esp\hello_m5stack フォルダを開いています)

プロジェクトフォルダーに上のように .vscode/settings.json を新規作成しワークスペース設定を次のようにします。

{
    "terminal.integrated.shell.windows": "C:\\develop\\esp\\msys32\\usr\\bin\\bash.exe",
    "terminal.integrated.env.windows": {
        "MSYSTEM": "MINGW32",
        "CHERE_INVOKING": "1"
    },
    "terminal.integrated.shellArgs.windows": [
        "--login"
    ],
    "C_Cpp.intelliSenseEngine": "Default"
}

設定後、統合ターミナルを開くと mingw32 がターミナルで使えるようになります。初回起動時は変更の可否を聞いてきますので「許可」して、再度統合ターミナルを起動し直してください。

mingw32 窓と同じ操作ができるようになりますので、make flash monitor してコンパイルからのフラッシュが VS Code 上からできるようになります。

次に C/C++ のコード補完ができるように 拡張機能「ms-vscode.cpptools」を設定します。先ほどつくった settings.json と同じ階層に c_cpp_properties.json を新規作成し次のように設定します。

{
    "configurations": [
        {
            "name": "ESP32",
            "includePath": [
                "${workspaceRoot}/**",
                "${IDF_PATH}/components/**",
                "${IDF_PATH}/../../../../opt/xtensa-esp32-elf/**"
            ],
            "cStandard": "c11",
            "cppStandard": "c++17"
        }
    ],
    "version": 4
}

設定後ソースファイル(main/main.cpp)を開くとソースコード補完などができるようになります。

portTICK_PERIOD_MS などのビルド時に生成される一部の define が vscode にエラー申告される場合はソースコード上部に以下のコードをいれると良いでしょう。(__INTELLISENSE__ 定数は vscode のインテリセンス実行時のみ設定されます)

#ifdef __INTELLISENSE__
#include "build/include/sdkconfig.h"
#endif

ここまでで環境構築はおしまいです。

さて、便宜上プロジェクトフォルダーを mingw32 配下(C:\develop\esp\msys32\home\[ユーザー名]\esp)において作業を進めましたが、設定完了後は Windows 上の任意の位置に配置できますのでお好みの場所に移したりコピーしたりしてください。(なお、フォルダーを移した場合はいったん make clean した後 make してください)

ESP32/M5Stack の資料

開発系のオフィシャル資料は次から参照することが出来ます。

  • ESP-IDF Programming Guide – esp-idf プログラミングガイド。ページトップが lasted バージョンのドキュメントになっていますので、必ず画面左下の選択が stable(お使いのバージョン) になっていることを確認してください。(結構 API 変わっています)
  • ESP32 Technical Reference Manual – ESP32 ハードウェアに直接アクセスする場合など、EPS32 そのものについて記載があるテクニカルマニュアルです。
  • Arduino Core for the ESP32 – ESP32 特有のドキュメントは見つけられなかったのですが、component/arduino の中にソースといくつかの example がありますのでなんとかなるかと思います。 🙂
  • M5Stack Arduino API – M5Stack 特有の LCD やスピーカーなど拡張された便利な API の記載があります。

ESP32 はドキュメントがしっかりしていて使いやすいですね。

てなわけで hello happy coding!

YM2612 + SN76489 メガドライブ音源を ESP32 で鳴らす (クロックジェネレーター編)

$
0
0

すごいぞメガドライブミニ!(収録ソフト2回目発表後)

というわけで「YM2612 + SN76489 メガドライブ音源を ESP32 で鳴らす (クロックジェネレーター編)」です。この記事で使われているソースコードや結線などは github で公開しています。

https://github.com/h1romas4/esp32-genesis-player

esp32-genesis-player (work in progress)

メガドライブの音源となっています YM2612 と SN76489 はそれぞれ 7.670453MHz と 3.579545MHz で動いていますが、3.579545MHz のクリスタルオシレーターの入手は容易であるものの、7.670453MHz みたことない。。

というわけでクロックジェネレーターを使うにあたって起きた顛末です。

LTC6904

最初に試したのは I2C で任意のクロックを設定できる LTC6904 で、YM2612 を鳴らしている海外勢の方々もよく使われているチップです。

LTC6904 データシートおよび製品情報 | アナログ・デバイセズ

シリアル・ポートでプログラム可能な1kHz~68MHz発振器

MSOP パッケージでしたので DIP 変換して動作させています。(老眼には厳しいはんだ付けでした。。。

I2C 的には ADR(4) でアドレスを 1bit 分設定できるので 2つまで同時にぶら下げることができます。 この機能を利用して YM と SN 用でふたつ接続しました。

このチップで最初につまずいたのが I2C による周波数の設定がうまくいったりいかなかったり… 具体的には I2C のコマンドが ACK が返ってこないことがあって原因が分からず。

I2C のプルアップ値などを変えたりいろいろためしていったところ、どうやら発振している間はコマンドが失敗することが多かったので OE(7) を L に落としてからコマンドを送ることで確実に受け付けるようになりました。

次にでた問題は I2C のコマンドは通るものの、クロック周波数が設定値にならないパターンです。

7.67MHz を設定するものの 8MHz くらいになったりで、、これについては最後まで原因不明。。電源を入れたりリセットしたりしているとうまくいくのですが、なにぶん 2こ接続しているので両方がぴたっと揃う確率が低く… テストしすぎて絶対音感に目覚めるところでした(目覚めない)

パスコンなどの入れ方が悪いのか?電源を変更してみよう?などいろいろ試行錯誤したのですが残念ながら安定させることができませんでした。

ちなみに Arduino 向けの LTC6904 ライブラリーを書いている方の ソースコード を見ていたところ次のようなコメントアウトを発見。いったん完全に電源を落としてから 100ms 待つというのが NECESSARY TO USE となっているので、もしかするとちょっと癖があるのかもしれません。

// NECESSARY TO USE
//#define pwrpin PORTC2
//#define gndpin PORTC3
//DDRC |= _BV(pwrpin) | _BV(gndpin);
//PORTC &amp;=~ _BV(gndpin);
//PORTC |=  _BV(pwrpin);
//delay(100); // wait for things to stabilize
//Wire.begin();

Si5351A (AE-Si5351A-B)

次に試したのは秋月さんで売っている AE-Si5351A-B でこちらはうまく動きました。 🙂

LTC6904 同様に I2C で周波数を設定できるクロックジェネレーターになっています。残念ながら I2C アドレスはひとつに固定ですが、3ch 分のクロックを取り出すことができますので、YM と SN で 2ch 使っています。

クロックの設定方法が秋月さんの取扱説明書に記載されていますが、基本は PLL / Multisynth という式の割り算でほしいクロックをつくれば OK です。少数も使えますがなんとなく整数値で次のようにしています。

# 本当は PLL(4725) / Multisynth(616) で正確
YM2612(7.670453MHz)  PLL(675) / Multisynth(88) 
SN76489(3.579545MHz)PLL(630) / Multisynth(176) 

AE-Si5351A-B はリセット後などの操作でも安定して動作させられましたのでこちらを使うことにしました。

動作確認用に簡略化されていますが、LTC6904 と Si5351A とも esp-idf 用のソースコードを github においてあります。

以上、というわけで部品が定まりましたのでいよいよ次回は基板をつくっていきたいと思います。 🙂

関連

Viewing all 96 articles
Browse latest View live