Q&A
こちらの質問が他のユーザから「問題・課題が含まれていない質問」という評価を受けています
teratailでは、漠然とした興味から票を募るような質問や、意見の主張をすることを目的とした投稿は推奨していません。
質問の意図や解決したい課題を明確に記述していただくと、回答が得られやすくなります。
普段、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が、デザインと一致していると判定する仕組みの実装方法が全く想像できません。情報を検索しようにもキーワードが適切でないためか見つけることができません。何か実装方法のヒントとなるような事例またはキーワードがありませんでしょうか？
左ペインは自分が今作っているコードのプレビューではなくて、「これに一致するものを作れ」という練習課題ということですか？
コードのプレビューとデザイン両方になります。詳細はコメント欄に回答させて頂きましたのでご覧ください。
回答1件
0
ベストアンサー
(追記依頼と内容かぶりますが、) 左ペインは自分が今作っているコードのプレビューではなくて、「これに一致するものを作れ」という練習課題ということですか？
一致判定がそういう意味で言っているのであればかなり難易度高そうですねー。
ピクセル単位で全一致する時のみ正解とすると利用者が問題を解く難易度が、逆にちょっとゆるい判定にすると問題を出すプログラムの難易度が高そうですね。
表示上は同じでもソースコード的には無数に正解があるのがネックです。
一応何かに使えそうなものを紹介します。
無茶し過ぎ。クライアントサイドで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/16 17:26
総合スコア790
回答ありがとうございます！
>左ペインは自分が今作っているコードのプレビューではなくて、「これに一致するものを作れ」という練習課題ということですか？
こちらについての回答ですが、コードのプレビューとデザイン両方になります。別レイヤーでデザインを表示して、その上にユーザーがプレビューしたものを重ねるイメージになります。
原図に薄紙をのせてトレースするような感じです。
それで、完全一致すれば正解！みたいなのをイメージしてるんですが...
教えてくださったURL等ひととおり見ました。テキストエディタやiframeについて参考になりました。キャプチャはWordpressのプラグインで、リンク先のキャプチャをとってきてサムネイルにする、みたいなのがありますが、あれもこの類なのかなと思いました。ただ、これがどう自分の開発に活用できそうかというところまではイメージできず...ただ「canvas」がキーワードになるのかなという気がしてきました。
正直、かなり難しそうだな...という印象を持つくらいの知識しか今はありませんが、でもどうしてもやってみたくて、諦めきれません。
サーバー側の話は、そうですね。具体的に何か質問を、と思ったのですが、入力してもらったコードを保存して表示するだけなら、そんなに難しくないのかなと思いましたので、この場での質問はやめました。やはりフロント側の実装の方が格段に難しそうですね。
キャプチャに関しては、比較方法の一つの手段です。
文字列（ソースコード）を比較しても、下手したらお手本と1文字も合っていないのにレンダリング結果(画像)は全く同じってこともあり得るので、比べるなら見た目なのかなーと。
ただ見た目が同じでも動きがぜんぜん違うとか、お手本をキャプチャした画像を<img>で貼っただけかもしれないとか、やっぱり画像比較でもあまりに難しい課題が山積みなのです。
そもそもコンピューターに正誤判断させるにはAIレベルのプログラムが必要かもしれません。
と、力不足の僕からは見えてしまいます。
>文字列（ソースコード）を比較しても、下手したらお手本と1文字も合っていないのにレンダリング結果(画像)は全く同じってこともあり得るので、比べるなら見た目なのかなーと。
仰るとおりです。まさにこのサービスの肝はそこで、見た目の結果は同じだけど人によってコードが違うというのを示したくて、こういう書き方もあるんだ！っていうのを知るきっかけにしたいと思っています。
>ただ見た目が同じでも動きがぜんぜん違うとか、お手本をキャプチャした画像を<img>で貼っただけかもしれないとか、やっぱり画像比較でもあまりに難しい課題が山積みなのです。
JSやCSS3を使った動的ものについては確かに難しそうだなと思います。せめて完全に静的なものだけでも実現できないかなと。お手本をキャプチャした、という点は画像パスをこちらが提示したものしか使えないとかにすればできそうですがどうでしょうか。ちなみにお手本については、通常のWEBサイトのような複雑なものではなく、2カラムレイアウトとか、そういう単純な大枠だけのものや、パーツだけ（四角をただ横に5つ並べただけとか、新着情報の日付とタイトルだけとか）など、はじめはすごく簡単なもので考えています。
>そもそもコンピューターに正誤判断させるにはAIレベルのプログラムが必要かもしれません。
レンダリングの正誤判断ってそんなに難しいものなのですね...しかし難しいと言われれば言われるほど、余計にやりたくなってきました！気持ちだけでスキルが全く追いついていませんがw
あなたの回答
tips
プレビュー
