Javascript | ばすにっきTips https://takabus.com/tips プログラミングやサーバー、日々のTipsをメモしています。 Sat, 24 May 2025 07:22:07 +0000 ja hourly 1 https://wordpress.org/?v=6.4.3 https://takabus.com/tips/wp-content/uploads/2022/12/cropped-tips-1-32x32.png Javascript | ばすにっきTips https://takabus.com/tips 32 32 【video.js】残り時間ではなく現在位置を表示させるには？ https://takabus.com/tips/3645/ https://takabus.com/tips/3645/#respond Sat, 24 May 2025 07:22:06 +0000 https://takabus.com/tips/?p=3645 Video.jsではデフォルトで動画の残り時間を表示するが、現在位置を表示させたいときの方法をメモしておきます。

↑こんな感じにしたい！

【解決法】CSSを追加する

以下のCSSを追加すると現在位置を表示させられます。

.video-js .vjs-time-control {
    display: block;
}
.video-js .vjs-remaining-time {
    display: none;
}

]]> https://takabus.com/tips/3645/feed/ 0 【Node】Windows環境でSyntaxErrorが表示される問題の解決法「basedir=$(dirname “$(echo “$0” | sed -e ‘s,\\,/,g’)”」 https://takabus.com/tips/2986/ https://takabus.com/tips/2986/#respond Fri, 05 Jan 2024 02:55:26 +0000 https://takabus.com/tips/?p=2986 Windows環境でyarnやnpmでコマンド（スクリプト）を実行すると、「basedirがどうのこうの」というSyntaxErrorエラーが表示されることがあります。

例えば、Vuetifyをインストールした環境でyarn devを実行すると、以下のようなエラーとなります。

> yarn dev
yarn run v1.22.19
$ node --no-warnings ./node_modules/.bin/vite
C:\Users\th\Desktop\card-realtime\front\node_modules\.bin\vite:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47

この問題の対処法をメモしておきます。

【解決法】package.jsonを修正する

package.jsonのscriptsに原因があります。

.binディレクトリ以下が指定されているとエラーが起こるようです。

{
  "name": "card-realtime-front",
  "version": "0.0.0",
  "scripts": {
    "dev": "node --no-warnings ./node_modules/.bin/vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@mdi/font": "7.0.96",
    "roboto-fontface": "*",
    "vue": "^3.3.0",
    "vuetify": "^3.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.0",
    "sass": "^1.69.0",
    "unplugin-fonts": "^1.1.0",
    "unplugin-vue-components": "^0.26.0",
    "vite": "^5.0.0",
    "vite-plugin-vuetify": "^2.0.0"
  }
}

.binではなくファイルの実体を直接指定します。

  "scripts": {
    "dev": "node --no-warnings ./node_modules/vite/bin/vite.js",
    "build": "vite build",
    "preview": "vite preview"
  },

これで解決しました。

]]> https://takabus.com/tips/2986/feed/ 0 【Javascript】クエリパラメータなしのURLを取得するには？ https://takabus.com/tips/2152/ https://takabus.com/tips/2152/#respond Sat, 22 Oct 2022 01:41:53 +0000 https://takabus.com/tips/?p=2152 JavascriptでクエリパラメータなしのURL（?以降を含まないURL）を取得する方法を紹介します。

クエリパラメータを含まないURLを取得する

方法1 location.hrefから抽出する

location.hrefではクエリパラメータまで含めたURLが取得されます。

そこで、location.hrefから?の前までを抽出してやります。

window.location.href.substr(0, window.location.href.indexOf('?'))

これが最も手っ取り早い方法です。

方法2 originとpathnameを足し合わせる

もしくは、originとpathnameを組み合わせることでも、クエリパラメータを含まないURLを取得できます。

location.origin + location.pathname

しかし、URLに#が入っていて、#以下のパスまで取得したい場合はうまくいきません。location.originでは#より前までしか取得されないため、#以下が抜け落ちてしまいます。

VueやNuxtなどのSPAをhashモードで運用している場合は、#以下まで取得する必要があるでしょう。こういったときには使えないということになります。

