2023-08-27

画像投稿機能

Active Storage

ファイルアップロードを実装できるGem（だったが、Railsに統合された）

ターミナルで導入

# マイグレーションファイル生成
% rails active_storage:install

% rails db:migrate

ImageMagick

コマンドラインから画像処理できるソフトウェア

% brew install imagemagick

MiniMagick

ImageMagickをRubyで使えるようにするGem

gem 'mini_magick'

# => (ターミナル)bundle install

ImageProcessing

MiniMagickではできない画像サイズの修正ができるGem

gem 'image_processing', '~> 1.2'

# => (ターミナル)bundle install

magicじゃなくてmagickだよ

ちょっと面白かった

qiita.com

has_one_attachedハズワンアタッチドメソッド

1対1の紐付け

class モデル < ApplicationRecord
  has_one_attached :ファイル名
end
# モデル.ファイル名 が使えるようになる
# ファイル名 = パラメーターのキー

image_tagイメージタグメソッド

ヘルパーメソッド。img要素を生成。

モデルからファイルを呼び出して使える。(has_one_attachedとセット？)

<%= image_tag message.image %>

attached? アタッチドメソッド

ファイルの添付の有無を確認。true/false

<%= image_tag message.image if message.image.attached? %>

variant バリアントメソッド

Active Storageのメソッド。表示サイズ変更。

<%= image_tag message.image.variant(resize: '500x500') %>

バリデーション条件分岐

画像があれば、そのままOK。なければ:contentに対してバリデーション

-> 画像 or テキストがあればOK

class Message < ApplicationRecord
  # :was_attached?がtrueなら何もしない。falseならバリデーションを行う。
  validates :content, presence: true, unless: :was_attached?

  def was_attached?
    # imageがあればtrue、なければfalse
    self.image.attached?
  end
end

2023-08-27

親子関係のインスタンス、collectionオプション

親子関係にあるインスタンスの生成

def create
  # message投稿
   # -> paramsに外部キー(room_id)が含まれる。
    # -> 外部キーからRoomモデルのレコードを取り出す
  @room = Room.find(params[:room_id])

  # 取り出したRoomのレコードが親要素、messagesが子要素 -> 繋げてnew
  # 子要素は複数形
  @message = @room.messages.new()
end

Rails.application.routes.draw do
  # 親子関係がルーティングされている
  resources :rooms, only: [:new, :create] do
    resources :messages, only: [:index, :create]
  end
end

# １対多 has_many 
class Room < ApplicationRecord
  has_many :messages
end

collectionオプション

collection = 部分テンプレートrender × each

次の二つのコードは同義。

<!-- インスタンス変数 @hoges には複数の要素が入っている -->
<% @hoges.each do |hoge|%>
  <%= render partial: 'hoge', locals: {hoge: hoge} %>
  <!-- 前半: 部分テンプhogeを読み込む -->
  <!-- 後半: @hogesから取り出した要素hogeを、hogeという名前で扱う -->
<% end %>

<!-- 部分テンプレート内での要素名 = 部分テンプレート名 = hoge -->
<!-- collectionオプションの対象 = 複数要素の入ったインスタンス変数 = @hoges -->
<%= render partial: 'hoge', collection: @hoges %>

2023-08-27

日本時刻の設定、dependentオプション

気づき

少ないヒントで機能を実装していく感じ、だんだん実践の匂いがしてきた。

各工程を順にこなしていく技術を我が物に。

htmlの入れ子構造は、図示すべし。

日本時刻の設定

# 環境設定の共通ファイル
class Application < Rails::Application
  config.i18n.defualt_locale = :ja
  config.time_zone = 'Tokyo'
end

i18n

internationalization（国際化・多言語化）の略。

internationalization = 「i (18文字) n」 （まじか）

locale

ロケールとは、国や地域の文化によって異なる言語や単位、表記などの総称。

ソフトウェアの他言語への対応（ローカライズ）が行われる際には、言語の翻訳だけでなく、その国の文化に根ざした様々な表記法に対応する必要がある。

ある国や文化圏に対応することはロケールと言うが、複数のロケールに対応することは「国際化」（internationalization）と呼ばれる。

ロケールとは「ロカール」 (locale)： - IT用語辞典バイナリ

# 時刻のフォーマットを設定
ja:
  time:
    formats:
      default: "%Y/%m/%d %H:%M:%S"

yml（ヤムル）ファイルは、構造的なデータ集合を簡素な文字列として表記することができるデータ形式の一つ

YAML（.ymlファイル）とは - 意味をわかりやすく - IT用語辞典 e-Words

YAMLとは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

<!-- l(エル)メソッドで現地時間を設定 -->
<%= l messege.created_at %>

dependentオプション

# Userモデル（親モデル）が削除されると、Hogeモデル（子モデル）も削除される
class User < ApplicationRecord
   has_many :hoges, dependent: :destroy
end

英単語

dependent

「（de-）ぶら下がっ（pendo）ている（-ens）」 -> 依存

pendant: 「垂れ下がっ（pendre）ている（-ant）、垂れ下がっているもの」 -> ペンダント
expense: 「ex-（～の外へ）＋pendo（ぶら下げる、重さを払う、支払う）」 -> 費用、出費
pension: 「支払う（pendo）こと（-io）」 -> 年金、恩給
suspend: 「下に（sub-）ぶら下げる（pendo）」 -> ぶら下げる
append: 添える
compensate: 「一緒の（com-）重さにする（pendo）、平衡を保つ」 -> 保証する、埋め合わせする

出典

語源英和辞典 – 英単語のコアの語源が理解できる辞書

2023-08-27

chatGPT活用例

たまたま調べたら結構面白かったので。

gyazo.com

出典：New Era of Computing - ChatGPT がもたらした新時代 - Speaker Deck

chatGPT活用例1

思考の壁打ち: 〇〇の考えで抜けているところを指摘して
添削・評価: 〇〇の基準で、10点満点で評価して
校正: 誤字脱字タイプミスを見つけて
インサイト抽出: 次のレビューから商品の改善点を考えて
コード作成: OpenAIのAPIのコードを書いて
アイデア創出: 人気の出るブログの内容案を提案して
情報検索: webアプリの要件定義について教えて

chatGPT活用例2

役割: 営業（SE、ジャーナリスト、英語教師）として振る舞ってください。
ゴール: blogを書いて（メールを書いて、要約して、子供にわかるように説明して）
制限: ポエム調で（短く、html/cssだけで）
出力形式: pythonコードで(表形式で、数字のリストで)

chatGPT書き方注意事項

###か"で命令とコンテクストを分ける
出力形式を例示する
###で区切ってURLを記載すると情報を投入できる。2021年以降の情報（wikiとか）を挿入すれば、学習していない内容にも対応。

まとめ

デジタルネイティブの次は、AIネイティブ？っていう表現が出てきて、ハッとした。

アイディア出しから英語教師まで。次世代の子どもたちは彼とどうやって付き合っていくのだろう。

ググレカスの次は、、、、、ジピレクズ？

出典

speakerdeck.com

2023-08-21

メソッドあれこれ（references型、select要素、where.not）

今日の工夫

コードは基本手打ちして、VScodeのチェック機能で後からチェックする。
間違いやすいところのチェックになる。
カリキュラムからVScodeに画面を切り替えるときは、該当テキストをドラッグしておく。
戻ってきたときにすぐに目がいくように。
コードの区切りが分からなくなるので、
　　「--------------------------」
をコメントアウトして入れる。

references型

外部キーのカラム追加@マイグレーションファイル

# t.refernces :カラム名
t.refernces :user, foreign_key: true

# => user_idカラムが生成

中間テーブルを通じてレコード作成

% rails c

[1] irb(main)> Room.create(name: "ルーム１", user_ids:[1,2])

Roomモデルに対してcreateを実行すると、同時に中間テーブルにもレコードが保存される。

user_idsで、userテーブルのidを指定し、紐づけている

select要素、option要素

<!-- プルダウンを作るときに使う。 -->
<select>
  <option>選んでください</option>
  <option>hoge1</option>
  <option>hoge2</option>
</select>

<!-- name属性でパラメーターとしての名前を指定 -->
<!-- 後ろに[]をつけると、配列になる -->
<select name="hoge[user_ids][]"></select>
<!-- value属性でパラメーターの値を指定 -->
<!-- 表示はuser.name、valueはuser.id -->
<option value=<%= user.id %>><%= user.name %></option>

=> {"user_ids" => ["選んだuser.id"]}

<!-- 後から下記も追記すると、current_user.idもパラメータに含められる -->
<input name="hoge[user_ids][]" value=<%= current_user.id %>>
=> {"user_ids" => ["選択した値", "current_user.id"]}

where.not("条件”)

ActiveRecord: 〜以外のレコードを指定

# ログインユーザー以外で繰り返し処理
User.where.not(id: current_user.id).each do |user|

配列をストロングパラメータに渡す

# selectの時と同じ。[]をつける。
params.require(:hoge).permit(user_ids: [])

2023-08-19

deviseの復習

メソッド関係

authenticate_user!

命令文。オーティケイト（認証）せよ！

「if ログインしていないならば, then ログイン画面へ」という条件分岐を一括で設定

authenticate: 確実にする、認証する

コントローラー内で使う render メソッド

ビューファイルを読み込む（挿入する）という意味では近いが、機能は別物。

redirect_to -> 改めてpathを取得 -> 該当するビューファイル
render -> いきなりビューファイル。

renderを使うと、インスタンス変数が上書きされない。

エラーを想定して使われることが多い。

render :(アクション), status: :unprocessable_entity
# 後半は、エラーのステータスコードを一緒に送信している。

unprocessable_entity: 「情報を処理できない。」 -> エラーなんでもコード4xx

updateメソッドが成功するかどうかの条件分岐

if current_user.update(user_params)
  redirect_to root_path
else
  render :edit, status: :unprocessable_entity
end

updateメソッドの戻り値は、true/falseなのでif〜に設定できる。

ちなみに、elseを読ませるためには、（falseじゃなく）nulでもいいらしい。
(createだと更新後の値が戻り値だったりする。)

小ネタ

ターミナルでファイル（orフォルダ）の移動

mvコマンド: % mv 移動元ファイル移動先フォルダ
finderフルパスの取得: option + command + C or 右クリックからの option
複数ファイルも可: % mv file1 file2 移動先フォルダ

英単語

authentic

「autos（自分自身）＋hentes（行為者）」 -> 「権威ある独裁者（authentes）の（-ikos）」 -> 本物の、信頼のおける、確かな

authenticate: 確実にする、認証する
automatic: 「自分（autos）で考えて（men-）動く物の（-ic）、自動装置の」 -> 自動の、無意識の

author （音も意味もそこそこ近いが、語源は別。）

「増やす（augeo）人（-tor）、作品を増やす人」 -> 著者、作者

authority: 「著者（auctor）であること（-itas）、権威」 -> 権力、付与された権限
authorize: 「著者（auctor）する（-izo）、著者として権威を与える」 -> 根拠を与える、権限を与える

出典

gogen-ejd.info

2023-08-19

HTML復習

今日の工夫

勉強時間は、スクリーンタイムで確認すべし。

box-sizing プロパティ

paddingやborderに影響されず、widthやheightを固定できる

 * {
  box-sizing: border-box;
 }

text-decorationプロパティ

a要素のアンダーラインを消す時に使う

.title a {
  text-decoration: none;
}

クラス名と要素名を並べると、そのクラスのその要素に限定できる。
- （例）配置設定はクラス属性に対して、色とかpaddingはa要素に対して。

input type="file"

↓ファイルを参照するボタンが作れる

しかし、自分でボタンのデザインはできない。

display: none;

非表示にできる。

ファイルを参照するボタンを非表示にしたら、当然クリックできない。

label要素

フォームの項目名と、ファイル参照ボタン（フォーム入力要素）を関連づけできる。

関連づけると、項目名をクリックしても参照ボタンをクリックした扱いになる。

labelで紐付け × 入力ボタン非表示 = 任意のボタンデザインで入力ボタンを作れる

<label class="form-image">
  画像
  <input type="file" class="hidden">
</label>

.hidden{
  display: none;
}

画像

↑見た目は単なるテキスト。でも、クリックするとファイル選択ができる。

英単語

justify

正しく（iustus）する（facio）こと -> 正当だと説明する、弁明する

justify_content: コンテンツを正しく配置する？

brew

「膨らむ」の意味を含むオノマトペ的な語 -> 醸造する

brewery: ビール醸造所
bread: 醸造 -> 食パン

approve

～へ（ad-）良い（probus）と考えること -> いいと考える、承認する、賛成する

prove: 「良い（probus）、良いと示す」 -> 証明する、〜であることを示す
probable: 証明（prove）できる（-able）こと -> 起こりそうな、確からしい、もっともらしい
proof: 良い（probus）と示すこと -> 証拠、試験

specific

spek-（見る）が語源。「種類を作っている、特有の性質を持っている」がコア -> 明確な、特定の

specify: 「外観をはっきりとさせること」 -> 明確に述べる、明記する
special: 「通常と異なる特別なこと」 -> 特別な、上等な
species: 種類（species）、同じ外観をもつ種類 -> 種類、人類
specification: 「外観をはっきりと述べた明細」 -> 明細、仕様書

integrate

一つにまとまった完全な（integer）状態にする（-o）こと -> まとめる、完全なものにする

integer: ◇in-(＝not) ＝触れられていない、損なわれていない -> 整数、それ自体で完全なもの
integral: 完全な（integer）状態の（-alis） -> 不可欠の、完全に揃った
entire: ラテン語 in-（否定）＋tango（触れる） -> 全部揃っている、無傷の、全体の
tengent: 「触れ（tango）ている（-ens）」 -> 接線の、タンジェント
taste: 「舌で触れて（tango）味を見分けること」 -> 味を見分ける、味覚
attain: 「～へ（ad-）手が届いて触れる（tango）こと」 -> 達成する、手に入れる
task: ラテン語 tango（触れる） -> 「義務（tasque）」 -> 任務、仕事
tax: ラテン語 tango（触れる） -> ラテン語 taxo（見積もる） -> 「見積もった（taxus）税金」 -> 税金、負担

instaal

「区切られた場所（stallum）の中に（in-）入れること」 -> 据え付ける、インストールする

stall: stel-（置く）が語源。「馬小屋の馬が立っている区切られた場所」 -> 屋台、個室、失速させる、馬房（ばぼう）
- 肩掛け（ストール: stole）とは別物
ダウンロード・・・ファイルの保存。インストール・・・ファイルの展開。
（個別のパーツを適切な場所に配置する）
- 家電を買って帰るまでがダウンロード。箱から出して配線するのがインストール。

出典

snkeigoya.blog.fc2.com

gogen-ejd.info

Active Storage

MiniMagick

ImageProcessing

magicじゃなくてmagickだよ

has_one_attachedハズ ワン アタッチドメソッド

image_tagイメージ タグメソッド

attached? アタッチドメソッド

variant バリアントメソッド

バリデーション条件分岐

親子関係にあるインスタンスの生成

collectionオプション

気づき

日本時刻の設定

locale

dependentオプション

英単語

dependent

出典

chatGPT活用例1

chatGPT活用例2

chatGPT書き方注意事項

まとめ

出典

今日の工夫

references型

中間テーブルを通じてレコード作成

select要素、option要素

where.not("条件”)

配列をストロングパラメータに渡す

メソッド関係

authenticate_user!

コントローラー内で使う render メソッド

updateメソッドが成功するかどうかの条件分岐

小ネタ

ターミナルでファイル（orフォルダ）の移動

英単語

authentic

author （音も意味もそこそこ近いが、語源は別。）

出典

今日の工夫

box-sizing プロパティ

text-decorationプロパティ

input type="file"

display: none;

label要素

英単語

justify

approve

specific

integrate

instaal

出典

has_one_attachedハズワンアタッチドメソッド

image_tagイメージタグメソッド