JavaScript
docker
docker-compose
jsnote

jsnoteとは

Imgur

JavaScriptはすごい言語だと思います. 何もインストールしなくてもブラウザさえあれば動のだから. そしてブラウザは世界中のPCに入っています. だからJavaScriptに無限の可能性を感じます.

JavaScriptに触れてみたい, JavaScriptのテストをしたい, JavaScriptでグラフ描きたいい, というときにすぐに使えるようなツールが欲しいと思いました.

ログインもインストールもいらない, でもローカルのファイルを読んだり, ファイルを出力したり, グラフ描いたり, 3Dグラフィック作れるjupyter notebookみたいなやつ欲しい.

それで作ったのが jsnoteです.
https://toyoharu-nishikawa.github.io/jsnote/

よかったら使ってみてください.
ご意見, ご感想, ご要望などありましたら,ご連絡ください.

Imgur

使い方

コード実行

コードを書いてrunボタン押すだけ. コンソール画面に結果が出力される.
コンソール画面はCtr+Shift+iもしくは右クリック押して"検証"選んだら出てくる.

描画

draw Boxにチェックを入れると, 描画エリアが出てくる.
id="draw"にPlotlyで描画すると, 描画エリアに描かれる.

ボタン

  • "run"
    エディタに書いたコードを実行する. 実行と同時にWEBブラウザのローカルストレージに保存される. 画面をリフレッシュしたり, ブラウザを閉じて再度立ち上げても内容が再現されるので, うっかりブラウザを閉じたりしても大丈夫.

  • "read"
    ローカルのファイルを読み込んで, テキストをエディタに反映する.

  • "save"
    エディタの内容を"jsnote.txt"として保存する. デフォルト設定では"ダウンロード"の中に保存される.

  • "import"
    複数のファイルを読み込んで, 内容やファイル名を変数"importTexts"の中に入れる. CSVファイルやJSONファイルを読み込んでデータ処理するときに使う.
    importTextsのプロパティ

    • importTexts[i].filename : filename
    • importTexts[i].barefilename : filename without extension
    • importTexts[i].ext : extension of file
    • importTexts[i].text : contents of file
  • "export"
    変数"exportText"に代入され文字列または文字列の配列を変数exportFileNameに代入された名前(デフォルトはjson_export.txt)で保存する.
    例:
    exportFileName ="test.txt"
    exportText = "welcome to jsnote" //before clicking the button of export
    or
    exportText = ["large string", "large string"] // useful for large data

  • "sample"
    サンプルコード

  • "register"
    プライベートなサンプルコードを登録してチーム, 同僚, 研究室の仲間とhow toを共有できる. よく使う書き方を登録して自分の備忘録として使うのもおすすめ.

  • "editor mode"
    エディタをvim, emacs, aceの3種類から選べる. 一度選ぶとローカルストレージに設定が保存される.

  • "font size"
    エディタのフォントの大きさを選べる.

  • "draw box"
    描画エリアを表示したり, 隠したりする. ここにグラフを書いたり, DOM操作を試したり, Threeの3D描画したりする.

    ショートカットキー

  • "Shift + Enter"
    "run"ボタンを押すのと同じ.

  • "Shift + Tab"
    draw boxにチェック入れたり, 外したりするのと同じ. 描画エリアが現れる.
    div要素id="drawArea"の中にdiv要素id="draw"がある.
    drawAreaやdrawに対して, 描画したり, DOM挿入して使う.

  • "Shift + Delete"

    エディタの中身を全削除する.

ローカルサーバ

ローカルサーバで動かす方法

方法 1 : Docker Hubのimageをダウンロード

Docker Hubからイメージを落としてきて, docker-composeで立ち上げる.

最短方法

git clone -b app https://github.com/Toyoharu-Nishikawa/jsnote/tree/app
cd jsnote
docker-compose up -d

もしくは, 以下のstep1 ~ step4
step1: jsnoteというディレクトリを作成してそこに移動する.

mkdir jsnote
cd jsnote

step2: sampleとlogのディレクトリをつくる.

mkdir sample
mkdir log

step3: docker-.compose.yaml をつくる

./jsnote
|-- sample/                   
|-- log/                   
|-- docker-compose.yaml
docker-compose.yaml
version: '2'
services:  
  api:
    image: toyohal24/jsnote_api
    restart: always
    volumes 
      - ./sample:/usr/share/nginx/html/sample/private
      - ./log:/var/log/node
  web:  
    image: toyohal24/jsnote
    restart: always
    ports:
      - "2555:80"
    volumes 
      - ./sample:/usr/share/nginx/html/sample/private
      - ./log:/var/log/nginx

step4: docker-composeでビルドする

docker-compose up -d
方法 2 : ソースをダウンロード
git clone https://github.com/Toyoharu-Nishikawa/jsnote.git
cd jsnote
docker-compose up -d

Docker Hub

Docker Hub

サンプルコード

jsnoteのregisterでコードを登録するとpublic/sample/private下にサンプルコードをがはいって, sample.jsonにそのことが書かれる.

public
|-- index.html
|-- scripts
|-- styles
|-- sample
  |-- public
  |  |--list.json
  |  |--JavaScript
  |  |  |-- READ_ME.js
  |  |  |-- HelloWorldExample.js
  |  |--plotly
  |  |   |-- HelloWorldExample.js
  |  |--svig
  |  |  |-- HelloWorldExample.js
  |--private
     |--sample.json
     |-- ReadMe.md
     |-- your private sample category 
  .
  .

WindowsやMacの場合, ポートフォワーディングで2555ポートを通したのち, ブラウザでlocalhost:255にアクセスするとプライベートなjsnoteに繋がる.

Lisence

MIT

GitHub

jsnoteのリポジトリ
https://github.com/Toyoharu-Nishikawa/jsnote