← カテゴリー一覧に戻る
カテゴリ

技術情報 (ページ 3)

技術メモ

Cloudinary 概要

Cloudinaryは、画像や動画などのメディアアセットの管理、最適化、配信を一元的に行えるクラウドベースのデジタルアセット管理( DAM )サービスです。開発者やマーケターは、アップロードから変換、圧縮、リサイズ、フォーマット変換、CDNによる高速配信まで、コードやUIを通じて簡単に操作できます。

技術メモ

構造化メタデータのフィールドの設定

Cloudinaryでは、アップロードした画像や動画に対してメタデータとして説明情報を登録することができます。このメタデータにはタイトル、キャプション、タグ、カスタムフィールドなどを設定でき、これにより大量のアセットの中から目的のファイルを素早く検索・特定できるようになります。長期的な運用では、管理対象のアセットが増えるにつれて検索性が重要になるため、メタデータの活用は作業効率の向上に大きく貢献します。

技術メモ

最初のアセットをアップロード

Cloudinaryでは、ローカルデバイス、URL、画像検索など、さまざまなソースから1枚または複数の画像を簡単にアップロードできます。たとえば、自分のパソコンやスマートフォン内の写真はもちろん、ウェブ上の画像URLや外部サービスを指定して直接取り込むことも可能です。このページではアセットのアップロードの基本的な手順を確認します。

技術メモ

ロゴの透かし画像

最初のステップとしてロゴをアップロードして、画像に対してウォーターマークを設定する設定を追加します。この手順を学ぶことで、画像に関して毎回同じ処理をするような変換に関する動作を理解することができます。

技術メモ

Next.js サイトでの多言語化

Next.js を利用したサイトにおいて、多言語サイトを展開する際のポイントをこの記事ではまとめておきます。

技術メモ

Playwright を展開する

Playwright は、Microsoft によって開発されたオープンソースのエンドツーエンドテスト自動化フレームワークです。複数のブラウザ(Chromium、Firefox、WebKit)をサポートし、高速で信頼性の高いテストを実行できます。Playwright は、クロスブラウザテスト、スクリーンショット、PDF 生成など、多くの機能を提供します。

技術メモ

Auth0 の活用

実際の Web サイトにて会員向け情報提供などを展開するにあたって、ログイン認証の仕組みを組み合わせてサイトを運用していくことがあります。ここでは、Auth0 の利用方法に関して紹介をしていきます。

技術メモ

Next.js + Tailwind CSS + shadcn/ui

最近話題の、UI コンポーネントの shadcn/ui をこのドキュメントでは評価していきます。shadcn/ui は、UI コンポーネントライブラリとして提供されており、npm パッケージとして提供する形ではないため、使いやすく、カスタマイズ可能なコンポーネントが豊富に揃っています。

技術メモ

Google Tag Manager の追加

Web サイトを運営する際には、様々なツールを活用することが求められます。これらのツールを利用する際には、Meta データや JavaScript をサイトに適用する必要が生じることがあります。もちろん、CMS を使用して管理することも可能ですが、Google Tag Manager のような汎用的なツールを利用することで、より柔軟かつ効率的な運用が実現できます。

技術メモ

Google Maps Library

Google は 2024年5月21日に、Google Maps Platform 向けの React ライブラリをリリースしました。