Googleドキュメントでソースコードをキレイに表示【貼り付けOK】

Googleドキュメントでソースコードをキレイに表示【貼り付けOK】 PC

こんにちは、mickです。

・Googleドキュメントにソースコードを貼り付けたい
・ソースコードを説明画像つきで保存しておきたい
・ソースコードをGoogleドキュメントでやり取りしたい
・WordPressで使うCSSを保存しておく場所が欲しい

こんな要望に応えます。

Googleが無料で提供するオフィスソフト

Googleドキュメントの編集画面
Googleドキュメントの編集画面

Googleドキュメントは、ChromeやSafariといったWebブラウザで動作するオフィスソフトです。

GoogleドキュメントはMicrosoftのWordに似ている

Googleドキュメントは、MicrosoftのWordおなじで文章を編集することができます。
作成した文章は、すべてクラウドのGoogleDriveに保存することになります。

基本的にはオンラインでしか使えません。
そのおかげでパソコンやタブレット、そしてスマホでいつでもどこでも閲覧や編集ができます。

データの保存はクラウドで編集中のトラブルに強い

Googleドキュメントは、一度使い始めると便利すぎて手放せません。

まず、MicrosoftのWordに比べると機能は少ない分、動作が早いです。

そして何より編集中にアプリが突然停止しても大丈夫。
データは常にGoogleDriveに保存しているため、ほぼ消えることはありません。

Googleドキュメントでのやり取りが便利

Googleドキュメントは、他の人との共有もすることができます。

その際、共有先の人がGoogleのアカウントを持っていなくてもOKなため、利便性が高いです。

Googleドキュメントでソースコードをキレイに貼り付ける方法

Googleドキュメント
Googleドキュメント

これまで作った簡単なソースコードを保管したり、他の人と共有するのにGoogleドキュメントが使えたら便利です。

WordPressを使っているとCSSを使います。
そのCSSとその結果付きで保存するのに便利です。

具体的な方法:「Code Blocks」アドオンを使う

Googleドキュメントには、便利機能を追加するアドオン機能が付いています。
WordPressでいえばプラグインに近い感覚です。

アドオン「Code Blocks」を使えば、Googleドキュメント内のソースコードをキレイにハイライト(色つけ)してくれます。

「Code Blocks」のインストール

メニューからアドオンを取得する
メニューからアドオンを取得する

アドオンの「Code Blocks」はGoogleドキュメントのメニューから追加します。

「メニュー」>「アドオン」>「アドオンの取得」>「G Suite Marketplace」

Code Blocksを検索する
Code Blocksを検索する

検索で「Code Blocks」を入力すると「Code Blocks」が先頭にでてきます。
これをクリック。

Code Blocksをインストール
Code Blocksをインストール

「インストール」をクリック。

Code Blocksのインストールを進める
Code Blocksのインストールを進める

「Code Blocks」のインストールには権限の許可が必要になり、手続きが始まります。

Googleアカウントを選択する
Googleアカウントを選択する

Googleドキュメントを使っているアカウントを選択します。

Code BlocksがGoogleアカウントへのアクセスをリクエストしてくる
Code BlocksがGoogleアカウントへのアクセスをリクエストしてくる

「Code Blocks」がアカウントへのアクセスを要求してきます。

利用規約とプライバシーポリシーを読んでから許可する
利用規約とプライバシーポリシーを読んでから許可する

これを「許可」します。

Code Blocksのインストールが完了
Code Blocksのインストールが完了

「Code Blocks」のインストールが終わりました。

おつかれさまでした。

「Code Blocks」を使う

実際に使っていきます。

「メニュー」>「アドオン」>「Code Blocks」>「Start」

Code Blocksを起動する
Code Blocksを起動する

メニューから「Code Blocks」を起動します。

Code Blocksの操作画面
Code Blocksの操作画面

画面右に「Code Blocks」がでてきます。

「No Background」のチェックは基本外します。
これは、白地に色が付いてソースコードが見えなくなるからです。

ハイライトするソースコードを選択してFormatをクリック
ハイライトするソースコードを選択してFormatをクリック

キレイ(ハイライト)にしたいソースコードを範囲選択します。

「Language」は基本「auto」でOK。
ハイライトがうまくいかない場合は指定します。

そして「Format」をクリック。

ハイライトしたソースコード
ハイライトしたソースコード

ソースコードがキレイ(ハイライト)になりました。

おつかれさまでした。

トラブルシューティング

「Code Blocks」を使っている経験をふまえて、いくつか気になった点をトラブルシューティングとして書きます。

「Code Blocks」が使えない

もしかしたらGoogleのセキュリティに引っかかっているかもしれません。

Googleアカウントに対するアクティビティを確認する
Googleアカウントに対するアクティビティを確認する

Gmailを開いて、Googleからメールが来ていないか確認します。

Googleに操作の心当たりがあることを知らせる
Googleに操作の心当たりがあることを知らせる

「アクティビティの確認」をしてGoogleアカウントの操作に心当たりがあることをGoogleに伝えます。

これでOKです。

コードハイライトした部分を元に戻したい

書式なしで貼り付けを利用してソースコードを元に戻せる
書式なしで貼り付けを利用してソースコードを元に戻せる

これは元に戻す簡単な方法を見つけられてません。
すみません。

一応次の操作で元に戻すことはできます。

  • 一度元に戻したいソースコードをコピーします
  • 「書式なしで貼り付け」

これで「Code Blocks」で処理する前の状態に戻すことができます。

「許可」を与えるのが不安

プライバシーポリシーをかいつまむと以下のような内容です。

  • 適法かつ公正な手段によって情報は得ている
  • 情報は様々なトラブルを防ぐため商業的に許容される手段内で保護している
  • 法的処置以外で、第三者に情報を漏らすことはない
  • etc…

パソコンやスマホを利用している人ならほとんどアプリケーション(アプリ)を使っていると思います。

この手の規約に利用者は同意しているはず。
ここで「Code Blocks」だけ気にしても仕方ないと思います。

⇒ 「Code Blocks」利用規約(英語)

私は許可をして使っていますが、おかしなメールが来たとかトラブルはいまのところ発生していません。

まとめ。

Googleドキュメントでソースコードを扱うとき、数百行程度なら便利に使えます。

特にこれまで作ったCSSやHTMLを画像付きで保存するには最適。

CSSやHTMLはパーツ毎に分けておけばソースコードの行数が多くないからです。

他にも簡単なRubyやPythonのソースコードを保存することが考えられます。

でもやっぱり規模が大きくなったら、直接GoogleDriveといったクラウドドライブにテキストファイルを保存するのがいいでしょう。

以上、みなさまの助けなれば幸いです。

初稿 2020/09/13

PC
スポンサーリンク