テーマの基本　その２
（雛形編）

テーマの基本　その１（情報編）では、テーマを作る上で必要な情報について説明しました。
ここでは、取得した情報を使って、プログラムの骨格紹介しようと思います。

プログラムの雛形

テーマはJavaScriptというプログラミング言語（スクリプト言語）で記述しますので、どんな感じの記述なのかを最初に紹介します。

プログラミング経験者がみると、「こんなとこから始めるの？」と言われそうな感じですが、自信を持ってここから始めます。

function renderBatteryとありますが、renderBatteryという名の関数宣言です。
renderBatteryの後ろのカッコ内に７つの単語が並んでいますが、これこそが取得できる情報なのです。
って優香、これだけでもう取得できているのです。

そして、取得した情報を使って、{}内にいろいろな処理を記述し、テーマとして作り上げていくわけです。

しかし、実際にテーマファイルとするには、このままでは通りません。
以下のように書き換える必要があります。

これで、Lithium Ionが認識できる形になりました。
ついでに、（）内の情報名も短くしておきました。
情報名は、お好きな名前で構いませんが、私は、意味がわかる程度に短くしました。
重要なのは、情報を受け取る名前ではなく、情報を受け取る順番なので、順番さえ守れば名前なんかどうでも良いことになります。
実際にインストールされたテーマを見てみると、アルファベット１文字で受け取っています。
ですので、情報を受け取る名前は好きにして頂いて構いませんが、必ずその名前を使ってプログラミングをしてください。

これを基に、プログラミングを進めていきましょう。

舞台を用意する

Lithium Ionのテーマは、JavaScriptで記述するため、かなり自由度の高いテーマを作ることができます。
そのテーマは、ステータスバーの上で活躍するのですが、ステータスバーに直接登場するわけではありません。
実際には、JavaScriptで描画したバッテリーを画像にし、その画像を表示しているのです。
ですので、JavaScriptでバッテリーを描画することに意識を向けていきましょう。

「描画する」ということは、「どこに？」という疑問が浮かんでくると思います。
ステータスバーに直接描画しないため、当然の疑問だと思います。
実は、描画するための「舞台」が必要なのです。
つまり、テーマを作るということは、描画する舞台を用意するところから始めます。


では、舞台を用意しましょう。
HTML5より、JavaScriptで描画できるようになりました。
HTML5の機能の１つなのですが、「canvas」というJavaScriptから図形を描くことができるものがありますので、これを「舞台」として描画します。

canvasはHTMLで用意されるものなのですが、Lithium IonのテーマはJavaScriptしか受け付けませんので、canvasもJavaScriptで用意します。
JavaScriptでHTMLの要素である<canvas>を作成するには、以下のように記述します。
document.createElement("canvas")
用意した<canvas>に図形を描画するのですが、最終的には画像を書き出さなくてはなりません。
そのために、用意した<canvas>に名前をつけることにします。
そうすることで、プログラミングしやすくなりますし、説明もしやすいのです。
ある意味、「儀式」のようなものだと思ってください。
・・・という訳で、ここでは<canvas>の名前をcanvasにします。
プログラムに書くと、こんな感じです。
canvas = document.createElement("canvas"); これで、やっと舞台が用意できました。

<canvas>の幅を指定するには、widthを使うのですが、名前を使うことで、以下のように書くことができます。 canvas.width = xx; 楽チンですね〜。

せっかく舞台を用意するのですから、幅だけでなく高さも指定してあげないと失礼ですよね。
高さはheightで指定しますが、せっかくステータスバーの高さを取得できているので、高さ一杯の舞台を用意してあげることにします。
幅も高さと同じにして、正方形の舞台にしましょう。
では、実際にテーマファイルとして記述すると、以下のようになります。
(height, percent, charge, low, lpm, m_color, b_color) {

　var canvas = document.createElement("canvas");
　canvas.height = height;
　canvas.width = height;

}
「var」となっている部分を赤色にしておきました。
これも儀式のようなもので、初めて出てくる名前には必ず付けるようにしましょう。
「出生届」のようなものだと思ってください。

これで、舞台が用意できました。

描画機能を有効にする

正方形の舞台が用意できました。
ここから、canvasにJavaScriptで記述していくのですが、もう１つ手続きがあります。
canvasという名前を付けましたが、描画機能自体はまだ無効なので、有効にしなければなりません。
描画機能を有効にするには、以下のように記述します。
canvas.getContext("2d"); そのまま読んでいただければ正解なのですが、canvasのコンテキストを取得することで、描画機能が有効になります。
これも「儀式」のようなものですので、「コンテキスト」は気にしないでください。
ただ、こうすることによって、本当の「キャンバス」を手に入れることができたのです。
あとは、描くだけの状態になったのです。

ここまでのプログラムは、以下のようになります。
(height, percent, charge, low, lpm, m_color, b_color) {

　var canvas = document.createElement("canvas");
　canvas.height = height;
　canvas.width = height;
　var ctx = canvas.getContext("2d");

}
取得したコンテキストには「ctx」という名前を付けました。
儀式として、「var」も付けてます。
これで「ctx」に対して描画するお膳立てができました。

雛形の完成

canvasのコンテキストを取得することで、描画機能が有効になりました。
これで、もう描画できるのですが、テーマとしては完成していません。

JavaScriptで描画するのですが、描画したものを画像にするところまで作らないと、表示してくれないのです。
そこで、キャンバスを画像で返すおまじないを追加します。
(height, percent, charge, low, lpm, m_color, b_color) {

　var canvas = document.createElement("canvas");
　canvas.height = height;
　canvas.width = height;
　var ctx = canvas.getContext("2d");
　　　　　　・
　　　　　　・
　　　いろいろな処理
　　　　　　・
　　　　　　・
　return canvas.toDataURL("image/png");
}
これで、一連の流れが形になりました。

作るテーマによっては、キャンバスの大きさを変えなければなりませんが、これを雛形とします。