Launcher ランチャー

Creating a new skin新しいスキンを作成する

let's create a new folder under Skins, where we will store all of the skins we create in these tutorials. We want to keep them together in one root config folder, so we can later look at how to share some settings and resources between them.Skinsの下に新しいフォルダを作成しましょう。ここに、これらのチュートリアルで作成したすべてのスキンを格納します。それらを1つのルート設定フォルダにまとめておきたいので、後でそれらの間でいくつかの設定とリソースを共有する方法を検討することができます。

In Windows Explorer, create a new folder called Tutorials. Under that folder, create another new folder called Launcher. In that Tutorials\Launcher folder, create a new empty text file. In Windows explorer, you can simply right-click in the folder and say "New / Text document". Give it the name Launcher.ini.Windowsエクスプローラで、Tutorialsという新しいフォルダを作成します。そのフォルダの下に、Launcherという別の新しいフォルダを作成します。そのTutorials \ Launcherフォルダに、新しい空のテキストファイルを作成します。Windowsエクスプローラでは、フォルダを右クリックして「New / Text document」と言うことができます。Launcher.iniという名前を付けます。

Now, left-click the Rainmeter icon in the Windows notification area on your taskbar, to open the Manage dialog. Click on the Refresh all button on the bottom left, and you should see your new Tutorials / Launcher config in the list. Find Launcher.ini in the list, right-click it and say "Edit". This will open the new skin file in your default text editor. Don't load the skin just yet, we need to add some code first...タスクバーのWindows通知領域にある[Rainmeter]アイコンを左クリックして[管理 ]ダイアログを開きます。左下にある[ すべて更新 ]ボタンをクリックすると、新しいTutorials / Launcherの設定がリストに表示されます。リストでLauncher.iniを見つけ、それを右クリックして「編集」と言います。これにより、デフォルトのテキストエディタで新しいスキンファイルが開きます。まだスキンをロードしないでください。最初にコードを追加する必要があります。

Building the Launcher skinランチャースキンを構築する

First, as we did in our earlier "hello world" skin, let's add the [Rainmeter] section to control the Update speed of the skin.まず、以前の "hello world"スキンで行ったように、[Rainmeter]セクションを追加してスキンの更新速度を制御しましょう。

[Rainmeter]
Update=1000

Then, we can add our first meter to the skin.それから、最初のメーターをスキンに追加します。

[MeterLaunch1]
Meter=String
X=5
Y=5
FontFace=Trebuchet MS
FontSize=14
FontColor=255,255,255,255
StringStyle=Bold
AntiAlias=1
Text=Notepad
SolidColor=0,0,0,1
LeftMouseUpAction=["C:\Windows\System32\Notepad.exe"]

Note that the first two things we must do is create a [SectionName] for the meter, and tell Rainmeter what type of meter this is.私たちがしなければならない最初の2つのことがメーターのために[SectionName]を作成することであることに注意してください、そしてこれがどんなメーターのタイプであるかRainmeterに伝えてください。

[MeterLaunch1]
Meter=String

This is a String meter, one of the most commonly used meters. It is used to display some text on the screen. Formatting control, like the position, size, color and font face can all be set with a combination of General meter options and the options specific to the String meter. Let's look at some we have used here.これは、最も一般的に使用されているメーターの 1つです。画面にテキストを表示するために使用されます。位置、サイズ、色、フォントなどの書式設定コントロールはすべて、一般メーターオプション文字列メーター固有のオプションを組み合わせて設定できます。ここで使ったことのあるものを見てみましょう。

  • X and Y: These control the position of the meter relative to the overall skin. So what we are saying here is that we want this first meter to be five pixels right of the left edge of the skin, and five pixels down from the top of the skin.XとY:これらは、スキン全体に対するメーターの位置をコントロールします。それで、ここで言っているのは、この最初のメーターをスキンの左端から5ピクセル右、スキンの上から5ピクセル下にしたいということです。
  • FontFace: This determines which font you want to use when displaying the string.FontFace:文字列を表示するときにどのフォントを使うかを決めます。
  • FontSize: The size in points for the font.FontSize:フォントのサイズ(ポイント単位)。
  • FontColor: The color for the text.FontColor:テキストの
  • StringStyle: Controls some style options for the string. We are using a Bold style.StringStyle:文字列のいくつかのスタイルオプションを制御します。太字を使用しています。
  • AntiAlias: Does font smoothing on the text, to improve the display quality.アンチエイリアス:表示品質を向上させるために、テキストをフォントスムージングします。

