2022-10-31

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

vue.js

検索機能は作った

<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から検索結果を受け取って表示

検索結果ページから再度検索してもうまくいかない

パラメータの変更を検知する

ルートのパラメーターを使う際に特筆すべき点は、ユーザーが /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();
      }
    },
  },

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

2022-07-29

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を指定

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

2022-04-05

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

Ruby on Rails HTML&CSS

導入はこちらから
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

2022-04-05

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

2022-04-04

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

2022-04-03

シェル変数と環境変数

シェル変数

多くのプログラミング言語と同じく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

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

2022-04-01

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

概要

シェルは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
比較的新しいシェル。機能面が多彩

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

Shebang(シバン・シェバン)

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

#!/bin/bash

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

個人的勉強メモ置き場

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

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

検索機能は作った

検索結果ページから再度検索してもうまくいかない

パラメータの変更を検知する

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

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

UserIcon.vue

UserPost.vue

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

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

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

入力フォームが伸びないようにする

おまけ

bash 連想配列メモ

bash 配列メモ

シェル変数と環境変数

シェル変数

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

概要

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

コマンドの実行の流れ

シェルの種類

Shebang(シバン・シェバン)

検索機能は作った

検索結果ページから再度検索してもうまくいかない

パラメータの変更を検知する

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

UserIcon.vue

UserPost.vue

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

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

入力フォームが伸びないようにする

おまけ

シェル変数

概要

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

コマンドの実行の流れ

シェルの種類

Shebang(シバン・シェバン)

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

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