Help us understand the problem. What is going on with this article?

『Runstant』作りました! 思いたったらすぐ開発, プログラミングに革命を...

More than 3 years have passed since last update.

こんなん作りました.

Runstant

Runstant

Runstant って?

ログイン不要でアクセスした瞬間からプログラミングを始められる
エディタ & プレビューツールです.

名前は, run + instant からの造語で,
インスタントラーメンのように一瞬でコーディングできて気軽に実行できるよって意味で名づけました.

runstant-about.png

特徴

instantly code

ログインは不要! 即座にコーディングを始めることができます.
Runstant は, ブラウザ上で高速に動作するエディタ&プレビューツールです.
コードのハイライトや補完, オートインデント機能, vim や Emacs 対応といったコーディングに必要な機能をデフォルトで完備しています.

instantly run

コードを保存してみてください. 今までにない速度で実行結果を確認できます.
サーバーを介さず, URL に情報を保存することにより高速な保存, 実行を実現しています.
また, コンソール画面も使えるのでデバッグも簡単に行うことが出来ます.

instantly share

完成したらツイッターやフェイスブックでシェアして自慢しましょう.
URL に情報を保存しているので, 直接 URL をコピーしてシェアするだけで, すべての人があなたと同じ実行結果を共有することができます.
また, iframe 化してページに実行結果を埋め込むこともできるので, ブログなどに貼り付けて多くの人に見てもらうことができます.

使い方

実際に使っているとこをキャプチャしてアップしたのでよかったら見てください
Usage - Runstant (動画)

runstant.png

Flow

  1. Runstant を開く
  2. 適当にコードを書く
  3. ヘッダーの再生ボタンを押すか, ⌘+S を押す
  4. (情報が URL に保存され, 実行結果がプレビューに反映される)
  5. console の内容も出力されます!
  6. ちゃんとエラーも出ます!!
  7. Canvas で適当にコードを書いてみましょう♪
  8. Project Setting でタイトルと詳細を編集
  9. ヘッダーのシェアボタンをクリック
  10. (ショートURLとかが表示される)
  11. コピーしたり, ツイッターなどでシェア

様々な言語をサポート

Runstant は, デフォルトで CSS Meta Language や altJS をサポートしています.
画面右上の設定ボタン(歯車)を押すと, 設定画面が出てきます.
画面右側の項目で html, style, script それぞれ言語切替できます.

  • html ... html/jade/markdown
  • style ... css/less/sass/stylus
  • script ... javascript/coffee/typescript/es6

setting

また, 簡単なテンプレートを用意したので
下記のリンクから Runstant を開けばその場からその言語で開発をすることができます.

テンプレート

Runstant はとても柔軟な作りになっているので,
様々なライブラリを簡単に導入することができます.

いくつかライブラリの使用例を作ってみたので, よかったら遊んでみてください.

運営

@phi_jp が開発, 運営しております.
要望などありましたら, twittergitter などで気軽にご連絡下さい.

開発経緯(蛇足)

常日頃からプログラミングはとてもおもしろいものなのに,
開発環境構築のハードルの高さや, 手軽に試してシェアする環境がないことをもどかしく感じていました.

そこで以前, 『ログイン不要! 気軽にプログラミングを始められるWebエディタ『runstant』作りました』 という
エントリーを書かせていただき, Runstant というサービスをリリースしました.

非常に好評で, 様々な要望や教育機関で使いたいという問い合わせを多数いただきました.

ただ, 3日で作ったので色々と荒削りで気になる箇所が多々あり,
このまま拡張していってもこの先躓くだろうなと思いがありました.

色々考えた結果, 全リファクタして作りなおしたのが今回リリースした新たな『Runstant』です.

主に変わったのは内部的な実装部分なので, 基本的な使い方は前の Runstant と同じです.

それぞれのウィンドウを最大化したり,レイアウトの調整などを行いました.
デザインにはマテリアルデザインを(素人ながら...)採用してたりもします.

今は, Runstant にログイン機能やコード管理機能をつけた
正式版 『Runstant』 を開発をしております.

個人で開発しているため, リリースはいつになるかわかりませんが,
楽しみにしていてください.

また, 日本からプログラミングを盛り上げていきたい, 広めていきたいという思いに
共感してくださる方はお気軽に phi1618jp@gmail.com までご連絡ください.

phi
Game Programmer. phina.js 作ってます♪
http://phiary.me
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした