Vuetifyを入れているのにチェックボックスやテキストボックスの実装に使用していなかったことに気づいたので、こちらのブログ記事 を参考に改めて追加してみました。 今回実装してみたのは以下のパーツです。 ボタン・ボタン（角丸）・チェックボックス・ラジオボタン・テキスト入力・パスワード入力・リストボックス・コンボボックス・テキストエリア・テーブル・グリッド 本当に簡単に、Vuetifyコンポーネントを使用するだけでおしゃれな見た目になって驚きました。 特に驚いたのはテーブル　 <v-data-table>　です。 Row per pageの設定、全体のうちいくつのデータを現在表示しているか、ページ移動　まで付いてくるとは思いませんでした。 しかもそれぞれの列で昇順・降順を変更できるようにもなっています。 特に何のオプションもつけずにこれだけしっかりしたテーブルが作れるのはかなり便利ですよね。 Vuetify公式　を見てみると、ほかにもカスタマイズの余地がありそうなので、今後また触ってみようと思います。

今回は、GPT-3という自然言語処理モデル関連のニュースです。 以前からAI関連でニュースを調べているときに何度も名前が挙がっていたので気になっていました。正直どういうものなのかは専門知識が無いので「言語関連のすごい技術」のような認識でしかないのですが…。 話し言葉でプログラミング　Microsoft、ノーコード進化 ノーコードツールをいくつか触ってきて、自分で全部やるほうが微調整が効くというのはもちろんですが、そういった細かいことを気にしなくてもよい場合でのプログラミングにかかるコストがかなり少なくて済むという利点を感じていました。 そのコストというのには知識や経験も含まれます。 私は社会人になって初めてプログラミングをするようになりましたが、そこで苦戦したのがいわゆる「プログラムは書いたとおりにしか動かない」でした。 いや当然のことなのですが、自分のやりたいこと→プログラミング言語に直す　この作業に慣れるのに時間がかかりました。 「覚えるのが難しい」というより、「どう直すものなのかわからない」という感覚です。 なので自分か書いた文章の通りのコ

