LoginSignup
356

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-07-23

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 ともども今後共よろしくお願いします.

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
356