テーマに関する情報

テーマに関する情報

概要 #

いわゆるスキン的なもの。ツールバーの色や背景画像などを変えることができます。

テーマは2chMate内蔵の「昼」と「夜」のテーマをベースにして、変更したい部分だけをJSONで記述し、決められた場所にJSONのファイルを配置することで、2chMateから利用可能になります。

※一般的にJSONでは数値を16進数で記述(“0xff0000” など)したり、/* コメント */ のようなコメントを書くことは許されていませんが、2chMateではこのような “壊れた” JSONも一応読み込めます

※このページには未実装の情報も含まれています。すべて使えるとは限りません。

※指定しなかった部分は、デフォルトの色が使われます。特に指定する必要が無いものは指定しないことをおすすめします。

テーマを使うデメリット #

  • 壁紙を使うと通常よりもメモリを多く使います。(Android 4.0未満など古い端末ではおすすめしません)
  • テーマを読み込むために起動が若干遅くなります 。
  • 半透明が使われたテーマではスクロール時の負荷が高くなります。(壁紙とスクロール時の負荷はあまり影響はありません)

2chMateへの認識のさせ方 #

  • /sdcard/2chMate/theme 以下に任意の名前でフォルダを作り、ファイル名に .day または .night を含むファイルを置く
    • 例) /sdcard/2chMate/theme/俺専用テーマ/俺専用テーマ.day
    • .day は標準の昼テーマをベースにしたテーマです。白背景に黒文字の場合は.dayを使います
  • 一つのフォルダには1つのテーマしか入れないこと
    • 1つのフォルダに複数のファイルを置くと、複数のテーマが認識されるがこの使い方はおすすめできない。2chMate上でテーマを削除するとフォルダごと削除されるため(予定)

ZIPで配布するとき #

ZIPのファイル名 #

  • ファイル名を *_theme.zip にする (*の部分には _ を含まないようにする)
    • foo_bar_theme.zip はNG ( _を2つ含んでいるから )
    • fooBar_theme.zip や foo-bar_theme.zip は OK

ファイルの中身 #

  • フォルダの下に theme-name.day や theme-name.night を配置する
  • フォルダの名前は他人のデータとぶつからないようにする
    • ikeno-sample-theme/theme-name.day など
    • 同じ名前のフォルダはインストール時に上書きされる
  • フォルダ名が同じものをインストールすると、既存のテーマはフォルダごと削除される
  • フォルダの下にさらにフォルダを作ってはいけない(そのファイルはコピーされない)
  • 1つのZIPファイルのルートに複数フォルダが含まれていた場合、すべてのフォルダがインストールされる

ファイル名の文字化け問題 #

残念ながらJava標準のZIPライブラリがUTF-8でエンコードされたファイル名しか扱えないため、一般的なWindows用アプリでZIPファイルを作成すると、テーマ名の日本語部分が文字化けしてしまいます。

Android上で ZIP を作成する場合は、文字化けの問題は発生しないと思われます。(「ES ファイルエクスプローラー」が問題なく利用できました)

Windowsの場合「ExpLZH」が利用可能でした。ExpLZH の場合「ツール」「オプション」「圧縮オプション」「ZIP」を開き、「Unicodeファイル名をUTF-8にエンコードして格納」と「すべての2バイトファイル名をUTF-8にエンコーディングする」にチェックしてください。

色を設定できる箇所一覧 #

