質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.36%

monacaでindex.html 以外で onsen UI を使うには?

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,143

score 130

前提・実現したいこと

去年の段階で、MonacaでJavascriptとhtml5、css3、を使ってアプリを作成し、今年3月からアップル・デヴェロッパー・プログラムとグーグル・プレイ・デヴェロパー・コンソール、を通じて、アプリを配信してましたが、onsen UIを無視した設計のため、jquery.mobile,onsen UIを取り入れた、構造に変えつつあります。jquery.mobileをインデックスページに搭載し、リンクから、Diary.htmlにとびそのページで、設定、JSプラグインの追加で、onsen UIコンポーネントを実装しました。最初は、ナビゲーションテンプレートからはいりましたが、パーツを削ってカスタマイズしていました。後付けのonsen UIは、バージョンアップされていて、Monacaの解説本には則さない仕様です。
Diary.htmlでスライダーを使うには、どうしたらいいでですか?

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

スライダーは機能するものの、ページリンク(ページ・ロード)イヴェントが開始できません。またアイコンをタップしても、メニューページが開きません。スライドのみ可能です。タップしても、ページリロードできません。

エラーメッセージ

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-width=1.0,user-scalable=no" />
<meta http-equiv="Content-Sequrity-Policy" content="default-src *; style-src- * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; " />
<script src="www/components/monaca-onsenui/js/onsenui.js"></script>
<script src="www/components/monaca-onsenui/js/angular/angular.js"></script>
<link rel="stylesheet" href="www/components/monaca-onsenui/css/onsenui.css" />
<link rel="stylesheet" href="www/components/monaca-onsenui/css/onsen-css-components.css />
<script>
ons.ready(function(){
   console.log('onsen ui ready');
});
//fn is set as function name on full action
window.fn = {};
//men page open event is set
window.fn.open = document.getElementById('menu');
menu.open();

//page load event is set
    window.fn.load = function(page) {
      var content = document.getElementById('content');
      var menu = document.getElementById('menu');
      content
        .load(page)
        .then(menu.close.bind(menu));
    };

  </script>
</head>
<body>
  <ons-splitter>
    <ons-splitter-side id="menu"  side="left" width="220px" collapse swipeable>
      <ons-page>
      <div id="menu1">
        <ons-list>
          <ons-list-item onclick="fn.load('home.html')" tappable>
            <ons-icon icon="gear" spin="true"></ons-icon>Home
          </ons-list-item>
          <ons-list-item onclick="fn.load('settings.html')" tappable>
            <ons-icon icon="gear" spin="true"></ons-icon>setting
          </ons-list-item>
          <ons-list-item onclick="fn.load('about.html')" tappable>
            <ons-icon icon="gear" spin="true"></ons-icon>about
          </ons-list-item>
        </ons-list>
      </div>    
      </ons-page>
    </ons-splitter-side>
    <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
  </ons-splitter>

<ons-template id="home.html">
  <ons-page>
    <ons-toolbar>
      <ons-toolbar-button onclick="fn.open()">
        <div class="left">
          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
        </div>
      </ons-toolbar-button>  
      <div class="center">
        home
      </div>
    </ons-toolbar>
    <p style="color: #ff00ff; font-size: 20px; margin-top:20%; ">
     Main theme of letters
    </p>
  </ons-page>
</ons-template>

<ons-template id="setting.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
        </div>
      </ons-toolbar-button>  
      <div class="center">
        home
      </div>
    </ons-toolbar>
    <p>a letter</p>
  </ons-page>
</ons-template>

<ons-template id="about.html"  
  <ons-page>
    <ons-toolbar>
      <div class="left">
          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
        </div>
      </ons-toolbar-button>  
      <div class="center">
        home
      </div>
    </ons-toolbar>
    <p>a letter</p>
  </ons-page>
</ons-template>

