2012年1月19日木曜日

24時間だけ有効なメッセージ伝言板サイトを作ってみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
24時間だけ有効なメッセージ伝言板サイトを作ってみました。

URL:http://twentyfour-message.heroku.com/
タイトル:24時間有効メッセージ















サイトの説明そのままですが

////////
24時間だけメッセージが公開され、設定された時間を過ぎると
メッセージは削除されるようになっています。
また、メッセージに対してコメントをすることもできます。
24時間だけ伝言したいこと。ささいなこと。ふと思ったこと。
誰にも読まれないかもしれないけど、なぜか投稿してみたいこと。
そんな伝言板あってもいいじゃない?
////////

今回作るにあたって、3つのことを試してみました。

①スマホ対応
②jqueryのローテーションスライド
③Canvasのアニメーション

スマートフォン関係のマークアップに関する本があったのであさって読みながら
iphone風のレイアウトを拝借しました。1ページのスクロール量を減らす為に
jqueryのスライドを使いページの遷移もしてみました。

こちらがスマホ対応してみたURL
http://twentyfour-message.heroku.com/24message-moblile

ウインドウの幅を小さくみるとスマホぽくなってると思います
スマホはもってないので実機での確認はしていませんがうまくいってることを願う
スマホって案外使える領域が小さいんですねえ
かといって、縦にずらーっと長くしたら使いずらくなるし。

あと、RailsにおいてPC用とスマホ用のレイアウトをルーティングするのに苦労しました。
1つのコントローラーを使ってPCかスマホか判別してレイアウトを使いわけるというという方法をとったのですが、Rails特有のルーティングがなかなか思ったとおりにいってくれなかったです。

見た目強化ということで、PCのトップページには記事のローテーションスライドを入れてみました。
以下のスライドを参考に使わせてもらいました。
http://www.skuare.net/2011/06/javascriptdivjquery_slider2.html

とりあえずはコピペでもいいから、多くのjqueryのUIを使っていきたいですね。

最後に、 Canvas で星型のアニメーションをつけてみました。
メッセージがまだ投稿されてない状態のみ表示させるようにしています。
以下、ほぼ同じアニメーションのサンプルです。



Javascriptは魅力的ですねえ。突っ込んでやっていきたいな。
次はアプリ的なものに挑戦していこうと思います。
まずはリアルタイムチャットかなあ。

0 件のコメント:

コメントを投稿