AI 【2025年最新 TailwindCSS v4入門】Cursor × Tailwind CSSでさらに爆速コーディング
おつかれさまです。現役Webエンジニアで、Udemy講師をしているNanairoです。
2025年1月に、Udemyで
【2025年最新版】Cursorで爆速AIコーディング【フロントエンドエンジニア向け解説】
...
ナナイロ
AI 
Shopify 【Shopify winter25の新機能】”Theme Block(テーマブロック)”をまとめました
Shopify Partnerが作成できる、「Shopify開発者用ストア」（公開できないストアだが、新機能の早期アクセスが可能）にて、
昨年からその機能がアクセスできましたが、Shopify winter'25のアップデートで、
...
CSS 【2025/1/22リリース】TailwindCSS v4【2025/1/22リリース】の環境構築
Tailwind CSS v4が2025年1月22日にリリースされていました。
どんなバージョンかと端的に言うと、環境構築が非常に簡単になりました。
v2でオプション機能だったJIT（Just in Time）...
AI 【Deep Research】Perplexityで無料で使えるDeep Researchを試してみた！
"Deep Research"を今すぐ無料で使える！
Chat GPTでは現在Proプラン($200/月)でしか使えない"Deep Research"。
僕はPlusプランを使っていて、
サム・アルトマンはじきに...
FutureShop 【FutureShop】オーガニック検索で”?srsltid=”つきのURLになっているとページ表示されない件
ある日、とあるFutureShopのストアが
オーガニック検索結果でサイトトップページがアクセスできなくなっていた。
検索結果上のサイトタイトルをクリックすると以下の画面になる。
この文面を見ると、「リダイレクト...
AI 【2025年最新版】コーダー向けにざっと解説するCursorのセットアップと使い方【爆速AIコーディング！】
CursorはAI機能を搭載したVSCodeの拡張版で、フロントエンド開発を効率化するための自動コード生成やスタイリング提案が可能。新機能「Composer」というAIエージェント機能（「目標」を与えて、それを遂行するまでAIが自律的に動...
AI 【2025年最新版】Cursorで爆速AIコーディング【フロントエンドエンジニア向け解説】の紹介
今年(2025年)1月に、Udemyに【2025年最新版】Cursorで爆速AIコーディング【フロントエンドエンジニア向け解説】というコースを開設いたしました。
これからAI生成コーディングは常識化するのにコーディング初心者...
CSS 【iOSでは出ないスクロールバー】iPhoneでもカスタムスクロールバーを表示したい！→はい、SimpleBar！
Windows環境では表示される、このようなカスタムスクロールバー。
けっこうがんばって
::-webkit-scrollbar
とか
::-webkit-scrollbar-track
とか、
...
Shopify 【Shopioy】リッチテキストのメタフィールドの出力方法
ブログのリッチテキストのメタフィールド登録はできる、でも表示で壁にぶつかる
ブログ記事に、ブログとは別にリッチテキスト形式でメタフィールドを登録できるようにしましたが、Shopify管理画面上で、ひとまずノーコードでメタフィールド登...
HTML 【スクロールイベントの最適化】”Intersection Observer API”の活用
これまでのjsのaddEventListener('scroll')によるスクロールイベント
Webサイトでスクロールイベントを扱う際、従来のwindow.addEventListener('scroll')メソッドは頻繁に呼び出さ...
FutureShop 【FutureShop】FutureShopの今年のPHPバージョン更新でついでに”WP migration”が使えなくなった件
“All-in-One WP Migration and Backup"とは
“All-in-One WP Migration and Backup"はWordpressの移行や複製を簡単に行うためのプラグインです。このプラグインを...
HTML 日本語の改行位置を自動で判定するjsライブラリBudouX！
はじめに
英語のテキストは、スペースやハイフンなどの手がかりにより、美しく読みやすい改行が可能です。一方、日本語などのCJK言語では、これらの手がかりがないため、適切な改行が難しいという課題がありました。
そこで注目したいのが...
Shopify 【Matrixify】ShopifyのメニューをCSV形式で編集する方法【なにげに助かる】
Shopifyのメニュー（ナビゲーション）管理が、Matrixifyというアプリを使用することでより効率的になりました。このアプリを利用すれば、CSVやExcel形式でメニューをエクスポート/インポートすることが可能になります。以下に、そ...
FutureShop FutureShopのストアを別カートシステムに引越しドメイン変更もするさいのリダイレクト設定について【2024年10月現在情報】
FutureShopのストアを他カートシステムへ引越し（ストア移行）し、ドメイン変更もするさいのリダイレクトについて、このたび実際に現場で行うことになった。そのためFutureShopにも問い合わせながら調査した方法を記載します。
...
未分類 【こんなにある！】ECサイト運営でよく出てくる法律あれこれを再整理
今回は、法律について書きます。普段あまり意識していないけど、よく考えるとECサイトがらみの法律はたくさんあります。
知っているもの、知らないもの、僕自身書きながら「こんなものがあったのか。。」というものもありました。ではまいりましょ...
未分類 【注文テストで使える！】47都道府県の代表郵便番号！【もう検索しなくていいよ！】
めっちゃいいものができました。なんで今まで作らなかったんだろう。
このページをブックマークするか、自分のクラウドノードに転記して使おう！
1北海道札幌市060-00002青森県青森市030-08013岩手県盛岡市020-087...
未分類 【アプリなし】card-product (product-card) が使える閲覧履歴セクションを自作したい！
アプリなしで、閲覧履歴セクションを自作し、card-product (product-card) を使いたい。
これを実現するのが、普通の方法では難しかった。
なぜなら、クッキーなり、ブラウザのlocalStorageに保存し...
未分類 【Shopify】Summer24新機能の不具合の共有【カテゴリーメタフィールド】に注意！！csvインポートもできなくなる不具合あり
Shopify Summer24の新機能で、「カテゴリーメタフィールド」がある。
これに仕様の不具合があり（2024.8.6現在）、Shopifyサポートにもこの不具合を確認いただいたので、確実なソースです。
カテゴリーメタフ...
作業効率化 iOS Safariで楽にスーパーリロード(キャッシュクリア)をする方法【ショートカット作成】
iOSに備わっている純正機能「ショートカット」を使用してiPhone Safariでもツータップでキャッシュをクリアできるようにできます。
未分類 【Vision Pro】レビュー
6/28、予約注文していたApple Vison Proが届き、早速いろいろやってみましたのでレビューを記載します。
バッテリー稼働時間は2時間ほど
Vision ProはiPhoneやMacBookを必要とせず単体動...
Shopify 【Shopify 】チェックアウトページまわりがカスタマイズ可能になった
チェックアウトページのカスタマイズができるようになった
背景に画像を設定することも可能です。
サンキューページと注文状況ページを追加できる
下は上の「サンキューページと注文状況を確認できます」の表示部分をクリ...
Shopify 【Shopify】Judge.meをインストールしたあとに手動で修正すべきところ
Judge.meとは(AIに解説させっぞ！)
Judge.meは、Shopifyストア向けのレビューアプリケーションで、顧客からのレビューやフィードバックを収集、表示、管理するためのアプリです。
主な機能
レビュー収集...
未分類 【非jQueryスライダー】Flickityを設置しても全然動作しないときの確認点【備忘録】
ShopifyでFlickityを設置しても全然動作しなくて時間を無駄にした。いつも原因がまちまちだがこれまで何度も同じようなことをやらかしてしまっているミスのように思ったので、その備忘録。
Flickity公式
今回...
未分類 【爆速コーディング】CursorのCtrl+Kで扱いが大変なJSONコードを一括で修正！【Cursor】
改めて、"Cursor"とは
最初は半信半疑で、全くと言っていいほどVScodeと同じ操作性で、そこにAIによるコード予測やコード生成機能が加わっているなら、くらいの気持ちで昨年末から使っていた"Cursor"。日本では「カーソル」...
Shopify 【Shopify】配送日時指定.ampを導入した際の注意点！
注文完了メールにも配送希望日時が表示されるようにする！
アプリ公式のページでもこの方法は紹介されている。
以下のコードを「通知」内の注文確認メールのテンプレートに設置する。
{% if attributes	...
Shopify 【Shopify】バリエーションボタンを「即納」「受注生産」「SOLD OUT」の３種類で色分けして表示&カートボタンの文言も選んだバリエーションによって自由自在に変更する！
以下の要件を実現するのに、けっこう苦労したので、その備忘録と、同じような苦労を誰かがしそうなときの助けになればと思い記述いたします。
要件
商品詳細ページでバリエーションが「在庫がゼロになっても販売を続ける」としたときにカー...
未分類 【GSAP】ジーサップ！アニメーションを手際よく作成できるライブラリというより関数！（そしてChatGPT）
そうだ！アニメーション界隈にはあいつがいた！（GSAP！）
かねてよりGSAP（ジーサップ）というアニメーション用のJSライブラリがあることは知っていたし、このサイトのトップページのロゴがノイジーに踊っているアニメーションなんかも、...
AI ChatGPTのカスタム設定使ったら神機能だった件
ChatGPTのカスタム設定を使ったら神機能だった。
カスタム設定とは、ひとことで言うと、「前提条件」を毎回言わなくてもいいように記憶させておける機能です。
たとえば、「htmlコードについての情報が知りたい」「Shopify...
作業効率化 【Notionユーザのために】Googleドキュメントでも少しでもNotionっぽく入力する方法
Googleドキュメントを設定変更で、マークダウン記法で入力していける！
MeetやZOOM会議で、リアルタイムで事後も確認できるメモ（議事録）を作成しているときに、スピーディーにキーボード操作のみで、見出しや箇条書きをサクサク入力...
未分類 PWA（プログレッシブWebアプリケーション）とは？
PWAとは？参考になるページをふたつ紹介します。
PWAに対応（スマホのホーム画面にアプリとして保存可能）したWebサイトに行くと、PC環境でもブラウザのアドレスバーのところに、このサイトを保存するかというナビゲーシ...
CSS 【爆速コーディング】Tailwindの本当の使い方まとめ【LPデザインも怖くない】
Tailwind cssについて、Webクリエイターボックスでも利用割合調査のアンケートを行っていましたが、やはりそもそも認知度が低いようです。
今回は、以前にも取り上げた、このTailwind cssが、いったいどんな...
Shopify 【Shopify】ストアのテーマ設定にファビコンを設置しているけど、Shopifyデフォルトでは不足がある件について
前回の記事で書いていて、ふと思い出したことを今回記載します。
タイトルの通り、ストアのテーマ設定でファビコンを設置していても、ShopifyのDawnを含め多くのテーマでは不足があります。
それが、前回記事に登場していた、iP...
Shopify 【Shopify】ブラウザの「戻る」ボタンの機能をWebページ上に実装！(動的にジャンプ先を変更)
「戻る」ボタンとは？
「戻る」ボタンとは？
そうです、今あなたが見ているブラウザの画面内にもある、これです！
Chrome（ダークモード）
Safari（ダークモード）
直前に見ていたページに戻る機能のボタン...
Shopify 【改訂版】メールドメイン認証に「DMARCレコードの取得」を求められた【Shopify】
先週、ストアオーナーあてに こちらのShopify公式ページ のページでも確認できる、
2024年2月1日現在、GmailとYahooでは、ブランドのメールアドレスからお客様にメールを送信するために、ドメインを認証し、DMARCレ...
未分類 APNGで【動画より軽く】、【gifアニメよりも綺麗】なアニメーションをページ上に表示する！
アニメーションを表示できる画像ファイルは、gifの他にpngが登場している
透過画像にはgif以外にpngがあります。
しかし今更ですが、「透過画像」をアニメーションさせたい、という要件があった際に、よく使用されてきた...
未分類 2023年のEC業界、エンジニア界隈トピックス振り返り！
EC業界、エンジニア界隈のみなさま、2023年ももうまもなく終わりですね。今年はどんな一年になったでしょうか？
2023年のEC業界、エンジニア界隈トピックスを振り返ってみたいと思います。
物流2024年問題
「物流の2...
Shopify 【Shopify】SEO最適化アプリのWebrex(ウェブレックス)を調査した！
Webrex: SEO Optimizer & Schemaとは
Shopify アプリ "Webrex: SEO Optimizer & Schema" は、Shopify eコマース ショップにWebサイト構造化...
Shopify 【Shopify】新仕様！チェックアウトページ2023.10.2リリース！
従来のチェックアウトページ
(1)「情報」のページ
配送先住所の入力
(2)「配送」のページ
配送料の確認
(3)「支払い」のページ
クレカなど支払い方法の選択（カード情報入力）...
Shopify 【Shiopify】テーマのカスタマイズ画面でブロックの表示名を入力したテキストにする！
ブロックの表示名を打ち込んだテキストにする方法
自作のセクションを作る際に注意点。
テーマのカスタマイズ画面で、ブロックの表示名は、ちょっとした工夫をしないと以下のようにすべてブロックのnameが表示される。
...
未分類 【一瞬で】Webフォントを使っているとページ表示後に一瞬、既存のフォントが見えてしまう件【解決】
今回は僕自身がずっと野放しにしていた問題を、あまりにあっけなく解決できたことを、自戒の念を込めて書きました。
Shopify 【Shopify】カートページ内商品の同時注文不可設定制御・数量上限制御【アプリ不要！】
「特定の商品群は、カート内の合計金額が〇〇円以上で送料無料」という特典は、多くのECサイトで使われている。
ただし、イレギュラーに「ただしまた別の特定の商品群がカート内にあるときは〇〇円以上で送料無料にしないようにしたい」という要件...
HTML iPhone実機で、テキスト入力フィールドで画面がフォーカス（拡大）されるのを禁止する方法
けっこう前のことだが、iPhoneで、テキスト入力フィールド（inputフィールド）をタップした際に、画面が自動的にズームインしてしまう問題。Webサイト上で、これをどうしたらズームしないようにできるか対処する方法がわからず悩んだ。
...
未分類 【WordPress】テーマのstyle.cssを変更したさいに疑似キャッシュクリアさせ、確実に最新状態を閲覧してもらいたいとき！
Wordpressのテーマのstyle.cssは、header.php内で以下のようなphpで出力されている。
↓ php
<link rel="stylesheet" type="text/css" href="&l...
Shopify 【Shopify】同じページ内に同一のセクションを複数配置し、それぞれ別々のCSSを適用したいときの解決方法
失敗のパターン
Shopifyの新機能「カスタマイズ」画面内の、「セクション」>「カスタムCSS」に記述
これはShopifyの管理画面の実際の表示なのだが、「このセクションのみ。にカスタムスタイルを追加する」と...
Shopify 【Shopify】アカウント系ページのテンプレートをJSON形式にカスタム！
Shopify2.0のテーマでは、ページのテンプレートがJSON形式になったことで、ページ内のセクションと呼ばれる構成要素のひとつひとつを並び替えたり、非表示にしたり、はたまた、新たなセクションを作成して配置することも可能だ。
これ...
HTML 【ハック的手法】特定のテキストをマークアップしているDOM要素があったときのみ処理をするJS
Shopifyで、アプリで生成されるコードで、特定の要素にクラスやIDを指定できず、要素内に表示されるテキスト情報を見て処理をするかしないかを分けたいとき！
このハック的な小技を使えば怖くない！
↓ 例として、すべておなじDO...
Shopify 【Shopify】お客様アカウントのページ（マイページ）の住所入力時の都道府県のプルダウン内の並びを整形！
デフォルト（イケてなさすぎる・・・！）
Shopifyのデフォルトの状態はこちら。
これまで国産のECカートシステムを使っていた方は、これを見て、「ああ、Shopifyヤバいわ・・」と思うことでしょう。
ご安心を！これは...
liquid 【Shopify】オブジェクト出力で”〇〇Drop”と表示されたときのプロパティの確認方法
"〇〇Drop"と表示されたが、これは何？
Shopifyのオブジェクト出力で、
"〇〇Drop"と表示されるのを見たことがないだろうか。
例えば、一つ前の記事で紹介したvideoのtypeに登録したschemaをliq...
Shopify 2024.1.10最新情報追記！）【Shopify】テーマの「カスタマイズ」に動画ファイル用のschema typeが追加されていた件！
Shopifyのストアを運用していた方なら、一度は話題に上がったことがあると思うのだが、
ページ内に動画コンテンツを表示させたいとき、これまではShopifyのテーマの仕様では、
"YouTube動画"か"Vimeo"の動画リ...
Googleスプレッドシート 【スプレッドシート効率化】常にデータの最終行へ飛ぶリンクボタンを設置！
スプレッドシートは便利ですが、長い期間同じシート上で運用をしていると、行数が膨大な量になります。
行数が10,000行を超えていくと、データの最終行や、特定の行までのジャンプをワンクリックでできると、更新情報の確認やデータの追加時に...
ShopifyでのECサイト制作を行うならPRYTHMWORKS（プリズムワークス）へ
ShopifyでのECサイト制作を外注しようとお考えの方は、PRYTHMWORKS（プリズムワークス）にご依頼ください。高品質なWebサイト制作で、お客様のビジネス成長を支援する会社です。Shopifyを使ったECサイト制作に力を入れており、売上向上に貢献するECサイト構築を代行いたします。豊富な経験と実績にもとづき、お客様のニーズに最適なECサイトを構築しますので、費用相場や制作事例など、気になることがございましたらお気軽にお問い合わせください。移行のご相談も承っております。
| 社名 | 合同会社PRYTHMWORKS |
|---|---|
| 事業内容 | EC/Webサイトの構築、管理保守 |
| CEO | 吉川直人 |
| 法人事務所所在地 | 〒150-0001 東京都渋谷区神宮前六丁目２３番４号桑野ビル２階 |
| 設立日 | 2023年(令和５年)７月３日 |
| 沿革 | 2020年(令和２年)１０月 PRYTHMWORKS事業開始 2023年(令和５年)７月 合同会社PRYTHMWORKS設立 |
お問い合わせ用LINEはこちらからどうぞ！
お問い合わせ用LINEはこちらからどうぞ！
LINE