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

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

ただいまの
回答率

87.37%

日本語の言葉の意味がわかりません

解決済

回答 2

投稿 編集

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

Uncaught TypeError: Cannot read property 'getContext' of undefined

翻訳結果
捕捉されないTypeError:未定義のプロパティ 'getContext'を読み込めません

これはgetContextを定義したら読み込めますよということですか?

この定義の仕方はどうすればいいですか?

<template>
  <div class="qrReader">
    <qrcode-reader @init="onInit" @decode="onDecode"></qrcode-reader>
  </div>
</template>

<script lang="ts">

import Vue from 'vue';
import { AccountHttp, MosaicHttp, NamespaceHttp, MosaicService, Address, PublicAccount, PlainMessage, TransactionHttp,
        SimpleWallet, Password, NetworkType, NetworkCurrencyMosaic, AggregateTransaction, Account, TransferTransaction, Deadline } from 'nem2-sdk';
import Nem2Client from '../libs/Nem2Client';
import settingModel from '@/libs/settingModel';
import { QrcodeReader } from 'vue-qrcode-reader';

export default {
  components: { QrcodeReader },
  name: "qrReader",
  data: () => ({
    nem: new settingModel(),
    qrJson: '',
    isLoading: false,
    rules: {
      senderAddrLimit: (value: string) => (value && (value.length === 46 || value.length === 40)) || '送金先アドレス(-除く)は40文字です。',
      senderAddrInput: (value: string) => {
        const pattern = /^[a-zA-Z0-9-]+$/
        return pattern.test(value) || '送金先の入力が不正です'
      },
      amountLimit: (value:number) => (value >= 0) || '数量を入力してください',
      amountInput: (value:string) => {
        const pattern = /^[0-9.]+$/
        return (pattern.test(value) && !isNaN(Number(value))) || '数字の入力が不正です'
      },
      messageRules: (value:string) => (value.length <= 1024) || 'メッセージの最大文字数が超えています。'
    }
  }),
  methods: {
    async onInit (promise: any) {
      // show loading indicator
      try {
        await promise
        // successfully initialized
      } catch (error) {
        if (error.name === 'NotAllowedError') {
          // user denied camera access permisson
        } else if (error.name === 'NotFoundError') {
          // no suitable camera device installed
        } else if (error.name === 'NotSupportedError') {
          // page is not served over HTTPS (or localhost)
        } else if (error.name === 'NotReadableError') {
          // maybe camera is already in use
        } else if (error.name === 'OverconstrainedError') {
          // passed constraints don't match any camera. Did you requested the front camera although there is none?
        } else {
          // browser is probably lacking features (WebRTC, Canvas)
        }
      } finally {
        // hide loading indicator
      }
    },
    onDecode(content: any){
      // とりあえず呼ばれているか確認
      console.log(content)

      //
      if (content !== '') {
        let qrJson = JSON.parse(content)
        console.log(qrJson)
        console.log(qrJson.data.msg)
        this.sendMultisig(qrJson)
      }
      this.$router.push({name: "sendbutton"})
    },
    /**
     * 今現在マルチシグ送金を行いたいがよくわからないので一つずつ処理できればと思う
     *  */
    async sendMultisig(qrContent: any) {
      // 公開鍵を調べる
      const accountHttp = new AccountHttp('http://localhost:3000');
      const address = Address.createFromRawAddress('SD5DT3-CH4BLA-BL5HIM-EKP2TA-PUKF4N-Y3L5HR-IR54');

      accountHttp
          .getAccountInfo(address)
          .subscribe(accountInfo => console.log(accountInfo), err => console.error(err));

      // テストとしてアカウントの作成が行われるか試す
      // const account = Account.generateNewAccount(NetworkType.MIJIN_TEST);
      // console.log('Your new account address is:', account.address.pretty(), 'and its private key', account.privateKey);
      // 1個目
      // Your new account address is: SC7B5U-GMABRU-QC24YU-ME4JAW-GZBNKF-4AO6WQ-77FW
      // and its private key
      // 46E0D6466801F9202A227F67E86B0E4A6CC616833E9E1FD6A16BD98DCB21A87D

      // 2個目
      // Your new account address is: SCLIPO-74NVXP-MNHT6O-EB6PXH-SFMX7S-EN5HB5-VWIZ
      // and its private key
      // 3329530DA473FF9F57FEBCF6DFC96996F0726BA2131AD7B184DA5BB0C966160D

      // 3個目
      // Your new account address is: SAGIBM-SJUL2J-IUBQU6-3LVZJY-K75QUI-N6XA3Z-2DIL
      // and its private key
      // 32DCAFD970C64BC73433E0E9094B90F2F910E9A7EC493C9ABB79B79DF363E906

      // おそらくこの時点ではマルチシグに必要な変数定義のみが行われていると思う
      // const transactionHttp = new TransactionHttp( 'http://localhost:3000');

      // // 送信者の秘密鍵
      // const cosignatoryPrivateKey = process.env.COSIGNATORY_1_PRIVATE_KEY as string;
      // const cosignatoryAccount = Account.createFromPrivateKey(cosignatoryPrivateKey, NetworkType.MIJIN_TEST);

      // // マルチシグアカウントのパブリックキー
      // const multisigAccountPublicKey = process.env.MULTISIG_ACCOUNT_PUBLIC_KEY as string;
      // const multisigAccount = PublicAccount.createFromPublicKey(multisigAccountPublicKey, NetworkType.MIJIN_TEST);

      // // 受信者のアドレス
      // const recipientAddress = Address.createFromRawAddress('SD5DT3-CH4BLA-BL5HIM-EKP2TA-PUKF4N-Y3L5HR-IR54');

      // // 通常のトランザクションの作成
      // const transferTransaction = TransferTransaction.create(
      //   Deadline.create(),
      //   recipientAddress,
      //   [NetworkCurrencyMosaic.createRelative(10)],
      //   PlainMessage.create('sending 10 cat.currency'),
      //   NetworkType.MIJIN_TEST);

      // アグリゲートトランザクションの作成
      // const aggregateTransaction = AggregateTransaction.createComplete(
      //   Deadline.create(),
      //   [transferTransaction.toAggregate(multisigAccount),],
      //   NetworkType.MIJIN_TEST,
      //   []);

      // 多分これは連署者の署名の実装
      // const networkGenerationHash = process.env.NETWORK_GENERATION_HASH as string;
      // const signedTransaction = cosignatoryAccount.sign(networkGenerationHash);

      //transactionHttp
        //.announce(signedTransaction)
        //.subscribe(x => console.log(x), err => console.error(err));
      }
  },
};
</script>

