react-native-google-speech-apiというパッケージを見つけて
糠喜びしたのもつかの間
ドはまりした話を前回書きました。

やっと、やっとGoogleのSpeech-to-Textを追っかけます。

さて、今回はサンプルコードを追っかけて、実際の音声認識をやってみて、その精度を確認したいと（今時点では）思っています。

◆react-native-google-speech-apiのサンプル
まずは、react-native-google-speech-apiのサイトにあったサンプルコードはちょっと処理が少なかったので、インストールした同パッケージ・フォルダ内のExample\App.jsを参考（丸写し＋α）して、Speech.jsを作り直しました。

----Speech.js--------------------------------------
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import {
  NativeModules,
  Platform,
  NativeEventEmitter,
  DeviceEventEmitter,
  Text,
  View,
  Button,
  Alert,
  PermissionsAndroid,
} from 'react-native';

import React, { Component } from 'react';

const { GoogleSpeechApi } = NativeModules;

const EventEmitter = Platform.select({
  android: DeviceEventEmitter,
  ios: new NativeEventEmitter(GoogleSpeechApi),
});

export default class Speech extends Component {

  constructor(props) {
    super(props);
    this.state = {
      currentText: "",
      previousTexts: "",
      button: "Start listening"
    };
  }

  componentDidMount(){
    GoogleSpeechApi.setApiKey("Your google access token");
    EventEmitter.addListener('onSpeechRecognized', (event) => {
      var previousTexts = this.state.previousTexts;
      var currentText = event['text'];
      var button = "I'm listening";
      if (event['isFinal']){
        currentText = "";
        previousTexts = event['text'] + "\n" + previousTexts;
        button = "Start listening";
      }

      this.setState({
        currentText: currentText,
        previousTexts: previousTexts,
        button: button
      });
    });

    EventEmitter.addListener('onSpeechRecognizedError', (error) => {
        this.setState({
          button: "Start listening"
        });
        Alert.alert(
          "Error occured", 
          error['message']
        );
    });

    EventEmitter.addListener('onSpeechEnd', (event) => {
        console.log('Speech end');
    });
    EventEmitter.addListener('onSpeechError', (event) => {
        console.log('Speech error');
    });
    EventEmitter.addListener('onSpeechResults', (event) => {
        console.log('Speech Results');
    });

  }


  startListening = () => {
    this.setState({
      button: "I'm listening"
    });
    GoogleSpeechApi.start();
  }

  requestAudioPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
        {
          title: 'Record Audio Permission',
          message:
            'App needs access to your microphone ' +
            'so you can convert speech to text.',
          buttonNeutral: 'Ask Me Later',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK',
        },
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log('permission granted');
        this.startListening();
      } else {
        console.log('permission denied');
      }
    } catch (err) {
      console.warn(err);
    }
  }

  render() {
    return (
      <View style={{ margin: 30 }}>
        <Text>{this.state.currentText}</Text>
        <Text>{this.state.previousTexts}</Text>
        <Button
          title={this.state.button}
          onPress={Platform.OS === 'ios' ? this.startListening : this.requestAudioPermission}/>
      </View>
    );
  }
}
---------------------------------------------------

※サンプルコードから以下を修正しています。
1)サンプルコードではところどころ「;」が無いところがありました。でもBuildは通りました。でも、なんだか気持ちが悪いので、「;」を追加しています。
2)それと、EventEmitter.addListener()メソッドで、イベント発生時のコールバック関数を指定できるようなのですが、デバッグ用に少し追加しました。ただし、イベント名はreact-native-voiceで使っているものを当てずっぽうで持ってきてます。


さらっと見た感じで、
1)Googleアクセス・トークンというのを指定しないといけないみたいです。
2)使用言語を指定している部分が見当たりません。
まずは、上記2点について調べます。




◆Google Cloud Platformの認証情報について
参考：https://cloud.google.com/speech-to-text/docs/reference/libraries
上記のサイトの途中に「[サービスアカウントキーの作成]ページに移動」というリンクがあります。
それをクリックして、表示される画面で「新しいサービスアカウント」／アカウント名／「Project」－「オーナー」／「JSON」を指定して、［作成］ボタンをクリックします。
以降、図の表示が小さくて見えない場合は、クリックすると文字が見える程度の画像で表示すると思います。


「My First Project-xxxxxxxxxxxx.json」というファイルがダウンロードされます。
中身は、以下の感じ。
どれくらい秘匿性のあるものなのか分からないので、だいぶ省略（・・・・）しちゃってます。

----JSON:------------------------------------------
{
  "type": "service_account",
  "project_id": "・・・・",
  "private_key_id": "・・・・",
  "private_key": "-----BEGIN PRIVATE KEY-----\n・・・・\n-----END PRIVATE KEY-----\n",
  "client_email": "・・・・",
  "client_id": "・・・・",
  "auth_uri": "https://・・・・",
  "token_uri": "https://・・・・",
  "auth_provider_x509_cert_url": "https://・・・・",
  "client_x509_cert_url": "https://・・・・"
}
---------------------------------------------------

どれが、トークン？　JSON自体がそれ？
指定先のメソッドがGoogleSpeechApi.setApiKey()なので、「APIキー」？を指定するのか？

JSONをダウンロードした後に表示されたブラウザ上ページには、確かに「APIキー」という記述も見えて、先ほどのアカウント（.json）とは別に確保もできるっぽい。

Googleさんの認証に関する説明がありました。
参考：https://cloud.google.com/docs/authentication
ふぇーん。何言ってるのか分かんない。

前回は、
・Google Cloud Speech to Textの利用者登録をして、
・Androidエミュレータのマイク入力設定をやり、
・react-native-google-speech-apiの嘘くさいインストールをやって、
・勢い余ってreact-native-google-speechもインストールし、
・音声認識のサンプルコードをプロジェクトに取り込んだ
ところまででした。

その続きをやってみたときのメモです。
カオスというかパニックというか・・・
ともかく、ひっちゃかめっちゃかです。

なので、この回は初心な方には読む価値なしです。

さるはバカなので、やっていることのほとんどは闇雲です。
なので、すぐトラブルになります。
失敗して、やり直し、手戻り続きです。

本当は、そこを省いて成功手順だけ書けば親切なんでしょうが、自分のための備忘録なので、全部載せます。
同じエラー（メッセージ）に遭遇した時とかに何かの足しに・・・なるのかなぁ。


今回、
・react-native-google-speechを含んだ環境で発生した各エラーについて
　→◆サンプルのビルド（react-native-google-speech有り）

・react-native-google-speech-apiのnpm installでENOVERSIONSの発生の対策
　→◆react-native-google-speech-apiのインストールし直し

・react-native-google-speech-api追加後のビルド失敗から環境破壊
　→◆サンプルのビルドからパニック

・プロジェクトの再構築からビルドが通るようになるまで
　→◆環境を作り直し～react-native-google-speech-apiビルド

最後だけが、「もしかしたら参考になるかも」です。


◆サンプルのビルド（react-native-google-speech有り）
果たして動くんでしょうか。
「react-native run-android」を実行し、ビルドを行って見ます。

当然、すんなりとはビルドは通りませんでした。

最初にreact-native-google-speech-apiの「手動インストール」の入力ミスでエラーが出ました。
そこからです。

1回目：Unable to delete directory

----コマンドプロンプト-----------------------------
：
What went wrong:
Execution failed for task ':react-native-google-speech:generateDebugBuildConfig'.
> java.io.IOException: Unable to delete directory （プロジェクトフォルダ）\node_modules\react-native-google-speech\android\build\generated\source\buildConfig\debug\com\prayagad.
：
---------------------------------------------------

→この前の実行で、フォルダが中途半端に作成されたままになったみたいです。
「・・・buildConfig\debug・・・」のdebug以下を一旦削除して、「react-native-google-speech」フォルダへのアクセス権がなぜか制限されてたので、フルアクセスに変更してあげました。

2回目：Annotation processors must be explicitly declared now.

