日付の表示方法について、助けてください

日付ついて私では解決できず、質問いたします。
現在、下記画像のように利用者が投稿したデータがある日付のみを１本のライン上に表示するというものを考えています。

その際に、投稿のない日付は小さい丸で表示して、投稿のある日付のみ大丸で表示するようにしたいと考えています。
また、その大丸の上に吹き出しのような形で、投稿された簡単なメッセージなどの分を表示する方法も考えているのですが、独学のため解決策が見つかりませんでした。

わかるかたがいっらっしゃいましたら、ご教示いただければと思います。
私自身についてですが、数ヶ月前から、HTML、CSS、Rubyを勉強しはじめて、基礎の基礎は理解しているつもりという状態です。

よろしくお願い致します。

katoy

2016/04/23 22:16

それなりのコード記述やライブラリーが必要になりそうです。現時点でどこまで作っているかを提示して欲しいです。

行動規範の内容に同意します

回答3件

画像で書いておられるような構成は、HTML+CSSで実現可能です。問題は、直線がどこまで横に伸びるかという点です。画面端を越えるほどの要素がある場合、横スクロールが必要になります。「別の場所をクリックしたら特定の日付が表示」などよくあるUIですが、その場合スクロール位置を制御する必要があります。

katoyさんの提示されているライブラリ群はこれらの問題を解決するためのものです。全部試してみて用件に会うものを選ばれるのが早いと思います。

吹き出しにしていませんが、こんな感じで簡単に実装はできます。

【Create a new fiddle - JSFiddle】
https://jsfiddle.net/a021yy7c/

【コピペで実装できちゃう！CSSで書かれた吹き出しまとめ | NESTonline Blog】
http://blog.nest-online.jp/11826

投稿2016/04/25 05:52

kei344

総合スコア69448

Horizontal Timeline jquery
で google 検索すると、情報が得られそうです。
そのなかから２つを紹介します。

Best jQuery Timeline Plugins http://www.jqueryrain.com/demo/jquery-timeline-plugin/
14 jQuery Free Timeline Plugins http://www.smashingapps.com/2014/12/12/14-jquery-free-timeline-plugins.html

イメージ的に近いのは
http://www.smashingapps.com/2014/12/12/14-jquery-free-timeline-plugins.html
でしょうか？

でもこれは 3 年前のものなので、最新の環境で動作するじゃは不明です。
これをベースに自分で改良していくとか、別のプラグインを探すことから始めてみるとよいと思います。

投稿2016/04/24 09:06

katoy

総合スコア22324

こんにちは。
解決策になるか分かりませんが、もし私がそのような仕様の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さんにとってもより有益な回答が
得られると思われます。

投稿2016/04/24 01:06

編集2016/04/24 02:21

jun68ykt

総合スコア9058

kei344

2016/04/24 02:14

横から失礼します。 Canvas でもアニメーションはできますよ。Flash とは性質も少し違いますが、近いところまでできる感じです。【Canvasアニメーションの要点 - Qiita】 http://qiita.com/nekoneko-wanwan/items/33afa5d20264c83b2bd1