スキャンやドキュメントのエクスポート後にPDFページが逆さまや横倒し、または間違った向きになって表示されることがあります。

ドキュメントを手動で再作成する代わりに、ユーザーは通常、ページを回転する簡単な方法と修正されたバージョンを保存するだけが必要です。

現代のブラウザはJavaScriptを使用して直接これを実現できます。

このチュートリアルでは、JavaScriptを使用してブラウザベースのPDF回転器を構築します。

このツールは、ユーザーがPDFファイルをアップロードし、ページをプレビューし、選択したページを回転させ、向きを変更し、更新されたPDFを生成し、最終結果をプレビューし、ファイル名を変更し、ブラウザからすべてを直接ダウンロードできるようにします.

すべてはクライアント側だけで動作し、バックエンドサーバーは不要です.

目次

1. PDF回転の仕組み

2. プロジェクト設定

3. どのライブラリを使用していますか？

4. アップロードインターフェースの作成

5. アップロードされたPDFページのプレビュー

6. 回転するページの選択

7. 回転オプションの適用

8. 回転されたPDFの生成

9. 最終的なPDFのプレビューとダウンロード

10. 実世界の文書でPDF回転が便利な理由

11. デモ：PDFローターツールの動作方法

12. 実際の使用からの重要な注意点

13. 避けるべき一般的な間違い

14. 結論

PDFの回転はどのように機能しますか

PDFの回転は、PDFページの向きデータを更新することで機能します。

実際の内容を手動で修正する代わりに、JavaScriptライブラリはプログラムでページを回転させ、ドキュメントの更新版をエクスポートできます

ブラウザはPDFファイルをロードし、ページ情報を読み取り、90°や180°などの回転値を適用したり、横長方向にしたりして、新しいダウンロード可能なPDFを生成します

すべてはブラウザ内で直接行われます

このことで、プロセスを速く、プライベートで、ファイルを外部サーバーにアップロードすることなく簡単に使用できるようにしています.

プロジェクトのセットアップ

このプロジェクトは意図的にシンプルです.

HTMLファイル、JavaScriptファイル、PDF処理ライブラリの3つだけが必要です.

すべてがJavaScriptを使用してブラウザ内で実行されます。バックエンドサーバーやデータベースは必要ありません.

どのライブラリを使用していますか？

ブラウザ内で直接PDFファイルを編集するために、PDF-libライブラリを使用します。

CDNを通じて追加します：

<script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>

このライブラリは私たちに以下のことを可能にします：

• PDF文書を読み込む

• ページを回転させる

• 向きを変更する

• 更新されたPDFをエクスポートする

アップロードインターフェースの作成

基本的アップロード入力から始めます：

<input type="file" id="pdfUpload" accept="application/pdf">

<button onclick="rotatePDF()">
  Rotate PDF
</button>

これにより、ユーザーはブラウザからPDFファイルを直接アップロードできます。

ツール内のアップロードセクションの見た目はこちらです：

アップロードされたPDFページのプレビュー

PDFファイルをアップロードした後、ユーザーは回転を適用する前にブラウザ内でページを直接プレビューできます。

プレビューセクションには回転コントロールも含まれており、ユーザーは最終的なPDFを生成する前に必要に応じてページを個別に回転させることができます.

プレビューをレンダリングするには、まずアップロードされたPDF文書を読み込みます.

const pdfDoc = await PDFLib.PDFDocument.load(arrayBuffer);

const totalPages = pdfDoc.getPageCount();

次に、ページプレビューを動的にレンダリングします.

for (let i = 0; i < totalPages; i++) {
  const page = pdfDoc.getPage(i);

  console.log("Rendering page:", i + 1);
}

ユーザーは、左および右のナビゲーションボタンを使用してページを移動できます.

回転ボタンは、各プレビューカードに添付することもできます:

rotateLeftBtn.addEventListener("click", () => {
  rotatePage(currentPage, -90);
});

rotateRightBtn.addEventListener("click", () => {
  rotatePage(currentPage, 90);
});

これにより、更新されたPDFを生成する前にページの向きを確認することが容易になります。

ページプレビューセクションの見た目はこちらです：

回転するページを選択

すべての文書にすべてのページを回転させる必要はありません。

一部のユーザーは、偶数ページのみ、奇数ページのみ、または文書内の特定のページを回転させたいだけかもしれません。

