next.jsで作ったアプリをsafariで開いた時に出てきたエラー。
それまでchromeで開いていた際には出てなかったので、不思議に思い調べてみた。
has an invalid `imagesrcset` value
無視する。
ググってみてもあまり情報なかったが、以下の記事によるとsafariで報告されているバグらしい。
特別挙動に問題ない為無視した。今のところは何も問題なし。
javascript - Why I get this in Next.js? <link rel=preload> has an invalid `imagesrcset` value - Stack Overflow
ツッコミどころあればご指摘ください。
Next.jsで初めてアプリを作っていて、Image用のloaderを以下のようなソースで定義した時に.envで設定している値を想定した通りに読み込めてなかった。
// APIを叩いて画像を読み込む表示させるコンポーネント
export const PortfolioGroup = () => {
const myLoader = ({ src, width, quality }: ImageProps): string => {
return `${process.env.sampleAPI}${src}?w=${width}&q=${quality || 75}`
}
return (
<Image
loader={myLoader}
src={portfolio.attributes.image.data.attributes.formats.small.url}
width="400"
height="400"
/>
)//.envの内容 sampleAPI=https://xxxxxxxxxx
調べたところ、上記のようなパターンでは.envにAPIのURLを記述してもダメで、下記のようにpublicRuntimeConfigに記載することで解決。
// APIを叩いて画像を読み込む表示させるコンポーネント
export const PortfolioGroup = () => {
const { publicRuntimeConfig } = getConfig();
const myLoader = ({ src, width, quality }: ImageProps): string => {
return `${publicRuntimeConfig.sampleAPI}${src}?w=${width}&q=${quality || 75}`
}
return (
<Image
loader={myLoader}
src={portfolio.attributes.image.data.attributes.formats.small.url}
width="400"
height="400"
/>
)// next.config.jsの内容
/** @type {import('next').NextConfig} */
const nextConfig = {
publicRuntimeConfig: {
//下記にURLベタ書きすることも可能だが、next.config.jsはgit管理されているので.envから読み込むようにしている。
sampleAPI: process.env.sampleAPI
}
}
module.exports = nextConfig//.envの内容 sampleAPI=https://xxxxxxxxxx
せっかくなので.envとpublicRuntimeConfigの違いを調べてまとめてみた。
環境変数を直接process.envオブジェクトから参照する方法。
.envファイルや.env.localファイルに環境変数を設定し、process.env.変数名でアクセスできるようになる。
これらの環境変数は、サーバーサイドでもクライアントサイド（ブラウザ上）でも利用できる。
ただし、process.envの値はビルド時に決定されるため、クライアントサイドでの値の変更や非同期処理には使えない。
Next.jsに組み込まれた機能で、サーバーサイド、クライアントサイド（ブラウザ上）で利用可能なランタイム変数を定義することができる。
next.config.jsでpublicRuntimeConfigオブジェクトを設定する。
サーバーサイド、クライアントサイド、どちらのコードでも利用できるが、クライアントサイドではpublicRuntimeConfigの値にアクセスできるものの、実際の値はサーバーサイドで非公開に保たれるらしい。(クライアントサイドで値の保持はしてない。という事みたい)
クライアントサイドのコードにおいて非同期処理や動的な値を取得する際に便利。
具体的には、以下のように使い分け可能。
例えば、APIエンドポイントやデータベースの接続情報などの秘密情報は、envを使って設定し、サーバーサイドで利用するのが一般的らしい。
一方で、クライアントサイドで表示する定数や設定値は、publicRuntimeConfigを使って設定することが便利。
サーバーサイドで値取得する変数
→ .envを使う
クライアントサイド（ブラウザ上）で値取得する変数
→ publicRuntimeConfigを使う
.envは使用不可（ビルド時の値が確定しているため。だが、「NEXT_PUBLIC_」を利用すればブラウザからも値取得可能になる。詳しくは参考記事として添付している公式ページ参照）
基本、公式が親切に解説してくれるので、公式を見るのが一番だと思います。
next.config.js: ランタイム設定 | Next.js
Basic Features: 環境変数 | Next.js
認識に間違いありましたら、ご指摘・ご指導いただけると幸いです。
最近、買って良かったものの紹介。
自分は10代の頃から肩凝りで悩んでいる肩凝りヤー(？)です。
姿勢の問題なのか、目が悪いからなのか肩凝りの苦労から解放されたことはありません。
30代になってエンジニアに転職してからは、肩凝り度が加速したのは言うまでもありません。
10代の頃からの肩凝りヤーとして、経験則的に肩凝りが軽減されるのは、
・ストレッチ
・ジムで筋トレ
・整体
・エレキバン貼る
などですが、購入したアイテムでも効果を実感したので勝手に紹介します。
ま、首に巻くエレキバンですな。
軽く、装着感はほとんどありませんし、見た目も別に悪くないので24時間装着してます。
以前にも似たような肩凝りグッズを使っていたのですが、首に装着する時につけ外しする接着部分？が緩くなってしまって、使えなくなってしまいました。
価格も2,000円台と安かったので、試しで購入しました。
装着して2週間ほど経ちますが非常に良いです。
まず、「肩凝ったなぁ」という感覚がかなりなくなりました。
全くなくなったわけではないですが、以前のように肩凝ってPCに向かうのがシンドイというのはなくなりました。
以前からエレキバンがかなり効くのは分かっていたので、今回も期待はあったのですが、しっかり期待通りの効果です。
よくない点を挙げるとすると、ちょっと大きかったこと。今回購入したのが60cmなのですが、装着してみると大きい。。
わざわざつけ外ししなくても、頭の上からスッポリ脱いだり被ったりできるくらいです(笑)
別に邪魔にはならないのですが、大きすぎる感覚はあるので、次買う時はもう一回り小さいのを購入しようと思います。
全国の肩凝りで苦しむ肩凝りヤーさんはぜひ試してみてください。
laravelなどのフレームワークでなく素のPHPを扱えるように、下記の本でPHPを基礎からざっと勉強中。備忘録も兼ねてまとめ。
![PHP本格入門[上] ~プログラミングとオブジェクト指向の基礎からデータベース連携まで](https://m.media-amazon.com/images/I/41zPn5lFAgL._SL500_.jpg "PHP本格入門[上] ~プログラミングとオブジェクト指向の基礎からデータベース連携まで")
<body>
<?php
//phpコードを記述。
?>
</body>
phpプログラムのみのファイルの場合、phpタグは閉じない。
閉じタグの後にスペースや改行が入っていると、スペースや改行がそのまま出力されたり、予期せぬエラーにつながる為。
<?php> //phpコードを記述。
BOMをつけない。
UTF-8で保存する際、BOMをつけてしまうと画像データが壊れてしまったりするので、つけない。
※BOMって何？ってなった時は過去記事参照
BOMってなに？ - fluid_27’s blog
変数
$変数名 = データ;
変数の値出力
echo $変数名; print $変数名;
デバッグの為の変数情報出力
var_dump($変数名);
定数
define('定数名', 値);
定数の値出力
echo 定数名;
マジック定数
PHPで予め定義された定数であり、参照されば場所によって異なる値を返す。
_FILE_ 絶対パス表記の現在のファイル名
_DIR_ 〃 が存在するディレクトリ名
list - 配列の各要素をスカラー変数に割り当てる
list関数を使えば、配列のデータを変数に割り当てることができる。
$Taro = ['Yamada Taro', 'Man', '20', '170', '60']; list($name, $sex, $age, $height, $weight) = $Taro; echo $name; //Yamada Taroと出力される echo $sex; //Manと出力される echo $age; //20と出力される echo $height; //170と出力される echo $weight; //60と出力される
declare命令を使って、厳密な型チェック(strict types)を有効にし、暗黙的な型変換を防ぐ。
<?php declare(strict_types=1);
関数が定義されたファイルなどを読み込む場合はrequire_once
パーツが書かれたhtmlファイルを読み込む場合はinclude
を使うことが多い。
consulについてちょっとだけ勉強したので、概要についてザックリまとめてみる。
HashiCorpによって開発されたインフラ上のサービス設定とサービスディスカバリのためのツール。
オープンソースとして開発・公開されている。
クラスタのメンバー管理機能があり、Consulクライアントはサービス毎に正常か異常かを把握し、この情報に変化があれば直ちにConsulサーバに通知する。
サービスの情報はConsulサーバ上のKVS(キーバリュー・ストア)に格納され、この情報はWeb UIやDNS・HTTPの各インターフェースから参照できる。
Consulクラスタが稼働するシステム全体において、どのサーバ上でどのようなサービスが稼働しているか、そして、それらは正常か異常かどうかを確認する機能。
Consulクライアントは、主にサーバ上のデーモン（NginxやMySQL等）をサービスとして定義する。サービスの定義はエージェント起動時にJSON形式の書式で定義するか、REST APIを通して行う。
ヘルスチェックを備えているし、GUIを通してサービスの正常性の確認もできる。しかし、過去の時系列データに関する保存は行わないという点で、一般的な統合監視ツールとは決定的に異なる。あくまでもConsulは「現在の状態」しか保持しない。
ちなみにHashiCorpが開発したSerfというツールも似たようなツールとのことで比較してみる。
メンバ管理とイベント同期のためのツール。
管理用サーバーを用意しなくても、お互いが通信してクラスタを構成できる。
任意のコマンドをクラスタに所属するサーバで一斉に実行するだけでなく、サーバの追加や削除のタイミングでもコマンドを自動的に実行できる。
Consulよりも学習コストは低いが、複雑な設定などは無理。
クラスタを構成する各サーバの死活や、メンバー（serfエージェントが稼働するサーバ）のホスト名、IPアドレス、タグを管理
メンバーとの通信途絶時は障害情報を共有し、定期的に復帰を確認して疎通が回復できれば、クラスタへ自動復旧
任意のタイミングで発生するイベントをクラスタ全体で瞬時に共有
Serfでのイベント発生のトリガーは「Serfクラスタへの参加や離脱」、「任意のタイミングでのイベント実行」の２種類。
（ウェブサーバーの応答やDBサーバー障害をトリガとしてイベント実行することは可能ではあるものの、面倒とのこと）
1. サービスごとの状態監視
Serfと同様の機能に加え、Apache HTTP Server・NginxのようなWebサーバ、MySQLやPostgreSQLのデータベース、各種デーモン等の任意のサービスに対する状態監視を行うことができる。
また、監視対象はサーバの中だけに限らない。ネットワーク機器に対するpingや、クラウド上のサービスAPIをアクセスした結果に対してもサービスとして定義できる。
2. インターフェースを通しての参照
下記3つの方法で現在のサービス情報を取得できる。
GUIでConsulノードの稼働状況や、その上で動いているサービスの稼働状況を視覚的に把握できる。またKVSのデータ参照・更新も可能。
REST APIを通してKVSの情報を取得し、編集することができる。
hostコマンドやdigコマンドでローカル環境におけるホスト名・IPアドレスの名前解決を自動的に行ったり、WebサーバやデータベースのDNSラウンドロビンに応用したりできる。
以上、ザックリとした概要をまとめました。
修正点ある場合はご指摘頂ければと思います。
参考サイト
サービス・ディスカバリのためのConsul入門 | Think IT（シンクイット）
Serf / Consul 入門 ～仕事を楽しくしよう～
Serf／Consulで管理を自動化！ ～実践的な手法を紹介～ 記事一覧 | gihyo.jp
マイホームを購入しようと動き始めて約1ヶ月。
本日は埼玉県でも茨城の手前まで範囲を延ばして新築物件を内覧してきた。
が、すでに買い付けが入っている物件多数で、残っている物件が1件しかなかった。。
（やはり、先週内覧に行けなかったのがツラかった）
一応見てみるも、目の前の道路が狭すぎ＆車庫入れがムズイのが最大のネック。
逆にそれ以外での難点はほぼなし。
（駅徒歩7分。4SLDK。2,000万円以内。新築）
条件良いものの、明らかに車が必要なエリアなのに対し、家前の道狭すぎ問題が気になり、買う気にならず。
中古物件も併せて見てみるも、新築とほぼ価格差ないのと、築浅と言えど若干のリフォームが必要な状態だったのでスルー。
10:30から内覧開始して、解散したのが15:30。
解散後にようやく昼食。これだけの時間でも内覧はいつもどっと疲れる。見るべきポイントが多いせいだろうか。
結論、新築は難しそう。それもこれも、探し始めた時期が遅かったのが敗因。
予算考えると中古一軒家か中古マンションがおそらく妥当。
ただ、予算内で購入可能な中古物件はどれもリセールバリューが低そうなので、そこがネック。。
悩ましいなぁ。。
マイホームへの道のりは遠い。というか毎回内覧行くのに片道1時間半以上、交通費1,000円以上かかる。
純粋に埼玉が遠いのよ。
PF用に作成したオリジナルアプリなどをgithubのREADMEにデモ動画を載せたい！と思った方もいるかと思います。
macで実際にアプリを操作している際の画面を動画として撮影し、githubに載せるまでの手順をまとめましたので、ぜひ参考にして頂けたら幸いです。
1. macではデフォルトで「QuickTimePlayer」というアプリが入っているので、
「アプリケーション」フォルダから QuickTime Player を開いて、メニューバーから「ファイル」>「新規画面収録」の順に選択します。
2. 撮影する画面を選択。
※停止する際は「command + control + esc」キー押下で停止します。
3. 撮影を開始し、実際にアプリを操作する。
4. 停止すると自動で撮影したファイルが開かれるので、「完了」押下し、保存します。
5. 編集
保存したファイルを開き、実際に使いたい部分だけをトリムします。
手順としては「編集」> 「トリム」押下し、使いたい部分だけを選択している状態で「トリム」押下。完了したら保存します。
保存した動画の拡張子がmovになっているので、GIFに変換します。
ググれば無料でGIFに変換してくれるサイトが見つかると思うので、それらのサイトを利用します。
※筆者は下記サイトを利用しました。
https://syncer.jp/gif-maker
1. github issuesで「New issue」押下します。
2. 本文(Leave a commentと書いてある部分)に保存していたGIFをドラッグ&ドロップする。
3. 生成されたタグをコピーし、READMEに貼り付ける。
以上で完了です。
参考サイト
Mac で画面を収録する方法 - Apple サポート (日本)
GIFメーカー (動画や画像からアニメーションを作ろう！)
GitHubにデモ動画を簡単に埋め込む - Qiita
