質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Sublime Text

SublimeTextとは、オーストラリアのSublime HQ Pty Ltdが提供しているテキストエディターのことです。Mac/Windows/Linuxでの利用が可能で、柔軟にカスタマイズできたり、多くの言語に対応していくこともあり、海外や日本国内でも人気のあるエディターです。

Q&A

解決済

3回答

3650閲覧

ブラウザ上で動くテキストエディターとコンソール画面の実装

rnchs

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Sublime Text

SublimeTextとは、オーストラリアのSublime HQ Pty Ltdが提供しているテキストエディターのことです。Mac/Windows/Linuxでの利用が可能で、柔軟にカスタマイズできたり、多くの言語に対応していくこともあり、海外や日本国内でも人気のあるエディターです。

0グッド

1クリップ

投稿2018/11/04 16:03

実現したいこと

ブラウザ上で動くAtomやSublimeTextのようなものを実装したいと思ってます。
また、そのテキストに書いたコードの実行結果を同じページ上でを出せるコンソール画面も実装したいです。
イメージとしては、progateというサービスのブラウザ上でのテキストエディタとコンソール画面のようなものを作りたいと思っています。

そのようなことをブラウザ上で実現するとしたらどのようにすればいいのでしょうか?
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

参考にしたいページで使っているJavaScriptを読んで参考にする。

投稿2018/11/04 16:16

otn

総合スコア84421

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

既にやりたいものがあるのでしたらそれを見て動きを再現することになりますよね。
そこは公開されているのものであればサーバー側の処理があればリクエストとレスポンスから想像するしかありませんが、クライアント側(html,css,JavaScript)であればブラウザの開発ツールを駆使すれば覗けるものです。
既に回答があるようにそれを見て作りを追ってみてください。

「どのようにすればよいか」という質問はかなり抽象的です。
抽象的な質問には抽象的な回答しかつきません。
運よくそのサービスを作った人が回答者としていれば具体的な回答をもらえるかもしれませんが、そう簡単ではないと思います。
まずは自分なりにやってみてスタートラインに立ちましょう。
技術は必要かもしれませんが、再現するための方法はひとつではありませんし確立された唯一の方法などもありません。
自分なりのやりかたをみつけるのも成長のひとつの方法です。

投稿2018/11/04 19:51

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

ライブプレビュー程度からIDEまで、OSSで探せば既に有るのでは?

【WYSIWYGモードも備わったOSSのライブプレビュー機能付きMarkdownエディタ・「TOAST UI Editor」 | かちびと.net】
http://kachibito.net/useful-resource/toast-ui-editor

【executor editor - JavaScriptを実行できる埋め込み型エディタ MOONGIFT】
https://www.moongift.jp/2016/07/executor-editor-javascriptを実行できる埋め込み型エディタ/

【MarkdownやLessにも対応したオープンソースのjsFiddleライクな軽量コードテストツール・「Jotted」 | かちびと.net】
http://kachibito.net/useful-resource/jotted

【jsfiddleやJSBinのようにコードテストが出来るオープンソースソフトウェア・「CodeWich」 | かちびと.net】
http://kachibito.net/useful-resource/codewich

【PHP,Ruby,JS,HTML,CSSをブラウザ上で開発できるオープンソースIDEエディタ「ICEcoder」:phpspot開発日誌】
http://phpspot.org/blog/archives/2013/05/phprubyjshtmlcs.html

【CodePenっぽいコードプレビュー・管理のできるChrome拡張【Web Maker】 | Webクリエイターボックス】
https://www.webcreatorbox.com/webinfo/web-maker

投稿2018/11/07 10:31

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問