個人的勉強メモ置き場

プログラミングど素人のメモ置き場

ActionTextのデザインをちょろっと変更する

導入はこちらから
zykbgame.hateblo.jp

微妙なところを修正したい

f:id:zykb:20220405215905g:plain

微妙なところ
・大きな画像を表示するとフォームが伸びてしまう
・投稿するとファイル名(nailchip.jpg)とサイズが表示されてしまう

キャプション が表示されないようにする

views/active_storage/blobs/_blob.html.erb

<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
   <% if blob.representable? %>
      <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
    <% end %>

     # ここから
    <figcaption class="attachment__caption"> 
      <% if caption = blob.try(:caption) %>
        <%= caption %>
      <% else %>
        <span class="attachment__name"><%= blob.filename %></span>
        <span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
      <% end %>
    </figcaption>
     # ここまで消す
 </figure>

見るとattachment_captionというクラス名がついたfigcaptionタグがあるのでごそっと消します

<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
  <% if blob.representable? %>
    <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
  <% end %>
</figure>
入力フォームが伸びないようにする

actiontext.scssが生成されているのでそこに新しくcssを記述します

app/javascript/stylesheets/layouts/actiontext.scss

trix-editor {
  min-height: 20em;
  max-height: 20em;
  overflow-y: auto;
}

overflow-y: auto;を記述することではみ出した分はスクロールされるようになります


ちょっといい感じになりました
f:id:zykb:20220405222749g:plain

おまけ

このwebアプリはスマートフォンがメインの利用想定なのですが、スマホで画面を表示するとツールバーにスクロールバーが表示されてしまうのがもやもやするのではみ出た、はみ出たところは折り返すようにしました。(はてなブログは2列表示だったので)
f:id:zykb:20220405223033p:plain

app/javascript/stylesheets/layouts/actiontext.scss

trix-toolbar {
  .trix-button-row {
    flex-wrap: wrap;
    justify-content: start;
  }
  .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
  .trix-button-group {
    margin-right: 1.5vw;
  }
}

f:id:zykb:20220405223747p:plain
画像のトリミング機能などは今はまだ作ってないのでそのうち追加したいです



参考
qiita.com

qiita.com

railsguides.jp

bash 連想配列 メモ

bashでは連想配列が使用できる。一般的なプログラミング言語ではハッシュやマップ、辞書に相当する

作成するにはdeclare -Aで明示的に宣言する必要がある。参照にはインデックスの代わりにキーを指定する

$ declare -A user
$ user=([id]=1 [name]=zykb)

# 宣言と代入を1行で
$ declare -A user=([id]=1 [name]=zykb)

$ echo ${user[id]}
1
$ echo ${user[name]}
zykb

