---
title: "QR Code Generator をページに追加して最初の QR コードを作成する方法"
description: "Vitextra QR Code Generator パッケージを SharePoint のアプリ カタログにアップロードし、QR Code Generator Web パーツをモダン ページに追加して、リンクの QR コードを作成し、ダウンロードまたはコピーして、ページを発行し、Web パーツを新しいバージョンに更新するまでの手順を説明します。"
url: https://vitextra.com/ja/support/kb/10263
language: ja
published: 2026-10-14
modified: 2026-10-14
products:
  - "QR Code Generator"
author: "Lidija Reising"
tags: ["QR Code Generator のインストール", "SharePoint ページに QR コード Web パーツを追加", "SharePoint Online で QR コードを作成", "sppkg アプリ カタログ", "リンクの QR コード", "QR コードのダウンロード", "Vitextra QR Code Generator のセットアップ", "SPFx Web パーツの更新"]
---

# QR Code Generator をページに追加して最初の QR コードを作成する方法

Vitextra QR Code Generator パッケージを SharePoint のアプリ カタログにアップロードし、QR Code Generator Web パーツをモダン ページに追加して、リンクの QR コードを作成し、ダウンロードまたはコピーして、ページを発行し、Web パーツを新しいバージョンに更新するまでの手順を説明します。

## はじめに

