FC2ブログ

スマフォのアプリを作りたい(8):React Nativeでチャットアプリ味見

   プログラミング [2020/01/24]
単純に考えれば、チャットを不特定多数で行う場合は、サーバーが必要なんですよね?

それはさて置き、「React Native チャット」をキーワードにして検索すると、「簡単にできます」調のサイトが見つかります。
その内の1つ、以下のサイトを参考にやってみました。
★1:https://qiita.com/Yorinton/items/b029df0713a471d4569a
※ここの事例はUIだけなのかな?
 この時点でまだ斜め読みした程度でしか内容は理解してません。いくつかの追加のフレームワーク(ライブラリ)をインストールするように書いてあります。


◆準備(追加インストール)
react-native-gifted-chatのインストールはコマンドプロンプトからnpmコマンドを打つだけのようだったので早速やってみました。
でもエラーになりました。
----コマンドプロンプト--------------------------------

45 verbose node v12.13.1
46 verbose npm v6.12.1
47 error code ENOENT
48 error syscall spawn git
49 error path git
50 error errno ENOENT
51 error enoent Error while executing:
51 error enoent undefined ls-remote -h -t https://github.com/EvanBacon/react-native-parsed-text.git

--------------------------------------------------

undefinedと言ってます。何が・・・・「git」っていうやつか?
じゃあインストールしてみっぺか。


1)Gitのインストール
参考:https://qiita.com/okamoai/items/a875b26abab7f18da7d1
ダウンロードサイト:https://git-scm.com/download/win

今更ですがGitってなんですか?
「プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである。」
「各ユーザのワーキングディレクトリに、全履歴を含んだリポジトリの完全な複製が作られる。したがって、ネットワークにアクセスできないなどの理由で中心リポジトリにアクセスできない環境でも、履歴の調査や変更の記録といったほとんどの作業を行うことができる。」from Wikipedia


「Git-2.25.0-64-bit.exe」というファイルがダウンロードできました。
何も考えずに実行してみます。(ちなみに、Windows10の環境です。)

-Windowsの警告メッセージの後に以下のライセンスへの合意確認メッセージが出ます。
20200124_1.jpg
 元の作者がリーナス・トーバルズさんのようなのでGPLですね。[Next]します。

-インストール先フォルダの選択画面が出ます。node.jsとかと同じ並びを指定しました。(さるのタブレット環境ではD:ドライブ上です。)

-インストール項目の選択画面が出ました。
20200124_2.jpg
 よくわからないので、全部チェックして、[Next]します。

-スタートアップメニューの指定。デフォルトのまま[Next]した。

-次にGitで使うエディタの選択画面が出た。
 ただし、インストール済みの選択肢(エディタ)がないので、その他を選択し、普段使っているsakuraを指定してみた。
 [Test Custom Editor]を実行すると、「対応できてない」エラーが出て[Next]ボタンが非活性になってしまうので、実行しないで[Next]する。

-コマンドラインを使うのにどのシェル?を使うかと聞いているような・・・
20200124_3.jpg
 またまたよく分からないので、デフォルト(真ん中)のまま[Next]。

-さらに判断不能な問い合わせ。HTTPSするときのライブラリはどれがいい?
20200124_4.jpg
 デフォルト(OpenSSL)のまま[Next]。

-もっと判断不能。もう怪しい要約すら・・・
20200124_5.jpg
 Windows-Styleとあるデフォルトのまま[Next]。

-ターミナルエミュレータ?
20200124_6.jpg
 ここは、デフォルトじゃない方にWindowsとあったのでそっちを選択して[Next]。

-拡張オプション?
20200124_7.jpg
 デフォルトのまま[Install]をクリック。

-ガーっとインストールが始まって、終了メッセージが出たので[Finish](?だったかな)した。
 メッセージウィンドウのチェック欄をそのままにすると、コマンドプロンプト(MINGW64)とブラウザ(Gitのリリースノート)が開きます。

「git --version」とコマンドプロンプトで打って見ましたが、「見つかりません」エラーになります。

環境変数のPATHに「(インストール先フォルダ)\Git\cmd」パスを追加する必要があります。
デフォルトでインストールした場合は、「C:\Program Files\Git\cmd」のはずです。
「git --version」を再実行すると、2.25.0.windows.1と出ました。

また、上記の件を調べている間に以下のサイトをめっけました。
https://proengineer.internous.co.jp/content/columnfeature/6893
さるがインストールした時の選択オプションがBestではなさそうな感じです。
まあ、気にせず続けます。


2)react-native-gifted-chatのインストール
インストールコマンドは、「npm install react-native-gifted-chat --save」
「--save」はpackage.jsonにreact-native-gifted-chatを追加するために指定するとあります。

ここで、ちょっと疑問が。
React Native自体をインストールする際も、インストールは「npm install -g react-native-cli」と打つだけでした。
インストール先は、npm自体をインストールする際に何もせずにやって、上記の「-g」パラメタを付けると「C:\Users\(ユーザID)\AppData\Roaming\npm\react-native 」になります。

実際にプロジェクトを作成する際には、「react-native.cmd init (プロジェクト名) --template typescript」とやります。
このとき、react-native環境のコピーっぽいものが「(プロジェクトフォルダ)\node_modules」以下に作成されているように思えます。
その場合、新しい追加のフレームワーク(react-native-gifted-chat等)をインストールした場合、既に作成したプロジェクトにその追加フレームワークを反映させるにはどうしたらいんでしょう。

