普段、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件
あなたの回答
tips
プレビュー