このツールは、最終的なPDFを生成する前に、どのページに回転の変更を適用するかを選択する機能を提供します.

例えば、ユーザーはこのように回転の範囲を選択できます.

const selectedMode = document.querySelector(
  'input[name="pageMode"]:checked'
).value;

特定のページ範囲もサポートされています.

const customPages = document
  .getElementById("customPages")
  .value;

これにより、ユーザーはどの文書のページが変更されるかに対してより多くの制御ができます.

ツール内でページ選択のコントロールの見た目はこちらです.

回転オプションの適用

ページが選択されたら、ユーザーはブラウザ内でさまざまな回転アクションを直接適用できます

ページは90度左回転、90度右回転、180度反転、または縦向きまたは横向きに変換できます

PDF-libを使った簡単な例です

const page = pdfDoc.getPage(pageIndex);

page.setRotation(
  PDFLib.degrees(90)
);

ページを左回転するには

page.setRotation(
  PDFLib.degrees(-90)
);

動的に向きのプリセットを適用することもできます：

if (orientation === "landscape") {
  page.setRotation(PDFLib.degrees(90));
}

これらのコントロールはユーザーがブラウザ内でスキャンした文書と誤ったページレイアウトを直接修正できるようにします：

ツール内で回転コントロールがどのように見えるかです：

回転したPDFの生成

回転設定が構成された後、ユーザーはブラウザ内で更新されたPDFを直接生成できます。

このツールは選択したページを処理し、回転の変更を適用し、すぐに新しいダウンロード可能なPDFファイルをエクスポートします.

例えば：

const pdfBytes = await pdfDoc.save();

次に、ダウンロード可能なファイルを作成します：

const blob = new Blob(
  [pdfBytes],
  { type: "application/pdf" }
);

const url = URL.createObjectURL(blob);

最後に、ダウンロードをトリガーします：

const link = document.createElement("a");

link.href = url;
link.download = "rotated-document.pdf";

link.click();

この全体のワークフローはブラウザ内でローカルに実行され、バックエンドサーバーは必要ありません.

これはツール内の生成ボタンの見た目です：

最終的なPDFのプレビューとダウンロード

処理が完了すると、ツールは回転した文書のライブプレビューを表示します

ユーザーは最終ファイルをダウンロードする前に更新されたページを確認できます

インターフェースはまた、総ページ数やファイルサイズなどの追加の文書詳細も表示します

生成されたPDFをダウンロードする前に、リネームオプションが利用可能です

例えば、ユーザーはこのようにファイル名を変更できます：

const fileName = prompt(
  "Enter PDF name:",
  "rotated-document"
);

プレビューセクションには、左右のナビゲーションコントロールも含まれており、ユーザーはブラウザ内で直接回転ページを閲覧できます

文書の詳細もダイナミックに表示されます：

fileSizeElement.textContent =
  formatFileSize(blob.size);

pageCountElement.textContent =
  pdfDoc.getPageCount();

これにより、利用しやすさが向上し、ユーザーはダウンロードする前に最終出力を確認することができます

最終出力セクションの見た目はこちらです：

実世界の文書でPDF回転が有用な理由

PDF回転は小さな機能に見えるかもしれませんが、日常的な文書処理における非常に一般的な問題を解決します

多くのスキャンされた文書、モバイルスキャン、請求書、証明書、オフィスファイルは誤った向きで保存されています。いくつかのページは横に見えます、逆さまに見えます、または縦向きと横向きのレイアウトが混在しています

ファイルを再開して再スキャンする代わりに、ユーザーはブラウザ内で直接ページの向きを迅速に修正できます。

例えば、PDFの回転は以下のような場面でよく使用されます：

• スキャンされた契約書

• 請求書と領収書

• 政府用紙

• 学術文書

• 建設図面

• 景観レポート

• モバイルカメラがスキャン

複数ページのPDFで作業している際、特定のページだけ修正が必要な場合に特に便利です

一部のユーザーは回転させたいだけかもしれません

• 偶数ページ

• 奇数ページ

• 特定のページ

• 横向きのページのみ

そのため、ページベースの回転制御は現代のPDFツールにおいて重要です.

ブラウザベースのPDF回転はプライバシーも向上させます。アップロードされた文書は外部サーバーではなくユーザーのデバイスに残ります.

デモ：PDF回転ツールの動作方法

ステップ1：PDFをアップロード

ユーザーは最初、ブラウザベースのツールにPDF文書を直接アップロードします.

