2018-09-30

チャットアプリ開発① グループ機能〜 paramsで配列を使う【week 4】

こんにちは、Manamiです！

  スクールで勉強し始めて、ちょうど1か月になりました。（早い…！）今週は、個人でのチャットアプリ開発と、チームでの写真投稿アプリ開発の2つの課題を同時進行で進めており、なかなか盛りだくさんの1週間でした。  

チャットアプリ

このような形で完成しました！ 2つのウィンドウで別々のユーザーがお互いにメッセージを送っている様子です。  

テキストだけでなく、写真も送れます！  

 開発期間は約2週間でした。メインのフレームワークはRuby on Rails (5.0.7) フロントのコーディングはHamlとSassで行いました。また非同期通信を実装するためにJavaScript（jQuery）を使いました。

おもな機能

ユーザー機能
グループ機能
メッセージ投稿機能（非同期通信）
自動更新機能

全体を振り返るとかなり長くなりそうなので、今回はグループ機能の実装について書いていきたいと思います！  

グループ機能

ユーザーはまずチャットグループの作成・編集をすることができます。チャットメンバーを選択する際は、インクリメンタルサーチでユーザーを検索し、追加ボタンからグループに追加することができます。

グループ作成機能での実装のポイントは、「paramsで複数のユーザーIDを配列として渡す」というところです。グループには複数のユーザーが所属するため、そのメンバー全員の情報が必要だからですね。    頑張って説明してみたいと思います…！

モデル

 まず、groupモデルはこのような形になっています。userモデルとgroupsモデルは多対多のアソシエーションになっています。（userは複数のgroupを持つ、groupは複数のuserを持つ） そのため、group_usersテーブルを中間テーブルとして設けています。 また、name（グループの名前）は必須項目になっています。  

class Group < ApplicationRecord
  has_many :group_users
  has_many :users, through: :group_users
  has_many :messages
  validates :name, presence: true
end

ビュー

 ごくごく簡単に書くと、グループ作成のフォーム部分の基礎はこのような形になっています。

 <form action=“/groups” method=“post”>
　 <input name=“group[name]“ type=“text“>
    <input name=“group[user_ids][]“ type=“hidden“ value=“1“>
　<p>たろう</p>
    <input name=“group[user_ids][]“ type=“hidden“ value=“2“>
　<p>じろう</p>
    <input name=“group[user_ids][]“ type=“hidden“ value=“3“>
　<p>さぶろう</p>
   <input type=“submit” value=“登録する”>
</fom>

ユーザー情報用のinputタグに name=“group[user_ids]“ のようにname属性を定義し、valueにそれぞれのユーザーIDを持たせます。 name属性に空のを含めることで、valueを配列として受け取ることができます。さらに、type属性を type=“hidden“ として非表示にします。

 実際に送られるparamsの中身はこのような形になります。

