画像をルーペで拡大する

imgタグの画像を拡大するのは大体どのプラグインでも問題なし。 ただ、canvasタグを拡大表示するのは若干めんどさかった。 canvasで画像拡大を実装することもできるが、 自分が試した印象ではパフォーマンス的に厳しいという印象。 なので、canvasの場合は toDataURL() を使って画像のバイナリーデータを取得し、そのデータを画像拡大プラグインで読み込んで用いる、あるいはimgタグの src 属性に直接データを埋め込む。

情報漏洩のしょうもない原因を防ごう

テクノロジーが発達した現代でも、本当にくだらないミスで情報漏洩しています。ということで、自分が他人の案件でサポート入った時に、遭遇したパターンについてまとめてみます。 1. 公開領域に、拡張子を変える形でバックアップファイルを置いている 残念ながら頻繁にあります。 バックアップファイルを作成するだけならまだ良いのですが、元の拡張子を変えて保存してしまったファイルは超危険です。 例えば、公開領域に wp-config.php というファイルがあると仮定します。このファイルのバックアップとして wp-config.php_20230429 というファイルを複製した場合、拡張子が .php_2023…

ChatGPTに数行の英文を添削してもらった。

その時のChatGPTとのやりとりを掲載しました。 応答も自然で、かなり使えるような気がする。 とりあえず、英語で言葉を発するのに慣れるのには良いと思う。対人のコミュニケーションよりも心理的な安心感もリスクも低いだろうし。 私 So would you help me and correct my message. ChatGPT Of course, I can definitely help you with that! Please feel free to write your message, and I'll do my best to correct any errors and…

プリンターの給紙が故障・・・

プリンターの給紙が故障してうまく印刷ができなくなってしまった。まだギリギリ使えるけど複数部の印刷は難しい。10年前くらいに10,000円位で購入したプリンターなので、十分頑張ってくれたと思う。 個人的には楽譜やテキスト、公的書類の印刷にしか使っていないのでモノクロのみでOK。残っているインクが切れたタイミングでプリンターも買い替えようと思う。2〜3万円くらい出せば十分良いプリンターが購入できると思う。ま、プリンターの場合本体よりもインク代の方がコスト的に高いね・・・

電子圧力鍋LPC-T1201で炊飯した

コイズミの電子圧力鍋LPC-T1201で炊飯した。 詳しい操作方法は説明書があるので省略するけど、加圧時間4分で、加熱から加圧・減圧までトータル約15分。 若干硬めの炊き上がりに仕上がった。 水に長時間浸さずに炊飯したので、仕上がりの硬さに影響しているように思う。もしくは加圧時間をもう少し多くする？

mac - ファイルのmd5ハッシュ値を確認する

macでファイルのmd5ハッシュ値を確認する場合は、 md5 コマンドが標準で使える。 コマンド md5 sample_file.txt 実行結果 MD5 (sample_file.txt) = d41d8cd98f00b204e9800998ecf8427e -q オプションを付けると、ハッシュ値だけ出力する。 コマンド md5 -q sample_file.txt 実行結果 d41d8cd98f00b204e9800998ecf8427e ちなみにlinuxでは、md5sum というコマンドが使える。

ChatGPTを試した。

最近SNSで注目されているChatGPTを試してみた。 例えば、「年月日を引数に取り、曜日を返すpythonの関数を作って」とAIに問いかけると、レスポンスとして、そのものずばりpythonの関数の定義が返ってきてびっくり。 また、別の例では文章を要約して、と問いかけると指定した文章を要約してくれたり。なかなかすごい。 ちょっとした案内はこれである程度カバーできそうな気がする・・・ 例えば、歩くペッパーくん＋AIチャットを組みわせると、施設の案内とかできそう。 chat.openai.com

PHP: コンストラクタのプロモーション

PHP8.0以降コンストラクターの引数を、オブジェクトのプロパティに設定することができるようになった。 例えば、$valueというプロパティにコンストラクタで値を代入する場面を考えてみる。 class Hoge { public string $vlaue; public int $num; public function __construct(string $value, int $num) { $this->value = $value; $this->num = $num; } } var_dump(new Hoge('Hello', 1)); 実行結果 object(Hoge)#1 …

PHP - テキストに数行おきに空行を挿入する

テキストに数行おきに改行を挿入する方法を調べた。 処理のイメージは次の通り。 入力テキスト あああああああああああ いいいいいいいいいいいいい うううううううううううう ええええええええええええ おおおおおおおおお かかかかかかかかか 出力テキスト あああああああああああ いいいいいいいいいいいいい うううううううううううう ええええええええええええ おおおおおおおおお かかかかかかかかか 実装例は下記の通り。 <?php $text=<<<EOS あああああああああああ いいいいいいいいいいいいい うううううううううううう ええええええええええええ おおおおおおおおお かかかかかかかかか E…

twitterの広告を消すブックマークレット

広告部分のhtmlには data-testid="placementTracking" という属性が設定されているので、その属性を持つDOM要素を非表示にすれば広告を消せる。 javascript:(() => { const e = document.createElement('style'); e.innerText = '[data-testid="placementTracking"]{display:none;}'; document.head.appendChild(e); })(); スタイルタグを動的に生成して、そこに以下のCSSを書き込む。 [data-testid="pl…

xpathの記述方法を調べる（途中）

記述 内容 .. コンテキストノードの親を選択する . コンテキストノードを選択する * コンテキストノードの全ての子要素を選択する / ルートノードを選択する。 //hoge ルートノードの子孫全体から、要素 hoge を全て選択する。 hoge 要素 hoge を選択する hoge[fuge] 要素 hoge のうち、子要素 fuge を1つ以上持つ要素を選択する。 hoge[fuge="moge"] 要素 hoge のうち、子要素 fuge の文字列が moge である要素を選択する。 hoge[@attr] 要素 hoge のうち、属性 attr を持つものを選択する。

html - datalistでお手軽コンボボックス

webでコンボボックスを実装するのは面倒だけれども、 実はhtmlには <datalist> というタグがあって、これを使うと手軽にコンボボックスを実現できる。 コード例) <input list="languages"> <datalist id="languages"> <option value="COBOL"> <option value="Go"> <option value="Haskell"> <option value="Java"> <option value="JavaScript"> <option value="Kotlin"> <option value="Perl"…

@theme-ui/mdx/dist/theme-ui-mdx.cjs.dev.js to a dynamic import() which is available in all CommonJS modules.

next.js 12 のチュートリアル進めている。 theme-ui を追加したところで、下記のエラーが発生してビルドできなくなった。 Error: require() of ES Module /Users/h.hashimoto/Documents/src/projects/nextjs/next-blog/node_modules/@mdx-js/react/index.js from /Users/h.hashimoto/Documents/src/projects/nextjs/next-blog/node_modules/@theme-ui/mdx/dist/theme-ui-md…

Laravel Fortifyでマルチログインを実装する時のポイント

ネットに転がっているチュートリアルやドキュメントは断片的な情報が多かったので、自分が実現したい要件に沿った実装はどうすれば良いのか、というところがわかるまで随分時間がかかった。 細かい事はそのうちサンプルの実装を作ってみようと思うけど、ポイントは下記点。 ちゃんとFortifyの設定を理解する URLで切り分ける リダイレクト先のURLが直書きの箇所をカスタマイズする セッションの分離(guard設定しただけじゃ不十分) チュートリアルやサンプル実装に頼るのをやめて、頑張ってFortifyの実装を読む ちゃんとFortifyの設定を理解する 自分はこの事を軽くみていたので、当初カスタマイズしな…

ブラウザ上のURLの書き換え

ブラウザのURLバーに表示されているURLを書き換えが必要になったので調べたところ、Javascriptの下記メソッドが使える事が分かった。便利なメソッドなので活用していきたい。 history.pushState() history.pushState history backの履歴に書き換えたURLを追加する。 state pushStateで生成された履歴に紐づくJavascriptのオブジェクトを指定する。 unused 歴史的な理由で残されており、省略不可である。 空文字 '' を指定すれば良い。 url そのものずばり履歴に記録するURLである。 現在のURLと、Same Orig…

Typescript: クラス

Typescriptのクラスについて。 class Item { // (1) public name: string public price: number private id: number // (2) constructor(name: string, price: number, id: number) { this.name = name this.price = price this.id = id } // (3) info(): string { return `name: ${this.name}, price: ${this.price}` } } プロパティの宣言 …

Typescript: 関数のオーバーロード

Typescriptには関数をオーバーロードする事できる。 最初にオーバーロードを使わず個別に関数を定義してみる。 function multipleValue(value: number): number { return value * 2 } console.log(multipleValue(5)) function multipleValue2(value: string): string { return value + value } console.log(multipleValue2('Hello')) 次に関数のオーバーロードで実装してみる。 function multip…

Typescriptの記事まとめ

Typescriptについて書いた記事のリンクをまとめたみた。 型 Typescript: 型 Typescript: 型エイリアス Typescript: 関数のオーバーロード 基礎文法 Typescript: クラス

勇者一行から追放される系統の物語に感じる違和感

勇者一行から無能扱いされて、勇者のパーティーから追放されるパターンのお話を漫画やラノベでよく見かけるけど、結構な違和感を感じません？ そもそも、パーティーメンバーのスキルを正確に見定められないような勇者に一体何ができるのだろう？ってなもので。 メンバーのスキルを正確に把握しないような人間に戦略なぞまともに立てられるわけもないだろうし、そんな状況で魔王討伐なんか行ってみたら、ぼこぼこにやられるのがオチだろう、という風に思えてしまう。 『勇者から追放される』という設定を無理やり使っているだけで、その設定の現実味が薄く感じるお話が多いように思う。

React18を学習する

最近React18を勉強している。 とりあえず、学習メモとして学んだことの概要だけ書き出してみる。 props はコンポーネントに値を渡す（immutable) state はコンポーネントが持つ状態を管理する (mutable) Function Component での定義が推奨されている Class Component は今は推奨されていない模様 vue.js の Compositionに近い？ Hooks (useState, useEffect ...) vue.jsよりは記述が複雑、に感じる