常連

注目の的

社会貢献

回答者

ベストアンサー

拍手喝采

情報収集家

自己紹介

有名人

### 前提・実現したいこと

初心者です。初投稿です。
HTMLで作成したウェブページをGitHubで公開したいと思っています。
VisualStudio2019で作成しました。
ウェブページはProfile、Skillの文字にカーソルを当てるとアンダーラインのアニメーションが表示され、クリックするとモーダルウィンドウが表示されるものです。
※Otherの文字もありますが、こちらの処理はまだ書いてませんので、反応なしで正解です。

### 発生している問題・エラーメッセージ
HTMLのコード内にCSSとJavaScriptが入っています。
CSSでの処理(アンダーラインのアニメーション)は動いているようですが、JavaScriptの処理のみ反映されていません。(モーダルウィンドウが出ません。)

整ってないコードではありますがURLを下記に示します。
https://github.com/yusuke-morioka/myportforio1.git


```ここに言語名を入力
HTML　CSS　JavaScript


### 試したこと
もともとHTML　CSS　JavaScriptの３つを別ファイルで作成してました。
その３つを公開したのですが、CSS、JavaScript両方反映されず、HTMLのみ反映されぐちゃぐちゃなページが公開されました。
色々調べたのですが埒が明かず、別ファイルなのが原因なのかと思い、全部まとめて一つのHTMLファイルとして公開しました。
結果、アンダーラインは無事反映されましたが今度はモーダルが反映されませんでした。

PC内に保存してあるHTMLファイルをクリックし、Chromeで表示させると問題なく動きます。
そのソースコードをそのままコピペしGitHubで公開してるのですが…なぜGitを通すとダメなのでしょうか。かれこれ３日ほど進歩がないのでどなたか助けていただきたく、お願い申し上げます。

GitHub Pagesでの公開方法に関して

### 実現させたい事
ons-search-inputでiosのキーボード改行ボタンを検索ボタンに変更させたいです。
![イメージ説明](91d47b90e08b4256b2012020fe0e1076.png)

### 概要・該当のソースコード
・Monaca:Onsen UI V2 JS Tabbar

```HTML

   <ons-template id="Search_page.html">
    <ons-page id="Search_page">
      

      <div id="search">
        <ons-search-input placeholder="ons-search-input" id="form1">
          <input type="search" class="search-input" placeholder="ons-search-input" id="text1">
        </ons-search-input>
      </div>
      
      <form>
        <input type="search" placeholder="デフォルトのform">
      </form>

    
     </ons-page>
  </ons-template>
```

```javascript
document.addEventListener('init',function(event){
  if(event.target.matches('#Search_page')){
    
    var form = document.getElementById('form1');
    form.addEventListener("change" , function(event){

      var a = document.getElementById('text1').value;
      alert(a);

    });
  }
});
```

ons-search-inputを使用せずformでonsubmit(function()return false;)を使用することもできるのですが、ons-search-inputのonchangeのほうが使い勝手が個人的には良いと思いましたので投稿させていただきました。
Androidのほうでは正常に検索ボタンとして表示されていることが確認できています。
ご回答よろしくお願いします。

Monaca×OnsenUI : ons-search-inputでiosのキーパッド「改行」→「検索」に変更させたい

JSにてDateクラスがありますが、以下のようにすれば何故文字列が出力されるのでしょうか？
```js
let d = new Date();
console.log(d);
```

同じ効果を持ったクラスを作ろうとしたのですが調べても見つけられなかったので、調べるのに必要な単語等を教えて欲しいです
```js
class Test{
    constructor(str = "") {
        this.str = "test";
        if (str != "") this.str = str;
    }
    valueOf() {
        return this.str.length;
    }
    get test() {
        return this.str;
    }
}