(#<GroupsController>)> params
=> <ActionController::Parameters {"utf8"=>"✓", 
"authenticity_token"=>"TDVv76FLtpPSp+3pTJ8hsP+TkQ/0xR6tyltE5GNJJBsnvizl6bwAGEvTYT9HIuoIv6VWkV1mgQktYEHhiRVhlg==",
"group"=><ActionController::Parameters {“name” => “グループ名”, user_ids"=>[“1”, “2”, “3”]} permitted: false>,
"commit"=>"登録する", "controller"=>"groups", "action"=>"create"} permitted: false>

groupに関するデータは “group”=> {“name” => “グループ名”, user_ids"=>[“1”, “2”, “3”]} という形でハッシュとして渡され、そのなかでユーザーIDを配列として受け取ることができました。

コントローラ

 groupsコントローラではストロングパラメータを定義しています。requireメソッドを使ってgroupsのハッシュを取得します。さらに、配列データを許可する場合は user_ids: [] のように書きます。 

class GroupsController < ApplicationController
   
private
  def group_params
    params.require(:group).permit(:name, user_ids: [])
  end
end

このようにして「paramsで複数のユーザーIDを配列として渡す」ことができました！

実際はこれをベースにしてJavaScriptで追加ボタンを実装しているのですが、それはまた次回にしたいと思います…！

2018-09-18

【week 3】オリジナルブログアプリを作りました！

こんにちは、Manamiです！

3週目になります今週は、これまでの復習を兼ねてオリジナルブログアプリを作成するという課題がありました。

そこで作成したアプリと開発を通した学びについて書きたいと思います。

作成したもの

mirai-blog という名前のアプリです！

コンセプト

未来の日付を設定して「夢が叶った」「目標が達成した」という体でブログを書く
目標が達成した時のことを具体的にイメージすることで、モチベーションを上げる！目標に近く！

開発環境

- ruby 2.3.1
- Rails 5.0.7
- MySQL 5.6.41

実装した機能

- ユーザー機能：サインアップ、ログイン、ログアウト
- ブログ機能：テキストと画像ファイルの投稿・編集・削除、任意の未来の日付を選択

利用したgem、フレームワーク

- devise (github)

ユーザー機能の実装に利用しました。

- materialize-sass (github)　　

Materializeは、マテリアライズデザインに基づいたデザインが簡単に作成できるCSSフレームワークです。今回はそのgemを利用して、ビューの実装を行いました。

こちらの記事を参考にさせていただきました。

liruu.com

- font-awesome-sass (github)

Font Awesomeは、Webアイコンフォントを利用できるサービスです。最新のFontAwesome5に対応しているこちらのgemを利用しました。

- carrierwave (github)

ファイルアップロード用のgemです。画像の投稿機能を実装するために利用しました。

こちらの記事を参考にさせていただきました。

- mini_magick (github)

こちらは画像ファイルの処理（リサイズ等）ができるgemです。

- Unsplash

投稿用のサンプル画像はこちらからお借りしました。どれも素敵な写真ばかりのフリー素材のサイトです。

unsplash.com

工夫した点

●フロントのデザイン

モチベーションが上がるような明るい見た目にしたかったので、MaterializeとFontAwesomeをフル活用してビューを実装しました。
Materializeは要素のクラスに”text-blue”や”center”と指定するだけで簡単にCSSを利用できました。FontAwesomeは無料で利用できるアイコンが豊富にあり、マテリアルデザインとの相性も抜群でした。

リンクをアイコンで表示したい場合、下記のようにブロックを使ってlink_toに埋め込む書き方を学びました。

```
<%= link_to edit_post_path(post) do %>
<%= icon('fas', 'edit', class: "grey-text") %>
<% end %>
```

（※ Materializeにもアイコンが用意されているのですが、勉強のためにあえてFontAwesomeを利用しました。）

●日付選択の機能

このアプリのメインコンセプトにつながる部分なのですが、これはフォームヘルパーのdate_fieldメソッドを使って実装しました。そこにMaterializeで用意されているDatePickerというコンポーネントを利用して、カレンダーのポップアップから日付を選択できるようにしました。
Materializeを利用しなくても、date_fieldメソッドだけでセレクトボックスorカレンダー形式で日付を選択するフォームを実装することができます。

今後さらに追加実装したい機能

- コメント機能（勉強中の非同期通信を使ってみる）
- いいねボタン・応援ボタン
- 「目標達成まであと何日」のようなカウントダウンの表示
- 実際に達成したときに「おめでとう！」のような表示をしたり、達成した後の投稿を追加できたり（考え中）
など

学んだこと・気づき

自分のアイディアを実際に形にする作業が単純にすごく楽しかったです。今までやってきたRailsのカリキュラム・チュートリアルは全て「お手本」と「ゴール」があり、それと同じものを作るという経験だったので、ゼロから自分の自由に開発するという経験は純粋に初めてでした。やればやるほど「こうしたい！」というアイディアが湧いてきて、アドレナリンが出まくっていました。そして、アプリにすごく愛着が湧きました。（ピンクがかわいい。）今はまだ簡単なものですが、今後どんどん育てていきたいと思います。

また、自分の現在のスキルを客観的に把握する機会にもなりました。特に実装のスピードという面で、自分の見積もりより実際の作業は2倍くらい時間がかかってしまいました。頭では分かっているつもりでも、実際にコードを書いてみると望みと違う動きになったりエラーになったり…。与えられた期間のなかで、自分は今これ位のことができる（＆これ位しかできない）んだなということが分かりました。

上述のアイディアの話にも繋がりますが、作業をしているうちにどんどん新しいことを思いついて→書き直して、というように思いつきで作業をすすめてしまっていたことも非効率的だったと思います。それも「お手本」と「ゴール」があるなかでは気づけないことなので、今回よい学びになりました。

開発最終日にはアプリの発表会を行いましたが、そこで同期の作品を知ることができたのも大きな刺激になりました。旅ブログ、俳句ブログ、スタ◯ウォーズブログ、「ロック様」ブログ、合言葉が必要なブログなど、個性豊かなアイディアに溢れていました！ブログアプリという同じテーマのなかでも完成形はひとつずつ全く異なっていた様子を見て、その自由度の高さというおもしろさを感じつつ、だからこそアプリのコアになるアイディアが重要になるんだなと思いました。

来週からはチーム開発の第1弾がはじまります。今回の学びを生かして、引き続きがんばっていきたいと思います！

2018-09-11

【week 2】今週学んだ3つのこと

こんにちは、Manamiです！

早くもスクールでの2週間目が終了しました。毎日楽しみながら苦しみながら学んでいます。
同期メンバーとも毎日顔をあわせるのですっかり仲良くなりました！学んだことを言葉で伝えあったり、分からないところを教えあったり、一緒に学ぶ仲間がいることで学びの深さもスピードもあがっていると感じます。

今週学んだこと

JavaScript, jQueryの基礎
Git, GitHubの基礎
SQLでのデータ検索
チャットアプリ作成：データベース設計、チャット画面の実装（途中）

そのなかで3つピックアップして詳しく書いていきたいと思います！

jQueryを使ったインクリメンタルサーチの実装

このようなフルーツ検索アプリを作成しました。

検索ボックスに文字を文字を入力すると、その候補の検索結果が出てきます。このように入力のたびに即座に候補が表示される検索方法をインクリメンタルサーチと言います。Twitterの検索窓にも実装されていますよね。

初めはとにかくコードを読むことから始めました。テキストの模範コードとにらめっこしながら、調べる→自分なりの言葉で説明コメントを入れるを繰り返しながら処理の流れを頭に入れていきました。

実際のコメントはこんな感じです！

f:id:penguin_note:20180911135537p:plain

ざっくりとした処理の流れ
　① フルーツの名前が入った配列を定義
　② フォームに入力されるごとに、入力された文字列を変数として定義
　③ 文字列のあたまに「^」をつけて前方一致の正規表現として定義
　④ eachメソッドを使って、正規表現とフルーツ配列の要素をひとつづつ比較
　⑤ 一致するものがあれば、配列の要素を<li>フルーツ名</li> としてリストに表示する
といった具合です。

現在作成しているチャットアプリでも、「ユーザー検索」としてこのインクリメンタルサーチを実装する予定なので、復習しつつさらに理解を深めていきたいと思います。

チャットアプリ作成開始！

10週間のカリキュラムの大枠は、基礎カリキュラム→応用カリキュラム→チーム開発となっているのですが、チャットアプリ作成は応用カリキュラムのメイン内容になっています。今週は、データベース設計とチャット画面の実装まで行いました。

まず、見本のアプリを実際に操作しながら、どんな機能が必要か？どんなデータが必要か？考えます。そしてそれらを書き出しながら、必要なテーブル、カラム、アソシエーションなどをまとめて記述しました。

今回は「多対多」のアソシエーションを設定するために中間テーブルを設けるというのがポイントでした。

具体的には、
　・userは複数のチャットgroupを持つ/属する

　・チャットgroupは複数のuserを持つ

といった関係のところに、中間テーブルとしてgroup_usersテーブルを作成しました。

そして、

　・users has_many :groups, through: group_users
　・groups has_many :users, through: group_users

といった具合に、membersテーブルを経由するように定義します。

こちらの記事がとてもわかりやすく参考になりました！

qiita.com

GitHub かっこいい。

プログラミングを勉強し始める前から、「どうやらエンジニアはGitHub（とSlack）という便利なものを使っているらしい」ということは知っていました。とうとう私もそれを使う日が来るとは…！嬉しい。
「かっこいい」って単純なんですが、自分の中ではすごくモチベーション上がります。macbookで、dark themeなtext editorで、GitHubでsmartにpull request! みたいな。笑

実際にメンターさんへのレビュー依頼はGitHubのプルリクエストで行います。コメントをいただいて、修正をして、コミット、再度プッシュしてという流れを繰り返すうちにだいぶ慣れてきました。いまは自分一人だけでアプリ開発をしているので変更点などすべて把握できる状態ですが、チーム開発や実際の就職後の業務など複数人での開発環境ではさらにGitHubの本領が発揮されることでしょう！

ツールだけではなく、使いこなす本人ももっと「かっこよく」なれるように✨
引き続き頑張ります〜！

ツイッターもやってます♪

twitter.com

2018-09-03

【week 1】スクールで学び始めてできるようになった3つのこと

こんにちは、Manamiです！

TECH::EXPERTというITスクールでプログラミングを学び始めて、ちょうど1週間が経ちました。
この1週間どんなことを学んだか？どんなことができるようになったか？振り返ってみます。

学んだこと

基本的にはすべてカリキュラムに沿って勉強していました。実は受講開始の2週間前から事前学習期間という期間があり、そこで（ほとんど分からないながらもとりあえずは）ひと通り1周していたので、カリキュラムを2周目するところからスタートしました。

HTML/CSSの基礎問題 × 2周
Rubyの基礎
Ruby アプリ作成（8個くらい）× 2周
Ruby on Rails の基礎、ローカル開発環境構築
Rails テキストツイートアプリ作成 × 3周
Rails 画像ツイートアプリ作成 × 4周
Rails エラー対処ドリル × 4周
Rails レビューアプリ作成 × 1周

こうやって書いて見ると、なかなか盛りだくさんですね…！

1日の勉強時間は短い日（日曜日）が5時間、長い日が11時間、平均すると8〜9時間くらいでした。

できるようになったこと

1. Rubyで（初）オリジナルのアプリが作れるようになりました

「勉強ログアプリ」を作りました！日付・勉強時間・勉強内容を記録して、その記録を参照できるアプリです。カリキュラムを参考にしつつ、オリジナルで「1日の勉強時間が長い順のランキング」を追加で実装しました。

実際に動かしてみるとなかなかシンプルで簡単なものなのですが、自分でアイディアを考え→それをコードにする→テスト→完成！という一連の流れを初めて経験しました。完成した時はとても嬉しくてトレーナーさんに自慢しました。笑

2. Railsでツイートアプリが作れるようになりました

カリキュラムを通して2種類のツイートアプリを合計9回作成しました。ツイート投稿機能だけでなく、ツイート編集・削除機能、コメント機能、ユーザー登録・ログイン機能も実装しました。

スクールに入る前は、Railsのローカル開発環境を整えるところで挫折してしまっていたので、自分のブラウザで実際に動くものが作れるようになったときは感動に近いものがあり…とてもやりがいがありました。

3. エラー文を読んで、原因を考えて直せるようになりました

これがこの1週間で最も成長した点だと思います。以前は、なにかエラーが発生した際にそのエラー文の意味がほとんど分かりませんでした。今思えば当然のことで、アプリがどんな仕組みで成り立っていて、そこにはどんなコードが書かれていて、ということが把握できていないのに、エラーを理解することなんて絶対できないんですよね。

具体的には、こんなことがあったり、

qiita.com

こんなことがあったりしました。

qiita.com

実際のエラーにぶつかる→解消するというプロセスを繰り返していくうちに、エラー文の意味やそれに沿ってなにを確認・修正すればよいかが分かってきました。さらに、原因を見つけるために処理の途中経過を確認するためのツールも使用できるようになりました。

エラーやバグを発見して修正できる「デバックスキル」はWebエンジニアにとって！必須！だと思うので、今後もどんどんスキルアップしていきたいと思います。

Week2の予定

今週からは応用カリキュラムに入ります！まずはJavaScriptやjQueryを利用したフロントサイドの基礎を学びます。その後、GitとGithubについて学び、チャットアプリの実装に入っていく予定です。

かなり実践的な内容が目白押しなので、気合いを入れて楽しんで勉強していきたいと思います！

Twitterもやってます

ぜひフォローしていただけたら嬉しいです😊

twitter.com