[QR Code Generator](https://vitextra.com/ja/products/qr-code-generator) は、1 つの::SharePoint Framework::パッケージとして提供されます。SharePoint 管理者がテナントの::アプリ カタログ::にパッケージを一度アップロードすれば、その後はページの作成者が誰でも Web パーツをページに追加できます。この記事では、ダウンロードした ZIP ファイルから、最初の QR コードをコンピューターに保存するまでの手順を順を追って説明します。

## 前提条件

開始する前に、次の点を確認してください。

- テナントにアプリ カタログがあること。ない場合は、SharePoint 管理者が SharePoint 管理センターの **More features** (その他の機能) > **Apps** (アプリ) で作成します。
- パッケージをアップロードするために、SharePoint 管理者であるか、アプリ カタログの所有者グループのメンバーであること。
- Web パーツを追加するために、サイトの所有者であるか、ページの編集アクセス許可を持っていること。
- ダウンロードしたパッケージがあること。`Vitextra.QRCodeGenerator.<year>Q<quarter>.zip` という名前の ZIP ファイル (例: `Vitextra.QRCodeGenerator.2026Q4.zip`) で、ソリューション ファイル `vitextra.qr-code-generator.sppkg` が含まれています。アップロードする前に `.sppkg` ファイルを展開してください。

📝 **注**  
QR Code Generator はブラウザー内でコードを生成し、追加の API アクセス許可を要求しません。SharePoint 管理センターの **API access** ページで承認する項目はありません。

## 手順 1. パッケージをアプリ カタログにアップロードする

1. テナントのアプリ カタログ サイトを開き、**Apps for SharePoint** に移動します。
2. `vitextra.qr-code-generator.sppkg` をアップロードするか、リストにドラッグします。
3. 表示されたダイアログで **Enable this app and add it to all sites** (このアプリを有効にして、すべてのサイトに追加する) を選択し、**Enable app** (アプリを有効にする) で確定します。パッケージはテナント全体への展開用に作成されているため、この手順の後は、Web パーツはテナントのすべてのサイトで使用でき、**Add an app** (アプリの追加) でサイトに追加する必要はありません。

アプリ カタログと展開ダイアログのスクリーンショット付きの一般的な手順は、[KB10035. クラウドベースの製品のインストール](https://vitextra.com/ja/support/kb/10035)で説明しています。

![アプリ カタログでの QR Code Generator パッケージの有効化](https://static.vitextra.com/articles/10263/enable-app-dialog-ja.png)
*アプリ カタログでの QR Code Generator パッケージの有効化*

## 手順 2. Web パーツをページに追加する

1. ジェネレーターを表示するモダン ページを開き、右上の **Edit** (編集) をクリックします。新しいページが必要な場合は、サイトの **New** (新規) > **Page** (ページ) から作成します。
2. セクション内で Web パーツを配置する場所にポインターを合わせ、**+** (プラス) ボタンをクリックします。
3. ツールボックスの検索ボックスに *QR* と入力し、**QR Code Generator** を選択します。Web パーツは **Advanced** (詳細設定) グループに表示されます。

Web パーツに構成は必要ありません。**URL** タブが選択され、現在のサイトのアドレスがすでに入力された、すぐに使える状態でページに追加されるため、最初の QR コードがただちに表示されます。

![ページのツールボックスにある QR Code Generator Web パーツ](https://static.vitextra.com/articles/10263/web-part-toolbox-ja.png)
*ページのツールボックスにある QR Code Generator Web パーツ*

💡 **ヒント**  
ページが編集モードの間は、ジェネレーターの上にある **Web パーツのタイトル** プレースホルダーに見出しを入力できます (例: *スキャンしてイベント ページを開く*)。

## 手順 3. 最初の QR コードを作成する

1. **URL** タブのまま、**URL** フィールドのアドレスを、コードで開きたいリンク (ニュース投稿やドキュメントへのリンクなど) に置き換えます。
2. 右側の **QR コード**のプレビューを確認します。プレビューは変更のたびに再生成されます。**更新** ボタンを使用すると、必要なときにプレビューを再描画できます。
3. スマートフォンのカメラをプレビューに向け、リンクが開くことを確認します。

リンク以外のものをエンコードするには、別のタブ (**Text** (テキスト)、**vCard**、**Wi-Fi**、**電子メール**、**SMS**、**電話**、**Location** (場所)、**Event** (イベント)) を選択します。タブが Web パーツの幅に収まらない場合、残りのタブは行の末尾にある **…** (その他) ボタンから選択できます。各タブのフィールドについては、[KB10264. QR コードのデータの種類: URL、テキスト、vCard、Wi-Fi、電子メール、SMS、電話、場所、イベント](https://vitextra.com/ja/support/kb/10264)で説明しています。

![URL タブで作成したリンクの QR コード](https://static.vitextra.com/articles/10263/first-qr-code-ja.png)
*URL タブで作成したリンクの QR コード*

📝 **注**  
選択したタブの必須フィールドが空の場合、プレビューには *1 つまたは複数の必須フィールドが空になっています。すべての必須フィールドが入力されているか確認して、やり直してください* というメッセージが表示され、**更新**、**コピー**、**ダウンロード**の各ボタンは無効になります。

## 手順 4. コードをダウンロードまたはコピーする

- **ダウンロード**をクリックし、形式 (**PNG**、**JPEG**、**SVG**、**WebP**) を選択します。ファイルは `qrcode` という名前でブラウザーのダウンロード フォルダーに保存されます。
- **コピー**をクリックすると、コードが PNG 画像としてクリップボードにコピーされ、電子メール、ドキュメント、プレゼンテーションに貼り付けることができます。操作が完了すると、*Copied to clipboard* (クリップボードにコピーしました) というメッセージが表示されます。

形式の選び方と画像のサイズについては、[KB10267. QR コードのダウンロードとコピー: PNG、JPEG、SVG、WebP](https://vitextra.com/ja/support/kb/10267)で説明しています。

## ページを発行する

**Republish** (再発行) (新しいページの場合は **Publish** (発行)) をクリックします。ジェネレーターはその時点のデータとデザインとともに保存されるため、ページを訪れたユーザーには、用意したものと同じ QR コードが表示されます。訪問者は自分のデータを入力して独自のコードをダウンロードすることもできますが、その変更は保存されません。[KB10268. 構成済みの QR コードを SharePoint ページで公開する](https://vitextra.com/ja/support/kb/10268)を参照してください。

## 新しいバージョンへの更新

QR Code Generator の新しいリリースは、最初のインストールと同じ方法でインストールします。新しい `vitextra.qr-code-generator.sppkg` を **Apps for SharePoint** にアップロードし、既存のファイルを置き換えることを確認して、もう一度 **Enable this app and add it to all sites** を選択します。Web パーツがあるすべてのページで次回の読み込み時に新しいバージョンが使用され、既存の Web パーツに保存されている構成は保持されます。ページで実行されているバージョンよりも新しいバージョンがある場合、Web パーツはページの編集者に *このアプリの新しいバージョンがあります。今すぐ入手してください。* というメッセージを表示します。一般的な手順は、[KB10050. SPFx ベースの Vitextra ソリューションの更新](https://vitextra.com/ja/support/kb/10050)で説明しています。

## まとめ

QR Code Generator のインストールとは、テナント全体への展開を指定して 1 つの `.sppkg` ファイルをアプリ カタログにアップロードし、**QR Code Generator** Web パーツをページに追加することです。Web パーツは構成なしで動作します。いずれかのタブでデータを入力し、スマートフォンでプレビューを確認して、**ダウンロード**または**コピー**で結果を取得します。

💡 **ヒント**  
コードに自社の色とロゴを設定するには、[KB10265. QR コードのデザインのカスタマイズ: 図形、色、グラデーション、コーナー](https://vitextra.com/ja/support/kb/10265)および [KB10266. QR コードに会社のロゴを追加する方法](https://vitextra.com/ja/support/kb/10266)を参照してください。
