Vueのアイコン Vue

  • Nuxt4とd3.jsでインタラクティブな日本地図を作るのサムネイル画像

    Nuxt4とd3.jsでインタラクティブな日本地図を作る

    掲載

    Nuxt4とd3.jsで国土地理院のデータをもとにインタラクティブな日本地図を描画して、各都道府県のsvg画像を取得できるツールを作成した際の実装の解説です。国土地理院のデータをmapshaperで軽量化することで、Webページの表示を軽くするなどの工夫についても解説。実際に作ったツールを利用することも可能です。(※国土地理院のデータは利用時に出典を明記する必要があるのでご注意ください。)

  • QRコード作成ツールを作るのサムネイル画像

    QRコード作成ツールを作る

    掲載

    Nuxt4, GolangでQRコードを作成するオンラインツールを作った際の実装方法の解説と、オンラインツール紹介記事です。golang側ではファイルアップロード処理のセキュリティ対策の解説、Nuxt4側では画面実装の際に詰まった点として、「ユーザーの操作に応じて入力欄を増やす方法」の解説とコード例のリンクをしています。

  • Nuxtでhtaccess, htpasswd作成サービスを作ってみるのサムネイル画像

    Nuxtでhtaccess, htpasswd作成サービスを作ってみる

    掲載

    業務でたまに使うBasic認証ですが、毎回htaccessの構文も、htpasswdのコマンドも忘れるのでまとめて作成出来るオンラインツール(htpasswdに関してはサーバーへの通信無しで実行可能)を作ってみました。ツールを作る際に使った技術(javascriptでのハッシュ化処理を使っているためクライアント上のみで実行可能)、ハマったことや学びの備忘録です。

  • Nuxtでパスワード作成サービスを作ってみるのサムネイル画像

    Nuxtでパスワード作成サービスを作ってみる

    掲載

    Nuxtで、サーバーとの通信無で(javascriptオンリーで)使えるオンラインのパスワード作成ツールを作成した時の備忘録です。誰かに見られても問題ないけど別に多数と共有したい訳ではないファイルの共有時などにサクッと使える程度のセキュリティレベルを目指して作成しています。

  • Nuxt3でライブラリ無で並べ替え機能を実装するのサムネイル画像

    Nuxt3でライブラリ無で並べ替え機能を実装する

    掲載

    Nuxtではsortable.jsのような、画面の要素の並べ替えを処理する場合、便利なライブラリが多く存在しています。(vuedraggableなど)ただし、多くのライブラリはオーバースペック気味なので、小規模開発用にライブラリを使わずに並べ替え機能を実装する方法を解説しています。