データ管理にvuexを使ってみることにしました。 今回の記事ではまださわりしかできていないので、そのさわりでちょっと詰まってしまったことについて備忘録代わりに書いていきます。 こちらの記事をチュートリアル代わりに勉強しています。 入門者必読、vue.jsの状態管理Vuexがわかる vuexをインストールして上記の記事のようにHello Vuexを表示させようとしたのですが、こちらのエラーが出てページが表示されませんでした。 "TypeError: Cannot read property 'state' of undefined" 原因としては非常に単純で、main.jsにvuexを書いていなかったせいでした。 以下のようにmain.jsにvuexを追加し、無事表示されるようになりました。 import Vue from 'vue' import App from './App.vue' import vuetify from './plugins/vuetify' import router from '../router' import VC

前回書いたように、 一覧・詳細表示・投稿が一つのページになっている状態から、 一覧画面 と 詳細表示/投稿/編集画面　という形への修正を進めています。 今回は、詳細表示を投稿画面の方に移しまして、 一覧画面のデータテーブル行クリック ↓ 詳細・投稿画面に遷移、クリックした行のデータ表示 というように、画面遷移と同時にデータ受け渡しをするような動きに修正しました。 先にも書いたように、まず投稿画面に詳細表示を移動させました。 （あと、送信成功のv-alertを閉じられるようにしました。） 本当は投稿フォームと詳細表示を同じところにしたいのですけれど、まず今回はこれで。 一覧の行をクリックで投稿・詳細ページに飛び、詳細表示へデータが受け渡されます。 動きは以下の記事を参考にさせていただきました。 【Vue】Methodsからクエリパラメータを送り、遷移先画面でパラメータを受け取る方法！ 詳細表示ボタンを追加するのではなく、行クリックのままにしたかったので、 Vue-routerなどテンプレート部ではなく、methodsでパラメータを受け渡せる方法を選

今回もフォーム周りを修正していこうと思います。 現在の一覧・詳細表示・投稿が一つのページになっている状態から、 一覧画面 と 詳細表示/投稿/編集画面　で分けようと考えています。 この投稿ページは特に何を投稿するためのというような設定はないのですが、その形の方がコンパクトかなというのと、投稿してもリロードしないと一覧に表示されないので、いっそ別のページのほうがいいかなと考えたからです。 とりあえず今回はサーバに繋がらなかった関係で、投稿フォームを別ページにするということだけをしました。 FORMとしていた画面の名前をARTICLEに変更し、投稿フォームを削除、代わりに「新規登録」ボタンを追加しました。 「新規登録」押下で以下の画面に移動します。 こちらでデータを登録し、「一覧へ戻る」で一覧の画面に戻れます。 送信成功で強制的に一覧画面に遷移するというのも考えましたが、とりあえず今はこれで。 初めの方にも書いたように、詳細表示/投稿/編集を一つの画面で作りたいのですが、それだとv-formは使わないほうがいいのかと悩んでいます。 今のところv-fo

今回は、フォーム周りのUI修正についての記事になります。 具体的には 送信成功・失敗のメッセージにv-alertを使用 フォーム送信後、フォームの入力内容を初期化 といった修正を加えました。 送信成功・失敗にv-alert コンポーネント使用 送信の成否のメッセージを目立たせるためにv-alartのsuccessとerrorを使用しました。 そのままだとちょっと大きすぎるのでdenseで少し小さく表示させています。 これでも位置がちょっとズレていたり、やっぱり少し大きかったりするのですが、ひとまず今はこれで。 送信後（登録後）フォームを初期化 送信成功した後も入力値が入ったままだったので、送信成功時のみ入力値が初期化されるようにしました。（上に貼った画像参照） コードはこちらを参考にさせていただきました。 vuetify.jsのフォームで入力と検証エラーをリセットする async submit() { const params = { title: this.title, //タイトル au

AIのクラウドサービスを利用してカルビーが社内でアプリの試作版を作成したことが記事になっていました。単純に、このアプリの利用方法自体が面白いと感じたのもあり、ここで紹介しようと思います。 カルビーが挑む｢はがき10万通｣のマーケティング活用……変わる｢大収穫祭｣ AI活用するにしてもまず活用のためのデータをどう集めるかという問題があります。 パッケージを折って写真を撮ることで応募できる　というのはとても面白いアイデアだなとと思いました。 こういった食品になにかしらの特典が得られるもの付属しているとき、メーカー側が想定していない方法で特典を取得しようとする　ということが発生しがちだと思っています。 購入せずに応募だけする・購入しても消費せずに応募する、などなど。 その点この方法なら少なくとも応募してくる人は パッケージを折りたためる＝購入して、食べきっている人　であることが明らかです。 これはこれまでのハガキ応募でもわからなかったことでしょう。 また、折りたたむことでゴミのかさを減らすこともできるという利点まであります。 このアプリのプロトタイプは

今回はこれまで作成していたWEBアプリとは別で調べたもの かつ ちょっと短いので記事のカウントを刻みました。 <v-data-table>でテーブルを作ると、自動でヘッダー部に並び替え機能が付きます。 （項目名をクリックすると昇順・降順に変えられる） ですが、テーブル内に並び替える必要のない項目（詳細表示のボタンなど）がある場合、この機能がある意味がないので、特定の列だけ並び替えを無効にすることができる方法を調べました。 公式ドキュメント によると、headersでsortableプロパティをfalseにすることで並び替えを無効にできるようです。 headers: [ { sortable: boolean } ]

前回データ一覧に検索機能を付けたとき、複数条件での検索の実装はどうなるのかということを書いたので、今回はそれについての記事になります。 結論から言うと、前回の記事で書いた「filterableをうまく使えば複数条件での検索も作れるのでしょうか。」という疑問については、できない　ということでした。 search propを使用する限り検索条件は一つしか無理であるということのようです。 ですので、こちらの記事の方法を参考にさせていただきました。 [Vuetify] V-Data-Table で複数項目のフィルタリングを行う方法 <v-data-table>タグからsearchの記述を消して、<v-text-field>…検索条件入力欄をタイトルと投稿者の２つ分用意し、以下のように修正しました。 見やすくするため二つの入力欄は横並びにしました。 <v-row> <v-col> <v-text-field v-model="titleValue" appe

今回はこれまで作ったフォーム周りを整えようと思いまして、 一覧に検索機能・詳細表示で日付をフォーマット・フォーム日付入力をdatepickerに という修正を加えました。 一覧に検索機能 テスト送信でだいぶデータが増えてきたので、検索できるようにしました。 コードはシンプルに公式ドキュメントのものです。 今回は実装していませんが、filterableをうまく使えば複数条件での検索も作れるのでしょうか。 詳細表示で日付をフォーマット こちらの記事の、Vue3でのやり方を参考に実装してみました。 Vue.jsとMoment.jsで日付フォーマットのやり方 – Vue3での使い方も紹介 フォーム日付入力をdatepickerに 日付入力をdatepickerを使用するように修正しようと思い立った時は、入力フォームの隣にカレンダーアイコンを表示して、そこをクリックするとdatepickerが表示される　という形にしようとしていました。 ですがこちらの記事のやり方の方がコードがシンプルかつ面白いなと思ったので、こちらを参考にさせていただきました。 v-te

インターネットをやっていると広告は必ず見るもの、ということで今回は広告関係の記事をです。「見る」というより「見ることになる」という方が適切かもですが。 コロナ禍でネットをする時間も増えて、前よりはマシになりましたが結構センシティブな内容のものが多く表示されることもあり困っていました。 しかもそもそも興味がない内容で…ということも。 そのあたりのことも踏まえて、広告業界がどういう風に工夫しているのかを知れました。 ちなみに、個人的には表示される広告の内容というより、紛らわしい位置にある広告が一番嫌です。「PR」とは書いてるけど形式はそのページのコンテンツと同じで表示されているものなどなど。 パソコンならまだしもスマホだと誤タップが起こりやすいのでもう…。 もしかしたらこういうのはもう古いタイプのものかも知れませんが。 「文脈」で広告配信先探し　脱クッキーで脚光 何を見たかではなく、何を見ているかで広告を決めるという技術。 今見ているものとは関係のない広告が表示されると、例え過去に調べたことのあるものだとしてもストレスに感じることがよくあります。 そ

前回でデータ取得・テーブルで一覧表示ができたので、今回はデータの詳細表示をやってみました。詳細といってもテーブルの時点で全項目表示されていますが。 本当は指定したIDのデータの取得、というのをやりたかったのですが、 参考にした記事で行のデータを取得する方法を知ってしまったので、今回はやめまして、 テーブルで特定のデータの行クリック→行データ取得→取得したデータ表示 という流れで実装してみました。 実装後の画面はこんな感じです。 テーブルの行リックで真ん中の<v-card>のエリアにデータが表示されます。 テンプレート v-cardなら見やすいかなと思ったのですが、テキストがグレーでちょっと見づらいかもしれないと思いました。 <v-container> <v-card> <v-card-text>タイトル：{{detailTitle}}</v-card-text> <v-card-text>投稿者：{{detailAuthor}}</v-card-text> <v-card

前回POSTの実装が形になったので、今回はGETで一覧表示を実装しました。 この記事では簡単なコードの説明と、実装中詰まったところの解説をしていきます。 今回はこちらの記事を参考にさせていただきました。 【Vue.js入門】ユーザ管理画面をVuetify.jsのData tablesで作る テンプレート 参考記事のほとんどまんまです。 v-data-tableで、取得したデータをどう表示すればいいのかと困っていたのですが、 テーブル項目にリンク埋め込みをしたときのように、v-data-tableの中身をいじりたいならtemplateを使用すればよかっただけでした。 <v-container style="width: 1200px;"> <v-data-table :headers="headers" :items="articleList" > <template slot="items" slot-scope="props"> <td cla

前回作成した投稿フォームについてコードを公開していましたが、POSTのURLがそのまんま公開されてる状態だったので、.envファイルを利用し公開せずに済む形に修正しました。 この記事ではその手順と403エラーで詰まったところについて書いていきます。 参考ページ 環境変数の代わりに .env ファイルを使用する (dotenv) dotenv利用手順 以下のコマンドでdotenvモジュールをインストール npm install dotenv --save プロジェクト直下に.envファイルを作成。 .envファイル内で変数設定。 VUE_APP_POST_URL=POST用URL vue.config.jsに以下を追加。（module.exports の上に書きました。 ） require('dotenv').config(); Form.vueのPOST部分を以下のように修正する。 await axios.post(process.env.VUE_APP_POST_URL, params) これで.gitignoreに.envを追加し追跡対象から

前回と同じく、フォームの実装です。 とりあえずPOSTができるようになりましたので、どういう動きの流れになっているかを復習がてらにここに残しておきます。 フォームの形の参考元は以下の記事です。 Vue & Vuetifyでバリデーション付きのフォームを作ってみる 参考記事に基づいて実装したバリデーションチェックで、すべての項目でそれぞれ 入力必須・10文字制限を入れています。 未記入ありもしくは文字数をオーバーすると、送信ボタンを押しても登録処理が動かないようにしています。 全項目記入・10文字以内ではじめて登録処理を通ります。 POST後、送信ボタン横に「送信完了！」が表示され、POSTされたことがわかるようにしています。 逆に、送信失敗時は「送信失敗」が表示されるようにしています。本当はもう少し目立つ見た目のほうがいいんでしょうが…それは次の機会に。 下の画像はPOSTのURLを間違えた状態で送信しようとした場合です。 コードは以下のようになりました。 methods: { async submit() { cons

前回書いたように、フォームの実装を進めています。 まずは、見た目と大体のコードの形をこちらを参考に作成しました。 Vue & Vuetifyでバリデーション付きのフォームを作ってみる その時詰まってしまい、解決したのでここに残しておこうと思います。 Property or method "submit" is not defined on the instance but referenced during render. 先の記事を参考にフォーム画面を作成したのですが、画面表示時点で以下のエラーが出ていました。 [Vue warn]: Property or method "submit" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the

次回からフォームを実装していきたいと思っています。 この記事では参考にしようと思っているサイトの紹介だけです。 Vue.jsでGETとPOSTを実装する vue.jsを使ってaxiosを学ぶ この『VueでWEBアプリ』シリーズのコードをgithubで公開しています。参考までに。 https://github.com/izumi-shibano/test-vue

例のごとく　こちらのブログ記事　を参考にVuetifyを使用してみての感想記事です。 今回はpicker系（という呼び方でいいんだろうか？）がちょっと面白かったので紹介しようと思います。 ・デイトピッカー・マンスピッカー・タイムピッカー 簡単に日付・月・年・時刻が選択できるコンポーネントです。 フォームなどでカレンダーや時計のアイコンを押すと表示される、という風に使えそうですね。 気になるのは、マンスピッカーはいいんですけど、デイトピッカーが日本語対応でご丁寧に「〇日」って表記されてます。 ちょっとごちゃついて見えるような気もしますが…これは多分このコンポーネントを使用する限りどうしようもないのかなと。 タイムピッカーも結構独特のUIだと思ったのですが…。これはスマホで時刻入力するのに便利なのかな？とも思いました。 ドラムロール型のピッカーだと通り過ぎたりミスタップしてしまいやすい印象があるので、この方が案外使いやすいのかも…？ ・カラーピッカー 正直こんなものまであるのかと驚きました。 自分でUIカラーリングを変更できるアプリもありますから、そ

今回は漫画に関連するAI技術のニュースを集めてみました。 私は本は紙派（液晶がまぶしくて辛い・どこまで読んだかなどを残ページの厚さやセリフ、文章の位置で覚えるから）なので知らないトピックがいろいろありました。 セルシス、AIで漫画のコマ検出　スマホ向け構成しやすく 私は漫画は紙派かつパソコンを結構利用するので、スマホで漫画をどう読むかということについては疎かったのでちょっと驚きました。 一話だけでコマなんてたくさんあるわけですから、AIで自動化できればかなり効率が上がりますよね。 こういったところにもAI自動化の需要があるとは考えませんでした。 ある意味漫画のレスポンシブデザインですね。 個人的な肌感覚として、10～7年前までいわゆる「縦長漫画」がネット上に多かった印象があります。 あれはパソコンでスクロールして見るのに特化したデザインだったと思います。 （あと、コマ割りの仕方が分からなくても簡単に漫画が描けるのでアマチュア絵描きが愛用していた印象） スマホでネットを見る人が増えたことにより、縦長だと細長い画像を拡大して見ることになる・SNSの画

前回テーブル項目にリンク埋め込みをしたときv-slotを足すことでエラーを解決しましたが、v-slotが何なのかもtemplateタグで何をしているのかもよくわかっていない状態だったので、調べなおして自分用にまとめてみました。 ・v-slot v-date-tableにはテーブルカスタマイズのためにいくつかスロットというものが用意されている（item/body/headerなど）。item.<name>のようにスロットを指定すると特定の列だけカスタマイズできる。 Vuetify公式 ・item itemはテーブルの中身のこと。 item.<name>で<name>列の中身を指定してカスタマイズできる。 ・target="_blank" 別タブでリンクを開く。 ・:href="item.website" リンク設定、リンク内容はitem.websiteの値 ・'v-slot' directive doesn't support any modifierエラー <template #item.website="{ item }"> ↓のように修正 <

今回も前回までと同様　こちらのブログ記事　を参考にVuetifyコンポーネントを試したことについてです。 前回から追加で実装してみたのは以下の通りです。 タイムライン・ホバー・区切り線・テーブルの項目にリンク設定 この中のテーブルの項目にリンク設定でサンプルコードのままだとうまくいかなかったところがあったのでそこの解決法と、前回よくわからなかったパンくずリストの使い方について書いていきます。 ・パンくずリスト スクリプトのhrefに飛ばしたいところのURLを貼ればいいだけでした。 （hrefとあるのにvuetify_v-breadcrumbs.htmlでホームまで飛んでいたので混乱していました。） ハッシュがある地点へ飛ぶこともできます。 export default { data () { return { items3: [ { text: "root", disabled: false, href: 'http://localhost:80

前回に引き続き、今回も　こちらのブログ記事　を参考にVuetifyコンポーネントを使用してみた感想などを書いていきます。 前回からさらに実装してみたものは以下の通りです。このうち気になったものについて少し書いていこうと思います。 スイッチ・ツールチップ・オーバーフローボタン・スライダー・ダイアログ モーダルダイアログ・アラート・ツールバー・システムバー・ボトムシート パンくずリスト・チップ・フローティングアクションボタン・エクスパンションパネル カレンダー（月）（週）（日）・リスト ・スライダー 音量調整ぐらいでしか用途が思いつかなかったのですが、公式ドキュメント を見てみると 思いのほか使いどころがいろいろありそうで面白く思いました。 縦にできたり数値の高さで色を変えられたりするのも、きれいなUIにしたい時に便利そうです。 ・ダイアログ・モーダルダイアログ これがちょっとわからなくて…どちらもモーダルダイアログのような振る舞いになってしまったのですよね。ダイアログもの方でもスクロールができなかったので…。 モーダルかどうかは結構用途が違ってく