【UiPath】Webサイトの文章をメモ帳に入力する

#はじめに
この記事では
**Webサイトから文章を取得 ⇒ メモ帳に書き込む**
という処理のワークフローを作成してみました。

・UiPathを始めたけど よくわからない
・UiPathで変数ってどう使うの？
・UiPathってどんなものだろう…
と思っている方の役に立つと幸いです。

今回はYahoo天気から天気予報の文章を取得します。

:環境:
Studio Pro 2020.4.1 - 2020/05/08
Community License
EXE インストーラー
Microsoft Windows 10 Enterprise 64 ビット
.NET Framework バージョン 4.8

使用ブラウザ：Internet Explorer


#1．天気予報サイトから文章を取得
まずは、Yahoo天気から天気予報の文章を取得していきます。

**1．天気予報サイトを開くために[ブラウザーを開く]アクティビティを配置する**
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/9e6636d7-383d-263f-8cd0-02940639e722.png)

**2．アクティビティをダブルクリックして表示し 入力ボックスにURLを入力する**
※文字列は""(ダブルクォーテーション)で囲う必要があります!
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/d3d5e8fd-05fd-c743-f571-118bb3826510.png)

**3．[テキストを取得]アクティビティを[ブラウザーを開く]アクティビティ内に配置し
[ブラウザー内で要素を指定]をクリックする**
![図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/a1bd5f83-3173-4926-c64c-b917438cf97a.png)

**4．Yahoo天気のサイト上で取得したいテキストが青くハイライトされている状態でクリックする**
![図4 .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/519d794a-c0d4-e040-d545-24fcc91eb07e.png)

上の写真の様に要素が青くハイライトされるモードのことを**UI識別モード**と呼びます。

これでどのテキストを取得するかの指定ができました。
![図5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/dd2d82f5-1929-b9c9-209e-654c0c5cf751.jpeg)


次に取得した値をUiPathで使用できるようにするために変数を作成していきます。

#2．変数を作成する
[WeatherNews]という名前の変数を作成します。

変数の作り方は以下の2通りあります。
###①プロパティで設定
**アクティビティの[プロパティ]>[出力]>[値]でCtrl + Kを押し、変数名を入力する**
![図6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/45ae8b26-ed70-5f38-9b54-00fbe3ce10c3.png)


###②変数パネルで設定
**1．[変数タブ]をクリックする**
![図7_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/bbf3a3d1-00ff-695f-7a48-e4b81c49b34e.png)

**2．[変数パネル]>[変数の作成]をクリックする**
![図8_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/8b5fdd4f-eb20-4a14-2040-603c313b6547.png)

**3．変数名を入力する**
![図9_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/d1e8557c-ddca-1ac2-0a40-a6f35504d159.png)

**4．作成した変数をアクティビティの[プロパティ]>[出力]>[値]に入力する**
![図10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/505b17be-48e0-f6ad-0510-d9df4503e09a.png)

