概要 頻繁に行う複数のコマンド入力を一回のコマンド入力で済むようにします。 npmとかwebpackとかgcloudとか書いていますが本題と関係ありません。 今回行う流れ コマンド作成 コマンド登録 使う 今回簡略化したかった操作 一例なので読まなくていいです。 npmプロジェクトのディレクトリに移動 webpackの出力先を削除 webpackで出力(バインド)する gcloudでサーバーに送信 コマンド作成 好きなディレクトリにファイルを作成して開く viじゃなくてVSCodeとかEmacsとかなんでも大丈夫です。 $ cd ~/Documents/cmd $ touch newcmd $ vi newcmd 中身を書く && でコマンドを繋げると成功した場合に次の処理に進みます。 １つ目の操作 && 次の操作 && 次の操作 今回の例では次のようなコマンドになります。 pushd ~/project && rm -rf dist/* && npm start && gcloud compute scp --recurse ./dist/* hogeserver:/etc/hoge && popd もう少しちゃんとやりたい人は変数やsetで調べると良いかもしれません。 こんな感じ↓ # setting set -e -o pipefail # var readonly LIVETS_PATH="~/project" readonly TRANSMITTER_PATH="dist/*" readonly RECEIVER_PATH="hogeserver:/etc/hoge" # main pushd ${LIVETS_PATH} rm -rf ${TRANSMITTER_PATH} npm start gcloud compute scp --recurse ${TRANSMITTER_PATH} ${RECEIVER_PATH} popd コマンド登録 筆者がzsh使っているのでzshに書きます。 bashの人はそっちに書いてください。 ~/.zshrc を開く $ vi ~/.zshrc 追記する alias newcmd='~/Documents/cmd/newcmd' こうすることでnewcmdと入力した時に~/Documents/cmd/newcmdと入力したのと同じことになります。 使う 次で動きます。 $ newcmd 動く 動かない人向け そんなコマンドがないと言われる人 $ newcmd zsh: command not found: newcmd $ source ~/.zshrc $ newcmd 動く 権限がないと言われる人 $ newcmd permission denied $ chmod 777 ~/Documents/cmd/newcmd $ newcmd 動く

エラー内容 macで以下のコマンドを打った時にエラー $ gcloud compute scp --recurse ./hoge/* hogeserver:/etc/hoge /etc/profile.d/lang.sh: line 19: warning: setlocale: LC_CTYPE: cannot change locale (UTF-8): No such file or directory 解決方法 サーバー側の /etc/environment を開いて vi /etc/environment cannot change locale (UTF-8) と言われているので、以下を記述 LANG=UTF-8 参考 https://stackoverflow.com/questions/22430747/locale-error-in-centos https://akamist.com/blog/archives/665

　目的 ポート番号を指定して使用しているプロセスを調べる方法をまとめる 方法 ターミナルにて下記コマンドを実行する。 $ sudo lsof -i:ポート番号

Homebrewのインストール /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 次のステップとして、画面に出てきた通り、パスを通す。具体的には、 echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/kazuoy/.zprofile echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/kazuoy/.zprofile pyenvのインストール Pythonのバージョン管理のため、pyenvをインストールする。 brew install pyenv 以下のコマンド3つでパスを通す。 echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc echo 'eval "$(pyenv init -)"' >> ~/.zshrc Pythonのインストール 以下のコマンドで最新バージョンのPythonをインストールできるようである。 brew install python しかしながら、バージョン指定してPythonをインストールするには、まず、以下でPythonバージョン一覧を取得する。 pyenv install --list その後、以下のコマンドにより目的のバージョンのPythonをインストールする（ここでの例は、Python 3.9.7である）。 pyenv install 3.9.7 グローバル環境で該当バージョンを使えるように、以下のコマンドを入力した。 pyenv global 3.9.7 これによってバージョンが3.9.7になったであろうと python --version と入力し確認したが、"Python 2.7.16"という、従来Macに入っていたバージョンが示された。 いろんな参考を見て、いろいろ試したが結果は変わらなかった。 なんやこれおかしいな、と思ったが、解決策は意外なところにあった。 python3 --version "python3"とすれば、"Python 3.9.7"が出てきたので、ひとまず環境構築が終了したと結論づけた。 正直"python3"とすれば良い理由はわからないが、様々なコマンドを打つときに"python3"を接頭辞にすればPython3が使えるのではないかと考えた。 参考文献 https://qiita.com/C2_now/items/c85be2ffeacd61cc7207 https://qiita.com/tuk19/items/7fbee949fbecc5cfd3db https://qiita.com/tuk19/items/7fbee949fbecc5cfd3db

Homebrewのインストール /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 次のステップとして、画面に出てきた通り、パスを通す。具体的には、 echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/kazuoy/.zprofile echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/kazuoy/.zprofile pyenvのインストール Pythonのバージョン管理のため、pyenvをインストールする。 brew install pyenv 以下のコマンド3つでパスを通す。 echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc echo 'eval "$(pyenv init -)"' >> ~/.zshrc Pythonのインストール 以下のコマンドで最新バージョンのPythonをインストールできるようである。 brew install python しかしながら、バージョン指定してPythonをインストールするには、まず、以下でPythonバージョン一覧を取得する。 pyenv install --list その後、以下のコマンドにより目的のバージョンのPythonをインストールする（ここでの例は、Python 3.9.7である）。 pyenv install 3.9.7 グローバル環境で該当バージョンを使えるように、以下のコマンドを入力した。 pyenv global 3.9.7 これによってバージョンが3.9.7になったであろうと python --version と入力し確認したが、"Python 2.7.16"という、従来Macに入っていたバージョンが示された。 いろんな参考を見て、いろいろ試したが結果は変わらなかった。 なんやこれおかしいな、と思ったが、解決策は意外なところにあった。 python3 --version "python3"とすれば、"Python 3.9.7"が出てきたので、ひとまず環境構築が終了したと結論づけた。 正直"python3"とすれば良い理由はわからないが、様々なコマンドを打つときに"python3"を接頭辞にすればPython3が使えるのではないかと考えた。 追記(2021/9/13)：python2系との衝突を避けるために、"python"ではなく"python3"コマンドを用いるようだ。 （参考：https://docs.python.org/ja/3/tutorial/interpreter.html） 参考文献 https://qiita.com/C2_now/items/c85be2ffeacd61cc7207 https://qiita.com/tuk19/items/7fbee949fbecc5cfd3db https://qiita.com/tuk19/items/7fbee949fbecc5cfd3db

会社では定期的に欲しいノートパソコンに交換してくれますが、私はMac Proに交換してもらいました。シェルスクリプトを触る機会が時々ありますが、その時にmacはzshがデフォルトになっていて不便でした。切り替えシリーズとして皆さんと共有したいと思います。 環境 シェルはzshで設定・確認します。 macOS Big Sur 11.3.1 実施 利用可能なシェルのリストを確認 現在のOSXで利用できるシェルを出力してくれます。 echo $SHELL #　現在のシェルを確認 cat /etc/shells シェルを切り替えてみましょう 1. 現在のシェルを確認 echo $SHELL 2. bashに変更 chshはchange shellの略語です。 リストで表示されているシェルにて、変えたいシェルにパスを変更して実装しましょう。 chsh -s /bin/bash 3. 変更を適用 command + n　で新しいターミナルを開きます。 4. 結果確認 ターミナルのヘッダーにも表示されるはずですが、より明確に確認するには下記を打ててみます。 echo $SHELL 結論 シェルプログラミングはは強力ながらデリケートなものです。 シェルの種類を合わせることから確認することからですね。

会社では定期的に欲しいノートパソコンに交換してくれますが、私はMac Proに交換してもらいました。openjdkを使うので問題ないと思っていたのですが、legacy案件の中ではjavaが1.7や1.8でないと動かない場合がありました。その時、バージョン切り替えしながら分かった近道を皆さんと共有したいと思います。 環境 シェルはzshで設定・確認します。 実施 javaバージョン確認する javaのバージョンを確認してみましょう。 zshでは-v, --version , -V , --VERSIONなどはNGです。 java -version where java # 居場所を確認 javaのパスを通しましょう Windowsではパス登録が簡単だったが、なんだかMacでは環境変数が保存されない それで見つけたのが下記の方法でした。ちなみにRCはRun Commandの略語です。 一言で、シェルで設定ファイルです。 1. エディターが開く open ~/.zshrc 2. javaの指定しよう 記載はこんな感じ export JAVA_HOME=`/usr/libexec/java_home -v "1.8"` PATH=${JAVA_HOME}/bin:${PATH} 3. 修正をシステムに反映 sourceはbash系でも使われるコマンドでして、現在の設定の即時で適用するコマンドです。 RCファイルの設定後には一度シェルを閉めて開き直すように案内される場合もありますが、 基本的にはこれで開かなくてもいいはずです。 source ~/.zshrc 4. 結果確認 -versionです。忘れないで…。 java -version 結論 基本中の基本ですが、たまにしか行わないのでハマる場合があります。 今後は記事の内容を補足して他の言語や設定も追加していきたいと思います。

入れたはずのPythonが認識されない… などなど、入れたはずのコマンド、ソフト、言語がチュートリアル通りにターミナルへ入力してもcommand not findと出力される問題。 こんなことがあった時に偉い人からよく聞くアドバイス「どうせパスが通ってないんでしょ？」 いやいや、パスってなんじゃい！と思って重い腰を上げて調べました。 ちなみに私は使っているmacOSが古く、bashを使ってます。 新しいmacOS(確かCatalina以降？)の人はzshなので、編集するファイルが違ったり、ちょこっと違うみたいなのでご了承ください。 パスを通すとはコマンドを追加してあげること コマンドやソフト、言語を使うためには、そこまでのファイルパスを環境変数に設定して、文字通り道を作ってあげないと使えない。 パスはそのコマンドなどの情報が保存されているファイルまでの道を登録するってことらしい。 LinuxやmacみたいなUNIX系OSは新しい言語とかツールとかを登録する時にこのパスを通す作業をしないとそのコマンドが使えないことがあるみたい。 「パスが通ってない」とは コマンドを入力したのに、command not found(コマンド見つからなかった)と出る状態。 $ アイウエオ -bash: アイウエオ: command not found そんなコマンド知らないよ。(=そんなんどこにあるの？)となる。 実際にはインストールしたのに！コマンドのファイルがあるのに！って思っても、そこまでのパスが通っていないので、そのファイルが見つからない時もこれが出る。 いざパスを通す(一時的ver.) パスを通すとは、具体的には$PATHという変数に、そのコマンドが入っているファイルへのファイルパスを登録することです。 ということで、まずはその$PATHの中に何が入っているのか、$ echo $PATHコマンドを入力して見てみましょう。 $ echo $PATH /usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin 出力された/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbinが$PATHの中身です。 :までで1区切りとして読み、左側にいくにつれて優先順位が高くなります。 そのため、上記出力例でいくと、以下の様になります。 優先順位ランキング 1位 /usr/local/binさん 2位 /usr/binさん 3位 /bin:/usr/sbinさん 4位 /sbinさん $PATHという変数の中身を確認したら、追加したいコマンドのファイルパスをFinderとかを使って予め調べておいて、ターミナルに以下を入力します。 $ export PATH=$PATH:加えたいコマンドのファイルパス けれども、これだとターミナルを閉じるとまた初期化されて元どおりになってしまい、再度開いてコマンドを入力するとcommand not foundになってしまいます。。 いざパスを通す(永遠にver.) 恒久的にパスを通すためには.bash_profileや.profile, .bsh, .zshrcみたいなファイルを編集します。 だいたい、.bash_profileや.profile, .bsh, .zshrcなどはホーム(macだとユーザー名の直下)に入っているみたいなので、今ターミナルで開いている階層がホームではない人は、何も考えずにターミナルでcdと入力するとホームに移動できるので、そこで以下のls -aコマンドを入力してどんなドットファイルが入っているのか、確認しましょう。 $ cd $ ls -a すると今いる階層(多分ホームにいますよね？)にある、色々なドットファイルなどそこの階層にあるものが一覧表示されます。 あとはviコマンドでそれらを開いて、編集しましょう。 $ vi 編集するファイル名 開いたら、少し変わった表示になったと思います。そのままだと入力ができないので、Iキーを押してインサートモードにして入力ができる状態にし、最終行にさっきの追加したいコマンドのファイルパスを入力します。 入力が終わったら、Escキーでインサートモードを解除し、:wqと入力して、編集内容を保存してエディタを閉じます。 ここまでくれば、あとはターミナルのウインドウを消して、ターミナルを立ち上げ直せば再起動したことになり、先ほどの編集内容が反映されるはずです。 再起動が面倒であれば以下のコマンドで編集内容を反映させる方法もあります。 $source ~/.bash_profile 「コマンドの情報が入っているファイルの場所を調べるコマンド」でパスが反映されてるか確認 先ほど通したパスが、きちんと通っているか確認します。 そのために、コマンドのパス情報がどこのファイルに入っているのか確認する以下のコマンドを入力してみましょう。 $ which コマンド名 実行例 $ which pyenv /usr/local/bin/pyenv

A-FrameでARアプリを作成してみましたので、作成方法をご紹介します。 インターネット上の情報を色々と参考にさせてもらい実施しました。 ARというと、ネイティブ形式が主流かもしれませんが、試作を行うのに簡単に試してみたい等であれば、A-FrameのWeb形式でも要件を満たすかもしれません。 こったことはしておらず、基本的な流れですが、何かの参考になれば幸いです。 前提として、以下がありますので、ご注意ください。 動作確認の構成 PC： M1 Mac OS: 11.4 SW Expo: 4.7.2 Xcode: 12.5.1 A-Frame: 1.2.0 AR.js: 3.3.3 スマートデバイス: iPhone 7 OS: 14.6 2021年7月頃に調べたり動作確認した内容です。 Androidはまだ動作しないのでご注意ください（ユーザ許可設定が正しくできていないようか気がしています） 本ブログの要点的な内容を最初に乗せると以下の流れになりました。 1. A-Frame　AR.jsのブラウザ版を作成・確認 最初は、A-FrameでARをするため、インターネット上に情報が多いAR.jsによるブラウザ版を作成しました。（まだネイティブのARアプリではないです） 情報が古いものを活用しているかもしれませんが、まずは動くものを用意するということで、ご了承ください。 まずはA-Frameの情報を参照しました。 A-Frameサイト：https://aframe.io/ GitHub：https://github.com/aframevr/aframe/ 　ライセンス：MIT License：https://github.com/aframevr/aframe/blob/master/LICENSE AR.jsサイト：https://ar-js-org.github.io/AR.js-Docs/ GitHub：https://github.com/AR-js-org/AR.js 　ライセンス：MIT License：https://github.com/AR-js-org/AR.js/blob/master/LICENSE どなたかの簡単に動作させた記事が手っ取り早く試すのには参考になるので、インターネットで検索して、以下等を参照させてもらいました。 https://j-xaas.github.io/ar-js-x-a-frame-WebAR%E5%85%A5%E9%96%80/ https://ar-js-org.github.io/AR.js-Docs/#getting-started 　Marker Based Example 上記の「Marker Based Example」のコードを活用させてもらい、少しだけ恐竜を回転させました。 あとテキストと箱も入れてみました。 <!DOCTYPE html> <html> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> <!-- we import arjs version without NFT but with marker + location based support --> <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script> <body style="margin : 0px; overflow: hidden;"> <a-scene embedded arjs> <a-marker preset="hiro"> <a-text value="this is text." position="-2 0 0" align="center" rotation="-90 0 0" color="#4CC3D9"></a-text> <a-box position="2.0 0.0 0.0" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <a-entity position="0 0 0" scale="0.04 0.04 0.04" rotation="-45 0 -45" gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf" ></a-entity> </a-marker> <a-entity camera></a-entity> </a-scene> </body> </html> 実際の表示は以下のような画像になりました。 今回は、以下のような感じで、ペーパーレス（マーカーを印刷せずに）でテストをしました。 Hiroマーカーは上記サイト上（ https://raw.githubusercontent.com/AR-js-org/AR.js/master/data/images/hiro.png ）から拝借しました。 Hiroマーカーをフォトビューアー等で表示し、OBS Studioの仮想カメラソフトを使って、マーカーをカメラに写るように設定して仮想カメラを開始しておきます。（Windows PCに付属カメラがついている場合はデバイスマネージャから無効化する必要がありました） PCのChromeブラウザで、上記のhtmlファイルを表示し、マーカー上にARオブジェクトが表示されることを確認します。 あと、スマートデバイスのブラウザでも表示できることを、以下の流れで確認しました。 AWS S3にhtmlファイルを配置 S3 htmlファイルの署名付き一時URLを生成 iPhoneのSafariやChromeから上記の署名付き一時URLにアクセス PCのHiroマーカーを映して確認 ざっと、A-FrameとAR.jsでAR表示ができました。 AR.jsには、ロケーションベース等、マーカー以外の機能もあるので今後試して見たいと思います。 2. Expo WebViewアプリを作成・確認 次に、ExpoのWebViewでARを表示するアプリを作成します。 上記で試したhtmlを活用していきます。 WebViewには、ソースを指定する形式に以下の種類がありました。 https://docs.expo.dev/versions/latest/sdk/webview/ html形式 <WebView style={styles.container} originWhitelist={['*']} source={{ html: '<h1><center>Hello world</center></h1>' }} /> uri形式 <WebView style={styles.container} source={{ uri: 'https://expo.dev' }} /> 試したところ、html形式で、htmlファイルの内容をプログラム内に埋め込んでも、エラーとなり、カメラが正常に動作していないようでした。 「httpsスキーマを使わないと正常に動作しない」という情報をインターネットで目にしたので、uri形式で進めました。 ユーザ許可設定周りも確認したかったので、スタンドアロンアプリとして、M1 MacからiPhoneへアプリをインストールして動作を確認しました。 インストール手順については、以下の過去記事を参照してください。 （Expo使っているなら、Expo Goを使ってアプリを起動するのが通常かと思いますが。。。） https://qiita.com/k-hideo/items/6aff1c187e53addd1550 動作確認を検証していてわかったのですが、WebViewでカメラを使う場合、NSCameraUsageDescriptionとは別に、NSMicrophoneUsageDescriptionのマイクも必要でした。 マイクがないと以下のエラーメッセージが表示されます。 Webcam Error Name: Message: WebRTC issue-! navigator.mediaDevices not present in your browser ただ、マイク設定も必要なのは、もしかしたら最新や今後改善されているかもしれません。（こちらのスレッドにこの件についてのやり取りがありました） それで、WebViewのuri形式を使い、S3の署名付き一時URLを指定して確認したところ、カメラ映像は表示されるのですが、AR表示がうまくいきませんでした。 以下のような、静止画にARオブジェクトが表示されるような感じになってしまいました。（映像は表示されるがARオブジェクトが表示されない。AR表示されるが静止画となり映像とはならない、という感じでどっちつかずでした） Chromeだと正常に表示できるのになぜだろうと、ちょっとWebViewのリファレンスを調べてみると、allowsInlineMediaPlaybackオプションが説明文的や挙動的に怪しい気がしたので、 さらにallowsInlineMediaPlaybackをキーワードに検索してみると、試す価値がありそうでしたので、やってみました。 結果としては、うまく改善されて以下のようにARオブジェクトの表示ができるようになりました。 参考までに以下にコードやイメージ、ビルド等の実行コマンドを載せておきます。 ビルド　コマンド類（viで作成するファイルの中身は、下のコード類を参照ください。） expo init ex-webview-ar-1 Choose a template: › minimalを指定 expo install react-native-webview expo install react-navigation expo install react-navigation-stack react-navigation-tabs react-native-gesture-handler react-native-reanimated expo install react-native-screens react-native-safe-area-context vi app.json mkdir screens vi screens/PageHtml1.js vi screens/PageUri1.js vi screens/PageUri2.js vi screens/PageUri3.js vi screens/PageTop1.js vi App.js npm install arch -x86_64 npx pod-install arch -x86_64 npx expo prebuild Xcodeでファイルを開きビルド・デプロイし動作を確認 コード類　（うまく転記できていない部分等ありましたらすみません。記法の関係上かインデント等が崩れている部分があります） app.json　　(ここをクリックするとコードが以下に表示されます) { "expo": { "name": "ex-webview-ar-1", "slug": "ex-webview-ar-1", "version": "1.0.0", "assetBundlePatterns": [ "**/*" ], "ios": { "supportsTablet": true, "bundleIdentifier": "com.k-hideo.ex-webview-ar-1", "infoPlist": { "NSCameraUsageDescription": "ARのためカメラを使用します", "NSMicrophoneUsageDescription": "ARのためカメラとセットでマイクを使用します" } }, "android": { "package": "com.h_hideo.ex_webview_ar_1" } }, "name": "ex-webview-ar-1" } screens/PageHtml1.js　html形式でA-Frame AR.jsを記述しています。この場合、カメラが正常に動作しませんでした　(ここをクリックするとコードが以下に表示されます) import * as React from 'react'; import { WebView } from 'react-native-webview'; export default class PageHtml1 extends React.Component { render() { return ( <WebView originWhitelist={['*']} source={{ html: ` <!DOCTYPE html> <html> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> <!-- we import arjs version without NFT but with marker + location based support --> <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script> <body style="margin : 0px; overflow: hidden;"> <a-scene embedded arjs> <a-marker preset="hiro"> <a-text value="this is text." position="-2 0 0" align="center" rotation="-90 0 0" color="#4CC3D9"></a-text> <a-box position="2.0 0.0 0.0" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <a-entity position="0 0 0" scale="0.04 0.04 0.04" rotation="-45 0 -45" gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf" ></a-entity> </a-marker> <a-entity camera></a-entity> </a-scene> </body> </html> ` }} style={{ marginTop: 20 }} allowsInlineMediaPlayback={true} /> ); } } screens/PageUri1.js　uri形式でA-FrameサイトのトップページのURIを指定しています。A-Frameサイトは正常に開けました　(ここをクリックするとコードが以下に表示されます) import * as React from 'react'; import { WebView } from 'react-native-webview'; export default class PageUri1 extends React.Component { render() { return ( <WebView originWhitelist={['*']} source={{ uri: `https://aframe.io/` }} style={{ marginTop: 20 }} /> ); } } screens/PageUri2.js　uri形式でURIを入力できるようにしています、A-Frame AR.jsのページを入力すると正常に動作しました　(ここをクリックするとコードが以下に表示されます) import * as React from 'react'; import { View, Text, TextInput} from 'react-native'; import { WebView } from 'react-native-webview'; export default class PageUri2 extends React.Component { constructor(props) { super(props); this.state = { text: "https://aframe.io/", debug: "", }; } render() { let webViewRef; return ( <View style={{flex:1}}> <Text></Text> <Text></Text> <TextInput style={{ width: "100%", borderBottomWidth: 1, borderBottomColor: "#ccc" }} onChangeText={(text) => { this.setState({text}); console.log("before reload."); this.state.debug = " before reload. "; if (this.webViewRef) { console.log("do reload."); this.state.debug += " do reload. "; //console.log(this.webViewRef); this.webViewRef.reload(); } console.log("after reload."); this.state.debug += " after reload. "; }} value={this.state.text} /> <Text>{this.state.text}</Text> <Text>{this.state.debug}</Text> <WebView ref={this_ref => (this.webViewRef = this_ref)} originWhitelist={['*']} source={{ uri: this.state.text }} //source={{ uri: `https://aframe.io` }} style={{ marginTop: 20 }} allowsInlineMediaPlayback={true} /> </View> ); } } screens/PageUri3.js　uri形式でA-Frame AR.jsのページを指定してます。こちらも正常に動作しました　(ここをクリックするとコードが以下に表示されます) import * as React from 'react'; import { WebView } from 'react-native-webview'; export default class PageUri3 extends React.Component { render() { return ( <WebView originWhitelist={['*']} source={{ uri: `https://bucket.s3.amazonaws.com/src/ar-1.2.0.html?AWSAccessKeyId=key&Signature=sig&Expires=1630940983` }} style={{ marginTop: 20 }} allowsInlineMediaPlayback={true} /> ); } } screens/PageTop1.js　上記のhtml形式やuri形式のページに遷移するトップページです　(ここをクリックするとコードが以下に表示されます) import React, { Component } from 'react'; import { Text,View,Button } from 'react-native'; export default class PageTop1 extends Component { render() { return ( <View> <Button title="go to html 1" onPress={() => { this.props.navigation.navigate('PageHtml1') }} /> <Button title="go to uri 1: a-frame top" onPress={() => { this.props.navigation.navigate('PageUri1') }} /> <Button title="go to uri 2: any uri" onPress={() => { this.props.navigation.navigate('PageUri2') }} /> <Button title="go to uri 3: specify uri" onPress={() => { this.props.navigation.navigate('PageUri3') }} /> </View> ) } } App.js　　(ここをクリックするとコードが以下に表示されます) import React, { Component } from 'react'; import { createAppContainer } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; import PageTop1 from './screens/PageTop1'; import PageHtml1 from './screens/PageHtml1'; import PageUri1 from './screens/PageUri1'; import PageUri2 from './screens/PageUri2'; import PageUri3 from './screens/PageUri3'; const MainStack = createStackNavigator( { PageTop1: PageTop1, PageHtml1: PageHtml1, PageUri1: PageUri1, PageUri2: PageUri2, PageUri3: PageUri3, } ) const AppContainer = createAppContainer(MainStack) export default class App extends Component { render() { return ( <AppContainer /> ) } } イメージ類 screens/PageTop1.jsの表示 creens/PageHtml1.jsのエラー表示 screens/PageUri1.jsのURIでA-FrameのトップページのURIを指定した場合の表示 screens/PageUri2.jsの表示(上のURIを修正すると、修正したURIにアクセスが可能) screens/PageUri3.jsの表示(AWS S3にa-frame AR,jsのhtmlファイルを配置し署名付き一時URLを生成し指定) 3. さいごに 色々（Mac、ReactNative、Expo）と初心者のため、いくつものエラーが発生しまして、グーグル先生に何度もお世話になりながら、基本的なことですが、なんとか表示できるようになりました。これもみなさんが情報を残してくれているおかげですね。感謝感謝です。 もちろん社内の人にも情報を教えてもらったりしました。感謝感謝です。 A-Frame AR.jsをネイティブアプリで稼働させることにニーズが少ないかもしれませんが、選択肢の一つとなればよいのかと思います。 ひとまず基本的な方式の一つが動かせれるようになったので、今後時間と機会があれば、他の方式や、もうちょっと凝ったこともやってみたいと思います。

