0

やりたいこと

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

やってること

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

importDocについて

なるべくブログ記事作成作業を簡単に作成しようと思って調べて見つけたのが、importDoc でした。

自分のGoogleドキュメントで作成したドキュメントを、その見た目のまま、自分のWebページに埋め込むことができるというものです。

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

GoogleドキュメントでWebページを作成、公開できるOSS・「ImportDoc」

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

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

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

やってみたこと

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

教えてほしいこと

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

確認済み

  • importDocへのGoogleドキュメントの取り込みは正常(importDocアカウントページで確認)
  • react-native-render-htmlのHTMLは正しく使えている。

その他

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

1 件の回答 1

1

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

ざっとドキュメントを見たところ、標準で変換をサポートしている要素は 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-webviewreact-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) は、実際そのようなライブラリがあるかどうかは存じ上げません。。。

1
  • 見れてなくてすみません。丁寧且つ迅速な回答頂き有難う御座います。ここ1年でプログラム始めたばかりなのでとてもわかり易いです。(3)について調べてみましたが、見つけられませんでした。本来やりたいことと逸れていきそうなので、今回はImportDocは諦めて他のやり方にしようと思います。何日もハマっていたのですごく助かりました。有難う御座います
    – Akira
    Commented 2021年7月26日 2:39

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。