キーキャップの本をチームで技術書典7に出した話。InDesignの話題中心。
目次
はじめに
チーム構成
・リーダー:1人
・執筆者:3人
・校閲:1人
・校閲・デザインFB・会場掲示物デザイン:1人
・本デザイン:1人
(たぶん)
担当した部分
私はメンバーが執筆し校閲された文章を本に印刷するデータに加工する、本周りのデザインを担当しました。
本データを作る上で重要な話
あとでも紹介しますが、本にするデータを作成するときは最初が一番重要です。
あらかじめ印刷所を決めるだけではなく、本の向き、綴じ方、モノクロ・カラーのページ、を決めた上で、印刷所のフォーマットに沿ってデータを作成する必要があります。
ここを怠ると、あとでとても面倒なことになるので気をつけましょう。
本を作る
今回の作成では、執筆作業とデザインは分離する形で作成しました。
別アプリケーションで作成することで、本のデータを作る時に、執筆者のことは考えずに自由なアプリケーションで制作が実施できるようになります。
今回はMarkDown(執筆)+InDesign(本のデザイン)で制作をしました。
InDesignを採用した理由
InDesignを採用したのは、私が一番使ったことがあって使いやすからです。
極端な話、パワポがあればなんでもできると思うんですが、使いやすさが段違いなので採用しました。
利点
-
要素の厳密でかつ柔軟な配置が可能
-
Illustratorやphotoshopデータとの連携が楽
-
MarkDownとの相性が良い
-
だいたいなんでもできる
欠点
Indesign自体は、細かなイラストなどを制作するのには向いていませんが、PhotoshopやIllustratorとの相性が良いので、ベクターでもラスターでも複雑なグラフィクデザインに対応することができます。
また、InDesignでは、テキストボックスをあらかじめ空やサンプルテキストを流し込んだ状態で用意しておき、原稿が完成したら後から流し込むということが簡単にできるので、自分以外が執筆している時は大変便利です。
原稿は期日に絶対やってこない
本番で印刷する原稿は、執筆されれば終わりではなく、校閲が入ってからの修正が入ってからの校閲…と執筆の期限が守られていても、想定外に修正ややりとりに時間がかかって遅れたりします。
私が大学のときサークルで冊子を作っていた時は、印刷をしないと間に合わない時間を過ぎてから原稿がやってきました。(その時は深夜に自宅のレーザープリンターで印刷して、気合で終わらせましたが…)
なので、原稿データはギリギリまでやってこない前提で動く必要があります。
InDesignは、レイアウトだけ最初に組んでおいたり、サンプルテキストを簡単に割り付けたりすることができるので、慣れれば簡単に本番原稿なきデザインができるようになります。
Git + MarkDown + InDesignの相性が良い
また、MarkDownとの相性が良かったのも、執筆者としても、本のデータ化(デザイン)を担当した私としてもとても相性が良かったです。
執筆者としては、markdownファイルの実態はテキストファイルですから、エンジニアが大好きなGitで管理すれば、データの共有や同期、差分の管理などが容易にできます。
テキストファイルベースなので、VimやSublime Text、メモ帳で編集することが可能です。
本のデータ化をする方としても、常に最新版をGitで追うことができ、校閲で変更された文章は、行単位でどこが変更されたかがわかるので、無駄に考えることなく都度修正をすることができます。
もしGitを使わなかったとしたら、やり取りをしてファイルを落として文章を差し替えすることになるので、「修正版キーキャップの歴史本文①(1).txt」とか、「old_修正版キーキャップの歴史本文①追加分(1)_____.txt」とか増えてきて、間違えて旧版のテキストを貼り付けたりしてしまいかねません。
MarkDownの文章をIndesignに反映するには、単にテキストをコピペするのもアリですが、pandocを使えば段落スタイル(見出しなど)の情報もまとめて反映させることができます。
pandocで出力される段落スタイルと文字の設定等を紐付けておくことで、完成原稿がやって来る前に、見出しや本文のデザインをしておいて、後から一発で反映させることが可能になります。
pandocはこちらの記事を参考にさせていただきました。
https://qiita.com/JHiyama/items/043a064a6eccf69c7636
※CUIツールなので、慣れてないと導入にやや気合いがいります。
pandocを使う上で一つ注意しなければいけないのが、MarkDownで画像を記述するとき事前に記述方法をすり合わせをしておかないと面倒くさいことになります。
というのも、通常の写真サイズのままInDesignに挿入してしまうと、ページに入りきらずに枠外へ行ってしまうので、画像サイズを小さく指定しておく必要があります。
データ作成するときの設定とか
InDesignで組むとき最初に悩むのが、レイアウトグリッドを使うかマージン・段組を使うかなんじゃないんでしょうか。レイアウトグリッドの方は文集のような規則的なレイアウトで文字を組みたい時に利用します。初期では縦組みになっています。技術書の場合、あまり和文等幅を使えないので使うメリットは少ないかなと思います。
一方でマージン・段組は比較的自由なレイアウトで文字を組みたい時に利用します。私は基本的にこちらの方を利用します。デフォルトだとまっさらですが、ドキュメントグリッドやカスタマイズ可能なベースライングリッドを活用することで、グリッドシステムを使ったデザインもできます。ちなみに、ベースライングリッドはオブジェクト吸着します。便利。
印刷所のデータ入稿で失敗した
私というか、私たちはここで大コケしました。
技術書や漫画など冊子類のデータを作り始めるときは、事前に本の向きや紙の大きさを決めます。しかし、印刷所によってそれぞれ細かい制約や対応しなければいけない項目があります。
私は以前チラシの印刷を業者に依頼したことがあり、そのときはトンボだけつければ大丈夫だったので、その感覚でろくに制約を確認せずにデータ制作を始めてしまったので、後が大変でした。
同じ印刷業者でも、印刷する種類に応じて、こちらで必要な対応が変わってきます。
今回印刷をお願いしたnikko-pc(http://www.nikko-pc.com/index/top.html)さんでは、冊子類を印刷するときは、ノンブル(ページ番号表記)が必須でした。デザイン上、ページの左右下に大事な写真を配置すると、ページ番号を(わざとページ番号をずらすのもアリかもしれませんが)載せなくてはいけなくなるので、あまりよろしくないな・・・と思いつつ配置する羽目になりました。
確かに、以前に我が家のレーザープリンターで冊子を数百部印刷した時も、途中ノンブルがあってもページを見失いかけたことがあったので、作業者の立場からしたら確かに必要だなと感じたました。
もしどうしてもつけたくない場合は、つくけなくても良い業者さんもあるとは思うので事前に調査と確認をとった上でデータを作り始めるのが吉だと思います。
その他注意事項
Githubでデザインデータを管理する場合、1ファイル100MBを超えると上限に引っかかってpushできないらしいので、ファイルサイズをそれ以下にする必要があります。
高画質な写真をIllustratorやInDesignに埋め込むと、一瞬で超える可能性があるので注意が必要です。埋め込まないほうが、写真の差し替えをする時などに自動で変わってくれるので便利だと思います。
さいごに
個人でいると、独力では本のデータを作れても本のコンテンツを作ったり、出店したりすることは難しいので、有意義な機会となりました!
アドベントカレンダー6日目の明日はint_sorarinuさんです!
VisualBasicやC#で簡単なクライアント・サーバープログラムをつくろう 第二回:サーバー編
はじめに
前回のクライアントアプリ制作に引き続き、今回はサーバー側のアプリ制作と実際の動作確認を行います!
VisualBasicやC#で簡単なクライアント・サーバープログラムをつくろう 第一回:クライアント編 - まやのはてな
まだクライアントや、当クラスライブラリでできることについての解説を閲覧されていない方は、先に上記記事をご覧ください。
ダウンロード
Dropbox - ServerSampleProgram_v0_0.zip
ファイル名をクリックしてダウンロードします。
前回とはサンプルプログラムがサーバーアプリに置き換わっています。
ダウンロードしたファイル内の構成
・クラスライブラリ本体
プロジェクトの新規作成時の参照の追加に使用します。
なお、クライアントとサーバーの両方のクラスライブラリが封入されています。
・サーバー・クライアントアプリ
サーバーとクライアントの機能を備えもつ、便利なアプリです。
サンプルプログラムの動作確認、サーバーとクライアントの挙動の確認に使用します。
・サンプルプログラム
今回制作するサーバーアプリの完成版が入っています。
ソースプロジェクト
同封しているクラスライブラリおよびアプリケーションのすべてのソースプロジェクトがあります。コードの中身を詳しく知りたい方におすすめです。
サーバークラスライブラリの使い方
参照追加
例によって参照の追加を行います。
ダウンロードしたファイルの中にある
クラスライブラリ本体(フォルダー)\サーバー(フォルダー)\Server.dll
を参照に追加してください。なお、Server.dllを他のフォルダーに移してから参照の追加を行いたい場合は、必ずサーバー(フォルダー)内のすべてのファイルを一緒に移してください。
追加が終わったら、下記コードをコードファイルの一番上に入力します。
これにより、Serverと入力しなくてもServer内のクラスを参照できるようになります。
宣言
宣言ができたら、早速サーバーの動作を開始さてみましょう。
はい、おしまい!
これだけでサーバーとしての動作を開始してくれます。ただし、ポート番号は最初にスタートさせるときの一回しか指定することができないので、注意が必要です。
もし動作中にポート番号を変更しようと思ったら、その都度アプリ自体を再起動する必要があります。
サーバーが動作したからといって、クライアントから送られてきたメッセージを受信できないと意味がありません。そこで、ここからはクライアントについてやクライアントから送られてくる情報の受け取り方を紹介します。
メッセージを受信する
ようは、メッセージが送られてきたら発生するイベントがあって、それを登録したうえで、発生時にe.Messageで取得すればいいということです。
しかしここで注意があります。
実は、通常とは違う別のスレッドでイベントが発生するのです。
何が問題かといいますと、
listBox1.Items.Add(e.Message); (C#)
ListBox1.Items.Add(e.Message) (VB)
のようなコントロールを操作することができません。
Console.WriteLineメソッドの場合は、どのスレッドから操作しても大丈夫なため特に問題がありませんでしたが、コントロールだと別のスレッドから操作するのに特別な処理を書き加えなければいけません。
▼それがこちら▼
すこしごちゃごちゃしたコードとなってしまいますが、これでコントロールの操作も行うことができます。また、Invokeの{}内(C#)もしくはSub() End Sub内(VB)であればいくつでも処理を記述することができます。
画像を受信する
メッセージの受信と違いはほとんどありません。イベントが発生したときに、メッセージと画像のどちらが送られてきたかわからないので、e.Typeで必ず調べてください。送られてきていないほうはnull(VBはNothing)が入っているのでエラーの原因になります。
クライアントが接続してきたことを知る
今だれがサーバーと接続しているかを確認するのに利用することができます
クライアントが接続を切断してきたことを知る
クライアントが接続してきたときとほぼ同じです。
サーバーを作る
以上の使い方を理解したうえで、実際に簡単なサーバーアプリを作ってみましょう。
プロジェクトの作成
C#もしくはVisualBasicで、Windows フォーム アプリケーションもしくはWPFアプリケーションを選択して、新規にプロジェクトを作成してください。
今回はC#とVBのWindows フォーム アプリケーションのソースコードを載せますが、VBは自動翻譯したものに手を加える作り方をしているので、おかしな書き方になってるかもしれないです。
コントロールの設置
以下の画像のように、コントロールを配置してみてください。
今回使用するコントロール (VBでは変数名の先頭が大文字になります)
- listBox1 (ListBox、メッセージの表示と画像の選択用)
- pictureBox1 (PictureBox、画像表示用)
表示しかしないのでとてもシンプルな作りです。
コーディング
上記と全く同じコントロール名、プロジェク名、フォーム名にすれば、下のソースコードをコピペするだけでしっかり動作してくれます(笑)
プロジェクト名はSampleServerApplicationCsp(C#)、SampleServerApplicationVb(VB)で、フォームの名前がForm1です。
VBは自動翻譯の関係で、
となってしまっていますが、最初からe.XXXXはe.IPAddressにしろe.MessageにしろString型ですので、
のようにConvert.ToString()をいれる必要はありません。
動作確認
これで、クライアントアプリ、サーバーアプリの両方が揃いました。
実際にちゃんと動くか試してみましょう。
確認方法
1.サーバーを起動(該当プロジェクトを開いて、F5キーを押下)
2.クライアントを起動(同上)
3.IPアドレス、ポート番号を設定する
サーバーとクライアントが同じPCの場合は、IPアドレスが127.0.0.1です。
違うPC同士の通信の場合は、サーバー側のPCのIPアドレスを入力します。
ポート番号はサーバーアプリのほうが9000固定なので必ず9000と入力します。
4.クライアントの接続をクリックする
このとき、エラーメッセージが表示されずに、サーバーに「[XXX.XXX.XXX.XXX]との接続が新たに確立されました」と表示されたら成功です。
5.メッセージを送信する
クライアントのテキストボックスに送るメッセージを入力し、メッセージを送信ボタンを押します。
無事に送信することができたら、テキストボックスから文字が消え、サーバーのほうにメッセージが表示されているはずです。
6.画像を送信する
「画像を選択」をクリックし、好きな画像を選択したら「画像を送信」をクリックして送信します。サーバー側では「画像を受信しました、この項目を選択すると見ることができます」と表示されるので、その項目をクリックすれば右側に送った画像が表示されます。
最後に
今回のサーバー・クライアントのクラスライブラリは高校の課題研究(卒業研究)で使うために制作したものです。記念の意も込めて紹介させていただきました。
最後まで見ていただきありがとうございます。
少しでも役に立てたら幸いです。
どうでもいいけど、抹茶ラテ飲みたい...
VisualBasicやC#で簡単なクライアント・サーバープログラムをつくろう 第一回:クライアント編
はじめに
今回は、筆者が制作したサーバーとクライアントのクラスライブラリを使用してメッセージと画像データのやりとりが行えるアプリケーションをつくってみましょう!
まずは各クラスライブラリでできることを紹介します。
クライアントでできること
- IPv4アドレスの指定
- ポート番号の指定
- メッセージ(文字列)の送信
- 画像ファイルの送信 ※1ファイルあたり、約10MBまで
サーバーでできること
- ポート番号の指定
- 複数クライアントからの同時受信
- メッセージの受信
- 画像ファイルの受信
- 受信時イベント発生
なお、片方のみのクラスライブラリを使用してデータの送受信したい場合は、先頭の1バイトにメッセージか画像かを判断する情報が含まれているため、注意が必要です。
ダウンロード
Dropbox - ClientSampleProgram_v0_0.zip
ファイル名をクリックしてダウンロードします。
ダウンロードしたファイル内の構成
・クラスライブラリ本体
プロジェクトの新規作成時の参照の追加に使用します。
なお、クライアントとサーバーの両方のクラスライブラリが封入されています。
・サーバー・クライアントアプリ
サーバーとクライアントの機能を備えもつ、便利なアプリです。
サンプルプログラムの動作確認、サーバーとクライアントの挙動の確認に使用します。
・サンプルプログラム
今回制作するクライアントアプリの完成版が入っています。
ソースプロジェクト
同封しているクラスライブラリおよびアプリケーションのすべてのソースプロジェクトがあります。コードの中身を詳しく知りたい方におすすめです。
クライアントクラスライブラリの使い方
参照追加
ダウンロードしたファイルの中にある
クラスライブラリ本体(フォルダー)\クライアント(フォルダー)\ClientLib.dll
を参照に追加してください。なお、ClientLib.dllを他のフォルダーに移してから参照の追加を行いたい場合は、必ずサーバー(フォルダー)内のすべてのファイルを一緒に移してください。
そして、下記コードをコードファイルの先頭に入力します。
これにより、ClientLibと入力せずともClientLib内のクラスを参照できるようになります。
宣言
自動変数にしてしまうと、送信のたびに接続処理を行わなければいけなくなってしまうので、避けましょう。
次はサーバーに接続
メッセージを送る
接続に失敗すると例外を投げます。try&catchで例外を拾わないと、動作が停止してしまうかもしれないので、必ず挿入してください。
画像を送る
接続を終了する
接続先を変えるときや、アプリケーションを終了するときは必ず接続を終了する処理を行いましょう。
クライアントを作る
以上の使い方を理解したうえで、実際に簡単なクライアントアプリを作ってみましょう。
プロジェクトの作成
C#もしくはVisualBasicで、Windows フォーム アプリケーションもしくはWPFアプリケーションを選択して、新規にプロジェクトを作成してください。
今回はC#とVBのWindows フォーム アプリケーションのソースコードを載せますが、VBは自動翻譯したものに手を加える作り方をしているので、おかしな書き方になってるかもしれないです。
コントロールの設置
以下の画像のように、コントロールを配置してみてください。
今回使用するコントロール
- pictureBox1 (PictureBox、送信する画像の確認)
- textBox1 (TextBox、相手接続先のIPアドレスを指定)
- textBox2 (TextBox、相手接続先のポート番号を指定)
- textBox3 (TextBox、送信するメッセージを入力するため)
- button1 (Button、サーバーとの接続を行う指示をするため)
- button2 (Button、画像を選択するため)
- button3 (Button、画像を送信するため)
- button4 (Button、メッセージを送信するため)
- label1 (Label、表示用)
- label2 (Label、表示用)
コーディング
上記と全く同じコントロール名、プロジェク名、フォーム名にすれば、下のソースコードをコピペするだけでしっかり動作してくれます(笑)
プロジェクト名はSampleClientApplicationCsp(C#)、SampleClientApplicationVb(VB)で、フォームの名前がForm1です。
最後に
いかかでしたか?
例外処理でコードがかさばったりはしますが、クライアントとしての処理はすごく簡潔なコードで記述できたのではないでしょうか。
次回はサーバーのクラスライブラリの使い方と、それを用いたアプリケーションの作り方を解説したいと思います。
次回
第二回を投稿しました。是非ご覧ください!
VisualBasicやC#で簡単なクライアント・サーバープログラムをつくろう 第二回:サーバー編 - まやのはてな
Microsoft Visual Studio Express 2013 for Windows Desktopのインストール方法
VisualStudioにはバージョンごとに複数のエディションが用意されており、今回は無料で入手できる"Express"エディションのインストール方法について紹介します。
必要な手順は以下のとおりです
1.インストーラを用意する
2.インストールを実行
通常のデスクトップアプリとインストール方法は何ら変わりありませんが、インストール中に大きなのデータをダウンロードするため、時間がかかります。
1.インストーラの用意
こちらに移動して”ダウンロード”をクリックします
”ダウンロードするプログラムを選んでください。”と表示されたら、サイズの小さい"wdexpress_full.exeを選択してください
※サイズの大きいほうは、オフラインで利用できる代わりにインストール時にマウントする必要があるためおすすめできません。
"次へ"をクリックしてファイルをダウンロードします
2.インストールを実行
ダウンロードしたファイルを実行します(IEでは”実行”Firefoxではファイル名をクリック)
セキュリティの警告が出たら”はい”をクリック
”ライセンス条項およびプライバシーポリシーに同意します。”
にチェックを入れると”インストール”があられるので、それをクリック
このような画面が出たら”はい”をクリック
この画面がでたらインストール完了です。
旅行記-その1
Twitterのかわりに画像をここに載せます。
※脳内のコトバをそのまま文字に変換してるので、日本語おかしいかもw
1.いちごミルク
2.赤城高原サービスエリア
3.”メンチカツ”カレー
メンチカツ > とんかつ
めっちゃ辛い;
4.緑茶
5.-1℃(外気温)
6.関越トンネル入り口の信号機
7.300円高い
8.なんて言うんだっけ
ぶれてる><
9.ロビー
10.あんまん
こしあん
11.旅館
12.道路から水が出てゆきを溶かすやつ
13.乗ってきたくるま
14.木
11番以降の画像は3脚でカメラを固定し、30秒間シャッター解放を行って撮影してます。暗かったので。
貼ってない画像↓
http://f.hatena.ne.jp/MayaGalaxy/%E3%81%BE%E3%82%84%E3%83%96%E3%83%AD/
眠いのでねます..zzZZZ