エクスパート3週目

f:id:katsuodashisp:20180819234642p:plain

どうも、アマツチです。

3週目の進捗報告をさせていただきます。

 

tech-camp.in

 

まず進捗はこちら。

f:id:katsuodashisp:20180902174154p:plain

先週と比べると少し伸び悩んでいますが、全体の7割は超えました。

 

さて今週はミニアプリの実装も平行して行いました。

railsの理解がどれだけできているかの確認と、自分で一から実装することで自身をつけることが目的のようです。ちなみにビューについては、Materializeのテンプレートを使い実装しています。

archives.materializecss.com

ここに載っているテンプレートを使えば誰でも一流のデザイナーの見た目を使うことができるそうですが、その代わりcssで一部いじれなくされてるので思ったような形になってくれないのが玉に瑕ですね。

 

そんなこんなで出来上がったのがこちら。

f:id:katsuodashisp:20180903091630p:plain

ある程度railsのカリキュラムに準じたものが出来上がりました。

ログイン機能、投稿機能、詳細機能、投稿者には編集機能と削除機能のボタンが表示されるようにしています。ヘッダーとフッターは画面端で固定しています。

 

これだけではミニアプリの最低基準を満たしているだけなので二つほどアレンジを入れました。

一つはHTMLではなく、Hamlでの実装です。ちなみに投稿の中はこうなっています。

f:id:katsuodashisp:20180903092428p:plain

chatspaceをhamlマークアップをしろって課題が難しく感じたので、ミニアプリで練習しようと思い実装しました。

序盤は変換サイトにたより、どう変わるのかを見ていました。途中からhamlの違いはカッコがないのと、それをインデントで表現していることに気づきボタンの機能もいじることができました。

もう一つはこれ。

f:id:katsuodashisp:20180903093649p:plain

画像アップロード機能をついに実装することができました!

これいろんなところで画像アップロードのことを聞かれたので、どうしてもおさえて起きたかった機能で、ほんと嬉しかったです。

carrierwaveってgemを使いました、使い方の一例を載せて起きますので、きになる方は参考までに。

qiita.com

ミニアプリの後に再度マークアップにチャレンジしてみると、一から組み上げ他とは思えないくらい結構サクサク進み、

f:id:katsuodashisp:20180903093856p:plain

はい!綺麗な見た目ができました!

これを作る上でポイントだなと思ったのは、右側のメッセージ欄およびフォームの幅は可変させなければならないところと、フォームの上に画像アップロード用のアイコンを配置させなければならないというところでしょうか、今回はあえて隠しますがうまくいくとiphoneとかでも形が崩れなくなります。

 

次週からchatspaceとチーム開発を同時進行で行う必要が出てきました。僕はその副リーダーとして全体の成果物を繋げる役回りになるかと思います。正直難しい・・・。

 

では、今週も頑張ります。またね。