気軽にプログラミングを始められるWebエディタ『runstant』作りました

More than 3 years have passed since last update.

7月19日. 久しぶりの3連休.

予定はぎっしりだった.

だが神からのお告げがあった. なんか作れと.

気づいたらオレの指は Macbook Air の薄いキーボードの上だった.

ってことで連休中にちょっとしたツール作りました.

気軽にプログラミングを始められるWebエディタです.

名前は runstant.

run + instant の略で, インスタントラーメンのように一瞬で気軽に実行できるよって意味です.

ログイン不要, サーバー通信なしで一瞬で

プログラミングを始めることができます!!

一応, tmlib.js 公式エディタ的な

位置づけなのでデフォルトで tmlib.js のサンプルが入ってます.

とりあえず触ってみてください -> こちら

runstant-black.png


特徴


  • ログインの必要ないよ

  • 状態を hash で保存するのでサーバー通信しないよ

  • html/css/javascript が書けるよ

  • ちょっと工夫すれば coffeescript や typescript とかも書けるよ

  • すぐに実行して確認できるよ

  • タイトルと詳細も設定できるよ

  • share ボタン押せば短縮URL取得したり tweet, facebook シェアしたりできるよ

  • ブラウザの履歴に全部残るから保存忘れの心配もないしバージョン管理とか知らずにできてるよ


使い方


  1. 右側にコードを書く

  2. save ボタン(Command+S) を押す

  3. 左側に実行画面が表示されます

  4. URL にコード情報が保存されます

  5. share ボタンを押してみんなにシェアしよう!!


テンプレート


運営

@phi_jp が開発, 運営してます.

要望などありましたらご連絡ください.


技術的なお話(蛇足)

とにかくサーバーを使わないってことにこだわりました.

保存は Object を JSON.stringify して, それを zip 圧縮して url の hash に

ぶちこむという荒業使ってますw

なのでサーバー通信せずに全ての情報を保存しています.

我ながら良い方法思いついたなと自画自賛^^

あと, download に関しても a タグの href に, 編集したコードを base64 に変換したものを

入れておくことでローカルで完結するダウンロード機能を実装しました.

他にも share ボタンは, あえてページ内でやるのではなく url でそれぞれの

シェアページに飛ばすようにすることで通信量を減らしました.(勝手に iframe 作られたりするの好きじゃないので...)

pushState, popState 使ってたり, ace ネタとかもかなり溜まったりしてるので,

近々それぞれ技術エントリーでも書こうと思います.

なんか久々に家でがっつりプログラミングしました.

やっぱり自分が欲しいもの作るのが一番ですね♪

runstant, tmlib.js ともども今後共よろしくお願いします.