陽炎空華

最近、仕事の関係でよくEPUBの作成をするのですが、『sigil』などのソフトを使い、サクッと作って『はい、完成！』というわけにはいきません。
作ったEPUBファイルが問題がないかどうか（EPUBの仕様に沿っているかどうか）の構文チェックしなといけないわけで。
その為のツールとして『epubcheck』が公開されています。
ちなみに、epubcheckはインストールして使用するものではなく、コマンドプロンプトから実行しないとダメみたいです。
これって、素人には敷居が高いような気もするんですが……。

■epubcheckの使い方（参考ページ）
epub作成方法（フリーソフトwindows）.epub - NAVER まとめ
EPUBの検証（epubcheckの使い方） : EPUB開発ノート
便利なepubcheckを使ってみよう（上）　使い方編 | TechRacho
EPUB Check　整合性確認ツール - epubcafé
EpubCheck エラーメッセージ一覧日本語訳

上のページを参考にしながら、ちまちまチェックをかけていたのですが、このコマンド入力とかが一々面倒だなぁ〜と。
そこで、フォルダを渡すとEPUBファイルを作成し、EPUBファイルを渡すと構文をチェックするようなバッチファイルを作ってみました。

////////////////////////////////////
@echo off
title ePub Check
:CHECKSTART
set INPUTFILE=
set /p INPUTFILE="チェックするファイルを入力>"

::ファイルが存在するかどうかをチェックする。
if not exist "%INPUTFILE%" goto NOFILE

::フォルダかどうかをチェックする。
set FOLDER=
set FOLDER=%INPUTFILE%\
if not exist "%FOLDER%" goto EPUBCHECK

::INPUTFILEで渡されたフォルダからePubを作成します。
echo.
echo ePubを作成します。
echo.
java -jar epubcheck-3.0.1.jar -mode "exp" -save %INPUTFILE%
echo.
goto CHECKSTART

::INPUTFILEで渡されたePubファイルを検証します。
:EPUBCHECK
echo.
echo ePubを検証します。
echo.
java -jar epubcheck-3.0.1.jar %INPUTFILE%
echo.
goto CHECKSTART

::INPUTFILEに入力されたファイルパスが存在しなかった場合の処理。
:NOFILE
echo.
echo %INPUTFILE% は存在しませんでした。
echo.
goto CHECKSTART
////////////////////////////////////

『.bat』形式で保存して、ダウンロードしたepubcheckのフォルダの中に放り込んで実行（ダブルクリック）すればOKです。
出てきた黒い画面にファイルをドラック&ドロップ！　そしてEnterを押すと、放り込んだファイルに合わせて処理を行います。
※使用するjarファイルに合わせて「epubcheck-3.0.1.jar」の部分を変えてください。

パラメータとかを追加して、「mode」部分を選べるようにするのもいいかもしれません。
とりあえず、これで一々コマンド入力しなくても、EPUBのチェックができるようになりました。

jQuery Mobile の listview で動的生成されたページのヘッダーにのみ、戻るボタンを付与する方法のメモ。

戻るボタンをヘッダーに付与する方法として、以下の２点あげられます。
◆ JavaScript で記述する。

$(document).bind("mobileinit", function() {
    $.mobile.page.prototype.options.addBackBtn = true;
 });

◆ data-add-back-btn=”true” をページ要素（data-role="page"）に追加する。

<div data-role="page" data-add-back-btn="true">

私が行いたかったのは、listview で動的生成されたページのヘッダーにのみ、戻るボタンを付与する事です。
JavaScript で記述した場合、遷移後すべてのベージのヘッダーに戻るボタンが付与されてしまいました。
これは、私の求める結果ではありませんでした。
そこで、data-add-back-btn=”true” をページ要素（data-role="page"）に追加する方法を試してみました。

$(document).on('pagebeforecreate','div:jqmData(url*="&ui-page=")',function(){
    $(this).attr('data-add-back-btn','true');
});

しかし、うまくいきませんでした。ページの初期化前に data 属性をいれば、いけると思ったのですが……。
参考：pagebeforecreate | jQuery Mobile API Documentation

そこで、さらに調べたところ、以下のページが見付かりました。
Jquery Mobile nested list - Back button gone?
これを元に、さきほどのコードを修正したところ、うまくいきました！

$(document).on('pagebeforecreate','div:jqmData(url*="&ui-page=")',function(){
    $(this).find(':jqmData(role=header)').prepend('<a href="#">戻る</a>');
});

今更ですが、「SyntaxHighlighter」の導入方法とかのメモをしておこうと思います。

導入方法は、下記の二種類。
1．「SyntaxHighlighter - Download」からファイルをダウンロードし、サーバーにアップロードして利用する方法
2．開発元が提供している「SyntaxHighlighter - Hosting」を利用する方法

私はコードを書き換えたかったのもあり、1．の方法を採ることにしました。
早速、導入！　といきたかったのですが、私が利用している「エムブロ」さんや「ナノ」さんは、サーバーに画像以外のファイルをアップロードできません。
そこで「Dropbox」の公開リンクを利用して導入することにしました。

@mixinを使って、ベンダープレフィックスを自動で出力しようと以下のコードを書いていたのですが、カンマ区切りで値を複数指定できるbox-shadowとかで躓いたのでメモ。

// ベンダープレフィックスを自動で付与する
$set-prefix: '' , -moz- , -webkit-;

// プロパティにプレフィックスを付与
@mixin SetPrefix($name, $value) {
    @each $prefix in $set-prefix {
        #{$prefix}#{$name}: $value;
    }
}

上のような@mixinに下のような値の渡し方をすると、失敗する。

.box_shadow {
	@include SetPrefix(box-shadow,1px 1px 5px #000, -1px -1px 5px #888);
}

引数として渡された値にカンマがあるために「１つのリスト」ではなく「いくつかの引数」として扱われてしまうからだ。
これを解決する方法を探していたところ、以下の記事に行き着きました。

WebTecNote - [Sass] Sass 3.2で実装された新機能がヤバい

解決方法は簡単で、引数の後ろに「...」 （ドット３つ）を付けるだけでした！（※Sassのバージョンが3.2以上が必要）

// プロパティにプレフィックスを付与
@mixin SetPrefix($name, $value...) {
    @each $prefix in $set-prefix {
        #{$prefix}#{$name}: $value;
    }
}

他にも、プレースホルダーセレクタとか、痒い所に手が届くような機能が追加されている模様。
今さらですが、Sassの進化に万歳！

大分前から :visited が変だな〜って思っていたのですが、どうやらブラウザが制限をかけたようです。
と言っても、それを明言しているのは mozilla だけですが。

参考：
CSS によるブラウザ履歴の漏えいを防ぐ取り組み | Mozilla Developer Street (modest)
CSS の :visited に行われるプライバシー対策 | Mozilla Developer Street (modest)

:visited で表現できる事が減ってしまった……残念。
これから CSS を書く時は注意しなければ。

■参考URL
File: SASS_REFERENCE

SassScript

■参考URL
File: SASS_REFERENCE | SassScript

■変数 : $
参考URL
File: SASS_REFERENCE | Variables: $
Sass(Scss) Memo: 変数 | Culture27:
変数はドル記号で始まり、CSSプロパティのように設定されています。
変数はそれが定義されている{}内でのみ利用可能です。
{}の外で定義されている場合は、どこでも利用可能です。

$var:10px 0;

h1 {
	margin:$var;
}

h1 {
  margin: 10px 0;
}

■データタイプ
参考URL
File: SASS_REFERENCE | Data Types
SassScript は以下のデータタイプをサポートしています。

• 数値　　：例えば 1.2, 13, 10px（※整数、浮動小数点、単位）
• 文字列　：例えば "foo", 'bar', baz（※引用符有無）
• カラー値：例えば blue, #04a3f9, rgba(255, 0, 0, 0.5)（※カラー文字列、16進数、カラー関数）
• 真偽値　：例えば true, false
• リスト　：例えば 1.5em 1em 0 2em, Helvetica, Arial, sans-serif（※スペースまたはカンマで区切ります）

○リスト関数
参考URL
List Functions
・length($list)
・nth($list, $n)
・join($list1, $list2, [$separator])
・append(list, val, separator:auto)

$list:Helvetica, Arial, Georgia, "Times New Roman", Times, sans-serif;
$list1:10px 20px 30px;
$list2:40px, 50px;
$val:60px;

・length($list)
リストの長さを返します。

.length1 {
	content:length($list);
}
.length2 {
	content:length($list1);
}

.length1 {
  content: 6;
}

.length2 {
  content: 3;
}

・nth($list, $n)
n番目の項目をリストから取得します。

.nth1 {
	content:nth($list,5);
}
.nth2 {
	content:nth($list,1);
}

.nth1 {
  content: Times;
}
.nth2 {
  content: Helvetica;
}

・join($list1, $list2, [$separator])
２つのリストを結合します。

.join1 {
	content:join($list1,$list2);
}
.join2 {
	content:join($list2,$list1);
}
.join3 {
	content:join($list1,$list2,space);
}
.join4 {
	content:join($list1,$list2,comma);
}

.join1 {
  content: 10px 20px 30px 40px 50px;
}

.join2 {
  content: 40px, 50px, 10px, 20px, 30px;
}

.join3 {
  content: 10px 20px 30px 40px 50px;
}

.join4 {
  content: 10px, 20px, 30px, 40px, 50px;
}

・append(list, val, separator:auto)
単一の項目をリストの末尾に追加します。

.append1 {
	content:append($list1, $val);
}
.append2 {
	content:append($list2, $val);
}
.append3 {
	content:append($list2, $val, space);
}
.append4 {
	content:append($list2, $val, comma);
}

.append1 {
  content: 10px 20px 30px 60px;
}

.append2 {
  content: 40px, 50px, 60px;
}

.append3 {
  content: 40px 50px 60px;
}

.append4 {
  content: 40px, 50px, 60px;
}

■参考URL
File: SASS_REFERENCE
【Sassを覚えよう！Vol.4】Sassの基本的な記述方法 - CSS HappyLife:

CSS 拡張機能

■参考URL
File: SASS_REFERENCE | CSS Extensions

■ネストされたルール
参考URL
File: SASS_REFERENCE | Nested Rules
scss

#main {
	width:240px;
	p {
		text-indent:1em;
	}
}

