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

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

ただいまの
回答率

90.85%

  • JavaScript

    14261questions

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

  • Monaca

    900questions

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

  • CSV

    541questions

    CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

csvファイルに値を保存

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 594

next.wing

score 5

前置き

monacaを使いスマートフォンアプリを作成しています。
アプリの概要はiBeaconを用いてスタンプラリーを行うというものです。

やりたいこと

スタンプラリーの拠点にあるiBeaconの近くに行ったとき、拠点に到着した痕跡を残すためにCSVファイルに書き込んで、保存し、チェックシートにある変数に「〇」を入れたいのですがCSVに書き込む方法が分かりません。

ソースコード

【index.html】

<!DOCTYPE HTML>
<html ng-app="BeaconProject">
<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:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<!-- <link rel="stylesheet" href="css/styles.css">-->
<link rel="stylesheet" href="css/design.css">
<script src="js/main.js"></script>
<!-- <script src="js/db.js"></script>-->

</head>

<body>
<!-- ビーコン -->
<ons-navigator var="beaconNavigator">
<ons-page ng-controller="TopPageCtrl">

<!-- トップ画面 -->
<div data-role="page" id="list-page" bgcolor="#90ee90">   
<div data-role="header" data-position="fixed" data-theme="c"></div>
<center>
<h1>Top page</h1>
<img src="top.png" width="350" height="450" alt="map"><br/><br/>
<input type="button" onclick="location.href='sheet.html?bk=1'" value="チェックシート" style="WIDTH: 100%; HEIGHT: 40px">
<input type="button" onclick="location.href='map.html?bk=1'" value="地図" style="WIDTH: 100%; HEIGHT: 40px">
</center>
</div>

</ons-page>
</ons-navigator>
</html>

【main.js】
var app = angular.module('BeaconProject', ['onsen']);

var deviceUUid = 12345;

app.service('iBeaconService', function() {
this.currentIdentifier  = null; //  監視対象のビーコンID
this.onDetectCallback   = function() {};

//  ビーコンの情報(配列)
var beacons = {
"tkd-i-001": {
name:'tkd-i-001', 
uuid:'48534442-4C45-4144-80C0-180000000000', 
major:200, 
minor:1, 
icon:'icon/1.jpg', 
//   url:'http://snowsss.php.xdomain.jp/insert.php',
url:'info-page1.html',
rssi:-63, 
proximity:'Unknown',
},
"tkd-i-002": {  
name:'tkd-i-002', 
uuid:'48534442-4C45-4144-80C0-180000000000', 
major:1, 
minor:1, 
icon:'icon/2.jpg', 
url:'info-page2.html',
rssi:-63, 
proximity:'Unknown',
},
"tkd-i-003": {
name:'tkd-i-003', 
uuid:'48534442-4C45-4144-80C0-180000000000', 
major:200, 
minor:2, 
icon:'icon/3.jpg', 
url:'info-page3.html',
rssi:-63, 
proximity:'Unknown',
},
"tkd-i-004": {
name:'tkd-i-004', 
uuid:'48534442-4C45-4144-80C0-180000000000', 
major:200, 
minor:3, 
icon:'icon/4.jpg', 
url:'info-page4.html',
rssi:-63, 
proximity:'Unknown',
}
};
this.beacons = beacons;

//  ビーコン登録
createBeacons = function() {
var result = [];
try {
angular.forEach(beacons, function(value) {
//  ビーコンの情報(配列)を基にビーコンを登録する。
result.push(new cordova.plugins.locationManager.BeaconRegion(value.name, value.uuid, value.major, value.minor));
});
}
catch(e) {
alert('createBeacon error: '+e);
}
return result;
};

//  ビーコン監視
this.watchBeacons = function(callback) {
document.addEventListener("deviceready", function() {

deviceUUid = device.uuid;

var beacons = createBeacons();  //  ビーコン登録へ
try {
var delegate = new cordova.plugins.locationManager.Delegate();

//  領域内のビーコンの状態を決定するとき
delegate.didDetermineStateForRegion = function(pluginResult) {
log('[DOM] didDetermineStateForRegion: '+JSON.stringify(pluginResult));
};

//  領域内のビーコンの監視を開始したとき
delegate.didStartMonitoringForRegion = function(pluginResult) {
log('[DOM] didStartMonitoringForRegion: '+JSON.stringify(pluginResult));
};

//  領域内のビーコンを受信したとき
delegate.didRangeBeaconsInRegion = function(pluginResult) {
var beaconData  = pluginResult.beacons[0];
var uuid        = pluginResult.region.uuid.toUpperCase();
var identifier  = pluginResult.region.identifier;
if(!beaconData || !uuid) {
return;
}
callback(beaconData, identifier);
};

window.locationManager = cordova.plugins.locationManager;

locationManager.setDelegate(delegate);

//  iOS関係?
// required in iOS 8+(iOS8以上なら下の文にする)
locationManager.requestWhenInUseAuthorization();
// cordova.plugins.locationManager.requestAlwaysAuthorization();

//  
beacons.forEach(function(beacon) {
locationManager.startRangingBeaconsInRegion(beacon);
});
}
catch(e) {
alert('delegate error: '+e);
}
}, false);
};
});

