makoto-ogata / array-test Goto Github PK

新しい課題です。
Twitterの「もっと読む」を作ります。

• tweets.json をajaxしてtweets.htmlに表示する。
  • これまでやったことと殆ど同じですね！
• 全てのtweetの下に「もっと読む」リンクをつけます。
  • もっと読むを押すと、tweets.jsonをajaxして、一番下のtweetに追加します。
  • 本来はtweets.jsonの内容がサーバ側で変化する（ページネーション）はずですが、今はサーバー実装をしないので、同じ文章が何回も出る形で大丈夫です。

tweets.jsonは下記のようなものです。5件くらいは配列に入れたほうがそれっぽいでしょう。

[
  {
     name: "ms2sato",
     body: "こんにちは"
  },
  {
    name: "makoto-ogata",
    body: "本日は晴天なり"
  }
]

テキストや色の情報をJSONとしてサーバーから取得する形にしましょう！

よくある実装ですが、非同期で通信している際にボタンを二度押し、三度押しされると誤動作してしまうアプリを作る時、ボタンが通信中に押せないようにブロックされる仕組みを導入します。

仕様

• 通信中：もっと読むボタンは属性disabledになります（見た目がグレーっぽく変わるはず）
• 通信中：「もっと読む」のテキストが「通信中...」に変わります
• 通信後：もっと読むボタンの状態が通信前と同様に戻ります。

確認のヒント

通信速度が速すぎてテストしづらいかもしれません。ブレークポイントを使って確認するような形で大丈夫ですよ。

tweets.jsonの内容を画面に出していると思いますが、名前、本文ともにユーザーが自由に入力できる想定ですね（Twitterのようなアプリを想定しています）。

実は今のコードには「クロスサイトスクリプティング」という攻撃に対して脆弱性があります。さて、クロスサイトスクリプティングはどんな攻撃で、どのように守ると良いのでしょうか。

時間のあるときに調べておいてください。

前にやったのと同じですが、癖をつけたいので〜。

ゴールイメージとしては下記のようなところを考えています（アニメーションなどは今回はやりません、パッパッとページが切り替わるものでOKです）

http://www.jquery-steps.com/Examples

まずは HTMLに複数ページのタグを最初から用意して、一番最初のページだけが表示されている状態まで作りましょう（最初のページは表示されているが、その他のページが非表示の状態）。

仕様がわかりにくい場合には相談しましょう。

Issueがなかったのでこちらに作りました。