monacaでReactを使ってwww/index.htmlにlinkタグを挿入する方法
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 1,086
monacaとReactを使ってモバイルアプリを開発しています。
monacaのReactのテンプレートを使って編集するときは基本はsrcフォルダの中のjsxファイルを編集していくと思いますが、導入したフレームワークの都合で、www/index.htmlにlinkタグを挿入しないといけなくなりました。
実際にwww/index.htmlにlinkタグを挿入すれば理想通りの挙動を示してくれるのですが、monacaを再起動すると、index.htmlがデフォルトの状態に戻ってしまいます。
具体的には、この状態で保っていたいのですが、
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv=Content-Security-Policy content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script type=text/javascript src=components/loader.js></script>
<link rel=stylesheet type=text/css href=components/loader.css>
<link href=app.css rel=stylesheet>
<!-- Import Google Icon Font -->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Import react-materialize.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<div id=app></div>
<!-- react-materialize-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<script type=text/javascript src=vendor.bundle.js></script>
<script type=text/javascript src=app.bundle.js></script>
</body>
</html>monaca LocalKitを再起動し、しばらくすると自動的に以下のようにデフォルトの状態に戻ってしまいフレームワークを読み込んでくれなくなってしまいます。
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv=Content-Security-Policy content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script type=text/javascript src=components/loader.js></script> <link rel=stylesheet type=text/css href=components/loader.css> <link href=app.css rel=stylesheet></head> <body> <div id=app></div> <script type=text/javascript src=vendor.bundle.js></script><script type=text/javascript src=app.bundle.js></script></body> </html>これはmonacaの仕様ということで諦めるしかないのでしょうか。
どなたかわかる方がいらっしゃれば教えていただけませんでしょうか
よろしくお願いします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
check解決した方法
+1
詳しい方にこの問題について聞ける機会があったので、聞いてみました。
reactテンプレのmonacaのファイルの中にsrc/public/index.html.ejsというファイルがあるのですが、これがトランスパイル時にwww/index.htmlに変換されるので、index.htmlを編集したい場合はこのsrc/public/index.html.ejsを編集する必要があるみたいです。
ejsという種類のファイルがあることを知らなかったのでこの問題にぶち当たってしまいました。
この質問が誰かの為になれば幸いです。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.34%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる