読者です 読者をやめる 読者になる 読者になる

arinoth's memo

arinothのメモ

InDesignでソースコードを自動的(?)に色分けする小技

InDesignソースコードを色分けする小技(Visual StudioXcode、Prettifyの色そのままに)があるんですが、先日「教えてください」といわれまして、一応自分で見つけた当社独自のワザだからどうしようか……とちょっと迷ったのですが、よくよく考えてみると毎月ソースコードが出てくる本を編集製作しているのに、色分けしているのはごく一部なので、教えてもあまり影響ないなーと。

要点をネタばらししてしまうと、VS、XcodeEclipseChromeなどからWordかテキストエディットにコピペすると色がそのまま来るんですね。後はRTF(リッチテキストフォーマット)で保存して、InDesignの配置機能で読み込むだけです。RTFの色がスウォッチになるので、後はちょちょっと微調整すればOKです。

f:id:arinoth:20140415224924j:plain

あ、¥がバックスラッシュになってる。まぁ、あくまでサンプルということで……

最初にこのタイプの仕事が来たときはソースコード全部プリントアウトして、マーカー5〜6色買ってきて根性で色分けしたのですが、さすがにつら過ぎて……。二回目に来たときに編み出したのがこれです。

続きを読む

本文グリッド揃えで画像やソースコードの下空きがバラつく理由と対処方法

InDesign DTP

最近初校が終わったあたりで、「ソースコードや画像の下空きを統一してください」といわれることがよくあります。下の画像をよく見ると、各ソースコードの下の空きがばらついているのがわかると思います。

f:id:arinoth:20140323021514p:plain

これは揃えてないわけではなくて、「本文がグリッド揃えになっている」デザインの構造上、「揃えることが不可能」なのです。

どうしてと聞かれることもよくあるんですが、揃わない理由が結構ややこしく、毎回図を作って説明したりしています。これも結構大変なので、汎用的に使える説明用の図と、事前に揃える方法について説明しておこうというのがこの記事の趣旨です。

画像やソースコードの下が揃わない理由

言葉で説明するのはむずかしいのですが、グリッドを表示させた状態を見ると一目瞭然です。

f:id:arinoth:20140323021457p:plain

本文のグリッド揃えがオンの場合、グリッドの行送りに沿って文字が配置されます(中見出しは2行取り中央なので例外です)。ソースコードや画像の行送りは本文と違うため、本文グリッドとのずれがソースコードや画像の下に集中することになります。

ソースコードの行送りを本文と合わせれば単純なのですが、そうすると今度はソースコードが読みにくくなると思います。本文より狭めにデザインされるのが一般的です。

本文のグリッド揃えを「なし」にすると

要するに本文のグリッド揃えが原因なので、試しにスタイルを変えて「なし」にしてみます。

f:id:arinoth:20140323022115p:plain

すると、初期設定だとグリッド揃えをオンにしている場合は行送りの設定は「自動(文字サイズと同じ)」になっているので、行がグリッドを無視してギュッと詰まります。

f:id:arinoth:20140323022209p:plain

グリッド揃え「なし」の状態で整える

ここでグリッドと同じになるよう行送りを設定してみます。

f:id:arinoth:20140323022429p:plain

※ここではフレームグリッドの行送り指定に合わせて「21H」と設定したのですが、微妙にずれているので「22H」が正解っぽいです。

これでだいぶ似た感じになります。

f:id:arinoth:20140323022500p:plain

ただ、中見出しの下の空きがないせいでまだズレがあるので(中見出しは2行取り中央で、グリッド揃えオン時はさらに上下に行間分の空きが足される)、行間と同じだけの段落間スペースを設定してみます。

f:id:arinoth:20140323022652p:plain

これでソースコードが入る前まではグリッド揃え有効時と同じ見た目になりました。しかし、ソースコードの下側の文章はグリッドと合わなくなります。

f:id:arinoth:20140323022710p:plain

とはいえ、グリッドを消してみれば、ほとんど違和感はないはずです。

f:id:arinoth:20140323023149p:plain

グリッド揃え「なし」の問題点

当然ながら、グリッド揃えが初期設定で有効になっているのは理由がありまして、グリッド揃えを「なし」にすると、ページの左右で行が揃わなくなってしまいます。なので、ソースコードや図の数が少ない本だと逆にみっともなく見える場合があります。特にページ末まで文字が入るときは、左右で揃わないことが結構目立つはずです。

f:id:arinoth:20140323041152p:plain

f:id:arinoth:20140323041202p:plain

とはいえ最近のIT書だと、文章だけずっと続くことはあまりなく、ページ途中に画像やソースコードが入るもののほうが多いので、グリッド揃えなしのほうがきれいに見えるケースもあると思います。

