Nuxt 3 プロジェクトセットアップからページ作成まで
Nuxt 3 プロジェクトの作成 npx nuxi init <project-name> 実行すると新しくフォルダが作成されるので、そこへ移動してパッケージのインストールをします。 yarn dev で localhost:3000 に開発環境が...
Nuxt 3 プロジェクトの作成 npx nuxi init <project-name> 実行すると新しくフォルダが作成されるので、そこへ移動してパッケージのインストールをします。 yarn dev で localhost:3000 に開発環境が...
概要 Vue 3 の新しい状態管理ライブラリ Pinia の使い方について簡単に紹介します。 インストール まずはcreatePiniaを呼び出します。 その前にuse...
概要 ReactLeafletで画像を地図の代わりとして扱う方法について紹介します。 セットアップ npm install react-leaflet leaflet CRS.Simple 画像を地図として使うにはCRS.Si...
概要 WickedPDF というライブラリを使って Rails で PDF を扱う方法を紹介します。 検証で使用した環境 Rails 6.1.4 Ruby 3.0.0 セットアップ ライブラリのインストールから # Gemfile gem 'wicked_pdf' gem "wkhtmltopdf-binary" イ...
概要 Vue と D3.js を使って簡単なチャートを作ってみます。 セットアップ 必要なライブラリをインストールします。 npm install d3-array d3-scale d3-shape チャートの描写 チャート本体のコン...
概要 最新の一部ブラウザではローカルのファイルシステムとやりとりできるWebAPIが実装されています。 今回はその一部の機能を使ってボタンを押す...
概要 AWS S3 で静的ファイルのホスティングをするにはバケットへいくつか設定が必要です。 静的ウェブサイトホスティングを有効にする パブリックアクセスの...
概要 window.showOpenFilePickerを使用することでファイル選択ダイアログを表示できます。 これによってinputタグを使わ...
概要 javascript の Clipboard API を使ったクリップボードへの書き込みや読み込みの方法を紹介します。 クリップボードへの書き込み 例として、次のようなHTML要素がある...
概要 Javascriptで AWS SES を使ってメールを送信したい場合はメールクライアントとして nodemailer がおすすめです。 AWS SESが提供するAPIでメール送信...