- 投稿日:2020-08-08T22:15:03+09:00
Gridsome入門 SPAを作ってみよう 【1日目 要件定義編】
スケジュール
やろうと思ったきっかけ
お盆休みで9日もあるので続けて何かやってみようかなあと思ったという、ありがちなやつ。
自分が怠けなければ9回分続きます(怠けるな)Gridsomeとは
Vue.jsベースのフレームワークです。
Jamstack frameworkと呼ばれているもので、J(Javascript)A(API)M(Markup)の頭文字から取られています。
詳しくはこちらを参照
https://gridsome.org/今回作ろうとしてるもの
最近自分が資産運用に取り組み始めたので、その一貫で円グラフを使って資産管理アプリをSPAで作ってみようと思います。
イメージとしては円グラフで資産割合がわかるようにして、色んなグラフを切り替えれるようにしたい。技術要件
- 言語 Vue.js
- フレームワーク Gridsome
- データソース CSV(もしくはAPI作るかも時間あれば)
- インフラ AWS Amplify(S3) ※API作る場合はAPI Gateway,Lambdaも必要なはず
機能要件
- Vue.jsのグラフライブラリでポートフォリオを見やすく表示する(vue-chartlessが良いかなあ)
- 円グラフは何種類かのカテゴリ別で表示
- 月ごとの資産推移も表示させるページを作る
あとがき
とりあえず1日目なのでこんなところで。
今日は日中お出かけしてたので、夜しかできなかったなあ。というか夜に思いついた。よし明日から本格的に頑張ろう。
- 投稿日:2020-08-08T21:20:41+09:00
【Nuxt.js】Auth Module×vue-i18n ログイン画面を国際化させる方法
Nuxt.jsでアプリケーションを開発する際、ログイン認証にAuth Module、国際化にvue-i18nを使いました。
どちらも簡単に実装でき便利なライブラリですが、ログイン画面の国際化がうまくいかずハマってしまいました。
問題:言語の切り替えができない
vue-i18nを使用することで、アプリケーションを簡単に国際化することができます。
設定方法については、省略しますが、
パスのルートに言語の識別子を追加することで、言語の切り替えを行ってくれます。
例えば、
/ja/page
だと日本語表示になり、/en/page
だと英語表示になるように実装できます。
/page
の場合は、デフォルトに設定した言語で表示されます。しかし、Auth Moduleを用いてログイン認証を実装している場合、ここで問題が起こります。
Auth Moduleは、下記のように、nuxt.config.jsにログイン画面のパスを
/login
と記述すると、未ログイン時はログイン画面/login
にリダイレクトしてくれます。nuxt.config.jsexport default { // ... auth: { redirect: { login: '/login', // ログイン画面のパス logout: '/login', // ログアウト時のリダイレクト先 callback: false, home: '/' // ホーム画面のパス(ログイン後のリダイレクト先) } } // ... }つまり、
/en/login
のようなパスでアクセスしても/login
にリダイレクトされてしまい、英語ではなくデフォルト言語で表示されてしまうのです。解決策:リダイレクト先を書き換える
nuxt.config.jsで設定したリダイレクト先を書き換えるコードをpluginsに追加します。
plugins/auth.jsexport default ({ app, route }) => { // パスに識別子が存在するときのみ書き換え if (route.fullPath.indexOf('/' + app.i18n.locale + '/') === 0) { // nuxt.config.jsで記述したリダイレクト情報を取得 const redirect = app.$auth.$storage.options.redirect for (const key in redirect) { // 書き換え後のリダイレクト先を定義 redirect[key] = '/' + app.i18n.locale + redirect[key] } // リダイレクト情報の書き換え app.$auth.$storage.options.redirect = redirect } }そして、nuxt.config.jsにauth.jsのパスを追記します。
nuxt.config.jsexport default { auth: { redirect: { login: '/login', logout: '/login', callback: false, home: '/' }, plugins: [ // ****** '@/plugins/auth.js' // 追記 ] // ****** } }これでログイン画面の言語の切り替えが行われます。
例えば、パスが
/en/login
の場合、/login
にリダイレクトされる前に、ログイン画面のパスを/en/login
に書き換えるため、/en/login
にリダイレクトされるようになりました。まとめ
今回はpluginsを追加することでリダイレクト先を書き換えるという強引な解決策でした。
もっと良い方法があるかもしれませんが参考になれば幸いです。
もしもっと良い方法があれば教えてください!!
- 投稿日:2020-08-08T21:20:41+09:00
【Nuxt.js】Auth Module×nuxt-i18n ログイン画面を国際化させる方法
Nuxt.jsでアプリケーションを開発する際、ログイン認証にAuth Module、国際化にnuxt-i18nを使いました。
どちらも簡単に実装でき便利なライブラリですが、ログイン画面の国際化がうまくいかずハマってしまいました。
問題:言語の切り替えができない
nuxt-i18nを使用することで、アプリケーションを簡単に国際化することができます。
設定方法については、省略しますが、
パスのルートに言語の識別子を追加することで、言語の切り替えを行ってくれます。
例えば、
/ja/page
だと日本語表示になり、/en/page
だと英語表示になるように実装できます。
/page
の場合は、デフォルトに設定した言語で表示されます。しかし、Auth Moduleを用いてログイン認証を実装している場合、ここで問題が起こります。
Auth Moduleは、下記のように、nuxt.config.jsにログイン画面のパスを
/login
と記述すると、未ログイン時はログイン画面/login
にリダイレクトしてくれます。nuxt.config.jsexport default { // ... auth: { redirect: { login: '/login', // ログイン画面のパス logout: '/login', // ログアウト時のリダイレクト先 callback: false, home: '/' // ホーム画面のパス(ログイン後のリダイレクト先) } } // ... }つまり、
/en/login
のようなパスでアクセスしても/login
にリダイレクトされてしまい、英語ではなくデフォルト言語で表示されてしまうのです。解決策:リダイレクト先を書き換える
nuxt.config.jsで設定したリダイレクト先を書き換えるコードをpluginsに追加します。
plugins/auth.jsexport default ({ app, route }) => { // パスに識別子が存在するときのみ書き換え if (route.fullPath.indexOf('/' + app.i18n.locale + '/') === 0) { // nuxt.config.jsで記述したリダイレクト情報を取得 const redirect = app.$auth.$storage.options.redirect for (const key in redirect) { // 書き換え後のリダイレクト先を定義 redirect[key] = '/' + app.i18n.locale + redirect[key] } // リダイレクト情報の書き換え app.$auth.$storage.options.redirect = redirect } }そして、nuxt.config.jsにauth.jsのパスを追記します。
nuxt.config.jsexport default { auth: { redirect: { login: '/login', logout: '/login', callback: false, home: '/' }, plugins: [ // ****** '@/plugins/auth.js' // 追記 ] // ****** } }これでログイン画面の言語の切り替えが行われます。
例えば、パスが
/en/login
の場合、/login
にリダイレクトされる前に、ログイン画面のパスを/en/login
に書き換えるため、/en/login
にリダイレクトされるようになりました。まとめ
今回はpluginsを追加することでリダイレクト先を書き換えるという強引な解決策でした。
もっと良い方法があるかもしれませんが参考になれば幸いです。
もしもっと良い方法があれば教えてください!!
- 投稿日:2020-08-08T19:29:28+09:00
Vue.js のライブラリを探すなら awesome-vue を使うと便利
はじめに (おわりに)
「Vue.js で○○したい」って時、(あえて)自力で実装って人も居ると思うけど、多くの人はライブラリを探してきて使っていると思う。
ライブラリ探す時「Google でキーワード検索する」でも良いが、Awesome Vue.js で探すのも良いよ、というだけの話。
リポジトリは vuejs/awesome-vue。公式ページ上でも、GitHub 上でも情報を探せるようになっている。
GitHub 上で見る場合は、スクロールバーのサイズ(ページの長さ)や目次のデカさを見て探す気が失せるかもしれないが、目次の「Components & Libraries」を見て自分の見たい箇所だけチェックするという使い方で OK。
もしくは 「Ctrl(Cmd) + F」 で探すとかでも良いと思う。あとは各ライブラリのリポジトリで詳細を確認し、自分のプロジェクトにマッチするかどうか、スター数、コミット頻度(放置されてないか)などで、どれを使うかを判断すれば良い。
補足
わかりにくいけど公式ドキュメントからも awesome-vue へのリンクはある。(自分は Google 検索から、たまたま awesome-vue にたどり着いた)
プラグインの使用 の下記
コミュニティの貢献による膨大なプラグインやライブラリは awesome-vue で確認できます。
Using a Plugin の下記
Checkout awesome-vue for a huge collection of community-contributed plugins and libraries.
もしくは
エコシステムを調べる の下記
The Awesome Vue Page: 他の素晴らしい人々によって公開された素晴らしいリソースを参照します。
The Awesome Vue Page: See what other awesome resources have been published by other awesome people.
あと、多くの人が速攻で削除しているであろう
src/components/HelloWorld.vue
にも実はリンクがある、ちゃんと確認しよう(自戒)補足2
自分も「そんな便利ページあったのか」って感じだし、「実は知らない人も多いんじゃないかな」と思って書いた。
あと、ざっと調べた感じ「awesome-vue」そのものに焦点を当てた記事が Qiita 上に無さそうだった(無さそうに見えた)ってのもある。
(以下の記事に登場しているのは確認したが主題ではない)参考文献
- 投稿日:2020-08-08T08:58:51+09:00
僕がよくやるVueでWebアプリ作成のための準備
はじめに
webアプリ作って、自分なりのいいやり方が固まってきたので、ここで公開しておきます。
参考になれば幸いです。準備
mkdir hoge cd hoge yarn initまずはディレクトリを作って、コードを書く場所を準備します。
yarnの質問は適当に答えておいてください。
めんどくさい場合は、改行連打でOKです。yarn add --dev parcel
parcel入れます。
依存関係はすべてparcelにおまかせ。
parcel最高です。mkdir src
コードを管理するディレクトリを作ります。
なくても大丈夫ですが、整理整頓のために準備します。コード
index.pugdoctype html html head meta(charset="UTF-8") meta(name="viewport" content="width=device-width, initial-scale=1.0") title スターターキット body div#app script(src="index.ts")index.tsimport Vue from 'vue' import App from './App.vue' import Buefy from 'buefy' import 'buefy/dist/buefy.css' Vue.use(Buefy) new Vue({ el: '#app', render: h => h(App) })App.vue<template lang='pug'> div.hero.is-fullheight div.hero-body div.container.has-text-centered h1.title オレオレスターターキット h2.subtitle それっぽいでしょ div.container a.link-stylus(href="https://buefy.org/") buefyはスッキリかけて、僕は好きです。 div.hero-foot div.container.has-text-centered span © 2020 a(href="https://twitter.com/nucosenpai" target="_blank") span ぬこ先輩 </template> <script lang='ts'> import {Component, Vue} from "vue-property-decorator" @Component export default class App extends Vue { } </script> <style lang="stylus" scoped> .link-stylus border: 1px solid </style>srcディレクトリに上の3つのファイルを準備します。
templateにpugを使ってることで、かなり見やすくなっていると思います。
見た目のために僕はbuefyを使いましたが、ここはお好みで。yarn parcel src/index.pug --open
yarnが自動的に依存関係を調べてくれて、必要なモジュールをすべてインストールしてくれます。
hot reloadにも対応してますので、動作を確認しながら開発ができます。おわりに
できたアプリはvercelで公開してみるといいと思います。
vercel vercel --prod
僕が最近作ったアプリはマンダラチャートが書けて、画像として保存できます。
mandara
目標設定などに使ってみてください。