----コマンドプロンプト-----------------------------
：
> Task :react-native-google-speech:javaPreCompileDebug FAILED

Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/5.5/userguide/command_line_interface.html#sec:command_line_warnings
27 actionable tasks: 6 executed, 21 up-to-date

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-google-speech:javaPreCompileDebug'.
> Annotation processors must be explicitly declared now.  The following dependencies on the compile classpath are found to contain annotation processor.  Please add them to the annotationProcessor configuration.
    - auto-value-1.1.jar (com.google.auto.value:auto-value:1.1)
  Alternatively, set android.defaultConfig.javaCompileOptions.annotationProcessorOptions.includeCompileClasspath = true to continue with previous behavior.  Note that this option is deprecated and will be removed in the future.
  See https://developer.android.com/r/tools/annotation-processor-error-message.html for more details.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org
：
---------------------------------------------------

→上記のメッセージ後にもう一回別の「FAILURE：」が表示されているが、「What went wrong：」の内容が同一なので、割愛する。

どうも『Gradle 6.0としては、よくない機能が使われた』と言ってるような・・・

またもや、新単語。Gradleって何よ！
一言で言えば「ビルドシステム」だそうです。つまり、ビルドの手順をJVM上で動くスクリプト（Groovyと呼ばれる。）で書けるとあります。
はぁ・・・そっそうなんですか・・・

で、その後のメッセージは『やろうとした「react-native-google-speech:javaPreCompileDebug」というのが失敗しちまったぜ。何が悪かったって、annotationProcessorは今でははっきり指定しないといけないってことよ。compile classpathで指定されているdependenciesがannotation processorを含んでいるから、以下の指定を追加してみろよ。別の方法もあるっちゃぁあるんだが・・・』って言ってるのかなぁ。
全く・・・訳してみても意味が理解できません。
何言ってんの？どこのファイルのこと？

どうも「annotationProcessor」指定というのは、（プロジェクトフォルダ）\node_modules\（パッケージフォルダ）\android\build.gradleで指定するものらしい。
あちこち見て回って、理解はしてないけど、以下のように指定を突っ込んだ。

----build.gradle-----------------------------------
dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
：
：
    // https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind
    compile group: 'com.fasterxml.jackson.core', name: 'jackson-databind', version: '2.8.5'

    // added for Gradle error comment
    annotationProcessor "com.google.auto.value:auto-value:1.1"
｝
---------------------------------------------------

まだまだ、この調子で続きます。

「スマフォのアプリを作りたい」も13回目になりました。
これまでのこのタイトルの記事の流れは、こんなんなってます。
Start
　→スマフォのアプリを作りたい
　　→開発環境をVisualStudioで・・・挫折
　　→開発環境をReact Nativeで
　　　→環境構築、続き（失敗）、リトライ
　　　→デバッガの動かし方
　　→React Nativeのソースの書き方
　　　→ReactのJavaScriptの概要
　　　→React Nativeのテンプレートを読む
　　→簡単なチャットアプリを作る
　　　→サンプル味見とちょと修正
　　　→音声入力とエミュレータ操作
　　　→サーバ側動作環境の準備
　　　→アプリとサーバでチャット
　　→音声認識をやってみる←今回はココ

音声認識をやってみたいなーなんて思ってます。
かと言って、音声認識エンジンを作るとかいうことではなく、アプリから利用できればいいんです。
しかも、ソフトキーボードのマイクアイコンとかではなく、アプリから直接的に開始－終了とか制御できるようにしたい。

以前、エミュレータ（ＡＶＤ）既設の機能を試したときには、音声の入力すら確認できなかったので、いまのさる環境で作って／試せるかは、かなり不安があります。


◆Google Chromeの音声認識
さるの今のレベル（ど素人）からすると、かなりハードルが高そうなことをやろうとしていると自覚しているので、気分を高めるために、以下のサンプルをご紹介します。

Chrome上でしか機能しないと思いますが、Googleさんの音声認識が簡単に使えちゃうHTML（JavaScript）です。
ほぼ、どっか（だいぶ前に作ってあったのでどこだったか忘れちゃいました。ごめんなさい。）のパクリをイジイジしたものです。

