Webアプリケーションの作成

Webアプリケーションを開発するには、次のタスクを完了する必要があります。

ビジュアル・ビルダー・アプリケーションを作成します。
新規Webアプリケーションを作成します。
外部ライブラリを含めます。
ユーザー・インタフェースを作成します。
アップロードしたPDF文書を更新します。
新しいPDFドキュメントを作成します。
PDFファイルをダウンロードします。

ビジュアル・ビルダー・アプリケーションの作成

Visual Builderアプリケーションは、Webおよびモバイル・アプリケーションの開発に使用するリソースの集合です。Visual Builderアプリケーションには、データ・ソースおよびビジネス・オブジェクトを記述するメタデータがJSONファイルに含まれています。Webおよびモバイル・アプリケーション用のHTMLおよびJavaScriptファイルも含まれます。

新しいVisual Builderアプリケーションを作成するには

: ビジュアル・アプリケーションのホーム・ページで、「新規」をクリックします。
「アプリケーションの作成」ダイアログ・ボックスで、アプリケーション名を入力します。「アプリケーションID」フィールドは、指定したアプリケーション名に基づいて自動的に移入されます。
- 必要に応じてアプリケーションIDを変更できますが、IDはアイデンティティ・ドメイン内で一意である必要があります。
- 「空のアプリケーション」のデフォルトの選択は変更しないままにします。このテンプレートでは、アーティファクト、アプリケーションまたはその他のリソースは作成されません。
「終了」をクリックします。
新しいVisual Builderアプリケーションは、作成後に自動的に開き、「ようこそ」画面を表示します。新しいアプリケーションにはアーティファクトは含まれませんが、ウィザードでは、デフォルトでアプリケーションのファイル構造および必要なリソースとファイルが作成されます。

「ようこそ」画面を使用して、最初に作成するアーティファクトを決定できます。「ようこそ」画面でいずれかのタイルをクリックして、アーティファクトを作成および管理できるナビゲータで関連するパネルを開きます。複数のWebおよびモバイル・アプリケーションを追加できます。これらはすべて、Visual Builderアプリケーションで公開するデータ・ソース、リソースおよびサービスにアクセスできます。

新規Webアプリケーションの作成

Visual BuilderアプリケーションのWebアプリケーションは相互に独立していますが、すべてアプリケーションで定義されたデータ・ソースを使用できます。

Visual Builderアプリケーション内に新しいWebアプリケーションを作成するには:

ナビゲータの「Webアプリケーション」アイコンをクリックして、「Webアプリケーション」ペインを開きます。
「Webアプリケーション」パネルには、Visual Builderアプリケーションの各Webアプリケーションの構造表現が表示されます。Webアプリケーションが作成されていない場合は、ペインにメッセージと「+ Webアプリケーション」ボタンが表示されます。これをクリックして、「Webアプリケーションの作成」ウィザードを開きます。
ナビゲータで「Webアプリケーションの作成」アイコンをクリックします。
Webアプリケーションの作成ウィザードの「一般情報」ページで、作成するWebアプリケーションの名前を指定します。次の3つのナビゲーション・スタイルから選択することもできます。
- 3つのナビゲーション項目がある水平ナビゲーション・スタイル。
- ナビゲーション・ドロワー・パネルと、アバター付きのヘッダー、中央のナビゲーション・アイテムおよびアプリケーション名のフッターを含むルート・ページを作成できる垂直ナビゲーション・スタイル。
- ナビゲーション・アイテムごとに生成される初期ページを含むページ・フロー。
デフォルトの選択は「なし」です。
「作成」をクリックして、必要なすべてのアーティファクトとともにWebアプリケーションを作成および生成します。

外部ライブラリを含める

PDFドキュメントを生成、変更およびダウンロードするには、「始める前に」に示すように、2つの外部ライブラリPDF-libおよびdownloadjを含める必要があります。

PDF-libは、PDFドキュメントを管理します。
downloadjは、生成されたPDFドキュメントをダウンロードします。

このアプリケーション用に作成されたアーティファクトには、ソース・アイコンからアクセスできます。次の行を使用して、index.htmlファイルに両方のlibrarieのソースを挿入します。

<script src="https://unpkg.com/pdf-lib@1.4.0"></script> 
<script src="https://unpkg.com/downloadjs@1.4.7"></script>

