console出力付きでプログラムを実行する方法



  • プログラムメニューでhtmlファイルを選択し「保存&開く」ボタンをクリックすると、フレームがポップアップしてプログラムが実行され、フレームの下部にconsole出力やデバッグ情報が出ます。
    「ツール > 新しいタブで開く」ではconsole出力やデバッグ情報を表示する部分がないようです。

    質問1:新しいタブで開く場合にも、下部の欄を表示させる方法はあるでしょうか。

    質問2:obnizのサイト以外にhtmlファイルを置いて(例えばPC内にローカル保存)、そのhtmlファイルをブラウザで開いて実行するときに下部の欄を付けることは可能でしょうか。


  • administrators

    @FUKUI-SHINGO さん

    [保存&開く]は開発時の利用を想定しており,[新しいタブで開く]は開発が終わって他人に見せたりするときの利用を想定しています.

    そのため,[保存&開く]では常にデバッグ情報が見えるようになっており,[新しいタブで開く]では見えないようになっています.

    質問1:新しいタブで開く場合にも、下部の欄を表示させる方法はあるでしょうか。

    各ブラウザの開発者ツールを使うことで,console出力やデバッグ情報を見ることができます.

    各ブラウザでの開発者ツールの開き方はこちらを参照ください
    https://eng-entrance.com/javascript-display-error

    質問2:obnizのサイト以外にhtmlファイルを置いて(例えばPC内にローカル保存)、そのhtmlファイルをブラウザで開いて実行するときに下部の欄を付けることは可能でしょうか。

    質問1と同様に,開発者ツールを使うことで見ることができます.



  • ご回答いただきありがとうございます。
    開発者ツールを使わなくて済む方法があればいいなと思って質問しました。

    ハンズオンで、サンプルプログラムを順番に試してもらう場面を想定しています。参加者が使うブラウザは様々なので、ブラウザの開発者画面を開いてもらうのはちょっと大変です。プログラムの実行画面の下にデバッグ出力が自動的に出ると、ブラウザによらず画面が統一できるので、説明も楽になりますし説明資料を作るのも楽になります。

    もし、ハンズオンで使いやすい方法があれば教えていただけると助かります。「あれば」で結構です。


  • administrators

    もしそのサンプルプログラムが自由に変更できるものであれば,
    こちらのようなライブラリを入れることでhtml上でconsole.logを見ることができます.

    https://github.com/bahmutov/console-log-div

    自由に改変できない場合は,[保存&開く]で見ていただく以外は開発者ツールで頑張るしか無いかなと思います.



  • 情報ありがとうございます。
    console-log-divを試してみます。

    プログラムは変更しないで単に実行してもらうだけならobniz cloudでできることに今気がついたので、ハンズオンはそれで最低限なんとかなりそうです。

    ・私の公開ページを開いてもらう。 https://obniz.io/users/xxx
    ・「開く」ボタンではなく、ファイル名のリンクをクリックしてもらう。
    ・開発画面が開くのでそこで「保存&開く」ボタンをクリックしてもらう
    ・実行はできるが変更はできない

    ハンズオンの冒頭にサンプルプログラム一式をダウンロードしてもらい、それを実行・改造してもらうという手順を考えていましたが、その方法は将来の課題にしようと思います。


 

Recent Projects

  • @nak435 ありがとうございます。
    接続は3.3vのgnd以外同じでした。
    エラーはそのせいかもしれませんが、しかし電気的にはgndを繋がない場合3.3vとしてうまく供給できないはずなのでそこが不思議です。

    教えていただいたプログラムの部分を修正して試してみたいと思います。
    また少し時間がかかりそうなのですが、早めに試したいと思います。

    引き続きよろしくお願い致します。

    read more
  • @Yuki-Sato さん、
    まずは、ピン接続だけ確認してください。

    i2cエラーは、私の方でもう少し調べてみます。

    read more
  • @Yuki-Sato さん

    vccに3.3v、それ以外はobnizの1-5まで直接接続で合っていますでしょうか。

    その通りで合ってます。Flick Hatはいつもそれで動かしていますし、お借りしたLargeもその接続で動作しました。(その後、6-7も接続してLEDの確認もしましたが)

    まったく動かない訳ではないようなので、接続の問題ではない気もしますが、前回のときより前進しているでしょうか? 同じでしょうか?
    ただ、私の場合は、書き込み(i2c.write)がエラーになった記憶が無いです(忘れているだけ?)

    3.3vは外から取っていると思いますが、外からのgndはどうしていますか?
    私の場合は外からのgndを接続するとうまく動作しなかったので、外からは3.3vの1線だけ接続しています。(私の知識では、gndと対でなければ+3.3Vにならないと思うのですが、接続してしまうとなぜか動きませんでした。)

    ↑ここまでで佐藤さんと私でpin接続が同じであれば、FlickHat.jsのstart()内の2個所のi2c.writeを削除して試してもらえませんか? このwriteは無くても動作しますので。もしくは下記2行が不要かも知れません。writeを残して、この2行を削除して試していただけますか。

    73 await this.polling(); 74 await this.obniz.wait(200);

    追伸;

    また、まれですが26バイトの読み取りに失敗することもあります。

    これは同じでエラーになることがあります。どこかの制御に問題があるのでしょうか?

    read more
  • @nak435 こんにちは。

    flick-demo.htmlを使って動作確認しています。
    接続の確認なのですが、vccに3.3v、それ以外はobnizの1-5まで直接接続で合っていますでしょうか。

    なかなかうまく通信できないでいます。
    エラーが出ず何度かpollingできることもあるのですが、どこかのタイミングでエラーとなってしまいます。

    最初の段階は比較的うまくいって、132バイトを受信できています。

    [Log] Obniz: {"i2c0":{"mode":"master","address":66,"data":[132,0,0,131,170,99,128,230,19,100,21,32,49,46,51,46,49,52,59,112,58,72,105,108,108,115,116,97,114,86,48,49,59,120,58,32,32,32,32,32,32,32,32,59,68,83,80,58,73,68,57,48,48,48,114,50,57,54,51,59,105,58,66,59,102,58,50,50,53,48,48,59,110,77,115,103,59,115,58,82,101,108,95,49,95,51,95,112,114,101,114,49,55,56,52,58,78,77,59,0,0,0,0,0,0,0,0,0,0,0,0,0,0,14,0,0,85,170,144,101,32,32,128,15,255,255,255,255,225,242,0,0]}} (logger.min.js, line 1)

    ただ、その後に以下のような書き込みを行うところで書き込めずエラーとなることが多いです。

    [Log] Obniz: send: [{"i2c0":{"address":66,"data":[16,0,0,162,161,0,0,0,31,0,0,0,255,255,255,255]}}] (logger.min.js, line 1)

    また、まれですが26バイトの読み取りに失敗することもあります。

    接続方法が違うか、Flick Largeだと良くないのかなと思っています。
    接続方法について、合っているか教えていただけますでしょうか。よろしくお願い致します。

    read more