Web List

対話

GeminiのAPIを使って、チャットアプリをReactでつくる。

やられた

WPFormsのエラーとJQuery。

切り抜き

AIで画像を切り抜いてもらう。

試し

エックスサーバー上でReactとLaravel使ってみる。

簡単

Viteのchunks警告を解消。

偉い

エックスサーバーで発生した遷移先エラーを解消。

認めない

chakraUIのLinkにnofollowを設定する。

切り抜き

Nuxt3でheadlessuiとvue advanced cropperを使って画像を切り抜いた。

奇っ怪

変更が参照になってて、変更場所を特定するのに苦労した話。

カンマ

Nuxt3とGSAP ScrollTriggerでカンマ含み数字をカウントアニメーションさせる。

ふわっとメニュー

Nuxt3とTailwind CSSでふわっとフェードでメニューを表示する。

効かない

TailwindCSSでhidden sm:blockが効かないのを効かせる。

色彩変化

GSAPを使って背景のグラデーションを変化させる。

シェア

SNSシェアボタンをWordPressで自作実装する。

タイポ

グリッドで失敗し、svgで文字組みする。

Nuxt3でpluginsのファイルを呼び出すとtsエラーになる。

順番

Nuxt3でtransitionした時の順番が思ってるのと違った。

崩れる

Vuetify3でpageTransitionしたら、footerが崩れた。

アップアップ

app.vueに何を記載しても反応がないを解決する。

ふぉーむ

Nuxt3でNetlify Formsを動かしてみる。

ねとりふぁい

NetlifyにNuxt3をSSRでデプロイする。

無限ループ

CSSとJSで無限ループを実装する。

フレワク

Nuxt3+Vuetify3で実装するも相変わらずハマる。

バリフォー

Nuxt3でvuetify3とVeeValidate4を実装するのに手こずる。

北海道コロナ週報

北海道の新型コロナウイルス感染状況を可視化する。

勝手にリフレ

Nuxt3でリフレッシュされる現象に悩まされる。

イライラ

スマホでクリックを2回押さなきゃを改善する。

要不要

Nuxt3でnuxt-securityを導入したが不要だった件。

ハマる

Nuxt3でnuxt-og-imageにハマる。

怪しいチャート

Nuxt3でApexChartsを使い多軸yaxisと複数のsiriesを紐付ける。

ハマる

Nuxt3でcreateElementしたらCSSが効かないを解消する。

縦スラ

横スライダーを縦スライダーにする話。

条件分岐

Nuxt3でv-bindのclassに複数の条件分岐を設定する。

円動

円グラフっぽいアニメーションを実装する。

上下左右

カーソルの入出方向で、ホバーアニメーションの方向を変える。

縦スク

縦スクロールによって、既読割合を表示する。

求人情報の構造化

構造化データをWordPressに実装し、Google for jobsに情報を伝える。

人気投票

JSでカウントし、JSONで保存。クリックした後のアニメーションを実装する。

整形し、書き出す

csvで取得し、phpで整形して、JSONで書き出す。

画像設定

YoastでデフォルトのOGP画像を設定する。

チェックする

WordPressのテーマをチェックするTheme CheckとQuery Monitorを導入。

検索で強調する

WordPressの検索結果で、ACFの検索結果を検索ワードで強調する。

止めてやる

functions.phpでvar_dump()して変数の中身を知る。

絞り込む

category.phpとtag.phpで絞り込んで一覧表示する。

投稿者を加える

カスタム投稿タイプで管理画面一覧に投稿者を表示させる。

スマホブラウザ

スマホブラウザの外縁色を指定する。WordPress関係ないかも。

取得し、戻す

swiperで文字を動的に扱うための細工です。

フィットする

inline-blockの代わりにfit-contentで問題を解決する。

リンクが効かない

疑似要素を使ったらリンクが効かなくなったのを修正する。

チラつく

Swiperを使った際、Safariで画像がチラつくのを修正する。

小説を依頼

chatGPT3.5に小説を書くことを依頼。

仕事の範囲

無償でWebディレクションをするべきか、せざるべきか、悩ましい。

愛だろ、愛っ

危機感からOPEN AI chatGPTを触ることに。

ザンプが逝く

Xamppで頻発するMySQLエラーから復帰する。

メールフォーム

mb_send_mail()でメールの不受信や文字化けを解消。

変わってた

wordpressのテーマ作成方法が変わったみたい。

分割そして挿入

swiperの.swiper-slideを動的に挿入。

ハイライト

barba jsで、遷移後にHighlighting Code Blockを再びハイライトする。

もっと見るボタン

JQueryから普通のJSに書き変える。そして、長くなる。

ナクストのエラー

Node.jsのバージョンアップで、NUXT JSにエラーが発生。解消方法を発見。

アニメーションしない

display: noneとopacityは併用できない。

ブレンドモード

mix-blend-modeで乗算やオーバーレイを適用する。

アンダーライン

text-decorationの機能が豊富になっていた。

レスポンシブ

画像をトリミングするobject-fit。

ファイル操作

Node.jsを使ってデスクトップ上でhtmlファイルを大量制作。

セレクトフォーム

jQuery Plugin Multiple SelectでMulti Select以外に、Single Selectを適用する。

北海道の病院稼働状況

オープンデータを使い、北海道の病院稼働状況を制作しました。

セキュリティ対策例

Wordpressのセキュリティ対策例について調べました。

全画面表示

jQuery Pluginのlightcaseで全画面表示。

リンク

リンク集。

ルーツ

自分の苗字を探すブログ。