注目のストーリー
All posts
【Panzoom】ピンチインピンチアウトで拡大縮小を実装
先日手がけたサイトにて「スマートフォンレイアウト時は地図をピンチインピンチアウトで拡大縮小してほしい」という要望をいただき実装したので使用したパッケージのお話をしようと思います。Panzoomパッケージ割と直球そのままなパッケージ名ですが、panのほうが移動、zoomが拡大縮小ですね。撮影用語でカメラ位置を固定し水平に振るカメラワークをパンといいますが、そのパンです。公式サンプルサイトhttps://timmywil.com/panzoom/demo/サンプルサイト右上アイコンからGitHubのリポジトリにもアクセスできます。これから記載する導入方法もリポジトリのreadmeに書かれてい...
【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のル...
【Wireframe】新人ディレクターがワイヤーフレーム作ってみた
フロントエンドエンジニアからディレクターにジョブチェンして数日後のある日、とある案件にアサインされ、ワイヤーフレームを作成することになりました。ということで、実際にワイヤーフレームを作成してみて気づいたことや注意した方が良かった点についてお話していこうと思います！▶ワイヤーフレーム（WF）とは？Webページのレイアウトやコンテンツの配置を定めたサイトの骨格・情報の設計図のようなものです。一般的にディレクターが要件定義をした後、デザインに着手する前に作成します。▶実際にワイヤーフレームを作成してみた①サイトのコンセプトや目的を整理するこのサイトを作成することでどのような効果を狙っているのか...
SelectBoxのキーボード操作を再現してみた
この前、JSのある実装に少してこずったのでそちらについて紹介したいと思います。multiple属性で複数選択可能にしたselectの選択移動をキーボード操作で行うというものです。「そんなのデフォルトで、方向キーで移動できるよ」と思いますが、デフォルトでは上方向キー(↑)と下方向キー(↓)でしか、選択移動できなかったので今回の実装では、左方向キー(←)と右方向キー(→)でも上記と同じ操作ができるようにしました。まずはざっくり準備※今回の記事はReactでの説明になります。キーボード操作のイベントハンドラを記述するために以下のように準備します。DOMへの参照をrefで行い、onkeyDown...
【Laravel】ダミーデータ作成（factory）でよく使うfaker一覧
Laravelの標準ライブラリであるfactoryとphpのライブラリのfakerを使用すれば、大量の異なる内容のダミーデータを簡単に作成することができます。fakerのメソッドは大量にあるのですが、個人的によく使うものを紹介します！ダミーデータ作成の準備まずはダミーデータを作成するための環境を作ります。記事のダミーデータを作成するという前提で進めていきます。ダミーデータを日本語化するための「config\app.php」ファイルの言語設定を英語から日本語へ変更をします。'faker_locale' => env('APP_FAKER_LOCALE', 'ja_JP'),キャッシュのクリ...
Spaces
