こんなん作りました.
Runstant って？
ログイン不要でアクセスした瞬間からプログラミングを始められる
エディタ & プレビューツールです.
名前は, run + instant からの造語で,
インスタントラーメンのように一瞬でコーディングできて気軽に実行できるよって意味で名づけました.
特徴
instantly code
ログインは不要! 即座にコーディングを始めることができます.
Runstant は, ブラウザ上で高速に動作するエディタ&プレビューツールです.
コードのハイライトや補完, オートインデント機能, vim や Emacs 対応といったコーディングに必要な機能をデフォルトで完備しています.
instantly run
コードを保存してみてください. 今までにない速度で実行結果を確認できます.
サーバーを介さず, URL に情報を保存することにより高速な保存, 実行を実現しています.
また, コンソール画面も使えるのでデバッグも簡単に行うことが出来ます.
instantly share
完成したらツイッターやフェイスブックでシェアして自慢しましょう.
URL に情報を保存しているので, 直接 URL をコピーしてシェアするだけで, すべての人があなたと同じ実行結果を共有することができます.
また, iframe 化してページに実行結果を埋め込むこともできるので, ブログなどに貼り付けて多くの人に見てもらうことができます.
使い方
実際に使っているとこをキャプチャしてアップしたのでよかったら見てください
Usage - Runstant (動画)
Flow
- Runstant を開く
- 適当にコードを書く
- ヘッダーの再生ボタンを押すか, ⌘+S を押す
- (情報が URL に保存され, 実行結果がプレビューに反映される)
- console の内容も出力されます!
- ちゃんとエラーも出ます!!
- Canvas で適当にコードを書いてみましょう♪
- Project Setting でタイトルと詳細を編集
- ヘッダーのシェアボタンをクリック
- (ショートURLとかが表示される)
- コピーしたり, ツイッターなどでシェア
様々な言語をサポート
Runstant は, デフォルトで CSS Meta Language や altJS をサポートしています.
画面右上の設定ボタン(歯車)を押すと, 設定画面が出てきます.
画面右側の項目で html, style, script それぞれ言語切替できます.
- html ... html/jade/markdown
- style ... css/less/sass/stylus
- script ... javascript/coffee/typescript/es6
また, 簡単なテンプレートを用意したので
下記のリンクから Runstant を開けばその場からその言語で開発をすることができます.
テンプレート
Runstant はとても柔軟な作りになっているので,
様々なライブラリを簡単に導入することができます.
いくつかライブラリの使用例を作ってみたので, よかったら遊んでみてください.
- Riot.js Template
- React Template
- AngularJS Template
- Bootstrap Template
- three.js Template
- tmlib.js Template
運営
@phi_jp が開発, 運営しております.
要望などありましたら, twitter や gitter などで気軽にご連絡下さい.
開発経緯(蛇足)
常日頃からプログラミングはとてもおもしろいものなのに,
開発環境構築のハードルの高さや, 手軽に試してシェアする環境がないことをもどかしく感じていました.
そこで以前, 『ログイン不要! 気軽にプログラミングを始められるWebエディタ『runstant』作りました』 という
エントリーを書かせていただき, Runstant というサービスをリリースしました.
非常に好評で, 様々な要望や教育機関で使いたいという問い合わせを多数いただきました.
ただ, ３日で作ったので色々と荒削りで気になる箇所が多々あり,
このまま拡張していってもこの先躓くだろうなと思いがありました.
色々考えた結果, 全リファクタして作りなおしたのが今回リリースした新たな『Runstant』です.
主に変わったのは内部的な実装部分なので, 基本的な使い方は前の Runstant と同じです.
それぞれのウィンドウを最大化したり,レイアウトの調整などを行いました.
デザインにはマテリアルデザインを(素人ながら...)採用してたりもします.
今は, Runstant にログイン機能やコード管理機能をつけた
正式版 『Runstant』 を開発をしております.
個人で開発しているため, リリースはいつになるかわかりませんが,
楽しみにしていてください.
また, 日本からプログラミングを盛り上げていきたい, 広めていきたいという思いに
共感してくださる方はお気軽に phi1618jp@gmail.com までご連絡ください.