注目のストーリー
すべてのストーリー
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'),キャッシュのクリ...
【Python】ほぼコピペで作れる！discord.pyでおやすみBot を作ってみた
もう寝るつもりだったのに、友達とのおしゃべりが楽しくてついつい長話をしてしまう…皆さんそんな経験を１度はしたことがあるのではないでしょうか？（あると信じてます）自制したいけど楽しくてなかなかやめられない…意思もよわよわなのでやめられない…なのでプログラムに頼ることにしました。今回はどれだけ会話が盛り上がっていても、設定した時間になったら強制的に通話を終了させるBotをdiscord.pyで作成しました。--Pythonを書く前に--Botの作成についてはこちらの記事をご参照ください。チャンネルIDを取得まずBotを使用するサーバーのチャンネルIDを取得します。このIDを使用してユーザーを...
【Swiper】サムネイルのマウスホバーとスライダーを連動させてみた
さて今回は、メインのスライダーとサムネイルがあるデザインで、サムネイルをホバーするとメインのスライドが切り替わるようにします。swiperのメソッドを使用してシンプルに実装できるので、是非使ってみてください！基本の連動するスライダーを作成まずは基本となるスライダーを作成します。この状態では、クリックで連動します。thumbsでサムネイルにしたいスライダーのインスタンス名thumbnailSwiperを指定すると、2つのスライダーが連動するようになります。thumbs: { swiper: thumbnailSwiper}メインスライダーのコードをサムネイルにしたいスライダーの前に書くと...
ExpressとPrismaでAPIを作ってみた
はじめにバックエンドでLaravelを使って画面込みでシステムを作ることが多かったのですが、最近はフロントエンドはVue.js、ReactでバックエンドはAPIのみという案件も増えているのでLaravelに拘らなくてもいいかなと思うこともあり、他のフレームワークを探したところ、フロントエンドで使われるNode.jsやTypeScriptに相性の良さそうなExpressとPrismaがあったので使ってみました。ExpressはNode.jsで動作するWebフレームワークで、PrismaはNode.jsで動作するORMです。Prismaを入れるではまず、Prismaをインストールして、データ...
手書き署名プラグイン『jSignature』を使ってみた！
皆さん誰しも携帯ショップの契約などの場面で、タブレットに指やタッチペンでサインを書いた経験が一度はあるのではないのでしょうか。今回はそんな直筆サインをブラウザ上で手軽に実装できるjQueryプラグイン『jSignature』をご紹介したいと思います。jSignatureでできること冒頭で触れたとおり、jSignatureは手書きの署名をブラウザ上で実装する上で非常に便利なプラグインです。私の場合は、記載事項に同意のうえサインしてもらう項目をフォームに実装する際に利用しました。以下のような主要なメソッドが提供されており、簡単なものであればほんの数行で実装できます。reset：サイン領域をク...
【Python】Pylanceを使ってPythonをより安全に！
1. はじめにさて、今回のテーマなのですが、ズバリ Python の型についてです！！Python 標準ではタイプアノテーションという「ここはこの型だよ～」くらいの意味合いしかないメモ書きを残すことができます。各種エディタの拡張機能やライブラリを導入することで、より厳密に型を定義することができます。今回はそんな拡張機能の１つ「Pylance」を使ってみようと思います！2. 例こんな感じでよくある足し算をするだけのプログラムを作ってみました。これを実行してみると・・・まあもちろん結果は期待通りですね！ただこの状態だと関数に対して一体どのような型の変数を渡して、どのような型の戻り値を返すのか...