Then we are setting the Text option of the meter with Text=Notepad, defining the string of text we wish to display. String meters can also use the value of Measures as the text to display, we will go into that in more detail in a future tutorial.それから、メーターのTextオプションを設定して、Text=Notepad表示したいテキストの文字列を定義します。文字列メーターでは、表示するテキストとしてMeasuresの値を使用することもできます。今後のチュートリアルで詳しく説明します。

The last two options in the meter are what really makes this into a "launcher", and not just some text on the screen.メーターの最後の2つのオプションは、これを実際に「ランチャー」にするものであり、画面上のテキストだけではありません。

  • SolidColor=0,0,0,1: This is a little trick used to create a solid but invisible "box" behind the string meter, to make clicking on the text easier.SolidColor = 0,0,0,1:これは、テキストをクリックしやすくするために、文字列メーターの後ろに実線で見えない「ボックス」を作成するのに使用される小さなトリックです。
  • LeftMouseUpAction=["C:\Windows\System32\Notepad.exe"]: This is a mouse action, telling Rainmeter to take the defined action option when the meter is clicked with the mouse. In this case, we are launching the application Notepad.exe found in the folder C:\Windows\System32\. We will go into much more detail on different types of actions and Bangs in future tutorials.LeftMouseUpAction = ["C:\ Windows \ System32 \ Notepad.exe"]:これはマウスの操作で、メーターがマウスでクリックされたときに定義済みの操作オプションを実行するようにRainmeterに指示します。この場合は、フォルダーC:¥Windows¥System32¥にあるアプリケーションNotepad.exeを起動しています。今後のチュートリアルでは、さまざまな種類のアクション前髪について、さらに詳しく説明します。

So let's load our new skin and take a look at where we stand. From the Manage dialog, find the Launcher.ini entry in the list and click on the Load button on the upper right.それでは、新しいスキンをロードして、立っている場所を見てみましょう。「管理」ダイアログで、リストからLauncher.iniエントリを見つけて、右上の「ロード」ボタンをクリックします。

Drag the skin anywhere on the screen you like. Rainmeter will remember the position any time you load this skin in the future. You can also right-click the skin to change other skin options as desired.画面上の好きな場所にスキンをドラッグします。あなたが将来このスキンをロードするときはいつでもRainmeterは位置を覚えているでしょう。必要に応じて、スキンを右クリックして他のスキンオプションを変更することもできます。

There we have our first meter, and a fully functioning Rainmeter skin. Clicking on the Notepad text will launch the application. Congratulations! Take a short break.そこに私達は私達の最初のメーターと完全に機能しているレインメータースキンを持っています。メモ帳のテキストをクリックするとアプリケーションが起動します。おめでとうございます。少し休憩してください。

Adding another meter別のメーターを追加する

Next, let's add another meter to launch another application. The format of the meter will be much the same as the earlier one, but we need to do some things to make sure the position of the meter is appropriate.次に、別のアプリケーションを起動するために別のメーターを追加しましょう。メーターのフォーマットは以前のものとほぼ同じですが、メーターの位置が適切であることを確認するためにいくつかのことをする必要があります。

[MeterLaunch2]
Meter=String
X=0r
Y=2R
FontFace=Trebuchet MS
FontSize=14
FontColor=255,255,255,255
StringStyle=Bold
SolidColor=0,0,0,1
AntiAlias=1
Text=Paint
LeftMouseUpAction=["MSPaint.exe"]

The important changes here are in the X and Y options for the meter. Remember that X and Y set the position of a meter in the context of the overall skin. Note that we are using relative positioning to set the X option zero pixels relative to the left of the previous meter, (in effect the same X as before) and the Y option two pixels relative to the botton of the previous meter. We could also have specifically set the value of X and Y to some hard-coded value, but using relative positioning is often much easier when laying out a skin's meters.ここでの重要な変更はメーターのXとYのオプションにあります。XYは、全体的なスキンのコンテキストでメーターの位置を設定することを忘れないでください。相対位置を使用して、前のメーターの左に対してXオプションのゼロピクセルを設定し(事実上前と同じX)、前のメーターのボタンに対してYオプションの2ピクセルを設定します。また、XYの値をハードコードされた値に設定することもできますが、スキンのメーターをレイアウトするときには、相対位置を使用する方がはるかに簡単です。

