テクデップ(Techdep)

コンピュータ、プログラミング、DTP(InDesign)に関する備忘録

属性の併記時におけるCSSのnth-of-typeの挙動

CSSセレクタとしてnth-of-typeがある。指定した番目の要素に対してCSSを適用できる便利なものである。別段難しいセレクタではない様に見えるが、属性が併記されたときに案外勘違いしやすい挙動になって居るので、今回はそれについて書きたい。

nth-of-typeの挙動の確認

最初にCSSの入門サイトでよく見られる様な記述でnth-of-typeの挙動を確認する。

<style type="text/css">
	li:nth-of-type(2) { color : red; }
</style>
<ul>
	<li>ネオサイタマ炎上</p>
	<li>キルゾーン・スモトリ</p>
	<li>キョート殺伐都市</p>
</ul>

これをブラウザで表示すると下記の様になる。予想通り「キルゾーン・スモトリ」の文字が赤くなった。

f:id:seizo_igawa:20150411000607p:plain

属性が併記されたとき

それでは次の場合はどうだろう。先程と違ってクラス名にtitleを指定した。

<style type="text/css">
	li.title:nth-of-type(2) { color : red; }
</style>
<ul>
	<li>ネオサイタマ炎上</p>
	<li class="title">キルゾーン・スモトリ</p>
	<li class="title">キョート殺伐都市</p>
</ul>

これをブラウザで表示するとどの様に表示されるだろうか?――結果としては以下の様になる。先程と全く同じであり「キョート殺伐都市」の文字は決して赤くならない。

f:id:seizo_igawa:20150411000607p:plain

仕様通りの挙動!

これは決してバグではなく書いた通りの動きである。nth-of-typeの仕様を理解して居ないと勘違いしやすいのだが、属性が併記されたときnth-of-typeは次の手順を取る。一例として、element_name.class:nth-of-type(n)とあった場合、

  • classやidが指定されて居ても、最初はelement_name:nth-of-type(n)として動作する。
  • element_name:nth-of-type(n)にそのclassやidが指定されて居たら、そのCSSが適用される。

つまり、上述の例で説明すると先の記述は「2番目のli.titleに対するCSS」を意味するのではなく、「2番目のliで、かつtitleクラスが指定されたときに対するCSS」を意味するのである。

他サイトを見るとnth-of-typeの例はどれも要素名だけの場合で解説して居ることが多いが、属性も併記された場合など少し複雑な事例に対する説明は見かけない様な気がする。何れにせよ、CSSも思った通りに動くのではなく、書いた通りに動くことに変りはない。

InDesignの「保存」と「別名で保存」の差

InDesignの「保存」と「別名で保存」とでは、その挙動に相違があることを、自分がちゃんと把握して居なかっただけの話。InDesignのドキュメント編集で、大容量の画像を削除して保存してもファイルサイズが大きいままなので、バグか何かでデータが残ったままでは?と首を傾げて居たが、これはInDesignの仕様通りの挙動であった。

「保存」では不要情報は削除されない

InDesignの保存では、不要な情報は削除されない仕様である。つまり仮に大容量の画像データを削除したとしても内部的に保持されるわけだ。これは保存処理を高速に実行させるためであるが、その代償としてファイルサイズは減らない。

「別名で保存」は新規ファイルの作り直し

「別名で保存」を実行すれば、内部的に保持されたままの不要な情報が削除された上で保存されるから、ファイルサイズは小さくなる。当然、不要情報を削除して保存するので保存処理に多少の時間を要することになる。

公式の言及について

InDesign CS6の公式ヘルプページでは、上記の仕様についてははっきりと明言して居ない。

新しい名前でドキュメントを保存するには、ファイル/別名で保存を選択して、ファイルの保存場所と名前を指定し、「保存」をクリックします。新しく名前を付けたファイルが、アクティブなドキュメントになります。「別名で保存」コマンドを使用すると、ファイルサイズを縮小できることがあります。

InDesign ヘルプ | ドキュメントの保存

