Creating Skins スキンを作成する

What You Needあなたが必要なもの

An enhanced text editor with code highlighting makes a big difference.強調表示されたコード付きの強化されたテキストエディタは大きな違いを生む。

Here's what you need to create Rainmeter skins:これが、Rainmeterスキンを作成するために必要なものです。

  1. Rainmeter.Rainmeter。
  2. A text editor.テキストエディタ

And that's all. No extra software or materials of any kind are required.そしてそれだけです。追加のソフトウェアや材料は一切必要ありません。

Text Editorテキストエディタ

That being said: while you can edit skins using Windows' built-in text editor, Notepad, we strongly recommend downloading an enhanced text editor, such as Notepad++, Sublime Text or Atom. These applications come with powerful features like tabs, auto-completion, embedded file browsers and more. You can even download extensions that add Rainmeter-specific code highlighting, which makes it much faster and easier to read a skin's code and spot errors.それは言われています：あなたは Windowsの内蔵テキストエディタ、Notepadを使ってスキンを編集することができますが、我々は強くNotepad ++、Sublime TextまたはAtomのような強化されたテキストエディタをダウンロードすることを勧めます。これらのアプリケーションには、タブ、自動補完、埋め込みファイルブラウザなどの強力な機能が備わっています。Rainmeter固有のコードの強調表示を追加する拡張機能をダウンロードすることもできます。これにより、スキンのコードを読み、エラーを発見することがはるかに速く簡単になります。

For more information, see Notepad Alternatives.詳細については、「代替メモ帳」を参照してください。

Image Editor画像エディタ

Depending on the kind of skin you want to make, you may also want to find a good piece of image editing software. Rainmeter can create text by itself, as well as simple or complex vector shapes, like rectangles and circles. But you will find you often want a separately-created image file.あなたが作りたいスキンの種類に応じて、あなたはまた、画像編集ソフトウェアの良い部分を見つけたいと思うかもしれません。Rainmeterはそれ自身でテキストを作成することができます、そしてまた長方形や円のような単純または複雑なベクトル形状。しかし、あなたはあなたがしばしば別々に作成された画像ファイルが欲しいと思うでしょう。

Adobe Photoshop is the usual gold standard for image editing, but there are other, less expensive alternatives worth considering, such as Paint.NET, GIMP, or Inkscape.Adobe Photoshopは画像編集のための通常のゴールドスタンダードですが、他にも、Paint.NET、GIMP、Inkscapeなど、検討に値する安価な方法があります。

Configs設定

A skin can grow to become an enormously complex project by the time it's done. It may accumulate any number of images, icons, fonts, plugins, addons, scripts, and even included code that is strewn across multiple files and shared by other skins.それが完了するまでに、スキンは非常に複雑なプロジェクトに成長することがあります。それは任意の数の画像、アイコン、フォント、プラグイン、アドオン、スクリプト、さらには複数のファイルに散らばって他のスキンと共有されているコードさえも蓄積する可能性があります。

But at the core of every skin is a single .ini file. Named SkinName.ini—where "SkinName" is the name of the skin—this is a text file that contains the fundamental code that Rainmeter uses to create a working skin.しかし、すべてのスキンの中心にあるのは単一の.iniファイルです。名前付き - SkinName.ini「SkinName」はスキンの名前です。これは、Rainmeterが作業スキンを作成するために使用する基本コードを含むテキストファイルです。

Because a skin may have any number of variants, skins are typically identified not by their file name, but by the folder where they are located. This is known as the skin's config name. To quickly find out a skin's config name, just check the context menu—the first item is the config name. For example, the illustro "Clock" skin's config name is illustro\Clock.スキンにはバリアントがいくつでもある可能性があるため、スキンは通常、ファイル名ではなく、それらが配置されているフォルダによって識別されます。これはスキンの設定名として知られています。スキンの設定名をすばやく見つけるには、コンテキストメニューを確認するだけです。最初の項目は設定名です。例えば、illustroの "Clock"スキンの設定名はillustro\Clockです。

