FC2ブログ

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

   プログラミング [2020/01/30]

やっと、サンプルのチャットプログラム(UIのみ評価可)を想定通りに確認できたので、
次は、実際にサーバ側も用意して通信周りもどうなっているのか見たいと思ってます。

その前に、少し気になったエミュレータ上での音声入力(認識)がどうなっているのかちょっと確認します。
【前提】
・Android Virtual DeviceのAndroid 6.0(エミュレーター)についての話です。
・Windows10のタプレットPC上で動作させています。

◆日本語キーボードでの音声入力呼出し
英語版のソフトウェアキーボードには、右上の方にマイク・アイコンがあって、音声入力画面に簡単に変えられました。
でも日本語版キーボードにしたら、マイクアイコンが見当たりません。
20200130_3.jpg

日本語(IME)キーボードの場合、
-左下の「文字あA1」と書かれている(切替え)ボタンを長押しする
-「入力オプション」ポップアップから「入力方法の選択」メニューを選択
-さらにリストの中から「Google音声入力」を選択
で、音声入力ができるそうです。
やってみましたが、キーボード・レイアウトを変更するのみで、音声入力に繋がるようなメニューは出てきませんでした。
Androidのバージョンの制限なのか、AVD(エミュレータ)上での制限/不足なのかは分かりません。

別のサイトでは、「Google日本語入力」というIMEをインストールする必要があると書いてあったので、Googleのダウンロードサイトからダウンロードしてインストールを試みましたが、「デバイスが対応してない」的なメッセージが出て失敗しました。

日本語ソフトキーボードからの音声入力の呼び出しは一旦諦めます。

母艦PCに接続したマイクから音声入力がそもそもできるのか・・・?

続きを読む

スポンサーサイト





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

   プログラミング [2020/01/29]
前回、とあるサイトを丸っとマネして、チャット風アプリをエミュレータ(AVD)上で実行するところまでやりました。
★1:https://qiita.com/Yorinton/items/b029df0713a471d4569a
でも、上記サイトで説明しているような表示になりませんでしたし、「実際チャットできるようにするには?」まで到達してません。
よって、前回の続きになります。

念のため:さるが調べて/試して分かったことを簡潔にメモしてるわけではありません。ボヤキや迷走具合をそのままダラダラ書いてます。読んでるとイライラするかと思います。悪しからず。


前回のサンプルプログラムの問題を解決するには、サンプルコードの理解からです。
コード内容全体は前回の書き込み「スマフォのアプリを作りたい(9)・・・」か★1サイトをご参照ください。

◆チャットサンプルのApp.js
React Nativeのテンプレートサンプルでは、メインの処理「App」は関数として定義されていました。
const App : () => React$Node = () => {・・・}
でも、チャット・サンプルでは、コンポーネントになってました。
class App extends Component<{}> {・・・}
なぜでしょう。深く考えなくてもいいんでしょうか。
念ためのご参考:https://mae.chab.in/archives/2956
「コンポーネント」にはClassとFunction(関数)が含まれるんですね。
少し役割も違うようですが、トップのレイヤーの定義なんでどっちでもよさそうですね。

それにしたって、Componentの後ろの<{}>さるには理解不能です。
だいぶ、この書き方について解説してくれてるところを探しました。
唯一、「extends の後では任意の式が指定できます。」と説明してくれてるところを見つけました。
参考:https://ja.javascript.info/class-inheritance
それと、classの基本的なこと。
参考:https://qiita.com/tadnakam/items/ae8e0e95107e1427983f
どっちにしろ<{}>の意味は掴めません。
{中身}に何も入ってないから気にしなくていいのかな。
あまりに消化不良すぎるので、さらに検索したら、TypeScriptという単語が引っ掛かりました。
「うゎ、出たTypeScript」とか思ったのですが、何なのかはよく知りません。
Flowの件を調べているときに、引き合いに出されていた記述を見たので、Flowと横並びな感じの表現手法のようなイメージです。
TypeScriptって?
「Microsoftによって開発・発表されたプログラミング言語です。JavaScriptを拡張して作られたものですが、JavaScriptとは違い静的型付けのクラスベースオブジェクト指向言語になっています。TypeScriptをコンパイルすると、JavaScriptのコードに変換されるためJavaScriptが動く環境であればすぐに使うことができます。」
参考:https://www.sejuku.net/blog/93230

ともかく、class定義の基底クラス名の後に<>がつくときの大まかな意図は以下の解説でなんとなく分かった気になりました。ただし、そこまでです。
参考:https://qiita.com/alfe_below/items/1cb81a6a03d8d6d73b27
FlowにTypeScript・・・もう勘弁してくだせー。さるには無理です。

プチ勉強したReactと違うと思えたところ
・Appの呼び出し(サンプルなので単に「一例」ということかもしれません。)
  React:ReactDOM.render(<App … />, document.getElementById('root'))
  ReactNative:AppRegistry.registerComponent(appName, () => App);