</body>
</html> 
 ```  

###試したこと  

リファレンスエラーチェック、スクリプトの実行可能か不能かのチェック(不能)。  
<script>  
ons.bootstrap();  
</script>  
の設置。  
onsen UI リンクページとの答え合わせ。  

<html> <head> <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'" /> </head> </html>

の開閉。  
<script src="components/loader.js"></script>  

のヌル値の確認と、ステータスチェンジ、アヤックス、ジェイソンファイルの実行状況の確認。→、ほぼ鉄壁のガードで、インラインすら打ち消すスクリプトの実行ファイルでした。また、アプリからのコールバックも確実にでき、アシアル社で管理されていること、そして、承認プログラムのみ連携可能な実態。

カスタムコンフィグファイルの、確認。

補足情報(言語/FW/ツール等のバージョンなど)

とにかく、スクリプトを実行できるようにしたいです。長々書いてますけど、結論は、何にもできなくなっている。という難問を、スクリプトもcssも セルフSRCぐらいは動かせるようにしたいです。

また、追加で次を施しました。

<meta name="format-detection" content="telephone=no" />  
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2017/07/09 23:36

    一部jQueryのような記述が見受けられますが、jQueryライブラリ本体は読み込めていますか?(読まれてない場合も一応エラーは出ますけども・・)

    キャンセル

  • grandcross_info

    2017/07/10 06:28

    jquery 読み込み必須ですか、onsen UI使用したいのですが、slide menu page 使用したいのです。jquery library導入して再試行してみます。何か、感染しているかもしれません。

    キャンセル

  • m.ts10806

    2017/07/10 09:25

    そうですね。jQueryMobileを利用するのであればjQuery本体の設置は必須です。 http://www.buildinsider.net/web/jquerymobileref/01

    キャンセル

回答 1

checkベストアンサー

+1

幾つか間違ってる部分がありますね。
例としては

//men page open event is set
window.fn.open = document.getElementById('menu');
menu.open();

サンプルからコピペミスしてると思います。サンプルで記載されてるのは

window.fn.open = function() {
  var menu = document.getElementById('menu');
  menu.open();
};


上記のとおりです(https://ja.onsen.io/v2/api/js/ons-splitter-content.html 参考)

とりあえず

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <link rel="stylesheet" href="components/loader.css">
  <script src="components/loader.js"></script>
<script>
ons.ready(function(){
});
window.fn = {};

window.fn.open = function() {
  var menu = document.getElementById('menu');
  menu.open();
};

window.fn.load = function(page) {
  var content = document.getElementById('content');
  var menu = document.getElementById('menu');
  content.load(page)
    .then(menu.close.bind(menu));
};

</script>
</head>
<body>
<ons-splitter>
  <ons-splitter-side id="menu"  side="left" width="220px" collapse swipeable>
    <ons-page>
      <ons-list>
        <ons-list-item onclick="fn.load('home.html')" tappable>
          <ons-icon icon="gear" spin="true"></ons-icon>Home
        </ons-list-item>
        <ons-list-item onclick="fn.load('settings.html')" tappable>
          <ons-icon icon="gear" spin="true"></ons-icon>setting
        </ons-list-item>
        <ons-list-item onclick="fn.load('about.html')" tappable>
          <ons-icon icon="gear" spin="true"></ons-icon>about
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>

<ons-template id="home.html">
  <ons-page>
    <ons-toolbar>
      <ons-toolbar-button onclick="fn.open()">
        <div class="left">
          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
        </div>
      </ons-toolbar-button>  
      <div class="center">
        home
      </div>
    </ons-toolbar>
    <p style="color: #ff00ff; font-size: 20px; margin-top:20%; ">
     Main theme of letters
    </p>
  </ons-page>
</ons-template>

<ons-template id="settings.html">
  <ons-page>
    <ons-toolbar>
      <ons-toolbar-button onclick="fn.open()">
        <div class="left">
          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
        </div>
      </ons-toolbar-button>  
      <div class="center">
        settings
      </div>
    </ons-toolbar>
    <p>a letter</p>
  </ons-page>
</ons-template>

<ons-template id="about.html">
  <ons-page>
    <ons-toolbar>
      <ons-toolbar-button onclick="fn.open()">
        <div class="left">
          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
        </div>
      </ons-toolbar-button>  
      <div class="center">
        about
      </div>
    </ons-toolbar>
    <p>a letter</p>
  </ons-page>
</ons-template>

</body>
</html>


これをtest.htmlにしてindex.htmlからtest.htmlにリンクで飛ばした際動きました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る