Each skin also has a root config folder. This refers to the one folder that contains all of the skins belonging to a "suite," such as illustro. When the skins in a suite are organized together in this way, they can be exported to a package, and then installed on another system, as a single collection. They can also share fonts, images and other resources in a way that separate skins cannot. For a simple skin that is not part of such a "suite," the config and root config are the same.各スキンにはルート設定フォルダもあります。これは、illustroなどの「スイート」に属するすべてのスキンを含む1つのフォルダを指します。スイート内のスキンがこのようにまとめられている場合、それらをパッケージにエクスポートしてから、単一のコレクションとして別のシステムにインストールすることができます。フォント、画像、その他のリソースを別々のスキンでは共有できない方法で共有することもできます。このような「スイート」の一部ではない単純なスキンの場合、設定とルート設定は同じです。

Here's a quick reference chart to help you remember the relationship between skins, configs, variants and roots, using illustro as an example:例としてillustroを使用して、スキン、設定、バリアント、およびルートの間の関係を覚えておくのに役立つクイックリファレンスチャートを次に示します。

Root config folders are all organized in Rainmeter's main Skins folder:ルート設定フォルダはすべてRainmeterのメインSkinsフォルダにまとめられています。

C:\Users\YourName\Documents\Rainmeter\Skins

Accordingly, you can identify any skin by its file path, according to a simple rule:したがって、単純な規則に従って、ファイルパスによって任意のスキンを識別できます。

C:\Users\YourName\Documents\Rainmeter\Skins\ConfigName\SkinName.ini

The illustro "Clock" skin in the Skins folder. Remember that skins are identified by their config name, e.g. "illustro\Clock".Skinsフォルダ内のillustro "Clock"スキン。スキンは設定名、たとえば「illustro \ Clock」で識別されます。

Your First Skinあなたの最初のスキン

Until now, you have been working with the pre-made illustro skins that come with Rainmeter. Now, you're going to create a new skin from scratch.今までは、Rainmeterに付属の既製のIllustroスキンを使用してきました。さて、あなたは最初から新しいスキンを作ります。

Creating a new skin is quite easy. In Manage, click the "Create new skin" button. This will create a new config folder in the skins list, offering a default starting name of "NewSkin". Name this folder "MyFirstSkin" and hit enter.新しいスキンを作成するのはとても簡単です。で管理する、「新しいスキンを作成」ボタンをクリックしてください。これにより、スキンリストに新しい設定フォルダが作成され、デフォルトの開始名 "NewSkin"が提供されます。このフォルダに「MyFirstSkin」という名前を付けてEnterキーを押します。

This will do several things. It will create a new root config folder with the name "MyFirstSkin". In it it will create an empty @Resources folder, will create a new basic MyFirstSkin.ini skin file, and will open this new skin in your default or defined text editor, so you are off and running.これはいくつかのことをするでしょう。「MyFirstSkin」という名前の新しいルート設定フォルダが作成されます。その中に空の@Resourcesフォルダを作成し、新しい基本的なMyFirstSkin.iniスキンファイルを作成し、この新しいスキンをデフォルトまたは定義済みのテキストエディタで開くので、あなたはオフにして実行しています。

Your new skin is created in the proper folder, and ready to work with in Manage and your text editor.新しいスキンが適切なフォルダに作成され、Manageおよびテキストエディタで作業する準備が整いました。

The "Hello, World!" Skin「こんにちは、世界！」スキン

The very first thing you will see in your skin is the [Rainmeter] section. This is a skin's "header" property, like the <head> tag in an HTML webpage. In the [Rainmeter] section, you will see an Update=1000 option. Like this:あなたのスキンの中で一番最初に目にするのは[Rainmeter]セクションです。これは<head>、HTML Webページのタグのように、スキンの "header"プロパティです。[Rainmeter]セクションに、Update=1000オプションが表示されます。このような：

[Rainmeter]
Update=1000

The Update option is what sets the length of the skin's update cycle. The length is given in milliseconds, or 1/1000ths of a second, so Update=1000 means that the skin will update once per second. Updating is how the skin will react to changes in information. You'll see how this works in more detail later on.更新オプションは、スキンのの長さに設定するものです更新サイクルを。長さはミリ秒、つまり1000分の1秒単位で指定されるためUpdate=1000、スキンは1秒に1回更新されます。更新は、スキンが情報の変化にどのように反応するかです。これがどのように機能するかについては後で詳しく説明します。

Now that you've given your skin a "head," it's time to give it a "body." Let's change that default string meter. This is one of the most common types of meters, and it is used to create text.あなたのスキンに「頭」を与えたところで、今度はそれに「体」を与える時が来ました。そのデフォルトの文字列メーターを変更しましょう。これは最も一般的なタイプのメーターの1つで、テキストを作成するために使用されます。

