99 Blues

Web Developer Blog

Nuxt 3 で Markdown ベースのブログを作る

概要 Nuxt 3 で Markdown を利用したブログサイトを作成します。 今回作成する完成形はこちら .iframe-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .iframe-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 環境構築 Nuxt プロジ...

August 29, 2022

QRコードジェネレーターを Vue3 で実装する

概要 QRコードを生成できるアプリを Vue3 で実装します。 生成したQRコードを読み取るとあらかじめ入力したURLにリンクするようにします。 QRコード...

August 23, 2022

Vue3 でテキスト翻訳アプリを作成する

概要 外部APIと連携して入力したテキストを翻訳できるアプリを Vue3 で実装します。 今回、実装するアプリの完成品は以下のようになります。 .iframe-wrapper { position: relative; padding-bottom: 56.25%;...

August 8, 2022

Vue3 で作るカウントダウンアプリ

概要 特定の日まで何時何分何秒かを表示してリアルタイムでカウントダウンするアプリを Vue 3 で実装します。 Countdown コンポーネントの作成 まずは、src/co...

August 4, 2022

Nuxt 3 プロジェクトセットアップからページ作成まで

Nuxt 3 プロジェクトの作成 npx nuxi init <project-name> 実行すると新しくフォルダが作成されるので、そこへ移動してパッケージのインストールをします。 yarn dev で localhost:3000 に開発環境が...

February 6, 2022

Vue 3 の状態管理ライブラリ Pinia のイントロダクション

概要 Vue 3 の新しい状態管理ライブラリ Pinia の使い方について簡単に紹介します。 インストール まずはcreatePiniaを呼び出します。 その前にuse...

January 23, 2022

ReactLeafletで画像を地図の代わりに使う方法

概要 ReactLeafletで画像を地図の代わりとして扱う方法について紹介します。 セットアップ npm install react-leaflet leaflet CRS.Simple 画像を地図として使うにはCRS.Si...

January 16, 2022

WickedPDF を使って Rails で PDF を扱う

概要 WickedPDF というライブラリを使って Rails で PDF を扱う方法を紹介します。 検証で使用した環境 Rails 6.1.4 Ruby 3.0.0 セットアップ ライブラリのインストールから # Gemfile gem 'wicked_pdf' gem "wkhtmltopdf-binary" イ...

January 9, 2022

Vue と D3.js を使ってチャートを作成する

概要 Vue と D3.js を使って簡単なチャートを作ってみます。 セットアップ 必要なライブラリをインストールします。 npm install d3-array d3-scale d3-shape チャートの描写 チャート本体のコン...

December 26, 2021

名前を付けて保存する機能を javascript で作る

概要 最新の一部ブラウザではローカルのファイルシステムとやりとりできるWebAPIが実装されています。 今回はその一部の機能を使ってボタンを押す...

December 19, 2021