サポート › アプリのスキンとカラーテーマを作成・編集する方法
基本的なデザインスキルがあれば、AllMyNotes Organizer 用のスキン/テーマを作成できます。作り方の詳細は以下をご覧ください。新しいスキン作成を応援するため、次の2つの条件を満たす場合は AllMyNotes Organizer の Deluxe Edition ライセンスも提供しています:
1. スキンやテーマ、またはその一部が、アプリへの同梱や当社サイトでの公開に適する品質であること。少なくとも、ほかのスキンに取り入れたいと感じる価値ある要素が含まれていること。
2. グラフィックの元ファイル (.psd ファイル) を提供してください。新しい画像要素やアイコンを追加することが多いため、このファイルがないとスキンを継続的にメンテナンスできません。
--- AllMyNotes Organizer 用スキンの作り方 (ドラフトガイド) ---
スキンファイルは c:\Program Files\AllMyNotes Organizer\Skins older にあります。現在は Holy Crown と Deep の2つのスキンがあり、それぞれ別のフォルダーに保存されています。
各フォルダーには2つのファイルがあります:
1. SkinInfo.ini - スキンのすべての色と各種サイズ設定が含まれています。
2. グラフィック要素を含む.png ファイル。このビットマップ内のコントロール座標は SkinInfo.ini に保存されています
新しいスキンを作成するには:
1. 既存のスキンの1つを別のフォルダーへコピーします
2. コピーした SkinInfo.ini の FileDescription 項目でスキン名を変更します。フォルダー名とスキン名を同じにしておくと分かりやすいです。基本的な準備はこれで完了です。あとは色を変更したり、ビットマップを描き直したりできます。
その他のヒント:
1. 通常、私たちは PhotoShop の .psd 形式でスキンを作成しています。強力な効果、レイヤー、透明度を活用できるためです。スキンのビットマップ編集が完了したら、スキン用 .png ファイルへ書き出します。.png ファイルだけで作業することは強くおすすめしません。制作者にとって負担が大きく、将来の拡張もしにくくなります。
2. 素材が必要な場合は Vladonai Software までお気軽にご連絡ください。既存スキンで使用したグラフィック素材の提供や、追加のヒント・経験の共有が可能です。
ビットマップと SkinInfo.ini の内容は見れば分かるように作られており、項目名も分かりやすく、ビットマップには新しいスキン作成を簡単にするためのラベルも付けています。ツールバー、メニュー、ボタン、ツリーなどのアイコンの意味を知りたい場合は、お問い合わせください。詳しい説明や追加素材を喜んで提供します。
P.S. 画像の座標が SkinInfo.ini ファイルにどのように対応するか、簡単な図の例はこちらです:
SkinInfo.ini の構造
SkinInfo.ini は、Name=Value 形式の行で構成されたプレーンテキストファイルです。スキン情報、カラーテーマ、色、テキストエディター、寸法、フォント、ビットマップの対応表（SB_* のすべての項目）というセクションに分かれています。** または // で始まる行はコメントです。古い値を削除せずに残しておきたい場合に便利です。色は #RRGGBB（Photoshop からそのままコピーできます）または R,G,B の形式で指定できます。#FFFFFF と 255,255,255 は、どちらも同じ白色を表します。
ProjectSignature と RequiredAppBuildNumber は変更しないでください。これらは、AllMyNotes 用のスキンであることと、必要なビルド番号をアプリに伝えるための設定です。FileDescription は変更できます - メニューに表示されるスキン名です。
カラーテーマ：1つのスキンで20通りの雰囲気
スキンの見た目は1種類だけではありません。ThemeEffects_N の各行は、いわばレシピです。テーマを読み込むと、アプリはスキンのビットマップを取得し、画面に何かを描画する前に、左から右の順に画像フィルターを適用します。ディスク上の .png ファイル自体は一切変更されません。Holy Crown が1枚の画像から Sepia、Gold、Coffee、Blueprint、Night Vision の各テーマを提供できるのは、この仕組みのおかげです - ビットマップは1枚だけ、追加の描画作業も不要で、Photoshop は何も知らないままです。
書式は、まずテーマ名を二重引用符で囲み、その後に | で区切ったエフェクトを並べます。ThemeEffects_Default（名前なし）はスキン自体に適用されます。テーマには 1、2、3... と欠番なく番号を付けてください。アプリは最初に欠番が見つかるまで読み込むため、欠番より後に配置されたテーマは警告もなく無視されます。ThemeEffectsM3_N の行も同じ仕組みですが、AllMyNotes 3 以降が必要です。カラーテーマは Deluxe エディションの機能です。
たった1行で白から黒へ
明るいスキンのダーク版を作りたいですか？ピクセルを1つも描き直す必要はありません。INVERTBRIGHTNESS は色相を保ったまま明暗を反転するため、青は青のまま、夜勤に入るだけです。普通の INVERT では青までオレンジ色になってしまいます - 最初の1分は楽しくても、そのうち目から苦情が出るでしょう。SCALELUMA を加えて真っ黒になるのを防ぎ、さらに GRAYSCALE を少し加えて、暗闇で突然輝き始めた色を落ち着かせましょう：
Holy Crown に付属する "Night Vision Glow" と "Night Vision Gray" も、まさにこの方法で作られています。文字色にも注意してください。フィルターが変更するのはビットマップだけで、色のセクションで指定した値はそのまま残ります。暗くなった背景に暗いグレーの FontColor を組み合わせれば、自分のメモを自分から隠すという、実に上品な仕上がりになります。
連続して適用できるエフェクト
| エフェクト | 効果 |
|---|---|
| AUTOLEVELS | 明るさの範囲を 0-255 全体に広げます。いわば「色あせた感じを減らす」ボタンです。 |
| GRAYSCALE | 色を取り除きます。GRAYSCALE40 なら色を40%だけ減らします。一瞬で真面目なビジネスモードに切り替わります。 |
| SEPIA | 古い写真のような色合いになります。昨日書いたメモが、突然1890年に書かれたもののように見えます。 |
| INVERT, INVERTBRIGHTNESS | INVERT はすべての色を反転します（写真のネガのように）。INVERTBRIGHTNESS は明暗だけを反転するため、ダークテーマに適しています。 |
| BLUEPRINTLIGHT, BLUEPRINTDARK | BLUEPRINTLIGHT / BLUEPRINTDARK - エンジニアの設計図のような外観です。これを見れば橋でも建てられそうなメモになります。 |
| ADJUSTLEVELS | ADJUSTLEVELS:min,max,midSrc,midDst (0-255) - 中間調を調整します。0,255,150,110 では中間調が暗くなり、0,255,150,190 では明るくなります。 |
| BRIGHTNESSCONTRAST | BRIGHTNESSCONTRAST:b,c (-255..255, 0 = 変更なし)。名前のとおり、明るさとコントラストを調整します。 |
| HUESATURATIONLIGHTNESS | HUESATURATIONLIGHTNESS:h,s,l - 色相のシフト範囲は -360..360、彩度と明度はパーセントで指定します。色相を180回転させると、スキン全体の色が色相環の反対側へ移ります。 |
| REPLACECOLOR | REPLACECOLOR:#from,#to,fuzziness - ある色を別の色に置き換えます。許容範囲 0..180 で、どの程度「似ている」色まで対象にするかを指定します。Holy Crown の Gold、Coffee、Pink、Sea の各テーマは、#to の値を変えただけの同じ仕組みで作られています。 |
| SCALELUMA | SCALELUMA:min,max (0-1000) - 明るさを指定範囲に圧縮します。250,950 = よりくっきりした表示、0,500 = 明るさを最大でも半分に抑える設定で、夜型の人にぴったりです。 |
| SCALESATURATION | SCALESATURATION:min,max (0-1000) - 彩度について同じ調整を行います。最小値を上げると、淡い色にも力強さが生まれます。 |
主な要素と、変更すると何が起こるか
Holy Crown の設定項目をいくつか取り上げ、それぞれが何を制御し、変更するとどうなるかを説明します：
| 設定項目 | 変更される内容（および副作用） |
|---|---|
| WindowBackgroundColor=#DAE1F0 | すべてのパネルの背後にある背景です。変更すると、部屋の壁紙を張り替えたように、アプリ全体の雰囲気が変わります。 |
| FontColor=#636363 | メインの文字色です。ViewBackgroundColor と同じ値に設定すれば、透明インクの完成です - 秘密を守るには最高ですが、作業効率には向きません。 |
| MenuFontColor=#6080BD MenuSelectionColor=#a9beef MenuBackgroundColor=#FAFAFA | メニューの文字、マウスポインターの下に表示される選択バー、メニューの背景です。選択色を派手にすれば、メニューを開くたびに小さなディスコが始まります。 |
| TextEditorSelectionColor=#f6d595 TextEditorInactiveSelectionColor=#f8ebd3 | メモ内でドラッグして文字を選択したときのハイライト色です（非アクティブ用の色は、エディターにフォーカスがないときに使われます）。暗い色を選ぶと、コピーしたいその瞬間に選択文字が読めなくなります。 |
| TreeOutlineColorHighlighted=#D0BF91 | ツリー内で選択されたフォルダーを囲む角丸の枠線です。控えめな「現在地はこちら」の目印になります。 |
| DistBetweenControls=4 DistBetweenCtlAndBorder=5 | パネル間、およびパネルとウィンドウの端の間隔をピクセル単位で指定します。4 ならコンパクトで快適ですが、40 にするとパネルが大陸のように離れていきます。 |
| FontNormalName=Amelian.TTF FontMenuName=segoepr.ttf FontEditName=TENAHB48.TTF FontWndTitleName=Orbitbn.ttf FontWndTitleBolded=TRUE FontHintName=Amelian.TTF | スキンには、5か所で使用する独自のフォントを指定できます。通常のUI文字（FontNormal）、メニュー（FontMenu）、メモエディター（FontEdit）、ウィンドウタイトル（FontWndTitle と FontWndTitleBolded=TRUE）、ツールチップ（FontHint）です。これらの設定がない場合は、システムフォントが使われます。.ttf ファイルはスキンフォルダー、または Windows の Fonts フォルダーから読み込まれます（Segoe Print の segoepr.ttf はここにあります）。メニューに Segoe Print を使うと、ちょうど1日くらいは魅力的に感じられるでしょう。ウィンドウタイトルに Orbitbn.ttf を使うと、もう少し長い間、宇宙船の操作パネルのような気分を味わえます。...Size の設定も引き続き有効ですが、文字サイズはアプリ自体の設定からずっと簡単に変更できるようになりました。そのため、スキンにはフォントの種類だけを選ばせ、サイズはユーザーに任せるのがおすすめです。 |
| SkinBitmap=HolyCrown.png SB_Button_NormalCoord=69,108 SB_Button_LeftPieceWidth=10 SB_ScrollBarWidth=16 | SB_ で始まるすべての項目は、.png 内の領域を参照します。Coord は要素の左上のピクセルの x,y 座標で、LeftPiece / Fill / RightPiece の幅は画像の分割方法を指定します。両端はそのまま描画され、中央の塗りつぶし部分は引き伸ばされます。.png 内のピクセルを移動せずにここでサイズだけ変更すると、アプリは間違った位置で画像を切り出してしまいます - スキンのピカソ時代の始まりです。 |
変更内容をすばやくアプリで確認する
AllMyNotes が SkinInfo.ini と .png ファイルを読み込むのは、起動時と、スキンメニューでスキンまたはテーマを選択したときの2回のタイミングだけです。ファイルを保存しただけでは何も変わりません。ただし、調整のたびにアプリを再起動する必要はありません：
1. SkinInfo.ini を編集（または .png をエクスポート）して保存します。
2. スキンメニューで別の任意のスキンまたはテーマを選択してから、自分のスキンまたはテーマを再度選択します。選択するたびにディスク上のファイルが読み直されるため、2回目のクリックで変更が反映されます - 往復約1秒です。
すでにチェックが付いているスキンをもう一度選択しても、何も起こりません - アプリは親切にも「変更する必要はない」と判断するからです。必ず一度別のスキンに切り替えてから戻してください。
メニューのスキン一覧は、1回の起動につき一度だけ作成されます。そのため、新しいスキンフォルダーを追加したり、スキン（FileDescription）やテーマの名前を変更したりした場合は、AllMyNotes を一度再起動すると新しい名前が表示されます。また、自作スキンが突然 Holy Crown とまったく同じ外観になった場合は、ファイルの読み込みに失敗して標準スキンに戻った可能性があります - 最後に変更した行を確認してください。
ヒント：Skins フォルダーは Program Files の下にあるため、Windows によって保存が拒否される場合があります。エディターを管理者として実行するか、スキンが通常のフォルダーに保存されるポータブル版で作業してください。
注意: Lite Edition で使用できるスキンは2種類のみですが、Deluxe ではさらに多くのテーマを利用できます。
楽しんでください! :-)