借金100万ニートがWEBサービス(実況(休憩中))

借金100万円を抱えたニートがWEBサービスを作ります。

WEB制作7日目

おはようございます、たるティスです

7日目始めていきたいと思います

 

前回は結局全然進める事ができませんでした

本当に自分のやる気や物事に取り組む姿勢を改善したい・・・

 

今回は一覧画面のデザインを考えたいと思います・・・

そういえばイイネを押した際のアニメーション一応完成しました

イイネアニメーション

おそらくまた機種別にズレなどが発生しそうですが(IEは完全無視です)ひとまずはこれで進めていきたいと思います

 

暑苦しくダサくしてみました、小奇麗路線でいくと暑苦しい感じと合わないので

f:id:tarutexisu:20180312101805g:plain

 

なんかしょぼいパチンコみたいですね(笑)

 また時間があればカオスな感じに改造したいと思います

 

アニメーションはcssのkeyframeアニメーションを書いておいて、クリックするとJSで時間制御しながらkeyframeアニメーションの設定されているクラス名が要素にくっつくようにしてあります

 

トップページに表示させるもの

 一覧のデザインとかいいましたけど嘘です、こっちからやりたいと思います

何を表示させるか考えていきたいと思います

 

【案1】

 タイトル画面みたいなものを表示して、サービスの説明てきなものと一覧ページへのリンクとかをはる

 

【案2】

新着パワーワード、人気パワーワードを何件か表示させておく

 

 うーむ、両方にしますか

 

上にはタイトル、とキャッチフレーズてきなものを入れる

スクロールしていくと

・新着パワーワード

・人気パワーワード

・ランダムパワーワード

が数個ずつ下にでてくるといった具合にしましょう

 

タイトルはデザイン考えるのめんどくさいので、機能から作っていきます

・新着パワーワード

・人気パワーワード

・ランダムパワーワード

・新着コメント

を数個出す機能をつくりましょう。

 

その前にseedつかってデータベースにテストデータ的に読み込ませたいと思います

作ります

 

 

f:id:tarutexisu:20180312104554p:plain

 

f:id:tarutexisu:20180312104646p:plain

 

生成されたデータがこちら

0.jpgにはひろしの名言を設定しております

 

 

f:id:tarutexisu:20180312112811p:plain

 

あとはコメントですね

コメントはパーシャルも作る必要がありそう

f:id:tarutexisu:20180312114255p:plain

コメントもfakerというgemを使って、ハリーポッターの言葉をいれてみました。英語なのですが翻訳するとなんか懐かしかった

 

f:id:tarutexisu:20180312120020p:plain

 

新着コメントもデザイン以外は表示させられました。

モデル名パーシャルとは少し違うパーシャルを使いたい場合、each_with_indexでrenderしてあげると便利です

 

パーシャルの中で場合分けでもいいですがファイルを分けたい人はオススメです

f:id:tarutexisu:20180312120304p:plain

 

上はそのままpwordモデルのパーシャルである_pwrodというものが呼ばれますが、下は用意した_sin_commentというパーシャルが呼ばれます

 

with_indexにしている理由は、モデルコレクションをレンダーするときはcounterメソッドで何回目の呼び出し化が判るのですが、それの代わりをインデックスiで実現している感じです

 気づいたら12時・・・・早いですね

 

買い物して、ごはん食べて休憩して夕飯つくってダラダラして、そして4時へ

本当にだらだらしてしまうのって何なんでしょうね、人間のダラダラ細胞を発見してほしいものです

 

言い訳いっていてもしょうがないですね・・・はじめます

 

なんとかさぼらず完成させたいー

 ワード表示のデザインが全く決まらないですね、どうしましょう

影もつけないそれこそスマホ版の「はてなブログ」の記事の羅列みたいにしようか・・・

 

激しくデザインで時間とってしまっている気がする

見事に何も思いつかない

 

 ごめんなさい全然実況になってないですね

f:id:tarutexisu:20180312201412p:plain

 

途中経過です

 

いいね数とコメント数、最後のコメントを右下に表示、パワーワード一覧は見やすさ重視にしてみました

 

ご飯食べます