今回の記事はV-Calenderでのカレンダーの実装についてです。 カレンダーの見た目が想定と違っており、苦戦の結果完全解決までは至っていませんが、記録として残しておきます。 前回カレンダーの実装がうまくいかなかったと書きましたが、一日たってもう一度起動してみると、表示されました。（前回主に参考にしたのは　こちら） しかし画面の端いっぱいまでに表示されてしまっていました。 そこで、Access.vueを以下のように修正しました。 ちなみにAccess.vueは　こちらのチュートリアル での下層ページコンポーネントの作り方と同じです。 （もとはattrs:{　の上に　data: { を入れていました。） <template> <section class="access"> <AppBackgroundHolder :title="title"/> <v-app> <v-container> <div id='app'> <v-calendar ></v-calendar> </div> </v-container> <

今後は、前回までのチュートリアルで作成したものをアレンジすることで勉強していく方向性で行くつもりなので、その時の発見なり参考サイトなりを残していこうと思います。 今回は、チュートリアルで触れなかったBlogとAccessページを作成し、そこにテキストボックス・チェックボックス・ラジオボタンを実装するということをしていました。 チェックボックス実装の参考サイトはこちら ラジオボタン実装の参考サイトはこちら テキストエリアがこの画像だと見えませんが「テキスト」の右横に入力欄があります。カーソルを置かないとまるで見えません…。テキストエリアは他ふたつと違い「こうかな？」ととりあえず入れてみただけなので、たぶん間違ってるんでしょうね…。 これらはまだ入力した値をどこかへ登録などはしていません。次回の課題です。 あと、これら以外にカレンダーを実装してみようとしたのですが、結果だけ言うとうまくいきませんでした。 V-CalenderというVueのライブラリを使用してみたのですが、画面に表示されず…。 V-Calender ややこしそうなら別のパーツの実装など

前回まで続けてきたチュートリアルが一通り終わりました。 【Vuetify】カードコンポーネントの作成方法 今回はこのチュートリアルをやってみての総括的な感想のようなものを書こうと思っています。今更ですがタイトルがWEBアプリになっていますがこのチュートリアルはホームページ作成でしたね。でもまあWEBアプリ勉強の入り口としてということで…。 まず今までやってみて、vueコンポーネントはtemplate,script,styleがひとまとめになっているのがわかりやすくていいなと思いました。 わかりやすくするためのパーツ分けのせいでより分からなくなってしまう、ということがこれまでしばしば起こっていたので…。 ひとまとめにできるからこそ冗長にならないようにパーツ分けをする必要があるのだとも思うのですが、そこまで複雑な見た目にしたいわけでなければ、ややこしくなることはなさそうに思えました。 また、このチュートリアルで特に面白いなと思ったのはカルーセルとカードコンポーネントの実装でした。 なんとなく複雑そうなことをやっているようなイメージがあり、今まで勉強し

今回は https://yacchi-engineer.com/?cat=32 こちらを、「下層ページタイトル部分の共通コンポーネント作成」まで進めたので、そこでで詰まったりした部分が2か所ほどあったので、それについて書いておきます。 まず、前回の記事と同じく@includeでエラーが出たので、App.vue に直接 @import を書くで解決しました。 まだ原因はよくわかっていません…。Syntax Errorだからタイプミスかと思ったんですがそんな感じでもないですし…。 また、これはチュートリアルの方のミスだと思うのですが、 https://yacchi-engineer.com/?p=1407#routerjs ここのmain.jsとrouter.jsでのimportの相対パスが間違っていました。 これまでの流れの忠実なら、main.jsはsrcフォルダ内で、router.jsはプロジェクト直下のはずなので、以下のようになるはずです。 main.js import router from '../router' router.js imp

2.5で書いた通り、 https://yacchi-engineer.com/?cat=32&paged=2 こちらのチュートリアルを参考に進めています。 今回は https://yacchi-engineer.com/?p=1219#scss こちらを進めているときにエラーが出てうまくいかない時があったので、解決までをまとめました。 「レスポンシブなヘッダーメニューの作成方法」にてApp.vueに .v-app-bar__nav-icon { @include display_pc { display: none !important; } } ↑の記述をしたところ、以下のエラーが出ました。 Syntax Error: ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema. https://qiita.com/kuroro_ru/

前々回の記事でなんとかgithub公開まではできた　はずだったんですが なぜかフォルダの中のファイルまでは見ることができず、調べてやり直してもうまくいかなかったのですが、今日とりあえずの回避方法がわかったので、その時の手順をここに残しておきます。 要するに「VSCodeで作成したvueプロジェクトをgithubに公開するまで」メモです。 ①新たにプロジェクトを作る（vue create） これまでvueプロジェクトのフォルダたちはさらに一つのフォルダにまとめてあって、その大きなフォルダと各プロジェクトのフォルダでソース管理がややこしくなっている状態だったので、大きなフォルダに入れずにプロジェクトを作成しました。 ②「フォルダを開く」で①のフォルダを開き、そこでgit init https://miya-system-works.com/blog/detail/128 ↑こちらを参照 ③githubで新リポジトリ作成 README.mdはナシで。 ↓作るとうまくいかなくなる？という記事もあったので https://note.com/stst_est

前回メニューの追加までして、次の目標としては詳細画面の追加だったのですが… 知識が足りなさ過ぎて、別々のチュートリアルを組み合わせて作成するというのに無理を感じてきたので、ちょっと改めて別の方法でやり直すことにしました。 そもそもVueの勉強のためだったので、もっと早い段階で自分が分かりやすいと思うやり方を探すべきだったなと反省しています。 https://yacchi-engineer.com/?cat=32&paged=2 メニューの追加の時、個人的に記事が読みやすく感じたのでこちらのサイトの連載に沿って進めていこうと思っています。あと、解説が細かくてわかりやすく感じたのもあります。 公式とかだと翻訳文ぽさが読みにくく感じてしまうのですよね…。

今回githubを初めてちゃんと使ったので、参考にしたサイトや自分のメモをここに残しておこうと思います。 改めてまとめるとかなり奇妙なことばかりやってます。 作業中の記録をあまり残せておらず、かなり簡易な書き方になっています。抜けがあるかもしれません。 当時の自分の思考の流れがわかるように、私は備忘録を残す時には間違いでも時系列順にするようにしています。またわからなくなった時ほぼ確実に同じような考え方をして詰まっているでしょうから。 なのでとても読みにくいと思います。 エディターはVSCodeです。 まず、githubのアカウントは以前に作成していた（一度も使ったことはない）のですが、emailの設定変えたかったので、なぜか一回アカウントを消しました…。普通にアドレスだけ変えればよかったのでは…。 githubで公開リポジトリを作成。 git initを間違えてホームディレクトリでやってしまったので、サイドメニューの「ソース管理」に「5k+」なんて数字が出てしまったので、こちら https://nekorokkekun.hatenablog.co

今回は、前回触りだけやったVueを用いたWEBアプリ作成の続きです。 やったことは以下の3つです。 Vue UIの使用 Vuetifyインストール 前回作成したWEBアプリにメニューを追加 一応目指しているのは、データ一覧があって、メニューがあって、詳細画面がある感じのものです。 実は今回結構ポカをしていて、本来想定していた手順とは違うことをすることになってしまいました。 先日Vue CLIでWEBアプリを作成したのですが、そのあとによくわからないままVuetifyを入れたのでなにがなにやらになってしまい…。 初心者のぐだぐだの記録・備忘録です。 あと、今更ですがUbuntu 18.04.4を使用してます。 Vue UIの使用 Vue UIはVue CLIのプロジェクト作成・管理UIです。GUIとして扱えます。 入れることになった経緯が、そもそもVuetifyを入れようとしたからなんですよね…。 https://tech.windii.jp/frontend/nuxt/vuetify-tutorial こちらのサイトにて、Vuetifyはデザイン

ノーコード・ローコードツールを使うのではなく、Vueを用いてWEBアプリを作成する、という機会があったので、その勉強メモのようなものを記事にしようと思います。 今回は触り程度しかやっていないので、次回以降もうちょっと詳しく書きたいと思います。 とりあえず初回として https://www.blog.duomly.com/vue-js-tutorial-how-to-create-vue-js-app-in-5-minutes/ こちらのチュートリアルをやってみました。 コピー＆ペーストするだけではあるのですが、私はVueにもフレームワークを使用する経験も薄く勘が働かず変なところで詰まりました。 <template>...</template> このタグがどこのものなのかわからず戸惑いました…。 私はとにかく理解が遅いので、とりあえずいろいろ使ってみて使用感から理解を進めていけたらと思います。

WEBアプリなどのモックアップを作成できるツールを探す機会があったので、今回は、 ノーコードでモックアップ製作ができるMockflowについて感想記事を書きたいと思います。 Mockflowで作成できるものとして UI Drawings, SiteMaps, Design Approvals, Annotations, StyleGuides 以上の5種類がありますが、この記事ではUI Drawingsの話だけをします。 エディターの操作感など こちらが作成してみた画面です。適当にパーツを配置しただけなのでめちゃくちゃですが、 左メニュー・データ一覧・一覧の絞り込み条件入力欄のイメージです。 エディター画面を拡大・縮小できるのがありがたいです。個人的にこういうツールにおいてそれが一番うれしく思う要素なので…。 パーツはELEMENTSから選択し、ドラッグアンドドロップで配置することができます。 変更できるのはパーツ内のテキストとサイズ、色、角度、線のタイプなどぐらいです。 パーツに他ページへのリンクをつけることはできますが、入力フォームに値を入れ

前回のAIとアニメに関するニュースの感想記事を書きましたが、今回もまた似た話題です。というか同じ話題です。 前回とはまた異なる、アニメ制作におけるAI技術の紹介記事です。 https://realsound.jp/tech/2021/02/post-697468.html 『アニメ×ゲームサミット2021 Wintter』というイベントでAlgoageの大野峻典氏のセッション内容を紹介したもので、アニメ・ゲーム制作におけるAI活用についての記事です。 ちょっと今回はアニメ関連だけに絞って感想を書きます。 イラスト自動生成でキャラクター作成のアイデア出しというのは面白そうだなと思いました。キャラクターデザインは多くのパターンを用意して考えていかなければなりませんが、これなら少なくとも自動生成なので「アイデアを描き出す」時間は削減できそうです。 個人的には最終的に「若干修正を加える」というより「それをもとに新たに描き起こす」ことになると思っているのですが、とにかく方向性のハッキリしているものなら手間を減らせるなと思いました。 キャラクターデザインその

以前までは無料版のWordPressを使用していたのですが、今回有料版を始めることにしました。 理由としては、WordPressのプラグインにどんなものがあるかを見てみたかったからというものがあります。 ということでいろいろ触ってみたかったのですが… 有料版と無料版での管理画面の違いに戸惑う + 練習用にちょうどよさそうなテーマ探しに戸惑う + すぐ試せるプラグインを探すのに戸惑う などありまして、とりあえずこの記事では、今回使用したテーマとプラグインの簡単な紹介・感想を書きたいと思います。 Simple Days ・ YAHMAN Add-ons 今回は「Simple Days」というテーマを使用しました。 練習用にちょうどよさそうなテーマを探していて、シンプルなブログテーマかつ日本語対応ということで選びました。 あと下画像のホーム画面での記事日付デザインがおしゃれだなあと感じたのも理由です。 このテーマのために作成されたプラグイン「YAHMAN Add-ons」があるということで、そちらもインストールしました。 見たところブログ運営で必要そう

アニメ現場でのAI活用についての記事を見かけまして、そこから掘り下げてみるといろいろ興味深い記事が見つかりましたので、紹介しようと思います。 https://www.nikkei.com/article/DGXZQOUC07BFK0X00C21A4000000/ 東映アニメーションがアニメ背景作成にAIを用いる実験をしている　との記事です。 風景写真から背景を作成する作業をAIに任せることで、ほかの作業に時間をさけるのではないか、という期待があってのことだそうです。 ですが現状では技術不足で結局手直しが必要なことがあるようです。 それにたとえAIの精度が上がり活用されることも増えアニメの質向上により人員を避けるようになったとしても、アニメの需要も増え続けているので人員不足解決には至らないであろうとのこと。 新幹線が生まれて時間の余裕どころか用事を詰め込めるようになった、みたいな話だと思いました。 https://news.mynavi.jp/article/20210312-1799225/ 先ほどの記事よりも技術面・活用法についてより詳細に書か