このホームページは
.com
を使って作成されました。あなたも無料で作ってみませんか?
今すぐはじめる
  • ホーム

  • ブログ

  • その他

    Use tab to navigate through the menu items.
    ​YNET社員ブログ
    • 全ての記事
    • ノーコードレポ
    • ローコードレポ
    • Vue勉強
    検索
    VueでWEBアプリ(27.5) v-iconが表示できない(未解決)
    T sakurako
    • 2021年9月28日
    • 2 分

    VueでWEBアプリ(27.5) v-iconが表示できない(未解決)

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

    IT気になるニュース(聴覚障がいとテクノロジー2・スポーツ中継)

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

    VueでWEBアプリ(27) フォームの自動補完を無効に

    前回の記事で書いたように、日付入力フォームの自動補完が邪魔だったので、無効にする方法を調べて実装しました。 参考にさせていただいたサイトはこちらです フォームの自動補完を無効にするには 修正としては、autocomplete="off" を追加しただけです。 <v-text-field slot="activator" v-model="post_date" :rules="post_dateRules" label="日付" v-on="on" :readonly="mode !== 'new'" autocomplete="off" required > <
    閲覧数:17回
    VueでWEBアプリ(26) 送信ボタンとアラートを綺麗に並べたい
    T sakurako
    • 2021年9月6日
    • 2 分

    VueでWEBアプリ(26) 送信ボタンとアラートを綺麗に並べたい

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

    VueでWEBアプリ(25.5) テーブル内の日付をフォーマットしたい

    前々からテーブルの日付の表示が分かりにくい形になってしまっているのが気になっていまして。 今回はテーブル内の日付のフォーマットのやり方を調べてみようと思ったのですが、有効なものはまだ見つかっていません。 とりあえず今回のこの記事は、試してみたことのメモのような感じになります。 テーブル部分のコードはこのようになっています。 <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
    閲覧数:9回
     

    ©2021 by ブログ試作。Wix.com で作成されました。