let test = new Test();
let test2 = new Test("test_");
console.log(test);
console.log(test2);
console.log(test + test2);
console.log(test - test2);
```

JSのDateクラスの仕組みを知りたい

### 前提・実現したいこと
[実現したいこと]
・amazonの商品を取得したい。


### 該当のソースコード
test.js


const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({
    headless: false, 
    slowMo: 500 
  })
  const page = await browser.newPage()
await page.goto('https://www.amazon.co.jp/')
  await browser.close(item)
})()

スクレイピングで、情報を取得

### 前提・実現したいこと

GAS(Google Apps Script)で、受験番号を書いて、自動送信メールを作ること

素人なので、ネット上で０から勉強して、試行錯誤した結果、
なんと返信とエラーメッセージが帰ってこなくなりました。

至急、どなたかに、問題の解明を頼みたく思います。お願いいたします。

### 発生している問題・エラーメッセージ

```
エラーが出ないのが不気味です・・・
```

### 該当のソースコード
```
function onFormSubmit(e) {
  // フォームの回答を取得
  var name = e.namedValues['name'][0];
  var email = e.namedValues['email'][0];
   Utilities.sleep(staySecond * 1000);
  var message = e.namedValues['message'][0];
 
  
  // 自動返信メール件名
  var subject = 'お問い合わせいただきありがとうございました。';
      
  // 自動返信メール本文
  var body = name + '様\n' +
    '\n' +
    'この度はお問い合わせいただき、誠にありがとうございました。' +
    '\n' +
    '後日、弊社担当よりご連絡させていただきますので\n' +
    'よろしくお願い申し上げます。\n' + 
    '\n' +
    '─────────────────────────\n' +
    'ご送信内容の確認\n' +
    '─────────────────────────\n' +
    '\n' +
    '【氏名】\n' +
    name + '\n' + 
    '\n' +
    '【メールアドレス】\n' +
      email + '\n' + 
    '\n' +
    '【受験番号】\n' +
     message + '\n' + 
    '\n';
   
 
   
  
  // メール送信
  MailApp.sendEmail({
    to: email,
    subject: subject,
    body: body
  });
}
```


### 試したこと
Utilities.sleep(staySecond * 1000);の場所を変えて試してもだめでした。
ちなみに、上のを入れないと、試験番号が読み取られません。

（=arrayformula(row(E3:E123)-2)で、フォームからの反応が来るたび自動連番にしたため。
フォームからの反応が、新しく行を入れることで、時間差を作らないと試験番号の欄が空白のママになる）


### 補足情報（FW/ツールのバージョンなど）

使っているのは最新版だと思います。

GASで受験番号つき自動送信メールを作ろうとして失敗しました。原因がわからなくて困っています。

Node.js デザインパターン第2版のサンプルプログラム（https://github.com/mushahiroyuki/ndp2）Chaptar4の10_generators_async_flowというサンプルがあります。
これは、generatorを使ってあるファイルのコピーを作成するプログラムです。

元コード

```JavaScript
"use strict";

const fs = require('fs');
const path = require('path');

function asyncFlow(generatorFunction) {
  function callback(err) {
    if (err) { 
      return generator.throw(err); 
    }
    const results = [].slice.call(arguments, 1);
    generator.next(results.length > 1 ? results : results[0]); 
  }
  const generator = generatorFunction(callback);
  generator.next(); 
}

asyncFlow(function* (callback) {
  const fileName = path.basename(__filename);
  const myself = yield fs.readFile(fileName, 'utf8', callback);
  yield fs.writeFile(`clone_of_${fileName}`, myself, callback);
  console.log('Clone created');
});
```

応用課題として、yieldable な Promise を使ってこれを書き換えるというものが提示されています。

以下の通りに実装してみたものの、記載のconsle.log以降の処理が実行されず正常に動きません。
（generator.nextを与えると、当然問題なく動きます。）

私の理解では、yieldableなPromiseであれば、resolveで後続処理をキックできるものかと認識しておりましたが、
どのような原因で後続処理を動かすことができていないものでしょうか？

```JavaScript
"use strict";
const fs = require('fs');
const path = require('path');

