バックエンドとフロントエンドのホスト、ポートが違う場合にアクセスするとCORSエラーとなります。
この場合、バックエンド側でCORS対策をする必要があり、「Laravel/Lumen」でCORS対策する方法をまとめました。
Laravel
【Laravel】CORSの許可設定を行う
Web開発
Laravel
「lumen」でWebAPIを開発する
WebAPIなどの複雑な処理をしない開発の場合は「Laravel」よりも「lumen」を使用した方が良いかとおもいます。
「Laravel」から最低限の機能だけにした「lumen」は軽量で処理も早くなります。
Next.js
「Next.js(React) + GSAP」でアニメーションを実装する
Webページでアニメーションを使用する場合は、便利なライブラリ「GSAP」を使用しております。
またスクロール時にアニメーション表示する場合は、「ScrollTrigger」と組み合わせて使用すると楽に実装できます。
Next.js
Next.js + Materialデザインで、簡単に確認ダイアログを実装する(material-ui-confirm)
「React」で「MUI」を使用したプロジェクトで、確認ダイアログを表示する場合、「material-ui-confirm」を使うと便利です。
通常のJavaScriptの確認ダイアログのように処理を実装する事ができます。
Next.js
Nextjs + MUI で開発を行う(非SSR)
「Next.js」でマテリアルUIを使ってアプリを作成したい場合は「MUI」というライブラリを使用するのが手っ取り早いです。
今回は「MUI」とマテリアルデザインのアイコンを表示する「icons-material」の導入方法をまとめます。
Next.js
Next.jsでSassを使用する
Webで「css」を開発する場合は「Sass」を使用して開発すると記述が楽に行えます。
今回は「Next.js」で「Sass」を導入する内容をまとめました。
導入自体は簡単に行えます。
LINE
「Create LIFF App」でLIFFアプリの開発環境を構築
「LIFF」アプリの開発入門となります。
今回は「LINE」が用意した「Create LIFF App」というツールを使用して、「Next.js + TypeScript」の環境で「LIFF」アプリの開発環境を構築しましょう。
LINE
「LIFF」アプリの開発入門 (Next.jsで構築)
「LIFF」アプリの開発入門についてまとめました。
公式はVanillaJSでのサンプルを使用してましたが、この記事ではNext.jsを使用したビルドを行なっております。
LINE
「LIFF」アプリの開発入門 (LINE Developersアカウント作成)
LINE上で動作するアプリ「LIFF」アプリについて導入までを解説します。
LIFFアプリは申請などもなく気軽に導入出来るアプリで、店舗の予約やメニュー注文などで使われることがあります。
Laravel
[Laravel]「laravel-ide-helper」でコード補完をする
Laravelでの開発時に「PhpStorm」で開発しますが、「laravel-ide-helper」と「doctrine/dbal」を使用することで、強力なコード補完が行えるようになります。
これらを導入して楽に実装しましょう！