Appコンポーネントのrender()メソッドのreturn(中身)は、以下になってます。
----JSX:App.js:-----------------------------------
<Router>
<Scene key='root'>
<Scene key='Chat' component={Chat} title='チャット'/>
</Scene>
</Router>
--------------------------------------------------

使っているのは、追加フレームワーク:react-native-router-fluxの中のコンポーネントですね。
従って、「react-native-router-flux」でぐぐりました。
参考:https://qiita.com/YutamaKotaro/items/ab52b6ba664d88a87bd9
Reactのお勉強時に参考にしたサイトでルーティングの話が出てきたが、React Ntive(クライアント・アプリ)でも必要なん?
上記のサイトの説明にあるように、「戻る」機能とかを実装するときに便利なのかもしれないですね。

使っている<Router><Scene>については、
切り換え先候補を<Scene>で定義して、それが複数あるときのルーティング(戻る:< とか)が使えるようにするために<Router>で囲うみたいです。
<Scene>は、遷移コンポーネントを列挙する場合と、その列挙したリストをグルーピングする場合に使うようです。
今回のチャットサンプルでは、<Scene key='root'>で「root」という最初の選択グループを作成し、そのグループ内に指定した<Scene key='Chat' ・・・ />で遷移先候補の実際のコンポーネントを指定します。
<Scene>の「key=」は行先としての「識別子」で、「component=」が行先コンポーネントを示します。「title=」は行先の「タイトル」ですね。
複数の<Scene>がある場合は、「initial」属性を指定して最初に動作するコンポーネントを指定するようですが、このサンプルでは1つしかないので、省略してます。つまり自動的に「Chat」という名前のコンポーネントを実行するようになっているのかと思います。

例えば、上記サンプルの「<Scene key='Chat' initial component={Chat} title='チャット'/>」と同じ並びで、「<Scene key='Search' component={Search} title='検索'/>」とかがあった場合、ChatコンポーネントからSearchコンポーネントへの遷移動作は、Chatコンポーネント側に無ければいけないみたいです。

このサンプルにおいては、全てはChat.js側ですね・・・

続きを読む



スマフォのアプリを作りたい(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」っていうやつか?
じゃあインストールしてみっぺか。

続きを読む



スマフォのアプリを作りたい(7):React Nativeのテンプレートを読む

   プログラミング [2020/01/23]
前回、ReactのJavaScriptの記述の文法?・・・というか書き方についてちょっとだけお勉強してみました。
で、いよいよReact Nativeのコードサンプルについて見てみます。
でも、前回のお勉強だけでは足りませんでした。
見れば見るほど分からないことだらけで、また発散しまくってます。

ここで、前回のお勉強経緯の説明でも流してきた用語についてちょっとだけ注釈しておきます。
ES6:ESはECMAScriptの略。ECMAはEuropean Manuufacturer Associationの略で国際標準規格。(頭に「欧」って付いてるけどね。)ECMAScriptはJavaScriptの標準規格。ES6はES2015のことで、2015年にリリースされた規格。


React-Nativeアプリ(テンプレート)のソース構成(一部)は、
 ・index.js   :エントリスクリプト
 ・app.json   :プロジェクト(プログラム名)を規定しているデータファイル
 ・App.js    :アプリの処理本体
 ・.flowconfig  :Flowによるチェック動作のパラメタ/オプション指定
 :

なんかが含まれているようです。
使われ方は、以下のボヤキの中に順次出て来たり来なかったり。


◆index.js
プロジェクト・フォルダ直下にあった、index.jsは以下の内容でした。
これが、このアプリのオオモトですよね。きっと。
----JSX:------------------------------------------
/**
* @format
*/

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);
--------------------------------------------------

最初のimportは、React Nativeのコードとしては必須の記述でしょう。たぶん。
「AppRegistryという名前のコンポーネントを使う」宣言ですね。
2番目は、このアプリ固有の処理コードを含むApp.js(入口コード)なので、至極当然。
3番目は、app.jsonは、以下の内容でした。
----JSON:-----------------------------------------
{
"name": "VTChat",
"displayName": "VTChat"
}
--------------------------------------------------

nameというキー(名前)に"VTChat"というバリュー(値:プロジェクト名)が割り当ててあります。
それをindex.js上では、appNameという名前で参照できるようにしてるんですね。
.jsonファイルをimportするだけで、中のデータを使えるということを今初めてしりました。
ただし、さるには.jsonが「XML的にデータ構造を階層化して記述できる形式/ファイル」くらいの認識しかありません。

