投稿一覧
9件
2023.4.12【Windows】NVIDIAのカスタム解像度を使ってフルHD(1,920×1,080)のモニターを2K(2560×1440)として広々使う方法勢いで大きいモニター買ったけどなんか画面が小さい ノートパソコンに27インチモニターを付けて広々と作業するつもりが、なぜかノートパソコンと同じ広さ・・・。 設定から解像度を変更しようとしても、(推奨)以上にならない こんなはずでは。 NVIDIAのカスタム解像度という機能があった 1. デスクトップ上を右クリックし、NVIDIAコントロールパネルを開く 2. 解像度の変更 > カスタマイズ から、好きな解像度を入れる コピペ用 4K（3840×2160）WQHD（2560×1440） これで無事解像度が変わりました。 補足 NVIDIAじゃなくてAMDのPCも、「仮想超高解像度」という機能を使って同じことができるようです。
2023.4.8Swiperのアレ（スライドがリンクになっていると挙動がおかしくなる問題）Swiperでスライドがリンクになっていると挙動がおかしい スライドしようとするとすごくブレる。 なんかオプションをつけるといいらしいけど、そうするとスライドしようとしてもクリック扱いになる。 centeredSlides: false にしてみた。 centeredSlides: false, 自分の場合は、キービジュアルをリンクにしていて、スライドしようとするとすごく挙動がおかしくなったけど、centeredSlidesをfalseにしたらなぜか落ち着いた。 詳しくは調べてないけど、とりあえず忘れないように残しとく。
2023.3.4Sass使わないほうがコーディングのスピードが出る？こんにちは。 最近思いました。 Sassの機能ってそんなに使ってないな、と。 Sassの機能といえば・・・ネストできるところですけど、@mediaと疑似要素以外は特に使ってないです。 .bl_card { &::before { content: 'あ'; } @media (max-width: 500px) { width: 100%; } } CSSだけのほうが速いのかな・・？ 考えるよりとりあえず試す派なので、Sassのコンパイル時間が無い方が調子が出るのかもしれない。
2023.3.3ChatGPTはコピペエンジニアの救世主となるか？はたまた仕事を奪うのか？ChatGPTに書けないコードを書いてもらう。こんにちは。 ChatGTPが流行っていますね。 仕事でこういうプログラムは書きたいっていうのはあるんだけど、自分では書けないとき、ChatGTPに聞くと便利なので使い方を紹介します。 使用例① .htaccessでリダイレクトしたいけど、書き方が調べてもよくわからない。 聞いてみた。 これはうまく動いた。 使用例② NAS上のファイルのテキスト検索をしたい。 聞いてみた。 これもうまく動いた。 まとめ 助かる～。 こういう標準化されていることについてはすごく詳しいです。 でもローカルな情報だとちょっと弱いです。 楽天APIについてもサンプルコードを聞いてみたことがあるんですが、コピペしても動かなくて、なんでかなーと思っていたら情報が古かったです。一昔前のAPIのエンドポイントを使ったコードを教えてくれました。 うごかなくても、それを取っ掛かりにして自分で作れることもあるし、本当に助かっています（笑）
2023.3.2GUIコンパイラ「Prepros」の Custom Tools を使って、EJSをコンパイルしたい！やりたいこと EJSをコマンド無しで使いたい。 フォルダ構成 project/ ├ src/ │ └ ejs/ │ └ index.ejs └ dist/ └ index.html やり方 1. EJSをグローバルインストールする npm i -g ejs 2. Prepros の Custom Tools に EJS のコマンドを設定する 右上のメニューから Project Setting > Custom Tools > Add Tool を選択。以下のように設定する。 ejs {{input}} -o {{output}} 3. EJSの出力先を設定する 次の画面で以下のように入力する。 これで設定は完了です。 4. index.ejsを保存する <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>EJS</title> </head> <body> <%= 'EJS'; %> </body> </html> 上記のコードで保存すると… コンパイル成功です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>EJS</title> </head> <body> EJS </body> </html> こんなふうに出力されました。 補足 EJSの出力先をドキュメントルート直下にしたいときは、Outputの Replace With を 「.」 するとなります。 EJSにパスの情報を渡したいときは、以下みたいな感じで変数を渡せます。そうすれば、グローバルで使えるのでincludeするときにいちいち変数を渡す必要がなくなって楽です。 ejs {{input}} -o {{output}} OUTPUT_DIR={{outputDir}} ROOT_DIR={{rootDir}} INCLUDE_DIR={{rootDir}}/src/ejs/include/- 2023.3.1古いサイトの更新がしんどい・・・。CSSの新機能、カスケードレイヤー（@layer）を使ってみる。古いサイトの更新依頼がきた。 #home-menu div { font-size: 12px; } #home-menu p { background-color: #ccc; float: left; } #home-menu span:nth-child(1)::before { position: absolute; left: 30px; background-image: url('../icon/icon1.gif'); } こんな感じで、ブロックのルートにIDが振ってあって、あとは要素名でスタイルがあたっている。 横並びはfloatかinline-blockかabsoluteで指定してある。 そして、無駄にブレイクポイントがたくさん刻んである。 pもdivもspanも余計なスタイルが効いてくるからしんどい。いちいち余計なスタイルを探して既存部分が壊れないように調整するのもしんどい。かといって、全部!importantするもしんどい。 ？？？「これを流用してサクッと新規ページを作ってよ！ベースがあるんだからすぐできるよね？」 邪魔なスタイルに打ち勝つ。 カスケードレイヤー（@layer）を使いました。 @layler oldStyle { #home-menu div { font-size: 12px; } #home-menu p { background-color: #ccc; float: left; } #home-menu span:nth-child(1)::before { position: absolute; left: 30px; background-image: url('../icon/icon1.gif'); } } /* !important しなくても、自分が追加したCSSが勝つ！ */ @layer newStyle { .homemenu_sub { display: flex; left: 0; } } 多少は（？）気分が落ち着きました。 all: revert; で、初期化して、必要なプロパティ（フォント指定とか）だけ inherit すれば楽な場合もあるんじゃないかと思っています。それは今度試してみます。
2023.2.28ウェブコンポーネントを使って静的サイトのサイトフレームを共通化するやりたいこと 静的サイトのサイトフレームを、iframeやSSIを使わずに共通化したい。CSSはウェブコンポーネントの中身にも適用したい。（カプセル化したくない） コード JavaScript // cm-layout カスタム要素を作成 customElements.define('cm-layout', class extends HTMLElement { constructor() { super(); // ページによって変わるところは属性プロパティで渡す const h1 = this.getAttribute('h1'); // shadow root はつくらないで直接HTMLを書き換える this.innerHTML = ` <header>ヘッダー</header> <main> <h1>${h1}</h1> ${this.innerHTML} </main> <footer>フッター</footer> `; } }); HTML <body> <cm-layout h1="h1タイトル"> <p>ここにコンテンツを入れる</p> </cm-layout> </body> CSS cm-layout { /* 1階層深くなるのでカスタム要素は消す */ display: contents; } 補足 サイトフレーム部分のHTMLをJavaScriptに書くので、エディターのシンタックスハイライトがきかないのはちょっとやりづらい。
2023.2.27さくらレンタルサーバー（スタンダードプラン）をGitリモートリポジトリにできる。Gitを使いたいけど、Gitのホスティングサービスはお金がかかったり制限があったりしたから今持ってるさくらサーバーでGitを使えるかやってみた。 やり方 さくらサーバー上での操作 # さくらサーバーにSSHする ssh {ユーザ名}@{ユーザ名}.sakura.ne.jp # 好きなところにGit用のフォルダを作る mkdir /home/{ユーザ名}/path/to/git/ # リモートリポジトリを初期化する git init --bare /home/{ユーザ名}/path/to/git/{プロジェクト名}.git # SSHログアウト exit ローカルでの操作 # 作成したリポジトリをクローンする git clone ssh://{ユーザ名}@{ユーザ名}.sakura.ne.jp/home/{ユーザ名}/path/to/git/{プロジェクト名}.git 補足 sshプロトコルのみ使える。httpプロトコルはapacheの設定をしないといけないのでできない（？）
2023.2.26サイト公開しました。やっとできた・・・ Next.js のSSGで作った静的サイトを、Firebase Hosting にデプロイして作りました。 Next.js、めちゃくちゃ難しかったです・・・。というか、TypeScriptのエラーが難しかったです。 普段は素のHTML、CSS、Wordpressくらいしか触っていないので、わけがわかりませんでした。 調べるにもなかなかうまくいかず、なんて調べていいかもわからず。 そんなとき、OpenAIがすごく役にたちました。 OpenAIに、たとえば・・・「getStaticPropsでWordpressのRestAPIを呼び出すサンプルコードくれ」と書くと、5秒くらいでサンプルコードをくれました。 もっと雑な説明でも理解してくれてすごいですよね。理解力がすごすぎる。