We have changed the Text and LeftMouseUpAction options for our second application, and we can now use Manage and the Refresh button at the upper right to see our changes in action. Note that you can also right-click the skin on the screen and say Refresh skin.私たちは、変更されているTextLeftMouseUpAction私たちの第二のアプリケーションのためのオプションを、私たちは今、使用することができます管理更新アクションで私たちの変更を確認するには、右上にあるボタンを押します。画面上のスキンを右クリックして[スキンの更新 ]と言うこともできます。

A new meter type: The Image meter新しいメータータイプ:イメージメーター

Now we are going to shift gears a bit, and introduce a new meter type. What we want to do with the next meter is display an image, which we can click on to launch the application.今、我々は少しギアをシフトして、そして新しいメータータイプを導入するつもりです。次のメーターでしたいのは画像を表示することです。これをクリックするとアプリケーションを起動できます。

[MeterLaunch3Image]
Meter=Image
ImageName=#@#Images\Calc.png
W=32
H=32
X=0r
Y=2R
LeftMouseUpAction=["Calc.exe"]

We have created a new section that has the Meter option set to Meter=Image. We are going to use an image file we will include with our skin, so we have a couple of things to do to set that up correctly.Meterオプションがに設定された新しいセクションを作成しました。私たちは私たちのスキンに含める画像ファイルを使うつもりなので、それを正しく設定するためにするべきことがいくつかあります。Meter=Image

  • First, we need to create a folder to hold all the images for our tutorial skins. We will use this folder not only for this Launcher skin, but other ones going forward.

    In Windows Explorer, create a new folder under Skins\Tutorials\ called @Resources. The @Resources folder is a special folder under the root config of a skin or suite of skins, used to hold images, sounds, fonts, include files and other shared resources for the skins.まず、チュートリアルスキン用のすべての画像を格納するフォルダを作成する必要があります。このLauncherスキンだけでなく、他のフォルダも今後使用します。

    Windowsエクスプローラで、下に新しいフォルダを作成するスキン\チュートリアル\と呼ばれる@Resourcesを@Resourcesフォルダには、下の特殊なフォルダですルートの設定、画像、音、フォントを保持するために使用されるスキンのスキンやスイートの、スキンのファイルや他の共有リソースが含まれています。


  • In this Skins\Tutorials\@Resources\ folder, create a new folder called Images. Download and copy the image below into that Skins\Tutorials\@Resources\Images folder.このSkins \ Tutorials \ @Resources \フォルダに、Imagesという新しいフォルダを作成します。下の画像をダウンロードして、そのSkins \ Tutorials \ @Resources \ Imagesフォルダにコピーします。

Now let's go back to our skin code. We have set the ImageName option to use the built-in #@# shortcut for the @Resources folder, and the sub-folder of Images where we put our calc.png image file. The Image meter will load and display this image.それでは、スキンコードに戻りましょう。私たちは、設定したimagenameののビルトイン使用するためのオプション#@#のショートカット@Resourcesフォルダ、およびサブフォルダイメージ我々は入れcalc.pngのイメージファイルを。画像メーターがこの画像を読み込んで表示します。

Next, we decided that the 128x128 pixels size of that original image file was just too large for our purposes. So we used the W and H (width and height) options to change the size of the image to 32x32 pixels when displayed. Just like the String meter, Image meters use both General meter options and options specific to the Image meter type.次に、その元の画像ファイルの128 x 128ピクセルのサイズは、私たちの目的には大きすぎると判断しました。そのため、WとH(幅と高さ)オプションを使用して、表示時に画像のサイズを32×32ピクセルに変更しました。文字列メーターと同様に、画像メーターは一般メーターオプション画像メータータイプに固有のオプションの両方を使用します。

Just as you did with the second String meter above, use relative positioning and the X and Y options to position the image below the previous meter.上の2番目の文字列メーターと同じように、相対位置とXおよびYオプションを使用して、画像を前のメーターの下に配置します。

ImageName=#@#Images\Calc.png
W=32
H=32
X=0r
Y=2R

Then, just as with the String meters above, set the LeftMouseUpAction option to LeftMouseUpAction=["Calc.exe"] so that the Windows Calculator is launched when the image is clicked.次に、上記の文字列メーターと同じように、LeftMouseUpActionオプションをに設定してLeftMouseUpAction=["Calc.exe"]、画像がクリックされたときにWindows Calculatorが起動するようにします。

Save your changes and refresh the skin. Click on the image to launch Windows Calculator.変更を保存してスキンを更新します。画像をクリックしてWindows Calculatorを起動してください。

