Output Diary

プログラミング × 読書 のアウトプットを発信しています

【Rails】星評価機能をつける!

本日は、

↓星評価機能を実装します!!!!👏👏👏👏

 

f:id:kina_kq:20210522185126p:plain



Step 0 事前にやっておくこと

$ rails g controller books index new 
$ rails g model Book title:string learn:text about:text category:string overall:integer 
$ rails db:migrate

私の場合、

overall:integer 以外は既に作っていたので、

カラムの追加と削除カラムを追加する の記事を参考に

カラムを追加する形で作りましたー!✊

 

books_controllerの部分を少しいじります。

private
  def book_params
    params.require(:book).permit(:title, :learn, :about, :category, :overrall)

↑このようにbook_paramsの最後にoverallを追加します。

 

ではでは、これから本格的に形をつくっていきます!★★☆

 

Step1 index.html.erbを編集する

<div>
<h2>総合評価:
<span class="star-rating">
<span class="star-rating-front" style="width: <%= getPercent(t.overall) %>%;">★★★★★</span>
<span class="star-rating-back">★★★★★</span>
</span>
</h2>
</div>

↑ 総合評価の⭐の部分になります。

Step2 books_helper.rbを編集する

def getPercent(number) 
   if number.present?
     calPercent = number/5.to_f * 100
     percent = calPercent.round
     #↑CSSは小数が含まれると、widthの幅を指定できないので四捨五入して整数化します!
     return percent.to_s
   else
     return 0
   end
 end

3行目にあるcalPercent = number/5.to_f * 100number/5 の部分をnumber/10に変更すると10段階評価に変えることも出来ます⭕

今回は5段階評価で充分なのでこのままでいきます!

 

Step3 new.html.erbを編集する

<h5>総合評価</h5>
   <div class="post_form">
    <%= f.radio_button :overall, 5 ,id: 'star1'%>
    <label for="star1"><span class="text">最高</span>★</label>

    <%= f.radio_button :overall, 4 ,id: 'star2'%>
    <label for="star2"><span class="text">良い</span>★</label>

    <%= f.radio_button :overall, 3 ,id: 'star3'%>
    <label for="star3"><span class="text">普通</span>★</label>

    <%= f.radio_button :overall, 2 ,id: 'star4'%>
    <label for="star4"><span class="text">悪い</span>★</label>

    <%= f.radio_button :overall, 1 ,id: 'star5'%>
    <label for="star5"><span class="text">最悪</span>★</label>
 </div>

自分が星評価⭐を入れたいなっていう所に、挿入します!

テキストの文字は各自で好きなように変更してみてください。

f:id:kina_kq:20210522194342p:plain



こんな感じに変えることも出来ます。

Step4 books.cssを編集する

.post_form{
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
  .post_form input[type='radio']{
    display: none;
  }
  .post_form label{
    position: relative;
    padding: 10px 10px 0;
    color: gray;
    cursor: pointer;
    font-size: 30px; /*星の大きさを変更*/
  }
  .post_form label .text{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    text-align: center;
    font-size: 9px; /*星の上の説明書きの大きさを変更*/
    color: gray;
  }
  .post_form label:hover,
  .post_form label:hover ~ label,
  .post_form input[type='radio']:checked ~ label{
    color: #ffcc00;
  }

/* 以下一覧ページの星用のCSS */

  .star-rating {
    position: relative;
    display: inline-block;
    width: 5em;
    height: 1em;
    font-size: 25px;
  }
  .star-rating-front {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #ffcc33;
  }
  .star-rating-back {
    display: inline-block;
    color: #ccc;

  }

 

☆用のCSSになります。

途中解説

 .post_form input[type='radio']{
    display: none;

勘がいい方はこのコードでわかるかもしれません。

 

そうです。

 

☆の正体はなんと、、、、

 

🔘(ラジオボタン)なのです!!!🥺

 

ラジオボタンCSSで見えなくして、

その上に☆をかぶせているという仕組みなのです🥺

 

1つの星を作るコードとしては、

<%= f.radio_button :カラム名, 送りたい数字(value) ,id: 'star番号'%>
<label for="star番号"><span class="text">星の上に表示したい文</span>★</label>

となります。

まあ難しいのでスルーでいきましょう🚗

 .post_form label:hover,
  .post_form label:hover ~ label,
  .post_form input[type='radio']:checked ~ label{
    color: #ffcc00;

この部分のcolor: #ffcc00;ここは黄色です。

 

てことは、

この部分で🌟に色を付けているということがわかると思います。

 

正確にいうと、このコードでやっていることは、

 

[type='radio']:checkedの部分で🔘でチェックしたやつだけ黄色に塗りまっせー

といったことをしています。

 

.post_form{
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }

1行目のブロックで書いたコードに戻ります。

このコードのflex-direction: row-reverse;の部分に着目してください👀

 

f:id:kina_kq:20210522185126p:plain



今回は、右にいけば行くほど評価が良いという感じに実装をしたいので、

flex-direction: row-reverse;で表示を反転させています。

という感じで完成したのではないでしょうかー!!!!!

 

f:id:kina_kq:20210522195001p:plain



だんだんそれっぽく出来てきましたー!わーい!

 

 

f:id:kina_kq:20210522195214p:plain

いつの間にか3595字も書いててビックリしました(笑)

それでは今回はこれにてサヨナラにしたいと思います!(^_^)/~

 

それでは良い一日をー!!!!!!!!!!

参考サイト

「口コミサイトの星(★★★☆☆)をCSSだけで実装してみた」

「CSSで星のレーティング評価を0.0〜5.0で表示するメモ」

【Rails】検索機能をつける

  今日のゴールは、

↓検索機能を作ります!!!!!!!!!!

f:id:kina_kq:20210518164024p:plain

 

 

Step1 index.html.erbの変更


まずviewフォルダを変更していきます!

検索機能を付けたい!と思っているindex.html.erbを開けて、

以下のように記述します。

 

私の場合は

app/views/books/index.html.erbに以下のコードを付け加えます。

 

 <h3>投稿を検索</h3>
<%= form_tag({controller:"books",action:"index"}, method: :get) do %>
<%= text_field_tag :search %>
<%= submit_tag '検索する' %>
<% end %>

 ↑インデントがうまくいかなかったので各自で調整してください。

 

今から1つずつ説明していきます。

2行目にあるこのコードでフォームタグを作っています。

<%= form_tag({controller:"books",action:"index"}, method: :get) do %>

 

<%= form_tag({controller:"コントローラ名",action:"アクション名"}, method: :get) do %>

 

といった感じに記入していきます。

↑のコードを参考にして自分用に書き換えて見てください!

 

<%= text_field_tag :search %>

 

さあこのコードはどんな役割をしているのでしょうか?

このコード抜いて「rails s」をしてみます。

 

f:id:kina_kq:20210518165406p:plain

ああああああ。

なんと入力フォームが消えてしまいました。

 

このコードは入力フォームを実装していたのですね。

再度このコードを入れて、railsアプリを起動してみます。

 

f:id:kina_kq:20210518164024p:plain

 

良かった!現れました!👏

 

<%= submit_tag '検索する' %>

 

最後のこのコードは、「検索」するボタンを実装しています。

 

これで見た目は完成しました!

ただこれで終わってはいけません。

見た目を作っただけですから、、、。

 

Step2 コントローラの変更

 

私の場合はbooksコントローラのindexアクションにコードを付け加えていきます。

 

def index
if params[:search] == nil || ''
@books= Book.all
elsif params[:search] == ''
@books= Book.all
else
#部分検索
@books = Book.where("body LIKE ? ",'%' + params[:search] + '%')
end
end

 

↑またまたインデントうまくいかなかったので各自で調整してみてください。

(なんでうまくいかないんだろう、、)

 

if params[:search] == nil || ''
@books= Book.all

 

この部分ではもし「検索」フォームに何も入力されてなかったら?

全部表示するよーというコードです。

 

elsif params[:search] == ''
@books= Book.all

 

次のブロックでは、

もしもparamsに空文字はいっていたら?

これまた全部表示するよー

というコードです。

 

else
#部分検索
@books = Book.where("body LIKE ? ",'%' + params[:search] + '%')

 

はい!最後のブロックは、

キーワードの一部でも一致したら探してとってきますよー!

といったコードになります。

 

完全一致したものだけを表示させたい場合だと、

 where(カラム名: "検索したい文字列")とかけばOKです。

ただ、完全一致検索はなかなか使わない気もします!

 

部分検索がよく使うのでは?と考えています。

 

といった所で、かんせーい!🌟

f:id:kina_kq:20210518164024p:plain

 

「検索機能」完成したのではないでしょうかー?

といったところで今日は以上ですー!良い一日をー!!!!!!!!!!!

f:id:kina_kq:20210403154231p:plain

【Rails】ストロングパラメーターとは何なのか

f:id:kina_kq:20210517132635j:plain

 

ストロングパラメータの仕組みをあまり理解していなかったので、

今日は調べたものをまとめていきたいと思います。

 

今日のゴール

 

・ストロングパラメータを理解する

・paramsとpermitの役割を理解する

 

ストロングパラメータ

 

ストロングパラメータは、

「Webから入力された値を制限することで、不正なアクセスからWebサービスを守る」

といった役割をしています。

 

例として以下のbook_paramsがあったとします。

f:id:kina_kq:20210517132809p:plain

 

ここでは、まず、

1. 送られれてきたデータが安全かどうかを確かめ、

require(:book)の部分で絞り込んでいます。

 

その次に、

絞り込んだbookの情報のうち、受け取る値をキー名で指定しています。

permit(:title, :learn, :about, :category)の部分に当たります。

 

 

あれー????なぜキーまで取得するのか?

require(:book)の部分があれば良いんじゃないかな?

と疑問に思った人もいると思います。

 

require(:book)の部分でカバー出来ているのにいらなくねーっと。

 

なぜpermit(:カラム名1, カラム名2, ・・・)と書いて、

受け取る値を指定するのか??

 

なぜなら、

もしuser_idカラムを足して「どのユーザーがどの投稿をしたか」という情報を、

テーブルに保存していき、user_idのような情報までユーザーから受け取るようにしてしまうと、なりすましやデータの改ざんが可能になってしまうからです。

 

あれー?見に覚えのない投稿が、、。

もしかして乗っ取られてる、、?

といった状態になってしまう危険性があります。

 

そのためにpermitというメソッドを使って受け取る情報を限定する必要があるのです。

 

まとめ

 

ストロングパラメータは、

本当に必要なデータだけ絞り込んで、不正なパラメータを防ぐ役割をしている

 

参考

api.rubyonrails.org

qiita.com

 

【本要約】スゴい早起き

f:id:kina_kq:20210515084311j:plain

 

今日は塚本 亮さんが書かれた

「スゴい早起き」を紹介します。

 

私自身、毎朝5時半に起きる生活を100日間くらい続けているのですが、

朝活への向き合い方がこの本の著者と似た考え方をしていました。

 

朝起きれない方や、朝活したいけどやる気が起きないって方には、

是非読んでほしいです!

 

著者の紹介

 

著者である塚本亮さんは、

1984年京都出身の方で、高校時代はなんと偏差値30台だったそうです。

退学寸前の状態から、なんと現役で同志社大学に進学し、ケンブリッジ大学の大学院で心理学を学んだそうです。

 

大学進学までの間にどんな気持ちの変化があったのかが気になりますね、、。

 

現在塚本さんは、

ジーエルアカデミア 代表取締役

・京都山城スポーツクラブ代表、

同志社大学嘱託講師

をしているようです。

 

この本のほかにも、

26万部のベストセラー『「すぐやる人」と「やれない人」の習慣』や、

「世界のエリートを唸らせる話すビジネス英語」などの本を書かれています。

 

この本で伝えたいこと

 

・朝活は根性でするものではない

・朝活ではやりたいことをしよう

・朝活の意欲をなくさせるのは、「アルコール」と「スマホ

・自分の頑張りを「見える化」しよう

 

 朝活は根性でするものではない

 

本書では、

早起きは「気合い」でしようとするものではない

と述べています。

 

早起き出来る人は、

「早起きしたい!」という気持ちに駆られているのに対し、

早起きできない人は、

「つらいけど、朝起きなきゃ」という気持ちに駆られています。

 

早起きに慣れない内は、根性でどうにかしようとしがちですが、

これが、早起きの辛さを想起させ、ベットからなかなか起き上がれず

ダラダラと過ごしてしまうという原因になっているのです。

 

それではどうしたら「早起きしたい!」という気持ちになるのでしょうか。

それらの秘訣をこれから紹介していきます!🚗

 

朝活ではやりたいことをしよう

 

「早起き楽し〜!」という状況をつくることが、頑張らなくてもできる早起きに繋がります。

 

例えば、本を読もうとしたとき、

早起き出来ない人は、

「明日こそ早起きして本を読むぞ〜!」と自分に無意識にプレッシャーをかけています。

 

一方、早起き出来る人は、

「明日の朝は、買ってきた本を読みたいな〜!」と自分にプレッシャーをかけておらず、自分にやりたいことのために朝を利用したい!という思考になっています。

 

つまり、早起きできる人は、

明日の希望に満ち溢れて心がルンルン★状態になっている人達になります。

 

朝活の意欲をなくさせるのは、「アルコール」と「スマホ

 

早起きのやる気を無くさせる1つの要因は、

「良質な睡眠」が取れないことです。

 

睡眠不足ゆえに、眠たい、もっと寝ていたい、、(-_-)zzz

といった気持ちと常に戦っており、早起きがとんでもない苦痛になっています。

 

睡眠を妨げる要因は、「お酒」🍻と「スマホ」📱だと著者は述べています。

 

朝活出来る人はこれらの誘惑物と接触回数をなるべく減らすようにしています。

「朝活」するために誘惑となるものから身を遠ざけ、

「飲み会いこうぜ〜」と言われない環境を自ら作り出しているのです。

 

朝活を阻害させる誘惑物は何かをはっきりさせ、

それらから、極力避ける環境をつくることで早起きしやすくなるのです。

 

スマホを寝室にいれない

・朝活していることを周囲に言い、飲み会参加しないキャラを作る

・アルコールをダンボールでまとめ買いしない

こういった環境づくりが朝活を成功させます。

 

自分の頑張りを「見える化」しよう

 

「記録する」ということは強力なモチベーションを生みます。

日々の取り組みを記録し、見える化することで、「自分ってやれば出来るじゃん!」という自己効力感が爆発的に増加し、「まずやってみよー」とするパワーがどんどん湧いてきます。

 

カレンダーを買い、朝活出来た日に❍を付けていくのも良いと思います。

 

たまに早起き出来ない日があっても気にしてはいけません。

寝坊しちゃう日があっても過去の自分と比べたら、

たいぶ成長していると思います。

 

朝活は自分のやりたいことを行うための手段であって、

早起きすることが目的ではありません。

 

気楽にいきましょうー!

 

まとめ

 

私は頑張りの「見える化」として、

寿司打🍣(タイピング速度を測るアプリ)のスコアをコツコツ記録していました。

f:id:kina_kq:20210515120655p:plain

 

こんな感じに「おお!だいぶ点数上がってきたな〜」と感じると、

やるじゃん!自分」と継続が楽しくなります😆

 

朝の脳は最高のパフォーマンスを発揮できます!

それらを活用して、自分のやりたいことに全力で取り組みましょうー!

 

それでは朝活民が増えることを祈っています😆

 

 

【システム開発】BIツールとは

f:id:kina_kq:20210513082132p:plain

BIツールって何?って感じになったので

今日はBIツールについて調べていきます。

 

 

BI(Business Intelligence)ツール

 

BIツールは、

企業に蓄積された大量のデータを集めて分析し、可視化するツールのことです。

経営管理や売上のシュミレーションなどに活用され、近年導入する企業が増えています。

 

メリットとしては、

・レポート作成が短時間で出来ること

・膨大な情報の分析を素早く行えること

・専門家でなくてもデータ分析が可能なこと

が挙げられます。

 

データウェアハウス

 

ウェアハウスとは「倉庫」という意味です。

データウェアハウスは、業務でさまざまなデータを時系列で保管したものです。

DWHと略されることもあります。

 

データウェアハウスのデータはBIツールで利用されています。

 

データベースの特徴は、

・データベースではないこと

・データレイクではないこと

・データマートとではないこと

です。

 

データレイクとは、構造化データや非構造化データを格納する場所のことをいいます。

データマートとは、データウェアハウスの中から特定の目的に合わせた部分を取り出したもののことをいいます。データベース全体ではなく、データベースの一部を指しています。

 

データマイニング

 

マイニングとは「発掘」という意味です。

データマイニングとは、データウェアなどに蓄積された大量のデータを分析し、新しい情報を発掘することです。略してDMと呼ばれることもあります。

 

統計学パターン認識人工知能等のデータ解析の技法を大量のデータに適用することで、必要な知識を取り出す事ができます。

 

データマイニングの機能として、

・発生確率の予想

・データの分類

・関連性の抽出 

を行うことが出来ます。

 

参考

BIツール(ビジネスインテリジェンスツール)とは?基本と事例と知っておくべき留意点 – データのじかん

データウェアハウス(DWH)とは? メリット・特徴、具体例を紹介 - Talend

データマートとデータウェアハウスの違いとは?なぜデータウェアハウスが理想のデータベース形態と言われるのか? – データのじかん

データマイニング - Wikipedia

 

【システム開発】モジュールの分割

f:id:kina_kq:20210512082919j:plain

 

モジュールの分割とは、

コンピュータプログラムを設計する際に、

全体を何らか基準に従って、複数の部品(モジュール)に分割することをいいます。

 

モジュールは特定の機能や構造化を表すプログラムのまとまりであり、これらを組み合わせてプログラムの全体を設計していきます。

 

モジュールを分割することのメリット

 

モジュールを分割することのメリットは、

・作業が分担できる(複数人で並行してプログラミング作業を進められる)

・再利用が容易(共通する機能を部品として使い回すことができる)

・修正が一部で済む(欠陥のあるモジュールを修正するだけで、プログラムを改修できる)

といったことがあげられます。

 

ただなんでもかんでも分ければ良いというわけでもないので、

注意が必要です。

 

モジュールの分割技法

 

STS分割法

 

STS分割法では、

プログラムを「入力処理(源泉:Source)」、「変換処理(変換:Transform)」、「出力処理(吸収:Sink)」という3つのモジュール構造に分割します。

 

「データの流れ」に着目した技法で、

入力処理→変換処理→出力処理

と流れていきます。

 

入力処理では、プログラムのデータの入力や取得、読み込みなどを行うモジュール、

変換処理では、データの計算や加工、変換などを行うモジュール、

出力処理では、データの出力や表示、印刷、書き出しなどを行うモジュールに分割します。

 

トランザクション分割法

 

トランザクション分割法とは、

対象となるデータの種類と、そのデータに関連するプログラムを一連の処理(トランザクション)単位に分割する方法です。

 

共通機能分割法

 

共通機能分割法とは、

プログラムの中の共通機能をモジュールとして分割する方法です。

 

モジュールの独立性を測る尺度

 

モジュールの独立性を測る尺度として、

・モジュール強度

・モジュール結合度

があります。

 

モジュール強度

 

「強度」とは、分割された1つのモジュール内に、どんな要素が含まれており、どのように関連付いているかによって決まる指標です。どれだけ機能的に特化できているかを表しているものになります。強度が高いほど、「モジュールの独立性が高くて好ましい」となります。

f:id:kina_kq:20210512090701p:plain


モジュール結合度

 

他のモジュールとどのように結合するかを示す尺度です。

 

モジュールの結合度が弱いほど、

「モジュールの独立性が高くて好ましい」となります。

 

f:id:kina_kq:20210512091803p:plain

 

 

まとめ

 

モジュール強度は高いほど、「モジュールの独立性が高く好ましい」になりますが、

モジュール結合度は低いほど、「モジュールの独立性が高く好ましい」となります。

 

注意が必要ですね。 

            

 

参考

モジュール分割とは - IT用語辞典 e-Words

モジュール分割と独立性

キタミ式イラストIT塾 基本情報技術者 令和03年

【セキュリティ】暗号方式

f:id:kina_kq:20210511105117j:plain

 

情報の機密性、安全性を保つためには、暗号化と認証の導入は欠かせません。

今日は3つの暗号化の方式と特徴を紹介していきます。

 

そもそも暗号化って?

 

暗号化とは、

データを規則に従って変換し、第三者が解読できないようにすることです。

 

暗号化されたデータは、デタラメに文字列が並べられており、何が書いてあるか理解できないものになっています。

 

なぜ暗号化するかというと、暗号化されていない状態でデータを送信すると、

三者からデータを盗み見されたり、改ざんされてしまう可能性があるからです。

 

暗号化前のデータは、平文といい、

暗号化されたデータをもとに戻すことを復号と呼びます。

 

暗号化や複合は、暗号化アルゴリズムによって行われます。

 

共通鍵暗号方式

 

共通鍵暗号方式とは、

暗号化と同じ鍵(共通鍵)を使用する方式です。

 

共通鍵は第三者に知られないように秘密にするため、

秘密鍵暗号方式とも呼ばれます。

 

メリットとしては、暗号化と復号が高速に行える点で、

デメリットとしては、鍵が第三者に渡ってしまうと暗号が解読されてしまうという点になります。

 

鍵交換の際には、盗聴されないよう細心の注意を払う必要があります。

 

公開鍵暗号方式

 

公開鍵暗号方式とは、

暗号化と復号で異なる鍵を使用し、暗号化する鍵(公開鍵)を公開し、復号する鍵秘密鍵)を秘密にする方法です。

 

メリットとしては、鍵の入手や管理がしやすい点、安全性が高い点で、

デメリットとしては、暗号化と復号の処理が複雑なため処理に時間を要してしまう点です。共通鍵暗号化方式と比べて約1.000倍の時間がかかるといわれています。

 

ハイブリッド暗号方式

 

ハイブリット暗号方式は、

共通鍵暗号方式と公開鍵暗号方式のメリットを組み合わせたハイブリット型です。

共通鍵を安全に渡すために、鍵交換の際には公開鍵を使用して、実際のデータの暗号化には共通鍵を使用するというものです。

 

こうすることで、鍵を安全に配布することが出来、高速処理が可能になります。

 

〜流れ〜

1. 送信者が共通鍵を作成

2. 送信者が受信者の公開鍵で共通鍵を暗号化

3. 暗号化された共通鍵を送信

4. 受信者の秘密鍵で共通鍵を復号

5. 送信者が共通鍵で平文を暗号化

6. 受信者に暗号文を送信

7. 共通鍵で暗号文を復元

 

 

参考

共通鍵暗号と公開鍵暗号とはf:id:kina_kq:20210511111106j:plain