----HTML:-----------------------------------------
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>音声合成・認識アプリ</title>
</head>
<body>
    <input id="txt1" type="text" value="おめのガバン、おぼでぐねが？">
    <input id="btn1" type="button" value="話す">
    <script>
        var btn1 = document.getElementById("btn1");         //ボタンの取得
        btn1.addEventListener("click", function() {         //ボタンがクリックされたら
            var synth = new SpeechSynthesisUtterance();     //設定を入れるオブジェクト
            var txt1 = document.getElementById("txt1");     //テキストボックスを取得
            synth.text   = txt1.value;      //話す内容
            synth.lang   = "ja-JP";         //言語
            synth.rate   = 1.0;             //速さ
            synth.pitch  = 1.0;             //高さ
            synth.volume = 1.0;             //音量
            window.speechSynthesis.speak(synth);            //話す
        });
    </script>
    <br>
    <br>
    <input id="btn2" type="button" value="認識開始">
    <div id="txt2">開始待ち</div>
    <br>
    <div id="txt3">ここに音声認識結果を表示</div>
    <script>
        var recog = new webkitSpeechRecognition();  // 音声認識オブジェクト
        var fstart = false;
        var btn2 = document.getElementById("btn2");
        var txt2 = document.getElementById("txt2");
        var txt3 = document.getElementById("txt3");
        // ボタンを押した時の処理
        btn2.addEventListener("click", function() {
            fstart = !fstart;
            if(fstart) {
                txt3.innerHTML = "";
                btn2.value = "認識停止";
                recog.lang = "ja-JP";       // 認識する言語の設定
                recog.start();              // 音声認識をスタート
            }
            //alert("sutate:"+fstart);
        });
        // 認識開始した時
        recog.addEventListener("soundstart", function() {
            txt2.innerHTML = "認識中...";
        });
        // 認識終了した時
        recog.addEventListener("end", function() {
            if(fstart) {
                recog.lang = "ja-JP";       // 認識する言語の設定
                recog.start();              // 音声認識をリスタート
            }
            else {
                btn2.value = "認識開始";
                txt2.innerHTML = "開始待ち";
            }
        });
        // 認識が成功した時
        recog.addEventListener("result", function(ret) {
            txt3.innerHTML += "<br>" + ret.results[0][0].transcript;
        });
        // 認識に失敗した時
        recog.addEventListener("nomatch", function() {
            txt2.innerHTML = "認識できませんでした";
        });
    </script>
</body>
</html>
---------------------------------------------------

ためしに、以下に置いてみました。よかったら試してみてください。
http://sarumosunaru.starfree.jp/voicebychrome2.html
［認識開始］ボタンを押してからマイクに向かって何か話せば、話した内容がテキスト化されて表示されます。

マイクの感度がよくて、発音がしっかりしていれば（訛ってなければ）かなり認識してくれます。
すげーと思います。
ただし、PC版のChromeでしか動かないみたいです。スマフォ（iPhone）のChromeでは反応しませんでした。
当然、Androidエミュレータ上の「ブラウザ」でも動きませんでした。

マイクが有効かどうかは、以下の手順で確認できます。（Windows10）
－タスクバー上の入力欄に「サウンドの設定」と入力して、リスト表示される一番上の「サウンドの設定」を選択します。
－右側の内容をスクロールして、「サウンドコントロールパネル」をクリックします。
－［サウンド］ダイアログが表示されるので、［録音］タブを選択します。
－使用可能な（チェックマーク付き）マイクが存在するかを確認してください。
－あれば、そのマイクの右側のインジケータが、音に反応して動くかを確認してください。
有効なマイクが無い、あるいはインジケータが動かないなどの場合は・・・
色々と原因があることなので、ご自分でなんとかしてください。

キーボード入力が苦手なのに、何か「文章をパソコンに入力しないといけない」なんて言う方は、先のページを使って、
－文章にしたい内容を話して→テキストに変換する
－画面に表示されたテキストをコピペしてどっかにコピーする
って使えば、結構な効率アップになるかもよ。


