Logo

関連技術

ここでは各カテゴリに含まれない技術的な情報を掲載しています。

App screenshot

React Router を利用する

久しぶりに React での開発をしていると、ここ数年で過去の知識が使えなくなっていました。それくらい普通やろ！って感じかもしれませんが、自分向けのメモということで React Router に関して書いておきます。

Vite について

Sitecore Search の Starter Kit のコードを見ると、これまでの Sitecore のサンプルと異なって vite というツールが利用されているのがわかります。今回はこのツールが何か？について紹介をしていきます。

MyGet から NuGet への変更

Sitecore が提供しているツールが利用しているパッケージマネージャが、MyGet から NuGet に変更されました。今回は影響範囲とその手順に関して紹介をします。

Xpath Helper の活用

Web ページの HTML の構造を利用して、XPath (XML Path Language)を利用することでツリー構造となっているXML/HTMLドキュメントから要素や属性値などを取得することができます。今回はブラウザ上で簡単に確認することができるアドインを紹介します。

Sitecore とデザインツール Figma の連携

今回は少し趣向を凝らして、デザインツールの Figma との連携について紹介をします。このツールはブラウザ上で動作する Web サイトのデザインツールで、無料でも使うことができるようになっています。近々日本語版もリリースされるそうです。最初に Figma で簡単なコンポーネントを作成して、Sitecore のヘッドレスと連携して GraphQL からデータを取得、デザインに反映させるための手順を簡単に紹介します。

GlobalLink パッケージのインストール

最初にセミナー開催の告知を入れさせていただきます（この告知はセミナー終了後オンデマンドになるため最後に移動する予定です）。今回紹介をしているデモを 2021 年 11 月 26日（金）のセミナーでもご覧いただけます。ぜひ、ご参加ください。

Sitecore 権限の確認 - 権限設定のコツ

前回は、Sitecore 権限の確認 - アクセスビューアーの活用ということで、２つの権限を作成してそれぞれ異なる権利を付与、またそれをユーザーに割り当てた時にどういう形になるのか、というのを紹介しました。今回は、ロールを組み合わせて権限を設定していくコツに関して紹介をしていきます。

Netlify - ステージング環境の構築

Netlify と連携しているリポジトリに関して、デフォルトではすべてのブランチに対して自動的に Build を実行するようになっています。もちろん、事前に設定しているブランチのみが公式サイト、という形になりますが、ステージングのブランチを作っておくことで、Web サイトを公開する前に確認をするためのステージングを用意することができます。

Netlify - ドメインの割り当て

Netlify で立ち上げたサイトに、独自ドメインを割り当てる方法について、このページでは紹介をします。ドメインの設定に関してある程度知識がある人であればスムーズに進めることができます。手順としては、DNS のサーバーを Netlify に変更してあとはお任せ、という感じの設定にしました。

Netlify - 新規サイトの追加

ここでは、実際にサイトを登録していく手順に関して紹介をしていきます。すでにホスティングするためのデータが GitHub のリポジトリに登録されていることを前提として進めていきます。

Netlify の紹介

Netlify は、ホスティング環境を提供しており、標準で CDN が搭載されているなど非常に便利なホスティング環境です。

Storefront - カタログの更新

これまで Storefront の動作において、カタログデータは英語のカタログのまま利用していました。今回は、日本語のカタログデータの作り方に関して紹介をしていきます。なお、英語のデータもそのまま残していくため、多言語でのカタログ管理が可能になるのがわかります。

Storefront - Postman を利用してアクセスをする

Sitecore Experience Commerce は Web API を用意しており、API を利用することでさまざまなことが可能です。今回は、この Web API の動作を確認するために、Postman を利用していくつかのシナリオを実施していきます。

Storefront - Commerce Control Panel

Storefront のコンテンツに関して調整をしてきましたが、サイトの動作で必要となる項目はどこで定義されているでしょうか？今回は Commerce Control Panel の設定について紹介をしていきます。

Storefront - ログイン、ショッピング

前回は Storefront のホームページの表示まで紹介をしました。日本語のサイトでリソースが不足していて表示されていない部分を確認しながら、不足しているリソースを追加して、正しく動作するように調整をしていきます。

Storefront - ホームページの表示

Sitecore Experience Commerce 10.1 に関するインストールの手順を2回に分けて紹介をしました。今回から数回に分けて、標準で実装されている Commerce のモックとなるサイト、Storefront の設定について紹介をしていきます。

Sitecore Webinar シリーズ

Sitecore はオンラインセミナーを実施しており、過去の Webinar に関しても参照することができます。ここでは参照できる Webinar のシリーズを一覧で紹介しており、新しいコンテンツが公開されたら随時追加しています。

Docusaurus - プラグインの追加とサイドバー

ここではサイトを運用していく上ではやっておいた方がいい手順、ということで Google Analytics およびサイトマップを追加するためのプラグイン実装について紹介しています。また後半ではサイドバーの編集方法に関して紹介をします。

Docusaurus について

Docusaurus は Facebook が提供しているドキュメント生成ツールで、マニュアルなどのドキュメントサイトを構築するなどの際に利用されています Docusaurus の正式リリース版は v1 が提供されており、v2 は開発中ながらも現在はベータ版となっています。

Sitecore JSS - Headless SSR - Part.3

Headless SSR の動作に関して紹介をしていきました。これを手元で簡単に利用できるように、3回目としては Docker のコンテナを作成して利用する方法を紹介します。

Sitecore JSS - Headless SSR - Part.2

前回は手元で Headless SSR のプロジェクトを動作させて、ページが表示できるのかどうかを確認しました。今回は、各種プラットフォームに展開をする手順に関して紹介をしていきます。

Sitecore JSS - Headless SSR - Part.1

今回は JSS のアプリの展開方法について紹介をします。利用するのは前回までの JSS のアプリ、そして Sitecore のインスタンスを利用して、Node.js のアプリケーションホスティングを利用して、サイトを公開する形です。

Sitecore JSS - React SDK を利用してサンプルサイトを構築 - Part.1

これまで何回かに分けて Next.js のアプリに関して紹介をしていました。Next.js は React を利用して構築されたフレームワークで、React に関しても理解しておくほうが良いです。ということで、このブログでは基本に立ち戻って、しばらく React に関しての紹介をしていきます。今回は、React のアプリを起動するところまで進めます。

Netlify でサイトを立ち上げる最初のステップ

10 月に wordpress + 独自ドメインを利用するスタイルから、Docsaurus で文書をまとめて、Netlify にホスティング、そこに独自ドメインを割り当てる、という形に切り替えました。Netlify は Free プランが提供されていて、以下のようなメリットがあります。

Docusaurus に関するメモを公開

このサイトは 2020年10月5日に Facebook が提供している文書生成ツールの Docusaurus に切り替え、またホスティングに関しても Netlify に切り替えました。