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

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

WEB制作5日目

おはようございます

たるティスです

 

案の定昨日は帰ってこれませんでした

正直用事が終わって時間はありました(買ってもいないモンハンワールドの事を調べていました)

 

「怠惰」です

 

すみません、これがニートたる所以かもしれません、どうしてもやる気が出てこない時が頻繁にあるのです

 

言い訳が終わったところで続きをやっていきます

 

f:id:tarutexisu:20180308084500p:plain

ひとまずこんな感じでいきます

ちょっとだけ様になるとモチベーションになりますね

 

次は入力されたものがデータベースに保存されるようにします

久々にデザイン以外の事でうれしい

 

 やりたいことは

・名前を登録

・内容を登録

パワーワードを登録

・暑苦しいパワーワード画像生成

パワーワードページ生成してそのurlがtwitterカードのリンクになる

 

画像生成はRMagickを使います

 

関係ないけどシンボリックリンクはるのはリンク元がフルパスじゃないとだめっぽい

ディレクトリのシンボリックリンクでハマったこと | OpenGroove

僕もうまくできなくて地味にはまってしまった

 

・画像に文字のっける

・エラー表示

パワーワードページ

を作りましたgifだけどみれるかな?

f:id:tarutexisu:20180308104610g:plain

 

 まだ文字のサイズやらいろいろと、背景画像は色々変えようと思ってます

説明のとこもデザイン考えなきゃ

 

またデザインの日々ですかね・・・

誰か超いい感じに考えてくれる人はいないですかね

 

いないですね、貧乏暇なしです、全て一人でやりましょうぞよ

 画像合成の時に文字フォントをこの前いっていたやつ使ってます

ページ全部に暑苦しいフォントいれてもいいといえば良いのですが、漢字までカバーしているフォント読み込ませると3MBぐらい読み込んでもらうことになっちゃいます

 

ただでさえfontawesomeやjqueryなど読み込んでいただいているので、レスポンスがおそくなるのは避けたいので入れてないって感じです

 

ただ画像合成はサーバー側で(みんなのパソコンのスペックを使うことなく)やっているのでフォントを入れていてもまったく問題ないのです

 

そのおかげで、暑苦しい文字を入れる事ができています

 

f:id:tarutexisu:20180308105258p:plain

え?この部分は?って思われるかもしれませんがこちらのフォントはカタカナだけ対応しているものなので、大して重くないのです

 

なので読み込ませています

 フォントの重さって完全に漢字をどれだけ対応するかって気がしますよね

JIS第一規格に対応すると2000文字ぐらいなのかな?

調べたら、JIS第一水準で3000字ぐらい、第二水準で3400字くらいだそうです

 

単純計算でカタカナだけのフォントは第一水準対応フォントの1/60ぐらいでしょうかね?

 

 ちなみにgif作成は有名なこれを使っております

Cockos Incorporated | LICEcap

 スーパーウルトラ便利なのでオススメです

 

 文字幅とサイズを変えたらなんか昔のホラー番組のしょぼい煽りみたいになった

f:id:tarutexisu:20180308110522p:plain

 

なんか面白いのでひとまずこれで進めようかな

 改行をどうしようか迷うところ

 

入力で一応改行受け付けてるけど、一行が長すぎると改行するようにしておかないとだめですね

 

f:id:tarutexisu:20180308110831p:plain

 

ひとまず横幅がいっぱいになる13文字で強制改行、入力された改行はそのまま反映にしてみました

f:id:tarutexisu:20180308111013p:plain

 

アルファベットとかだと速攻改行が入っちゃうの嫌ですね・・・

文字量で改行数をかえたほうがいいのでしょうか、めんどくさそう

 

ひとまずこれですすめようかなー

 

 なんかこのページの見せ方だけでかなり時間かかりそうな気がしてきた

f:id:tarutexisu:20180308115725p:plain

嫌いじゃない背景を見つけたけれど、文字がかぶっちゃってレスポンシブ対応がめんどくさそう・・・

f:id:tarutexisu:20180308120020g:plain

 

画像の要らない場所切ってパワーチャンピオン君をうっすら入れてみた

これでいこうかな

 

f:id:tarutexisu:20180308121702p:plain

 

 上の方のdearがdeathにみえてきたけどいいよね

 

お昼ご飯かって、食べて休憩します

 

ただいまです、堕落してました・・・

すみません気を付けます

 

続きやっていきます、パワーワードを見るページつづきでしたね

 

 うーん

background-sizeをcoverにするか100%にするか迷う

基本スマホ対応しかしないようにしていこうと思うので、CSSメディアクエリ無を貫いて100%100%でいきましょう

パソコンでみると横に伸びちゃうけどギリギリ気にならない程度かと思うので進めます

f:id:tarutexisu:20180308164315p:plain

 

 次はパワーワード本体

あっ出典の存在忘れてた、出典入れれるようにしよう

なんかパワーワードの個別ページにアクセスするとリクエストが二回飛ぶ現象が発生している・・・

 

jquery入れすぎでもないし、とくにこころあたりがないんだがなんなんだー

 

やっとみつけた・・・

f:id:tarutexisu:20180308174646p:plain

あとで入れようと思ってたfavuconの場所のhrefに反応してたっぽい、href=""にしたら無事リクエスト二重はなくなりました

 

ちょっとはまってしまった悔しい

 けどその間にsubmitおしたら送信中は別のものが表示される簡単な方法をみつけたからまぁいいとしよう

qiita.com

d.hatena.ne.jp

 

 やっとデザインに入れる・・・

 

f:id:tarutexisu:20180308183639g:plain

 

出典入れる欄忘れてたんで追加と、項目が増えてきたので必須項目には「必須」と表示するようにしました

 

まずい、上ばっかり綺麗にしてたから主役のパワーワードが主役感なくなってきた

f:id:tarutexisu:20180308185042p:plain

 

パワーワード画像の部分を作ろう、そして説明部分を汚くしようか

 

 

f:id:tarutexisu:20180308200054p:plain

 

なんかインディージョーンズみたいになってしまった・・・

 

だめだー迷宮入りしてきた

難しい、きれい系の方がいいかなやっぱり?というか背景は白の方がこの文字が目立つかやっぱり

 

夕ご飯食べよう

今日はもう終わりな可能性が高いですね