質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • HTML

    9287questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ruby

    7946questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    7495questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • Ruby on Rails 4

    2455questions

    Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

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

受付中

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 519

hug

score 2

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • katoy

    2016/04/24 07:16

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

    キャンセル

回答 3

0

こんにちは。
解決策になるか分かりませんが、もし私がそのような仕様の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 11:14

    横から失礼します。
    Canvas でもアニメーションはできますよ。Flash とは性質も少し違いますが、近いところまでできる感じです。

    【Canvasアニメーションの要点 - Qiita】
    http://qiita.com/nekoneko-wanwan/items/33afa5d20264c83b2bd1

    キャンセル

  • 2016/04/24 11:23 編集

    >kei344 さん
    ご教示ありがとうございます。なるほど!こうやって、再描画していけばアニメーションになりますね。

    キャンセル

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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


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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

関連した質問

同じタグがついた質問を見る

  • HTML

    9287questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ruby

    7946questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    7495questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • Ruby on Rails 4

    2455questions

    Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。