はじめに Nuxt.jsで作成中のプロジェクトでバリデーションプラグインを使ったので導入から最初の設定までをまとめました。 内容は基本的に公式ドキュメントを踏襲したものです。 バージョン nuxt/cli: 2.15.8 vue: 2.6.12 tailwindcss: 2.2.7 プラグインを使う いろんなプラグインを調べた結果、Nuxt/Vueで使えるプラグインの有名どころが2つあります。 Vuelidate Vuelidate | A Vue.js library. VeeValidate ←今回使うもの VeeValidate VeeValidateの方がバージョンが安定しているので今回はそちらを使うことにしました。 インストール 公式のヘッダーにも警告ができますが、Vue2とVue3ではVeeValidateのバージョンが異なるのでご注意ください。 # npmの場合 npm install vee-validate --save # yarnの場合 yarn add vee-validate 基本的な形 バリデーションをかけるinputタグをValidationProviderタグでくくる。エラー表示のために記載されているv-slotの中身の値をslot propsと呼びます。 <ValidationProvider rules="positive" v-slot="{ errors }"> <input v-model="email" type="text" /> <span>{{ errors[0] }}</span> </ValidationProvider> VeeValidateを使う 同じファイル内のscriptタグ内でコンポーネントをimportします。 import { ValidationProvider } from 'vee-validate'; export default { components: { ValidationProvider } }; vee-validationにはデフォルトのバリデーションが設定されていないため自分で追加していくことになる。ルールの追加は下記のように行います。 import { extend } from 'vee-validate'; extend('positive', value => { return value >= 0; }); バリデーションを付与したいフォームにrulesを追加します。 これで完成。ちゃんとバリデーションが機能しています。 <ValidationProvider rules="positive" v-slot="{ errors }"> <input v-model="value" type="text"> <span>{{ errors[0] }}</span> </ValidationProvider> 画面はこんな感じ。見にくいですが。 値が0以上なら正常に入力可能です。 値が0以下でバリデーションが作動。エラーメッセージがでます。 バリデーションを複数設定する バリデーションはこのように複数設定もできます。 この場合はoddというバリデーションを別途script内に作成して適用しています。 <ValidationProvider rules="positive|odd" v-slot="{ errors }"> <input v-model="value" type="number"> <span>{{ errors[0] }}</span> </ValidationProvider> エラーメッセージの変更をしたい場合 エラーメッセージを変更したい場合はreturnで渡すことができます。 returnの中を変更することでエラーメッセージを自由に変更することができます。 import { extend } from 'vee-validate'; extend('positive', value => { if (value >= 0) { return true; } return 'This field must be a positive number'; }); エラー文に動的な文字を使いたい場合 固定されたエラー文ではなく動的に文字を変更したい場合、下記で実現できます。 エラー文の中に{_field_}を記載。 extend('positive', value => { if (value >= 0) { return true; } return 'The {_field_} field must be a positive number'; }); {_field_}に入る値をそれぞれのタグのnameで指定する。 <ValidationProvider name="age" rules="positive" v-slot="{ errors }"> <input v-model="value" type="text"> <span>{{ errors[0] }}</span> </ValidationProvider> バリデーションにオブジェクトの引数を取りたい場合 下記のようにオブジェクトの引数を取ることもできます。 <ValidationProvider rules="minmax:3,8" v-slot="{ errors }"> <input v-model="value" type="text"> <span>{{ errors[0] }}</span> </ValidationProvider> extend('minmax', { validate(value, { min, max }) { return value.length >= min && value.length <= max; }, params: ['min', 'max'] }); 引数を変数としてエラー文に組み込みたい場合 引数をエラー文に挿入したい場合は下記で実現できます。 {}のみでアンダースコアをつけない点に注意。 extend('minmax', { validate(value, { min, max }) { return value.length >= min && value.length <= max; }, params: ['min', 'max'], message: 'The {_field_} field must have at least {min} characters and {max} characters at most' });