既にいくつかの記事でビルドや設定方法は語られているが、車輪の再発明をする必要もないので、HomebrewのFormulaにして、今後xrdpをmacOSで利用したいユーザがいちいちビルド環境を整えてビルドしなくてもするようにしておく。 TL;DR brew tap eru/tap brew install eru/tap/xrdp 解説 class Xrdp < Formula desc "Open source RDP server" homepage "http://www.xrdp.org/" url "https://github.com/neutrinolabs/xrdp/releases/download/v0.9.17/xrdp-0.9.17.tar.gz" sha256 "56b913dd6d0f15b60f7a53963b30ad905f00669c91701db35bb4410be262a77e" license "Apache-2.0" head "https://github.com/neutrinolabs/xrdp.git" depends_on "autoconf" => :build depends_on "automake" => :build depends_on "libtool" => :build depends_on "nasm" => :build depends_on "pkg-config" => :build depends_on "libxfixes" depends_on "libxrandr" depends_on "openssl@1.1" def install ENV.prepend_path "PKG_CONFIG_PATH", Formula["openssl@1.1"].opt_lib/"pkgconfig" system "./bootstrap" args = %W[ --prefix=#{prefix} --sysconfdir=#{etc} --localstatedir=#{var} --disable-dependency-tracking --disable-silent-rules --enable-strict-locations ] system "./configure", *args system "make" system "make", "install" end test do system "#{bin}/xrdp", "--version" end end よくある雑なFormulaだが、特筆する点としては、macOSではLibreSSLが標準になっているため、OpenSSLのFormulaにも記載がある通り、OpenSSLをHomebrewでインストールしてもパスが通らないので、明示的にPKG_CONFIG_PATHに追加を行っている。 また、--sysconfdir=#{etc}, --localstatedir=#{var}で、それぞれのパスをHomebrewのprefix(brew --prefixで確認できる)以下に指定している。 これらのオプションは、--enable-strict-locationsのオプションも合わせて指定しない限り、autoconfの標準ディレクトリで上書きされてしまう。1 謝辞 参考にさせていただいた記事。ありがとうございます。（順不同、執筆時点でのタイトル） macOS(10.14.6)でXRDP(0.9.10)インストール - Qiita macOS へ RDP でリモートデスクトップ接続する - Qiita Mac mini(M1)でもWindowsからRDPでリモートデスクトップしたい！ - Qiita これを行わないと/etc, /varが利用されるため、make install時にroot権限が必要になる。 ↩