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

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

ただいまの
回答率

91.79%

  • JavaScript

    9498questions

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

  • Atom (テキストエディタ)

    263questions

  • sublimetext

    154questions

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

ブラウザ上でテキストエディタのようなものの実装

解決済

回答 3

投稿 2016/11/16 14:11 ・編集 2016/11/17 01:02

  • 評価
  • クリップ 1
  • VIEW 590

atemu

score 20

ブラウザ上で動くsublimeみたいな雰囲気のものを作りたいと思ってます。
雰囲気としては、progateというサービスのブラウザ上でのテキストエディタです。
例えばsublimeやatomでは、左側にFOLDERSが表示され、右側にテキストをかけますよね。
そしてその幅は自由に変更できると思うのですが、そのようなことをブラウザ上で実現するとしたらどのようにすればいいのでしょうか?標準の機能だけでは難しいですか?

よろしくお願いします。

基本的にはフレームタグで出来るようなことでいいのですが、
①フレームタグが推奨されていない
②フレームタグだと、色々なhtmlを読み込む気がするけど、一つのHTMLにしたい(後々PHPとか色々足していくとそちらの方が楽なので・・・)

と言う問題があります。
よろしくお願いします。

追記

分かりにくくて申し訳ないです、フォルダが左側に表示される~というのは、sublimeのことを描くために用いた表現で、自分のシステムでそのようなことを行うつもりはありません。
HTML4でいう、framesetやframeタグのような感じでユーザが可変できて、1ページになっていればそれで大丈夫です。
紛らわしく本当にすみません。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mukkun

    2016/11/16 14:59

    取得したいフォルダ構成はサーバでしょうか。また、ブラウザは何を使用する予定なのでしょうか。配布ブラウザでクライアントのディレクトリ構造を取得するにはクライアントPCにサーバを立てる必要があります。(IEだとActiveXObjectでファイルとかは読み込めた記憶が。。)

    キャンセル

  • kei344

    2016/11/17 20:49

    まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。

    キャンセル

  • 退会済みユーザー

    2016/11/21 00:32

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 3

+3

分割して自由にサイズ変更なら個別のライブラリもあると思いますし、下記のようなUIライブラリを使うのも手でしょう。

【Splitter コントロール - jQuery Splitter コンポーネント - Ignite UI™】
http://jp.igniteui.com/splitter/overview

【Features, supported in Kendo UI Splitter widget | Kendo UI Web demo】
http://demos.telerik.com/kendo-ui/splitter/index

投稿 2016/11/16 23:14

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2016/11/17 01:04

    私の求めていたのはこれです!!ありがとうございます!!!!

    キャンセル

0

ローカルのフォルダを取得するとはブラウザだけでは困難なので、入力、出力にzipを使えばある程度のことは可能だと思います。Zipper.jsの解説サイト ローカルでZipを解凍するサイト
幅調節はテキストボックスのサイズは100%100%にして、テキスト入力欄とFOLDERSの間にボックスを置いて、それをドラックしたらその時のマウス位置に合わせてFOLDERSやテキスト入力欄が入っているdivのサイズを変えればいいと思います。
説明不足かもしれませんがその時はコメントしていただけると幸いです。

投稿 2016/11/16 20:51

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

check解決した方法

-2

splitter でできました

投稿 2016/11/21 21:00

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

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

ただいまの回答率

91.79%

関連した質問

  • 解決済

    テキストエディタ「Atom」のPHPモードで,PHPが色分けされない

    最近,Atomというテキストエディタに乗り換えたのですが, それでPHPを書こうとすると,PHPだけを書くときはうまく色分けされるのですが, HTMLの中にPHPを埋め込もうとする

  • 解決済

    TeXworks のような検索機能を持つエディタ

    TeXworks ではファイル内の文字列を検索するとき、結果が複数あればそれらを一覧表示する機能が付いています。いちいち順番に検索結果にジャンプするのがダルいので、便利に思って使っ

  • 解決済

    Atomの画像表示

    最近、HTMLCSSを編集するために、Atom editorを使い始め、atom-preview-htmlをダウンロードしました。しかし、プレビュー画面からHTMLファイルやCSS

  • 解決済

    Atomエディタで、ツリービューが緑色に上書きされてしまう。

    こんばんは。 特に設定を変更にした覚えは無いのですが、 下記の写真のように、ツリービューが全て緑に染まってしまいました。 めちゃめちゃ明るい緑で、全然集中出来ません(泣)

同じタグがついた質問を見る

  • JavaScript

    9498questions

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

  • Atom (テキストエディタ)

    263questions

  • sublimetext

    154questions

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

閲覧数の多いJavaScriptの質問