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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

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

Q&A

0回答

711閲覧

!至急!Monacaを使ったトウロンバトルアプリ開発のソースの結合がわからない

U.S.S.R

総合スコア2

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

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

0グッド

0クリップ

投稿2021/08/31 12:35

前提・実現したいこと

MonacaとニクフラMobileBackendを利用して
テーマに沿ってチャットで議論し,正しいと思った方に投票する、といったアプリを開発しているのですが、
ユーザー機能,チャット機能,投票機能をそれぞれ開発して結合しようとしたら失敗しました
どう結合すればいいでしょうか?

発生している問題

投票機能が喪失 順番がわからない

該当のソースコード

Chatの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: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <link rel="stylesheet" href="components/loader.css"> 9 <link rel="stylesheet" href="css/style.css"> 10 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" > 11 <script> 12 // アプリの設定 13 var limit = 5; 14 var room = "chat"; 15 var myName = null; 16 var myIcon = "face"; 17 18 // ncmbデータベースに接続 19 var APIKEY = "APIKEY"; 20 var CLIENTKEY = "CLIENTKEY"; 21 var ncmb = new NCMB(APIKEY, CLIENTKEY); 22 // チャットテーブルのオブジェクトを作成 23 var chatTable = null; 24 25 // スタート 26 function start(){ 27 myName = document.getElementById("myName").value; 28 myIcon = document.getElementById("home_form").icon.value; 29 room = document.getElementById("home_form").room.value; 30 chatTable = ncmb.DataStore(room); 31 console.log(room); 32 document.getElementById("home").style.display = "none"; 33 document.getElementById("main").style.display = "block"; 34 read(); 35 } 36 37 // アプリの初期化処理 38 function init(){ 39 40 } 41 42 // チャットデータ取得描画 43 function read() { 44 // 画面初期化 45 document.getElementById("chat").innerHTML = null; 46 // チャットデータ取得反映 47 chatTable 48 .order("createDate",true) 49 .limit(limit) 50 .fetchAll() 51 .then(function(records){ 52 records.reverse(); 53 for (var i = 0; i < records.length; i++) { 54 // 投稿日付オブジェクトを生成 55 var date = new Date(records[i].get("createDate")); 56 57 var figure = document.createElement("figure"); 58 var icon = document.createElement("i"); 59 60 if (records[i].get("icon")) { 61 icon.textContent = records[i].get("icon"); 62 } else { 63 icon.textContent = "face"; 64 } 65 icon.classList.add('material-icons'); 66 var figcaption = document.createElement("figcaption"); 67 figcaption.textContent = records[i].get("name"); 68 figure.appendChild(icon); figure.appendChild(figcaption); 69 70 var time = document.createElement("time"); 71// time.classList.add('chat_time'); 72 time.textContent = date.getMonth() + 1 + "/" 73 + date.getDay() + " " 74 + date.getHours() + ":" 75 + date.getMinutes() + ":" 76 + date.getSeconds(); 77 78 // 投稿を表示するためのリストタグを生成 79 var li = document.createElement("li"); 80 // タグClass属性を付与 81// li.classList.add('chat_box'); 82 // 投稿内容作成 83 var p = document.createElement("p"); 84 p.classList.add('box'); 85 p.textContent = records[i].get("message"); 86 87 // 投稿内容をチャットエリアに追記 88 li.appendChild(time); 89 if (records[i].get("name") == myName) { 90 p.classList.add('box-right'); 91 li.appendChild(p); 92 li.appendChild(figure); 93 } else { 94 p.classList.add('box-left'); 95 li.appendChild(figure); 96 li.appendChild(p); 97 } 98 99 document.getElementById("chat").appendChild(li); 100 } 101 }) 102 .catch(function(error){ 103 // もしfetchAll()が失敗したらエラーをログに書き出す 104 console.log(error); 105 }); 106 } 107 // チャットのレコードを作成してテーブルに登録する関数を定義 108 function send() { 109 // フォームの値を取得 110 var message = document.getElementById("message").value; 111 document.getElementById("message").value = ""; 112 // チャットレコードの作成と反映 113 new chatTable() 114 .set("message",message) 115 .set("name",myName) 116 .set("icon",myIcon) 117 .save() 118 .then(function() { 119 read(); 120 }) 121 .catch(function(error){ 122 // もしsave()が失敗したらエラーをログに書き出す 123 console.log(error); 124 }); 125 } 126 </script> 127</head> 128<body> 129 <section id="home"> 130 <header> 131 <h1>バトウロン - BATLE✕TOULON</h1> 132 </header> 133 <p class="descriptive_text">新感覚対戦型チャットアプリ!バトウロン!</p> 134 <section class="name_section"> 135 136 <input type="text" id="myName" value="" placeholder="Username"> 137 </section> 138 <form id="home_form"> 139 <section class="icon_section"> 140 <ul class="icon_select"> 141 <li><input name="icon" type="radio" id="icon0" value="assignment_ind"><label for="icon0" class="material-icons">assignment_ind</label></li> 142 <li><input name="icon" type="radio" id="icon1" value="emoji_emotions"><label for="icon1" class="material-icons">emoji_emotions</label></li> 143 <li><input name="icon" type="radio" id="icon2" value="face"><label for="icon2" class="material-icons">face</label></li> 144 <li><input name="icon" type="radio" id="icon3" value="mood"><label for="icon3" class="material-icons">mood</label></li> 145 <li><input name="icon" type="radio" id="icon4" value="perm_identity"><label for="icon4" class="material-icons">perm_identity</label></li> 146 <li><input name="icon" type="radio" id="icon5" value="person"><label for="icon5" class="material-icons">person</label></li> 147 <li><input name="icon" type="radio" id="icon6" value="sentiment_satisfied_alt"><label for="icon6" class="material-icons">sentiment_satisfied_alt</label></li> 148 <li><input name="icon" type="radio" id="icon7" value="supervised_user_circle"><label for="icon7" class="material-icons">supervised_user_circle</label></li> 149 </ul> 150 </section> 151 <section class="room_section"> 152 <select name="room"> 153 <option value="chat">ロビー(一般)</option> 154 <option value="chata">ステージA-北方領土(Russia vs Japan)</option> 155 <option value="chatb">ステージB-コロナでお酒は禁ずるべきだったか(Yes vs No)</option> 156 <option value="chatc">ステージC-第二次世界大戦は本当に枢軸国側だけ悪いのか(Allied vs Axis powers)</option> 157 </select> 158 </section> 159 <input type="button" class="startbtn" value="Join" onclick="start()"> 160 </form> 161 </section> 162 163 164 <section id="main"> 165 <header> 166 <i class="material-icons left_btn" onclick="location.reload()">home</i> 167 <h1>チャットアプリ</h1> 168 <i class="material-icons right_btn" onclick="read()">update</i> 169 </header> 170 <ul id="chat"> 171 </ul> 172 <footer> 173 <form id="message_form"> 174 <input type="text" id="message" value="" placeholder="Let's 議論"> 175 <input type="button" value="送信" id="sendbtn" onclick="send()"> 176 </form> 177 </footer> 178 </section> 179 180</body> 181</html> 182

Login app.js
https://firestorage.jp/download/f1f5e78fc5e64f0e2ebc15fd9ffbc30400e3042b
Login HTML
https://firestorage.jp/download/f1f5e78fc5e64f0e2ebc15fd9ffbc30400e3042b

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問