でもって、react-nativeに含まれるAppRegistry.registerComponent()メソッドを呼び出してるところでこのファイルは終わりです。
AppRegistry.registerComponent()はこのアプリのエントリーポイントを指定するメソッドだそうです。
つまり、App.jsに含まれるAppというコンポーネントを呼び出すようにしてるんですね。
AppRegistry.registerComponent("アプリ名", () => コンポーネント名);

※App.jsを見ると「App」は関数として定義されている感じ。React Nativeでは「関数」と「コンポーネント」は同義?

話を戻します。index.jsはAppRegistry.registerComponent()以外は他に何もしてない。

つづいて・・・

続きを読む



スマフォのアプリを作りたい(6):React NativeのJavaScriptって?

   プログラミング [2020/01/20]
前回までで、なんとなく開発環境ができたっぽいので、React Nativeで書くコードはどんな?から勉強していきます。
ですが、React Nativeを理解する場合、「Reactを知っていると入り易い」とどこぞに書いてあったので、ちょっと遠回りになるかもしれませんがReactの概要を各入門サイトを読んで見ました。

ただし、さるなので、HTML、JavaScript、さらにWebに関する知識は、古く、乏しく、いい加減なので、根本から分からないことだらけです。なので途中途中「えっそこから?」的な備忘も多いし、発散ぎみであることを最初に申し上げておきます。肝心なことは、参考にさせていただいたサイトのURLを記載しておりますので、そちらを参考になさってください。

◆Reactとは
参考サイトは以下で、以下のサイトの説明で分からなかった点の補足と勝手な解釈を以降記載しています。
★1:http://www.tohoho-web.com/ex/react.html#whatis
・Facebookが開発?/考案した、Webアプリを開発するためのJavaScriptベースのフレームワークだそうです。
・JavaScriptはES6の文法を用い、JSXを利用することができるとありました。(JSX:言語という言い方をしている場合もあったが、JavaScript中にHTML/XMLを直接的に記述できる表記法と言ってもいいんでは・・・。)
・ES6文法やJSXで記述されたコードは、Babelというトランスパイラ?で実行時にJavaScript ES5の記述に置き換えられる。
・Chrome、Firefox、IE10以降で動作する。
・MITライセンスで商用利用可。

◆Reactを試しに実行してみるサンプル
★1のサイトを一通り読んだが、さるなので、何かわからない言葉/用語を調べると次から次へと不明な用語が出てくる感じでした。

まずは★1の最初のサンプルを見ればなんとなく分かるのが、
通常のHTMLと同じで、.htmlがあって、その中にJavaScript部分で組まれたコードがクライアント側で動作すると解釈しました。
ちょっと脱線-CDN?→<script crossing ... >?→CORS?→Origin?
「CDN」とタイトルされているサンプルコードをなんとなく理解するのに上記を芋づる調べする羽目になりました。
・Origin:プロトコル、ドメイン、ポートの組み合わせで表されるリクエスト先(httpX://xxx.xxx.xx.xx:pppp)
・CORS:Cross-Origin Resource Sharingの略。オリジン間リソース共有。異なるオリジンにあるリソースをリクエストするときに、ブラウザに対してそのリソースへのアクセス権を与えるように指示する仕組み。
・crossing属性:属性値にはanonymousとuse-credentialsがあり、anonymousを指定した場合、ユーザ認証情報は送付されない。use-credentialsは資格情報が送付される。
・CDN:Content Delivery Networkの略。コンテンツを配信する際に、エッジサーバと呼ばれるリクエスト元に近いサーバーにコンテンツのコピーを置き、そこからコンテンツを配信する手法?/サービス?。DNS内に指定されたURLの代理(エッジサーバ)が登録されており、そのエッジサーバへのアクセスを誘導する。エッジサーバは、CDNキャッシュサーバとも言うらしい。
参考:https://knowledge.sakura.ad.jp/19191/


要は、実行時に取り込むReactのフレームワーク/ライブラリを使うためには、Reactのスクリプトを実行する際に以下の6~8行目の記述が必要ということのようです。開発時用と実際に稼働させる用とあるそうです。(以下は実際に稼働させる用。)

----------------------------------------
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>React Test</title></head>
<body>
<div id="root"> </div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"> </script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"> </script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
----------------------------------------

Reactの場合、<script type="text/babel">と指定しなくてはいけなくて、
トランスパイラBabelは、Ajaxのライブラリに含まれてんのね。

またちょっと脱線-Ajax
:Asynchronous JavaScript + XMLの略。ブラウザ内でJavaScriptの通信機能を使って、XML形式のデータを送受信する技術。
通常、何かsubmitして、宛先が現在と同じURLであるような場合、同じ内容のHTLM全体をレスポンスさせるのではなく、部分的な内容(例えば追加のメッセージ)のみで済ませることができる手法。非同期通信と呼んでいる。(※ちょっとAsynchronousという表現が分かりにくい。)
参考:https://qiita.com/Masaki_Mori07/items/8344d3ab87913b4189a4


まだまだ、レベルの低い備忘録が続きます・・・・

続きを読む



スマフォのアプリを作りたい(5):React Native環境でデバッガを動かしてみる

   プログラミング [2020/01/09]
前回の「続・続React Native環境構築」までで、何とかエミュレータを起動してサンプルプロジェクトを実行(表示)させるところまで来ました。

その続きになります。

エミュレータ上のサンプルプロジェクトの表示内容を見ると、何となくReact Nativeのチュートリアルになっているようです。
20191224_9.jpg

さるなので言われるがままやってみます。
(英語表記なんで、きっと誤解多いけど。)
※それと、後で出てきますが、デバッグするためにはChromeのインストールが必要です。

1)最初の説明「Step One」で、「App.jsを編集してみろ」みたいなことが書かれていてます。
プロジェクトフォルダ直下にApp.jsというソースがありました。
中身は、ほとんどチンプンカンプンですが、画面に表示している内容が記述されています。
「App.js」と書いてあるところを「app.js」に変更して、セーブしてみました。

