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

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

ただいまの
回答率

89.98%

こんなアプリケーションが作りたいのですがどうやったら作れますか?

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,265

mx3

score 185

普段、HTMLコーディングとWEBデザイン少々を仕事としてやっています。
以前から、HTMLコーディングのTIPSに関するサービスを何か開発してみたいと思って色々考えていたのですが、ふと面白そうなものを思いつき、実現する方法が知りたくて質問しました。

アプリケーションの内容

アプリケーションはPCのWEBブラウザで動作するものを想定しています。
プログラミング学習サービスのProgateのように、エディタにコードを書いて即実行するもので、HTML/CSSに特化したものという感じで考えています。

まず、ブラウザの画面をデザイン表示(実行画面)、HTML入力、CSS入力の3つに分けます。
レイアウトは違いますが、jsdo.itに近いイメージです。
http://jsdo.it/

画面イメージ

ユーザーが、デザインにそってHTMLとCSSを入力します。
入力したものが即反映し(Firebugなどのデベロッパーツールで編集した時のイメージ)、一致したらクリアになります。画面イメージには適当にキャプチャはってますが、実際はもっとレイアウトの組み方が練習できるような簡単なものから始めるつもりです。

画像は事前にパスを用意しておいて、それを入れれば表示できるようにすればいいかなと思ってます。

ユーザーの書いたコードは公開され、他のユーザーと共有できて、ゲーミフィケーションを活用したeラーニングに近いイメージで考えています。

教えて欲しいこと

現時点ではアイデアのみで、どうやったら実現できるか皆目見当がつかないのですが、こういうアプリケーションは作れそうでしょうか?
ちなみに、自分のスキルはHTMLとCSSとjavascriptはjQueryで基本的な動作をつけたり、プラグインをカスタマイズできる程度。Wordpressで0からのテーマ作成とWPタグを多少使える程度。

PHPやデータベース操作はドットインストールなどで勉強したことがありますが、何か自力で作れるというわけではなく。Ruby On Railsはワークショップでミニブログみたいなのを作ったことはありますが、ただコピペしたというレベルでお粗末なものです。

サーバーサイドについてはいままで何度も勉強しようと取り組んできたのですが、基本から勉強するとわかりづらいこと多く、長続きしませんでした。ただ、作りたいものがあれば試行錯誤して結果として勉強すると思うので、今回それができればなと思っています。

細かい工程を教えて頂くのは難しいと思うのですが、こんな私でも、こういう言語や仕組みをつかったらやれそう、とか、こういう風に進めて行くといいかも、などヒントを教えて頂けると嬉しいです。

もしくは、そういうサービスもうあるよ!っていう情報があれば教えてください!

宜しくお願いします!

追記

この質問には、「問題・課題が含まれていない」という注意が来ましたので追記します。
質問の具体的な内容及び解決したい課題は以下のとおりです。

1.ブラウザ上に入力エリアを作るとこまではHTML/CSSで作ればいいと想像できますが、入力されたHTML/CSSをリアルタイムに別の領域で実行するのには、どういった仕組み(言語)が使われているのでしょうか?ライブラリなどがあるのでしょうか?

2.描画されたHTML/CSSが、デザインと一致していると判定する仕組みの実装方法が全く想像できません。情報を検索しようにもキーワードが適切でないためか見つけることができません。何か実装方法のヒントとなるような事例またはキーワードがありませんでしょうか?

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • tozjp

    2015/12/17 01:28

    左ペインは自分が今作っているコードのプレビューではなくて、「これに一致するものを作れ」という練習課題ということですか?

    キャンセル

  • mx3

    2015/12/17 02:47

    コードのプレビューとデザイン両方になります。詳細はコメント欄に回答させて頂きましたのでご覧ください。

    キャンセル

回答 1

checkベストアンサー

+1

(追記依頼と内容かぶりますが、) 左ペインは自分が今作っているコードのプレビューではなくて、「これに一致するものを作れ」という練習課題ということですか?
一致判定がそういう意味で言っているのであればかなり難易度高そうですねー。
ピクセル単位で全一致する時のみ正解とすると利用者が問題を解く難易度が、逆にちょっとゆるい判定にすると問題を出すプログラムの難易度が高そうですね。
表示上は同じでもソースコード的には無数に正解があるのがネックです。

一応何かに使えそうなものを紹介します。

無茶し過ぎ。クライアントサイドでWebサイトのスクリーンショットを作成·html2canvas MOONGIFT
どのくらいの精度で変換されるかわからないので使えるかわかりませんが、こいつが優秀なら役に立ちそうです。

ブラウザ上で使えるJavaScript製テキストエディタAce入門 - Qiita
コード入力欄に有力な選択肢。

iframe 関連処理まとめ - Cyokodog :: Diary
jsdo.it みたいに実行結果をリアルタイムに表示するなら、おそらく iframe を動的に作成して中身の html を書き換えることになります。

