【Monaca】Twitterのタイムラインを表示したくて公式ウィジェットを設置しても反映しない&アプデ後ブラウザでのプレビューが出なくなりました

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

アプリ内にTwitterのタイムラインを表示したくてコード設置したのですが
反映されなくて困ってます！

該当のソースコード

  <center><a class="twitter-timeline" href="https://twitter.com/fuusokunews?ref_src=twsrc%5Etfw">Tweets by fuusokunews</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></center>

試したこと

HP制作するように通常通りに設置してもだめでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Takumiboo

2018/09/16 14:33

「該当のソースコード」をそのままコピペしてHTMLにした上でローカルでブラウザで表示しましたが問題なく表示されました。またそのHTMLをサーバに置いて試しましたがこちらも問題ありませんでした。具体的にどのような手順で行ったのか詳しく記述してください。

Fusoku

2018/09/16 14:36

フレームワークテンプレートのOnsenUlのTABBerをしようしそこに先程のコードを直接記述しました！

Fusoku

2018/09/16 14:36

monaca onsen ui ver2

CHERRY

2018/09/18 06:04 編集

Monaca であれば、Monaca のタグを追加してください。また、不要なテンプレート部分は、質問から取り除いてください。

Fusoku

2018/09/18 09:18

申し訳ございません、初めていじってるものでどうしたらいいのかわからず質問させてもらってました！Monacaのタグとはどういうことでしょうか？

CHERRY

2018/09/18 09:37

質問に　「PHP」「HTML」「JavaScript」のタグをついていますが、Monaca に関する内容であれば、 Monaca のタグを追加した方が、 Monaca に詳しい人の目に止まりやすいので、質問を編集してタグを追加してほしいという希望です。質問の編集方法は、質問の右下あたりに「編集」というボタンがあると思うのでそれをクリックすると編集画面になります。

Fusoku

2018/09/18 10:22

できました！！　ありがとうございます！！

行動規範の内容に同意します

回答1件

ons-pageなどの中には、javascriptで記述したコードが動かないため、表示されないようですね。

もしMonacaで表示しようとしたら、scriptタグが有効となる箇所に記述した上で、JavaScriptでその内容をページ内にコピーすれば、表示することは可能のようです。

具体的には、例えば、

bodyタグの直下に

  <div id="twitter">
    <center><a class="twitter-timeline" href="https://twitter.com/fuusokunews?ref_src=twsrc%5Etfw">Tweets by fuusokunews</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></center>
  </div>

を追加しておく