しかしながら、InDesign 1.0Jのサポートページでは上記の仕様について、はっきりと言及して居る。

E.[別名保存]コマンドを使用してファイルを保存します。

[別名保存]コマンドを使うと、不要なデータを文書から消去できます。必要なデータだけの文書は、ファイルサイズが小さく、再描画やプリントを高速に行えます。

[別名保存]コマンドを使うと、文書が完全に作り直され、現在の文書に含まれているオブジェクトとページについての情報だけが保存されます。これに対して[保存]コマンドでは、文書に新しい情報が追加され、削除されたグラフィックについての情報などの古いデータは削除されません。

InDesign 1.0J (Mac):パフォーマンスの最適化

この仕様による挙動はInDesign CS6などの新しいバージョンでも確認できる。大規模な改変を繰り返してドキュメントサイズが肥大化したら、「別名で保存」を適宜実施。

SHIROBAKOはヒーローズ・ジャーニー

先日の投稿(物語論から「艦これアニメ」を見る - 無銘書房)で「艦これアニメ」を物語論の観点から解釈しましたが、今回はアニメ業界を題材にしたアニメ作品「SHIROBAKO」を取り上げます。所謂「業界もの」に分類される本作ですが、このSHIROBAKOはヒーローズ・ジャーニーに忠実に従って居ることに気が付きました。前の題材がヒーローズ・ジャーニーを大分逸脱したものでしたから、その比較も兼ねてSHIROBAKOを物語論の観点から見ていきます。

ヒーローズ・ジャーニー

最初にSHIROBAKOのストーリーとヒーローズ・ジャーニーとの対応を示します。

話数 ヒーローズ・ジャーニー 概要
1 日常 高校時代
2~3 賢者との出会い、第一関門突破 第四話の納品危機
4~12 テスト/仲間 最終話の製作進行の担当
13~21 危険な場所への接近 第三飛行少女隊の製作
22~23 最大の試練、報酬 最終話の全没の危機
24 帰路、再生、帰還 最終話の納品

冒険への誘い(ただし、回送シーンとして示される)と拒絶に対応するくだりがないことがわかります。さて、詳細を見ていきましょう。

続きを読む

Perlの環境構築(plemv、cpanm、Carton)

 plenv、cpanm、Carton環境の構築をUbuntu 12.0 LTS(仮想マシン上)での実施するときの備忘録。
 

cpanm

 cpanmはcpanの改良版という認識。

$ sudo apt-get install cpanminus

plenv

 Perlのバージョンを簡単に切替できる様にするためのモジュール。

$ git clone git://github.com/tokuhirom/plenv.git ~/.plenv

 その後、環境変数を書き換えて、plenvのパスを通す作業をする。
 

carton

 ディレクトリ毎にPerlのモジュールを管理できるツール

$ sudo cpanm Carton

物語論から「艦これアニメ」を見る

久し振りの投稿は技術論ではなく物語論です。最近、創作論や物語論に関する書籍を読んで居るので、先日に最終話を迎えた「艦これアニメ」を題材に、同作品を物語論の観点から見てみましょう。

ヒーローズ・ジャーニー

ボグラーの「神話の法則」によると、物語は以下の構造に従って展開されます。

  • 日常
  • 冒険への誘い
  • 冒険の拒絶
  • 賢者との出会い
  • 第一関門突破
  • テスト/仲間/敵対者
  • 危険な場所への接近
  • 最大の試練
  • 報酬
  • 帰路
  • 再生
  • 帰還

これを艦これの各話ごとに見ると以下の様になります。

続きを読む

Ubuntu 12.04LTSでのRuby on Rails環境の構築

 前回の記事「Ubuntu 12.04LTSでのRuby環境構築 - 無銘書房」の続き。既にRuby 2.1.5が導入されたとする。Railsの導入からテストアプリケーションの起動までを書く。

Railsの導入

 まずはgemのバージョンを確認する。

$ gem -v

 ここでgemがないと警告が出ればapt-getで入れておく。さて、Railsの導入は先程のgemで簡単にできる。今回はRails 4.1.0を入れる。

$ gem install rails --version "=4.1.0"

 導入が終れば、いよいよテストアプリケーションの作成だ。最初にホームディレクトリ配下に適当なディレクトリを作成する。

$ mkdir dev
$ cd dev

 次にRailsでテストアプリケーション――ここでは名前はtest_appとしておく――を作成する。

$ rails new test_app

 test_appというプロジェクトディレクトリが作られるのでそこに移動し、テストアプリケーションを起動せしめる。
 

$ cd test_app
$ rails server

 ここで筆者の環境では「ExecJS::RuntimeUnavailable」という警告が出て起動に失敗した。

$ rails server
$HOME/.rvm/gems/ruby-2.1.5/gems/execjs-2.2.2/lib/execjs/runtimes.rb:51:in `autodetect':
Could not find a JavaScript runtime.
See https://github.com/sstephenson/execjs for a list of available runtimes.
(ExecJS::RuntimeUnavailable)

 「Rails - Could not find a JavaScript runtime? - Stack Overflow」によれば、nodejsがないことが原因なので、apt-getでnodejsを入れる。

$ sudo apt-get install nodejs

 nodejsの導入後再びアプリケーションを起動させようとしたときに以下の様に表示せられれば問題ない。

$ rails server
=> Booting WEBrick
=> Rails 4.1.0 application starting in development on http://0.0.0.0:3000
=> Run `rails server -h` for more startup options
=> Notice: server is listening on all interfaces (0.0.0.0). Consider using 127.0.0.1 (--binding option)
=> Ctrl-C to shutdown server
[2015-01-15 23:38:27] INFO  WEBrick 1.3.1
[2015-01-15 23:38:27] INFO  ruby 2.1.5 (2014-11-13) [i686-linux]
[2015-01-15 23:38:27] INFO  WEBrick::HTTPServer#start: pid=21646 port=3000

 最後にブラウザで「http://localhost:3000/」に繋いで画面が表示されれば、Ruby on Railsが正常に導入されたと判断できる。
 

Ubuntu 12.04LTSでのRuby環境構築

 自己紹介にPerlという文字列を入れておきながら、新年最初の記事がRubyの導入であることに我ながら流石に何だかなと思う。
 閑話休題VirtualBox上のUbuntu 12.04LTSへのRuby環境の導入について書いておく。もちろん、Ubuntuには既定でRubyはインストールされて居るけれども、バージョンが1.9.1と古いものあるからRVMを利用して新しいバージョンを導入したい。基本的な手順としては、

を参考にして導入した。備忘録がてらコマンドだけをつらつらと書いていく。

cURLの導入

 初めにcURLを導入する。

$ sudo apt-get install curl

RVMの導入

$ curl -L https://get.rvm.io | bash -s stable

 ここで筆者の環境では公開鍵がないと警告が出て失敗したので、エラーメッセージに従って公開鍵を取得した。

$ curl -sSL https://rvm.io/mpapis.asc | gpg --import -

 公開鍵の取得後、先程のcURLの導入コマンドを再実行する。そして、rvmを有効化せしめるために下記コマンドを実行する。

$ source $HOME/.rvm/scripts/rvm

 正常にrvmが導入されたのなら、以下のコマンドでrvmを通じて導入できるRubyのバージョンが示される。

$ rvm list known

Rubyの導入

 今回は2.1.0系列の最終版たる2.1.5を入れよう。

$ rvm install ruby-2.1.5 --default

 必要なパッケージもまとめてインストールされるが、時間が少し掛かることに注意する。インストール終了後、以下のコマンドのうち何れかで現在のRubyバージョンを確認できる。 

$ ruby -v
$ which ruby

 指定したバージョンが表示されたら、正常にインストールされて居る。
 rvmの管理下に置かれて居るRubyの確認は以下の通り。

$ rvm list

 Rubyのバージョン切替は次の様になる。

$ rvm use [version]

 大体この様なものであろうか。後日、Railsの導入の備忘録も書いておきたい。