2)エミュレータ上の説明の続きは「See Your Changes」とあり、「Rキーを二度叩け」と書いてあります。
二度叩いてみると、「Step One」でやった表示内容の変更が反映されました。

3)その続きの説明で「Debug」とあり、「CmdかCtrl+mか・・・」とあります。
[Ctrl]+[M]を押してみましたが、・・・ブラウザに何やら出ました。

オンラインで何かするのか???・・・・・

続きを読む



採ったら食べよー(16):’19秋・キノコ

   山菜・きのこ採り [2020/01/03]
昨年秋に書き損ねた、キノコの消費状況を書きます。
料理してもらったときの写真がちょっと出てきたので。

さるとしては、キノコを採ってきた後
・虫出し/洗って綺麗にして、
・必要なら下茹でして、
・さらに必要ならボール、タッパー、ZIPロックに入れ、
・採れ過ぎのときは瓶詰めを作り、
(・気が向いた時には自ら調理して)

少なくとも買ってくる食材となんら変わりない状態にして
採ってきたものを気持ちよく料理に使っていただこうと気を使っているつもりなのです。

でも、余りに毎週毎週採ってくるもんだから、冷蔵庫がタッパーとボールだらけで毎回苦情を言われました。

「このキノコは何! こっちは分かんないんだから名前を書けよ!(怒)」
(さるの心の声:名前を書いたからと言って料理の仕方が分かるんか?)

仕方ないので冷蔵庫に入れるときは、マジックで大きく名前を書いた。
ついでに「鍋・汁物」、「焼き」、「揚げ・炒め」等の補足事項も書いた。

それでも、結局は補足事項は一切無効で、割とぞんざいな扱われ方をしたという印象。(口には出しませんよ。決して。)

そんな感じのものを含めて、キノコ料理をご紹介しましょう。

まずは、マイタケ
20190915_r1.jpg
焼きマイタケです。(A)塩のみ、(B)+バターの2パターンで、ワシワシ食べました。
でも、これが割と美味かった。天然ならではの素材の味を十分引き出します。(なんちゃって。)

続いて・・・

続きを読む



採ったら食べよー(15):春の恵みを食す

   山菜・きのこ採り [2020/01/01]
昨年見かけたキノコの写真をHP(さるは自然食)とか、きのこ図鑑に追加しようと整理していたら・・・
春に山菜採りをしたときの料理の写真が幾つか出てきました。
どうも、「採ったら食べよー」ネタにしようと思ってたはずなのですが、すっかり忘れてたみたいです。

この時期たいして書くこともないので、古い話で恐縮ですが載せてしまいます。

最初は、ニオサク(えぞにゅう)の煮物
20190518_r1.jpg
シロだしで、鶏肉、油揚げ、コブ、シラタキと一緒に煮物にしました。
ニオサクはやっぱイケます。

次が、アイコ(ミヤマイラクサ)の油炒め
20190518_r2.jpg
ベーコンと一緒に炒めています。
さる家では、定番の料理なのですが、このアイコは茹でて冷凍したものを解凍して使っています。
「どうにかシナシナにならないような解凍の仕方を探してから料理してやろう」と思っていたのですが、問答無用で使われてしまいました。つべこべ言うと逆襲に合うので黙っていただきました。

3品目は、ホンナ(イヌドウナ)のお浸し
20190519_r1.jpg
甘めに味付けされたゴマ味噌をからめていただきました。
けっこうイケた。

それから、以前の書き込み「ワラビ漬けてみました・・・」の後日談をついでに・・・



続きを読む



カレンダー
12 | 2020/01 | 02
- - - 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 30 31 -
プロフィール

さるもすなる

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

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

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



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



マニュアルのお申し込み



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

この人とブロともになる

QRコード
QR