上記のどちらの方法で変数を作成しても良いですが
[①プロパティで設定](https://qiita.com/drafts/fb9738adb2e04bea6436/edit#%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%A7%E8%A8%AD%E5%AE%9A)する場合、**アクティビティに合うデータ型を自動で判断して適応してくれる**ため少し楽です。

以下のようなことを自動で判断してくれます
・[テキストを取得]アクティビティ ⇒ String型変数
・[要素の有無を確認]アクティビティ ⇒ Boolean型変数
・[範囲を読み込み]アクティビティ ⇒ DataTable型変数

手動で変数の型を指定したい場合は、[変数パネル]で設定します。

###変数の型の指定
**プルダウンから選択**
[変数パネル]>[変数の型]をクリックし 希望の型を選択する
![図24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/2c59f5e6-8bcd-3d37-fff2-8cd84f5fd3c8.png)


**使用したい型がない場合**
1．[型を参照]をクリックする
![図25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/b65310bd-c870-6d8d-3cfa-955e1541007b.png)

2．型を検索する
![図26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/de9e89f7-3317-81b9-10c5-8776e923eb37.png)

3．選択>[OK]
![図27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/fd3f6a1f-ac32-7804-84fe-5ca2d9467867.png)

プルダウンになかった型を指定することができます。
![図28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/b88ead1e-850b-a086-f10f-8f42fc6ad83f.png)


次は、変数に入れた値をメモ帳に入力する処理についてです。

#3．取得した文章をメモ帳に書き込む
上記までの処理で、天気予報の文章を変数[WeatherNews]に格納することが可能になりました。
次は、この変数を使ってメモ帳に文章を入力するフローを作成していきます。

**1．文章をメモ帳に入力するために、[文字を入力]アクティビティを配置する**
![図11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/65c900e8-afad-5f65-c0a5-e664057077cb.png)

**2．メモ帳を起動し、[文字を入力]アクティビティの[画面上で指定]をクリックする**
![図12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/650e7a43-8b8a-2bb6-4495-469ac78f1e83.png)

**3．UI識別モード(要素が青くハイライトされる状態)になったらメモ帳をクリックする**
![図13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/5435b0d5-0a57-c5c6-7bf6-12039930bcc1.png)

これで「どこに」値を入力するか指定することができました。
![図14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/14650ba3-fcdc-df1a-5355-508308c24639.jpeg)

次に「どんな値を」入力するかの設定をします。
[文字を入力]アクティビティを使って、文字を入力する際には、
テキストボックスに値を入力します。
![図15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/f6253ab3-d604-17cd-48a4-5693dc10f1ca.png)

**5．変数[WeatherNews]を入力する**
※変数を入力する際は""(ダブルクォーテーション)は不要です!
![図16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/23e11152-da15-ab11-ecf8-5ff2e95cf234.png)

エラーマークが出ているのでマウスをエラーマークにかざしてエラーメッセージを見てみましょう。
![図17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/4011583b-511d-5bf9-2eba-7db420632c69.png)
**「式"WeatherNews"の処理中にコンパイルエラーが発生しました。
'WeatherNews'は宣言されていません。保護レベルが原因でアクセスできない可能性もあります。」**と書かれています。
これは「その変数は存在しません。もしくは使用できない状態です。」という意味のメッセージです。
[文字を取得]アクティビティで確かに変数[WeatherNews]を作成しました。
なぜこういうエラーが起きるのでしょうか。

次では このエラーの原因とエラーの解決方法について書いていきます。

#4．エラーの原因と解決方法
###エラー原因
結論から言うと今回のエラーの原因は**変数のスコープの設定が適切でないこと**です。

スコープとは、**変数の使用可能な範囲**のことです。
UiPathにおける変数のスコープとは、どのアクティビティ内でその変数が使用できるかを設定するものです。

変数を設定した[テキストを取得]アクティビティに戻って[変数パネル]を見てみましょう。
![18_文字取得変数パネル.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/6800514c-8827-71ea-52d1-a1a5b7ce7ecb.jpeg)

[スコープ]の項目が[Do]となっています。
これは、変数[WeatherNews]は[Do]の中でしか使えない状態です。
![図19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/8441708d-75db-c68a-a5c8-d7d5334a780d.png)

###エラー解決(変数のスコープの変更)
スコープが原因でエラーが起きている場合には、**スコープの範囲を広げる**ことで解決することができます。

[Do]の外に配置されているアクティビティでも変数[WeatherNews]を使用できるようにするために、スコープを広げましょう。
**1．[変数パネル]>[スコープ]>[Do]をクリックする**
![図20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/b58e78b2-373b-a446-92ee-53e4df38af82.png)

**2．[フローチャート：天気予報取得]を選択する**
![図21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/ac492c9a-9f28-cb05-87fd-f51c76eff54d.png)

これにより[フローチャート：天気予報取得]アクティビティ内にあるアクティビティ全てで変数[WeatherNews]を使用することが可能になりました。

[文字を入力]アクティビティを確認してみるとエラーマークが無くなっています。
![21_エラー無し.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/f26d19b8-87e2-b1e2-4fb6-973b68b5ee40.jpeg)


**変数を作成したら、[スコープ]が適切か確認**するようにしてください。

これで無事 [テキストを取得]アクティビティで取得した文章を[文字を入力]アクティビティに引き渡すことができました。

開発をしてみるとエラーマークがたくさん出てきてどうすればいいかわからなくなる!
という方は、こちらの記事が大変参考になると思いますので、ぜひ読んでみてください。
・[(初心者向け)【UiPath】エラー解決へ向けたポイント・コツその①_エラーマーク前編](https://qiita.com/chi_inamori/items/210d4f5f07af8e5f1092)
・[(初心者向け)【UiPath】エラー解決へ向けたポイント・コツ_その②：エラーマーク後編](https://qiita.com/chi_inamori/items/7da36d8071e3e8c6ab4d)

#5．実行してみる
実行してみましょう。

無事 Yahoo天気から取得した文章をメモ帳に入力することができました:sunny:
![22_実行.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615615/e87187a3-d7c1-19e5-ab81-f61a6ba836ca.jpeg)
#まとめ
今回使用したアクティビティと変数は以下の通りです。
**アクティビティ**
・ブラウザーを開く
・テキストを取得
・文字を入力

**変数**
・WeatherNews (String型)

いかがでしたか？
UiPathの理解を深めるには実際にワークフローを作成することが1番の近道です。
この記事も参考に、ぜひ色々な処理の自動化に挑戦してみてください。

ご不明点、ご質問等ありましたらコメントを頂けると幸いです。


**ちなみに…**
ここまで読んでくださった方の中には「あれ？なんかアクティビティの名前変わってない？」と気づいた方もいるかもしれません。
実は、アクティビティの名前は任意の文字に変更することができます。
どういった処理をしているのかを理解しやすくするために、アクティビティの名前は適切なものに変更することをおすすめします。
変更方法やメリットなどを以下の記事で紹介していますので、こちらもぜひ読んでみてください。
[【UiPath】見やすいワークフロー作成①_アクティビティ表示名変更](https://qiita.com/asamin_na/items/dd0442f8d69ffdc61a01)


最後までお付き合いいただきありがとうございました。