<style>
.qrReader {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  width: 300px;/*幅*/
  height: 300px;/*高さ*/
  text-align: center;/*中央寄せ*/
  transition: .3s;/*滑らかな動きに*/
}
</style>

QRコードを読み込んだら別のページに戻る処理をしています。
そこでページ遷移はできているのですがそれとは引き換えにエラーがたくさん発生するようになっています

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • takasima20

    2019/07/21 10:00

    場合によります。とりあえず、エラーが出るコードを質問に追記してください。

    キャンセル

  • kazumasamatsumo

    2019/07/21 10:02

    コードを追加しました。
    そもそもここに書いた中にgetContextがないので???となっています

    キャンセル

  • takasima20

    2019/07/21 10:07

    できれば、どこでエラーが出てるかもわかるといいとおもいます。

    キャンセル

  • kazumasamatsumo

    2019/07/21 10:10

    ありがとうございます!!エラーが発生するタイミング等記載させていただきました!

    キャンセル

回答 2

checkベストアンサー

+2

foo.getContext() みたいな処理をする際に foo が undefined のケースで出るエラーです。こんな感じで同じエラーを出せます。

> let foo = undefined
undefined
> foo.getContext
TypeError: Cannot read property 'getContext' of undefined

追記:
getContext なんてそもそも書いてないっていう件ですが、ライブラリ内部で起こってるエラーっぽいですね。
github の vue-qrcode-reader のリポジトリの issue にそれっぽいのを見つけたのでリンクしておきます。
https://github.com/gruhn/vue-qrcode-reader/issues/85#issuecomment-483122371

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/07/21 12:07

    ありがとうございます!!

    キャンセル

  • 2019/07/21 18:53

    ありがとうございます!!qrcode-readerの使い方自体が間違っていました!!本当にありがとうございます!!
    https://gruhn.github.io/vue-qrcode-reader/demos/DecodeAll.html

    キャンセル

  • 2019/07/21 20:58

    おめでとうございます!

    キャンセル

-7

getContextは定義されていません。
という方が理解しやすいかと。

getContextというのはなにをするモノなんでしょうか。
そのように実装すればいいと言えばそんでいいんですが、問題はそこじゃないような気がします

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/07/21 10:04

    getContextが何なのかコードを検索かけているのですがまだ見つかりません

    キャンセル

  • 2019/07/21 10:12

    わけのわからないコードをいくらいじったところでわけがわからないのはかわりません。
    身に過ぎたことやあっさりやめて、コードを理解することに努めましょう

    キャンセル

  • 2019/07/21 10:16

    はーいわかりました!

    キャンセル

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

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

関連した質問

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