css

#main {
  width: 240px;
}
#main p {
  text-indent: 1em;
}

■親のセレクタを参照する : &
参考URL
File: SASS_REFERENCE | Referencing Parent Selectors: &
Sass(Scss) Memo: 親セレクタの参照 | Culture27:
scss

a {
	font-weight:bold;
	text-decoration:none;
	&:hover {
		text-decoration:underline;
	}
	div & {
		font-weight:normal;
	}
}

css

a {
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
div a {
  font-weight: normal;
}

■ネストされたプロパティ
参考URL
File: SASS_REFERENCE | Nested Properties
scss

p {
	font: {
		family:"メイリオ", Meiryo, sans-serif;
		size:30em;
		weight:bold;
	}
}

css

p {
  font-family: "メイリオ", Meiryo, sans-serif;
  font-size: 30em;
  font-weight: bold;
}

コメント

■参考URL
File: SASS_REFERENCE | Comments: /* */ and //
scss

/* このコメントは、複数行あります。
 * このコメントは、CSSのコメント構文を使用しているので、
 * コンパイル後のCSSにそのまま出力されます。 */
body {
	margin:auto 0;
}

//このコメントは、それぞれ１行の長さです。
//このコメントは、一行コメントの構文を使用しているので、
//コンパイル後のCSSには出力されません。
p {
	color:#000;
}

css

/* このコメントは、複数行あります。
 * このコメントは、CSSのコメント構文を使用しているので、
 * コンパイル後のCSSにそのまま出力されます。 */
body {
  margin: auto 0;
}

p {
  color: #000;
}

　最近、よく見るようになった「SCSS（Sass）」なるものに挑戦してみました。LESSと言うのもあるらしい。
　ちなみに私、「コマンド」何それ？　「ターミナル」美味しいの？　っていうぐらいの初心者です。初めに Ruby と聞いて関係ないわっ！　とか思ってたぐらいです。だって黒い画面とか恐くないですか？　でも、それでも、何とかなりました！
　と言うより、黒画面が恐いので、黒い画面を使わずに済む方法を探しました。そんな感じのメモになります。

■Sass についての参考URL
　Sass（公式：英語）
　Sassで行こう！
　Sass、そしてSassy CSS (SCSS)
　SassやLESSを導入するメリット
　Less & Sass Advent calendar 2011
　CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較

　さて、まずは作業環境の構築です。
　一応、win と mac 両方で試してみました。まずは win から。

■ディレクトリ移動 → cd

□ディレクトリを指定
C:\aaa>cd bbb
C:\aaa\bbb>

□1つ上のディレクトリ
C:\aaa\bbb> cd ..
C:\aaa>

□ルートに切り替え
C:\aaa> cd \
C:\>

■ファイル、ディレクトリの一覧を表示 → dir

/A　　　　　指定された属性のファイルを表示します。
属性　　　　D ディレクトリ　　　　　　　　R 読み取り専用
　　　　　　H 隠しファイル　　　　　　　　A アーカイブ
　　　　　　S システム ファイル　　　　　 I 非インデックス対象ファイル
　　　　　　L 再解析ポイント　　　　　　　- その属性以外
/B　　　　　ファイル名のみを表示します (見出しや要約が付きません)。
/C　　　　　ファイル サイズを桁区切り表示します。これは
　　　　　　既定の設定です。/-C とすると桁区切り表示されません。
/D　　　　　/W と同じですが、ファイルを列で並べ替えた一覧を表示します。
/L　　　　　小文字で表示します。
/N　　　　　ファイル名を右端に表示する一覧形式を使用します。
/O　　　　　ファイルを並べ替えて表示します。
ソート順　　N 名前順 (アルファベット)　　 S サイズ順 (小さい方から)
　　　　　　E 拡張子順 (アルファベット)　 D 日時順 (古い方から)
　　　　　　G グループ (ディレクトリから) - 降順

□ファイル名の書き出し
C:\aaa>dir /b > file_list.txt

■ヘルプ
C:\aaa>help bbb

本日 iTunes にプラグインを入れようとして、その保存場所を探したのでメモ。

■Mac
/ユーザ/[ユーザ名]/ライブラリ/iTunes/iTunes Plug-ins/
/ライブラリ/iTunes/iTunes Plug-ins/

■Windows Vista および Windows 7
C:\ユーザー\[ユーザー名]\AppData\Roaming\Apple Computer\iTunes\iTunes Plug-ins\

■Windows XP
C:\Documents and Settings\[ユーザー名]\Application Data\Apple Computer\iTunes\iTunes Plug-ins\

隠しフォルダを表示にしておくと探しやすいと思います。