EC-CUBE4とWordPressを連携して、パーツを共通化する方法

こちらの記事ではEC-CUBE4のヘッダーやフッターなどのパーツを、WordPressで呼び出す方法の解説をします。EC-CUBE4やWordPressのインストールされている前提で解説させていただきます。構築環境・EC-CUBEバージョン・・・4.2.1インストールディレクトリ・・・https://hoge.com/・WordPressバージョン・・・6.7インストールディレクトリ・・・https://hoge.com/blog/「https://hoge.com/」はご自身の構築環境に合わせて、解説をご確認ください。１．EC-CUBEでヘッダーなどの共通パーツの作成① EC-CUBE...

【Astro】Astro × microCMSで実現する静的サイト制作

Astroについてまず前提として今回作成依頼を受けたのが、静的サイトとなります。Astroは基本的にSSG（Static Site Generation）で構築され、ビルド時にサーバー側で生成されたHTMLだけをクライアントに返します。つまり、無駄なJavaScriptをクライアントで読み込む必要がなく、ビュアーの環境に依存しない軽量なサイトを作成することができます。また、AstroはMPA（マルチページアプリケーション）を採用しているため、ページごとに独立した HTML が生成されます。この仕組みにより、ページ間の依存関係が少なく、SEOに強く、個々のページがシンプルで高速に表示される...

新卒0年目で部長になった話。～Part6～

入社して3カ月、地道に研修を進めているのですが、実務を想定して様々なことに挑戦させていただいています！ ウェブの基礎的な知識のインプットだけでなく、実際にいくつかアプリを制作して、最近はこだわりkintoneのプラグイン開発までさせていただきやりがいのある毎日を過ごしています。 そんな私の、去年のお話です。ある日、PR部長から突然の呼び出しが……PR部長からの呼び出し。いつものように出社したある日、突然、PR部長のガッシュさんから「1時間ほど少し相談を！」と呼び出しを受けました。 詳細はわからなかったので、不安を抱えつつ会議室へ…… 刹那、ざきに電流走る…！「次期PR部長をお任せできたら...

【Panzoom】ピンチインピンチアウトで拡大縮小を実装

先日手がけたサイトにて「スマートフォンレイアウト時は地図をピンチインピンチアウトで拡大縮小してほしい」という要望をいただき実装したので使用したパッケージのお話をしようと思います。Panzoomパッケージ割と直球そのままなパッケージ名ですが、panのほうが移動、zoomが拡大縮小ですね。撮影用語でカメラ位置を固定し水平に振るカメラワークをパンといいますが、そのパンです。公式サンプルサイトhttps://timmywil.com/panzoom/demo/サンプルサイト右上アイコンからGitHubのリポジトリにもアクセスできます。これから記載する導入方法もリポジトリのreadmeに書かれてい...

2025年度　ロジカルスタジオ入社式を開催しました　～新たな一歩を踏み出そう～

今回の入社式の特徴昨年の入社式の様子はこちらから ↓入社式開始！ 最後に↓一緒にロジカルスタジオで働いてみませんか？↓

【Swiper】流れ続けるモーダルスライダー〜矢印操作とモーダル開閉制御〜

さて、Swiperで無限に流れ続けるモーダルスライダーを作りたい！でも・・・モーダルを開いたらスライダーが止まってほしい・・・！しかも！閉じたあとに“どこにいたっけ？”ってならずに、ちゃんと開いた場所から再開したい！さらに！！見たいコンテンツの位置にスムーズに移動できたら最高！そんな理想のスライダーを実装してみましたDEMOさっそく完成版はこちらです。※Swiperの基本的な実装方法については省略します。本記事では、無限ループ＋モーダル連携にフォーカスして解説します※本記事では簡易的なモーダルを使用しています。必要に応じて、デザインや挙動を自由にカスタマイズしてください！コードの説明基本...

レスポンシブデザインの制作時間を短縮！Figmaバリアブル機能の活用法

限りあるリソース時間でより良いデザインを作るには？デザインをする上で重要なことは目的を達成するためにどれだけの選択肢を考えられるかその中で最適解を選べられるか、だと考えますなにより、デザインの力を発揮させるためにはみんなのデザインである必要がありますみんなでより良い選択をするためにコンセプトなど、共通認識となる軸をみんなで持つこともポイントですそのために！短縮できる時間は短く！思考の時間や、コンセプト・デザインを言葉にする時間をできる限り増やしたい！ということで、今回はFigmaのバリアブル機能を使った、時間短縮の例をご紹介します！はじめに…バリアブル機能って？バリアブルは現在オープンベ...

コーダー・エンジニアの強い味方・生成AI　～便利な使い方～

私事ですが、幼少期より画像ロゴドット絵ゲーム音楽ウェブサイト（この経験が、現職につながっています）など、様々なものを作ってきました。そして、前回記事から今までの間に本格的に創作活動を始めました。各々の心に宿る美意識を具現化する、素晴らしい行為である創作。しかし創作物を作る上で、本筋とは関係ないものも作らなければならないことがよくあります。例えばCDのジャケット画像紹介動画のBGMまた本筋の中でも、人によっては「ここ、できればやりたくないな・・・」という点があるかと思います。例えばデッサン（私はこれでイラストを諦めました）レコーディング従来は、我慢して自力で作るなり、人にお金を払って頼むな...

【kintone】関連レコードの値を取得してフィールドに反映する方法を検証！

さて、最近の私はというと、kintone案件に勤しむ日々を送っています。そんな中、「関連レコード一覧にある値を文字列フィールドにも反映できたら便利なのでは？」と思い立ち、JavaScriptでカスタマイズができるか検証してみました。今回は検証結果について書いていけたらなと思います！そもそも「関連レコード一覧」って？kintoneには「関連レコード一覧」という便利なフィールドがあります。このフィールドをアプリに配置すると、設定した条件に合致するレコードを一覧表示できます。特に便利なのは、別のアプリから情報を引っ張ってこれる点！例えば、入居者情報は入居者管理アプリ、賃貸契約情報は契約管理アプ...

JavaScriptで左から順番にフェードインさせる方法

画像やリスト、カードの表示などで使えるかなと思います。調べると似たような記事もありますが、こちらはメインのフェードインにkeyframesを使用していないため、keyframesを別途付けたい場合におすすめです今回は真ん中のロージーにkeyframesを当ててみました。では先にコードをどうぞ！JS・CSSを順番に解説していきますJSの解説補足CSSの解説最後にところでJSの解説document.addEventListener('DOMContentLoaded', function() { //クラス名がfadeinの要素をすべて取得して変数に格納 var fadein = doc...

【Vite×React】Vite PWAでらくらくPWA環境構築

さて、今回はVite×ReactでPWAの環境を作ってみようと思います。PWAとは？環境構築構築手順スマホ実機で確認してみるおわりPWAとは？簡単に言うとWebサイトをネイティブアプリっぽく利用するための技術です。プッシュ通知や、オフライン下でのアプリ利用を可能にします。過去に弊社ブログでPWAについて取り上げた記事がありますので、詳しくはこちらをご覧ください！環境構築PWA環境を作ろうと思ってネットで調べるとまずはベースのプロジェクト作って、PWAのプラグイン入れて、アイコン複数サイズ用意して、manifestファイル用意して、configいじって・・・・・・って感じの記事が出てきて、...

【React】useSyncExternalStoreでlocalStorageの値をuseStateライクに扱う

React18で追加されたuseSyncExternalStoreというhookを使って、localStorageのデータ取得、更新を行ってみたいと思います。useSyncExternalStoreの概要ゴールの確認useLocalStorageを作っていく型と雛形作成第一引数（subscribe）第二、第三引数（スナップショットを返す関数）setterを作る完成おわりにuseSyncExternalStoreの概要イメージ的には、外部ストアの値を取得しつつ、変更を加えればそれを検知してReactが再レンダリングしてくれるといった機能です。例えば、useSyncExternalStore...

VScodeの拡張機能REST ClientでHTTPリクエストを簡単に送信

ロジカルスタジオでは、8、9月に学生さん向けにお仕事体験を開催しました。多くの学生さんにご参加いただきました。ご参加いただいた方はありがとうございました！さて、お仕事体験の際に使用したVisual Studio Code(以下VScode)の拡張機能である『REST Client』が、便利でしたので、本稿ではRESC Clientを使ってみたという内容になっています！REST ClientとはVScode内で直接、HTTPリクエストの送信やそのレスポンスを確認することができるものです。作成したAPIがしっかりと機能するかのテストを簡単に行うことができます。どのように使用するのかを説明して...

Three.jsで簡単な動き地球を作ってみた

さて、今回はThree.jsを使って動くページを作成してみたいと思います。基本的なテンプレートを設定地球のメッシュを作成SphereGeometryを作成し、カメラの位置とレンダリングを設定地球のマテリアルを作成画面が見えるように光も追加地球のテクスチャを作成雲層を追加大気圏を追加星空の背景を追加おわりに基本的なテンプレートを設定// HTML-Three.js ライブラリの読み込みsrc="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"// CSS-画面全体のレイアウト設定body { margin...

【kintone/krewData】krewDataの出力アプリ設定で「値の重複を禁止するが有効になっている必要があります」とエラーが出る場合の解決法

今回は、最近案件で使用していたkrewData（kintoneプラグイン）についてお話をしたいと思います。目次 [非表示]krewDataとは発生した現象どうしようもないので公式に問い合わせ仕方がないので妥協案を考える最後にkrewDataとは今kintoneプラグインの一種で、アプリのデータはもちろん、外部ファイルなどからもデータを取得し、集計・計算・出力などを行うことができます。KrewData公式サイトはこちら発生した現象アプリA、B、Cがあります。アプリAにある数値フィールドをアプリBのルックアップフィールドでキーとして参照しており、さらにそのルックアップフィールドをアプリCのル...