フロントサイド

どうもシローです。久しぶりの投稿となりますが、相変わらずエンジニアとして開発ライフを送っております。 最近はフロントエンドの開発に携わることが多く、多くの現場でコミット前にeslintでコードチェック ...

どうも、シローです。 アプリケーションではユーザの認証機能が必要になることが多いです。 認証にはサーバサイドとフロントサイドのそれぞれの担当があり、主にフロントサイドでは 認証済みのユーザを取得したり ...

どうも、シローです。 今回はフロントサイドをNext.jsで実装し、LaravelをAPIサーバのみとして利用する場合、 認証部分はLaravel Sanctumを使うと良いよという内容です。 Lar ...

ご無沙汰してます、シローです。 最近はフロントサイドの開発がメインになってます。 今回は、Next.jsにAnt Designを導入し、デフォルトテーマのカスタマイズが可能な環境の構築手順について紹介 ...

シローです。 今回はNext.jsのバージョン12を立ち上げてNginx経由のリバースプロキシでアクセスを振り分けているときに 気をつけるようにしたポイントをお話しします。 何が起きたか・・hot r ...

どうも、シローです。 GoogleMapAPIでは「場所を入力すれば、緯度経度が取れる」 TwitterAPIでは「緯度経度があれば、周辺の投稿を取得できる」 （僕）「あれ？二つを組み合わせれば、場所 ...

どうも、シローです。 最近、Reactの勉強が捗ってます。 今までサーバサイドの実装がメインでしたが、React.jsはコンポーネントをクラス化して組み合わせていく感覚が楽しいですw それで今回はim ...

今回は、React.jsのアプリにGoogleMapのGeocodingAPIを組み込む手順を紹介します。 前提 Reactアプリはnpx create-react-appで作成したものとする。&nb ...

現在React.jsを勉強中でして、今回はこのような物を作成しました。 https://shiro-secret-base.com/wp-content/uploads/2021/02/0ba4h-3 ...

最近はheroku+nuxt.jsで個人サービスを作ってました。 サービス構成図 HerokuでNuxtをホスティングする OAuth、DB、ファイルストレージはFirebaseにする Nuxt.js ...

今回はいろんなアニメーションを簡単に実現するAnimate.cssを使って見ようと思います。 Animate.cssとは Animate.cssはフェードインやスライドインといったCSSのアニメーショ ...

どうも、シローです。 今回はメガナビゲーションの作り方についてまとめました。 メガナビゲーションとは メガナビゲーションとはマウスでカーソルを合わせたときに、下にさらに要素が表示される、ちょっと凝った ...

どうも、シローです。 Webサイトで必ずといってあるナビゲーションメニューの作り方を今回はまとめようと思います。 ヘッダーナビゲーションの作り方 ヘッダーナビゲーションはサイトの上の方に横一列で配置さ ...

どうもシローです。 今回は、UIの要素であるボタンを色々な方法で作成してみようと思います。 CSSのみで作成する シンプルにCSSのみで作成する方法です。 擬似要素：hover, activeを使って ...

WebサイトをPC用とスマホ用でレイアウトを別々にするときの僕なりの方法をまとめます。 HTML内にPC用、SP用のDOMを構築 以下のように、PC用のDOMとSP用のDOMを用意します。 [cray ...

vertical-alignは主にインラインボックス内で画像の高さを文字の高さに合わせたり、 テーブル内の文字の位置を調整するために使われる。 テーブルのサンプルコード   HTML [cr ...

おしゃれなウェブサイトって、だいたいスクロールでナビゲーションが移動したりしますよね。僕のこのサイトもそういうおしゃれな事がしたい！っということで、jQuery+CSSでスクロールによってナビゲーショ ...