質問: 普段、HTMLコーディングとWEBデザイン少々を仕事としてやっています。 以前から、HTMLコーディングのTIPSに関するサービスを何か開発してみたいと思って色々考えていたのですが、ふと面白そうなものを思いつき、実現する方法が知りたくて質問しました。 ### アプリケーションの内容 アプリケーションはPCのWEBブラウザで動作するものを想定しています。 プログラミング学習サービスのProgateのように、エディタにコードを書いて即実行するもので、HTML/CSSに特化したものという感じで考えています。 まず、ブラウザの画面をデザイン表示(実行画面)、HTML入力、CSS入力の3つに分けます。 レイアウトは違いますが、jsdo.itに近いイメージです。 http://jsdo.it/ ![画面イメージ](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/78191e6030629e6c1e43169039ba3bff.png) ユーザーが、デザインにそってHTMLとCSSを入力します。 入力したものが即反映し(Firebugなどのデベロッパーツールで編集した時のイメージ)、一致したらクリアになります。画面イメージには適当にキャプチャはってますが、実際はもっとレイアウトの組み方が練習できるような簡単なものから始めるつもりです。 画像は事前にパスを用意しておいて、それを入れれば表示できるようにすればいいかなと思ってます。 ユーザーの書いたコードは公開され、他のユーザーと共有できて、ゲーミフィケーションを活用したeラーニングに近いイメージで考えています。 ### 教えて欲しいこと 現時点ではアイデアのみで、どうやったら実現できるか皆目見当がつかないのですが、こういうアプリケーションは作れそうでしょうか? ちなみに、自分のスキルはHTMLとCSSとjavascriptはjQueryで基本的な動作をつけたり、プラグインをカスタマイズできる程度。Wordpressで0からのテーマ作成とWPタグを多少使える程度。 PHPやデータベース操作はドットインストールなどで勉強したことがありますが、何か自力で作れるというわけではなく。Ruby On Railsはワークショップでミニブログみたいなのを作ったことはありますが、ただコピペしたというレベルでお粗末なものです。 サーバーサイドについてはいままで何度も勉強しようと取り組んできたのですが、基本から勉強するとわかりづらいこと多く、長続きしませんでした。ただ、作りたいものがあれば試行錯誤して結果として勉強すると思うので、今回それができればなと思っています。 細かい工程を教えて頂くのは難しいと思うのですが、こんな私でも、こういう言語や仕組みをつかったらやれそう、とか、こういう風に進めて行くといいかも、などヒントを教えて頂けると嬉しいです。 もしくは、そういうサービスもうあるよ!っていう情報があれば教えてください! 宜しくお願いします! ### 追記 この質問には、「問題・課題が含まれていない」という注意が来ましたので追記します。 質問の具体的な内容及び解決したい課題は以下のとおりです。 1.ブラウザ上に入力エリアを作るとこまではHTML/CSSで作ればいいと想像できますが、入力されたHTML/CSSをリアルタイムに別の領域で実行するのには、どういった仕組み(言語)が使われているのでしょうか?ライブラリなどがあるのでしょうか? 2.描画されたHTML/CSSが、デザインと一致していると判定する仕組みの実装方法が全く想像できません。情報を検索しようにもキーワードが適切でないためか見つけることができません。何か実装方法のヒントとなるような事例またはキーワードがありませんでしょうか?
回答: (追記依頼と内容かぶりますが、) 左ペインは自分が今作っているコードのプレビューではなくて、「これに一致するものを作れ」という練習課題ということですか? 一致判定がそういう意味で言っているのであればかなり難易度高そうですねー。 ピクセル単位で全一致する時のみ正解とすると利用者が問題を解く難易度が、逆にちょっとゆるい判定にすると問題を出すプログラムの難易度が高そうですね。 表示上は同じでもソースコード的には無数に正解があるのがネックです。 一応何かに使えそうなものを紹介します。 無茶し過ぎ。クライアントサイドで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 から入りました。まぁありがちなパターンです。 サーバーサイドは実装方法というか学習方法の話になってしまいましたが、まぁ珍しい技術を要するような内容ではないと思うので、具体的には掘り下げません。 それでは長々と失礼しました。