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

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

WEB制作3日目

機能はなかなか進める事ができませんでしたねー残念です

でも無事帰ってくることはできました、進歩です

 

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

 

昨日どこまでやりましたっけ?

見てきました、リモートリポジトリとして使っているbitbacketにソースをpushしたところからでしたね

 

今日はrailsでモデルを作成するところからやっていこうと思います

関係ないですが、昨日新作のデビルマンを見ました

 

とっても憂鬱な作品ですね、でも原作通りということであれが数十年前に書かれていた事に衝撃をうけます

 

そんなことはどうでもいい(さぼってしまう)のでやっていきます

 

 

f:id:tarutexisu:20180306090244p:plain

 

cyberduckでファイルを扱いやすく作業します

使うのは蛍光ペンのとこばっかですね(ほぼapp)

 

ちらっとって意味では全部使いますけど本当にほとんどこれらです

 

今回はすごい単純なものなのでtest一切無で書いていきます(←非常に良くないです

 

userモデルは使わない可能性がありますがいつか使いかもしれないので、ログイン機構とともに作っておきます

 

自分で作ってもいいですがセキュリティの意識することが多すぎて僕がつくるとおそらく蓮コラレベルの穴まみれになる為deviseというgemを使います

 

あとjs結構使いたいのでturbolinkも切っておきます

 

qiita.com

qiita.com

 

 これすごく見やすいです

 

 

f:id:tarutexisu:20180306095029p:plain

そっけないですがtwitter登録できる機能をつけました。

railsとdeviseの日本語化もしていきます 

qiita.com

このへんが便利ですかね、日本語化ファイルとかは自分のものにあわせて編集しておくと便利です(ymlの書き方毎回忘れていっつも諦めそうになります)

 

f:id:tarutexisu:20180306095638p:plain

 configのapplication.rbには日本語化用+時計の設定もしておきます

f:id:tarutexisu:20180306095600p:plain

 時間をもらうTimeメソッドとかよく使うと思うのですが合わせておかないとめんどくさいようです

これもっのすごい詳しい

qiita.com

 

 エラー表示が日本語になりました

f:id:tarutexisu:20180306100416p:plain

 

そしてモデルを作っていくのですがなにやらcreated_atにindexを付けてもorder_byで使用されない(検索高速化)されないようなので無視します

d.hatena.ne.jp

 

ここ一週間の人気パワーワードみたいに検索するときに遅くなったら嫌だなーと思いながらも、遅くなってから考えようと思います

こういうのってはまると気になって気になってひたすら無駄に調べてしまうのですが、調べ始めるまでのハードルがすごい高いです・・・

 

だから僕はニートでいつまでたっても無収入なのでしょう、悲しいから現実逃避します

キャンチョメ、「シン・ポルク!」

 

続きします

 

すみません、記事を更新じゃなくて新着で作ってしまっていました

f:id:tarutexisu:20180306102137p:plain

消して一つにします

 

 

 

f:id:tarutexisu:20180306102321p:plain

 

 OKです

 

続きします

 

rails generate model Pword content:text word:text user_id:integer point:integer stat:string created_ip:string img_url:string
rails generate model Comment content:text pword_id:integer user_id:integer stat:string created_ip:string

 

でつくってインデックスはってmigrateします

migrateとは実際にデータベースにそのモデルの内容(設計図)を反映させることです

 

モデルができたので

 1対多などの関係性とバリデーションも作っちゃいましょう

 

 多対多がないので助かります

f:id:tarutexisu:20180306103149p:plain

こんな感じに全部つけていきます

忘れてましたが、エディターはAtom使ってます

 

 ついでにバリデーションもつけておきましょう

バリデーションって考えるのめんどくさいですよね

 

userモデルは強くセキュリティにかかわるのでそれっぽいバリデーションにしておきます

pwordはどうしましょう

パワーワードを並べて表示したいのであんまり長すぎるとはじくようにしたいです

 

許容はスマホで16pxぐらいの文字が4行ぐらいですかね・・・?表示してみないとわからないので、100文字ぐらいにしておきます。もしかしたら短いかも・・・

 

dbカラムに直接バリデーションかけるよりも、モデルにかけておくとvalid?メソッドでバリデーションを通っているかなどが確認できるので助かります。

 

ガチガチに固めたいときはどっちにもバリデーションを付けるのがいい気がします

 

Pwordの内容(パワーワードの説明文)は物語的なものを入れる人がいるかもしれないので長めにとりたい

textは536870912文字まで入ってしまうそうなので、荒らされたときの見栄えが極端に悪くならなさそうな1500文字ぐらいにしておきます(超適当)

 

f:id:tarutexisu:20180306104733p:plain

 

コメントも1500文字ぐらいにしときましょ

 

そうえば、コメントとかも名前入れたりできた方がいい気がするので、表示名の場所もデータベースに作っておきます

 

ついでにPwordにも、もしログイン制だとしても毎回Userテーブルにアクセスさせたくないし、Userは消える可能性があるのでPwrodとCommentテーブルにsurface_nameカラム作っておきます

f:id:tarutexisu:20180306105321p:plain

 

 適当ですが表示名もバリデート100文字ぐらいにしておきました

開発環境の初めの方でmigrateやり直すなら

rails db:migrate VERSION=0がおすすめです初期化されます

 

マイグレーションファイル増やしたくない派なので僕はこれでやっています

ただindexをつけた状態でマイグレーションファイルを更新して、VERSION=0をやろうとすると、消すはずのインデックスないよと言われてエラーになるので、マイグレーションファイルを更新する前にVERSION=0をした方がいい気がする(バックアップはもちろん適宜とりながら(←良く取り忘れる))

 

 適当にコンソールでデータ入力して

f:id:tarutexisu:20180306110659p:plain

 とかがとおればつながりはちゃんとしているでしょうきっと多分maybe

 

モデルが出来たので早速画面、と投稿システムを作っていきます

 

 投稿ページから作っていきます

 

f:id:tarutexisu:20180306111040p:plain

こんな感じでしたね・・・汚い・・・

 

出来たらデザインも一緒にやっていけたらなーと思いますね

コンセプトはどうしましょう・・・

現実に即すと作りやすいですが僕はドヘタなので、偽マテリアルデザイン風な感じでいきます。

 

マテリアルデザインは好きなのですが細かい規約を読み込み、最適化させるモチベーションはニートには発生し得ません

 

ニート界の生ける伝説せせり神のような方ならおそらくバシバシッと勉強してしまうんだと思いますが僕は無理です・・・

 

いきなり出てきましたが、書いてしまったので紹介です

 

blog.sesere.net

 

こんな化け物じみた事を現実でやってしまう偉大なお方です

知らない方は是非読んでみてください

年齢的には僕の一つ上なのに26歳でアーリーリタイア・・・僕とはかけ離れた世界にいらっしゃり何度読んでも信じられません

 

「26歳でアーリーリタイア」

 

完全なるパワーワードです、覚えておきます

 

ちなみに僕は完全なるせりチル(せせりチルドレン)です、といっても過言ではありません

ゲームしかやってこなかったニートの僕が急にrailsなんて勉強してみようと思ったのは先ほどの記事を見たからなのです

(こんな記事なので絶対にないと思いますが、ご本人様が見られて不快な思いをさせてしまった場合は、すぐさまこのへんの記述を抹消させていただきます・・・勝手に意味不明な事言ってすみません・・・)

 

 

この記事を見たときの感情は入院してたら好きなプロ野球選手が合いに来てくれたみたいな感覚です

 

ニート界に希望をみました(ニート界といってもせせり神はネオニートの部類ですけれども・・・)

 

ニートレベルが上がるようにがんばっていきたいと思います

 

 さて投稿ページを作っていきます機能からつくります

でもキリがいいので休憩です

 

 ただいまです

やりたいと思います

 

その前にタイトルに(実況)とつけました

がんがん更新している事を示すためにです

 

名前倒れしないようにがんばりたいと思います、名前倒れた場合は罵詈雑言お願いします

 

f:id:tarutexisu:20180306141307p:plain

 

ちなみにはてなブログのテーマデザインは適当にきめてます

 

そんなこんなで「P.W」のデザインを考えなくては・・・

 

見出しが無い事に気づく

みなさん気づきましたか?このブログ超読みづらいです

そう、今回見出しつけるの一切わすれてましたので思い出したかのようにつけ始めてみたいと思います

 

またなくなったらすみません、装飾はしないと言っていましたが見出しはつけます

先に機能を

デザインの前に機能をつくっていきます

 このページに必要な機能は

・名前を投稿するフォーム

パワーワードの説明を投稿するフォーム

パワーワードを投稿するフォーム

ですね

 

後々機能追加するかもしれませんが、一通りできあがってからです

 なんども変更してすみません、その前に環境作り

 batファイルを作って、必要な環境がダブルクリックでザザザーっとなるようにしておきます

 

atom

はてなブログ

cyberduck

vagrant

putty

・メモ

・モデル図書いたoffice

とかです、puttyはbashprofileにcdとか書いといて作業ディレクトリに飛ぶようにしておきます

 

ちなみにbatファイルに日本語かくと成り立たせるのがめんどくさいので英語にしたほうがよいです多分

 

 

f:id:tarutexisu:20180306144104p:plain

こんな感じで起動したいやつらのショートカットを一つのフォルダに集めて

 

f:id:tarutexisu:20180306144218p:plain

start.batに起動したいやつらを書けばokです

callはその処理が終わるまで次を実行しないです、cyberduckputtyvagrantが起動してからログインしてほしいのでこうしてます

 

これで次回からつけるのが簡単になりましたいぇーい・・・

これぐらい作業のハードルを下げていかないと本当に何もしない・・・

 

投稿画面の機能をつくる

 もどります

 

 あぁー全然デザインが決まらない・・・

 

パワーワードなのでやっぱ暑苦しくテーマは「火山」でいきたいと思います(迷走

テーマカラーは濃いめの赤、やっぱり小ぎれいにしない方がいいかなー

 

f:id:tarutexisu:20180306151156p:plain

 

コンセプトアートこれでいきます、コンセプトアートとか言っておけばカッコイイしやる気になりますはい

ただ僕の感性はおかしいかつセンスがないので、変なものが出来る可能性はもっておいてください

 

めちゃくちゃにダサいふうに押していこうか、ちょっとデフォルメした火山のようにして居心地良い感じを押していこうか迷う・・・

 

でもあんまり汚いとウィルスサイトみたいに見えてしまいそうだ・・・

うーむ

 

 

f:id:tarutexisu:20180306160140p:plain

色だけつけて何かわいてこないか考えてみましたが、なかなかですね、そもそも背景を暗くするのはナンセンス感がすごい

 

くしゃくしゃの紙にしてみようかな

 

f:id:tarutexisu:20180306173233p:plain

ごめんなさい、違う事してました、相変わらず迷走してます

 

ただ進んだものもあります

 なんかキャラクター系にしようかと思いパワーワード投稿サイトのキャラクターを作りました

 

パワーワードサイト(インパクトのある言葉)のキャラクターなのでインパクトを持たかったです

 

パワー=筋肉、出来上がったキャラクターがこちら

f:id:tarutexisu:20180306173631p:plain

「パワーチャンピオン君」です

 

いやぁいいキャラができました、ついでに「パワーチャンピオン君」をもとにアイコンを作りました

f:id:tarutexisu:20180306173853p:plain

並べるとこう

 

f:id:tarutexisu:20180306173913p:plain

 

なんか「ハーイ!」っていいそうですけどオリジナルアイコンです

こいつを多用していこうかなと思います

 

ちなみにパワーチャンピオン君はすでにフォント化もしてあります

 

パワーチャンピオン君を書くのにすごい手間取っていました、最終的にパブリックドメインのものを繋げ合わせて大きく付け足した感じになりました

 

パワーチャンピオン君のいいところはアレンジのしやすさ

f:id:tarutexisu:20180306174321p:plain

 

f:id:tarutexisu:20180306175621p:plain

きっとグッズ展開も多種多様です、みなさんパワーチャンピオン君を盗っちゃだめですよー

 

 いらすとやさんもパワーチャンピオン君二人と記念撮影すればホラこの通り

f:id:tarutexisu:20180306180954p:plain

 

なんにでも相性がいいですね、画像界の明太マヨです

 

 アイコンが潰れるから修正

f:id:tarutexisu:20180306190112p:plain

 

 フォントでつかってみたのですが、これよりもシンプルな図形にしないととても使えないようです

 

シンプル化します、ついでに太くしてちょっとアレンジ

f:id:tarutexisu:20180306190256p:plain

どうでしょうか・・・もう見すぎて何がいいのかさっぱりわからなくなってきました

足の空白の量とか調節してやっとフォントで(デザインはさておき)なんかまともに使えるものになりました・・・

f:id:tarutexisu:20180306192947p:plain

帰ってくるか分からない休憩します

ごはんつくって洗濯します