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

技術情報 (ページ 3)

技術メモ

Cloudinary 概要

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

技術メモ

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

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

技術メモ

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

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

技術メモ

ロゴの透かし画像

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

技術メモ

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

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

技術メモ

ダークモードを実装

このドキュメントでは Next.js Starter Kit に対してダークモードの機能を実装する手順を紹介します。

技術メモ

カスタムコンポーネントの作成

ここでは Sitecore が提供する Next.js Starter Kit に対して、提供されているコンポーネント以外のカスタムコンポーネントを追加するための手順を紹介します。

技術メモ

Tailwind CSS Starter

このドキュメントサイトで作成をしていくサンプルのベースとなる、Tailwind Starter は、Next.js Starter をベースにスタイルシートのフレームワークとして Tailwind CSS を適用しています。このドキュメントでは、ベースとなる Next.js Starter に対してどのような作業をしているのかについて、ここでは紹介をします。

技術メモ

Sitecore XM Cloud について

このドキュメントでは、Sitecore が提供する CMS の SaaS 版の製品、Sitecore XM Cloud の概要を紹介しています。Sitecore の製品に関しての用語をこのページで紹介しつつ、各種トピックは別のページで紹介をしています。

技術メモ

開発環境の作成

このドキュメントでは、XM Cloud を対象とした Web サイトの開発を行う場合の環境について紹介をします。ローカルでの Docker での環境について、XM Cloud のインスタンスに接続して開発をする方法のそれぞれの環境の整え方を紹介します。

技術メモ

テンプレートの作成

このサイトで紹介をしている情報が含まれたテンプレートサイトとして、tailwind-starter を提供しています。このプロジェクトは標準テンプレート以外に、いくつか変更点を適用しているため、ここではその内容について紹介をします。

技術メモ

Playwright を展開する

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

技術メモ

Sitecore Connect for Content Hub

このドキュメントでは、Sitecore XM Cloud の環境において Sitecore Content Hub を連携させる手順について紹介をしていきます。今回はモジュールのインストールおよび初期設定までの紹介とします。

技術メモ

XM Cloud Deploy

Sitecore XM Cloud の環境が手に入った次のステップとしては、XM Cloud Deploy を利用して新しいサーバーを立ち上げる手順を進めることになります。今回は、この XM Cloud Deploy でサーバーを立ち上げる手順を紹介します。

技術メモ

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 ライブラリをリリースしました。

技術メモ

開発者向けリソース

Sitecore Search に関して、基本的なクロールの仕組みまで紹介をしてきました。このドキュメントでは、取得しているデータを利用してサイト内検索を立ち上げる際に便利な、開発者向けリソースについて紹介します。