Scribbler: JavaScriptコードをオンラインで実行しテストするためのノートブックツール

Scribbler は、ブラウザで直接動作する JavaScript ノートブックツールです。 開発者、エンジニア、研究者に、JavaScript コードの実験と実行のためのシンプルなオンラインインターフェースを提供します。 このツールはオープンソースで、登録ログイン不要で無料で使用できる。 このツールの主な特徴は、軽量でNode.jsやその他の複雑な環境のインストールを必要としないことです。ソースコードをダウンロードし、任意の静的ウェブサーバーに配置することで実行できます。 ユーザーは、Scribbler でコードやドキュメントを含むセルを作成したり、サードパーティのコードライブラリを動的にロードしたり、統合されたチャートライブラリを使用してデータを視覚化したりできる。 また、GitHub への直接接続にも対応しており、プロジェクトの保存、共有、公開が簡単に行える。

機能一覧

• バックエンド不要Node.js、npm、Pythonなどのバックエンド環境をインストールする必要はありません。
• 自由闊達ログインやサブスクリプションなしで自由に使えるオープンソースプロジェクト。
• インタラクティブ・セルユーザはJavaScriptコード、HTMLまたはMarkdownドキュメントを異なるセルに書くことができ、すぐにコードを実行して出力を見ることができます。
• データの可視化Plotly.jsのような組み込みのチャート・ライブラリを使えば、配列やその他のデータを簡単にチャートに変換できる。
• サードパーティ製ライブラリのサポートES6形式のサードパーティ製JavaScriptライブラリであれば、CDNから動的にロードして使用することができます。
• GitHubとの統合GitHubリポジトリにノートブックを直接プッシュしたり、そこからファイルをプルすることができます。
• 文書管理JSON形式のノートブックをダウンロードすることができます。.jsnb)ファイルに書き出すか、出力をHTMLファイルに書き出す。
• クロスデバイス利用インターフェイスはすっきりとしたデザインで、デスクトップやモバイルデバイスのモダンブラウザでもうまく機能します。

ヘルプの使用

Scribbler は、複雑な設定なしに JavaScript コードを実験する環境を提供する。 ユーザーはウェブページ上で直接コードを書いて実行し、すぐに結果を見ることができる。

はじめに

何もインストールする必要はなく、ブラウザから直接公式ホスティングアプリにアクセスするだけで始められる：

• オンライン申込アドレス: https://app.scribbler.live/

オフラインで使用したい場合や自分でデプロイしたい場合は、GitHubからソースコードをダウンロードし、任意の静的ウェブサーバー（例えばNginxや、GitHubにある npx serve コマンド)のディレクトリで実行される。

コア・インターフェースとオペレーション

Scribblerのインターフェースは、その核となるいくつかの「セル」で構成されている。

1. セル・タイプ
   • コード・セルこれはJavaScriptのコードを書いて実行するためのデフォルトのセルタイプです。
   • ドク・セルMarkdown、HTML、CSSのシンタックスをサポートしています。セル右上のメニューで切り替え可能。