まずは、やって見ます。
▼1.念のため、プロンプトのカレントを既に作成してあるプロジェクトフォルダに変更して、
▼2.「npm install react-native-gifted-chat --save」と打って実行します。「-g」なしです。

以下のようなメッセージになりました。
----コマンドプロンプト--------------------------------
D:\AppMake\proj\VTChat>npm install react-native-gifted-chat --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-gifted-chat@0.13.0
added 12 packages from 39 contributors and audited 952678 packages in 76.594s
found 4 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
--------------------------------------------------

ワーニングは出てますが、エラーではなさそう。

でも、どこに入ったんでしょう。
react-native-cliの入っている「C:\Users\(ユーザID)\AppData\Roaming\npm\node_modules」には変化ありませんでした。
react-native.cmd initで作成したプロジェクト側「(プロジェクトフォルダ)\node_modules」の下にreact-native-gifted-chatフォルダが追加されてました。
従って、インストールの手順としては、上記の▼1~2で妥当だったと云うことかと思います。


3)react-native-router-fluxのインストール
react-native-gifted-chatのときと同じように、「npm install react-native-router-flux --save」とプロンプトから実行します。

react-native-gifted-chatと同じようにワーニングは出てましたが、インストールできたようです。
「(プロジェクトフォルダ)\node_modules」の下にreact-native-router-fluxフォルダが追加されました。


4)react-native-gesture-handler/react-native-reanimatedのインストール
これは、次の手順のサンプルコードをビルドしてみた時点で足りないと出たものです。
実行時のエミュレータには、こんなメッセージが出ます。
20200124_8.jpg

ただし、メッセージが長いし何が悪いのか分かりません。
なので、「react-native run-android」を実行したときに展開されるプロンプト「node・・・・cli.js」上のメッセージを参照してください。

前のライブラリのときと同じように、「npm install react-native-xxxx-xxxx --save」とプロンプトから実行します。
正常終了すると「(プロジェクトフォルダ)\node_modules」の下にreact-native-xxxx-xxxxフォルダが追加されます。


◆サンプルスクリプトを実行してみる
★1のサイトにサンプルコードが丸っと載ってたので、
・既存のApp.jsをバックアップして、サンプルコードの内容に変更してセーブします。、
・Chat.jsも丸っとまねしてプロジェクトフォルダ下にセーブしました。

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

import React, { Component } from 'react';
import {
Router,
Scene,
} from 'react-native-router-flux';
import Chat from './Chat';

export default class App extends Component<{}> {
render() {
return (
<Router>
<Scene key='root'>
<Scene key='Chat' component={Chat} title='チャット'/>
</Scene>
</Router>
);
}
}
--------------------------------------------------

※Chat.jsをApp.jsと同じフォルダに作成した関係で、参考サイトのソースから赤字の部分を変更しています。

----Chat.js:---------------------------------------
/**
* Chat Sample
*
* @format
* @flow
*/

import React, {Component} from 'react';
import {
View,
Text,
} from 'react-native';
import {
GiftedChat
} from 'react-native-gifted-chat';

export default class Chat extends Component {

//メッセージ内容をstateで管理
state = {
messages:[],
};
//「Send」ボタンが押された時に実行されるメソッド
onSend = (messages = []) => {
this.setState((previousState) => ({
//stateで管理しているmessagesに送信されたメッセージを追加
messages: GiftedChat.append(previousState.messages, messages),
}));
}

render() {
return (
//react-native-gifted-chatが提供するコンポーネント
<GiftedChat
messages={this.state.messages}//stateで管理しているメッセージ
onSend={(messages) => this.onSend(messages)}//送信ボタン押した時の動作
user={{
_id: 1,
}}
/>
)
}
}
--------------------------------------------------


コマンドプロンプトから「react-native run-android」を実行してみます。
実際は参照ライブラリの不足があって、何度かやり直しましたが、最終的には動作させることができました。
以下の内容が表示されました。
20200124_9.jpg

ソフトキーが表示されて、何か入力するとメインのエリアに吹き出し状の枠内に表示されます。
マイクアイコンも表示されていて、押すと音声入力もする?
問題は、
・タイトル「チャット」が文字化けしています。
・ソフトキーが日本語入力できそうにありません。
・音声入力は実際には動きませんでした。


まずは、サンプルコードを理解しながら、上記問題を解消したいと思います。

それと、ライブラリの不足が見つかって、「・・・run-android」しながら「npm install・・・」している際に以下の現象も発生しました。
・「node・・・cli.js」が居なくなって、エミュレータがフリーズする。
・「・・・run-android」してから起動するまで、5分~10分掛かる。アプリのReloadもなんか遅い。
上記は、原因追及できそうもないですが・・・まずは備忘。


いつ、続きができるかわからないので、一旦ここで話を切ります。

では、また続きはその内。
m(__)m
スポンサーサイト





コメントの投稿

非公開コメント

カレンダー
01 | 2024/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 - -
プロフィール

さるもすなる

Author:さるもすなる
さるです。別HPサイト「さるもすなる」から侵食してきました。 山菜/きのこ、それとタイトルにしたPPバンド籠のことをメインに徒然に・・・・暇を持て余したさるの手仕事:男手芸のブログってことで。

最新記事
最新コメント
月別アーカイブ
カテゴリ
天気予報

-天気予報コム- -FC2-
本家のHPのトップ
山菜や茸の話です
PPバンドの籠作品と作り方です
投稿をお待ちしております



PVアクセスランキング にほんブログ村 にほんブログ村 ハンドメイドブログへ



マニュアルのお申し込み



検索フォーム
リンク
RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

QRコード
QR