あとこういうの興味ありますか?
basarat/typescript-script
medialize/sass.js
jsdo.it は HTML CSS JavaScript だけではなく、TypeScript や SCSS でも投稿できます。
多分、ブラウザ側で JavaScript や CSS に変換しているのだと思います。(TS や SCSS はそのままではブラウザ上で動きません。)
個人的には JS、CSS より TS、SCSS で書きたい派なので、このサービスをもし自分で使うなら例えば SCSS を書いたら CSS に変換されて動いたらなかなか素敵です。

ブラウザ側の実装方法の話しかしていませんね。
サーバー側の話だと、
会員登録やログインなどの仕組み、
書いたコードをDBなどで保存しておく仕組みが必要でしょう。

入門なら PHP と MySQL が王道だと思います。
ゆくゆくは CakePHP などのフレームワークで綺麗にかつ (セキュリティ上) 安全に作るのがいいとは思いますが、もちろん最初はフレームワークに手を出しても PHP の基本がわからないのでフレームワークも理解できないでしょう。
(これは jQuery しか使ったことがない人が、何が JavaScript の機能で何が jQuery の機能なのかわからず、結果として jQuery 自体も深く使いこなせないということに似ています。)

ということでまずはナマの PHP、ナマの JavaScript を書くべきだという意見もあるんですが、とはいえ、個人的にはいきなりフレームワークに手を出して徐々に掘り下げて理解するのもナシではないと思っています。
やっていて楽しいと思える方法ならどうでもいいんじゃないでしょうか。
僕は PHP はナマから入って、 JavaScript は jQuery から入りました。まぁありがちなパターンです。

サーバーサイドは実装方法というか学習方法の話になってしまいましたが、まぁ珍しい技術を要するような内容ではないと思うので、具体的には掘り下げません。

それでは長々と失礼しました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/17 02:46

    回答ありがとうございます!
    >左ペインは自分が今作っているコードのプレビューではなくて、「これに一致するものを作れ」という練習課題ということですか?

    こちらについての回答ですが、コードのプレビューとデザイン両方になります。別レイヤーでデザインを表示して、その上にユーザーがプレビューしたものを重ねるイメージになります。
    原図に薄紙をのせてトレースするような感じです。
    それで、完全一致すれば正解!みたいなのをイメージしてるんですが...

    教えてくださったURL等ひととおり見ました。テキストエディタやiframeについて参考になりました。キャプチャはWordpressのプラグインで、リンク先のキャプチャをとってきてサムネイルにする、みたいなのがありますが、あれもこの類なのかなと思いました。ただ、これがどう自分の開発に活用できそうかというところまではイメージできず...ただ「canvas」がキーワードになるのかなという気がしてきました。

    正直、かなり難しそうだな...という印象を持つくらいの知識しか今はありませんが、でもどうしてもやってみたくて、諦めきれません。

    サーバー側の話は、そうですね。具体的に何か質問を、と思ったのですが、入力してもらったコードを保存して表示するだけなら、そんなに難しくないのかなと思いましたので、この場での質問はやめました。やはりフロント側の実装の方が格段に難しそうですね。

    キャンセル

  • 2015/12/17 04:04

    キャプチャに関しては、比較方法の一つの手段です。
    文字列(ソースコード)を比較しても、下手したらお手本と1文字も合っていないのにレンダリング結果(画像)は全く同じってこともあり得るので、比べるなら見た目なのかなーと。

    ただ見た目が同じでも動きがぜんぜん違うとか、お手本をキャプチャした画像を<img>で貼っただけかもしれないとか、やっぱり画像比較でもあまりに難しい課題が山積みなのです。

    そもそもコンピューターに正誤判断させるにはAIレベルのプログラムが必要かもしれません。
    と、力不足の僕からは見えてしまいます。

    キャンセル

  • 2015/12/17 10:03 編集

    >文字列(ソースコード)を比較しても、下手したらお手本と1文字も合っていないのにレンダリング結果(画像)は全く同じってこともあり得るので、比べるなら見た目なのかなーと。

    仰るとおりです。まさにこのサービスの肝はそこで、見た目の結果は同じだけど人によってコードが違うというのを示したくて、こういう書き方もあるんだ!っていうのを知るきっかけにしたいと思っています。

    >ただ見た目が同じでも動きがぜんぜん違うとか、お手本をキャプチャした画像を<img>で貼っただけかもしれないとか、やっぱり画像比較でもあまりに難しい課題が山積みなのです。

    JSやCSS3を使った動的ものについては確かに難しそうだなと思います。せめて完全に静的なものだけでも実現できないかなと。お手本をキャプチャした、という点は画像パスをこちらが提示したものしか使えないとかにすればできそうですがどうでしょうか。ちなみにお手本については、通常のWEBサイトのような複雑なものではなく、2カラムレイアウトとか、そういう単純な大枠だけのものや、パーツだけ(四角をただ横に5つ並べただけとか、新着情報の日付とタイトルだけとか)など、はじめはすごく簡単なもので考えています。

    >そもそもコンピューターに正誤判断させるにはAIレベルのプログラムが必要かもしれません。

    レンダリングの正誤判断ってそんなに難しいものなのですね...しかし難しいと言われれば言われるほど、余計にやりたくなってきました!気持ちだけでスキルが全く追いついていませんがw

    キャンセル

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

  • ただいまの回答率 89.98%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる