質問: 日付ついて私では解決できず、質問いたします。 現在、下記画像のように利用者が投稿したデータがある日付のみを1本のライン上に表示するというものを考えています。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/29349544d1465828d40bfe846281fa34.png) その際に、投稿のない日付は小さい丸で表示して、投稿のある日付のみ大丸で表示するようにしたいと考えています。 また、その大丸の上に吹き出しのような形で、投稿された簡単なメッセージなどの分を表示する方法も考えているのですが、独学のため解決策が見つかりませんでした。 わかるかたがいっらっしゃいましたら、ご教示いただければと思います。 私自身についてですが、数ヶ月前から、HTML、CSS、Rubyを勉強しはじめて、基礎の基礎は理解しているつもりという状態です。 よろしくお願い致します。
回答: こんにちは。 解決策になるか分かりませんが、もし私がそのような仕様のUIを 実装するとしたら、まず以下を課題に設定すると思います。 【課題】画像で示されているような以下の要素 ・直線 ・直線上に中心があり、複数の色で塗り潰され、直径の異なる複数の円 ・円の下部に配置されるテキスト(日付) ・テキストが内部に書かれる多角形(吹き出し) を適切に配置し、WEBブラウザ上に表示させること。 だたし、直線の上に並べる円の個数、個々の円を塗りつぶす色、 直径、円の下に表示する文字列(日付)は、プログラムから制御 (変更、追加、削除など)できなければならない。 それで、もし私が上記のような課題を与えられたら、実装の手段として HTML5 の Canvas (HTML Canvas 2D Context) を使うことを考え、その実現性(作りたいものが本当に実現できるかどうか)の 確度を調査することから作業を始めると思います。 ただ、目的のものが本当に作れそうかどうかは、大雑把でもコードを 書いてみないと分かりませんので、まずは、画像で示されているラフな スケッチをそのままCanvasを使って、はじめは絶対座標を使い日付も 固定の文字列でよいのでざっくり描いてしまって、そこから徐々に可変 にすべき部分をプログラム化(例えば、日付や吹き出しの中のテキスト をAJAXでサーバーから取得してUIに反映させる、などの処理)していく というアプローチを取ると思います。 上記は私の思いつきなので、hugさんの目的にかなっているかは分かり ませんので、まずはCanvasが選択肢になり得るかどうか、とりあえず 以下の書籍 HTML5 Canvas (オライリージャパン 2012/1/21) あたりを本屋で立ち読みして、使えそうかどうか検討されてみては いかがでしょうか? 以上、参考になりましたら幸いです。 以下追記します。 (1) Canvasだとアニメーションが(確か)出来ない(と思った)のですが、 画像のようなUIだと、白紙の画面に、まずはじめに直線が左から伸びて きて、その後、円が日付の新しい順、または古い順に配置されて、 最後に吹き出しが表示されるみたいな、各表示要素が時間差がありつつ (各々それっぽい視覚効果を伴って)現れたほうが見た目として カッコイイと思うので、そういうことがやりたければ、Flashを 使うしかないかもしれません。 (2) CanvasでもFlashでもなくて、HTMLの基本的な要素とCSSを使い、画像のような 図形らしく見えるようなものを描くことについては、すみませんが 「出来なくはなさそうな気がしなくもない。 (が、理想とする仕様のうちのいくつかは諦めないといけないかもしれない)」 というのが私の回答です。 再度、追記します。 ご質問の冒頭に > > 引用テキスト日付ついて私では解決できず、質問いたします。 > > > とありましたが、逆に言うと、日付の表示以外は完成しているということなのでしょうか? もしそうなら、katoyさんが「情報の追加・修正の依頼をする」で > > 現時点でどこまで作っているかを提示して欲しいです。 > > > と書かれているように、「今ここまで出来ている」という現状を具体的にコードで示して 頂けると回答者としても助かりますし、その方が、hugさんにとってもより有益な回答が 得られると思われます。