個人的勉強メモ置き場

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

検索で同じパスへの遷移をしたい

検索機能は作った


<div class="serach mr-10">
  <v-text-field 
    prepend-inner-icon="mdi-magnify" 
    @keydown.enter="redirectToSearchPage" 
    v-model="keyword">
  </v-text-field>
</div>
data() {
  return {
    keyword: '',
  };
},

redirectToSearchPage() {
  this.$router.push({ name: 'SearchPage', query: { q: this.keyword } });
},

一部省略

クエリパラメータはthis.$route.queryで受け取れるのでそれをもとにapiから検索結果を受け取って表示

検索結果ページから再度検索してもうまくいかない
enterを押しても表示されない
パラメータの変更を検知する

ルートのパラメーターを使う際に特筆すべき点は、ユーザーが /user/foo から /user/bar へ遷移するときに同じコンポーネントインスタンスが再利用されるということです。 両方のルートが同じコンポーネントを描画するため、古いインスタンスを破棄して新しいものを生成するよりも効率的です。しかしながら、これはコンポーネントのライフサイクルフックが呼ばれないことを意味しています。

v3.router.vuejs.org

とのこと

変更を検知するにはwatch$routeを監視すればいい
変更を検知したらlocation.reload()でリロードしている

watch: {
    $route() {
        location.reload();
    },
  },

またto, fromで遷移前と遷移後の情報を受け取れるので特定の状況でのみ遷移するときに

watch: {
    $route(from) {
      if (from.name === 'SearchPage') {
        location.reload();
      }
    },
  },


無事うまく動作するようになった


CSSを割り当てる【Vue.js】

コンポーネントを使いまわしたい

具体的には下のUserIcon.vueを色んなとこで使いたい。でもサイズは各々違う大きさにしたい 今回はpropsで親から指定することにしました

UserIcon.vue

<template>
  <div class="user-icon" :style="styles">
    <img src="../../assets/images/user.png" class="user-icon-image">
  </div>
</template>

<script>
export default {
  props: ['width'],
  computed: {
    styles() {
      return {
        '--width': this.width
      }
    }
  }
}
</script>

<style scoped>
.user-icon {
  // デフォルトのwidth
  --width: 130px;
  width: var(--width);
}
</style>

UserPost.vue

<UserIcon :width="width" />
...
...
export default {
  data() {
    return {
      width: '100px'
    };
  },
}

カスタムプロパティを定義して、style属性で後からwidthを上書きしています。UserPost.vueではサイズをちょっと小さくしたいので100pxを指定

ちゃんと大きさが違ってますね

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で実行してねという意味になる