javascriptコードの中のif (page.matches('#first-page')) {の直後に

        page.querySelector('.page__content').appendChild(document.querySelector('#twitter'));

を追加する

コード全体では、script部分

  <script>
    ons.ready(function() {
      console.log("Onsen UI is ready!");
    });

    document.addEventListener('show', function(event) {
      var page = event.target;
      var titleElement = document.querySelector('#toolbar-title');

      if (page.matches('#first-page')) {
        page.querySelector('.page__content').appendChild(document.querySelector('#twitter'));
        titleElement.innerHTML = 'My app - Page 1';
      } else if (page.matches('#second-page')) {
        titleElement.innerHTML = 'My app - Page 2';
      }
    });
  </script>

bodyタグ部分

<body>

  <div id="twitter">
    <center><a class="twitter-timeline" href="https://twitter.com/fuusokunews?ref_src=twsrc%5Etfw">Tweets by fuusokunews</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></center>
  </div>
  <ons-page>
    <ons-toolbar>
      <div class="center" id="toolbar-title"></div>
    </ons-toolbar>
    <ons-tabbar position="auto">
      <ons-tab label="Tab 1" page="tab1.html" active>
      </ons-tab>
      <ons-tab label="Tab 2" page="tab2.html">
      </ons-tab>
    </ons-tabbar>
  </ons-page>

  <ons-template id="tab1.html">
    <ons-page id="first-page">
      <p style="text-align: center;">
        This is the first page.
      </p>
    </ons-page>
  </ons-template>

  <ons-template id="tab2.html">
    <ons-page id="second-page">
      <p style="text-align: center;">
        This is the second page.
      </p>
    </ons-page>
  </ons-template>
</body>

となります。

こんな感じでいかがでしょうか？

とはいえ、これは表示しているだけなので、更新などをしようとしたら、もう一工夫必要かと思います。

投稿2018/10/23 04:55

編集2018/10/23 04:57

KNaito

総合スコア376

Fusoku

2018/10/23 05:29

試したのですがうまくできませんね！自分の書き方が間違いなのでしょうか… <!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 src="components/loader.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <script> ons.ready(function() { console.log("Onsen UI is ready!"); }); document.addEventListener('show', function(event) { var page = event.target; var titleElement = document.querySelector('#toolbar-title'); if (page.matches('#first-page')) { page.querySelector('.page__content').appendChild(document.querySelector('#twitter')); titleElement.innerHTML = 'My app - Page 1'; } else if (page.matches('#second-page')) { titleElement.innerHTML = 'My app - Page 2'; } }); </script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script> ons.ready(function() { console.log("Onsen UI is ready!"); }); document.addEventListener('show', function(event) { var page = event.target; var titleElement = document.querySelector('#toolbar-title'); if (page.matches('#first-page')) { titleElement.innerHTML = '<center>ふう速にゅーす</center>'; } else if (page.matches('#second-page')) { titleElement.innerHTML = '<center>ふう速にゅーす</center>'; } else if (page.matches('#thaad-page')) { titleElement.innerHTML = '<center>ふう速にゅーす</center>'; } }); </script> </head> <body> <ons-page> <ons-toolbar> <div class="center" id="toolbar-title"></div> </ons-toolbar> <ons-tabbar position="auto"> <ons-tab label="ホーム" page="tab1.html" active> </ons-tab> <ons-tab label="お問い合わせ" page="tab2.html"> </ons-tab> <ons-tab label="お知らせ" page="tab3.html"> </ons-tab> </ons-tabbar> </ons-page> <ons-template id="tab1.html"> <ons-page id="first-page"> <iframe src="http://fu-soku.com/" seamless></iframe> </ons-page> </ons-template> <ons-template id="tab2.html"> <ons-page id="second-page"> <iframe src="http://fu-soku.com/%E3%83%A1%E3%83%BC%E3%83%AB%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0/" seamless></iframe> </ons-page> </ons-template> <ons-template id="tab3.html"> <ons-page id="thaad-page"> <p style="text-align: center;"> アップデート情報 </p>  <div class="wrapper"> <p class="txt"> Ver1.0.5....公式ツイッター表示<br> Ver1.0.4....アイコンの変更<br> Ver1.0.3....UIの改善<br> Ver1.0.0....アプリの公開<br> </p> </div>  <br> <div id="twitter"> <center><a class="twitter-timeline" href="https://twitter.com/fuusokunews?ref_src=twsrc%5Etfw">Tweets by fuusokunews</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></center> </div> </ons-page> </ons-template> </body> </html>

KNaito

2018/10/23 06:03 編集

1. `<div id="twitter">`タグは、ons-templateの中に書くと動作しなくなってしまうので、ons-templateの外側に記述して下さい。(bodyの直下など) 2. addEventListenerが2回記述されていますが、たぶん、1つ目のものはいらないです。また、showイベントではなくて、initイベントでappendChildをしないと、タブを切り替えた時におかしくなるようです。initイベントに対するリスナーを作成して、そこで`page.querySelector('.page__content').appendChild(document.querySelector('#twitter'));`を追加してみてください

KNaito

2018/10/23 06:01 編集

コード全体では、次のようになります。(iframeの直書きは、iOSでうまく動作しないので外しました） ``` <!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 src="components/loader.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script> ons.ready(function() { console.log("Onsen UI is ready!"); }); document.addEventListener('init', function(event) { var page = event.target; if (page.matches('#first-page')) { page.querySelector('.page__content').appendChild(document.querySelector('#twitter')); } }); document.addEventListener('show', function(event) { var page = event.target; var titleElement = document.querySelector('#toolbar-title'); if (page.matches('#first-page')) { titleElement.innerHTML = '<center>ふう速にゅーす</center>'; } else if (page.matches('#second-page')) { titleElement.innerHTML = '<center>ふう速にゅーす</center>'; } else if (page.matches('#thaad-page')) { titleElement.innerHTML = '<center>ふう速にゅーす</center>'; } }); </script> </head> <body> <ons-page> <ons-toolbar> <div class="center" id="toolbar-title"></div> </ons-toolbar> <ons-tabbar position="auto"> <ons-tab label="ホーム" page="tab1.html" active> </ons-tab> <ons-tab label="お問い合わせ" page="tab2.html"> </ons-tab> <ons-tab label="お知らせ" page="tab3.html"> </ons-tab> </ons-tabbar> </ons-page> <ons-template id="tab1.html"> <ons-page id="first-page">  </ons-page> </ons-template> <ons-template id="tab2.html"> <ons-page id="second-page">  </ons-page> </ons-template> <ons-template id="tab3.html"> <ons-page id="thaad-page"> <p style="text-align: center;"> アップデート情報 </p>  <div class="wrapper"> <p class="txt"> Ver1.0.5....公式ツイッター表示<br> Ver1.0.4....アイコンの変更<br> Ver1.0.3....UIの改善<br> Ver1.0.0....アプリの公開<br> </p> </div>  <br> </ons-page> </ons-template> <div id="twitter"> <center><a class="twitter-timeline" href="https://twitter.com/fuusokunews?ref_src=twsrc%5Etfw">Tweets by fuusokunews</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></center> </div> </body> </html> ```

KNaito

2018/10/23 05:55

iframeを使いたい場合は、deviereadyイベント後（あるいは、ons.ready後）に、JSによってiframeを組み込むことで実現出来ます。

Fusoku

2018/10/26 04:40 編集

iframe表示はそのままでアップデート情報のタブの欄の下の方にTwitterを表示したいです！タブ1は【http://fu-soku.com】タブ2は【http://fu-soku.com/%E3%83%A1%E3%83%BC%E3%83%AB%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0/】を表示したいです！

KNaito

2018/10/28 03:53

先にも書いたように、devicereadyイベント後（あるいは、ons.ready後）にappendChildやinnerHTMLなどを使ってiframeを組み込めば出来ます。例えば、次のようになると思います。（ただし、ハイブリッドアプリでiframeを利用するのはオススメできませんが） ``` <!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 src="components/loader.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script> ons.ready(function() { console.log("Onsen UI is ready!"); }); document.addEventListener('init', function(event) { var page = event.target; if (page.matches('#first-page')) { page.querySelector('.page__content').innerHTML = "<iframe src=\"http://fu-soku.com/\" seamless></iframe>"; page.querySelector('.page__content').appendChild(document.querySelector('#twitter')); } else if (page.matches('#second-page')) { page.querySelector('.page__content').innerHTML = "<iframe src=\"http://fu-soku.com/%E3%83%A1%E3%83%BC%E3%83%AB%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0/\" seamless></iframe>"; } }); document.addEventListener('show', function(event) { var page = event.target; var titleElement = document.querySelector('#toolbar-title'); if (page.matches('#first-page')) { titleElement.innerHTML = '<center>ふう速にゅーす</center>'; } else if (page.matches('#second-page')) { titleElement.innerHTML = '<center>ふう速にゅーす</center>'; } else if (page.matches('#thaad-page')) { titleElement.innerHTML = '<center>ふう速にゅーす</center>'; } }); </script> </head> <body> <ons-page> <ons-toolbar> <div class="center" id="toolbar-title"></div> </ons-toolbar> <ons-tabbar position="auto"> <ons-tab label="ホーム" page="tab1.html" active> </ons-tab> <ons-tab label="お問い合わせ" page="tab2.html"> </ons-tab> <ons-tab label="お知らせ" page="tab3.html"> </ons-tab> </ons-tabbar> </ons-page> <ons-template id="tab1.html"> <ons-page id="first-page">  </ons-page> </ons-template> <ons-template id="tab2.html"> <ons-page id="second-page">  </ons-page> </ons-template> <ons-template id="tab3.html"> <ons-page id="thaad-page"> <p style="text-align: center;"> アップデート情報 </p>  <div class="wrapper"> <p class="txt"> Ver1.0.5....公式ツイッター表示<br> Ver1.0.4....アイコンの変更<br> Ver1.0.3....UIの改善<br> Ver1.0.0....アプリの公開<br> </p> </div>  <br> </ons-page> </ons-template> <div id="twitter"> <center><a class="twitter-timeline" href="https://twitter.com/fuusokunews?ref_src=twsrc%5Etfw">Tweets by fuusokunews</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></center> </div> </body> </html> ```

Fusoku

2018/10/28 18:36

ダメみたいですね… やはりうまくごかなかったです、、、

行動規範の内容に同意します