ESDoc が生成するディレクトリをリポジトリから除外する。これはローカルにだけ必要なもの。

音楽プレーヤー UI を実装する。ウィンドウ上部に固定され、以下のコントロールを持つ。

• Play/Pause button
• Previous music button
• Next music button
• Volume slider
• Playtime seek bar
• Playtime text
• Duration text
• Metadata ( title, artist, ...etc ) text
• Add music button
• Remove music button

To add a file to define the virtual type.

Remove the AppContext dependence of RendererIPC.

export default class RendererIPC {
  constructor( context ) {
  }
}

RendererIPC is not dependent on a specific AppContext. Should be a simple IPC message handler.

Implement the load and display of the jacket image.

• The load image is output as a file
  • Using a SHA-1 hash value for the unique file name
  • e.g. 124a4bfb4ad90d4d8340f109c6185e0f405694f3.jpg
• Image save in userData / images
• Display the image to the left of the player UI

electron-starter-v1.0.3 をリリースする。

Util.js のディレクトリ変更による影響。

Electron を v0.33.4 に更新する。他の npm も現時点の最新にしておく。

Starter として、なるべく本番に近い構成にしておくと手直しが少なくて済むので、パッケージ生成 npm-scripts でバージョン情報リソースも含めておく。

会社名などは Sample Inc. でよい。example.com みたいにサンプルとして使用することが共有されている名前があれば、それにしたい。

サンプルとして全て英語コメントに統一する予定だったが漏れている箇所あり。

Renderer の自動コンパイルと同様に watchify と Source Maps の pipe を使用しているので。

Display When you delete a music remains. Because of the state management of Store.

透過していたつもりが、そうなっていなかったので修正する。iDraw で元 PNG 生成した時点でおかしかったのかも。背景色に白が指定されていた可能性あり。

order of the music is not in the order of track.

1, 2, 3, 4, 5, 7, 6, 8

Value named originally "disc" is in the "disk". This is because it has followed the musicmetadata.

To fix to the original "disk" and because it causes confusion.

It should of offsetHeight is in offsetWidth.

v1.0.2 リリースにあわせて npm の更新と動作確認を実施する。

audio-player プロジェクト開発で気づいた問題。

Util.test.js にて power-assert を import しているが、参照する変数名を assert ではなく Assert にしていることが原因。

electron-starter v1.0.1 をリリースする。

npm の更新と追加、React.render を ReactDOM.render の置き換えなどを実施する。

mplement an audio effectors.

現在、リリース用ビルドで生成されたパッケージにもメイン メニューに Debug があり、Renderer の Reload や Debugger 表示を実行できてしまうので、これを外したい。

開発中は有効にして、リリース時はコード自体を削除する。コードが残っているとなにかの拍子に表示されてしまう可能性がある。

いわゆるコンパイル スイッチ的なことが Browserify で実現可能か調べる。ifdef DEBGU 的なものは uglify-jsで顧客とのアプリ確認をもっと楽に！ : アシアルブログ のような方法もあるが、開発中に watchify ごとに uglify するのが非効率そうで v1.0,0 では却下したという経緯がある。

Electron アプリ開発の基盤環境となるプロジェクトを作成する。設計方針は以下。

• 環境設定は package.json に集約
• electron-packager によるパッケージ生成に対応
• AltJS = ES6 & React JSX
  • browser/renderer プロセスの両コードを ES6 で実装可能にする
• AltCSS = Stylus
• AltJS/AltCSS のファイル監視と自動コンパイルに対応
• ESDoc によるコード ドキュメント出力対応
• ...etc

Update node modules.

NW.js で実装した examples-nw/audio-player を Electron に移植する。

音声ファイルのメタデータ読み込みは Main プロセス、再生などは Renderer といった設計分離のサンプルとしてよさそうなので。NW.js のように ffmpeg 組み込みが必要か？など環境面も調査する。

あと NW.js 版では音声ファイルのバイナリ読み込みとデコードも Web Audio API で実装したが、この方法だとメモリ一括展開となるためロスレス AAC のように巨大なファイルでエラーになる。これを防ぐため AudioContext.createMediaElementSource() を試す。

Implement the Artist/Album list.

• Show artist list on the left side
• Display the image of the top album that belong to the artist
• Show below the album list
  • Album image
  • Album title
  • Release year
  • Music list ( playback state, title, duration, ...etc )

IPC のハンドラ名は Main/Renderer プロセス間で共有される。また現在のプロジェクト構成では src/js/common/ に共有スクリプトを配置するよう設計し、既に Util クラスを共有している。

以上を踏まえ、ハンドラ名を定数化して src/js/common/ 内へ定義し、それを共有するように実装する。これは IPC のサンプルとしてもよい設計となるはず。

electron-starter-v1.0.2 をリリースする。

Implementation of the audio-player project organize the reference.

Release the audio-player-v1.0.1.

はてなブックマーク - Electron を試す 2 – パッケージ化におけるプラットフォーム固有処理とコンパイル分岐 | アカベコマイリ で Windows のパッケージ化に wine が必要との情報あり。

electron-builder の README にもそのような説明が書いてあるので、これを入れて現在のビルドが通るか試す。

サンプルのアイコンにおける下地の円が大きすぎるので、OS X 標準の App Store アプリぐらいのサイズへ縮小する。

Display a tool tip below.

• Music title
• Artist name
• Album name

electron-packager としては --icon オプションに .ico ファイルを指定した場合、Windows 用のアイコン設定がおこなわれるはずだけど、現在の Starter に含めたファイルだとエラーになる。

これを解決し、アイコンを設定したい。

Because the better to directly operate the IPC easy to manage.

Preparation to support #45. Adding a process for the effector and ease of management.

Expected value has become 32 but 30. Drawing process of problem.

Required settings such as the text-overflow.

Implement audio visualizer.

• Frequency spectrum of an audio can be referenced from AudioPlayerStore.spectrums property
• What should be the location where you want to display?
• Display method is good both Canvas and React compnent?

electron-starter v1.0.0 をリリースする。

Implement the utility classes for operating the Web Storage.

音楽リストを実装する。データ管理と UI が対象。NW.js 用サンプルを踏襲しつつ、可能なら固定ヘッダーのテーブルにしたい。

Finish message dialog appears when you do not select the file.

1. Push the import button
2. Close the dialog without selecting a file
3. Finish message dialog is displayed

audio-player の #22 対応で musicmetadata を Main プロセスから実行したところ例外が起きた。

原因を調べたところ package.json の browser フィールドにスクリプトが指定されていた場合、Browserify の bundle 時における require ではそれが Web ブラウザ向けのエントリー ポイントとして扱われるとのこと。

このため bundle された musicmetadata は Node モジュールとして動作せず、結果 window オブジェクトが見つからないという例外が発生する。

通常の Node モジュール、つまり package.json の main フィールドをエントリー ポイントにする場合は --node オプションを指定して browser フィールドを無視する必要あり。

Main プロセスは Node モジュールとして動作することが期待されるため、electron-starter の当該ビルド設定も修正しておく。