バージョンにより異なります。

  • 全体
    • windowBackgroundColor
    • windowBackground
    • actionbarBackgroundColor (>Android 3.0)
    • secondaryColor ステータスバー(>Android 5.0) (0.8.6.17)
  • プログレスバー
    • progressBarBackgroundColor
    • progressBarPrimaryColor
  • タブバー
    • tabbarTopBorderColor
    • tabbarHighlightColor
    • tabbarLightColor
    • tabbarDarkColor
    • tabbarShadowColor
    • tabbarBottomBorderColor
    • tabbarTextColor
    • tabbarTextShadowColor
  • タイトルバー
    • titlebarTopBorderColor
    • titlebarHighlightColor
    • titlebarLightColor
    • titlebarDarkColor
    • titlebarShadowColor
    • titlebarBottomBorderColor
    • titlebarBackground
    • titlebarTextColor
    • titlebarTextShadowColor
  • ツールバー
    • toolbarTopBorderColor
    • toolbarHighlightColor
    • toolbarLightColor
    • toolbarDarkColor
    • toolbarShadowColor
    • toolbarBottomBorderColor
    • toolbarTextColor
    • toolbarTextShadowColor
    • toolbarTabColor
    • toolbarBackground
    • toolbarBackgroundV
  • テキスト
    • textPrimaryColor
    • textSecondaryColor
    • textEmphasisColor
    • textHitBackgroundColor
  • リスト
    • listCategoryTopBorderColor
    • listCategoryHighlightColor
    • listCategoryLightColor
    • listCategoryDarkColor
    • listCategoryShadowColor
    • listCategoryBottomBorderColor
    • listCategoryTextColor
    • listBackgroundColor
    • listDividerColor
    • listPopupBackgroundColor
    • listPopupShadowColor
    • listPopupBorderColor (0.8.5.20、Dark系で値が0の場合はstateFocusedTopColorが設定される)
    • listActivatedBackgroundColor
    • cachedItemTextColor
  • 未読マーク
    • unreadBorderTopColor
    • unreadBorderBottomColor
    • unreadBackgroundTopColor
    • unreadBackgroundBottomColor
    • unreadTextColor
    • unreadTextShadowColor
  • レス
    • resHeaderTextColor
    • resAnchorTextColor
    • resBodyTextColor
    • resCategoryTopBorderColor
    • resCategoryHighlightColor
    • resCategoryLightColor
    • resCategoryDarkColor
    • resCategoryShadowColor
    • resCategoryBottomBorderColor
    • resCategoryTextColor
    • resHeaderEmphasisTextColor
    • resHeaderBackgroundColor
    • resCheckedBackgroundColor
    • resMarkedBackgroundColor
    • resReplyBackgroundColor
    • resDividerColor
  • リンク
    • linkTextColor
    • linkBackgroundColor
    • link2chTextColor
    • link2chBackgroundColor
    • linkImageTextColor
    • linkImageBackgroundColor
  • テキスト入力枠
    • editTextColor
    • editBorderTopColor
    • editBorderBottomColor
    • editBackgroundColor
    • editBackgroundShadowColor
    • editHighlightBackgroundColor
  • ダイアログ
    • dialogTitleColor
    • dialogBackgroundColor
    • ratingColor0 ~ ratingColor5
  • 状態
    • stateFocusedTopColor
    • stateFocusedBottomColor
    • statePressedTopColor
    • statePressedBottomColor
  • メニュー(タブレットのタブのメニューや、タイトルバーやツールバーのメニューボタンで表示されるメニュー)
    • menuDividerColor (0.8.5.20) マテリアルデザインベースの場合のみ有効な値。
    • 全体

設定できる値 #

  • ~Color
    • ARGBの値
      • 赤 0xffff0000、 緑 0xff00ff00、青 0xff0000ff
      • 透明度128/255の緑 0x8000ff00
  • ~Background
    • ファイル名
    • ファイル名の後ろに記述できるパラメータ
      • #tile 縦横に繰り返して
      • #tileX 横方向だけ繰り返す
      • #tileY 縦方向だけ繰り返す
      • #fit 画面の画素数に合わせる
      • #left #right #top #bottom #center 画像の位置を寄せる。#tileは無効になる。
      • #xhdpi 320dpiの画像として扱う
      • #hdpi 240dpiの画像として扱う(一般的なWVGA端末でリサイズなしで表示される)
      • #mdpi 160dpiの画像として扱う(おすすめできない)
    • windowBackground の例
      • “bg.png”
      • “bg.png#fit”
      • “bg.png#tile”
      • “bg.png#right#bottom”
      • 未指定時は自動的に “テーマ名.png#fit” になる
      • #right など位置が指定された場合、余白は windowBackgroundColor で塗られる
    • titlebarBackground、toolbarBackground の例
      • “titlebar.png”
      • “titlebar.png#tileX”
      • 指定すると各種Colorは無効になる

ツールバーのボタン一覧 #

書き込みボタンの場合 “edit.png” が使われる。

  • scroll (空白ボタン)
  • edit (書き込み)
  • autoScroll (自動スクロール)
  • listController (リストコントローラ)
  • reload (リロード)
  • stop (停止)
  • orderRes (レス順)
  • orderTree (ツリー順)
  • orderRecent (履歴)
  • orderThreadBoard (板順)
  • popupRecent (履歴ポップアップ)
  •   :
  • property (未使用)
  • search
  • pageUp
  • pageDown
  • home (未使用)
  • mark (未使用)
  • board (未使用)
  • share (未使用)
  • menu

ツールバーのボタンのサイズについて (2013-11-19) #

0.8.5.22 から、テーマが制作された解像度と使用する端末の解像度が異なっていても適切なサイズで描画されるようになりました。以前はhdpi端末で作られたテーマをxhdpi端末で表示すると、ボタンが小さく表示されてしまいましたが、今後はそのようなことはありません。

ボタンの画像を作成する場合は以下のサイズで作成することで、各端末で正しく表示されます。

  • mdpi 端末を基準にする場合
    • ~50px
  • hdpi 端末を基準にする場合
    • ~75px
  • xhdp i端末を基準にする場合
    • ~100px
  • xxhdp i端末を基準にする場合
    • ~150px

端末のdpiについて (2013-11-19) #

端末とざっくりとしたdpi。実際の値は tDpiInfo (Google Play) などで調べられます。

  • mdpi (160dpi)
    • 4インチで 480x320
    • 7インチで 1024x600
    • 10インチで 1280x800
  • tvdpi (212dpi)
    • 7インチで 1280x800
  • hdpi (240dpi)
    • 3.5~4インチで 480x800, 540x960
  • xhdpi (320dpi)
    • 4~5インチで 720x1280
    • 7インチで 1920x1200
    • 10インチで 2560x1600
  • xxhdpi (480dpi)
    • 5インチで 1920x1080