7月19日. 久しぶりの３連休.
予定はぎっしりだった.
だが神からのお告げがあった. なんか作れと.
気づいたらオレの指は Macbook Air の薄いキーボードの上だった.
ってことで連休中にちょっとしたツール作りました.
気軽にプログラミングを始められるWebエディタです.
名前は runstant.
run + instant の略で, インスタントラーメンのように一瞬で気軽に実行できるよって意味です.
ログイン不要, サーバー通信なしで一瞬で
プログラミングを始めることができます!!
一応, tmlib.js 公式エディタ的な
位置づけなのでデフォルトで tmlib.js のサンプルが入ってます.
とりあえず触ってみてください -> こちら
特徴
- ログインの必要ないよ
- 状態を hash で保存するのでサーバー通信しないよ
- html/css/javascript が書けるよ
- ちょっと工夫すれば coffeescript や typescript とかも書けるよ
- すぐに実行して確認できるよ
- タイトルと詳細も設定できるよ
- share ボタン押せば短縮URL取得したり tweet, facebook シェアしたりできるよ
- ブラウザの履歴に全部残るから保存忘れの心配もないしバージョン管理とか知らずにできてるよ
使い方
- 右側にコードを書く
-
saveボタン(Command+S) を押す - 左側に実行画面が表示されます
- URL にコード情報が保存されます
- share ボタンを押してみんなにシェアしよう!!
テンプレート
運営
@phi_jp が開発, 運営してます.
要望などありましたらご連絡ください.
技術的なお話(蛇足)
とにかくサーバーを使わないってことにこだわりました.
保存は Object を JSON.stringify して, それを zip 圧縮して url の hash に
ぶちこむという荒業使ってますw
なのでサーバー通信せずに全ての情報を保存しています.
我ながら良い方法思いついたなと自画自賛^^
あと, download に関しても a タグの href に, 編集したコードを base64 に変換したものを
入れておくことでローカルで完結するダウンロード機能を実装しました.
他にも share ボタンは, あえてページ内でやるのではなく url でそれぞれの
シェアページに飛ばすようにすることで通信量を減らしました.(勝手に iframe 作られたりするの好きじゃないので...)
pushState, popState 使ってたり, ace ネタとかもかなり溜まったりしてるので,
近々それぞれ技術エントリーでも書こうと思います.
なんか久々に家でがっつりプログラミングしました.
やっぱり自分が欲しいもの作るのが一番ですね♪