Android SDK Tools v25から、公式GUIツールのandroid(android.bat)が非推奨になり、起動しようとしてもメッセージが出て代わりに**CUIならsdkmanagerを使え！GUIならAndroid Studioを使え！**と出るようになりました。
個人的にはSDKの操作のためにわざわざAndroid Studioを立ち上げるのは億劫だったため、公式GUIは非常にありがたかったのですが・・・。

ないものは作れ。

ということで、GUIを自作してみることにしました。

作ってるもの

GitHubで公開中です。

Android SDK GUI
https://github.com/kuluna/androidsdkgui

といっても現時点(0.0.2)ではできることがAndroid Studio未満です。
ミニマムゴールは公式GUIとほぼ同じぐらいの使い勝手、プルスウルトラで視認性の良さやソートといった機能が追加できればいいなぁと思っています。

技術選定

まずツールとして最低限抑えておかなければならないのとして下記があります。

Android SDKを操作できる
ツールからローカルにあるsdkmanagerを実行できるようにしなければなりません。Webブラウザアプリではだめということですね。
クロスプラットフォームに対応できる
Windows、mac共にGUIツールが非推奨となってしまったので、両方に対応する必要があります。

この2つを考慮した結果、両方ともクリアできしかも割と最近の開発手法の恩恵を得られるものとして選んだのが**Electron**です。

Electronであればローカルの実行ファイルを実行することができますし、クロスプラットフォームも容易に対応できます。そして最近のWebの技術も使うことができます。

Webのフロント側ですが、現在Angularを勉強中なのでAngularで書くことにしました。

electron-forgeを使う

とはいえ最近のWeb側のカオスさもあるので極力コードを書くことに集中しつつ、めんどそうなのはよしなにやってくれそうなのはないかなーと探した結果、**electron-forge**を見つけましたのでこれを使っています。

electron-forgeを使えば、初期プロジェクトの作成から、開発モード実行(ライブリロードON)、パッケージ化までを全部やってくれます。
プロジェクトのテンプレートにAngularもあるのでまさにぴったりです。(もちろんReactやVueもあります)

Angularの場合はこのコマンドでプロジェクトが作成できます。

npm install -g electron-forge
electron-forge init my-new-project --template=angular2
cd my-new-project
electron-forge start

あとは普通にAngularでWebを開発するのと同じ感じでごーりごーり書いていきます。
普通のWebと違うのはchild-processとかをインポートできるところですね。child-processを使うことによってローカルのファイルを実行できます。

プロジェクト作成後にやるといいもの

Angularのバージョンアップ

まずAngularのバージョンを最新版にします。package.jsonを開き、@angularとついているものを最新バージョンにします。

package.json

{
  "@angular/common": "^4.3.5",
  "@angular/compiler": "^4.3.5",
  "@angular/core": "^4.3.5",
  "@angular/platform-browser": "^4.3.5",
  "@angular/platform-browser-dynamic": "^4.3.5"
}

@angular/router の追加

アプリ内でページ遷移をする場合はAngularでルーティングするライブラリを追加します。

npm install @angular/router --save

次にルーティング情報を書きます。通常はHTML5のHistoryAPIを使ってURLを書き換えるのですが、リロードした際はindex.htmlしかないので404になってしまいます。
なのでルーティングの方法をHistoryAPIではなく、URLの後ろにハッシュ(#)をつける方法に変更します。
useHash: trueとすることで変更できます。

approuting.module.ts

import { RouterModule, Routes } from '@angular/router';
.
.
.

const routes: Routes = [
  { path: '', redirectTo: 'sdk', pathMatch: 'full' },
  { path: 'avd', component: AvdComponent },
  { path: 'sdk', component: SdkComponent },
  { path: 'setting', component: SettingComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

あとは作成したモジュールを読み込ませれば完了です。

app.module.ts

import { AppRoutingModule } from './approuting.module.ts';

@NgModule({
  imports: [
    AppRoutingModule,
    BrowserAnimationsModule,
.
.
.

さいごに

Electron + Angularでやりたいことを実装できつつ、新しい開発手法で開発できているのでelectron-forge割とよさげです。

ただパッケージ化にwebpackとかを使っておらず、どうもTypeScriptで書いたものをそのまま実行できるように作っている感じがします。
アプリ実行時にいちいちトランスパイルする分パフォーマンスはどうかなと思ったのですが、今開発してる分に関してはあまり問題なさそうに感じます。