ユーザー・インタフェースの作成

ここで、ユーザー・インタフェースを作成します。このインタフェースには、コンテナ、ヘッダー、ボタン、テキスト・フィールド、JavaScriptコード、HTMLコードなどのコンポーネントが含まれている必要があり、ユーザーが次のことを実行できます。

ファイルをアップロードします。
PDFドキュメントに表示されるフィールド・テキストを入力します。
ボタンをクリックして、入力したテキストでアップロードしたPDF文書を更新します。
ボタンをクリックして、入力したテキストを含む新しいPDFドキュメントを作成します。
ボタンをクリックして、準備したドキュメントをダウンロードします。

ファイルをドラッグ・アンド・ドロップしてPDFドキュメントを表示

まず、作成中のUIに重要なコンポーネントをドラッグ・アンド・ドロップする必要があります。

コンポーネント・パレットから、ページ・デザイナにフレックス行をドラッグ・アンド・ドロップし、このコンポーネントにヘッダーをドラッグ・アンド・ドロップすると、PDFドキュメントのアップロードというラベルが付きます。次に、PDFドキュメントのアップロードに使用されるファイル・ピッカーおよびファイル・ピッカー・ボタンを追加します。
fileURLという名前のString型の変数を作成します。この変数は、後でページに表示されるPDFドキュメントのURLをページ・レベルで保存します。
holdFileという名前のAny型の変数を作成します。この変数は、PDFドキュメントのコンテンツをページ・レベルで格納します。
ファイル・ピッカーのプロパティ・パレットで、新しいイベントon Select Filesを作成します。このイベントは、FilePickerSelectChainという新しいアクション・チェーンを作成します。
アクション・チェーンFilePickerSelectChainを、アップロードBLOBオブジェクトの内容を読み取るJavaScriptとともに定義および実装します。このJavaScript関数は、ページ・レベルで実装され、2つの変数(PDFファイルをbase64文字列に変換する変数と、ページに表示されるドキュメントURLを含む2番目の変数)を格納します。アクション・チェーンは、の3つのステップで構成されています。
1. fileURL変数を初期化してリセットします。
2. アップロードされたファイルを入力パラメータで関数addPDFDocumentをコールします。
3. addPDFDocument関数の結果をfileURL変数およびholdFile変数に割り当てます。

アップロードしたPDFファイルをメイン・ページ画面に表示

メイン・ページのソースHTMLで、以前に割り当てられたページ変数fileURLをソースとともに追加します。fileURLオブジェクトをメインHTMLページに追加します。この段階で、アプリケーションはPDFファイルをアップロードおよび表示できます。

addPDFDocument関数の出力のページ変数fileURLおよびholdFileへの割当て

返されたaddPDFDocumentファンクション・プロパティのURLとデータを、それぞれページ変数fileURLおよびholdFileに割り当てます。

addPDFDocument関数の入力変数の割当て

GUIで、アップロードしたファイル変数を関数のarg1パラメータに割り当てます。

addPDFDocumentファンクションの作成

ページ・レベルで関数addPDFDocumentを作成します。アプリケーションは1つの入力パラメータを受け取ります。この関数は、入力ファイル・パラメータに基づいてURL変数をインスタンス化し、アップロードされたドキュメントを読み取ってbase64文字列に変換します。次のコード・サンプルを使用して、関数を定義できます。

    PageModule.prototype.addPDFDocument = function(arg1) {
      return new Promise(
        resolve=>{
          const blobURL = URL.createObjectURL(arg1);
          const reader  = new FileReader();
          reader.addEventListener("load", function () {
            // convert image file to base64 string         
            resolve({ data: reader.result, url: blobURL });
          }, false);
          if (arg1) {
            reader.readAsDataURL(arg1);
          }
        }
      );      
    };

アップロード済PDF文書の更新

コンポーネント・パレットから、ページ・デザイナにテキスト・フィールド・コンポーネントをドラッグ・アンド・ドロップし、この下に新しいボタンをドラッグ・アンド・ドロップします。

テキスト・フィールドの内容を格納するページ変数textIncludedIntoPDFを作成します。この変数によって、コンテンツが挿入され、PDFドキュメントが更新されます。
この変数を入力テキストコンポーネントに割り当てます。

PDFの更新および表示

