コードブロックを使ってGoogleドキュメントにコードを追加する方法

コードブロックを使ってGoogleドキュメントにコードを追加する方法

開発者、インストラクター、あるいはIT分野の方で、Googleドキュメントに様々なコードブロックを組み込む必要がある場合、どうしますか?コードを書いて、Googleドキュメントの標準フォーマット機能を使ってフォーマットしますか?そうするかもしれませんが、必ずしもそれが最も効率的な方法とは限りません。コードが不正な形式になってしまう可能性があり、特に時間をかけてエレガントでクリーンなコードを作成した場合には、何のメリットもありません。

拡張機能の追加: コードブロック

幸いなことに、Google Workspace Marketplaceには、この作業に役立つツールがたくさんあります。私が最も優れていると感じたアドオンは「Code Blocks」です。この拡張機能を使えば、コードブロックを選択し、ドキュメント内で好みに合わせてフォーマットできます。使いやすく、何より無料です。必要なのはGoogleアカウントだけです。

コード ブロックの機能セットには次のものが含まれます。

  • 構文の強調表示。
  • 自動言語検出。
  • 豊富なカラーテーマからお選びいただけます。
  • コードをインラインまたはブロックとしてフォーマットする機能。
  • プレビュー機能。

この Google ドキュメントのアドオンをインストールして使用し、クラウドベースのドキュメントにコードを含める方法を説明します。

コードブロックのインストール方法

コード ブロックのインストールは非常に簡単です。

  1. Google アカウントにログインしたブラウザを開き、Google Workspace Marketplace のコード ブロック ページに移動します。
  2. 「インストール」をクリックし、プロンプトが表示されたら「続行」をクリックします。アドオンのアカウントを選択する必要があります。
  3. アカウントを選択したら、コード ブロックに必要な権限を承認する必要があります。これには次のものが含まれます。
  • アプリケーション内でドキュメントを表示および管理します。
  • 不在時にもアプリケーションの実行を許可します。
  • アプリケーションに関連付けられたデータを表示および管理します。
  • Google アプリケーション内のプロンプトやサイドバーにサードパーティのウェブ コンテンツを表示して実行します。

これらの権限に問題がなければ、下にスクロールして「許可」をクリックしてください。コードブロックがインストールされ、使用できるようになります。

参照: Google ドキュメントで単語数を確認する方法を学びます

Googleドキュメントでコードブロックを使用する方法

コードブロックの使い方も同様に簡単です。Googleドキュメントを開き、新しいドキュメントを作成します。ドキュメントを開いた状態で、「拡張機能」→「コードブロック」をクリックし、メニューから「開始」を選択します。新しい右側のサイドバーが開き(図A)、ツールを利用できます。

図A

Code Blocks is installed and ready to go.
Code Blocks がインストールされ、準備完了です。

コードブロックを使用するには、ドキュメントにコードを記述または貼り付けます。コードを配置したら、コード全体を選択し、以下の操作を行います。

  1. 「言語」ドロップダウンから言語を選択します。
  2. 「テーマ」ドロップダウンからテーマを選択します。
  3. 「プレビュー」をクリックすると、プレビュー ペインにコードが表示されます (図 B )。

図B

Formatting your code in Code Blocks.
コード ブロックでコードをフォーマットします。
  1. 必要な変更を加えます(別のテーマを選択するなど)。
  2. コードが希望どおりになったら、[フォーマット] をクリックします。

これで、コードブロックがドキュメント内で希望どおりにフォーマットされているはずです(図C)。これで、次のテキストセクションまたは新しいコードブロックに進む準備が整いました。

図C

An in-line code block, generated by the Code Blocks add-on.
コード ブロック アドオンによって生成されたインライン コード ブロック。

追加したコードブロックの便利な点の一つは、編集できることです。編集するには、以下の手順に従ってください。

  1. ブロック内をクリックして、必要なテキストを変更します。
  2. コード ブロックの編集が完了したら、コード ブロック アドオンの右上隅にある X をクリックしてサイドバーを閉じます。

Googleドキュメントのクラウドベースのドキュメントにコードブロックを追加する方法はこれだけです。これまでコードを見栄えの良いブロックにフォーマットするのに苦労していた方も、もう数クリックで簡単に作成できます。

Googleドキュメントにコードブロックを追加するメリット

Google ドキュメントにコード ブロックを追加する主な利点の 1 つは、これらのブロックが言語に応じた構文ルールに従うことです。つまり、コード ブロックを使用すると、適切なインデントとハイライト表示が可能になります。

参照: システム管理者向けのトップ プログラミング言語を調べてみましょう

コードを直接ドキュメントにコピー&ペーストする場合、正しく表示されるように手動で書式設定する必要があります。また、誰かがドキュメントからコードをコピーした場合、書式設定が保持されない可能性があります。しかし、コードブロックを使用すれば、コピー&ペースト時に書式設定が保持されます。コードブロックは、書式設定やハイライト表示を崩すことなく編集できます。

組み込みのGoogle Workspaceオプションを使用する: コードブロック

Google は、2022 年後半に、Google Workspace の一部のエディション(Business Standard および Plus、Enterprise Standard および Plus、Education Standard および Plus、Nonprofits)向けに、Google ドキュメントにコード ブロックを挿入する組み込み機能を追加しました。

コードブロックを追加するには、ウェブブラウザでGoogleドキュメントを開き、「挿入」>「構成要素」>「コードブロック」を選択します。次に、以下の5つのオプションから1つを選択します。

  • C/C++
  • ジャワ
  • JavaScript
  • パイソン
  • 設定解除

ブロックを作成したら、コードブロックに直接コードを入力できます。図Dに示すように、組み込みのビルディングブロック機能はコードブロックアドオンよりも表示オプションが少ないですが、サードパーティのアドオンにアクセス権限を与える必要はありません。

図D

The Code Blocks add-on offers many themes that highlight code in varying colors (first code block in the document), while the built-in code block option changes the color of fewer elements (second code block shown).
コード ブロック アドオンは、さまざまな色でコードを強調表示する多くのテーマを提供します (ドキュメントの最初のコード ブロック)。一方、組み込みのコード ブロック オプションでは、より少ない要素の色が変更されます (2 番目に表示されているコード ブロック)。

Googleドキュメントのエクスペリエンスを向上させる

コード ブロック アドオンを使用する場合でも、組み込みのコード ブロック オプションを使用する場合でも、コードを簡単にハイライト表示して、Google ドキュメント内のドキュメントの他の部分から目立たせることができるようになりました。

TechRepublic Academy のこのコースでは、「編集、書式設定、スタイル設定など」に関する 1 時間のコンテンツを受講して、Google ドキュメントのワークフローを最適化できます。

Jack Wallen によるビジネス プロフェッショナル向けの最新のテクノロジー アドバイスをすべて知るには、YouTube で TechRepublic の How To Make Tech Work を購読してください。

Tagged: