Document
Everything about obniz

Online Html Editor

1つのobnizに1つずつの自由なhtml

今すぐにプログラム&実行

あなたがすぐにプログラムを始められるように、 1つのobnizに1つずつWebサイトを用意しました。 そのサイトのhtmlはあなたが自由に編集できます。 プログラム画面でobnizの番号を入れることで開いて編集できます。 このプログラム画面で書いたhtmlはそのままWebサイトとして誰からでも開くことが出来ます。 プログラムしたらurlを友達に送ってびっくりさせましょう。

url

あなたのobnizのプログラムページは

https://obniz.io/program

で、自分のobniz idを入れたときに開かれます。 例えば、obniz idが1234-5678ならば

https://obniz.io/program?obniz_id=1234-5678

となります。

そしてこのプログラム画面で編集したhtmlはページの中でiFrameとして開くことが出来ます。 もちろん1つのWebページとして開くことも出来ます。 その時のurlは

https://obniz.io/obniz/1234-5678/program.html

です。 これを自分のスマホで開いたり、友達に教えることでいろいろな場所からobnizを使えます。

only

プログラム画面ではhtmlのbodyタグの部分だけ編集できるようにしてあります。

本来書かなければならないjavascriptの取り込みstylesheetの適用などはhtmlを開く時に自動的に付け加えられます。 付け加えららた結果このようなhtmlになります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="author" content="CambrianRobotics Inc.">
    <meta name="format-detection" content="telephone=no,address=no,email=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://obniz.io/css/instant_html.css">
    <script src="https://obniz.io/sdk/obniz.js"></script>
    <script src="https://obniz.io/js/program_debug.js"></script>
  </head>
<body>
// your <body> ~ </body> will become here
</body>
</html>

この

// your <body> ~ </body> will become here

のところにあなたのプログラムが入ります。

program_debug.js

オンライン状態を表示したりなど開発に便利なように、 instant htmlではprogram_debug.jsを利用するようにしています。 上記htmlに含まれている

<script src="https://obniz.io/js/program_debug.js"></script>

これがそうです。

レッスンでも使用しています。 これを取り込むことで主に以下のことを行っています。

errorが起きた時にerrorをalert()で表示 これらが不要な場合はhtmlの中から無くしてしまっても大丈夫です。