「PDFの更新」ボタンのアクション時に新しいイベントを作成します。イベントによって、update_display_pdfというラベルの付いた新しいアクション・チェーンが作成されます。

新しいアクション・チェーンでは、JavaScript関数を使用してアップロードされたPDFを更新し、一時ページ変数を介して2番目のJavaScript関数によって新しいPDFドキュメントが再生成されて表示されます。

UpdatePDFファンクションの作成

次に、JavaScript関数createUpdatePDFを作成します。これは、2つの入力パラメータ(アップロードされたPDF文書と、ユーザーが以前にメイン・ページで入力したテキスト)を持つ非同期関数です。バイト配列を返します。

実行すると、この関数は次のようになります。

定数をpdf-lib APIから宣言します。
PDFDocumentエンティティを作成し、入力PDFバイト配列をロードします。
ドキュメントに含まれるすべてのページの配列を取得します。
ドキュメントのindex = 0でレンダリングされる最初のページを識別します。
ページの幅と高さを計算します。
入力したテキストを(赤色で45度の角度で)書き込みます。

PDFDocumentを保存、シリアライズし、バイト(Uint8Array)に戻します。

次のコード・サンプルを使用して、前述の機能をシミュレートできます。

  PageModule.prototype.createUpdatePDF = async function (arg1 , inputText ) {
    // declare constants from the pdf-lib API.
    const { degrees, PDFDocument, rgb, StandardFonts , grayscale} = PDFLib;
    console.log("createUpdatePDF: input file " + arg1);
    console.log("createUpdatePDF: input argument " + inputText);
    const existingPdfBytes = arg1;
    // create a PDFDocument entity and load the input pdf byte array 
    const pdfDoc = await PDFDocument.load(existingPdfBytes);
    // get an array of all the pages contained in this document. The pages are stored in the array in the     
    // same order that they are rendered in the document with the first page page in the 0 position. 
    const pages = pdfDoc.getPages();
    // get the first page rendered at the index = 0 of the document
    const firstPage = pages[0];
    // get the first page width and height
    const { width, height } = firstPage.getSize();
    console.log("createUpdatePDF: The width : " + width + "and height : " + height +" of the first page");
    // Embed a Helvetica font into the pdf document
    const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
    // write the text that you had entered and draw a rectangle 
    firstPage.drawText(inputText, {
      x: 5,
      y: height / 2 + 300,
      size: 50,
      font: helveticaFont,
      color: rgb(0.95, 0.1, 0.1),
      rotate: degrees(-45),
    });
    // createUpdatePDF: save and serialize the PDFDocument to bytes (a Uint8Array)
    const pdfBytes = await pdfDoc.save();
    return pdfBytes;
  };

更新されたPDFドキュメントの表示

UpdatePDF関数の結果は、一時ページ変数tmpPDFBytesに割り当てられます。この割当ての後、JavaScript関数はbase64バイト配列を受け取り、このバイト配列から新しいblobエンティティをインスタンス化します。最後に、この関数は、このPDFドキュメントに対応するURLを作成して返します。

次のコード・サンプルを使用して、前述の機能をシミュレートできます。

PageModule.prototype.displayPDFDocument = function (arg1) { 
    const bytes = new Uint8Array( arg1 ); 
    // create a new blobfrom the byte array with type of application: pdf 
    const blob = new Blob( [ bytes ], { type: "application/pdf" } ); 
    // create the url of the generated blob entity 
    const newdocURL = URL.createObjectURL(blob); 
    // return the updated pdf's url 
    return newdocURL; 
    };

この関数の出力は、ページ変数fileURLに割り当てられ、更新されたPDFドキュメントをページに表示するために使用されます。

この時点で、アプリケーションでPDFドキュメントをアップロードし、ユーザーが画面のテキスト・フィールドに入力したテキストで変更してから、更新されたPDFドキュメントを画面に表示します。

新規PDFドキュメントの作成

この時点で、アプリケーションはPDFドキュメントを作成し、ユーザーが画面のテキスト・フィールドに入力したテキストで変更してから、新しく作成したPDFドキュメントを画面に表示します。アプリケーション・ユーザーが入力したテキストを含む新しいPDFドキュメントを生成するには、コンポーネント・パレットからボタン・コンポーネントをページ・デザイナにドラッグ・アンド・ドロップします。