では、そろそろ本題についての調べて／試す独り言を続けます。

いつ、このサブタイトル「React Nativeでチャットアプリ味見」から離れられるか、ちょっと想像付かなくなってきてます。
ちょいちょいっと簡単なものなら作れるかと思って始めましたが、そうも行ってません。
深いです・・・っていうか、やたら色んなモノが関係してきて、分けがわかんなくなりそうです。
調べを続けて行く内に、前のコトの意味を忘れていきます。年ですな。

「スマフォのアプリを作りたい」で始めたこの話の状況はこんなんなってます。
Start
　→スマフォのアプリを作りたい
　　→スマフォ側の環境はReact Nativeを使用します
　　　→試しにチャットアプリでReact Nativeコードを味見して見ます
　　　　→スマフォ側のUIをサンプル・コードで動かしてみました
　　　　　（react-native-gifted-chatを使ったサンプル）
　　　　→サーバ側動作環境を準備した
　　　　　（RatChetを使ったサンプル）
　　　　→スマフォとサーバでチャット動作を試したい←今回はココ

と、ここで・・・「前のスマフォ側コードにチャットサーバを設定しているようなところを見かけた気がしない。Sendとかやってたっけ？」「react-native-gifted-chat」はUI-ONLYなのかしら？
まずは、そこから調べはじめます。

※「スマフォのアプリを作りたい（８）・・・」辺りから読んでいないと、以下の内容は読んでも理解いただけないかと思います。特に前提となるチャットサーバ環境／準備手順等については、前回記事をご参照ください。


◆Gifred-Chatは通信処理を含むのか？
以下を読むと、どうも含んでいないらしい。
参考：https://qiita.com/Satoooon/items/b3d781f1caafe394f134

でもって、「react native websocket」で検索すると・・・
React NativeでWebsocketを使うフレームワークがあるらしい。
参考：https://github.com/tiaanduplessis/react-native-websocket
でも、その中身と使用例を見ると、なんだか違和感がある。
WSというコンポーネントが定義されていて、それを使うようになっているみたいだが、
GiftedChatコンポーネントの中のメソッドからどうやってそれらを使うのかちょっとイメージできない。

さらに、検索して以下のページが出てくる。
React Native本家：https://facebook.github.io/react-native/docs/network
上記の「WebSocket Support」の部分の説明で概要は分かった気になれたが、react-native-websocketの利用例とはまったく別ものです。
はい。ここで勘違いしてはいけないのが、本家の説明はWebSocketの基本的な使い方であって、react-native-websocketのことではないということです。

さらに、「React Native Cookbook　著者：Stan Bershadskiy, Crysfel Villa」という市販本の一部をGoogleブックスから見ることができました。P213辺りでWebSocketの使い方が説明されています。URLはクソ長かったので省略します。

前に試したChat.jsに、react-native-websocketではなく、素のWebSocketを使うように処理を追加すればできる気になってきました。
やってみます。


以下は、無駄になったreact-native-websocketのインストール方法です。読み飛ばしてください。

---

---

◆react-native-websocketのインストール（不要です）
以前、React Nativeのテンプレート環境にreact-native-gifted-chatをインストールしたときのやり方でいいのかと思います。
コマンドプロンプト（管理者権限）を起動して、以下の如く。

----コマンドプロンプト-----------------------------
C:\WINDOWS\system32>cd /d D:\AppMake\proj\VTChat

D:\AppMake\proj\VTChat>npm install react-native-websocket --save
npm WARN @typescript-eslint/eslint-plugin@1.13.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/parser@1.13.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-react@7.12.4 requires a peer of eslint@^3.0.0 || ^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-react-native@3.6.0 requires a peer of eslint@^3.17.0 || ^4 || ^5 but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ react-native-websocket@1.0.2
added 1 package from 1 contributor and audited 952806 packages in 81.028s
found 4 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
---------------------------------------------------

