Glaejaでウィジェットを作ってみる、その1

前回予告した通り、これから何回かにわたって、
Glaejaの初心者向けチュートリアルを書きます。
ド文系のわたしでも、がんばったらこんなウィジェットを作れたよ！
しり込みしているあなたにも、きっとできるよ！という内容になる予定。

そも、Glaejaとはなんぞや

作者サイトより引用。

『Glaeja』 はカスタマイズ可能な情報表示ウィジェットです。

「日付と時刻 / 天気予報 / バッテリー状態 / RAMとストレージ容量 / 通話とWiFi情報 / 音量情報 / 次回アラーム日時」といった各種情報を、

「テキスト / バー / サークル / ハンド / イメージ」で表現し、

「シャドウ / ミラー / グラデーション / 変形 / 画像合成」のような特殊効果をかけることができます。

引用元：BANANAWANI MICOM. CULB: [Android] Glaeja (ver.4.x)

と、文章での説明だけでは分かりにくいか。
orefolderさんがまとめてくださっている、Glaeja Skinsをご覧ください。
これらのウィジェットは、全てGlaejaを使って作られたものです。



Glaejaとは、ナイスな情報ウィジェットをホーム画面に置きたいとき、
Google Playや各種アプリ紹介サイトで探してインストールするのではなく、
自分で好きなものを作っちまえ！ということが実現できるアプリです。

Glaejaの編集画面

しかし、Glaejaのほぼ唯一にして最大の欠点が、ここで大きな壁となって立ちはだかる。
それはズバリ、編集方法がとっつきにくいことである。
例えば、わたしが初めてGlaejaで作った、よつばと！風（？）ウィジェット。



これの編集画面はこんな感じでした。



なるほど、分からん。
「サークル　幅　半径」なんかは、どれかの円を示しているんだろうと推測できるが、
「リッチテキスト　'BAT'　#S#」とか。いったいなんなんだ。

つまりですね、Glaejaでウィジェットを作るためには、
写真デコアプリで、スタンプをぺたぺた押していくような感じで、ここに時計！
そして時計の大きさはこのぐらいに2本指でピンチアウト！　とかではなく、
ほぼ全てを文章で、それもかなり独特な記法で書いていく必要があるのです。

まーでもここで諦めちゃいけない。
もうちょっとだけがんばってみようぜ。

まずGlaejaをインストールして
お手持ちのAndroidのホーム画面にウィジェットを新規作成してください。
サイズはなんでもいいよ。とりあえずよく使う横4×縦1あたりにしとこうか。



「スキンを選択」というダイアログが出たなら、「デフォルトスキン」を選んでください。
で、ホーム画面に設置されたウィジェットをタップすると、こんな感じの画面になるはず。



福島の注文住宅ってなんだよ。そんなもん買う予定ないよ。
さらに「スキンの編集」をタップすると、こんな感じの画面に。



すでにサンプルとして何かが書かれたレイヤーが作られています。
さっき見た「いったいなんなんだ」的な何かが書かれています。
が、とりあえずそれは無視して、ロングタップから削除してしまおう。

いよいよ編集を始めてみる

改めて「新規追加」をタップ。
まずは単純な文章を表示させてみようと思うので、
一番上の「テキスト」レイヤーを選んでください。
新規追加されたテキストレイヤーをタップすると、こんな感じに。



「表示文字列」に書かれている「'new'」。
上のプレビューの左ちょい上に、これがそのまま「new」と、
灰色の文字でうっすら表示されているのがお分かりだろうか。

先に、分かりやすく文字の色を替えておきますか。
下にスクロールすると、「文字の色」という選択肢があります。
そこをタップして、好きな色に。今回は真っ赤にしてみた。
改めてプレビューを見てみると、文字の色が！　変わった！



そこで「表示文字列」をタップして、中身を好きに書き換えてみる。
プレビューを見てみると、表示文字列が！　変わった！



それ以外の編集項目もいじってみる。
（インストールされていれば）フォントを変えたり、
文字サイズを変えたり、縁取りを付けたり、
水平・垂直位置や傾きを変えたり、いろいろできます。
使わない編集項目は、項目タイトルをタップすると縮めておけるので、便利。



と、Glaejaの基本機能はこんな感じになっております。
なんとなく仕組みが理解できただろうか。

ここまでのまとめ

1. まず、表示したい内容に沿ったレイヤーを選ぶ。
2. 表示したい内容を記述する。
3. フォントや位置や傾きを調整する。

基本的にはこれの繰り返しで、
欲しい情報のパーツと、それを彩るパーツとを組み合わせて、
ウィジェットを作っていきます。

ここでは触れませんでしたが、テキストを表示するにも、
部分ごとにフォントや色を変えられる「リッチテキスト」レイヤー、
複数行にまたがった記述ができる「マルチラインテキスト」レイヤー、など。

また、図形を描きたければ「サークル」レイヤーや「多角形」レイヤー、
さらにそこに効果を付ける「シャドウ」「ミラー」「グラデーション」レイヤー、
などなどなどなど、レイヤーの種類は激しくたくさんあります。

詳しい解説は、作者サイトを参照のこと。
ぶっちゃけわたしはまだ全ては理解してない。
というか理解できているレイヤーのほうが少ない。
パステキストとかスプライトとか、使ったことねえしな。

しかし待てよ、と考えたあなたは、なかなか鋭い。

さて、自分の書いたものをそのまま表示する方法は分かったが、
それでは例えば時計なんかはどうするんだろう。
そのときの時間によって、表示されるべき内容は刻々と変わっていくのだから、
ここで説明した方法だけでは対処できないだろう。

時計のほかにも日付表示とか、よくあるところではバッテリ充電率とか。
そうした、携帯のそのときの状況を自動的に読み出して表示させる記法が
Glaejaにはもちろんちゃんと準備されていまして。

例えば、上で「いったいなんなんだ」と思った「#S#」を覚えているだろうか。
これは実は、充電中なら「charging」、充電がいっぱいなら「full」などと、
バッテリの充放電状態を表示するものなんだな。


次回は、こうした、情報を読み出して表示させるための
「エスケープキャラクタ」について解説していきます。