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 かしこまりました。よろしくお願いします。

    read more
  • @Yuki-Sato さん、

    外部の3.3vを使うとはいえ普通にvccやgndを供給して問題なくうごくのであれば、弊社での動作確認後Flick Hatのライブラリとして公開できればと思っているのですがいかがでしょう。

    今週末に確認しますので、お待ちください。

    read more
  • @nak435 時間がかかってすいません、

    なんとか3.3vをgndにつないでFlick Largeを動かしたかったのですが、うまく動かすことができなかったです。
    3.3vをgndを繋がずに接続するというのはライブラリで推奨して伝えることは難しいと思ってます。

    Flick LargeでなくFlick Hatの方で、外部の3.3vを使うとはいえ普通にvccやgndを供給して問題なくうごくのであれば、弊社での動作確認後Flick Hatのライブラリとして公開できればと思っているのですがいかがでしょう。

    よろしくお願い致します。

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

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

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

    read more