艦これ風ホーム画面を作ろう!その9 モジュールを作る リッチテキスト モジュール
今回はプログラミング未経験な方にはちょっと難しいかもしれません。
リッチテキストモジュールを使った動的に変化する文章を作っていきます。
できるだけわかりやすく解説していきたいと思います。
目次
rt リッチテキスト モジュール
このリッチテキストモジュールはアプリ内の説明にあるように普通のテキストと違い、スクリプトが使えます。
それを使うことで動的な文字列を表示できるようになります。
具体的には現在時刻を表示したり不在着信数を表示したりできます。
モジュールとしてはテキストでも事足りる場合でも今後何か実装したくなることがあるかもしれないので基本的にリッチテキストを使っています。
(多分処理的には多少テキストのほうが軽い。)
予定
モジュール名 予定
基準位置 中央
Xオフセット -70
Yオフセット 20
モジュールのタップ スケジュールアプリ(僕はジョルテ使ってます)
高度なテキスト編集 [b]予定[/b]
サイズ 17
色 #ffffffff
フォントの種類 ipaexm
ここでの高度なテキスト編集に使っている[b]~[/b]
は囲った文字を太文字にするものです。
htmlで使う<b>~</b>
タグと同じ太字(ボールド)ですね。
@予定フレア@
当日にスケジュールがある時にひと目で分かるように予定の文字の周辺にフレアをつけます。
モジュール名 予定フレア
基準位置 中央
Xオフセット -70
Yオフセット 20
モジュールのタップ スケジュールアプリ
高度なテキスト編集 $#C0SMd#=#DMd?[b]予定[/b]$
サイズ 19
色 #001aadaf
フォントの種類 ipaexm
ぼかし 50
色 #f31aadaf
$で囲った部分は式になります。ここでは=の左辺と右辺が同じ場合?以降を記述となります。
次に#C0SMd#
は
C(カレンダーの)0(0番目の)S(スケジュールの)M(月と)d(日)という数字になります。
0番目とはプログラミングの世界では1番目のことです。
例えば11月3日に誕生日とあれば、『113』となります。
そして右辺の#DMd#はDが現在の、となり、M、dは上記と同じです。
今日が11月3日なら113となります。
左辺、右辺ともに113であれば?以降が表示され、『予定』の文字が浮き上がります。
ちなみに実は、スケジュールが少ない場合は1月13日と11月3日が同じ結果を出力してしまい誤作動が起きますので、完璧なスクリプトではありません……。
気になるようであれば左辺と右辺それぞれ月と日の間に文字を入れれば解決します。
残りは予定と同じ要領で文字列とXオフセットだけ変更していきます。
SNS
モジュール名 SNS
基準位置 中央
Xオフセット -30
Yオフセット 20
高度なテキスト編集 [b]SNS[/b]
サイズ 17
色 #ffffffff
フォントの種類 ipaexm
ブログ
モジュール名 ブログ
基準位置 中央
Xオフセット 17
Yオフセット 20
高度なテキスト編集 [b]ブログ[/b]
サイズ 17
色 #ffffffff
フォントの種類 ipaexm
ファイル
モジュール名 ファイル
基準位置 中央
Xオフセット 82
Yオフセット 20
高度なテキスト編集 [b]ファイル[/b]
サイズ 17
色 #ffffffff
フォントの種類 ipaexm
ストア
モジュール名 ストア
基準位置 中央
Xオフセット 149
Yオフセット 20
高度なテキスト編集 [b]ストア[/b]
サイズ 17
色 #ffffffff
フォントの種類 ipaexm
未読メール
いよいよ動的に内容が変わる文字列を表示させます。
モジュール名 未読メール数
基準位置 中央
Xオフセット -32
Yオフセット -20
モジュールのタップ メールアプリ(Inbox)
高度なテキスト編集 \[b\]\[c=#1eadaf\]未読メール[/c] $(#SUG#+#SUG1#)$[/b]
サイズ 13
色 #ffffffff
フォントの種類 ipaexm
[c=#000000]~[/c]
は囲った文字のカラーを指定のものにします。
$(#SUG#+#SUG1#)$
の
#SUG#
はGメールの第一アカウントの未読メール数
#SUG1#
、#SUG2#
と数字を変えると第二、第三アカウントに変えられます。
ここでは僕は第一、第二アカウントの未読メール数の合計を表示するようにしました。
不在着信
同様に不在着信も作ります。
モジュール名 不在着信
基準位置 中央
Xオフセット 56
Yオフセット -20
モジュールのタップ 電話アプリ(ダイヤル)
高度なテキスト編集 \[b\]\[c=#1eadaf\]不在着信数[/c] #SMCALLS#[/b]
サイズ 13
色 #ffffffff
フォントの種類 ipaexm
#SMCALLS#
は不在着信数ですね。
バッテリー
モジュール名 バッテリー
基準位置 中央
Xオフセット 128
Yオフセット -20
高度なテキスト編集 [b]$#BSTATN#=2?[c=#9f9]$#BLEV#$#BSTSTN#=2?[/c]$[/b]
サイズ 13
色 #ffffffff
フォントの種類 ipaexm
ここの高度なテキスト編集は一見複雑に見えるかもしれませんが、一つ一つ見ていけば案外単純です。
まず#BSTATN#
はバッテリーステータスを数値で返します。
- 不明
- 充電中
- 放電中
- 充電していない
- 満充電
3と4の違いがいまいち分かりませんが、今回は充電中かどうか分かればいいので問題ありません。
次に#BLEV#
は充電率を%付きで表示(バッテリーレベル)。
(%なしは#BLEVN#
)
それらを組み合わせて、充電中の時は充電率の%表示を緑色にする、という式になってます。
色を変える[c]
タグの開始タグ終了タグそれぞれを条件式で表示させる制御をしています。
応用すればバッテリーレベルが少ない時に赤文字にするなんてこともできますね。
電波
モジュール名 電波
基準位置 中央
Xオフセット 171
Yオフセット -20
高度なテキスト編集 [b]$#NWSTATE#=2?#NWSIG#:#NCSIG#$[/b]
サイズ 13
色 #ffffffff
フォントの種類 ipaexm
#NWSTATE#
はWiFiの状態を返します(ネットワークステート)
- 無効
- 有効
- 接続
#NWSIG#
はWiFiの強度を返します。9が最高、0が最低。(ネットワークシグナル)
#NCSIG#
はモバイルネットワークの強度。99~0(セルラーシグナル。単位はASU)
ぶっちゃけて言うと、この項目はとりあえず格好だけで作ったのでそこまで意味はありません。
ちょっと面倒ですが、数式でうまくやれば%表示に置換したり、よくある電波の階段の表示にすることもできるでしょう。
ちなみに今回の書き方の、$A=B?C:D$
というのは、
AがBならCを表示、そうでないならDを表示という意味です。
今回はここまで。ちょっと多くて、複雑で大変だったかもしれません。
次回は画像モジュールです。