こちらの続きです pythonを使ってリアクティブなWebアプリを作りたい【開発編5】Slack boltの組み込み 今日は小ネタです。 前回から、Slack Botの組み込み方について書いてきましたが、今回はSlack Botがインストールされたり、TokenがRevokeされたりしたときの対応をどう組み込むかについてです。 検索しても出てこないので、あれやこれや悩んでしまいましたが、最終的に必要だったのは1行のコードの追加だけでした。Bolt for Python凄い便利！ 詳しくはここを見る 書いてあるとおりなのですが大事なのはここです bolt.py app = App( # Enabling installation_store required ) app.enable_token_revocation_listeners() 該当箇所は backend/bolt.py backend/bolt.py bolt_app = App( logger=logger, signing_secret=os.environ.get("SIGNING_SECRET"), installation_store=installation_store, raise_error_for_unhandled_request=True, oauth_settings=OAuthSettings( client_id=client_id, client_secret=client_secret, state_store=oauth_state_store, scopes=os.environ.get("SLACK_SCOPES"), user_scopes=os.environ.get("SLACK_USER_SCOPES"), ), ) bolt_app.enable_token_revocation_listeners() ということで、最後の行を追加してあります。 これをするだけで、アンインストール時には該当する slack_bots slack_installations の当該組織のデータを削除してくれます。めちゃめちゃ便利ですね。 アンインストール時の挙動については以上でOKです。 エラーハンドリング ついでに先程のリリースノートに書いてあるエラーハンドリングをしておきます。 app = App( token=os.environ["SLACK_BOT_TOKEN"], signing_secret=os.environ["SLACK_SIGNING_SECRET"], # enable @app.error handler to catch the patterns raise_error_for_unhandled_request=True, ) @app.error def handle_errors(error): if isinstance(error, BoltUnhandledRequestError): # You may want to have debug/info logging here return BoltResponse(status=200, body="") else: # other error patterns return BoltResponse(status=500, body="Something wrong") この部分。raise_error_for_unhandled_request=True,にすれば良い感じですね。 ↑の方のコードブロックに既に書いてしまってあるのですが、こちらに追加してあります。 実際にエラーハンドリングするブロックはここです。 以上です。 関連リンク pythonを使ってリアクティブなWebアプリをお手軽に1分で作りたい pythonを使ってリアクティブなWebアプリを作りたい【基礎編】 pythonを使ってリアクティブなWebアプリを作りたい【開発編】 pythonを使ってリアクティブなWebアプリを作りたい【開発編2】 pythonを使ってリアクティブなWebアプリを作りたい【開発編3】 pythonを使ってリアクティブなWebアプリを作りたい【開発編3-2】 pythonを使ってリアクティブなWebアプリを作りたい【開発編4】パスワードの暗号化 pythonを使ってリアクティブなWebアプリを作りたい【開発編5】Herokuの開発環境と本番環境 pythonを使ってリアクティブなWebアプリを作りたい【開発編5】Slack boltの組み込み pythonを使ってリアクティブなWebアプリを作りたい【開発編6】Slack bolt アンインストール時対応 ←イマココ

知らずに入口でつまづいた話 nuxtに限りませんが、初学者あるあるかもしれません。nuxt.jsの学習中の環境構築にて $ npx create-nuxt-app my_app $ cd my_app $ npm run dev をする所、どうせ「my-app」部分はフォルダが生成されるから、いいやと思い $ npx create-nuxt-app $ npm run dev として、作業を進めていた所、作業途中で、何やらエラーが、、、 //エラーメッセージ String does not match the pattern of "^(?:@[a-z0-9-*~][a-z0-9-*._~]*/)?[a-z0-9-~][a-z0-9-._~]*$". package.json { "name": "MyApp", //ここが間違い "version": "1.0.0", "private": true, <経緯> デスクトップに「MyApp」フォルダを作る　 → エディタのワークスペースにデスクトップの「MyApp」フォルダを追加。 → 直接「$ npx create-nuxt-app」 → 作業途中にエラー発生！！ → 以下、規約がある事知らず... nameの主な規約！ ・214文字以下(@scope/を含む) ・一文字目は「.(ドット)」「_(アンダースコア)」以外 ・大文字は禁止 ・URL、コマンドライン引数、フォルダ名の一部になるため、URLで使用可能な文字、記号 結局、以下で作業進めました。皆さんも気をつけてください。 $ npx create-nuxt-app my_app $ cd my_app $ npm run dev 参考 nuxt.jsガイド package.json の 仕様 (日本語)

let pdfSrc = pdf.createLoadingTask({ url: pdfのパス, cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.6.347/cmaps/', cMapPacked: true, });

なぜ作ろうと思ったか 数年前に一回勉強しようと思ったけどあまりできなかったので。。 改めて勉強するために環境を整えようと思いました。 前回は JavaScript で実装しようとしていましたが、今回は TypeScript で実装します。 環境 OS macOS Big Sur バージョン 11.0.1 IDE Atom 1.58.0 各種ツール等バージョン nodebrew 1.1.0 node v14.17.6 LTS（2021/9/13現在） npm 7.23.0 Vue CLI のインストール グローバルに vue-cli をインストール。 $ npm install -g @vue/cli @vue/cli 4.5.13 がインストールされました。 注意 $ npm install -g vue-cli このコマンドを実行すると vue-cli 2.9.6 がインストールされます。 create コマンドは Vue CLI 3系のみのコマンドになるのでこれでインストールすると使えないようです。 もしインストールしていたら $ npm uninstall -g vue-cli 上記コマンドでアンインストールしておきましょう。 グローバルに何がインストールされているのか知りたいときは $ npm list -g --depth=0 上記コマンドでグローバルにインストールされているパッケージがわかります。 vue-cli でプロジェクトを作成 ターミナルを開いてプロジェクトを作成したいディレクトリに移動します。 Git Bash ではうまく動かないのでターミナルを使ってください。 Windows ではコマンドプロンプトで動きます。 $ vue create {プロジェクト名} これで作成プロセスに入ります。 ? Please pick a preset: > Default ([Vue2] babel, eslint) Default (Vue 3) ([Vue 3] babel, eslint) Manually select features コマンドを実行すると上記のように表示されます。 TypeScript で実装したい場合は一番下の Manually select features を選択します。 必要なものを選択できるのでスペースキーで選択していきます。 最後まで選択すると作成できます。 Atom にインストールしたパッケージ Vue.js と TypeScript で実装しやすいように以下のパッケージを Atom でインストールしました。 atom-typescript 以下は atom-typescript で必要になるパッケージ linter linter-ui-default hyperclick intentions language-vue 最後に 環境を作るところまでなのでここまでですが、 何か間違っているところなどありましたらご指摘ください。