mimikero

未分類

エックスサーバーに最新バージョンのComposerをインストールする

mitulu 6月 13, 2023 0 コメント

参考する記事によってはPATHの反映がされなかったりだったので、メモ程度に。
サーバーへSSH接続までは省略します。

各バージョン確認

$composer -V
Composer version 1.10.26 2022-04-13 16:39:56

$php -v
PHP 5.4.16 (cli) (built: Apr  1 2020 04:07:17) 
Copyright (c) 1997-2013 The PHP Group
Zend Engine v2.4.0, Copyright (c) 1998-2013 Zend Technologies
    with Zend OPcache v7.0.5, Copyright (c) 1999-2015, by Zend Technologies

初期状態のPATHだと古いPHP・Composerのバージョンが使用されていると思うので、別のバージョンにPATHを通します。

今回は運用中のサイトで使用中のバージョンを使います。
Xserverサーバーパネルから現バージョンを確認します。

今回はPHP7.4 を使います。

1. PHP PATHを通す

既に存在するXserverのPHPにシンボリックリンクを作成します。
バージョンは各自調整してください。

$ cd
$ mkdir bin
$ ln -s /usr/bin/php7.4 $HOME/bin/php
$ ls -la $HOME/bin/

2. Composerをインストール

公式サイトのコマンド通りインストールします。
https://getcomposer.org/download/

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '55ce33d7678c5a611085589f1f3ddf8b3c52d662cd01d4ba75c0ee0459970c2200a51f492d557530c71c15d8dba01eae') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

pharファイルを移動してPATHを通します。

mkdir -p .config/composer/vendor/bin/
mv composer.phar .config/composer/vendor/bin/composer
$vi .bash_profile

PATH=$HOME/.config/composer/vendor/bin:$HOME/bin:$PATH

3. .bash_profileを編集

PHPへのシンボリックリンク・ComposerへPATHを追加するため、1行追加します。

$vi .bash_profile

...
# 1行追加して保存
PATH=$HOME/.config/composer/vendor/bin:$HOME/bin:$PATH
...compose

# .bash_profileを反映
$ source .bash_profile

4. バージョン確認

$ composer -V
Composer version 2.2.21 2023-02-15 13:07:40

$ php -v
PHP 7.4.33 (cli) (built: Nov  1 2022 16:31:23) ( NTS )
Copyright (c) The PHP Group

バージョンアップ完了！

未分類

Google Maps APIのmarkerClustererでonClusterClickHandler を使う

mitulu 6月 10, 2023 0 コメント

markerClusterer onClusterClickHandler を使ってクリック後の制御を行う。

const onClusterClickHandler = (event, cluster, map) => {
    if (openInfoWindow) {
        openInfoWindow.close();
    }
    markerClusterer.defaultOnClusterClickHandler(event, cluster, map);
};
const markerCluster = new markerClusterer.MarkerClusterer({
    map,
    markers,
    onClusterClick: onClusterClickHandler
});

参考

https://github.com/googlemaps/js-markerclusterer/issues/623

導入

ここでは触れない。

JavaScriptでGoogle MapとMarkerClustererを使用してマーカーをまとめて表示する
未分類

Google Maps API: MarkerClustererのアイコンスタイルをカスタマイズする方法

mitulu 6月 9, 2023 0 コメント

Google Maps Marker Clustererのアイコンをカスタマイズしたかったのだが、書き方が大幅に変わっていたのでメモ

markerClusterer 該当コード

MarkerClustererのコード

参考: https://stackoverflow.com/questions/7834284/styling-markerclusterer-icons

<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js">
const renderer = {
            render: ({ count, position }) =>
                new google.maps.Marker({
                    icon: { url:"IMGURL" }, 
                    label: { text: String(count), color: "white", fontSize: "10px" },
                    position,
                    // adjust zIndex to be above other markers
                    zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
            }),
            };
const markerCluster = new markerClusterer.MarkerClusterer({ 
                map, 
                markers,
                renderer,
            });

MarkerClustererPlusのコード

