Backend Team Monthly vol.2【 Laravel 】

弊ロジカルスタジオでは、エンジニアの業務ごとにチームに分かれて活動しています。 バックエンドチームでは、活動の一環としてMonthlyを発信しています！日々の業務でぶち当たったことや疑問に思ったこと、調べたことをベースに、 自己学習やたまたま見かけた面白い情報なども交えながら、情報共有できればと思っています。前回の記事はこちらになります。よろしければ併せてご覧ください！目次 [非表示]１．【Laravel】モデルのcasts()を使うとデータアクセス時に自動型変換してくれて便利２．【Laravel】可読性を向上！ルーティングの小技①ルートパラメータに制約を付ける②ルート名を共通化する３．...

【WordPress】保守に強い子テーマ 〜壊れても困らない構成術〜

こんにちは。新卒入社半年、WordPress の実務にも触り始めたばかりの新人エンジニアです。といった感じで、当時の私は「とりあえず動けばいいでしょ」という感覚でした。CSS は「追加CSS」で上書き！PHP は functions.php に追記すれば良さそう？プラグインの動きを少し変えたいときは、コードの一部を書き換えれば済むじゃん！今振り返ると、かなり危うい考え方だったと思います。当然、上司にこう聞かれることになります。「このまま自動アップデートしても壊れない？」「保守の観点は？」その瞬間に気づいたのは、動くことと保守できることは別 だということでした。そこで私は、スニペットを散ら...

グラデーションアニメーションも！？CSS変数の便利な使い方～CSSとJavaScriptの橋渡し～

前回書いたAI活用の記事から約1年、なんとChatGPTでも画像生成ができるようになっています。やはり対話形式で画像に変更を加えられるというのは非常に便利なもので、私も有料会員になり、存分に画像生成を楽しんでいます。最近だとガラスで出来たフルーツを包丁でカットする動画といった、現実では実現不可能なことを行う動画も作れるAIツールなども登場し・・・日進月歩なAIツールに、創作活動を行う者として大きな期待と夢とロマンを抱くと同時に「知らないうちに便利なツールを見逃して、時代に取り残されたらどうしよ」と若干びびっている今日このごろです。 さて、見逃しているかもしれないものはAIツールに限らない...

Backend Team Monthly vol.1【 React / Docker / PowerCMS X / kintone / VSCode 】

弊ロジカルスタジオでは、エンジニアの業務ごとにチームに分かれて活動しています。 バックエンドチームでは、活動の一環としてMonthlyを発信しています！日々の業務でぶち当たったことや疑問に思ったこと、調べたことをベースに、 自己学習やたまたま見かけた面白い情報なども交えながら、情報共有できればと思っています。今月からこちらのブログにて紹介いたしますので、 ぜひご覧ください！１．【React】Kintoneの全アプリ情報を取得する方法kintoneでは複数のアプリを取得することができる「kintone REST API（参照）」が用意されています。ただし、このAPIで一度に取得できるアプリ...

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いじって・・・・・・って感じの記事が出てきて、...