You could just use the image as is, but let's add a string label next to the image. For that, create a new String meter, much like the ones above.画像をそのまま使用することもできますが、画像の横に文字列ラベルを追加しましょう。そのためには、上記のように、新しいStringメーターを作成します。

[MeterLaunch3Text]
Meter=String
X=0R
Y=6r
FontFace=Trebuchet MS
FontSize=14
FontColor=146,197,94,255
StringStyle=Bold
SolidColor=0,0,0,1
AntiAlias=1
Text=Calculator
LeftMouseUpAction=["Calc.exe"]

Notice that we have used the X and Y options to set the position of the meter lined up just to the right of the previous meter (the Image meter), and six pixels below the top of it. That will align the meter more or less centered to the right of the image of the calculator. We add the same LeftMouseAction that the Image meter has, so you can click on either to launch the application. Just for fun, we also changed the FontColor of the string.XとYのオプションを使用して、前のメーター(Imageメーター)のすぐ右に並ぶメーターの位置と、その上部の6ピクセル下にメーターの位置を設定していることに注意してください。それはメーターを多少電卓の画像の右側の中央に揃えます。Imageメーターと同じLeftMouseActionを追加しているので、どちらかをクリックしてアプリケーションを起動できます。念のため、文字列のFontColorも変更しました

Save your changes and refresh the skin.変更を保存してスキンを更新します。

Having this skin just sorta float on the desktop is ok, but let's add a background meter to put a nice dark box behind the entire skin.このスキンをデスクトップにフロートさせるだけでも構いませんが、背景メーターを追加して、スキン全体の背後に素敵な暗いボックスを配置しましょう。

An important concept in Rainmeter is that fact that how meters that "overlap" in position display from the standpoint of which is in "front" and which is in "back" on the screen is determined by the position of the meter's code in the skin .ini file. Since we want our background meter to be "behind" all the other meters, we need to put the code for it before the other meters we want in front.Rainmeterの重要な概念は、位置の「重なり合う」メーターが画面上の「前面??」にあり、「背面」にあるという観点から表示する方法は、スキン内のメーターのコードの位置によって決まるということです。 .iniファイル 背景メーターを他のすべてのメーターより「後ろ」にしたいので、コードをその前の他のメーターの前に配置する必要があります。

So, let's go back up to the top of the skin, just below the [Rainmeter] section, but before the first String meter [MeterLaunch1] and put in our new background Image meter.それでは、最初の文字列メーター[MeterLaunch1]の前で、[Rainmeter]セクションのすぐ下のスキンの一番上に戻って、新しい背景のImageメーターを配置しましょう。

[Rainmeter]
Update=1000

[MeterBackground]
Meter=Image
W=145
H=95
SolidColor=60,60,60,255

[MeterLaunch1]
Meter=String
X=5
Y=5
FontFace=Trebuchet MS
FontSize=14
FontColor=255,255,255,255
StringStyle=Bold
SolidColor=0,0,0,1
AntiAlias=1
Text=Notepad
LeftMouseUpAction=["C:\Windows\System32\Notepad.exe"]

We have set a specific W and H (width and height) so the meter is large enough to hold all the others, and no X and Y options. This is so the meter will be at the far left and top of the overall skin. We then set SolidColor=60,60,60,255, which in the absence of any ImageName on an Image meter will simply draw a square or rectangle based on the size of the W and H options.私達は特定のWとH(幅と高さ)を設定したのでメーターは他の全てを保持するのに十分な大きさで、XとYのオプションはありません。これは、メーターがスキン全体の一番左端と一番上にくるようにするためです。それから、ImageメーターSolidColor=60,60,60,255に何もない場合ImageNameは、WHのオプションのサイズに基づいて、単に正方形または長方形を描画するように設定します。

Save your changes and refresh the skin.変更を保存してスキンを更新します。

Good job! You now have a pretty functional launcher skin that you can add items to, (just follow the patterns you used above) change string or image format options and positioning to modify to your tastes, and end up with something that is both functional and shows off your creativity.よくやった!アイテムを追加したり、文字列や画像のフォーマットオプションや位置を変更したり、好みに合わせて変更したりできる機能的なランチャースキンが手に入りました。あなたの創造性


Continue to: Clock » « Back to: Basic Tutorials

スポンサーリンク

関連記事

スポンサーリンク

ディレクトリの削除

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

上に戻る