備忘録

備忘録

任意の要素をピクチャーインピクチャー(PiP)で表示させる方法

Google Chrome

Ⅰ. はじめに

タイトルの通り「任意の要素PiPとして表示させる方法」です。

Ⅱ. 環境

  • Google Chrome 130以上

Ⅲ. サンプルプログラム

(async () => {
  const element = document.querySelector('h1')
  const pipWindow = await documentPictureInPicture.requestWindow()
  pipWindow.document.body.append(element)
})()

実行結果

Puppeteerで拡張機能を読み込む方法

Puppeteer TypeScript

Ⅰ. はじめに

タイトルの通り「Puppeteerで拡張機能を読み込む方法」です。

Ⅱ. サンプルプログラム

import puppeteer from 'puppeteer'
import path from 'path'

const pathToExtension = path.join(process.cwd(), 'my-extension');
const browser = await puppeteer.launch({
  headless: false,
  args: [
    `--disable-extensions-except=${pathToExtension}`,
    `--load-extension=${pathToExtension}`,
  ],
})

実行結果


参考

HandsontableをReactで利用する方法

React

Ⅰ. はじめに

タイトルの通り「HandsontableをReactで利用する方法」です

Ⅱ. 手順

1. 必要なパッケージをインストールする
npm install handsontable @handsontable/react
2. サンプルプログラムを書く
import { registerAllModules } from 'handsontable/registry'
import { HotTable } from '@handsontable/react'

import 'handsontable/dist/handsontable.full.min.css'

registerAllModules()

export default function App(): JSX.Element {
  return (
    <HotTable
      data={[
        ['id', 'name', 'age', 'gender'],
        [1, 'tanaka', 11, 'm'],
        [2, 'yamada', 12, 'f'],
        [3, 'takahashi', 15, 'm']
      ]}
      rowHeaders={true}
      colHeaders={true}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  )
}

実行結果

参考

ReactでGoogleMAP利用する方法

React

Ⅰ. はじめに

タイトルの通り「ReactでGoogleMAP利用する方法」です。

Ⅱ. 手順

1. Google MAP PlatformのAPIキーを生成する

https://console.cloud.google.com/google/maps-apis/credentials

2. 必要なライブラリをインストールする
npm install @googlemaps/js-api-loader
npm install @types/google.maps
3. サンプルプログラムを書く
import { Loader } from '@googlemaps/js-api-loader'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

const GoogleMapApiKey = 'YOUR_GOOGLE_MAP_API_KEY'
const GoogleMapPosition: google.maps.LatLngLiteral = { lat: 35.6812362, lng: 139.7645499 } // 東京駅

export default function App(): JSX.Element {
  const mapRef = useRef<HTMLDivElement>(null)

  const [mapsLibrary, setMapsLibrary] = useState<google.maps.MapsLibrary>()
  const [markerLibrary, setMarkerLibrary] = useState<google.maps.MarkerLibrary>()
  const [geocodingLibrary, setGeocodingLibrary] = useState<google.maps.GeocodingLibrary>()
  const [map, setMap] = useState<google.maps.Map>()
  const [address, setAddress] = useState<string>('')
  const [markers, setMarkers] = useState<google.maps.marker.AdvancedMarkerElement[]>([])

  const loader = useMemo(() => new Loader({
    apiKey: GoogleMapApiKey,
    version: '3',
    libraries:['maps']
  }), [])

  /**
   * マーカーを追加する
   */
  const addMarker = useCallback((position: google.maps.LatLngLiteral | google.maps.LatLng, title: string): void => {
    if (!markerLibrary) {
      console.log('markerLibrary is null')
      return
    }

    const marker = new markerLibrary.AdvancedMarkerElement({
      map: map,
      position: position,
      title: title
    })

    setMarkers((markers) => [...markers, marker])
  }, [map, markerLibrary])

  /**
   * マーカーを全て削除する
   */
  function clearAllMarker(): void {
    for (const marker of markers) {
      marker.map = null
    }
  }

  useEffect(() => {
    async function asyncFunction() {
      const mapsLibrary = await loader.importLibrary('maps')
      const markerLibrary = await loader.importLibrary('marker')
      const geocodingLibrary = await loader.importLibrary('geocoding')
      setMapsLibrary(mapsLibrary)
      setMarkerLibrary(markerLibrary)
      setGeocodingLibrary(geocodingLibrary)
    }

    asyncFunction()
  }, [loader])

  useEffect(() => {
    if (!mapsLibrary) {
      return
    }

    // Google Mapを描画する
    const map = new mapsLibrary.Map(mapRef.current!, {
      center: GoogleMapPosition,
      zoom: 6,
      mapId: 'DEMO_MAP_ID'
    })
    setMap(map)
  }, [mapsLibrary])

  useEffect(() => {
    if (!markerLibrary) {
      return
    }

    // マーカーを描画する
    addMarker(GoogleMapPosition, 'Title001')
  }, [markerLibrary, addMarker])

  async function onFormSubmit(e: React.FormEvent<HTMLFormElement>): Promise<void> {
    e.preventDefault()

    if (!geocodingLibrary) {
      return
    }

    const request: google.maps.GeocoderRequest = {
      address: address
    }
    const result = await new geocodingLibrary.Geocoder().geocode(request)
    if (result.results.length > 0) {
      if (!map) {
        return
      }

      const location = result.results[0].geometry.location

      // 地図の中心座標を変更する
      map.setCenter(location)

      // マーカーを描画する
      addMarker(location, address)
    }
  }

  return (
    <>
      <form onSubmit={(e) => onFormSubmit(e)}>
        <label htmlFor="address">住所</label>
        <input type="text" id="address" value={address} onChange={(e) => setAddress(e.target.value)} />
        <button type="submit">送信</button>
      </form>

      <div>
        <button onClick={() => clearAllMarker()}>マーカー全削除</button>
      </div>

      <div ref={mapRef} style={{ width: '500px', height: '500px' }}></div>
    </>
  )
}

実行結果


参考

Fabric.jsを利用してWebサイトに画像編集機能を実装する方法

JavaScript

Ⅰ. はじめに

タイトルの通り「Fabric.jsを利用してWebサイトに画像編集機能を実装する方法」です

Ⅱ. サンプルプログラム

<html>
  <style>
    canvas {
      border: 1px black solid;
    }
  </style>

  <body>
    <canvas id="canvas001" width="300" height="300"></canvas>
    <button onclick="downloadImage()">Download</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js" referrerpolicy="no-referrer"></script>

    <script>
      const canvas = new fabric.Canvas('canvas001')

      // 100x100 の正方形を追加する
      const rect = new fabric.Rect({
        top: 100,
        left: 100,
        width: 100,
        height: 100,
        fill: '#20b2aa',
      })
      canvas.add(rect)

      // 画像を追加する
      fabric.Image.fromURL('https://files.catbox.moe/q5frwn.png', (img) => {
        img
        .set({ left: 50, top: 50})
        .scale(0.1)
        .set('flipY', true)
        canvas.add(img)
      }, {
        crossOrigin: "Anonymous" // "out.png" を保存する時にエラーが出るのを回避する
      })

      function downloadImage() {
        const aElement = document.createElement('a')
        aElement.download = 'out.png'
        aElement.href = canvas.toDataURL('image/png')
        aElement.click()
        aElement.remove()
      }
    </script>
  </body>
</html>

実行結果


参考