ドキュメントの作成と表示

「新規PDFの作成」ボタンで起動されるアクションを定義する新規イベントを作成します。イベントによって、ラベルがcreate_display_pdfの新しいアクション・チェーンが作成されます。

新しいアクション・チェーンでは、JavaScript関数を使用して新しいPDF(テキスト・フィールドに以前に入力したテキストを含む)が作成され、一時ページ変数を介して、2番目のJavaScript関数によって新しいPDFドキュメントが再生成されて表示されます。

PDF機能の作成

次に、JavaScript関数createPDFを作成します。これは、ユーザーが以前にメイン・ページに入力したテキストを1つの入力パラメータとして取得し、バイト配列を返す非同期関数です。

実行すると、この関数は次のようになります。

定数をpdf-lib APIから宣言します。
PDFDocumentエンティティを作成します。
Times Romanフォントを埋め込みます。
PDF文書オブジェクトに空白ページを追加します。
ページの幅と高さを計算します。
ユーザーが入力したテキストを書き込みます。

PDFDocumentを保存、シリアライズし、バイト(Uint8Array)に戻します。

次のコード・サンプルを使用して、前述の機能をシミュレートします。

PageModule.prototype.createPDF = async function (arg1) {
    const { degrees, PDFDocument, rgb, StandardFonts , grayscale} = PDFLib;
    console.log("createPDF: input file " + arg1);
    // create a PDFDocument entity and load the input pdf byte array 
    const pdfDoc2 = await PDFDocument.create();
    // Embed the Times Roman font
    const timesRomanFont = await pdfDoc2.embedFont(StandardFonts.TimesRoman);
    // Add a blank page to the document
    const page2 = pdfDoc2.addPage();
    // Get the width and height of the page
    const { width2, height2 } = page2.getSize();
    // Draw a string of text toward the top of the page
    const fontSize2 = 30;
    page2.drawText(arg1, {
      x: 50,
      y: 450,
      size: fontSize2,
      font: timesRomanFont,
      color: rgb(0, 0.53, 0.71),
    });
    // createUpdatePDF: save and serialize the PDFDocument to bytes (a Uint8Array)
    const pdfBytes2 = await pdfDoc2.save();
    return pdfBytes2;

新しく作成されたPDFドキュメントの表示

createPDF関数は、一時ページ変数tmpPDFBytesに割り当てられます。この割当ての後、JavaScript関数はbase64バイト配列を受け取り、このバイト配列から新しいblobエンティティをインスタンス化します。

この関数は、このPDFドキュメントに対応するURLを作成して返します。update_display_pdfアクション・チェーンに実装されている関数と同じ関数が再使用されます。この関数の出力は、ページ変数fileURLに割り当てられ、ページ内の新しいPDFドキュメントの表示に使用されます

PDFファイルのダウンロード

コンポーネント・パレットから、ボタン・コンポーネントをドラッグ・アンド・ドロップしてページ・デザイナに含めます。

ドキュメントのダウンロード

「PDFのダウンロード」ボタンの新しいイベント・アクションを作成します。イベントによって、downloadPDFというラベルの付いた新しいアクション・チェーンが作成されます。新しいアクション・チェーンでは、JavaScript関数を使用してPDFファイルをダウンロードします(テキスト・フィールドにユーザーがテキストを入力したテキストが含まれます)。

PDFファイルのダウンロード

JavaScript関数downloadPDFfileは、1つの入力パラメータとしてアップロードおよび変更または最初から作成されたPDFドキュメントのバイト配列を取得し、事前定義済の名前(PDF-lib_modification_example.PDFおよびタイプapplication/PDF)でドキュメントをダウンロードします。

このファンクションは、(最初に非表示になってからアプリケーションにインポートされたライブラリdownloadjから)download()ファンクションを使用します。download()の入力引数には、次のデータ型を指定できます。

URL
文字列
BLOB
型付き配列

または、base64またはURLエンコード文字列としてファイルのデータを表すdataURLを介して、ブラウザのダウンロード・ディレクトリに配置される新しいファイルの名前とタイプ。

次のコード・サンプルを使用して、前述の機能をシミュレートします。

  PageModule.prototype.downloadPDFFile = function (arg1) {
    download(arg1, "pdf-lib_modification_example.pdf", "application/pdf");
  };