ということで、方法1がおすすめです。

]]> https://takabus.com/tips/2152/feed/ 0 FilePondで格好いいアップロードフォームを作ろう https://takabus.com/tips/2095/ https://takabus.com/tips/2095/#respond Thu, 06 Oct 2022 06:11:40 +0000 https://takabus.com/tips/?p=2095 FilePondというライブラリを使うと、フォームのファイルアップロードを手軽に強化することができます。

プラグインを導入するだけで、ドラッグ・アンド・ドロップでファイルを選択したり、選択されたファイルをプレビューしたりできるようになります。

当記事では、FilePondでファイルアップロードできるようにする方法を紹介します。

GitHub - pqina/filepond: 🌊 A flexible and fun JavaScript file upload library
🌊 A flexible and fun JavaScript file upload library - pqina/filepond
github.com

サンプルコード

はじめにサンプルコードをご紹介します。

ファイルをドラッグ・アンド・ドロップすることができるようになっています。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>FilePondのサンプル</title>

    <!-- filepondのCSSを読み込む-->
    <link
      href="https://unpkg.com/filepond/dist/filepond.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <h1>FilePondのサンプル</h1>
    <!-- フォームをつくる -->
    <form action="">
      <!-- inputタグにクラスを追加する -->
      <input type="file" class="filepond" />
      <!-- 送信ボタンを設置 -->
      <button type="submit">送信する</button>
    </form>

    <!-- CDNでfilepondを読み込む -->
    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>

    <!-- FilePondをフォームに適用 -->
    <script>
      // FilePondを適用する要素を選択する
      const target = document.querySelector('input[type="file"]');

      // FilePondを適用する
      FilePond.create(target, {
        storeAsFile: true
      });
    </script>
  </body>
</html>

最低限のオプションを指定しているため、プレビューなどは有効化していませんが、これだけでもだいぶ使いやすくなっています。

ざっくり解説

filepondを読み込む

まずはFilePondを読み込みます。

<!-- filepondのCSSを読み込む-->
<link
  href="https://unpkg.com/filepond/dist/filepond.css"
  rel="stylesheet"
/>
<!-- CDNでfilepondを読み込む -->
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

headタグでcss、bodyタグ最後でJavascriptを読み込んでいます。ここではCDNで読み込んでいます。

inputタグを設置する

次にフォームにinputタグを設置し、クラスを付与しておきます。

<input type="file" class="filepond" />

filepondを適用する

あとは設置したinputタグにfilepondを適用するだけです。

<!-- FilePondをフォームに適用 -->
<script>
    // FilePondを適用する要素を選択する
    const target = document.querySelector('input[type="file"]');

    // FilePondを適用する
    FilePond.create(target, {
    storeAsFile: true
    });
</script>

querySelectorでinput要素を取得し、filepondを適用します。

formタグなしで使うこともできる

filepondはフォームに組み込むことなく、単独で使用することもできます。

ファイルがドラッグ・アンド・ドロップされたら、すぐに指定したURLにPOSTすることもできます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>FilePondのサンプル</title>

    <!-- filepondのCSSを読み込む-->
    <link
      href="https://unpkg.com/filepond/dist/filepond.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <h1>FilePondのサンプル</h1>
    <h2>【その2】ドラッグ・アンド・ドロップされたらアップロードするサンプル</h2>

    <div>
      <!-- FilePondを適用するタグを設置する -->
      <input type="file" class="filepond" />
    </div>

    <!-- CDNでfilepondを読み込む -->
    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>

    <!-- FilePondをフォームに適用 -->
    <script>
      // FilePondを適用する要素を選択する
      const target = document.querySelector('input[type="file"]');

      // FilePondを適用する
      FilePond.create(target, {
        // POSTするAPIを指定する
        server: "http://localhost:8000"
        // serverオプションを指定すると、自動的に指定したAPIにアップロードされるようになります
      });
    </script>
  </body>
</html>

serverオプションにPOST先のURLを指定しておくと、ファイルが選択されると同時に自動的にアップロードさせることができます。

ファイルをアップロードできればよいというなら、serverオプションを指定するだけで十分ですね。

まとめ

filepondの使い方をかんたんにまとめてみました。

今回紹介したのはほんのさわりです。プラグインを導入すれば、アップロード前に画像のトリミングをしたり、PDFファイルのサムネイル取得などを行うこともできます。

ファイルアップロードを実装したいときに活用してみてください。

]]> https://takabus.com/tips/2095/feed/ 0 【JavaScript】特定の要素にフォーカスがあるか判定するには？ https://takabus.com/tips/1176/ https://takabus.com/tips/1176/#respond Sat, 26 Mar 2022 07:58:44 +0000 https://takabus.com/tips/?p=1176 特定の要素にフォーカスがあるか判定する方法を紹介します。

document.activeElementと比較する

JavaScriptには要素を指定して直接フォーカスがあるか調べる関数は用意されていません。

代わりにアクティブな要素はdocument.activeElementで取得できます。フォーカスがあるか調べたい要素と比較することで、任意の要素にフォーカスがあるかどうか調べることができます。

if (document.getElementById("target") === document.activeElement) {
  //フォーカスがあればtrueを返す
  return true;
}

フォーカスがあればif節内のコードが実行されます。

]]> https://takabus.com/tips/1176/feed/ 0 特定のキーの値を配列化する（連想配列） https://takabus.com/tips/129/ https://takabus.com/tips/129/#respond Wed, 15 Sep 2021 08:20:33 +0000 https://takabus.com/tips/?p=129 連想配列から特定のキーの値を取得して、1つの配列にまとめる方法をメモしておきます。

例えば、次のようなオブジェクトから、makerの配列を抽出したいとき。

var data=[
    {
        "id": 1,
        "name": "エアロスター",
        "maker": "三菱ふそう",
    },
    {
        "id": 2,
        "name": "キュービック",
        "maker": "いすゞ",
    },
    {
        "id": 3,
        "name": "エルガ",
        "maker": "いすゞ",
    }
]
=>["三菱ふそう","いすゞ"]がほしいとき

コード

こういうときこそArray.mapの出番です。このようになります。

var data = [{
        "id": 1,
        "name": "エアロスター",
        "maker": "三菱ふそう",
    },
    {
        "id": 2,
        "name": "キュービック",
        "maker": "いすゞ",
    },
    {
        "id": 3,
        "name": "エルガ",
        "maker": "いすゞ",
    }
];

// 特定のキーの値を配列として取得する
var a = data.map((item) => {
    return item.maker;
});

console.log(a);

結果はこちら↓

[ '三菱ふそう', 'いすゞ', 'いすゞ' ]

重複を消すには？

このままでは重複した値が残ってしまいます。重複した値はnew Set()で除去できます。

// 重複を削除する
var aa = new Set(a);
console.log(aa);

// 結果
// Set(2) { '三菱ふそう', 'いすゞ' }

]]> https://takabus.com/tips/129/feed/ 0 【Javascript】Object（オブジェクト）をインデックスで取得するには？ https://takabus.com/tips/102/ https://takabus.com/tips/102/#respond Fri, 10 Sep 2021 10:31:33 +0000 https://takabus.com/tips/?p=102 オブジェクトの中身をインデックス（番号）で取得したい場合の方法をメモしておきます。

オブジェクトと配列

var data={
    "1a": "a",
    "2a": "b",
    "3a": "c",
  }

このdataはオブジェクトであり、配列ではない。

→data[0]のようにインデックスを指定しても、取得はできない！

オブジェクトを配列にするには？

Object.keysとObject.valuesを使うと、キーと値をそれぞれ配列に変換することができます。

Object.valuesを使うと、valueの値が配列として取得できます。

Object.values(data) //=>["a","b",c"]

同様にObject.keysを使うと、配列としてオブジェクトのキーを取得できます。

Object.keys(data) //=>["1a","2a",3a"]

インデックスで取得するには？

Object.keysでオブジェクトの値を配列に変換してから、インデックスで取得すればいいです。

Object.keys(data)[0]; //→最初の要素を取得 "a"

]]> https://takabus.com/tips/102/feed/ 0