アップロードセクションではドラッグ＆ドロップと手動のファイル選択の両方をサポートしています.

アップロードインターフェースの見た目はこちらです.

ステップ2：PDFページのプレビュー.

文書をアップロードした後、ツールは自動的にページプレビューを生成します.

プレビューセクションには回転オプションも含まれており、ユーザーは必要に応じて文書ページを回転させることができます.

ツール内のプレビューセクションです：

ステップ3：回転設定を構成

ユーザーは現在、PDFページの回転方法を選択できます

ツールは以下をサポートしています：

• 左回転

• 右回転

• 180度反転

• 縦向き

• 横向き

ユーザーは回転がすべてのページに適用されるか、特定のページにだけ適用されるかを選択できます.

回転設定パネルの見た目はこちらです.

ステップ4：回転されたPDFを生成

すべての設定が完了したら、ユーザーは生成ボタンをクリックして回転を適用します.

ブラウザはドキュメントをローカルで処理し、すぐに更新されたPDFを作成します.

ツール内の生成ボタンはこちらです：

ステップ5：最終出力をプレビュー

処理が完了すると、ツールはブラウザ内で回転したPDFのプレビューを直接表示します.

ユーザーは、左と右のコントロールを使用してページごとにナビゲートし、最終出力を確認できます.

インターフェースには以下も表示されます：

• 総ページ数

• ファイルサイズ

• 出力ファイル名

最終プレビューセクションです：

ステップ6：PDFをリネームしてダウンロード

ダウンロードする前に、ユーザーはブラウザ内で生成されたPDFファイルを直接リネームできます

リネームすると、更新された文書をすぐにダウンロードできます

リネームとダウンロードセクションです：

実際の使用からの重要な注意点

スキャンされたPDFを扱う際、ページの向きの問題は非常に一般的です

一部の文書では、特定のページが縦向きで他のページが横向きという混在した向きが含まれる場合があります

ページごとに回転を適用する方が、無理に全体を回転させるよりも良い結果を得ることが多いです

大きなPDFファイルは、ブラウザ内での処理時間を増加させることもあります

例えば：

if (file.size > 50 * 1024 * 1024) {
  alert("Large PDF files may process slowly.");
}

恒久的な変更を適用する前にページをプレビューすることも有効な最適化です.

これにより、ユーザーはページの向きを確認でき、更新された文書をダウンロードする前にミスを減らすことができます.

ブラウザ内ですべてがローカルで実行されるため、アップロードされた文書はユーザーのデバイスから決して離れません。これによりプライバシーとセキュリティが向上します.

避けるべき一般的な間違い

誤って何度もページを回転してしまうことは一般的な間違いです

例えば、連続して90度の回転を適用すると予期せぬ向きの変更が起こることがあります

また、回転を適用する前にページの選択を無視することも問題です

ユーザーは特定のセクションではなく、すべてのページを誤って回転してしまう可能性があります

大きくスキャンされたPDFファイルもレンダリングやプレビュー生成を遅くすることがあります。

処理前にアップロードされたファイルを検証することで、壊れたワークフローを回避できます：

if (!file || file.type !== "application/pdf") {
  alert("Please upload a valid PDF file.");
  return;
}

プレビューの同期が正しくないのも一般的な問題です。

ページのプレビューが回転後に更新されない場合、ユーザーはエクスポートされたPDFが正しいにもかかわらず回転が失敗したと考えます。

各回転後にプレビューを動的に更新することで、全体的な体験が向上します.

結論

このチュートリアルでは、JavaScriptを使用してブラウザベースのPDFローターを作成しました.

PDFファイルのアップロード方法、ドキュメントページのプレビュー、選択したページの回転、ページの向きの変更、更新されたPDFの生成、および最終ドキュメントをブラウザ内で直接ダウンロードする方法を学びました.

より重要なのは、現代のブラウザがバックエンドサーバーに依存することなく、ローカルで実用的なPDF編集タスクを処理できる方法を見たということです.

このアプローチは、ツールを速く、プライベートで、使いやすくしています.

こちらでライブツールを試すこともできます：AllInOneTools - PDF Rotator Tool。

このワークフローを理解すれば、PDFページ抽出、注釈、文書整理、デジタル署名、または高度な編集ツールなどの機能を追加してさらに拡張できます.

そしてそれが本当に面白いことの始まりです.