Tech Magazine｜Web制作プラスジャムのなかやすみ

Deployment Protectionのすすめ

こんにちは、フロントエンドエンジニアのカネコです。 web開発の世界では、デプロイメント環境のセキュリティは非常に重要です。スタートアップであれ大企業であれ、セキュリティ侵害は重大な損害とコストをもたらす可能性があります。 Vercelは、このようなリスクを軽減するために「Deployment Protection」機能を提供しています。2022年12月19日に導入されました。この記事では、VercelのDeployment Protectionがどのように機能するか、そし

【OpenAPI】Prismでモックサーバーを構築

はじめに今回はOpenAPIの仕様をもとに簡単にモックサーバーを構築できるPrismを試してみます。以前、Visual Studio CodeにOpenAPI (Swagger) Editorを入れてYAMLを書く記事を公開しましたが、実際のプロジェクトではモックサーバーが必要になるケースが多いはずなので参考にしてみてください。この記事ではテスト用のAPIの用意とPrismのインストール、動作確認まで行います。バージョン情報テスト用のAPI今回は動作確認のため、

Fuse.jsで爆速検索を手に入れろ

こんにちは、フロントエンドエンジニアのカネコです。日々の開発業務の中で、UI/UXの向上にも注力しています。今回は、Webサイトにおけるユーザー体験の重要な一環である「検索機能」に焦点を当て、その実装にFuse.js(https://www.fusejs.io/)という強力なライブラリをご紹介したいと思います。 Fuse.jsの導入 Fuse.jsをプロジェクトに導入する最初のステップは、npmを使用してパッケージをインストールすることです。コマンドラインで以下のコマ

Visual Studio CodeでOpenAPI (Swagger) Editorを使用

はじめに今回はVisual Studio CodeでOpenAPIを利用する手順を簡単に紹介しようと思います。Swagger Editor（https://editor.swagger.io/）も利用できますが、ローカルで作業してバージョン管理に組み込みたかったのでOpenAPI (Swagger) Editorを導入してみました。 OpenAPIとはOpenAPIはRESTful APIの仕様を記述するフォーマットのことをいいます。YAMLかJSON形式で記述します。決

Localでrootの変更を行いたい

こんにちは、フロントエンドエンジニアのカネコです。 Local by Flywheel（現在は「Local」として知られている）は、WordPressのローカル開発を簡素化するツールです。 Localを使用して、デフォルトのWordPressインストールディレクトリ（通常は/app/public/）からカスタムディレクトリに変更する方法を詳しく解説します。この変更は、プロジェクトの要件に合わせたカスタマイズに役立ちます。 Localにおけるデフォルトディレクトリ構造 L

【DB設計】正規化とは？第１〜３正規形まで解説

最近業務でもデータベースの設計を行うことが増えてきましたが、ほとんど経験則的にやっているところがあったので、頭の中を整理するためにも改めて正規化についてまとめて言語化してみようと思います。またこの記事では、一般的にここまで抑えれば問題ないとされる第３正規形まで扱います。正規化について正規化とはデータベース設計のプロセスで、データの重複を最小限に抑え、データの整合性と効率性を向上させるための手法です。正規化は、関連性のあるデータを適切にグループ化し、データの不要な繰り返

【Instagram graph API】そのアクセストークン誰が発行してる？

こんにちは、フロントエンドエンジニアのカネコです。 Webサイトを作るとき、私たちはよくInstagramのようなソーシャルメディアの投稿や、Adobeフォントなど、外部からのリソースやサービスを取り入れます。これらはサイトを魅力的に見せる大切な要素です。でも、このプロセスで簡単に見落としてしまうのが、これらのトークンを誰が発行すべきか、ということ。つまり、正しい所有者がしっかりと管理することが、とても重要になります。 Instagram graph APIの場合✖ Fac

【ChatGPTで時短】エクセルデータを効率的にJSONに変換

はじめにこんにちは、フロントエンドエンジニアのカネコです。デジタル化が進む現代において、データの取り扱いは日々の業務において不可欠な要素となっています。特に大量のデータを扱う際、効率的なデータ処理は時間の節約と作業の効率化に直結します。多くの企業や個人が直面する一つの大きな課題は、大規模なデータセットを迅速かつ正確に処理することです。従来の手作業によるデータ入力や変換は、時間がかかるだけでなく、エラーのリスクも伴います。これを解決するために、エクセルデータから必要な情

【 Vercel x Next.js 】Basic認証のススメ

はじめにはじめまして、フロントエンドエンジニアのカネコです。今回は、VercelとNext.jsを用いたウェブアプリケーションにBasic認証を追加する方法について説明します。この設定は開発、プレビュー、そして本番環境を切り替えることで、環境ごとに異なる認証要件を柔軟に適用できます。環境変数の設定Vercelでの環境変数の設定は、プロジェクトの Settings > Environment Variables で行います。 BASIC_IDとBASIC_PWDという名

【Laravel】リアルタイムのチャットを実装💬

LaravelのBroadcast、Pusher、およびLaravel Echoを使用することで、リアルタイムなチャット機能を簡単に実装することができます。この記事では、セットアップからチャット機能の実装、その後の機能拡張までの手順を解説します。ご自身のWebサービスでユーザーとのリアルタイムなコミュニケーションを実現したい方は是非参考にしてみてください。 1. はじめにWebアプリケーションにリアルタイムなチャット機能を組み込む際、まず第一にサードパーティ製の便利なチャッ

【Laravel】Log Viewerでログファイルを可視化して運用を効率化

Laravelを本番環境で運用している際、ログファイルを確認する作業（特定のログの検索や、そもそもログファイルを見に行くという行為自体）を効率化できないかと思いまして色々と探してみたら、なかなか良さげなパッケージがあったので試してみました。 Log Viewerについてstorage/logs配下のログファイルをブラウザ上に可視化するパッケージです。公式：https://log-viewer.opcodes.io/ GitHub：https://github.com/o

【microCMS】Flutterアプリの強制アップデートをmicroCMSで実現

はじめにスマホアプリ開発では、サポートバージョンを変更したい時などに強制アップデートを実装することがあります。 Flutterでの強制アップデートをググってみると、Firebase Remote Configで実装されているケースが多いように見受けられます。（かくいう自分も個人開発でFlutterアプリをリリースした際は、Firebase Remote Configで強制アップデートを実装しました。）なので今回は、microCMSを使ってFlutterアプリの強制アッ

【業務効率化】回答によって自動返信のメール内容を変えるGoogleフォームを作成

はじめにこの記事では、Google Apps Script（以下、GAS）を使用して確認メールを自動返信するGoogleフォームを作成してみたいと思います。通常の確認メールであればGoogleフォームの「回答のコピーを送信」する機能で実現できますので、この記事では「フォームの回答内容に応じて返信内容を変える機能」を実装していきます。実現したいこと架空のイベントの運営者として、イベント参加申し込みを受け付けるためのGoogleフォームを作成すると想定して作業を進めます。

Tech Magazine

記事一覧