昔から本作りに従事している人は「字取り行取り」で訓練されているので違和感ありますが、 読む人にしてみれば、そんなに気になるポイントでもないでしょうし……。

揃え方がまったく違うので、初校以降で修正するのは時間と手間が掛かりすぎて原則NGですが、デザイン作成段階でクライアントとよく相談して、グリッド揃え「なし」で行くと決めてやるのであればアリなのではないかと思います。


追記:改めて説明を書いてみて思ったのですが、グリッド揃えを有効にして得られるものがずいぶん小さいなと。それと実は特に理由もなく、なんとなく書籍だからフレームグリッドが使われてきただけなのでは?という疑惑もなきにしもあらず。 IT書のように図表が多数混ざる本では、グリッド揃えなしでデザインしてもらうほうが正解なんではないかという気がかなりしています。

本文グリッド揃えでインライン画像がずれる理由

InDesign DTP

何年もInDesign触っていていまさら気づくことか?という話なのですが、グリッド揃えの本文中にインラインで画像を入れたときにずれる理由とその対処法がわかったのでメモ代わりに書いておきます。

全部グリッド揃えだと……

普通に改行してインライン画像を挿入すると、こんな風に画像のサイズによって上下の空きがバラバラな美しくない組みになってしまいます。

f:id:arinoth:20140323004903p:plain

グリッド揃えの初期設定が「仮想ボディの中央」なので、画像が入る分の行数に対して中央揃えになっているのです。

インライン行をグリッド揃えなしに……

ここでグリッド揃えを「なし」にした段落スタイルを作成します。

f:id:arinoth:20140323005133p:plain

インライン画像の段落に対してこの段落スタイルを設定すると、画像が上の行に密着した状態になります。

f:id:arinoth:20140323005348p:plain

ちょっとうまい仕組みの説明が思いつかないのですが、とにかくグリッド揃えなしの場合は、前行の下端にインライン画像が密着するのです。

画像の上下の空きを調整

また段落スタイルを開いて、上下の段落間を設定します。

f:id:arinoth:20140323005429p:plain

これでインライン画像の上空きを統一できます。

f:id:arinoth:20140323010156p:plain

本文はグリッド揃えのママなので、画像の下の空きを揃えることはできません。これはどうしようもないのですが、その話についてはまた改めて……。

asus vivo tab note 8を買った話

asusの8インチWindows8タブレットvivo tab note 8(以下vivo8)を買いました。

f:id:arinoth:20140124220932j:plain

もともとiPhoneと会社支給のMacbookを持っていたので、

  • 個人用に手軽に使えるPCがほしい
  • 打ち合わせに持って行きやすいハンディなデバイスがほしい
  • Windows版のOfficeが動くマシンがほしい

といった条件からWin8タブレットに目を付け、 HDMIは周辺機器で代替できるけど、スタイラスは後付けできない という理由からvivo 8を選んだわけです。

まぁ、買ってきてすぐの間はかなり使いにくく感じて後悔しましたが、 もろもろセッティングを自分好み――というよりデスクトップアプリがタッチ操作しやすくなるように変えた今はまずまず満足というところ。

iPhoneiPadみたいにデフォルトで使いやすいデバイスに比べての時代遅れ感、 Windows中心の時代の終わりはひしひしと感じるものの、 400グラム未満の小ささでパソコンとまったく同じことができるというのは すげえなぁと感じます。

そのアタリの、不満とセッティングについてメモしておこうと。

続きを読む

Meteorで非公開ツール用のログインフォームを作る(その4)

さて、(たぶん)最後のステップとして、ユーザーの削除や情報変更を行うユーザー管理画面を作成してみます。

f:id:arinoth:20140119171014p:plain

これまでとだいぶ見た目が変わっていますが、見よう見まねでBootstrapなるものを入れ、CSSを少しいじって、ログインコントロール部分が固定ヘッダになるよう調整してみました。 また、テンプレートを利用してアプリケーション名を手軽に変更できるようにもしてみています。

続きを読む

Meteorで非公開ツール用のログインフォームを作る(その3)

前回テンプレートの再レンダリングを避けてjQueryで表示/非表示をするインターフェースにしましたが、 考えてみると部分的とはいえMeteorで再レンダリングを避けると長所をつぶすようなものだし、 そもそもユーザー作成を折りたたみUIにする意味があまりないので、 ダイアログボックスを使ったインターフェースに変更します。

f:id:arinoth:20140118230004p:plain

続きを読む

Meteorで非公開ツール用のログインフォームを作る(その2)

前回に引き続いて非公開Webアプリ用のログインフォームの作成をば。ログイン中の画面が表示されるところまで作ったので、この画面を折りたためるようにして追加のユーザーを作成できるようにします。

f:id:arinoth:20140116020215p:plain

f:id:arinoth:20140116020225p:plain

f:id:arinoth:20140116020238p:plain

続きを読む