Clock クロック
Creating your second tutorial skin2番目のチュートリアルスキンを作成する
In the previous tutorial, you should have already created a folder under Skins called Tutorials. We are going to add a new folder under that one to create our new skin. Under Skins\Tutorials\ create a new folder called Clock.
In that Tutorials\Clock 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 Clock.ini.前のチュートリアルでは、Skinsの下にTutorialsというフォルダをすでに作成しているはずです。新しいスキンを作成するために、その下に新しいフォルダを追加します。Skins \ Tutorials \の下にClockという名前の新しいフォルダを作成します。
そのTutorials \ Clockフォルダに、新しい空のテキストファイルを作成します。Windowsエクスプローラでは、フォルダを右クリックして「New / Text document」と言うことができます。Clock.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 / Clock config in the list. Find Clock.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]アイコンを左クリックして[管理 ]ダイアログを開きます。左下にあるRefresh allボタンをクリックすると、新しいTutorials / Clock設定がリストに表示されます。リストでClock.iniを見つけ、それを右クリックして「編集」と言います。これにより、デフォルトのテキストエディタで新しいスキンファイルが開きます。まだスキンをロードしないでください。最初にコードを追加する必要があります。
Building the Clock skinClockスキンを構築する
This tutorial will introduce using Measures in a skin. Measures are used to obtain some information in Rainmeter, from your computer's system, text files, web sites, and other sources. In addition, we will be using some more features of the String meter and dip our toes a little deeper into using action options and Bangs in your skin.このチュートリアルでは、スキンでメジャーを使用する方法を紹介します。対策は、コンピュータのシステム、テキストファイル、Webサイト、その他の情報源から、Rainmeterの情報を入手するために使用されます。さらに、ストリングメーターのいくつかの他の機能を使用し、アクションオプションと前髪をスキンに使用する方法を少し深めにします。
First, as we did in our earlier tutorial, let's add the [Rainmeter] section to control the Update speed of the skin.まず、以前のチュートリアルで行ったように、[Rainmeter]セクションを追加してスキンの更新速度を制御しましょう。
[Rainmeter] |
Now let's add our first Measure, in this case a Time measure to retrieve information about the system time from your computer.それでは、私たちの最初のMeasure、この場合はあなたのコンピュータからシステム時間についての情報を取得するためのTime measureを追加しましょう。
[MeasureTime] |
Do check out the manual entry for the Time measure to see how that Format option is used to obtain the time information you want. We are using a format of "hour in 12 hour time:minutes" for this measure.必要な時間情報を取得するためにそのフォーマットオプションがどのように使用されているかを確認するには、時間尺度のマニュアルエントリをチェックしてください。このメジャーには「12時間制の時間：分」の形式を使用しています。
So let's add a meter to display this value we obtained with our measure. First, we are going to use the MeterStyle option by creating a [TextStyle] section to set up some common string formatting options. This way we won't have to repeat them in every meter we create. Then add the new [MeterTime] meter.それでは、メジャーで取得したこの値を表示するためのメーターを追加しましょう。まず、[TextStyle]セクションを作成してMeterStyleオプションを使用し、いくつかの一般的な文字列フォーマットオプションを設定します。こうすれば私達は私達が作成するあらゆるメートルでそれらを繰り返す必要がない。それから新しい[MeterTime]メーターを追加してください。
[TextStyle] |
The key to using measures and meters together is using the MeasureName option to "bind" the measure [MeasureTime] to the meter. What that means is that this meter will display the value returned by the measure on each Update.メジャーとメーターを一緒に使用する鍵は、MeasureNameオプションを使用して、メジャー[MeasureTime]をメーターに「バインド」することです。つまり、このメーターには、更新ごとにメジャーから返された値が表示されます。
So let's load our new skin and take a look at where we stand. From the Manage dialog, find the Clock.ini entry in the list and click on the Load button on the upper right.それでは、新しいスキンをロードして、立っている場所を見てみましょう。以下からの管理ダイアログ、見つけるClock.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は位置を覚えているでしょう。必要に応じて、スキンを右クリックして他のスキンオプションを変更することもできます。
Adding more measures and metersさらに小節やメーターを追加する
We are going to use various elements of the system time in different meters in our skin, so let's create some more measures to gather different types of information. Go back up to just under our [MeasureTime] section and add some new measures.システム時間のさまざまな要素をスキンのさまざまなメーターで使用する予定なので、さまざまな種類の情報を収集するためのいくつかの対策を作成しましょう。[MeasureTime]セクションのすぐ下に戻って、新しいメジャーを追加します。
[MeasureSeconds] |
Now, start building meters to display all these different measure values. Let's start with the first one, so we can look at a new meter positioning concept. Head back down to the bottom of your skin and add this new meter.それでは、メーターの作成を始めて、これらのさまざまなメジャー値をすべて表示します。最初のものから始めましょう、それで私たちは新しいメーターポジショニング概念を見ることができます。あなたのスキンの底まで頭を下げて、この新しいメーターを追加してください。
[MeterSeconds] |
Note that we are using the MeasureName=MeasureSeconds option to bind this meter to the appropriate measure.MeasureName=MeasureSecondsこのメーターを適切なメジャーにバインドするためのオプションを使用していることに注意してください。
Now, if you look above, you will see that in the MeterStyle section [TextStyle] we have defined many format options for our string meters that we want to share with the meters rather than repeating them in each one. One of these is the StringAlign option, which will allow us to align the text in the meter based on the X and Y options for the meter. In this case, we are going to right-align all of our meters. You will see why as we continue with the layout. In the previous [MeterTime] meter, we aligned the meter so the right-most edge was at the X position of 165 in the skin. For this meter, we are aligning the right-most edge at the X position of 204.さて、あなたが上を見れば、あなたはMeterStyleセクション[TextStyle]で私達が私達がメーターごとにそれらを繰り返すのではなく共有したい私達の弦メーターのための多くのフォーマットオプションを定義したことがわかります。その1つがStringAlignオプションです。これにより、メーターのXおよびYオプションに基づいてメーター内のテキストを整列できます。この場合は、メーターをすべて右寄せにします。私たちがレイアウトを続けるにつれて、その理由がわかります。前の[MeterTime]メーターでは、右端がスキンのX位置の165になるようにメーターを調整しました。このメーターでは、右端をXの位置に合わせています。204。
In addition, we want this meter to have a different color. So, we are "overriding" theFontColor=255,245,207,255 option we set in the [TextStyle] MeterStyle, by specifically setting FontColor=255,231,135,255 for this meter.
Save and refresh the skin to see the changes.スキンを保存して更新して変更を確認します。
Continue creating the meters at the bottom of your skin, to display the information from the various measures.さまざまな測定からの情報を表示するために、スキンの下にメーターを作成し続けます。
[MeterAMPM] |
As you can see, there is a different approach to binding measures to meters in the [MeterMonthDayYear] meter above.ご覧のとおり、上記の[MeterMonthDayYear]メーターで、メジャーをメーターにバインドする方法は異なります。
[MeterMonthDayYear] |
Since we want to use the value of three different measures in this meter, we use the MeasureName option to define all three measures as being bound to this meter. Then we can use the Text option with %1 %2, %3 to display each of the three measure values, including adding a hard coded comma for formatting.このメーターでは3つの異なる数値データの値を使用したいので、MeasureNameオプションを使用して、このメーターにバインドされている3つの数値データすべてを定義します。次に、％1％2、％3を指定してTextオプションを使用して、書式設定のためのハードコードされたコンマの追加を含め、3つの数値データ値のそれぞれを表示できます。
Save and refresh the skin to see the changes.スキンを保存して更新して変更を確認します。
Now you can see why we wanted to right-align our string meters. As the time changes and becomes longer and shorter, we don't want the position of the meters to change. We want to keep things lined up and tidy. The following image demonstrates how it looks when the time is much longer.これで、なぜ弦楽器を右揃えにしたいのかがわかります。時間が変わり、長くなったり短くなったりするにつれて、メーターの位置を変えたくありません。私たちは物事を一列に並べて整理したいのです。次の図は、時間がはるかに長い場合の外観を示しています。
Let's add a background image like we did in the earlier tutorial, by going up above all the existing meters and adding a new Image meter.以前のチュートリアルで行ったように、既存のすべてのメーターの上に上がって新しいImageメーターを追加することによって、背景画像を追加しましょう。
[MeterBackground] |
Save and refresh the skin to see the changes. Congratulations! Nice looking clock skin.スキンを保存して更新して変更を確認します。おめでとうございます。見栄えの良い時計の皮。
Some extra credit work追加のクレジット作業
We are going to add a couple more features to our clock, so we can touch again on using Action options and Bangs in your skins.私達は私達の時計にさらに2、3の機能を追加しようとしているので、私たちはあなたのスキンでアクションオプションと前髪を使うことについて再び触れることができます。
First, let's add the ability to toggle the display of the time between 12-hour and 24-hour when we hover the mouse over the [MeterTime] meter. Find that meter, and add a couple of lines.まず、[MeterTime]メーターの上にマウスを置いたときに、12時間から24時間の間の時間の表示を切り替える機能を追加しましょう。そのメーターを見つけて、数行を追加します。
[MeterTime] |
This is using a Mouse action and a handful of Bangs.これは、マウスアクションと一握りの前髪を使用しています。
What we are doing when we move the mouse over the meter is to use the !SetOption bang to change the Format option of the [MeasureTime] measure to obtain the time from the system using the code for 24-hour time (%H) instead of 12-hour time (%I). Then we are using the !UpdateMeasure, !UpdateMeter, and !Redraw bangs to have the change take place as soon as we move the mouse over, and not wait for the next update of the skin.マウスをメーターの上に移動したときにしているのは、！SetOption bang を使用しFormatて[MeasureTime]測定のオプションを変更し、24時間のコードではなくシステムから時間を取得することです（％H）。 12時間（％I）それから、！UpdateMeasure、！UpdateMeter、および！Redrawを使用して、マウスを移動するとすぐに変更が行われ、次のスキンの更新を待ちません。
When we move the mouse away from the meter, we are using the same combination of bangs to set the format back to 12-Hour time and update things.マウスをメーターから離すと、同じ強打の組み合わせを使用してフォーマットを12時間に戻し、更新します。
Mouse Offマウスオフ
Mouse Overマウスオーバー
"It tolls for thee"「それはあなたに負担をかける」
Next, we can add some sound to our clock. What we will do is have the skin play a .wav file of a grandfather clock striking when the time is exactly on the hour.次に、私たちの時計に音を加えることができます。私たちがすることは、時間が正確に正時になったときに印象的なおじいさんの時計の.wavファイルをスキンに再生させることです。
First, we need get the sound file and put it in the right location in your skin folders. Right-click the link below and save the file HourChime.wav to your computer. Put it in a new Sounds folder in our Skins\Tutorials\@Resources folder we created before. So it will be Skins\Tutorials\@Resources\Sounds\HourChime.wavまず、サウンドファイルを入手して、スキンフォルダの正しい場所に配置する必要があります。下のリンクを右クリックし、ファイルHourChime.wavをあなたのコンピュータに保存してください。以前に作成したSkins \ Tutorials \ @Resourcesフォルダーの新しいSoundsフォルダーに配置します。だからそれはSkins \ Tutorials \ @Resources \ Sounds \ HourChime.wavになります
Download HourChime.wavHourChime.wavをダウンロード
Now we can add a new measure to control when the sound is played. Let's go up to the top of the skin, right after the [MeasureTime] measure we already have, and add a new one.今度は私達は音がいつ再生されるか制御するために新しい測定を加えることができる。[MeasureTime]メジャーのすぐ後に、スキンの一番上まで移動して、新しいメジャーを追加しましょう。
[MeasureTime] |
This [MeasureChimeHour] measure is getting the number of minutes (%M) from the system time, and then using an IfAction to check the value of the measure on each update. If the value is equal to zero IfEqualValue=0, then the associated IfEqualAction=[Play "#@#Sounds\HourChime.wav"] is executed. This uses the Play bang to load and play the HourChime.wav file.この[MeasureChimeHour]メジャーは、システム時刻から分数（％M）を取得しています。その後、IfActionを使用して各更新のメジャーの値を確認しています。値がゼロIfEqualValue=0に等しい場合、関連付けられているものIfEqualAction=[Play "#@#Sounds\HourChime.wav"]が実行されます。これは、Play bangを使用してHourChime.wavファイルをロードして再生します。
After making the changes, save and refresh the skin. Congratulations! You now have a beautiful, functional AND annoying skin!変更を加えたら、スキンを保存して更新します。おめでとうございます。あなたは今、美しく、機能的で迷惑なスキンを持っています！
We have jumped around a bit, so here is the entire completed skin so you can check that your code is the same.私たちは少し飛び回ったので、ここに完成したスキン全体があるので、あなたのコードが同じであることを確認することができます。
[Rainmeter] |
Continue to: System » « Back to: Launcher
関連記事
スポンサーリンク
