2020-07-07

個人開発⑥ ~ログインページの作成~

　アプリを使うために必要なログイン機能を付けていきます、今回はいくつかの入力を分けて登録出来るように”ウィザード形式によるログイン機能”を実装します

〜今回の記事の内容〜

☆Gem 'device' の導入

　　　　 ⬇︎

登録画面の作成

⬇︎

ルーティングの設定

ウィザード形式とは？

ウィザード形式とは、利用者に一つずつ質問や設定項目を提示し、対話的に処理を進める操作方式のことを指します。コンピューターからの質問に答えながら、設定や登録を行うようなイメージです。

現在どの情報を入れているか分かっていると入力しやすくなります。

f:id:natori_gorira:20200706200749p:plain

f:id:natori_gorira:20200706200809p:plain

f:id:natori_gorira:20200706200824p:plain

Gemの導入

今回はウィザード形式実装とういうことで、”devise”というGemを使用します

gem 'devise'

記述後に$ bundle install

$ bundle install

アプリケーション内でdeviseを使えるようにするため、下記のコマンドを実行

$ rails g devise:install

User(devise管理下）作成するため、下記のコマンド実行
userモデルとマイグレーションファイルが作成されます

$ rails g devise user


出来たファイルに今回の”会員情報”のモデルのバリデーションなどを書き込みます

userモデル

f:id:natori_gorira:20200707225946p:plain


userマイグレーションファイル

f:id:natori_gorira:20200707230847p:plain


マイグレーションファイルは最初に作られた際、メールとパスワードのみですので”会員情報”に入れたい情報記述します


モデルやマイグレーションファイルを初期の状態でdb:migrateしてからviewを編集する方が作りやすいですが、今回はこのまま進めていきます

下記のコマンドを実行します

$ rails db:create

こちらでrails_developmentとrails_testを作成します

次にこちらを実行

$ rails db:migrate




今回はここまで！次回はview画面作成について書いていきます！

2020-07-01

個人開発⑤ ~トップページの作成（メインコンテンツ）~

トップページ作成についてはこれで最後になります

　〜今回の記事の内容〜

Gem、（haml、SCSS）の導入

ルーティング、@importの設定

　　　　 ⬇︎

ヘッダー、フッターの作成

⬇︎

☆メインコンテンツの作成

メインコンテンツの作成

メインコンテンツも後々作り足しも出来るように、パートを分けて作りながらアプリとして意味を持たせることを意識しました

最低でも３つの意味が必要と考えました、それが、”アプリとしての特徴”、”誰のためのアプリか？”、”アプリの使い方”です

f:id:natori_gorira:20200625123920p:plain

サイトのイメージ（main.one）

開いて最初に目に付く部分なので、目を引けること、これが何のWebアプリなのか？とイメージを持ってもらうために画像をスライドショーで流すことを考えました

スライドショーですが、JavaScriptを使用せず、CSSのみで作成しています

natori-gorira.hatenablog.com

f:id:natori_gorira:20200701101531g:plain

アプリの紹介（main.two）

写真や文字が左右交互にするためにCSSで”flex-direction: row-reverse;” を使用しました、”display: flex;”を併用することで写真と文字を入れ替えることが出来ました

f:id:natori_gorira:20200701153934g:plain

アプリの使い方（main.three）

縦に並列して並んでます、特徴として写真の間に一つ要素を挟むことでバランス良く並べることが出来ました

f:id:natori_gorira:20200701155234g:plain

f:id:natori_gorira:20200701154846g:plain

スプーンの作り方（main.four）

自作スプーンを出品できるというコンセプトがあったので、作り方を紹介する動画をyoutubeを利用して埋め込むことが出来ました

natori-gorira.hatenablog.com

f:id:natori_gorira:20200701160008g:plain

メインコンテンツの作成については以上になります！

今回はここまで！続きはまた次回！

2020-06-27

個人開発④ ~トップページの作成（ヘッダー、フッター）~

　前回、haml、SCSS、の導入は済んだのでトップページを作っていきたいと思います。

　〜今回の記事の内容〜

Gem、（haml、SCSS）の導入

ルーティング、@importの設定

　　　　 ⬇︎

☆ヘッダー、フッターの作成

⬇︎

メインコンテンツの作成

　トップページはボリュームがあるので、"render"を使いいくつかに分けることで、管理しやすく、コードも読みやすくすることを意識しました

f:id:natori_gorira:20200625115520p:plain — ヘッダー、フッター、メインコンテンツ４箇所でトップページを構成しています

ヘッダーの作成

main/indexがトップページになります。部分テンプレートとして利用数ため”_top.html.haml”としてヘッダーを作ります

indexページで表示するために”= render partial: "top" ”と記述することで、表示できるようになります

f:id:natori_gorira:20200625123920p:plain

f:id:natori_gorira:20200625124212p:plain — ヘッダーで色々なアクションができるように”ログイン”などを含ませました

f:id:natori_gorira:20200626080142g:plain — 様々なアクションを加えてみました

カーソルを乗せた時に光るのは”:hover”の擬似要素で実装出来ましたが、ボタンを押した時に下層へ移動させるアクションを実装するには、JavaScriptを利用しました

今回はjQueryを導入して記述しています

jQueryを導入していない方は下記の記事を参考にどうぞ！

natori-gorira.hatenablog.com

下層へ移動させる方法としてはボタンと移動させたい下層ページのidをJSによって結びつけることでした

_top.html.haml

f:id:natori_gorira:20200627091316p:plain — #questionと指定の下層ページを結び付けます

_main.tow.html.haml

f:id:natori_gorira:20200627091543p:plain — #questionがヘッダーのボタンと結びついてます

app/assets/javascriptsにJSファイルを作成し記述します

main.js

f:id:natori_gorira:20200627091726p:plain — この記述はコピペでも使用可能です！

ここまで行えば、JSを利用して下層へ移動出来るようになっています

フッターの作成

今回のフッターの特徴は出品ボタンの固定です

f:id:natori_gorira:20200627092508g:plain

コードもそれほど難しくなくHTNLとCSSのみで作成しています

_under.html.haml

f:id:natori_gorira:20200627092828p:plain

under.scss

f:id:natori_gorira:20200627093058p:plain — position: fixed;がボタン固定の役割をしています

出品ボタンもコピペで使えますので試してみてください

今回はここまで！続きはまた次回書いていきます！

2020-06-26

jQueryの導入

　今回書くほどの量はないのですが、開発する時によく使うことになるかもしれないと思い、個人的な備忘録を兼ねて記事にします

jQueryとは？

jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScript ライブラリである。

出典: Wikipedia

上記のようにJavaScriptを簡潔にかけるようにするくらいの認識で良いと思います

jQueryの導入は簡単です！

まず、Gemfileへ下記を記述

Gemfile
 gem 'jquery-rails'

bundle installを実行

ターミナル
 $ bundle install

app/assets/javascripts/application.jsに以下の行を追加します

 //= require jquery
 //= require jquery_ujs

ライブラリを使用するために下記のリンクから一文をコピーして貼り付けます

https://developers.google.com/speed/libraries/#jquery

f:id:natori_gorira:20200626111802p:plain

通常はこちらを<head>~</head>の間へ貼り付ければOKです！

hamlを使用している場合はコチラを使用してください

 %script{:src => "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"}

書き換えた一文をapp/view/layouts/application.html.hamlへ記述します

f:id:natori_gorira:20200626112631p:plain

これでjQueryの導入は完了です、簡単なので使ってみてください！

2020-06-24

個人開発③ ~トップページ（haml、SCSS）~

　今回はトップページの作成です。

前回はアプリの立ち上げとして、REDAMEなどについて書きました。

natori-gorira.hatenablog.com

まず、サイトの顔となるトップページを作成し、視覚で確認した方がイメージを持って作りやすいのでは？と考えました。

〜今回の記事の内容〜

☆ Gem、（haml、SCSS）の導入

ルーティング、@importの設定

　　　　 ⬇︎

ヘッダー、フッターの作成

⬇︎

メインコンテンツの作成

haml、SCSSの導入

viewをhamlとscssで書いていくためにGemを導入します

Gemfileに’haml-rais’を記述して$ bundle install

Gemfile
 gem 'haml-rails'

 $ bundle install

これで、hanlの導入は完了ですが、現在ファイルの語尾に”.env”がついているものもあると思います。”.env”ファイルがある方はターミナルで $ rails haml:replace_erbsを入力します。

 $ rails haml:replace_erbs

これで、”.env”から”.haml”に変化しました

続いて、SCSSですが手順は単純で、app/assets/styleseetsにあるCSSファイルをSCSSファイルに名前の変更をするだけでOKです！

f:id:natori_gorira:20200624134103p:plain — こちらの”CSS”部分を変更

f:id:natori_gorira:20200624134140p:plain — ”SCSS”へ変更

SCSSを使用する際は＠importを使います

f:id:natori_gorira:20200624134620p:plain — 今回のトップページを作るために用意したSCSSファイルです

application.scssへ＠import "フォルダ名/ファイル名";と記述することで作成したSCSSファイルを使用することが出来ます

※ファイルによって分けてもクラス名が同じだと、他のviewにも影響を及ぼすため、クラスの名付けには被らないように注意することが必要です

このアプリにはいくつもViewを用意する必要があったため、管理しやすいように細かくフォルダを分けることを意識しました

　　　　　　　　　　　　　 f:id:natori_gorira:20200624140433p:plain

続いてルーティングを設定し、トップページを見れるようにします

config/routes.rbを開き、root "main#index" を記述します

routes.rb
 Rails.application.routes.draw do
 root 'main#index'
 end

viewは $ rails g controller コントローラー名でコントローラーと一緒に作ることが出来ます、ターミナルにて実行

 $ rails g controller main

view/mainのフォルダが作成されたので、その中にindex.html.hamlファイルを用意します

f:id:natori_gorira:20200624142713p:plain

これでview/main/indexがhttp://localhost:3000/で立ち上げたときに表示されるようになります

ちょっと余談で通常ならコントローラーにもアクションを書き込む必要がありますが、root ~ の指定をしてる場合はそのまま表示することが出来ます

 class MainController < ApplicationController
 def index
 end
 end

indexアクションは用意しなくても大丈夫です

今回はここまで！続きはまた次回書いていきます！

2020-06-19

個人開発② ~Gitリポジトリ、DB設計~

　今回は以前も行なったGitへのリポジトリとアプリのDB設計について書いていきます。

〜今回の記事の内容〜

　コンセプト、構想を練る

　　　　⬇︎

アプリを立ち上げ

　　　　⬇︎

☆Gitを利用して管理

⬇︎

☆DB設計（データベース設計）

Git、GitHubを利用した管理

以前も記事にして書いてましたが、再びここで書いておきます。

GItHub　Dasktopをまだダウンロードしていない方はこちらからダウンロード出来ます

Mac版GitHub Desktopのダウンロードリンク

natori-gorira.hatenablog.com

※上記と内容はほぼ一緒です

左上の「Current Repository」→「Add」→「Add Existing Repository」を選択します。

f:id:natori_gorira:20200610110653p:plain

f:id:natori_gorira:20200610111435p:plain — Chooseをクリック

f:id:natori_gorira:20200610111553p:plain — ローカルリポジトリにしたいファイルをクリック

f:id:natori_gorira:20200610111646p:plain — Add Repositoryをクリック

①にコミット名、②をクリックしてコミットします。

f:id:natori_gorira:20200610113448p:plain — コミット名は分かりやすい名前をオススメします

Publish repositoryをクリックします。

GitHub Desktop では、Publish ボタンを押すとリモートリポジトリが作られていない場合にリモートリポジトリも作ってくれます。

f:id:natori_gorira:20200610120409p:plain

モーダルが現れます。公開するかのチェックですが、後からGIthubで変更も出来ます。

決めたら、Publish repositoryをクリックします。

f:id:natori_gorira:20200610115739p:plain — 公開したくない場合はチェックを入れます

ここまで完了すれば、GitHubにリポジトリが作られています。

あとはブランチを作成する準備として現在の情報をコミットします

写真は開発途中のものです

f:id:natori_gorira:20200618104740p:plain — コミット名は”first commit”にしました

ここまででGitのリポジトリで管理することができます

次にDB設計に移ります

DB設計（データベース設計）

　DB設計は個人的に苦手意識を持っており、ここでつまづくと後からの修正が大変なのではないか？と先入観を持っていました。

実際にはDB設計はしっかり作る必要はあるが、開発で度々変更出来ることを知り、知らないから勝手不安になっていただけでした（笑）

　まずは”lucidchart（ルシッドチャート）”というアプリを使い、ER図を作っていくところからスタートしました。

Lucidchartは、ユーザーがチャートや図表の描画、改訂、共有を共同で行えるようにするために使用されるWebベースの独自のプラットフォームです。

wikipediaより抜粋

f:id:natori_gorira:20200618110707p:plain

f:id:natori_gorira:20200618110734p:plain

公式ホームページ

https://www.lucidchart.com/pages/ja/landing?utm_source=google&utm_medium=cpc&utm_campaign=ja_japan_desktop_branded_x_exact_lucidchart&km_CPC_CampaignId=1532901510&km_CPC_AdGroupID=58843219819&km_CPC_Keyword=lucidchart&km_CPC_MatchType=e&km_CPC_ExtensionID=&km_CPC_Network=g&km_CPC_AdPosition=&km_CPC_Creative=302449566445&km_CPC_TargetID=aud-561781099678:kwd-33511936169&km_CPC_Country=1009129&km_CPC_Device=c&km_CPC_placement=&km_CPC_target=&mkwid=sKcclI4jM_pcrid_302449566445_pkw_lucidchart_pmt_e_pdv_c_slid__pgrid_58843219819_ptaid_aud-561781099678:kwd-33511936169_&gclid=CjwKCAjw_qb3BRAVEiwAvwq6VgQBxR43RaIGtTwN2Gxwp6_Yk7C4xXesJDXF_g-MQswr_ZQCnJujWRoCefMQAvD_BwE

lucidcharは制限はありますが、無料で利用することができ、オンライン上で管理されているので、チーム開発などでメンバーとER図の共有が出来ます

今回lucidcharを利用し作成したER図が下記のものになります

f:id:natori_gorira:20200618111540p:plain

こちらは拡大したものです

f:id:natori_gorira:20200618111613p:plain — userテーブル、profileテーブル、commentテーブルを拡大しています

README（リードミー）に書き込むために

｜カラム名｜単位｜制約、外部キー｜、

１対多、多対多、などの必要な情報を考えながら書いていきます

上記はモデルにしたアプリで書いていたので、後々変わってくるだろうと思い

READMEにはまず確定しているテーブルを書き込みました

右側は後から変更した内容です

 
 ## DB設計
 ### Usersテーブル
 |Column|Type|Options|
 |------|----|-------|
 |nickname|string|null: false|
 |last_name|string||
 |first_name|string||
 |last_name_kane|string||
 |first_name_kane|string||
 |birth_year|integer|| 後の変更点 ⇨削除
 |birth_manth|integer|| 後の変更点 ⇨削除
 |birth_day|integer|| 後の変更点 ⇨|birthday|date||
 |email|string|null: false, unique: true|
 |password|string||

 #### Association
 - has_many :comments 後の変更点 ⇨削除
 - has_many :items
 - has_many :likes 後の変更点 ⇨削除
 - has_many :sns_credentials 後の変更点 ⇨削除
 - has_many :trading_partners 後の変更点 ⇨削除
 - has_one :credit_card 後の変更点 ⇨ - has_one :card 
 - has_one :profile

 ## profilesテーブル
 |Column|Type|Options|
 |------|----|-------|
 |body|text||
 |phone_number|integer|unique:true|
 |zipcode|integer||
 |prefecture|integer||
 |city|string||
 |block|string||
 |building|string||
 |user_id|references|null:false,index:true,foreign_key:true|

 #### Association
 - belongs_to user
 
※credit_cardテーブルはcardテーブルになり、内容も大きく変わることになりました
理由としてクレジットカードの情報は個人では管理してはいけないとのことでした
 
 <!-- ## credit_cardsテーブル
 |Column|Type|Options|
 |------|----|-------|
 |authorization_code|integer|null:false,unique:true|
 |security_code|integer|null:false|
 |month|integer|null:false|
 |year|integer|null:false|
 |user_id|references|null:false,index:true,foreign_key:true| -->
 
 ## cardsテーブル
 |Column|Type|Options|
 |------|----|-------|
 |user_id|integer|null:false|
 |customer_id|string|null:false|
 |card_id|string|null:false|

 #### Association
 - belongs_to user

 ### Itemsテーブル
 |Column|Type|Options|
 |------|----|-------|
 |name|string|null: false, index: true|
 |price|integer|null: false|
 |description|text|null: false|
 |condition|integer|null: false|
 |shipping_fee|integer|null: false| 後の変更点 ⇨削除
 |shipping_from|integer|null: false|
 |days_before_shipping|integer|null: false|
 |shipping_method|integer|null: false|
 |trade_status|integer|null: false| 後の変更点 ⇨削除
 |brand_id|references|index: true, foreign_key: true| 後の変更点 ⇨削除
 |category_id|references|null: false. index:true, foreign_key:true|
 後の変更点 ⇨削除
 |user_id|references|null: false. index:true, foreign_key:true|
 |size_id|references|null: false. index:true, foreign_key:true|
 後の変更点 ⇨削除

 #### Association
 - belongs_to :brand 後の変更点 ⇨削除
 - belongs_to :category 後の変更点 ⇨削除
 - belongs_to :user
 - belongs_to size 後の変更点 ⇨削除
 - has_many :comments 後の変更点 ⇨削除
 - has_many :images
 - has_many :likes 後の変更点 ⇨削除
 - has_one :order 後の変更点 ⇨削除

 ### Imagesテーブル
 |Column|Type|Options|
 |------|----|-------|
 |name|string|null: false| 後の変更点 ⇨ |image|string|null: false|
 |item_id|references|null: false, index: true, foreign_key: true|

 - belong_to :item
 

　現在完成している部分のみですが、今後完成したものを後日載せようと思います、ひとまず、DB設計はこれで進めていきます

今回はここまで！続きはまた次回書いていきます！

2020-06-17

個人開発① ~アプリの立ち上げ~

　個人開発がデプロイまでに近づいてきたので、開発過程を順を追って書いていこうと思いました。

f:id:natori_gorira:20200615221841j:plain — タイトルロゴです、IPhoneのメモアプリで作りました（笑）

タイトル：spoon

使用言語：HTML(haml)、CSS(SCSS)、Ruby、Ruby on Rails、JavaScript、jQuery

ツール：Git、GitHub、MysQL

環境：Mac、ruby 2.5.1

なぜ作ろうと思ったのか？

趣味で釣りをやっているのですが、自分が興味のあるものを作ろうと思い立ったのがきっかけです。釣り具の販売サイトはたくさんあるので、売買を行うのはルアーの”スプーン”を中心に行うアプリにしようと決めました。

コンセプトは”自分で作って販売出来る”、売買する商品は”500円一律”で作り方のyoutyubuの埋め込みなどでアプリとしての使いやすさを意識しようと考えました。

誰のために作ったのか？

自分でルアーを作る方はネットや個人店で見かけたりしていたので、釣りの好きな人、作るのが好きな人にとって、ちょっと面白いと思ってもらえることを目指して作成していました。

f:id:natori_gorira:20200616203647p:plain — 現在進行中のアプリです

　アプリの大まかな構想が決まってから、他のwebアプリを参考にアプリを立ち上げてにDB設計を考えることから始めました。

〜今回の記事の内容〜

☆コンセプト、構想を練る

　　　　⬇︎

☆アプリを立ち上げ

　　　　⬇︎

Gitを利用して管理

⬇︎

DB設計（データベース設計）

アプリの立ち上げ

RubyとRailsでアプリを作っていきます

今回はMysQLにてデータベースを管理するためアプリ名の後にオプションを追記します

rails new アプリ名 --オプション

 $ rails new spoon --datebase=mysql 

これで、アプリが立ち上がりました

f:id:natori_gorira:20200616211256p:plain

アプリを立ち上げたところで、まずはViewを作り見やすくした方が良いかなと思い

$ rails db:createを実行します

 $ rails db:create

下記のエラーが発生

 Database 'db/development.sqlite3' already exists
 Created database 'db/test.sqlite3'
 silver:testes horayuki$ 

調べてみるとRailsのデフォルトのデータベースがsqlite3のため設定しなければ、自動で作られてしまうそうです、解決するためには下記の手順を踏んでいきます

まず、datebese.yamlについて各詳細を書いておきます

 adapter: 使用するデータベース種類
 encoding: 文字コード
 reconnect: 再接続するかどうか
 database: データベース名
 pool: コネクションプーリングで使用するコネクションの上限
 username: ユーザー名
 password: パスワード
 host: MySQLが動作しているホスト名

config/datebese.yaml内の記述を下記の内容に書き換えていきます

datebese.yml
 
 # SQLite version 3.x
 # gem install sqlite3
 #
 # Ensure the SQLite 3 gem is defined in your Gemfile
 # gem 'sqlite3'
 #
 default: &default
 adapter: sqlite3
 pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
 timeout: 5000

 development:
 <<: *default
 database: db/development.sqlite3

 # Warning: The database defined as "test" will be erased and
 # re-generated from your development database when you run "rake".
 # Do not set this db to the same as development or production.
 test:
 <<: *default
 database: db/test.sqlite3

 production:
 <<: *default
 database: db/production.sqlite3
 

こちらの内容に書き換えます

datebese.yml
 
 # SQLite version 3.x
 # gem install sqlite3
 #
 # Ensure the SQLite 3 gem is defined in your Gemfile
 # gem 'sqlite3'
 #
 default: &default
 adapter: mysql2
 encoding: utf8
 pool: 5
 username: root
 password: 
 socket: /tmp/mysql.sock

 development:
 <<: *default
 database: spoon_development

 # Warning: The database defined as "test" will be erased and
 # re-generated from your development database when you run "rake".
 # Do not set this db to the same as development or production.
 test:
 <<: *default
 database: spoon_test

 production:
 <<: *default
 database: spon_production
 username: spoon
 password: <%= ENV['Sample_PASSWORD'] %>
 

gemfileの内容も変更します

gemfileのこちらの行を

 Gemfile
 gem 'sqlite3'

下記のように書き換えます

 Gemfile
 gem 'mysql2'

gemをアプリに取り入れるためにbundle installを行います

 $ bundle install

再び$ rails db:createを実行します

 $ rails db:create

これで、MysQLでデータベースを作ることが出来ました

あとは、$ rails g controller コントローラー名で作り、ルーティングを設定すれば、画面表示できるようになります

参考記事：https://qiita.com/reeenapi/items/9fc38c4f2f8186c78288#%E5%88%9D%E3%82%81%E3%81%8B%E3%82%89%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95

今回はここまで！続きはまた次回書いていきます！