function asyncFlow(generatorFunction) {
    function callback(err) {
        return new Promise((resolve, reject) => {
            if (err) { 
              reject(generator.throw(err)); 
            }
            const results = [].slice.call(arguments, 1);
            resolve(results.length > 1 ? results : results[0]); //ここをresolve(generator.next(results.length > 1 ? results : results[0])); に修正すると動く
            }
        );
    }
  const generator = generatorFunction(callback);
  generator.next(); 
}

asyncFlow(function* (callback) {
  const fileName = path.basename(__filename);
  const myself = yield fs.readFile(fileName, 'utf8', callback);
  console.log('----ここに戻って来れない----');
  const err = yield fs.writeFile(`clone_of_${fileName}`, myself, callback);
  if (err) {
    console.log('Error');
  } else {
    console.log('Clone created');
  }
});
```

オライリーのサンプルでresolveを使うと処理が停止してしまう

表題の通り、MonacaでAndroidアプリを制作練習しているのですが、
事前にパソコンからAndroidのスマホにコピーしておいたサンプル画像を、アプリで一覧表示したいです。
内部ストレージの「Pictures」というディレクトリに入れたのですが、このディレクトリをMonacaアプリ側からどうやって参照したら良いか分からずにいます。

WindowsのPCにUSBでスマホを繋ぐと、このように見えます。
赤丸で囲った「Picture」にサンプル画像を数枚入れてあります。
![イメージ説明](b8b393b5c4c3004f8749811437e1d9df.png)
アプリのソースコード側で、Picturesを指定しておけば、その中の画像データが一覧化されるような仕組みにしたいと考えています。

[https://docs.monaca.io/ja/reference/cordova_9.0/file/](https://docs.monaca.io/ja/reference/cordova_9.0/file/)
しかし、この記事を読んでも今一つ理解できず、悩んでいます。

そもそも、スマホをPCに繋ぐと「内部ストレージ」と表示されるのに、Androidの定義としては「外部ストレージ」に該当すると思われ、混乱しています。
[https://akira-watson.com/android/kotlin/internal-storage.html](https://akira-watson.com/android/kotlin/internal-storage.html)


どなたか、Monacaから特定ディレクトリとその中のファイルを参照する方法をご存じの方がいらっしゃいましたら、どうかご教授のほど宜しくお願いいたします。

Monacaで、Androidのスマホの内部ストレージのPicture内に保存した画像データを一覧表示したい。

ブラウザからGoogleドライブAPIを使ってみようとおもったのですが、成功しません…。

Google Cloud Platform でAPIの有効化やAPIキーの作成、クライアントIDの作成をしたあと、
[Browser Quickstart](https://developers.google.com/drive/api/v3/quickstart/js#step_2_set_up_the_sample)のソースをコピーしてファイルを作成してみました。

ファイルを直接開いても、ローカルサーバーをたててそこからアクセスしようとしても、エラーがでてしまいます。
どうしたらよいでしょうか？

ブラウザで直接ファイルを開いて試そうとすると、
コンソールに
```
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').
```
と表示されます。

サーバーを建てないといけないのだと思い、VSCodeの拡張機能**Live Server**を使ってサーバーを建ててアクセスすると、
HTML Bodyに
```
{
  "error": "idpiframe_initialization_failed",
  "details": "Not a valid origin for the client: http://127.0.0.1:5500 has not been whitelisted for client ID 116487671093-04hqrug3troora8uddlb3gbfbg9qi1ru.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID."
}
```
と表示されます。

# 試したこと
- Google Cloud PlatformのクライアントIDの設定にある、
**承認済みの JavaScript 生成元**の項目で`http://localhost:◯◯◯◯`を指定しました。
- **OAuth 同意画面**の**Google API のスコープ**に`../auth/drive.file`を追加して、ソースの方を書きかえました。
- [こちらの質問](https://stackoverflow.com/questions/43964539/google-api-not-a-valid-origin-for-the-client-url-has-not-been-whitelisted-for)のトップ回答者の言う通りに
**Google Analytics API** と **Google+ API** を有効にしてプロジェクトを作り直しました。
上記を試しても、状況は変わりませんでした。


GoogleドライブAPIを使う方法をご存知の方、お助けください。


#ソース
```
<!DOCTYPE html>
<html>
  <head>
    <title>Drive API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Drive API Quickstart</p>

    
    <button id="authorize_button" style="display: none;">Authorize</button>
    <button id="signout_button" style="display: none;">Sign Out</button>

    <pre id="content" style="white-space: pre-wrap;"></pre>

    <script type="text/javascript">
      // Client ID and API key from the Developer Console
      var CLIENT_ID = '◯◯◯◯';
      var API_KEY = '◯◯◯◯';

      // Array of API discovery doc URLs for APIs used by the quickstart
      var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"];

      // Authorization scopes required by the API; multiple scopes can be
      // included, separated by spaces.
      var SCOPES = 'https://www.googleapis.com/auth/drive.file';

      var authorizeButton = document.getElementById('authorize_button');
      var signoutButton = document.getElementById('signout_button');

      /**
       *  On load, called to load the auth2 library and API client library.
       */
      function handleClientLoad() {
        gapi.load('client:auth2', initClient);
      }

      /**
       *  Initializes the API client library and sets up sign-in state
       *  listeners.
       */
      function initClient() {
        gapi.client.init({
          apiKey: API_KEY,
          clientId: CLIENT_ID,
          discoveryDocs: DISCOVERY_DOCS,
          scope: SCOPES
        }).then(function () {
          // Listen for sign-in state changes.
          gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

          // Handle the initial sign-in state.
          updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
          authorizeButton.onclick = handleAuthClick;
          signoutButton.onclick = handleSignoutClick;
        }, function(error) {
          appendPre(JSON.stringify(error, null, 2));
        });
      }

      /**
       *  Called when the signed in status changes, to update the UI
       *  appropriately. After a sign-in, the API is called.
       */
      function updateSigninStatus(isSignedIn) {
        if (isSignedIn) {
          authorizeButton.style.display = 'none';
          signoutButton.style.display = 'block';
          listFiles();
        } else {
          authorizeButton.style.display = 'block';
          signoutButton.style.display = 'none';
        }
      }

      /**
       *  Sign in the user upon button click.
       */
      function handleAuthClick(event) {
        gapi.auth2.getAuthInstance().signIn();
      }

      /**
       *  Sign out the user upon button click.
       */
      function handleSignoutClick(event) {
        gapi.auth2.getAuthInstance().signOut();
      }

      /**
       * Append a pre element to the body containing the given message
       * as its text node. Used to display the results of the API call.
       *
       * @param {string} message Text to be placed in pre element.
       */
      function appendPre(message) {
        var pre = document.getElementById('content');
        var textContent = document.createTextNode(message + '\n');
        pre.appendChild(textContent);
      }

      /**
       * Print files.
       */
      function listFiles() {
        gapi.client.drive.files.list({
          'pageSize': 10,
          'fields': "nextPageToken, files(id, name)"
        }).then(function(response) {
          appendPre('Files:');
          var files = response.result.files;
          if (files && files.length > 0) {
            for (var i = 0; i < files.length; i++) {
              var file = files[i];
              appendPre(file.name + ' (' + file.id + ')');
            }
          } else {
            appendPre('No files found.');
          }
        });
      }

    </script>

    <script async defer src="https://apis.google.com/js/api.js"
      onload="this.onload=function(){};handleClientLoad()"
      onreadystatechange="if (this.readyState === 'complete') this.onload()">
    </script>
  </body>
</html>
```

ブラウザでGoogleドライブAPIを使う方法

####発生している問題・エラーメッセージ 
html2canvasで、表をcanvasに変換した際に文字位置がズレる

####前提・環境
ブラウザ：Chrome
OS : Windows 10
※iOSのSafariで見た際は、文字位置はズレませんでした。

####該当のウェブページ・ソースコードのリンク
[ポチッと栄養表示](https://www.pochi.ml/)
[GitHubにあるソースコード](https://github.com/katayamahide/katayamahide.github.io)


####該当のソースコード(html2canvasの箇所)

```javascript
<script src="html2canvas.js"></script>
<script type="text/javascript">
    function clickBtn1() {
      html2canvas(document.getElementById("facts"), {}).then(function (canvas) {
        var result = document.getElementById("result");
        result.appendChild(canvas);
      });
    }
  </script>
```

####試したこと
CSSのmargin等を変えたりしましたが、ダメです。
宜しくお願い致します。

html2canvasでのcanvas出力時のズレ

# やりたいこと
Monacaプロジェクトでiframeを使い、外部サイトを表示する。

# 発生している問題
### 該当部コード
```
<template>
  <v-ons-page>
    <iframe src="***" width="100%" height="100%" frameborder="no" ></iframe>
  </v-ons-page>
</template>
```
上のように、iframeで指定したサイトが空白になり表示されていません。

config.xmlのwidget直下に`<allow-navigation href="*" />`と`<access origin="*"/>`の追加はしています。

また、カスタム版ではなく、ブラウザや通常のデバッガーでは問題なく表示させたいサイトが表示されます。

config.xmlファイルやプラグインなどに問題があるのでしょうか。
何か分かる方がいらっしゃいましたら、ご教授ください。
よろしくお願いします。

Monacaのカスタムビルドデバッガーでiframe要素が表示されない

### 分からないこと
題名の通り、typescriptとnode.js、webpackの関係性についてイマイチパッとしません。

自分なりに考えて以下のイラストを作ってみたのですが、図と以下の認識は間違っているでしょうか。

- typescriptで記述されたものがトランスパイルされてjsファイルになる
- jsファイルになることで、ブラウザがファイルを認識できるようになる
- 「サーバーとのやり取りをしない」ならば、node.jsを使用する必要はない
- node.jsを使用すると、フロントエンドとサーバー側のやり取りができるようになる（ユーザーからデータを受け取ってデータベースに保存するなど）
- 「ファイル同士の依存関係を自分たちで何とか解決できる」ならば、webpackを使用する必要はない
- webpackを使用すると、複数のjsファイルが依存関係を解決しつつ一つにまとめられる
- 「サーバーとのやり取りをしない」、「ファイル同士の依存関係を自分たちで何とか解決できる」ならば、node.jsもwebpackも使用する必要はない

![関係図](095839b0d27aad664cdebd043805f0c2.png)

ここは違う、こう理解した方が良い、付け加えると...等ありましたら、教えていただけると幸いです。

よろしくお願いいたします。

TypeScriptとNode.jsとwebpackの関係

### 実現させたい事
匿名会員でログイン時、acl設定を【全員：読み込み可】【会員：読み込み・削除可】に設定したいです。

### 試した事

```javascript
//匿名会員でログインするボタン
function jack_btn(){

      //ユーザーのセキュリティを設定 - 読み込みのみを許可
      var acl = new ncmb.Acl();
      acl.setPublicReadAccess(true);
      acl. setPublicWriteAccess(true);

    ncmb.User
      .loginAsAnonymous()
      .set("acl" , acl)
      .then(function(data){

            currentUser = ncmb.User.getCurrentUser();
            main_navigator.pushPage('Home_bar.html');
        })
        .catch(function(err){
            alert("予期せぬエラー");
        });
}



```

> TypeError: ncmb.User
> .loginAsAnonymous()
> .set is not a function.(In 'ncmb.User
> .loginAsAnonymous()
> .set("acl",acl)'

匿名会員自体aclパーミッションの編集はデバイス側でできないでしょうか？
ご回答よろしくお願いします。

ncmb:匿名会員のacl設定を変更したい

Googleカレンダーの通知の仕組みを組み込みたいです。
予定時間の5分前等にブラウザ上で通知を行いたいです。

参考になるサイト等ありますか？

Googleカレンダーの通知のしくみ

### 実現させたい事
BUTTONを押したときにlist-itemのtappableのタップアクションを無効にしたいです。


![イメージ説明](d1110ce2fdd2b560fd118d6d6934eb15.png)

### 概要
プラットフォーム：Onsen UI V2 JS Tabbar


### 該当のソースコード

```HTML
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <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'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>


    document.addEventListener('show', function(event) {
      var page = event.target;
      var titleElement = document.querySelector('#toolbar-title');

      if (page.matches('#first-page')) {
        titleElement.innerHTML = 'My app - Page 1';
      } else if (page.matches('#second-page')) {
        titleElement.innerHTML = 'My app - Page 2';
      }
    });

    if (ons.platform.isIPhoneX()) {
      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
    }
  </script>
  <script src="test.js"></script>
</head>
<body>
  <ons-page>
    <ons-toolbar>
      <div class="center" id="toolbar-title"></div>
    </ons-toolbar>
    <ons-tabbar position="auto">
      <ons-tab label="Tab 1" page="tab1.html" active>
      </ons-tab>
      <ons-tab label="Tab 2" page="tab2.html">
      </ons-tab>
    </ons-tabbar>
  </ons-page>

  <ons-template id="tab1.html">
    <ons-page id="first-page">

        <ul class="list" id="ons-list"></ul>
      
    </ons-page>
  </ons-template>

  <ons-template id="tab2.html">
    <ons-page id="second-page">
      <p style="text-align: center;">
        This is the second page.
      </p>
    </ons-page>
  </ons-template>
</body>
</html>
```

```javascript
// test.js
ons.ready(function(){


var list = [];

for(var i = 1; i <= 90; i++){
  list.push(
    '<li id="item" class="list-item list-item--longdivider list-item--tappable" onclick="test();">' +

    '<div class="list-item__center">Item '+ i + '</div>' +
    '<div class="list-item__right"><button class="button" onclick="test2();">BUTTON</button></div>' +
    '</li> '
  )
}

document.getElementById('ons-list').innerHTML = list.join('');

});

function test(){
  ons.notification.toast('リストからタップ', { timeout: 1000, animation: 'fall' }) ;
}

function test2(){
  event.stopPropagation();
  ons.notification.toast('リスト内のボタンからタップ', { timeout: 1000, animation: 'fall' }) ;
}
```

Onsen UI : list-item内のbuttonを押したときにtappableを無効にしたい

### 前提・実現したいこと
否定後読みが使えない条件下で以下ソースの文字列から特定の場所にある`user`だけを置換したいと考えています。（コメント部分は本来無い物としてお考えいただけましたら幸いです）

JavaScriptを使って置換することは可能でしょうか？

ご教示いただけましたら幸いです。

### 該当のソースコード

```js
const text = `
  ユーザー名：user メールアドレス：test@mailcom // この行の`user`は置換する
  <img alt="user" src="user.jpg" /> // この行は置換しない
  <a href="/user.html" title="user">user</a> // この行のaタグで挟まれている`user`だけを置換する（href, titleの`user`は置換しない）

  ユーザー名：user1 メールアドレス：test1@mailcom // この行の`user`だけを置換する（`1`は残したい）
  <img alt="user1" src="user1.jpg" /> // この行は置換しない
  <a href="/user1.html" title="user1">user1</a> // この行のaタグで挟まれている`user`だけを置換する（`1`は残し、href, titleの`user`は置換しない）
`;
```

### 試したこと
否定後読みを使い正規表現で置換しようと考えていましたが、FireFoxで利用できなかった。

JavaScriptの正規表現について

すみません教えてください。
以下、配列の元となるデータがあります。

【加工前】
```javascript
const data = {
  group: [
    {
      uid:1001,
      list: [
        { sensor_group_id: 117},
        { sensor_group_id: 118}
      ]
    },
    {
      uid:1002,
      list: [
      　{ sensor_group_id: 119},
    　]
    },
    {
      uid:1003,
      list: [
      　{ sensor_group_id: 116},
      　{ sensor_group_id: 117},
    　]
    },
  ]
}
```

この配列を以下のような配列に作り直すためにはどのように実装すればよいでしょうか？

【加工後】
```javascript
const result = [
  {
    sensor_group_id:116,
    list:[1003]
  },
  {
    sensor_group_id:117,
    list:[1001,1003]
  },
  {
    sensor_group_id:118,
    list:[1001]
  },
  {
    sensor_group_id:119,
    list:[119]
  },
]
```

実装サンプルは以下です。

[Stackblitz - Demo](https://stackblitz.com/edit/svelte-yzcuqk?file=index.js)

mapを使って実装しようとしましたがコード量が非常に膨大になってしまうので
何か良い方法がありましたらご教示ください。

求める配列を作りたいです

以下のようなタグをhtmlに埋め込み、

```ここに言語を入力
<a href="" 
onclick="gtag('event', 'click', {'event_category': 'category_name','event_label': 'label_name'});">
テキスト
</a>
```

GTM側では以下のようにタグ＆トリガーを設定をしています（他には、何も設定していません）。
![イメージ説明](1bfa3a8ec2233a911bf65834fce8f7ef.png)

この状態で、イベントがまったく測定されないのですが、何が原因か分かりますでしょうか？

ご教授いただければ幸いです。
よろしくお願い致します。

GTMでイベントトラッキングをする方法

monacaでadmobをインストールする方法は、２つで
admob-proとadmob-freeがありますが、
admob-proは別質問(https://teratail.com/questions/263838)で投稿したとおり、
うまく行かなかったので、
admob-freeについても挑戦してたのですが、
こちらもandroidのmonacaデバッガー(localKit経由)を使って実機で以下のようなエラーとなりました。
(クラウドIDEのプレビューでも同様のエラーです。)

##エラーメッセージ
```
Uncaught ReferenceError: admob is not defined
```

##やったこと
サンプルダウンロード
https://gitlab.com/ratson/cordova-admob-sdk

クラウドIDEから以下プラグイン追加
```
cordova-plugin-admob-free
```

以下にファイルが有ることを確認
```
node_modules/cordova-plugin-admob-free/www/admob.js
src/ios/GoogleMobileAds.framework
```

package.jsonに以下が記載されてることを確認
```
    "cordova": {
        "id": "cordova-plugin-admob-free",
        "platforms": [
            "android",
            "ios"
        ]
    },
```

cordova-plugin-admob-freeプラグインから設定に以下のように、自分のadmob管理ページから発行したappIdを入れる
```
ADMOB_APP_ID=ca-app-pub-~~~~~~~~~~~~~~~~~~~~~~~~
```

###indexとjsは以下githubのexample/basicのサンプルを使ってます。
https://github.com/ratson/cordova-plugin-admob-free/tree/master/examples/basic/www

index.html
```
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
  <title>Hello AdMob</title>
</head>
<body>
  <h1>Hello AdMob</h1>
  <button id="showAd">Show me some AD</button>
  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</body>
</html>
```

js/index.js (以下のca-app-pubはadmobサンプルのもの)
```
var admobid = {}
if (/(android)/i.test(navigator.userAgent)) {  // for android & amazon-fireos
  admobid = {
    banner: 'ca-app-pub-3940256099942544/6300978111',
    interstitial: 'ca-app-pub-3940256099942544/1033173712',
  }
} else if (/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {  // for ios
  admobid = {
    banner: 'ca-app-pub-3940256099942544/2934735716',
    interstitial: 'ca-app-pub-3940256099942544/4411468910',
  }
}

document.addEventListener('deviceready', function() {
  admob.banner.config({
    id: admobid.banner,
    isTesting: true,
    autoShow: true,
  })
  admob.banner.prepare()

  admob.interstitial.config({
    id: admobid.interstitial,
    isTesting: true,
    autoShow: false,
  })
  admob.interstitial.prepare()

  document.getElementById('showAd').disabled = true
  document.getElementById('showAd').onclick = function() {
    admob.interstitial.show()
  }

}, false)

document.addEventListener('admob.banner.events.LOAD_FAIL', function(event) {
  console.log(event)
})

document.addEventListener('admob.interstitial.events.LOAD_FAIL', function(event) {
  console.log(event)
})

document.addEventListener('admob.interstitial.events.LOAD', function(event) {
  console.log(event)
  document.getElementById('showAd').disabled = false
})

document.addEventListener('admob.interstitial.events.CLOSE', function(event) {
  console.log(event)

  admob.interstitial.prepare()
})
```

monacaでadmob(admob-free)表示したい。

### 前提・実現したいこと

monacaでios,android向けにアプリを作ろうと計画しております。
ユーザのローカルに前回ダウンロードさせたコンテンツなどを保存するため、
ローカルデータ保存に、realmを使用したいと思っております。
参考になるURLなどを「monaca realm 実装」で検索したものの、良いサイトが見つからず困っています。

そもそもローカルデータ保存にrealmを使うことがまちがっているのでしょうか？

初心者で申し訳ございません。お助けください。


追記★
https://realm.io/jp/docs/javascript/latest/
こちらのnode.jsで、monacaとフレームワークを指定して、実装可能でしょうか？

monacaでローカルデータ保存にrealmを使う方法（参考URLなど）教えてください。

### 発生している問題
自分で作ったポートフォリオサイトをWebpackを使ってバンドルしていたのですがJavaScriptのファイルをバンドルしようとしたらTopページのスライドショーが機能しなくなりました。

Webpackにてcssのバンドル、sassのバンドル、img画像のバンドルと進めていたのですが最後にJavaScriptのファイルをバンドルたらスライドショーの機能だけエラーが出て動かなくなってしまいました。


### 発生している問題・エラーメッセージ

```
Uncaught ReferenceError: myChange is not defined
    at <anonymous>:1:1
```

### 該当のソースコード
```Javascript
myImage = new Array(
  "../images/top-view1.jpg",
  "../images/top-view2.jpg",
  "../images/top-view3.jpg"
);
myNowCnt = -1;
myflg = 0;
function myChange() {
  myNowCnt = (myNowCnt < myImage.length - 1) ? myNowCnt + 1 : 0;
  myflg = (myflg == 0) ? 1 : 0;
  if (myflg == 0) {
    document.getElementById("idshow1").src = myImage[myNowCnt];
    document.getElementById("idshow1").className = "fadein";
    document.getElementById("idshow2").className = "fadeout";
  } else {
    document.getElementById("idshow2").src = myImage[myNowCnt];
    document.getElementById("idshow1").className = "fadeout";
    document.getElementById("idshow2").className = "fadein";
  }
  setTimeout("myChange()", 2500);
}
myChange();
```
```HTML
 <div class="top-view-img">
  <img style="position: absolute;" id="idshow1" class="fadeout" src="images/top-view1.jpg"
       alt="top-viewの写真1">
  <img id="idshow2" class="fadein" src="images/top-view2.jpg" alt="top-viewの写真2">
 </div>

```

```CSS
.top-view-img {
  img {
    width: 100%;
    height: 100vh;
  }
}

.fadeout {
  opacity: 0;
  transition: 2s ease-in-out;
}
.fadein {
  opacity: 1;
  transition: 2s ease-in-out;
}
```

![ディレクトリ構造](020a3c6f1b6dca3f1ee19b8d0c32c3f9.png)
### 試したこと
久しぶりにWebpackを使うので保険として元のデータを複製して挑戦しているのですが元のデータでは動いているのでコードに問題はないと考え、Webpackでバンドルする際にdistフォルダやsrcフォルダを作成したので画像のパスの記載を変える必要があると思い正しく記載したのですが変わらずエラーが出てしまいます。

###実現したいこと
JavaScriptのファイルをバンドルしてtop-viewのフェードイン・フェードアウトスライドショーを元のように動かせるようにしたい。

何かアドバイスあればお願いいたします。