素数を取得するには${#連想配列名[@]}とする

$ echo ${#user[@]}
2

要素の代入もキーを指定する。すでに値が存在していれば上書き、そうでなければ新しいキーと値の組み合わせを追加する

$ user[name]=zykb2
$ echo ${user[name]}
zykb2
$ user[email]=sample@example.com
$ echo ${user[email]}
sample@example.com

要素の削除には配列と同じくunsetコマンドを使用する
また、全ての値を取得するには${連想配列名[@]}とする

$ unset user[name]
$ echo "${user[@]}"
1 sample@example.com

要素ではなくキーを取得するには前に!をつける

$ echo "${!user[@]}"
id email

bash 配列 メモ

bashにおいても一般的なプログラミング言語同様に配列が使用できる

配列へ値を代入するには( )内に要素を並べる(複合代入)

# 空の配列を作成
$ list=()
# 複合代入で作成
$ fruits=(apple grape orange peach)

明示的に配列と宣言するときはdeclare -aを使う

$ declare -a array

${配列名[インデックス]}で要素の参照が出来る

$ fruits=(apple grape orange peach)
$ echo ${fruits[0]}
apple
$ echo ${fruits[2]}
orange

既存の配列の内容を変更するには配列名[インデックス]=値で変更できる

$ fruits=(apple grape orange peach)
$ fruits[1]=banana
$ echo ${fruits[1]}
banana

配列の要素数を取得するには${#配列名[@]}とする。また、全ての要素を取得するにはインデックスに*または@を指定する

$ fruits=(apple grape orange peach)
$ echo ${#fruits[@]}
4
$ echo ${fruits[@]}
apple grape orange peach

" "で囲むと展開される
"${配列名[@]}"の場合は各要素が個々の文字列として展開されるため配列のコピーなどに使える
"${配列名[*]}"の場合はスペースで連結した1つの文字列として展開される

要素の追加には前述の"${配列名[@]}"を用いる。末尾に追加する場合には+=でも可能

$ foods=(egg fish "${fruits[@]}")
$ echo ${foods[@]}
egg fish apple grape orange peach
$ foods+=(tofu)
$ echo ${foods[@]}
egg fish apple grape orange peach tofu

要素の削除にはunsetコマンドを使う。削除された箇所は未設定となる

unset fruits[2]
$ echo ${fruits[@]}
apple grape peach

値の存在するインデックスを取得するには配列名の前に!をつける

$ countries=([0]=Japan [2]=Franch [3]=Germany)
$ echo ${!countries[@]}
0 2 3

シェル変数と環境変数

シェル変数

多くのプログラミング言語と同じくbashでも変数が使える
変数の作成は「変数名=値」で行う

$ directory=/home/zykb

他のプログラミング言語と違う点として、=記号の左右にスペースやタブを入れてはいけない

$ directory = home/zykb
directory: command not found

bashにおいては変数の値はデフォルトで文字列として扱われるので' 'や" "で囲む必要はない
ただし、スペースやタブを含めて文字列として扱いたい場合には' 'または" "で囲む

file='Document files'


変数の参照には変数名の前に$をつける

$ directory = home/zykb
$ echo $directory
home/zykb

変数部分を明示的に指定するには{ }で囲む

$ item=pen
$ echo I have many ${item}s
I have many pens


シェル変数はそのシェル内でのみ有効で、変数を引き継ぐことが出来ない

CLI

$ hello='I am zykb'

hello.sh

#!/bin/sh
echo ${hello}

なにも表示されない
CLI

$ ./hello.sh

シェルからコマンドを実行すると、現在のシェルから子プロセスが作成される。このときシェル変数は引き継がれないためなにも表示されなかった。
一方で環境変数は引き継がれるため、コマンドから参照できる
f:id:zykb:20220403010024p:plain

環境変数を作成するためにはexportコマンドを使用する

CLI

$ HELLO='I am zykb'
$ export HELLO

hello.sh

#!/bin/sh
echo ${HELLO}

CLI

$ ./hello.sh
I am zykb

環境変数は慣習として大文字を使う

シェルってなんぞ 【メモ】

概要

シェルはLinuxカーネルとユーザを繋ぐインターフェース。ユーザはシェルにコマンドを入力することで、入力されたコマンドを解釈してLinuxカーネルへと受け渡すことが出来る。

シェルとLinuxカーネルの分離

Linuxカーネルとそのインターフェイスであるシェルを分離することで、一つの役割に特化させている。これによってシェルが異常終了してもLinuxカーネルへの影響を抑えることが出来たり、コマンド入力のインターフェイスを変える時にシェルだけを変更することが出来る

コマンドの実行の流れ

ls a* を実行する

1. ユーザはコマンドの実行をシェルに入力(ユーザ)

ls a*

2. シェルはコマンドを解釈して展開(シェル)

/bin/ls abc.txt aaa.txt

3. Linuxカーネルがコマンドを実行(カーネル)

/bin/ls abc.txt aaa.txt

4. 画面に結果を表示(シェル)

$ ls a*
aaa.txt abc.txt

このようにしてシェルはユーザとLinuxカーネルとの仲介をしている

シェルの種類

bash
shを拡張したシェル
Linuxなどでデフォルトのログインシェルとして使われている

sh
古くからある最も基本的なシェル。シェルスクリプトの多くでよく見かける

zsh
比較的新しいシェル。機能面が多彩

他にもkshcshなどたくさんのシェルがある

Shebang(シバン・シェバン)

スクリプトの先頭にパスを指定することで使用するインタプリタの明示的な指定が可能になる

#!/bin/bash

この場合はbashで実行してねという意味になる

標準入力の値を受け取る[Ruby] 

最近はpaizaなどでプログラミング問題を解いて遊んだりしてるのでよく使う標準入力の受け取り方をメモ

1行の受け取り

標準入力
a

line = gets
=> "a\n"
line = gets.chomp
=> "a"
1行に複数要素の受け取り

標準入力
a b c

# 配列で受け取る
line = gets.split(' ')
=> ["a", "b", "c"]
# 独立した変数で受け取る
a, b, c = gets.split
a
=> "a"
b
=> "b"
c
=> "c"

splitはデフォルトで半角スペース区切りなので(' ')を省略してもいい

複数行に1要素の受け取り

標準入力
a
b
c

line = readlines
=> ["a\n", "b\n", "c\n"]
line = readlines(chomp: true)
=> ["a", "b", "c"]
複数行に複数要素の受け取り

標準入力
a b c
d e f

lines = readlines(chomp: true).map(&:split)
=> [["a", "b", "c"], ["d", "e", "f"]]

整数で受け取る場合にはto_iで整数に変換すればいいので省略

puts print pのメモ

puts

改行を加えて出力する。内部的にto_sが呼ばれている

puts 123
123
=> nil

putsメソッド自身の戻り値はnilになる

putsは必ずnilを返します。
https://www.ruby-lang.org/ja/documentation/quickstart/


改行文字を含む文字を渡すと改行されて出力される

puts "abc\ndef"
abc
def
=> nil

配列は要素ごとに改行して出力される

puts [1, 2, 3]
1
2
3
=> nil

print

改行をせずに出力する。内部的にはto_sが呼ばれている。戻り値はnil

print 123
123=> nil

改行文字を含む文字を渡すと改行されて出力される

print "abc\ndef"
abc
def=> nil

配列はそのまま出力される

print [1, 2, 3]
[1, 2, 3]=> nil

p

改行を加えて出力する。内部的にはinspectメソッドが呼ばれている。また、戻り値はnilではなく引数のオブジェクトとなる

p 'abc'
"abc"
=> "abc"

改行文字を含む文字を渡すと改行文字のまま出力される

p "abc\ndef"
"abc\ndef"
=> "abc\ndef"

配列はそのまま出力される

p [1, 2, 3]
[1, 2, 3]
=> [1, 2, 3]

まとめ

・putsとprintはto_s、pはinspectメソッドが呼ばれている
・putsとpは改行する。printは改行しない
・pは改行文字をそのまま出力する
・putsとprintの戻り値はnil、pは引数のオブジェクト
・putsは配列を要素ごとに改行する