78331


### やりたいこと

react-native-webで作成したWebページに、"http://---.js" 形式ファイル を埋め込みたい

### やってること

react-native-web, expo, firebase hostingを用いてWebページを作成しました。  
そこにブログページも作ろうと思ってます。  
ブログ記事の作成にはGoogleドキュメント、importDocを使おうとしています。

### importDocについて

なるべくブログ記事作成作業を簡単に作成しようと思って調べて見つけたのが、 **[importDoc](https://importdoc.com/)**
でした。

自分の[Googleドキュメント](https://www.google.com/intl/ja/docs/about/)で作成したドキュメントを、その見た目のまま、自分のWebページに埋め込むことができるというものです。

以下のブログでも使い方が紹介されています。

[GoogleドキュメントでWebページを作成、公開できるOSS・「ImportDoc」](http://kachibito.net/useful-
resource/importdoc)

googleドキュメントからimportDocへ任意のドキュメントを取り込みます。  
すると、以下htmlが出力されます。

[code]

    <script src="https://unpkg.com/import-doc/dist/import-doc/import-doc.js"></script>
    <import-doc data-id="---ドキュメントid---"></import-doc>
    
[/code]

これを自分のブログの任意の箇所にコピペするだけ というものです。

### やってみたこと

react nativeなので、htmlを使用する為に[react-native-render-
html](https://meliorence.github.io/react-native-render-html/)を使用しました。  
適当なブログページを作成し、そこにimportDocから出力された上記htmlをコピペしました。が、何も表示されなかった。[react-native-
render-html](https://meliorence.github.io/react-native-render-
html/)の資料を読んで色々試したが実現できませんでした。StackOverflowで、jsファイルは埋め込めないという情報を見ましたがオフィシャルの資料じゃないのでよくわかってません。

### 教えてほしいこと

  * react-nativeへのhtmlまたは、js形式ファイルの **埋め込み** について
  * importDocについて本件に役立ちそうな情報

### 確認済み

  * importDocへのGoogleドキュメントの取り込みは正常(importDocアカウントページで確認)
  * [react-native-render-html](https://meliorence.github.io/react-native-render-html/)のHTMLは正しく使えている。

### その他

特にimportDocにこだわりはありません。  
ただ、便利で面白そうなのでなんとか使ってみたいです。どうにも無理なら諦めます。目的はreact-native-webを使うことです。  
コメントなんでも下さい。よろしくお願いします。


CC BY-SA 4.0
2021-07-20T14:49:44.327
78328
2021-07-20T18:00:13.500
2021-07-20T16:31:35.440
3060
41822
question
html css node.js reactjs react-native
react-native-webで作成したWebページに、"http://---.js" 形式ファイルを埋め込みたい


[React Native Render HTML のアーキテクチャ](https://meliorence.github.io/react-native-
render-html/docs/architecture) を見ていただきたいのですが、このライブラリは React Native 内に (WebView
のような) Webブラウザ のコンポーネントを埋め込んでいるわけではありません。  
あくまで React Native のネイティブコンポーネントの DOM ツリーに変換しているだけです。  
（「だけ」と言ってしまうには申し訳ないくらい、頑張って変換してくれるのですが。）

ざっとドキュメントを見たところ、標準で変換をサポートしている要素は
[`defaultHTMLElementModels`](https://meliorence.github.io/react-native-render-
html/api/defaulthtmlelementmodels) で定義されているものになります。

このため、 React Native のコンポーネントに存在しない `script` タグは利用できません。

* * *

ここで、少し react-native-web の成り立ちについて考えてみましょう。

まず、 **React** という HTML の UI パーツを構築する JavaScript ライブラリが存在しました。  
**React Native** とは、ネイティブアプリの UI コンポーネントを、 React の技術で扱えるようにするためのものです。  
**React Native for Web** (react-native-web) は、ネイティブアプリの UI コンポーネントを HTML
で再現するという、一周回って HTML に戻ってきたようなライブラリです。

そういった経緯があるため、 react-native-web は、 ネイティブアプリとのコード共有には強いのですが、 HTML の表示や クライアントサイド
JavaScript を実行するのは向いていません。

* * *

解決のアプローチは、以下のようなやり方が考えられます。

  1. react-native-web に [react-native-webview](https://github.com/react-native-webview/react-native-webview) と [react-native-web-webview](https://github.com/react-native-web-community/react-native-web-webview) などを使って、 WebView のコンポーネントを追加して、その中で importDoc の描画を行う
  2. React (≠ React Native) を使う
  3. Googleドキュメント を サーバーサイドで HTML DOM に変換するようなライブラリで HTML DOM に変換した後、 react-native-render-html を使う

(1) は、 思いっきり react-native-web に依存してしまうので、 React Native
によるネイティブアプリとのコード共有などは面倒になります。

(2) は、 「目的はreact-native-webを使うこと」 という前提条件に反しますね。

(3) は、実際そのようなライブラリがあるかどうかは存じ上げません。。。


CC BY-SA 4.0
2021-07-20T18:00:13.500
78331
2021-07-20T18:00:13.500
8237
78328
answer