TECH::EXPERTミニアプリの感想 - TECH::EXPERTでWebエンジニアを目指す

f:id:yuuma_pg:20190511231019p:plain

ユウマです。

先週ミニアプリの発表があったので、自分の作ったアプリの紹介と感想を書きたいと思います。

先週の記事でも書いたように、キックオフから２週間が経過するとミニアプリの制作が指示されます。アプリの内容は簡単なブログのアプリで、必須の機能としては

・ユーザーが新規登録・ログイン・ログアウトできること。

・ログインしたユーザーが記事を投稿・編集・削除できること

・ログインしていないユーザーは記事の閲覧のみができること。

です。

僕はさらに以下の機能を追加してみることにしました。

・記事一覧では１ページに最大で５つの記事が表示される。

・記事一覧では、１つの記事は本文の量によって大きさが変わり、最大で５行まで本文が表示される。それ以上ある場合は三点リーダーが表示されるようにして省略していることを明示的に表す。

・記事の詳細ページでは本文は省略されない。

・記事の投稿ページで「下書きとして保存」を選択できるようにし、下書きの記事は他のユーザーからはみることができない。

あまり機能を追加しても、作るのに時間がかかり過ぎてしまってカリキュラムの進捗に支障が出てしまうのでこのくらいにしておきました。

f:id:yuuma_pg:20190511233040p:plain

記事はカード式にして、カードをクリックすると詳細ページに飛ぶようにしています。編集・削除ボタンは自分の書いた記事にしか表示されません。投稿者名をクリックすると、その人が書いた記事一覧のページに飛ぶことができます。

また、下書き中の記事にはカードの右上に「下書き中」と表示されるようにしています。

ユーザーがログイン中の時は、マイページ・新規投稿・ログアウトが表示され、ユーザーがログインしていない時はログイン・新規登録が表示されるようにしています。

f:id:yuuma_pg:20190511234416p:plain

記事詳細画面では本文が省略されません。

f:id:yuuma_pg:20190511233855p:plain

投稿画面にはタイトル・本文を入力できるようにし、「下書きとして保存する」にチェックを入れることで下書きの記事になります。

基本的には基礎カリキュラムで学習した内容で作れるので、Railsの基本機能の良い復習になりました。

また、プラスαの機能については自分で調べながら実装したのですが、カリキュラム内にはなかった技術が必要だったので色々と勉強になりました。

今回のアプリの見た目部分は「materialize」というサイトを利用して作りました。materializeにはhtmlがひとかたまりになったパーツのようなものが置いてあり、それをコピペするだけで簡単にhtmlを作成することができます。

さらに、事前にclass名にcssが適用されているので、Bootstrapのようにclass名をつけることによってデザインを変えることができます。(Bootstrapほど自由度は高くありませんが)

なので、あまり時間をかけずにシンプルかつオシャレな見た目に仕上がりました。（公式ページを見て、どのclassをつけるとどのようなデザインになるのかの学習に少し時間はかかりましたが・・・）

正直カリキュラムを進めるより、アプリを作っている方が楽しかったです。時間を忘れて作ってました・・・

とまぁ、簡単なアプリでしたが楽しく作ることができました。

次は個人アプリ制作を頑張りたいと思います。それでは！！