以前から追加したかった機能として、記事の削除機能を実装しようとしたのですが、うまくいかなかったので簡単に経緯等をここに残しておきます。 参考ページはこちらです。 【Vue.js入門】ユーザ管理画面をVuetify.jsのData tablesで作る 上記の参考ページのように、一覧画面の表に操作カラムを追加して、 削除ボタンをゴミ箱アイコンとして表示させようとしたのですが、アイコンの表示がうまくいきませんでした。 こちら↓を参考に 【Vue.js】Vuetifyでアイコンが表示されない場合の原因 npm install @mdi/fontなどもしてみたのですが、うまくいきませんでした…。 おそらく私の作った一覧は行をクリックで詳細画面に飛べるようにしているので、 そもそも行内に操作ボタンを入れるということ自体に無理があったのだと思います。 個人的に行クリックの方が操作が楽かなと思ったのですが、最初に参考にしたものと同じように、行クリックをやめて詳細と削除のボタンを作成したほうがいいのかもしれません。 (2021/09/29 追記） 行クリックでなく

以前の記事で、聴覚障がいのある方たちのためのテクノロジーについて書きましたが （IT気になるニュース(聴覚障がいとテクノロジー)） 先日開催されたオリンピック・パラリンピックの実況にて、手話の3DCGが使われているという情報を見まして。 開催当時はよく調べなかったのですが、いまあらためて調べてみると結構面白い技術だと思ったので今回はそれに関する記事を紹介したいと思います。 NHK 手話CGアニメーションサービスを発表 東京オリンピックの実況に活用 まずは、3Dモデルに不気味さがあまり感じられないことに驚きました。 私が見たことのある手話CGはもっと簡素というか、ライティングが暗くて表情筋を感じにくいイメージだったので。 こちらで実際の映像が見れます https://sports.nhk.or.jp/tokyo2020/universal/olympic/signlanguage/about/movie.html この手話実況CGは全体的にライトがあたって血色がよく見えますね。肌や服の質感もCG感とリアル感のちょうど間ぐらいです。 フォトリアルかつ

前回の記事で書いたように、日付入力フォームの自動補完が邪魔だったので、無効にする方法を調べて実装しました。 参考にさせていただいたサイトはこちらです フォームの自動補完を無効にするには 修正としては、autocomplete="off" を追加しただけです。 <v-text-field slot="activator" v-model="post_date" :rules="post_dateRules" label="日付" v-on="on" :readonly="mode !== 'new'" autocomplete="off" required > <

前回、次は削除機能をやると書きましたが、ちょっと予定変更して、送信ボタン横の 「送信成功」「送信失敗」表示の調整をしました。 以前から、アラート表示でv-cardがにゅっと伸びる＋アラートを消した後v-cardがガクっと戻る　のが気になっていたので…。 完全には解決しませんでしたが、マシにはできたので記事にしておきます。 あとどうでもいいことではあるのですが、この記事を書いているときに、Ctrl ＋Vで画像が貼れることに気づきました。 今までずっとわざわざ画像を保存してから選択して貼り付けていました…。 修正前は、送信ボタンを押すと 投稿フォームのv-cardが伸びて、しかも送信ボタンと微妙に高さがズレて表示されていました。 なので、まずはv-cardの高さを480pxで固定にしました。 そしてそれだけではアラートと送信ボタンのズレは直せないので、 アラートのmarginとpaddingを調整しました。 padding　の　0px,8px　とは、送信ボタンと合わせたものです。 .alart { margin: 0px; padding:

前々からテーブルの日付の表示が分かりにくい形になってしまっているのが気になっていまして。 今回はテーブル内の日付のフォーマットのやり方を調べてみようと思ったのですが、有効なものはまだ見つかっていません。 とりあえず今回のこの記事は、試してみたことのメモのような感じになります。 テーブル部分のコードはこのようになっています。 <v-data-table :headers="headers" :items="List" @click:row="clickRow" > <!--v-data-tabelのitemsをslotに設定--> <template slot="items" slot-scope="props"> <td class="text-xs-center">{{ props.item.id }}</td> <td class="text-x