iOSのSafariにおいて、input type="date"要素を使用する際、text-alignプロパティを指定しても、テキストの位置が左寄せにならず、中央寄せのまま表示されてしまうという現象が報告されていました。これはデフォルトの挙動であり、通常のCSSスタイリングがうまく適用されない状況。
mituluinput::-webkit-date-and-time-value {
text-align: left;
}Stack Overflowで検索したらヒット。-webkit-date-and-time-value 疑似要素を使用することで、解決できる。
Vite manifest not found at: **** と出る。
プロジェクト内で
npm install vite --save-dev完了！
Laravel楽しいね。
特に言うことなし。
初めての人は「user.email」,「user.name」を忘れずに設定を。
エックスサーバー SSH
ghコマンドは入ってないので、手動で公開鍵生成
ssh-keygen -t rsa -C 'メールアドレス'
Generating public/private rsa key pair.
Enter file in which to save the key (/home/.ssh/id_rsa):
Enter passphrase (empty for no passphrase): <Password>
Enter same passphrase again: <Password>
cat ~/.ssh/id_rsa.pub
ssh-rsa *********************** メールアドレスhttps://github.com/settings/keys
上記の公開鍵「id_rsa.pub」をペースト
git clone git@github.com＊＊＊
vi .env
APP_ENV=production
APP_DEBUG=false
APP_URL=https://***
DB_HOST=127.0.0.1
...composer install
php artisan key:generate
php artisan migrate:fresh完了！
npm run build
> build
> vite build
/tmp/build-9bbcca7e.sh: 行 1: vite: コマンドが見つかりませんなぜかインストールされていなかったのでインストール。
npm install vite --save-dev完了！
※x-input-errorを使わずに別の方法で解決させています。
Laravel フレームワークあまり触ったことなく、ハマったのでメモ
PHP 8.2.5, Laravel: 10.15.0
view
<x-input-error :message="$errors->get('title')" class="mt-2"/>input-error.blade.php でエラーが起きているのは分かる。
ErrorException
Undefined variable $messagesエラーこれだけだと分からないよ…
https://biz.addisteria.com/error_message_error/
<x-input-error class="mb-4" :messages="$errors->all()"/>
↓
ErrorException
Undefined variable $messages変わらない…
https://laravel.com/docs/10.x/validation#the-at-error-directive
公式ドキュメント通りだと動いた。x-input-errorについての記述はなかった。
GitHub Copilot でもこっちが出てくる。
@error('title')
<div class="alert alert-danger">{{ $message }}</div>
@enderror2023/07/21 追記
https://webfood.info/make-kattene/
https://plugins.trac.wordpress.org/browser/kattene/tags/1.6/plugin.php
| WordPressがサブディレクトリにインストールされている場合も使えるようにした。 mainフラグ周りの「Warning: Undefined array key」や「Notice: Undefined index」が出ないようにした。 mainフラグが1つも設定されていない場合、1番上のURLをメインとして使うようにした。複数にmainフラグが設定されてしまった場合は、そのうちの1番上のものをメインとするようにした。 |
kattene 1.6で修正されました。
別ブログでkatteneプラグインを使っていて、PHP8.0以上にアップグレードすると、下記エラーが発生。
Warning: Undefind array key "main" in /home/xxxx/wp-content/plugins/kattene/plugin.php on line 44PHP7まではNoticeのみで出力されていなかった。PHP8以降はWarningに格上げ。
上の表示でもそんな感じ。
プラグイン自体2年ほどアップデートされていないので、pochippに乗り換える人がちらほら。
今更全てのリンクを変更するのは面倒だったので、plugin.phpを編集。
$main_tmp = array_filter($sites,
function($site){
return $site["main"];
}
);
$main = array_pop($main_tmp);
$main_tmp = array_filter($sites,
function($site){
return isset($site["main"]) && $site["main"];
}
);
if (!empty($main_tmp)) {
$main = array_pop($main_tmp);
}$sites 配列の要素に "main" キーが存在するかどうかを事前に確認。
$main = array_pop($main_tmp); も一応エラーハンドリングを追加しておく。
PHP8.2.5で動作確認済。
キャッシュ最適化コマンド
php artisan optimizeを実行するとなぜか
405エラーが発生する。
解決法はわかりません。
全部消そう。
$ php artisan -V
Laravel Framework 10.15.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 を使います。
既に存在するXserverのPHPにシンボリックリンクを作成します。
バージョンは各自調整してください。
$ cd
$ mkdir bin
$ ln -s /usr/bin/php7.4 $HOME/bin/php
$ ls -la $HOME/bin/公式サイトのコマンド通りインストールします。
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:$PATHPHPへのシンボリックリンク・ComposerへPATHを追加するため、1行追加します。
$vi .bash_profile
...
# 1行追加して保存
PATH=$HOME/.config/composer/vendor/bin:$HOME/bin:$PATH
...compose
# .bash_profileを反映
$ source .bash_profile$ 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バージョンアップ完了！
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
ここでは触れない。
Google Maps Marker Clustererのアイコンをカスタマイズしたかったのだが、書き方が大幅に変わっていたのでメモ
参考: 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は非推奨らしい。ややこしい。
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',
},
);ここでは触れない。
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 });以下詳細手順
Google Mapを使用するためには、まずGoogle Maps APIキーを取得する必要があります。Google Cloud Platformのプロジェクトを作成し、Maps JavaScript APIを有効化してAPIキーを生成します。
HTMLファイルにGoogle Mapsを表示するための要素を追加し、JavaScriptコード内でその要素を取得します。また、APIキーを使用してGoogle Mapsを初期化します。
マーカーを表示する位置情報を定義し、Google Maps上にマーカーを配置します。マーカーの位置情報は緯度経度の形式で指定します。
MarkerClustererライブラリをインポートし、マーカーをクラスタリングするためのオプションを設定します。これにより、近くにあるマーカーがまとめて表示されます。
MarkerClustererオブジェクトを作成し、マーカーをクラスタリングします。マーカーを追加するたびに、MarkerClustererが自動的にクラスタリングを更新します。
まとめて表示されたマーカーのスタイリング: クラスタリングされたマーカーにはデフォルトのスタイリングが適用されますが、必要に応じてスタイルをカスタマイズすることもできます。マーカーのアイコンやラベルなどを変更して、見栄えを調整しましょう。