//  「top-page」の制御
app.controller('TopPageCtrl', ['$scope', 'iBeaconService', function($scope, iBeaconService) {
$scope.beacons = iBeaconService.beacons;

// var testUrl = 'http://snowsss.php.xdomain.jp/test11.php';

var callback = function(deviceData, identifier) {
var beacon = $scope.beacons[identifier];
$scope.$apply(function() {
beacon.rssi = deviceData.rssi;
//  ビーコンがかなり近い(rssiが-60以上)のとき
if(beacon.rssi > -60) {
beacon.proximity = 'Immediate';
//  新しいビーコンの領域に入ったとき
if(iBeaconService.currentIdentifier == null) {
navigator.vibrate([1000]);  //  バイブレータ1秒起動
$scope.enterInfoPage(identifier);  //   「ページ切り替え」へ                  
}
}
//  ビーコンがまあまあ近い(rssiが-65以上)のとき
else if(beacon.rssi > -65) {
beacon.proximity = 'Near';
}
//  ビーコンが遠い(rssiが-70以上)とき
else if(beacon.rssi > -70) {
beacon.proximity = 'Far';
//  現在監視しているビーコンを監視対象から外す
if(iBeaconService.currentIdentifier == identifier) {
iBeaconService.currentIdentifier = null;
//ビーコンからでたらここにとぶ
$scope.beaconNavigator.pushPage('index.html');
}
}
else {
beacon.proximity = 'Unknown';
}
});
};
iBeaconService.watchBeacons(callback);

var win = null;
//  「info-page」ページの制御
app.controller('InfoPageCtrl', ['$scope', 'iBeaconService', function($scope, iBeaconService) {
$scope.beacon = iBeaconService.beacons[iBeaconService.currentIdentifier];
}]);

【sheet.html】
<!DOCTYPE HTML>
<html ng-app="BeaconProject">
<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:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/design.css">
<script src="js/main.js"></script>
</head>

<body>
<!-- チェックシート画面 -->
<div data-role="page" id="ranking-page">
<div data-role="header" data-position="fixed" data-theme="c">

<!--  <center><h1>チェックシート</h1></center>    -->
<br />
</div>

<div data-role="content">
<center>
<table id="rankingTable" border="1" width="90%" cellspacing="1" cellpadding="5">

<tr>
<th align="right" nowrap>畑</th>
<td id = "check_2" align="center" width="150">-</td>

</table> <br />
<img src="futter.png" width="100%" height="200">        <input type="button" onclick="location.href='index.html?bk=1'" value="戻る" style="WIDTH: 100%; HEIGHT: 40px">
</center>
</div>
</div>    
</body>
</html>

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • 退会済みユーザー

    2017/01/05 17:09

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

  • koronatail

    2017/01/05 17:35

    コードはコードブロック(```)で囲んだ方が見やすく表示されます。詳しく見ていませんが「変数の値をCSVとして出力したい」というだけの話であればビーコン関連の処理は載せる必要が無いと思います。コード丸々載せるだけでなく、どこで何をしようとしてなぜ詰まっているのかを具体的に記入したほうがいいと思います。

    キャンセル

回答 1

checkベストアンサー

0

案件を読んでみる限り、localStorage.setItemで対応可能かと思います。

どうしてもcsvで・・・というのであれば、
https://docs.monaca.io/ja/reference/cordova_6.2/file/
このプラグインを使うのが近道ですが、koronatail様が書き込まれたように、まずは必要な機能の周りのみを記述してください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/01/05 20:03

    回答ありがとうございます。
    今後投稿する際は気を付けたいと思います。

    どうしてもcsvというわけではないのですが、データベースを使って試みたんですが
    、私自身プログラミングが苦手でうまくいかなく、
    csvなら簡単に作れるといわれたのでcsvを使ってみようと思いました。
    localStorage.setItemとcsvではどちらのほうが容易に実現できますでしょうか。

    キャンセル

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

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

関連した質問

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

  • JavaScript

    14261questions

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

  • Monaca

    900questions

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

  • CSV

    541questions

    CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。