できたっぽいです。
「（プロジェクトフォルダ\node_modules」の下に「react-native-websocket」というフォルダが作成されています。

---

---

スマフォ・アプリ側にWebSocket通信の処理を実装します。・・・

ちょっと、もうタイトル長過ぎ。
なので、「④」で済ませちゃってますが、つまり、こういうことです。
Start
　→スマフォのアプリを作りたい
　　→スマフォ側の環境はReact Nativeを使用します
　　　→試しにチャットアプリでReact Nativeコードを味見して見ます
　　　　→スマフォ側のUIをサンプル・コードで動かしてみました
　　　　　（react-native-gifted-chatを使ったサンプル）
　　　　→サーバ側を準備したいと思ってます←今回はココ


◆チャットサーバを準備するには
どんな環境があるのか？

－チャット的な動きをさせるための通信プロトコル？規格？－
△XMLHttpRequest：JavaScriptなどのウェブブラウザ搭載のスクリプト言語でサーバとのHTTP通信を行うための、組み込みオブジェクト（API）である。 すでに読み込んだページからさらにHTTPリクエストを発することができ、ページ遷移することなしにデータを送受信できるAjaxの基幹技術である。
→レスポンス性能的にちょっと難があるそうな。

○WebSocket：ウェブアプリケーションにおいて、双方向通信を実現するための技術規格である。XMLHttpRequestの欠点を解決する技術。
→上記の「難」を解決するんだって。

－チャット等を実現するためのフレームワーク？サービス？－
△Rails：Ruby on Railsのこと。Rubyでできたフレームワーク（ライブラリ群？）
→Rubyで作る気はない。

△Pusher：websocketを提供するAPIで、アカウント登録することで無料である程度使える。
→「ある程度無料で」とあるので、どっからか有料になっちゃうのかな。

△Firebase：Googleが提供している、すばやく高品質のモバイルアプリやWebアプリケーションを開発することができるプラットフォーム（クラウドサービス）です。Firebaseを使うことで、開発者はアプリケーションの開発に専念でき、バックエンドで動くサービスを作成する必要も管理する必要もありません。
→検索するとこれを使ったという事例が多かった気がする。環境全てが楽に手に入りそう。無料プランでもかなり使えそう。

○RatChet：WebSocketを介してクライアントとサーバー間でリアルタイムの双方向アプリケーションを作成するツールを開発者に提供する疎結合PHPライブラリ。MITライセンス。
→きっと、Firebaseに比べたら難儀しそうだけど。全体把握（保守性）＆ランニングコストのことを考えた場合、これでいっかなぁ。

まだまだ、色々とあるみたいでしたが、PHPでただっぽいRatChetを使ってみることにします。

◆Eclipse環境を復活させる
以前使ってたサーバ・スクリプト開発環境のEclipseを復活することにしました。
（スマフォ・アプリ環境をタブレットにインストールしようとして迷走していた時、タブレットのディスク容量不足のために一旦アンインストールしてしまってました。今度は１TBの増設SSDを接続してあるし、余裕で入るでしょう。）

参考：https://mergedoc.osdn.jp/
さるの場合、上記のサイトから、「Eclipse 4.7 Oxygen」を選択し、次の画面の（Download）ボタンが沢山並んでいるところの「Windows 64bit-full edition」行の「Ultimate」列の［Download］ボタンを選んで、ダウンロードを実施しました。以前と同じVersionを選択したのは、やはり少し慣れがあるからです。

インストールは、ダウンロードしたpleiades-ultimate-win-64bit_jre.zipを解凍するだけです。
ただし、あんまりパスが深いところになると、実行時に問題があるという話が以前はありました。
.zipをダブルクリックすると、解凍先を指定するダイアログが出ます。
指定したパスの下に「pleiades」という名前のフォルダが作成されて、その下に展開されます。

以下２つのショートカットをディスクトップとかに作っておくと便利です。
（インストール先フォルダ）\pleiades\eclipse\eclipse.exe
（インストール先フォルダ）\pleiades\xampp\xampp-control.exe

次は、・・・