けんちゃん 喋る S
Atomで書いたコード。
印刷したいと思ったら、できひんのか~い!
ともった人向けの記事です。(^^;




1.AtomからGoogleDocsで印刷する方法 

Atomでコードを書いて勉強中のけんちゃんです。
現在、JavaScriptを勉強しています。
入門書を何冊か読んだので、週刊アスキーのJavaScript記事を実際に書いて遊んでみようと考えていました。
Codeを入力してみると、なかなかうまく動作しないんですよね。
初心者なんで。
印刷しての流れなんかを確認しようと、Atomの「ファイル」タブをクリックしても・・・

けんちゃん 悲しい S
ん?
「印刷」ないじゃん!

まさかのエディタで印刷機能がない!
というより、エディタだから印刷機能がないのか?!
とにかく印刷機能がない。

そこで早速対策を考えました。
Atomのパッケージを探しましたが、どうやらPDF出力のものばかりです。
MicrosoftWordでコピペして印刷しようとしましたが、変数などを色分けできないので印刷してもわかりづらいのでやめました。
GoogleDocsのアドオンを使うと、コードの色分けもできたので紹介します。


この方法で印刷するポイント

・Atomのパッケージは使わない(PDF出力なので)
・MicrosoftWordではなく、GoogleDocsを使う
・GoogleDocsをアドオンを使って自動で色分けする
・GoogleDocsを使うのでお金がかからない







2.GoogleDocsにアドオン(CodeBlocks)を入れる 

GoogleDocsにはアドオン(追加機能)を入れることができます。
コードの変数などを色分けするアドオンは何種類かありますが、CodeBlocksというアドオンを入れてみたので、それを紹介します。


GoogleDocs Adon
まず、アドオンを入れてみましょう。
①「アドオン」をクリック
②「アドオンを取得」をクリック


GoogleDocs Adon Code Blocks
上のような画面が出てくるので
①「Code Blocks」と入力
②「無料」をクリックしてインストール
 ※ 私はすでにインストールしているので、「管理」の表示になっています。


Code Blocks Start
インストールできたら、さっそく使ってみましょう。
サンプルとして、私が入力したコードを開いています。

①「アドオン」をクリック
②「Code Blocks」をクリック
③「Start」をクリック

すると、右にCode Blocksのウィンドウが表示されます。
(上の写真は、まだ表示されていない状態です。)




3.CodeBlocksのテーマを決める 

CodeBlocksは、テーマがあるのでそれを決めます。
テーマは、背景やコードの色の分け方が何種類もプリセットされたものです。

Code Blocks Theme
ここでテーマが選択できます。
めちゃくちゃたくさんありますが、正直あんまり変わりばえしないです。


Code Blocks Language
コードの言語もここで選べます。
これまた、種類が豊富です。
プログラム言語ってこんなにあるんですね。


Code Blocks Preview
それでは、実際にコードを色分けしましょう。

①色分けしたいコードを選択します
 (全部色分けしたかったら、全部選択します)
②言語を選びます
③テーマを選びます
④「Preview」を押すと、下にプレビューが表示されます
⑤「Format」を押すと、選択したコード(画面左側の本文)に反映されます

説明を書くと長いですが、やってみると一瞬です。






4.印刷する 

では、実際に印刷してみましょう!
Print Previiew
これが印刷プレビューです。
ちゃんと色分けされているのがわかるでしょ?

印刷は、
「ファイル」→「印刷」です。
Microsoft Wordと一緒ですね!




5.まとめ 

いかがだったでしょうか。
一度アドオンを入れてテーマを決めてしまえば、あとは

①コードをコピペする。
②アドオンを選択する。
③印刷する。

のスリーステップで印刷できてしまいます。
印刷してみたいなと思う方は、是非一度やってみてください。


けんちゃん 笑う S
印刷できると書き込めるので、コードの流れなどを整理しやすいです!