Web ページエディタ チュートリアル（導入編）
このチュートリアルでは、Web ページエディタを使用して、ブラウザで表示・操作させる Web
ページの基本的な作成方法を習得されたい方を対象にした、「初心者用チュートリアル」です。
この機能は、システム統合ソフトウェア「AutomationOrganizer」に含まれるプログラマブルコン
トローラ用ラダープログラム作成ソフトウェア「WindLDR」、プログラマブル表示器用作画ソフ
トウェア「WindO/I-NV4」で使用できます。
本チュートリアルでは「WindLDR」の Web ページエディタの基本操作の説明を行っています。

2017 年 10 月現在

WindLDR

はじめに

目次
１ はじめに .................................................................................................................... 3
１-１ Web ページエディタとは ............................................................................... 3
概要 ................................................................................................................... 3
特長 ................................................................................................................... 3
導入のメリット ................................................................................................. 4
１-２ 準備 ................................................................................................................ 5
使用する機器 ..................................................................................................... 5
作業の流れ ........................................................................................................ 7
２ 画面の作成 ................................................................................................................ 9
２-１ 画面の完成例 .................................................................................................. 9
画面と動作の内容 .............................................................................................. 9
２-２ 起動と新規作成 ............................................................................................ 13
WindLDR を起動する ...................................................................................... 13
機種選択を行う ............................................................................................... 13
２-３ 画面を作成する ............................................................................................ 14「運転画面」を作成する ................................................................................. 14
作成した Web ページを保存する ..................................................................... 53「グラフ画面」を作成する .............................................................................. 57
２-４ HMI モジュールの設定 ................................................................................. 69
ネットワーク設定 ............................................................................................ 69
Web サーバー設定 ........................................................................................... 76
２-５ プロジェクトを保存する .............................................................................. 79
２-６ シミュレーション ......................................................................................... 80
シミュレーションの開始 ................................................................................. 80
シミュレーションでの動作確認 ....................................................................... 83
シミュレーションの終了 ................................................................................. 90
３ ダウンロード ........................................................................................................... 91
３-１ ダウンロード ................................................................................................ 91
４ 動作確認 .................................................................................................................. 94
４-１ PLC 上の動作確認 ........................................................................................ 94
Web ページへのアクセス ................................................................................ 94
モニタの開始 ................................................................................................... 96
Web ページアクセス・モニタの終了............................................................... 99
MEMO ........................................................................................................................ 100

2

IDEC CORPORATION

はじめに

WindLDR

１はじめに
１-１Web ページエディタとは
概要
Web ページエディタでは、FC6A 形マイクロスマート、また HG シリーズプログラマブル表示器にダウンロードする Web ページを作成できます。
FC6A 形マイクロスマートにダウンロードした Web ページは、パソコン・スマートフォンなどの端末から Web ブラウザでアクセスし、FC6A 形マイクロスマートの各デバイスの値に応じたユーザー
Web ページを表示できます。
また、各デバイスの値を Web ページ上で変更でき、各機器を操作できます。

スマートフォンやパソコンでPLC・表示器を操作できます特長○カンタンな操作性で使いやすい Web ページ作成機能
プログラムの知識なしで Web ページの作成が可能
各部品の配置・設定が簡単
多言語(日・英・中[簡体字])に対応○ 実機がなくても動作確認が可能(WindLDR のみ)
WindLDR のシミュレーション機能で Web ページとラダーの動作確認が可能○ 簡単に IoT を実現可能
プログラムのダウンロード後、すぐに Web ブラウザアクセスを行うことが可能

IDEC CORPORATION

3

WindLDR

はじめに

導入のメリット■一般的な Web ページ作成

× 専門的な知識(HTML・Java スクリプト)
× ページ作成が複雑
× 追加・変更が困難

Web ページエディタを利用すると・・・○ 専門的な知識が不要○ ページを簡単に作成○ 追加・変更が容易

スイッチやランプ、グラフなどの部品を簡単に配置できます

4

IDEC CORPORATION

はじめに

WindLDR

１-２準備
使用する機器「WindLDR」を使用して Web ページエディタの画面を作成いただく前に、以下の機器等をご用意ください。

① プログラマブルコントローラ（PLC）＜MICRO Smart FC6A形＞② HMIモジュール＜FC6A-PH1＞※FC6A Plusをご利用の場合は、必須ではありません③ パソコン④ ソフトウェアAutomationOrganizer「WindLDR」（WindLDR Ver.8.2.0 以降）⑤ USBメンテナンスケーブル<HG9Z-XCM42>⑥ Ethernetケーブル(RJ45)⑦ スイッチング電源※各PLCの電源仕様に合わせてください

IDEC CORPORATION

5

WindLDR

はじめに●Web ページエディタの使用環境について
Web ページエディタは、Editor(Web ページを編集)、Viewer(Web ページを閲覧)の
2 つの機能に分かれています。
それぞれの機能でサポートされている環境は以下のようになります。
使用環境をご確認の上、本機能をご利用ください。

※本チュートリアルでは、Microsoft Internet Explorer 11 での動作説明を行います。

■Editor(Web ページを編集)

ブラウザ

バージョン

Google Chrome

47 以上

Mozilla Firefox

42 以上

Microsoft Internet Explorer

11

ブラウザ

バージョン

Google Chrome

47 以上

Mozilla Firefox

42 以上

Microsoft Internet Explorer

11

Android

Google Chrome

47 以上

iOS

Safari

8 以上

OSWindows※Windows 7 以上

■Viewer(Web ページを閲覧)

OS
Windows※Windows 7 以上

6IDEC CORPORATION

はじめに

WindLDR

作業の流れ使用する機器の配線と、パソコンへの AutomationOrganizer のインストールを行った後、以下の手順で画面を作成し、その動作確認を行います。

① Webページ作成・シミュレーション（2章）② プロジェクトファイルのダウンロード（3章）③ PLC本体による動作確認（4章）① Web ページ作成・シミュレーション
1. WindLDR ・Web ページエディタの起動
2. 部品の配置・設定(Web ページ作成)●文字部品の作成●モメンタリスイッチ部品の作成●ランプ部品の作成●数値入力器の作成●数値表示器の作成●画面切替スイッチの作成●枠部品の作成●グラフ部品の作成●メーター部品の作成●図形部品の作成

3. ブラウザでの Web ページの保存
4. HMI モジュールの設定
5. WindLDR でのプロジェクトファイルの保存
6. シミュレーションでの動作確認

IDEC CORPORATION

7

WindLDR

はじめに② プロジェクトファイルのダウンロード

1. 機器の接続
2. プロジェクトのダウンロード③ PLC 本体による動作確認

1. Web ページへのアクセス
2. 動作確認

8

IDEC CORPORATION

画面の作成WindLDR

２画面の作成２-１画面の完成例
画面と動作の内容「Web ページエディタ」を使用すると、はじめての方でも簡単に遠隔監視 Web 画面を作成することができます。
生産ラインをモデルとして、以下の動作を行う画面を作成します。

① 「運転」と「停止」の状態をスイッチで切り替える② 生産ラインの運転状態をランプで表示する③ 生産目標個数を入力し、「目標」に数値を表示する④ 「実績セット」スイッチを押すと、「実績」に表示する数値に 1 を加算する⑤ トレンドグラフに現在の実績値を表示する⑥ 円形メーターに現在値を表示する⑦ Web ブラウザ上で IDEC 製 PLC FC6A 形の状態を確認する

FC6A 形には以下のラダープログラムを作成しているとします。

IDEC CORPORATION

9WindLDR

画面の作成●作成する画面イメージと動作【運転画面（ページ名：Page1.page）】

文字部分：画面に表示する文字です「グラフ」スイッチ：押すと「グラフ画面」に切り替わります「運転」ランプ：
PLC 出力 Q0000 が ONすると点灯し、OFF すると消灯します「目標値」数値入力器：
目標値として PLC 内部レジスタ
D0100 に数値を入力することができます「運転」スイッチ：「実績値」数値表示器：

押すと PLC 内部リレー
M0000 が ON します

実績値として PLC 内部レジスタ
D0200 の数値を表示することができます「停止」スイッチ：
押すと PLC 内部リレー
M0001 が ON します「実績セット」スイッチ：「枠」部分：

押すと PLC 内部リレー
M0002 が ON します

画面に表示する枠部分です【グラフ画面（ページ名：Page2.page）】「実績値状況」
グラフ：
実績値として PLC
内部レジスタD0200 の数値をグラフに表示します「実績セット」スイッチ：「メーター値」メーター：「前へ戻る」スイッチ：

押すと PLC 内部リレー
M0002 が ON します

PLC 内部レジスタ D0300 の数値をメーターに表示します

押すと「運転画面」に切り替わります10

IDEC CORPORATION

画面の作成WindLDR●よく使う部品の設定について
プログラマブル表示器でよく使用する機能に相当する部品名と、その設定内容を記します。

機能

選択部品

リンク(デバイス)

IO 設定

参照

[表示器]

[Web ページエディタ]

設定箇所

(注 1)

ページ

文字

ラベル

-

-

P17

-

-

P65

!onValueChange

(out)

P21

!onValueChange

(out)

Text

in

描画

図形

(直線・ポリラインなど)

モメンタリスイッチボタン

オルタネイトスイッチ

スイッチ

画面切替スイッチ

ボタン

-

-

P45

ランプ

ランプ

Value

in

P27

数値入力器(注 2)

テキスト入力!onTextChange

(out)

Text

in

数値表示器(注 2)

ラベル

Text

in

文字入力器(注 3)

テキスト入力!onTextChange

(out)

Text

in

文字表示器(注 3)

ラベル

Text

in

-

グラフ

トレンド

in

P57

in

P62

メーター

円形メーター
レベルメーターLine1Data～Line8Data
value

-

P38
P42
-

(注 1) リンク設定の「!onValueChaged」,「!onTextChange」などのイベントリンクはIO 設定の変更はできず、常に[out]設定となります。
(注 2) 数値入力器と数値表示器においては、Text の「値」を空白にすることを推奨します。
(注 3) 文字入力器・文字表示器は、WindLDR では Ver.8.6.0 以降で対応しています。
また、文字コードは UTF-8 のみ対応しています。

IDEC CORPORATION

11

画面の作成WindLDR●

各部品の IO の設定について

IO の設定に関しては、「in」、「out」、「i/o」の 3 種類から選択して設定できます。
それぞれの役割は以下のようになっています。

■in 設定機器からのデバイス値を読み込む場合に使用します。
例) デバイスのリンクを「IDEC:M:M0000.Bit」、IO 設定を「in」のランプ部品を設定した場合、PLC の M0000 が ON(1)になったとき、リンクしたランプ部品が ON になります。

in

M0000 = 1

■out 設定
機器にデバイス値を書き込む場合に設定します。
例) デバイスのリンクを「IDEC:M:M0000.Bit」、IO 設定を「out」のスイッチ部品を設定した場合、リンクしたスイッチ部品を ON(1)すると、PLC の M0000 に 1 を書き込みます。

out

M0000 = 0 ⇒ 1■i/o 設定
機器にデバイス値の読み出し・書き込み、両方を行う場合に設定します。
※i/o 設定につきましては、デバイスの値を取得するタイミングで機器のデバイスとWeb ページの値が同期しない場合がありますので、なるべく使用しないでください。
例) デバイスのリンクを「IDEC:D:D0000.Word」、IO 設定を「i/o」のテキスト入力部品を設定した
場合、リンクした部品に 1 を入力すると、PLC の D0000 に 1 を書き込みます。
反対に PLC の D0000 が 2 に設定されたとき、テキスト入力部品の表示は 2 になります。

D0000 = 0 ⇒ 1

1

i/o
2

12

D0000 = 1 ⇒ 2

IDEC CORPORATION

画面の作成WindLDR

２-２起動と新規作成
WindLDR を起動する
デスクトップのショートカットキー「WindLDR」をダブルクリックします。

DoubleClick!

デスクトップのショートカットをダブルクリックまたは［スタート］ボタンから、[すべてのプログラム] ＞ Automation Organizer V2 ＞ WindLDR ＞ WindLDR からも起動可能です。

機種選択を行う
１．WindLDR の起動が使用する PLC の「機種」と「形番」を選択します。
[次へ]をクリックします。
例では「機種：FC6A-C16X1XE」を選択します。

Click!

Web ページエディタは FC6A 形にのみ対応しています。
機種選択のときは、FC6A 形を選択してください。
「FC6A-C16X1XE」を選択

IDEC CORPORATION

13

画面の作成WindLDR

２-３画面を作成する「運転画面」を作成する
はじめに運転画面を作成します。

 「Web ページエディタ」の起動
１．WindLDR のリボンメニューより、[表示] ＞ [プロジェクトウィンドウ] を選択します。

「プロジェクトウィンドウ」を選択(アイコンがオレンジのハイライトがつくように)
２．[プロジェクトウィンドウ]がワークスペースに表示されるので、プロジェクトウィンドウ内の[Web ページエディタ]をダブルクリックします。

［Windows セキュリティの重要な警告］ダイアログが表示された場合は、［アクセスを許可する］ボタン
をクリックします。
DoubleClick!

３．ブラウザが立ち上がり、Web ページエディタの新規画面が表示されます。

１．で開いている WindLDR は閉じないでください。
閉じた場合、作成した Web ページを保存できません。
また、部品で使用する画像のインポー
トで使用します。

14

IDEC CORPORATION

画面の作成WindLDR※Web ページエディタの画面構成は以下の通りとなるので、各名称をご確認ください。

メニューバー：
主な機能を分類して表示
表示コントロール選択エリア：

プロパティエリア：

配置したい部品を選択

部品のプロパティを変更

変数リンクエリア：
部品のプロパティと変数リンクを設定
レイヤーエリア：

JavaScript エリア：

画面のデザインを実施

部品に対し、JavaScript による挙動を設定■Web ページエディタの動作モードについて
Web ページエディタにはモードが「編集」、「シミュレーション」、「実行」の 3 種類があります。
各モードの動作は以下のようになります。

モード

説明
部品の設定が行えます。このモードでは、変数リンク、JavaScript は動作編集モードしません。シミュレーションを行わない場合、このモードに設定することを推奨します。

シミュレーション
モード

変数リンク、JavaScript の動作を確認しながら、システムを構築できます。
WindLDR との通信は行わず、ブラウザ内で配置した部品/JavaScript の動作をシミュレーションできます。
WindLDR のシミュレーションモードと通信し、各部品に設定した PLC のデ

実行モード

バイスと連動させて動作を確認できます。本モードを使用する場合、WindLDR のシミュレーションを実行しておく必要があります。

IDEC CORPORATION

15

WindLDR

画面の作成※「WindLDR」の画面構成は以下の通りとなるので、各名称をご確認ください。

リボン：
主な機能を分類して表示

ワークスペース：

編集ウィンドウ：「プロジェクト」や「Ｗｅｂページエディタ」「ラダー」や「モジュール構成」を編集するなどの機能を表示

エリア

情報ウィンドウ：ステータスバー：ラダープログラムのエラーや警告を表示「形番」「接続方式」「プロジェクトデータのサイズ」などを表示※[ステータスバー]拡大図[ステータスバー]には作成しているプロジェクトの「PLC 機種」「通信設定」「プログラムサイズ」を表示しています。

PLC 機種16

通信設定

プログラムサイズIDEC CORPORATION

画面の作成WindLDR●運転画面の文字設定
Web ページに表示する「運転画面」の文字を設定します。

１．表示コントロール選択エリアから[ラベル]を選択し、レイヤーエリアにドラッグ＆ドロップ
します。
⇒ラベル部品が貼り付けられます。

drag-and-drop!

２．配置した[ラベル]を選択します。
⇒プロパティエリアに「プロパティ」が表示されます。

Click!

３．[Text]の値をクリックします。
⇒値(表示する文字)を編集できるようになります。

IDEC CORPORATION

17

画面の作成WindLDR４．値を「運転画面」に変更し、Enter キーを押します。
⇒レイヤーエリア内のラベルの表示が「運転画面」に変わります。

