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

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

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

解決済

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

grandcross_info
grandcross_info

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

1回答

0評価

0クリップ

2201閲覧

投稿2017/07/06 16:11

編集2022/01/12 10:58

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

エラーメッセージ

###該当のソースコード

ここにご自身が実行したソースコードを書いてください
<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> ###試したこと リファレンスエラーチェック、スクリプトの実行可能か不能かのチェック(不能)。 ons.bootstrap(); の設置。 onsen UI リンクページとの答え合わせ。 <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'" /> の開閉。 <script src="components/loader.js"></script> のヌル値の確認と、ステータスチェンジ、アヤックス、ジェイソンファイルの実行状況の確認。→、ほぼ鉄壁のガードで、インラインすら打ち消すスクリプトの実行ファイルでした。また、アプリからのコールバックも確実にでき、アシアル社で管理されていること、そして、承認プログラムのみ連携可能な実態。

カスタムコンフィグファイルの、確認。
###補足情報(言語/FW/ツール等のバージョンなど)
とにかく、スクリプトを実行できるようにしたいです。長々書いてますけど、結論は、何にもできなくなっている。という難問を、スクリプトもcssも セルフSRCぐらいは動かせるようにしたいです。

また、追加で次を施しました。
<meta name="format-detection" content="telephone=no" />

良い質問の評価を上げる

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

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

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

気になる質問をクリップする

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

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

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

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

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

m.ts10806
m.ts10806

2017/07/07 00:35

ソースコードは```~```内に入れてください。
m.ts10806
m.ts10806

2017/07/07 00:37 編集

ブラウザの開発ツールなどでエラーが出ていないか確認し、出ている場合は質問本文に追記してください。
grandcross_info
grandcross_info

2017/07/07 05:04

ありがとうごあいます。ブラウザーにエラーはない状態で、コンパイルエラーもない状態で、cssのみ稼働、スクリプト実行不能です。またURLも問題がなく、JSコンポーネンツの追加からonsenui を付与しています。
grandcross_info
grandcross_info

2017/07/07 05:48

クロームの:のその他のツール〜デヴェロッパーツールを試しても、Monaca環境なので、開発プラットフォームごと読み込んでしまいます。
grandcross_info
grandcross_info

2017/07/07 16:40

そうです。エラーはないけど、スクリプトが動かない状態です。
m.ts10806
m.ts10806

2017/07/09 14:36

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

2017/07/09 21:28

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。