2. 実行セル
   • コードセルを選択した後、セルメニューの プレー ボタンだ。
   • ショートカットの使用 Cmd+Enter (macOS）または Ctrl+Enter (Windows）も実行できる。
   • コードの出力はすぐにセルの下に表示される。
3. セル管理
   各セルの右上にあるメニューは、管理ツール一式を提供する：
   • 上に移動 ↑ / 下に移動 ↓.セルを並べ替える。
   • 新しいセル✛の追加現在のセルの下に新しいコードセルを作る。
   • 削除現在のセルを削除します。

コードを書いて実験する

Scribblerには、一般的な操作を簡素化する便利な組み込み関数がいくつかある。

• ディスプレイ出力を使うことができる。 scrib.show() 関数を使えば、変数やオブジェクト、あらゆる情報を出力することができる。 console.log() ラップトップ環境での結果発表により適している。

  scrib.show("Hello World");
  

• データの可視化Scribbler には、データを簡単にチャート化できる組み込みチャート化ライブラリがあります。例えば range() 関数は数字のシーケンスを生成し、次に .map(Math.sin) 歌で応える .plot() 正弦曲線をプロットすることができる。

  // 下面这行代码会画出一条正弦函数曲线
  range(0, 10, 0.01).map(Math.sin).plot();
  

• 外部ライブラリの読み込み: 実験のために、CDNから任意のJavaScriptライブラリをロードすることができます。例えば tensorflow.js をロードして機械学習推論を実行する。 brain.js 単純なニューラルネットワークを訓練する。

保存と共有

作品を保存したり、他の人と共有したりすることができます。

• 地域保全:
  • トップメニューから File -> Save (as .jsnb)ノートブック全体をJSONファイル（接尾辞が .jsnb). このファイルをScribblerにアップロードして開くことができます。
  • オプション Download (as .html) そして、出力を含むページ全体をHTMLファイルとして保存することができる。
• URLからの読み込み:
  もし .jsnb ファイルは、一般にアクセス可能なURL（GitHub Gistなど）にホストされており、ScribblerアプリのURLを # やファイルリンクから直接開くことができます。
  フォーマットhttps://app.scribbler.live/#<你的文件链接>
• GitHubに投稿する:
  Scribbler はノートブックを GitHub に直接公開する機能を提供しており、それには GitHub トークンが必要です。
  1. 出向く File -> Git.
  2. 画面の指示に従って GitHub アカウントを接続し、Token を入力してください。
  3. 接続に成功したら、画面上部メニューの Publish ボタンだ。
  4. システムは3つのリンクを生成する。編集を続けるためのノートブックへのリンク、スタンドアロン・アプリケーションとして実行するためのリンク、そして他のウェブページに埋め込むためのコード・スニペットである。

アプリケーションシナリオ

1. JavaScriptを学び、試す
   初心者のために、Scribbler は設定不要のサンドボックス環境を提供する。JavaScript 構文を練習したり、さまざまな関数やAPI をテストしたり、コードの実行結果を視覚的に理解したりできます。
2. 科学的コンピューティングとデータ可視化
   エンジニアや研究者は、複雑な数学計算、システムシミュレーション、データ分析に Scribbler を使用できます。ロード math.js をはじめとする科学計算ライブラリや、組み込みのチャート機能により、計算結果を簡単に視覚化することができる。
3. AIと機械学習
   をロードすることができます。 tensorflow.js もしかしたら brain.js AIライブラリーのような機械学習ライブラリーは、単純なモデルを訓練したり、推論のために事前に訓練されたモデルを実行するために使用することができます。 HTMLセルを組み込むことで、動的にインタラクティブなAIのユースケースを作成することも可能だ。
4. コードプロトタイピングとAPIテスト
   Scribbler は、小さなコードのロジックをすばやく検証したり、サードパーティAPI の戻り結果をテストしたりする場合に理想的なツールです。完全なプロジェクトを構築する必要はなく、セルに直接テストコードを記述するだけでよい。

品質保証

1. ScribblerとJSFiddle/Codepenの違いは何ですか？
   JSFiddleとCodepenは、主にHTML、CSS、JavaScriptで構成されるWebフロントエンドのコードスニペットのテストと共有に使用されます。HTML、CSS、JavaScriptで構成されるWebフロントエンドのコードのスニペット。
2. Scribblerを使うのにお金を払う必要がありますか？
   Scribblerはオープンソースのプロジェクトで、完全に無料であり、オンライン版を使うのにアカウントは必要ない。
3. Scribbler で npm パッケージを使用できますか？
   直接ではなく、Scribbler は Node.js や npm なしでブラウザ環境で動作するが、UMD または ES6 モジュール形式を提供する npm パッケージを CDN 経由でロードできる。
4. コードはどこで実行されるのか？それは安全か？
   すべてのコードはローカルブラウザで直接実行され、サーバには送信されません。 この純粋なクライアントサイドの動作モードは、コードとデータのプライバシーを保証します。