MarkerClustererPlusは非推奨らしい。ややこしい。
https://www.npmjs.com/package/@googlemaps/markerclustererplus

<script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js">
new MarkerClusterer(
  map,
  markers,
  {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
  },
);

導入

ここでは触れない。

JavaScriptでGoogle MapとMarkerClustererを使用してマーカーをまとめて表示する
未分類

JavaScriptでGoogle MapとMarkerClustererを使用してマーカーをまとめて表示する

mitulu 6月 9, 2023 0 コメント

GoogleMaps APIでSVGアイコンでマーカーを1000件ほど置いたら重くなったのでメモ。

マップ上に複数のマーカーを表示する場合、マーカーが重なってしまって見づらくなることがあります。そこで、MarkerClustererというJavaScriptライブラリを使用することで、マーカーをクラスタリングしてまとめて表示することができます。この記事では、Google MapとMarkerClustererを組み合わせて使い、マーカーを効果的にまとめて表示する方法について解説します。

とりあえず動くコード

<!DOCTYPE html>
<html>
<head>
    <title>Google Maps Marker Clusterer</title></script>
    <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
    <script>
        function initMap() {
            const map = new google.maps.Map(document.getElementById("map"), {
                center: { lat: 37.7749, lng: -122.4194 },
                zoom: 10
            });

            const markers = [
                new google.maps.Marker({ position: { lat: 37.7749, lng: -122.4194 } }),
                new google.maps.Marker({ position: { lat: 37.7849, lng: -122.4194 } }),
                new google.maps.Marker({ position: { lat: 37.7949, lng: -122.4194 } })
            ];

            const markerCluster = new markerClusterer.MarkerClusterer({ map, markers });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap">
</head>
<body>
    <div id="map" style="height: 400px;"></div>
</body>
</html>

公式ドキュメントのサンプルコードが動かない

https://developers.google.com/maps/documentation/javascript/overview?hl=ja#Inline

> 以下のサンプルは、この地図の作成に必要なコード全体を示しています。
> // Add a marker clusterer to manage the markers.
> new MarkerClusterer({ markers, map });

実行後
Uncaught ReferenceError: MarkerClusterer is not defined
    at initMap (test:21:13)
    at test:25:13

私がドキュメントを最後まで見てなかったのがいけなかったのですが。修正点。

Marker Clusterer を追加する手順は次のとおりです。
const markerCluster = new markerClusterer.MarkerClusterer({ map, markers });

以下詳細手順

1. Google Maps APIキーの取得:

Google Mapを使用するためには、まずGoogle Maps APIキーを取得する必要があります。Google Cloud Platformのプロジェクトを作成し、Maps JavaScript APIを有効化してAPIキーを生成します。

2. Google Mapsの初期設定:

HTMLファイルにGoogle Mapsを表示するための要素を追加し、JavaScriptコード内でその要素を取得します。また、APIキーを使用してGoogle Mapsを初期化します。

3. マーカーの作成と配置:

マーカーを表示する位置情報を定義し、Google Maps上にマーカーを配置します。マーカーの位置情報は緯度経度の形式で指定します。

4. MarkerClustererの設定:

MarkerClustererライブラリをインポートし、マーカーをクラスタリングするためのオプションを設定します。これにより、近くにあるマーカーがまとめて表示されます。

5. マーカーのクラスタリング:

MarkerClustererオブジェクトを作成し、マーカーをクラスタリングします。マーカーを追加するたびに、MarkerClustererが自動的にクラスタリングを更新します。

まとめて表示されたマーカーのスタイリング: クラスタリングされたマーカーにはデフォルトのスタイリングが適用されますが、必要に応じてスタイルをカスタマイズすることもできます。マーカーのアイコンやラベルなどを変更して、見栄えを調整しましょう。

おすすめ記事

未分類

Spring Boot と Spring Framework バージョン 対応表まとめ(SpringBoot v2,v3)

未分類

Powershellで既に開いているウィンドウを半透明にする

未分類

Excelデータのスクロールバーが短い現象を保存を使わずに直す

未分類

iOS Safari の日付型のフォーム input type=”date”でtext-align が反映されない