編集しているプロパティの選択がプロパティエリア内で外れた時点で、部品の情報が更新されます。
部品の情報を更新する際は、Enter キーを押すか、プロパティエリア内の選択箇所
以外をクリックして、更新してください、

５.文字色を変更します。
[Color]の値をクリックします。
⇒カラーパレットが表示されるので、変更したい色をクリックします。
⇒選択後、[OK]ボタンをクリックします。
⇒文字色が変更されます。
例では、文字色を青(：#0000aa) に変更
Click!

Click!

Click!

18

IDEC CORPORATION

画面の作成WindLDR

６.文字サイズを変更します。
[Font]の値をクリックします。
⇒フォントの編集ダイアログが表示されるので、使用するフォントを指定し、文字サイズを変更後、[OK]ボタンをクリックします。
例では、フォント「Aria」、文字サイズを「20」に変更します。

Click!

Click!

７.部品位置を変更します。
⇒カーソルが十字() になったところで、ドラッグ＆ドロップで部品を移動します。

drag-and-drop!

IDEC CORPORATION

19

WindLDR

画面の作成

８.「目標値：」、「実績値：」の文字部品を設定します。
１～７を参照して、文字部品を編集してください。
例では４の「表示文字の変更」でそれぞれ「目標値：」、「実績値：」を入力、５の「表示文字色の変更」で黒色に設定します。

■文字部品設定後イメージ

各ラベル部品の作成は、編集したラベル部品を選択して、コピー＆ペーストを行った
のちに、色・フォント・表記文字などを変更いただいても作成可能です。

以上で、文字部品の設定は完了です。

20

IDEC CORPORATION

画面の作成●運転／停止スイッチの作成

WindLDR（モメンタリスイッチの作成）「運転」スイッチと「停止」スイッチ、そして「実績セット」スイッチを作成します。
「運転」スイッチを押すと PLC 内部リレー「M0000」を ON し、「停止」スイッチを押すと PLC 内部リレー「M0001」を ON し、「実績セット」スイッチを押すと PLC 内部リレー「M0002」を ON します。

１．「運転」スイッチ用の[ボタン]部品を配置します。
表示コントロール選択エリアから[ボタン]を選択し、レイヤーエリアにドラッグ＆ドロップ
します。
⇒ボタン部品が貼り付けられます。

drag-and-drop!

モメンタリスイッチを作成する際には、[ボタン]部品を使用してください。
[スイッチ]部品はオルタネイトの動作となります。

IDEC CORPORATION

21

WindLDR

画面の作成

２． ボタンの表示文字を変更します。
配置した[ボタン]を選択します。
⇒プロパティエリアに「プロパティ」が表示されます。

Click!

[Text]の値をクリックします。
⇒部品の記名文字を編集できるので、「運転」に変更します。
⇒Enter キーを押します。
⇒部品の記名文字が「運転」に変更されます。

Click!

ｃ

22

IDEC CORPORATION

画面の作成WindLDR

３．ボタンの記名文字色を変更します。
ボタン部品を選択した状態で、プロパティエリアの[TextColor]の値をクリックします。
⇒カラーパレットが表示されます。
⇒任意の色を選択して、[OK]ボタンをクリックします。
⇒記名文字の色が選択した色になります。
例では緑(：#00aa00)を選択しています。

Click!

色を選択

Click!

IDEC CORPORATION

23

WindLDR
４．

画面の作成

ボタン部品で操作するデバイスを設定します。
[!onValueChange]のリンクに[IDEC:M:M0000.Bit]を入力します。
⇒Enter キーを押します。

デバイスのリンク設定について
デバイスリンクのフォーマットとしては以下のようになります。
"IDEC" ":(セミコロン)" "デバイスタイプ" ":(セミコロン)" "デバイスアドレス" ".(ピリオド)" "データタイプ"

内部リレーの M0000 をリンクとして設定する場合、[IDEC:M:M0000.Bit]となります。

また、WindLDR で設定しているラダープログラム内に存在しているデバイスであれば、デバイスツリーから選択して、設定することもできます。

デバイスを選択

デバイスツリーのボタン

24

IDEC CORPORATION

画面の作成WindLDR

５．ボタンの位置を移動します。
ボタン部品を選択します。
⇒カーソルが十字()になったところで、ドラッグ＆ドロップで部品を移動します。

drag-and-drop!

IDEC CORPORATION

25

画面の作成WindLDR

６．１～５を繰り返し、「停止」スイッチ用と「実績セット」スイッチ用の[ボタン]部品を設定します。
例では形状は「運転」スイッチと同じで、２の「表示文字の変更」でそれぞれ[停止]、[実績セット]を入力します。
３の「表示文字色の変更」でそれぞれ赤色、黒色に、４の「デバイスのリンク設定」で、それぞれ「IDEC:M:M 0001.Bit」,「IDEC:M:M 0002.Bit」と設定します。

■ボタン部品設定後イメージ

設定デバイス：
IDEC:M:M0000.Bit

設定デバイス：

設定デバイス：

IDEC:M:M0001.Bit

IDEC:M:M0002.Bit

各ボタン部品の作成は、編集したボタン部品を選択して、コピー＆ペーストを行ったのちに、
色・フォント・記名文字・リンク設定を変更いただいても作成可能です。

以上で、モメンタリスイッチの作成は完了です。

26

IDEC CORPORATION

画面の作成●運転ランプの作成

WindLDR（ランプの作成）

運転状態を示すランプを作成します。
[Q0000]が ON になると、ランプに「運転」が表示され、OFF すると、ランプに「停止」が表示されます。

１．ランプ部品を配置します。
表示コントロール選択エリアから[ランプ]を選択し、レイヤーエリアにドラッグ＆ドロップ
します。

drag-and-drop!

２．ランプの形状を設定するため、ランプ画像をインポートします。
Web ページエディタをオープンした際に使用している、WindLDR のウィンドウを開きます。

IDEC CORPORATION

27

WindLDR

画面の作成

３．画像をインポートするフォルダを表示します。
[プロジェクトウィンドウ]より、[Web ページエディタ]ツリーの左にある、ボタンを押して、Web ページエディタのツリーを展開します。

Click!

部品の画像をインポートする際には、以下の 2 つの方法があります。
①「ファイルをインポート」で選択⇒パソコンに保存した画像を指定して取り込む。
②「シンボルファクトリ」を利用⇒WindLDR・WindO/I-NV4 で使用できる画像ライブラリ[シンボルファクトリ]を用いて画像を取り込む。

●シンボルファクトリとは？
WindLDR・WindO/I-NV4 に搭載されている 5000 種類の図形を提供するライブラリツールです。

28

IDEC CORPORATION

画面の作成WindLDR

４．指定したフォルダに画像をインポートします。
展開したツリーの[ランプ]フォルダを右クリックします。
⇒メニューの[シンボルファクトリ]をクリックします。
⇒シンボルファクトリのウィンドウが開きます。

Right-Click!
Click!

５．シンボルファクトリより使用する(インポートする)画像を選択します。
⇒任意の画像をダブルクリックします。
例では[Square 01(16-bit bitmap)]の SQ03_G()を選択しています。

DoubleClick!

画像種類を選択する。

IDEC CORPORATION

29

WindLDR

画面の作成

６．インポートする画像の名称を設定します。
ダブルクリック後に出てきた[ファイル名設定]ウィンドウの[ファイル名:]に、任意のファイル名を入力します。
⇒[OK]ボタンをクリックします。
例では、ファイル名を[ON]にして、インポートしています。

[ON]を入力

Click!

※ファイル名は英数字のみ入力が可能です。

７． インポートした画像を確認します。
WindLDR のウィンドウを開いて、３で展開したプロジェクトウィンドウの[ランプ]のボタンを押して、ツリーを展開します。

⇒画像が設定したファイル名でインポートされていることを確認できます。

Click!

インポートした画像がpng 形式のファイルとしてツリーに表示される

30

IDEC CORPORATION

画面の作成WindLDR

８．[OFF]画像を４～７の手順にしたがって、インポートします。
例として、OFF 画像は[Square 06(16-bit bitmap)]の SQ01_G ()を選択し、ファイル名は[OFF]に設定しています。

SQ01_G

ファイル名を[OFF]に設定

Click!

インポートした画像が png 形式のファイルとしてツリーに表示される以上で画像のインポートは完了です。
ランプ部品を設定するので、編集中の Web ページエディタのウィンドウを再度開いてください。

IDEC CORPORATION

31

画面の作成WindLDR

９．ランプ部品の設定を行います。
⇒配置したランプ部品を選択します。
⇒プロパティエリアに「プロパティ」が表示されます。

●設定スイッチの作成 （画面切替スイッチの作成）
プロパティエリアにランプ部品の押すと、「目標個数設定画面（ベース画面２）」に切り替わるスイッチを作成します。
プロパティが表示されます。
Click!

１．[リボン]の[スイッチ]から「画面切替スイッチ」をクリックし、編集ウィンドウ上で１０．ランプ部品の OFF 時の表示画像の設定を行います。
⇒[imgOff]の値をクリックします。
⇒画像選択のダイアログが表示されます。

Click!

32

IDEC CORPORATION

画面の作成WindLDR

１１．ダイアログから画像を選択します。
⇒ [更新]ボタンをクリックします。
⇒ [lamp] をクリックします。
⇒ インポートした画像が表示されるので、インポートした画像を選択します。
⇒ [OK]ボタンをクリックします。
⇒ ランプ部品が OFF 時の画像を選択できます。
例では、インポートした[OFF.png]を選択しています。

Click!

Click!

Click!

Click!

１２．ランプ部品の ON 時の表示画像の設定を行います。
⇒ [imgOn]の値をクリックします。
⇒ １１と同様の設定を行います。
⇒ レイヤーエリアのランプ部品の表示が選択した ON 時の表示画像に変わります。
例では、インポートした[ON.png]を選択しています。

Click!

Click!

ON 時の表示画像として、選択した画像に切り替わります。

IDEC CORPORATION

33

WindLDR

画面の作成

１３．ランプ部品の OFF 時の表示文字の設定を行います。
⇒ [TextOff]の値をクリックします。
⇒ 部品の表示文字を編集できるので、「停止」を入力します。
⇒ Enter キーを押します。
⇒ OFF 時の表示文字が「停止」に変更されます。

「停止」を入力し、Enter キーを押す

編集中のランプ部品の ON 状態、OFF 状態を確認したい場合は、プロパティ内の value の値を切り替えてください。
value の値が[true]の時は ON 状態、[false]の時は OFF 状態のランプ部品のイメージがレイヤーエリア内で表示されます。
(スイッチ、画像、チェックボックス、ラジオボタン部品の場合も同様です。)※Web ページオープン時には、この時設定した値がデフォルトとなり、その状態で表示されます。
確認後は、設定を OFF 状態(false)にすることを推奨します。

チェックボックスでそれぞれ、
true()、もしくは false(

ON/OFF が切り替わります

34

IDEC CORPORATION)

画面の作成WindLDR

１４．ランプ部品の ON 時の表示文字の設定を行います。
⇒ [TextON]の値をクリックします。
⇒ 部品の表示文字を編集できるので、「運転」を入力します。
⇒ Enter キーを押します。
⇒ ON 時の表示文字が「運転」に変更されます。

「運転」を入力し、Enter キーを押す

１５．ランプ部品のデバイスのリンク設定を行います。
⇒ プロパティの[Value]のリンクをクリックします。
⇒ 部品のリンクを編集できるので、「IDEC:Q:Q0000.Bit」を入力します。
⇒ Enter キーを押します。
⇒ デバイス設定後 IO の設定が「in」になっていることを確認します。
ビット出力 Q0000 の状態を表示するため、[IDEC:Q:Q0000.Bit] を設定

IDEC CORPORATION

35

WindLDR

画面の作成

１６．ON/OFF 時の表示文字の色を変更します。
⇒ プロパティの[TextOffColor]の値をクリックします。
⇒ カラーパレットが表示されるので、任意の色を選択します。
⇒ [OK] ボタンをクリックします。
⇒ ON の場合も、[TextOnColor]を同様に変更します。
例では、OFF 時のテキストの色を灰(：#808080) ,ON 時のテキストの色を緑(に設定しています。

１7．ランプ部品の大きさを変更します。
⇒ ランプ部品にカーソルを合わせます。
⇒ カーソルがになった時に、任意のサイズにドラッグします。

Drag!

36

IDEC CORPORATION：#00aa00)

画面の作成WindLDR

１８．ランプ部品の位置を変更します。
⇒ ランプ部品にカーソルを合わせます。
⇒ カーソルがになった時に、任意の場所にドラッグ＆ドロップします。

drag-and-drop!

以上で、ランプ部品の設定は完了です。

■ランプ部品設定後イメージ

IDEC CORPORATION

37

WindLDR

画面の作成●「目標値」を入力する数値入力器の作成 （数値入力の作成）
目標値として PLC 内部レジスタ D0100 の値を入力する部品を作成します。

１．表示コントロール選択エリアから[テキスト入力]を選択し、レイヤーエリアにドラッグ＆ドロップします。
⇒[テキスト入力]部品が貼り付けられます。

drag-and-drop!

２．テキスト入力部品の設定を行います。
⇒配置した[テキスト入力]をクリックします。
⇒テキストリンクのプロパティがプロパティエリアに表示されます。

Click!

38

IDEC CORPORATION

画面の作成WindLDR

３．テキト入力部品のフォントを設定します。
⇒[Font]の値を選択します。
⇒フォントの編集ダイアログが表示されるので、使用するフォントを指定し、文字サイズを変更後、[OK]ボタンをクリックします。
例では、フォント「Arial」、文字サイズを「20」に変更します。

４．テキスト入力部品のデバイスリンク設定を行います。
⇒[!onTextChange]のリンクを選択します。
⇒リンクに、「IDEC:D:D0100.Word」を入力します。
⇒Enter キーを押します。

IDEC CORPORATION

39

WindLDR

画面の作成

５．テキスト入力部品のデバイスリンク設定を行います。
⇒[Text]のリンクを選択します。
⇒リンクに、「IDEC:D:D0100.Word」を入力します。
⇒Enter キーを押します。
⇒IO 設定が[in]になっていることを確認します。
⇒PLC 内の D0100 に部品がリンクされた状態となります。

40

IDEC CORPORATION

画面の作成WindLDR

６．テキト入力部品のデフォルトの設定を行います。
⇒[Text]の値を選択します。
⇒設定文字を空白にします。
⇒Enter キーを押します。

Text 内容を空白に設定

テキスト入力部品を設定する場合、Text の値を空白にすることを推奨します。
[Text]の値に空白の値を設定しなかった場合、Web ページのオープン時、設定している値が最初に表示されてしまいます。(その後、PLC の値が読み込まれます。)
また、IO 設定を i/o に設定している場合、設定している値が out の動作により書き込まれてしまいます。
例えば、値に「200」を設定していた場合は、Web ページオープン時、D0100 に 200 が書き込まれてしまいます。

以上で、数値入力器の設定は終了です。

IDEC CORPORATION

41

WindLDR

画面の作成●「実績値」を表示する数値表示器の作成 （数値表示の作成）
実績値として PLC 内部レジスタ D0200 の値を表示する部品を作成します。

１．表示コントロール選択エリアから[ラベル]を選択し、レイヤーエリアにドラッグ＆ドロップ
します。
⇒ラベル部品が貼り付けられます。

drag-and-drop!

２．配置した[ラベル]を選択します。
⇒プロパティエリアに「プロパティ」が表示されます。

Click!

３. フォントの設定を変更します。
[Font]の値をクリックします。
⇒フォントの編集ダイアログが出るので、変更後、[OK]ボタンをクリックします。
(例では、文字サイズを 20 に変更)

Click!

Click!

42

IDEC CORPORATION

画面の作成WindLDR

４．ラベル部品のデバイスのリンク設定を行います。
⇒ [Text]のリンクをクリックします。
⇒ 部品のリンクを編集できるので、「IDEC:D:D0200.Word」を入力します。
⇒ Enter キーを押します。
⇒ デバイス設定後 IO の設定が「in」になっていることを確認します。

[IDEC:D:D0200.Word] を入力

入力後、IO 設定が[in]に設定

５．ラベル部品のデフォルトの設定を行います。
⇒[Text]の値を選択します。
⇒設定を空白にします。
⇒Enter キーを押します。

空白に設定※この時、レイヤーエリアのラベルは空白になります。
次ページのイメージ図では、表示の都合上、任意の数値を入れています。

■文字詰めの方法
数値の右寄せ、中央寄せを設定したい場合は、[AlignmentH]の設定を変更すれば、文字の寄せ位置を変更できます。

場所を任意に移動して、数値表示器の設定は終了です。

IDEC CORPORATION

43

WindLDR

画面の作成■数値入力器、数値表示器設定後イメージ

画面イメージ作成の都合上、実績値を「21」を表示していますが、実際は表示されません。

■小数点データの表示方法
小数点データを扱う場合、以下の 2 点の設定を行います。
①データタイプを Float にする
例えば、D0000 を Float として扱いたい場合は、リンクに[IDEC:D:D0000.Float]を設定します。
※Float で扱う場合、2 ワード分のデータとなります。
例えば、D0000 を Float として扱うのであれば、D0000,D0001 を占有します。
②ラベルの書式設定を実数にする
ラベル部品をダブルクリック、もしくは、ラベルを選択し、プロパティからをクリックします。

⇒書式設定の一番上のプルダウンを「実数」に、小数点以下桁数を設定したのちに、[OK]ボタンをクリックします。小数点データを表示することができます。

「実数」に設定後、小数点以下桁数を設定

44

IDEC CORPORATION

画面の作成WindLDR●「画面切り替えスイッチ」の作成 （画面切り替えの作成）
スイッチを押したときに、別のページに切り替わる機能の「画面切り替えスイッチ」を作成します。

１．「グラフ」スイッチ用の「ボタン」部品を配置します。
表示コントロール選択エリアから[ボタン]を選択し、レイヤーエリアにドラッグ＆ドロップ
します。
⇒ボタン部品が貼り付けられます。

drag-and-drop!

２． ボタン部品の動作を設定します。
配置したボタン部品を選択して、プロパティエリアにプロパティを表示します。
⇒プロパティエリアの左上のボタンをクリックします。

⇒ボタンの設定ウィンドウが表示されます。

Click!

Click!

IDEC CORPORATION

45

WindLDR

画面の作成

３． 動作設定と画面切り替え先のページを選択します。
「ページまたはレイヤーにジャンプする。」を選択します。
⇒[ページ名]箇所に、「Page2」を入力します。
⇒[OK]ボタンをクリックします。
⇒ボタンの動作が設定されます。

「Page2」に設定

Click!

●ページの保存について
・ページ名の設定は Web ページエディタファイルの拡張子[.page]を抜いたファイル名を指定します。
・ジャンプしたい Web ページをすでに作成、保存している場合は、ボタンを押すと、保存している page ファイルを選択することも可能です。

ツリー内部のファイルを選択

46

IDEC CORPORATION

画面の作成WindLDR

４． ボタンの表示文字を変更します。
[Text]の値をクリックします。
⇒値に「グラフ」と設定します。
⇒Enter キーを押します。
⇒ボタンの表記が変更になります。

「グラフ」を設定

ボタンを任意の位置に移動すれば、画面切り替えボタンの設定が完了となります。

IDEC CORPORATION

47

WindLDR

画面の作成●画面切り替えボタン配置後イメージ

48

IDEC CORPORATION

画面の作成WindLDR●「枠」の作成 （描画図形の作成）
画面に表示する「枠」を作成します。

１．表示コントロール選択エリアから[枠]を選択し、レイヤーエリアにドラッグ＆ドロップします。
⇒枠部品が貼り付けられます。

drag-and-drop!

IDEC CORPORATION

49

画面の作成WindLDR

２．枠部品の表示文字を変更します。
配置した枠部品を選択します。
⇒枠部品のプロパティが表示されるので、[Title]の値をクリックします。
⇒値に「運転切替」と入力します。
⇒Enter キーを押します。

「運転切替」を設定

３．枠部品の枠線の色を変更します。
[BorderColor]の値をクリックします。
⇒カラーパレットが表示されるので、任意の色を選択します。
⇒「OK」ボタンをクリックします。
⇒枠線の色が変更されます。
例では、文字色を緑(：#00aa00) に設定
Click!

Click!

50

IDEC CORPORATION

画面の作成WindLDR

４．枠部品の枠線の大きさを変更します。
枠部品を選択します。
⇒カーソルがになった時に、任意のサイズにドラッグします。

Drag!

５．枠部品の位置を変更します。
枠部品を選択します。
⇒ カーソルがになった時に、任意の場所にドラッグ＆ドロップします。

Drag-and-Drop!

IDEC CORPORATION

51

WindLDR

画面の作成

６．「数値設定」の枠部品を設定します。
１．～５．の手順と同様に、２．の表示文字を「数値設定」に変更して作成します。

●枠部品配置後イメージ-

以上で、「運転画面」で使用する全部品の配置は終了です。

52

IDEC CORPORATION

画面の作成WindLDR作成した Web ページを保存する作成した Web ページファイル(Page ファイル)をプロジェクトファイル内に保存します。

１．Web ページエディタのメニューバーから、「ファイル」をクリックします。
⇒ファイルのプルダウンメニューが表示されます。
⇒「名前を付けて保存」をクリックします。

Click!

Click!

２．保存するページ名を設定します。
⇒１．の操作後「ページを保存」のダイアログが表示されます。
⇒[保存名]の個所をクリックして、Page ファイルを保存する名称を設定します。
⇒「OK」ボタンをクリックします。
例では、「Page1」として保存します。

ファイル名は半角英数字のみを使用してください。
Page ファイル名を「Page1」と設定

Click!

IDEC CORPORATION

53

WindLDR

画面の作成

以下のウィンドウが出れば、ページの保存は完了です。

ファイル追加確認のため、Web ページエディタを開いた WindLDR のウィンドウを開いてください。
プロジェクトウィンドウの Web ページエディタのツリーを展開して、[ランプ]フォルダの下に設定したファイル名の Page ファイルがツリーに追加されていれば、保存は完了です。

Page1.page のファイル名で作成された
Web ページが追加

保存した Web ページを再び編集したい場合は、ツリー内の[xxxx.page]をダブルクリックしてください。
ダブルクリック後、保存している Web ページが、ブラウザに表示されます。

54

IDEC CORPORATION

画面の作成WindLDR●作成した Web ページが保存されない場合
以下のようなウィンドウが表示される場合は、Web ページエディタを起動している
WindLDR を閉じてしまった、または、それ以外の原因により保存ができません。

編集中の Web ページを保存して、WindLDR に再び読み込みたい場合は、以下の手順を行ってください。

１. Web ページエディタのメニューバーから、「ファイル」をクリックします。
⇒ファイルのプルダウンメニューが表示されます。
⇒「ローカルディスクに保存」をクリックします。

Click!

Click!

IDEC CORPORATION

55

WindLDR

画面の作成

２. ブラウザに設定しているダウンロード先のフォルダ(デフォルトでは、ダウンロードフォルダ
パス[C:¥Users¥¥Downloads))に、ファイル名「HMI_YYYYMMDDHHMM.page」(「_」(アンダーバー)以降は年月日時分)が保存されます。

※Internet Explorer では、以下のポップアップが表示されますが、そのまま「保存」をクリックしてください。

３. P13 の新規作成を参照して WindLDR と Web ページエディタを開きます。
⇒Web ページエディタが開いたら、Web ページエディタのメニューバーから、「ファイル」をクリックします。
⇒「ローカルディスクから開く…」をクリックします。
⇒「アップロードするファイルの選択」のダイアログが出ますので、２．で保存したファイルを選択します。

※インポートした画像・動画などは新規の WindLDR には情報が残っていません。
その際、インポートしていた画像・動画を再び WindLDR に同ファイル名でインポートした後、Page ファイルを読み込んでください。
インポートしない場合、画像・動画が存在しないと判断され、表示されません。

開いたページを P53 の「Web ページの保存する」の手順で、保存すればページの復元は完了です。

56

IDEC CORPORATION

画面の作成WindLDR「グラフ画面」を作成する
次に、グラフを表示する画面を作成します。
グラフ画面を作成する前に、P14 の２の方法で、新しく Web ページエディタの画面を開いてください。

 グラフ画面の文字設定
Web ページに表示する「グラフ画面」、「実績値状況」、「目標達成率(%)」の文字を設定します。
P17「運転画面の文字設定」を参照に、各ラベル部品を以下のように設定します。

■ラベル部品設定後のイメージ

文字色：緑
フォントサイズ：20

文字色：青

文字色：緑

フォントサイズ：20

フォントサイズ：20

IDEC CORPORATION

57

WindLDR

画面の作成

 画面切り替えスイッチの作成
グラフ画面(Page2.page)から運転画面(Page1.page)にジャンプするためのボタン部品を作成します。

P45 からの「画面切り替えスイッチ」の作成手順と以下のボタン部品の設定詳細を参照して、ボタン部品を以下のように設定します。

■ボタン部品の設定について

Page1 に設定

■ボタン部品の設定後のイメージ

テキスト：「前へ戻る」
文字色：黒
フォントサイズ：20

58

IDEC CORPORATION

画面の作成WindLDR 実績セットスイッチの設定
押すと PLC 内部リレー「M0002」を ON にするボタン部品を作成します。

P21 からの「運転／停止スイッチの作成」の作成手順と以下のボタン部品の設定詳細を参照して、設定します。

テキスト：「実績セット」
文字色：黒
フォントサイズ：20
設定デバイス：
IDEC:M:M0002.Bit

IDEC CORPORATION

59

画面の作成WindLDR

 実績値グラフの設定(トレンドグラフの設定)
PLC の内部デバイス「D0200」の値をモニタするトレンドグラフ部品を設定します。

１．表示コントロール選択エリアから[トレンド]を選択し、レイヤーエリアにドラッグ＆ドロップします。
⇒トレンドグラフ部品が貼り付けられます。

drag-and-drop!

２．トレンドグラフの表示位置とサイズを変更します。
⇒配置した[トレンド]部品を選択します。
⇒カーソルがになった際に、ドラッグ＆ドロップをして位置を変更します。

⇒カーソルがになった際に、ドラッグをしてサイズを変更します。

drag!

drag-and-drop!

60

IDEC CORPORATION

画面の作成WindLDR

３．トレンドグラフにデバイスをリンクさせます。
⇒トレンドグラフ部品をクリックします。
⇒[Line1Data]のリンクを選択します。
⇒リンクに[IDEC:D:D0200.Word]を入力します。
⇒Enter キーを押します。

[IDEC:D:D0200.Word]を入力

以上で、トレンドグラフ部品の設定は完了です。

●トレンドグラフ部品の設定について
トレンドグラフ部品が 1 部品につき、最大 8 本の表示、つまり最大 8 デバイスのモニタが可能です。
また、トレンド部品はモニタ機能が主なので、IO 設定は「in」を設定してください。

■最大値・最小値の設定について
トレンドグラフ部品には、Y 軸の最大値・最小値を設定できます。
トレンドグラフ部品をダブルクリック、もしくは、部品を選択し、プロパティからをクリックします。

⇒Y 軸スケールタブをクリックし、[最大値を固定]、[最小値を固定]をチェックし、値を設定します。
⇒「閉じる」をクリックします。

Y 軸の範囲が0～200 に変更

IDEC CORPORATION

61

画面の作成WindLDR●目標達成率メーターの設定(円形メーターの設定)
PLC の内部デバイス「D0300」の値をモニタする円形メーター部品を設定します。

１．表示コントロール選択エリアから[円形メーター]を選択し、レイヤーエリアにドラッグ＆ドロップします。
⇒円形メーター部品が貼り付けられます。

drag-and-drop!

２．メーター部品の位置とサイズを設定します。
⇒円形メーター部品を選択します。
⇒カーソルがになった際に、ドラッグ＆ドロップをして位置を変更します。

⇒カーソルがになった際に、ドラッグをしてサイズを変更します。

drag!

drag-and-drop!

62

IDEC CORPORATION

画面の作成WindLDR

３．メーター部品が表示する最大値と最小値を設定します。
メーター部品を選択して、プロパティエリアにプロパティを表示します。
⇒プロパティエリアの左上のボタンをクリックします。

⇒メーター部品のオプションウィンドウが表示されます。
⇒「スケール」タブをクリックします。
⇒「最大値」、「最小値」の項目をそれぞれ「100」、「0」に設定します。
⇒「閉じる」ボタンをクリックします。

Click!

４．メーター部品に D0300 をリンクさせます。
⇒プロパティエリアに表示されている、[Value]のリンクを選択します。
⇒リンクに[IDEC:D:D0300.Word]を入力します。
⇒Enter キーを押します。

以上で、メーター部品の設定は完了です。

IDEC CORPORATION

63

WindLDR

画面の作成■グラフ部品・メーター部品設定後イメージ

64

IDEC CORPORATION

画面の作成WindLDR

 描画図形の編集(四角形部品、角丸四角形部品の編集)
グラフ、メーターを囲む描画図形部品の編集を行います。

１．表示コントロール選択エリアから[四角形]を選択します。
⇒レイヤーエリアでカーソルがになっていることを確認して、図形の描画開始位置

をクリックします。
⇒図形の描画終了位置をクリックします。
⇒四角形部品が配置されます。

Click!

Click!

Click!

IDEC CORPORATION

65

WindLDR

画面の作成

２．四角形部品の線の色を変更します。
⇒四角形部品を選択します。
⇒「LineColor」の値を選択します。
⇒カラーパレットが表示されるので、任意の色を選択します。
⇒「OK」ボタンをクリックします。
⇒線の色が変更されます。
例では、青(：#0000aa )を選択しています。

Click!

Click!

66

IDEC CORPORATION

画面の作成WindLDR

３．四角形部品の塗りつぶしの色を変更します。
⇒「FillStyle」の値を選択します。
⇒カラーパレットが表示されるので、下部のスライダーの値を変更すると透明度の設定ができます。
例では、[0.0]にします。
⇒「OK」ボタンをクリックします。
⇒塗りつぶしの色が透明に変更されます。

Click!

色の透過率をスライダーで設定透明にする場合、0.0 に設定

IDEC CORPORATION

67

WindLDR

画面の作成

メーターを囲む角丸四角形部品も 1～3 の手順と同様に、編集します。
例では、線の色を緑 (：#00aa00)、塗りつぶし色を透明に選択しています。

■描画部品設定後イメージ

以上で、グラフ画面の部品設定は完了です。
P53「作成した Web ページを保存する」の手順に従って、作成したページを「Page2」の名前で保存してください。

■保存後のプロジェクトウィンドウツリー(WindLDR)

設定したファイル名で Web ページが保存されている

保存が完了すれば、Web ページエディタでの画面編集は完了です。

68

IDEC CORPORATION

画面の作成WindLDR

２-４HMI モジュールの設定
HMI モジュールの設定を行います。本チュートリアルで設定する項目は以下の 2 点です。

１．HMI モジュールのネットワーク設定(IP アドレス、サブネットマスクの設定)
２．Web ページエディタオープン時の初期画面設定

ネットワーク設定
HMI モジュールのネットワーク設定を行います。
IP アドレス、サブネットマスクを設定することで、接続先機器(パソコン・ルータ)を決定します。
例では、以下のように IP アドレス設定を行い、パソコンと HMI モジュールを接続します。

■機器接続イメージ

LAN ケーブル◇パソコン◇HMI モジュール

IP アドレス：192.168.1.20

IP アドレス：192.168.1.10

サブネットマスク：255.255.255.0

サブネットマスク：255.255.255.0

機器同士を接続する場合、お互いの IP アドレスを第 3 オクテットまで一致させる必要があります。
例：[192.168.1.20] と [192.168.1.10]の機器を接続する場合は、[192.168.1] までを各機器で一致させます。

IDEC CORPORATION

69

WindLDR

画面の作成

１．プログラムを編集している WindLDR を開き、モジュール構成のタブをクリックします。

Click!

２．モジュール構成ウィンドウが表示されるので、HMI モジュール「FC6A-PH1」を選択し、CPU モジュールの左側にドラッグ＆ドロップします。

drag-and-drop!

70

IDEC CORPORATION

画面の作成WindLDR

３．追加された HMI モジュールをダブルクリックします。
⇒[HMI モジュール設定]のダイアログが表示されるので、「ネットワーク設定」のタブをクリックします。

DoubleClick!

Click!

IDEC CORPORATION

71

WindLDR

画面の作成

４．「IP 設定」で、IP アドレスを[192.168.1.10]、サブネットマスクを[255.255.255.0]に設定し、[OK]ボタンをクリックします。

Click!

以上で、HMI モジュールのネットワーク設定は完了です。

本チュートリアルでは、パソコンと HMI モジュールを直接接続する形で、Web ページエディタの動作を確認しますが、外部ネットワークを使用される場合には、接続する機器によって、IP アドレス、サブネットマスク、デフォルトゲートウェイ、DNS 設定が異なります。
接続する機器のネットワーク設定の詳細をご確認の上、設定してください。

72

IDEC CORPORATION

画面の作成WindLDR●パソコンのネットワーク設定について
本チュートリアルのように、HMI モジュールにパソコンを直接接続する場合には、パソコンのIP アドレスを PLC と合わせる必要があります。
以下の手順をもとに、パソコンの IP アドレスを設定してください。

１．パソコンと HMI モジュールを LAN ケーブルで接続します。(PLC の電源は接続した状態)

HMI モジュールの Ethernet ポートに接続

２．パソコンのスタートメニューを開き、［コントロールパネル］をクリックします。

⇒［コントロールパネル］が開くので、［ネットワークとインターネット］をクリックします。

IDEC CORPORATION

73

WindLDR

画面の作成

３．［ネットワークと共有センター］をクリックします。
⇒[ネットワークと共有センター]が開くので、［ローカルエリア接続］をクリックします。
（パソコンが Ethernet ケーブルでネットワークに接続され、接続が認識されている場合[ローカルエリア接続]が表示します。）

４．［ローカルエリア接続の状態］が表示します。 ［プロパティ］ボタンをクリックします。
⇒［ローカルエリア接続のプロパティ］が開きます。［インターネットプロトコルバージョン 4(TCP/IPv4)］を選択して、［プロパティ］ボタンをクリックします。
※［インターネット プロトコル バージョン 4 (TCP/IPv4)］のチェックボックスは外さないでください。

74

IDEC CORPORATION

画面の作成WindLDR

５．「次の IP アドレスを使う」をクリックします⇒IP アドレスとサブネットマスクを以下のように設定します。

・IP アドレス- 192.168.1.20
・サブネットマスク- 255.255.255.0⇒[OK]ボタンをクリックして、今までの手順で開いているダイアログをすべて閉じます。

以上で、パソコンのネットワーク設定は完了です。

IDEC CORPORATION

75

画面の作成WindLDR

Web サーバー設定
HMI モジュールの Web サーバー設定を行います。
Web ページエディタに接続するためのユーザー名、パスワード、どのページを最初に表示するかを設定します。

１．作成しているプロジェクトウィンドウのモジュール構成の「HMI モジュール」をダブルクリックします。
⇒[HMI モジュール設定]のダイアログが表示されるので、「Web サーバー」をクリックします。

DoubleClick!

DoubleClick!

Click!

76

IDEC CORPORATION

画面の作成WindLDR

２．Web サーバーのユーザー設定を設定します。
「1 つの共通ユーザーアカウントで Web サーバーにアクセスする」に、チェックを入れ、任意のユーザー名とパスワードを入力します。
例では、デフォルト設定のユーザー名「administrator」、パスワード「password」を設定しています。

ユーザー名：administrator
パスワード：password

IDEC CORPORATION

77

WindLDR

画面の作成

３．Web サーバーのオプションを設定します。
リダイレクトターゲットを設定することで、ブラウザで最初にアクセスする Web ページを設定します。
「リダイレクトターゲット」のプルダウンボックスをクリックします。
⇒プロジェクトに保存した Page ファイルが一覧で表示されるので、最初にアクセスする
Web ページを選択します。
例では、[Page1.page]を選択しています。
⇒「OK」ボタンをクリックします。
※デフォルト設定の「システム Web トップページ」は、HMI モジュールに搭載している
Web ページです。Web ページエディタで作成したページとは異なる Web ページとなりま
すので、Web ページエディタのみを使用する場合は設定しないでください。

リダイレクトターゲットで作成されたページが表示

以上で、HMI モジュールの設定は完了です。

78

IDEC CORPORATION

画面の作成WindLDR

２-５プロジェクトを保存する作成したプロジェクトデータに名前をつけて保存します。
１．Web ページエディタを開いた、WindLDR のウィンドウを開きます。
⇒画面左上のアプリケーションボタンをクリックし[名前を付けて保存]を選択します。
⇒[名前を付けて保存]ダイアログが開きます。
[アプリケーションボタン]をクリック[名前を付けて保存]をクリック

２．保存場所を指定し、[ファイル名]を入力後、[保存]をクリックします。
例ではファイル名を「Sample」と入力します。

Click!

以上でプロジェクトの保存ができました。

IDEC CORPORATION

79

WindLDR

画面の作成

２-６シミュレーション
WindLDR のシミュレーション機能と Web ページエディタの Editor 機能を合わせて使用することによって、動作を確認することができます。

シミュレーションの開始
１.プロジェクトから作成した Web ページを開きます。
[プロジェクトウィンドウ]の Web ページエディタツリー内の[Page1.page]をダブルクリック
します。
⇒編集した Web ページ(Page1.page)が開きます。

80

IDEC CORPORATION

画面の作成WindLDR

２．WindLDR の画面を開き、[オンライン]タブをクリックして、[シミュレーション]をクリックします。
⇒シミュレーションモードに切り替わります。
（※[シミュレーション]がオレンジのハイライトになります。）

Click!

３．１．で開いた Web ページエディタを開き、ページ上部にある、「モード」を「実行」にします。
⇒Web ページエディタと WindLDR がシミュレーションで接続された状態となります。
※各デバイスにリンクした部品の値が、シミュレーション上の WindLDR の値と同じになります。

Click!

IDEC CORPORATION

81

WindLDR

画面の作成●シミュレーション時のエラーについて

Web ページエディタのモードを「実行」にしている場合、以下のようなエラーメッセージが表示される場合があります。

このメッセージは、Web ページエディタと WindLDR がシミュレーションで接続できていないことを表します。
WindLDR のシミュレーションを開始してから、再度、Web ページエディタのモードを「実行」にしてください。
また、エラーメッセージは表示された状態となりますので、メッセージ横の[×]をクリックして、消してください。

82

IDEC CORPORATION

画面の作成WindLDR

シミュレーションでの動作確認
シミュレーションモードでの Web ページエディタの動作を確認します。

●「運転画面」の動作確認
１．Web ページエディタ上の「運転」スイッチをクリックします。
⇒WindLDR 上の M0000 が ON になります。
⇒Q0000 が ON になります。
⇒Web ページエディタ上のランプ部品が ON になります。
Web ページエディタ側

WindLDR 側

ボタン部品は少し長めに押してください

IDEC CORPORATION

83

WindLDR

画面の作成

２．Web ページエディタ上の「停止」スイッチをクリックします。
⇒WindLDR 上の M0001 が OFF になります。
⇒Q0000 が OFF になります。
⇒Web ページエディタ上のランプ部品が OFF になります。
Web ページエディタ側

84

WindLDR 側

IDEC CORPORATION

画面の作成WindLDR

３．実績セットの確認を行います。
Web ページエディタ上の「実績セット」ボタンをクリックします。
⇒WindLDR 上の M0002 が ON になります。
⇒INC 命令に設定されている、D0200 の値が 1 になります。
⇒Web ページエディタ上の実績値が 1 になります。
Web ページエディタ側

WindLDR 側

D0200 ： 0 ⇒ 1⇒ 1

IDEC CORPORATION

85

WindLDR

画面の作成

４．目標値の確認を行います。
Web ページエディタ内の目標値のテキスト入力部品を選択します。
⇒テキスト入力部品に「100」を入力します。
⇒テキスト入力部品からフォーカスを外します。
⇒WindLDR 側で、「一括モニタ」を開きます。
⇒D0100 が 100 になっていることを確認します。

Web ページエディタ側

86

WindLDR 側

IDEC CORPORATION

画面の作成WindLDR

５．画面切り替えボタンの確認を行います。
Web ページエディタ内の「グラフ」ボタンをクリックします。
⇒作成した Page2.page の画面に移動します。

ブラウザによっては、以下のようなダイアログが表示されますが、「このページから移動」をクリックしてください。

以上で、運転画面の動作確認は完了です。
そのまま、グラフ画面の動作確認を行います。

IDEC CORPORATION

87

WindLDR

画面の作成●「グラフ画面」の動作確認

１．Web ページエディタ上の「実績セット」スイッチをクリックします。
⇒WindLDR 上の M0002 が ON になります。
⇒D0200 の値がインクリメントされ 2 になります。
⇒Web ページエディタ上のトレンドグラフの部品の値が 2 に変化します。

Web ページエディタ側

WindLDR 側２にグラフが変化しますD0200 ：1 ⇒ 2⇒ 1

88

IDEC CORPORATION

画面の作成WindLDR

２．メーター部品の動作を確認します。
⇒WindLDR 上の D0300 の値に従って、メーター部品の表示が変化します。

Web ページエディタ側

WindLDR 側

1 秒ごとに 1 ずつ加算されていきます。

D0300 の値に従って、メーター部品の表示が変わります。

３．画面切り替えボタンの確認を行います。
Web ページエディタ内の「前へ戻る」ボタンをクリックします。
⇒作成した Page1.page の画面に移動します。

以上で、シミュレーションでの動作確認は終了です。

IDEC CORPORATION

89

WindLDR

画面の作成

シミュレーションの終了
オレンジのハイライトになっている[シミュレーション]をクリックすると、シミュレーションが終了します。

Click!

90

IDEC CORPORATION

ダウンロード

WindLDR

３ダウンロード
作成したプロジェクトデータを PLC にダウンロードすると、作成したラダープログラム、Web ページ
エディタを操作することが可能となります。

３-１ダウンロード
編集したプロジェクトを PLC にダウンロードします。

１．パソコンとプログラマブル表示器を USB メンテナンスケーブル<HG9Z-XCM42>で接続、
PLC の電源を投入します。

メンテナンスケーブルを接続

電源を投入

IDEC CORPORATION

91

ダウンロード

WindLDR

２． [ダウンロード]を行います。
リボンの[オンライン]をクリックして、[ダウンロード]をクリックします。
⇒設定したプロジェクトにエラーがなければ、ダウンロードダイアログが開きます。

Click!

Click!

プロジェクトにエラーがある場合、以下のようなポップアップが表示されます。
情報ウィンドウにエラー箇所が表示されるので、修正してください。

「Web ページをダウンロードする」にチェックして、「OK」ボタンをクリックします。

Click!

Click!

92

IDEC CORPORATION

ダウンロード

WindLDR

ダウンロードが完了すると、以下のようなメッセージが表示されます。
「OK」ボタンをクリックし、閉じると、PLC は作成したプロジェクトで動作を開始します。

Click!

●ダウンロードが出来ない、正常に終了しないとき
以下の項目をご確認ください。
・PLC と HMI モジュールの電源が入っていない。
・パソコンと PLC とのケーブル接続ができていない。
・パソコンに USB ドライバがインストールされていない。
※ ほかのアプリケーションソフトが同じ USB ポートを使用している場合、ダウンロードできません。

IDEC CORPORATION

93

WindLDR

動作確認

４ 動作確認
ダウンロードしたプロジェクトデータ(ラダー、Web ページ)が正常に動作するかを確認します。

４-１ PLC 上の動作確認
PLC にダウンロードした Web ページにブラウザでアクセスし、動作確認を行います。

Web ページへのアクセス
3-1 で設定したリダイレクトターゲットの Web ページにアクセスします。

１．ブラウザを起動します。
⇒ブラウザのアドレスバーに P72 で HMI モジュールに設定した IP アドレス「192.168.1.10」を入力します。
⇒Enter キーを押します。

「192.168.1.10」 を入力

２．接続されると、以下のようなポップアップが表示されます。
⇒ポップアップに P77 で設定したユーザー名、パスワードを入力します。
例では、ユーザー名：administrator パスワード：passwordとなっています。

⇒ [OK]ボタンをクリックします。

パソコンやブラウザのネットワーク・
セキュリティの設定により Web ペー
ジにアクセスできない場合がございます。
その場合、プロキシ設定やネットワ
ーク設定をご確認ください。

ユーザー名：administrator
パスワード：password

94

Click!

IDEC CORPORATION

動作確認

WindLDR

３．作成した Web ページが表示されれば、アクセスは完了です。

アクセスするアドレスについて
Web ページエディタで作成した Web ページにアクセスする場合、アドレスが以下のように変わります。

設定したHMIモジュールの設定したPageのファイル名

IPアドレス

上述のアドレスを、直接ブラウザに打ち込んでいただいても、HMI モジュールダウンロードした
ページにアクセスすることができます。

例： ダウンロードしている「Page2.page」にアクセスしたい場合、アドレスは以下のようになります。

http://192.168.1.10/viewer/view.htm?pagepath=Page2.page

IDEC CORPORATION

95

WindLDR

動作確認

モニタの開始WindLDR のモニタ機能を使用することで、現状の PLC 内部のデータを見ることができます。

モニタ機能を使用する前に以下のように、USB メンテナンスケーブル(HG9Z-XCM42)でパソコンと PLC を接続してください。

１．WindLDR の接続設定を確認します。
⇒リボンメニューの[オンライン]タブ＞[通信]グループ＞[設定]ボタンをクリックします。
⇒[通信設定]ダイアログが開きます。

Click!

96

IDEC CORPORATION

動作確認

WindLDR

２．通信設定を行います。
⇒ダイアログ左側の[USB]タブをクリックしてください。
⇒[OK]ボタンをクリックします。
⇒通信設定が USB に設定されます。

Click!

Click!

通信設定がUSB

３．モニタを起動します。
⇒リボンメニューの[オンライン]タブ＞[モニタ]グループ＞[モニタ]ボタンをクリックします。

Click!

IDEC CORPORATION

97

WindLDR

動作確認

通信が成功している状態であれば、「モニタ」ボタンがオレンジのハイライトとなります。

オレンジのハイライト●モニタが開始しない場合
USB 接続でモニタ機能が起動しない場合、以下のようなエラーメッセージが表示されます。

以下の項目をご確認ください。
・PLC と HMI モジュールの電源が入っていない。
・パソコンと PLC とのケーブル接続ができていない。
・パソコンに USB ドライバがインストールされていない。
※ ほかのアプリケーションソフトが同じ USB ポートを使用している場合、モニタ機能を起動できません。

モニタが開始できた場合、P83 からの「シミュレーションでの動作確認」を参照して、動作確認を行ってください。
シミュレーションと同様の動作になれば、実機上での動作確認は完了です。

98

IDEC CORPORATION

動作確認

WindLDR

Web ページアクセス・モニタの終了
Web ページへのアクセスはブラウザを閉じることで、終了します。

Click!

オレンジのハイライトで表示されている、[モニタ]ボタンをクリックすることで、モニタ機能が終了します。

Click!

以上で、Web ページエディタの基本設定・動作の説明は終了です。

Web ページエディタで様々な画面を作って、遠隔監視を試してみましょう！！

IDEC CORPORATION

99

MEMO

IDEC 株式会社