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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Onsen UI

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

Monaca

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

Q&A

1回答

5765閲覧

monacaでそもそもjs が動かない

moscow3

総合スコア201

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Onsen UI

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

Monaca

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

0グッド

0クリップ

投稿2017/10/13 20:12

編集2022/01/12 10:55

monaca初心者です。 現在 OnsenUI V2 Js Splterで簡単なアプリを作ろうと思っているのですが、例えば、HOME画面に画像を張ってその大きさをJSで操作する というようなことをしたいときは、どのようにすればいいでしょうか?

(下のコードはほぼテンプレのままです)

html

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <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'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/onsenui/js/onsenui.min.js"></script> 9 10 <link rel="stylesheet" href="components/loader.css"> 11 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 12 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 13 <link rel="stylesheet" href="css/style.css"> 14 15<script src="script1.js"></script> 16<!-- index.htmlが長くなるので、この上のJSコードは別の所に移動しました--> 17 18</head> 19<body> 20 21 22 <ons-splitter> 23 <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable> 24 <ons-page> 25 <ons-list> 26 <ons-list-item onclick="fn.load('home.html')" tappable> 27 Home 28 </ons-list-item> 29 <ons-list-item onclick="fn.load('settings.html')" tappable> 30 Settings 31 </ons-list-item> 32 <ons-list-item onclick="fn.load('about.html')" tappable> 33 About 34 </ons-list-item> 35 </ons-list> 36 </ons-page> 37 </ons-splitter-side> 38 <ons-splitter-content id="content" page="home.html"></ons-splitter-content> 39 </ons-splitter> 40 41 <ons-template id="home.html"> 42 <ons-page> 43 <ons-toolbar> 44 <div class="left"> 45 <ons-toolbar-button onclick="fn.open()"> 46 <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> 47 </ons-toolbar-button> 48 </div> 49 <div class="center"> 50 Main 51 </div> 52 </ons-toolbar> 53 54<!-- とりあえずここら辺においてみる--> 55 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 56 <script src="style1.js"></script> 57 <img src="gazou.png" id="img1" > 58 59 60 <p style="text-align: center; opacity: 0.6; padding-top: 20px;"> 61 Swipe right to open the menu! 62 </p> 63 64 </ons-page> 65 </ons-template> 66 67 <ons-template id="settings.html"> 68 <ons-page> 69 <ons-toolbar> 70 <div class="left"> 71 <ons-toolbar-button onclick="fn.open()"> 72 <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> 73 </ons-toolbar-button> 74 </div> 75 <div class="center"> 76 Settings 77 </div> 78 </ons-toolbar> 79 </ons-page> 80 </ons-template> 81 82 <ons-template id="about.html"> 83 <ons-page> 84 <ons-toolbar> 85 <div class="left"> 86 <ons-toolbar-button onclick="fn.open()"> 87 <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> 88 </ons-toolbar-button> 89 </div> 90 <div class="center"> 91 About 92 </div> 93 </ons-toolbar> 94 </ons-page> 95 </ons-template> 96 97 98</body> 99</html> 100

とりあえずSwipe right to open the menu!の近くに画像とJSを置いてみたのですが、画像が表示されません。
また、Swipe right to open the menu!の近くに画像のみを置き、上のほう( <body> のすぐ下)にJSを置いたところ、JS自体は動いているのですが、画像にスタイルが適応されません

どのように解決すればよいでしょうか?

一応style.js

javascript

1//style.js 2$(function () { 3//縮尺調整 4var s1=5; 5var s2=5; 6 7// 画面幅 8var W=screen.width; 9// 画面高 10var H=screen.height; 11 12console.log(W); 13console.log(H); 14 15$("#img1").css({ 16 position: "absolute", 17 top: H / (2*s1) + "px", 18 left: W / (2*s1) + "px", 19 width: W / (s2/2) + "px", 20 width:"10 px" 21}); 22 23});

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/03/11 12:57

回答は出揃ってると思うが、いかがだろう。 解決済みにしては。
guest

回答1

0

少しでも解決の糸口になればと思い、投稿します。

私もMonaca初心者のため、質問者様と同じ用に、JavaScriptが動かないということがありました。
その際、私が確認したポイントがありますので、一度、試してみてもらえますでしょうか?

まず、作成したJavaScript(style.js)は、index.htmlと同じ階層に保存していますか?
ご存知とは思いますが、
例えば、JSフォルダを新規作成してそのフォルダ内に保存したなど、
他の場所に保存しているのであれば、

<script src="style1.js"></script> ではなく <script src="保存しているフォルダ名/style1.js"></script> と

記述する必要があります。

次に、htmlの、ons-templateタグ内に、scriptを記述しておりますが、
私の場合、作成したJavaScriptは全て、先頭部分の、headタグ内に記述しました。

<head> <!-- ここにこんな感じ --> <script src="style1.js"></script> <script src="test1.js"></script> <script src="test2.js"></script> </head>

試しに、他の場所に記述してみたりしたのですが、正常動作したのがheadタグ内だけでした。
気持ち的には、動かしたいページ内にスクリプトを書きたいんですが、そうじゃないみたいです…。

これでも動作しないのであれば、他に原因があるかもしれません。
もう既に検証済だったり、全く解決できないようでしたら、スミマセンm(_ _)m

投稿2017/10/18 01:01

lucky-ponta

総合スコア74

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

moscow3

2017/10/18 01:15

悲しいことに、それでも無理でした・・・・ console.logだけはちゃんと動作しているみたいなので・・やっぱり画像のやり方に問題があるのかな・・・
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問