[Rainmeter]
Update=1000

[MeterString]
Meter=String
Text=Hello, world!

The Meter option is required to tell Rainmeter that this section is, in fact, a meter. All meters have this option. The value of the option determines what type of meter it is.メーターオプションは、このセクションでは、実際には、メートルであることRainmeterを伝えるために必要とされます。すべてのメーターにこのオプションがあります。オプションの値はそれがどんな種類のメーターであるかを決定します。

The Text option, on the other hand, is unique to the string meter. As you might have guessed, this is where you provide a string of text for Rainmeter to display.テキストオプションは、他の一方で、文字列メータに固有のものです。ご想像のとおり、ここでRainmeterに表示するテキストの文字列を入力します。

Believe it or not, what you have now is a complete, valid, working Rainmeter skin! Let's load it to see what it looks like. Load the skin using one of the methods that you learned before. You can either:信じられないかもしれませんが、今持っているものは完全で有効な、有効なRainmeterスキンです。それをロードしてみましょう。以前に学んだ方法のいずれかを使用してスキンをロードします。次のいずれかが可能です。

  • Open the Manage window by left-clicking the Rainmeter tray icon, find MyFirstSkin in the skins list, then click the Load button in the upper-right.[Rainmeter]トレイアイコンを左クリックして[管理]ウィンドウを開き、スキンリストで検索MyFirstSkinしてから、右上のボタンをクリックします。Load

  • Open the context menu by right-clicking the tray icon, then select Skins → MyFirstSkin → MyFirstSkin.ini.開いてコンテキストメニューをトレイアイコンを右クリックして、[選択] Skins→ MyFirstSkin→ MyFirstSkin.ini。

(As you get comfortable with Rainmeter's user interface, you'll decide whether you prefer working with the context menu or the Manage window.)（Rainmeterのユーザインターフェースに慣れてきたら、コンテキストメニューと管理ウィンドウのどちらを使用するかを決めます。）

Now, look up in the top-left corner of your desktop. There's your skin!それでは、デスクトップの左上隅を調べてください。あなたのスキンがあります！

Can you see me?私がみえますか？

It's... not very big. Or pretty. Meters without any options tend to be very simple and unimpressive. So let's add some formatting.それほど大きくはありません。それともかわいいです。オプションのないメーターは非常にシンプルで印象的ではない傾向があります。それでは、フォーマットを追加しましょう。

[MyMeter]
Meter=String
Text=Hello, world!
AntiAlias=1
FontColor=255,255,255
FontFace=Segoe UI
FontSize=20

Here's what we've added:これが私たちが追加したものです：

  • AntiAlias
    A general meter option that smooths out the edges of a meter. This almost always improves the appearance of a string meter.ANTIALIAS 一般的なメーターオプションメートルのエッジを滑らかにします。これはほとんど常に弦楽器の外観を改善します。

  • FontColor
    A color option that changes the color of the text in this meter.FontColorこのメーターのテキストの色を変更
    する色オプション。

  • FontFace
    An option that changes the font used for this meter. Rainmeter can use any font that you have installed in Windows, or another font in a skin's @Resources folder—but we'll get to that.FontFace
    このメーターに使用されるフォントを変更するオプション。RainmeterはあなたがWindowsにインストールしたどんなフォントでも、あるいはスキンの@Resourcesフォルダの中の別のフォントを使うこともできます。

  • FontSize
    The size of the font.FontSize
    フォントのサイズ。

Now, let's apply these changes by refreshing the skin. Once again, you can either press Refresh in the Manage window, or MyFirstSkin → Refresh skin in the context menu.それでは、スキンをリフレッシュしてこれらの変更を適用しましょう。もう一度、Refresh管理ウィンドウでを押すか、コンテキストメニューのMyFirstSkin→ Refresh skinを押すことができます。

Much nicer.はるかに良いです。

 

Congratulations! You have just created a new skin. You are now ready to move on to the Basic Tutorials. This series will guide you through the entire process of creating several example skins, while teaching you about the fundamental elements of a Rainmeter skin.おめでとうございます。新しいスキンを作成しました。これで基本チュートリアルに進む準備ができました。このシリーズでは、いくつかのサンプルスキンを作成するプロセス全体について説明しながら、Rainmeterスキンの基本的な要素について説明します。

Continue to: Anatomy of a Skin » « Back to: Customizing

関連記事

スポンサーリンク

+演算子 足し算

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る