レスポンシブコーディングに関しては苦手意識を持っている人も多いようですが、根本的な仕組みはものすごく単純で、後はそれを応用して行くだけですので実際に手を動かしながら勉強すればすぐ身につくかと思います。

そこで今回はレスポンシブコーディングの中でも単純な基本パターンをいくつかご紹介したいと思います。

基礎知識

まずは以下のサンプルを見てください。

サンプル

このサンプルを開いた状態でブラウザの幅を縮めたり広げたりすると色が変わりませんでしたか？

この変化はレスポンシブサイトを作るために必須である「メディアクエリ」の機能を利用し行っています。

実際にどのようなCSSを書いたかというと以下のとおりです。

/***********************************************************************
ブラウザの幅が768px以上ならここの記述が有効になる
**********************************************************************/
@media only screen and (min-width: 768px) {
  body {
    background: #000000;
  }
}
/***********************************************************************
ブラウザの幅が767px以下ならここの記述が有効になる
**********************************************************************/
@media only screen and (max-width: 767px) {
  body {
    background: #ff0000;
  }
}

キモは

@media only screen and (~) {
}

の部分です。この部分が「メディアクエリ」と呼ばれているものです。

「メディアクエリの括弧内に書いた条件を満たしている時のみ、記述したCSSが有効になる」というような効果を持っています。

括弧内に書ける条件は色々あるのですが、主に使うのは「min-width」と「max-width」です。

「min-width: ~px」と書くと「ブラウザの幅が~px以上」の時にCSSが有効になり、「max-width: ~px」と書くと「ブラウザの幅が~px以下」の時にCSSが有効になります。

なのでブラウザの幅が767px以下の時に背景が赤くなって、768px以上の時に黒くなったわけですね。

レスポンシブはこのメディアクエリの「ブラウザの幅によって特定のCSSを有効/無効にする」という特徴が全てで、あらゆるレイアウトの変化をこの特徴を利用して実現します。（もちろん実現できない変化も多いですが…）

実例

それでは、先ほどの基礎知識を踏まえた上で実際の例を見ていきましょう。

これから先の例は、レスポンシブサイトでも簡単な「PCレイアウト」と「SPレイアウト」のみのタブレットレイアウトが無いパターンでご紹介したいと思います。
（実際の案件でもこのパターンが多いです。）

具体的には「ブラウザの幅が768px以上でPCレイアウト」「ブラウザの幅が767px以下でSPレイアウト」「PCレイアウトのコンテンツの幅は960pxなので、768~959pxで横スクロールバーが出る」パターンです。

パターン①「PC: 写真左+テキスト右」⇔「SP: 写真上+テキスト下」

サンプル

一番よく見るのがこのパターンです。PCサイトでは写真とテキストを横並びにして、SPサイトだと縦並びにしているパターンですね。

これは以下の様なHTML/CSSを書いています。

<div class="row clearfix">
  <p class="photo"><img src="~" alt=""></p>
  <p class="txt">テキストテキストテキスト</p>
</div>
<!-- /.row -->

/***********************************************************************
ブラウザの幅が768px以上
**********************************************************************/
@media only screen and (min-width: 768px) {
  .row .photo {
    float: left;
    width: 460px;
  }
  .row .txt {
    float: right;
    width: 460px;
  }
}
/***********************************************************************
ブラウザの幅が767px以下
**********************************************************************/
@media only screen and (max-width: 767px) {
  .row .photo {
    margin-bottom: 10px;
    text-align: center;
  }
}

PCレイアウトはよくあるfloatを使った横並びパターンですね（「floatがまだよくわからない」という方はこちらの記事がオススメです）。

先ほどの説明の通り

@media only screen and (min-width: 768px) {
  ~
}

で囲まれているCSSは「ブラウザの幅が768px以上」のときのみ有効なので、「ブラウザの幅が767px以下」の時はfloatの指定もwidthの指定も無かったことになります。

なのでSPレイアウトでは写真とテキストが横並びにならず、縦にならんでいるわけです。

パターン②「PC: 写真右+テキスト左」⇔「SP: 写真上+テキスト下」

さて、次は先ほどと似ていますが、PCレイアウトの時の写真とテキストの並びが逆のパターンです。

サンプル

この場合のHTML/CSSは以下のようになります。

<div class="row clearfix">
  <p class="photo"><img src="~" alt=""></p>
  <p class="txt">テキストテキストテキスト</p>
</div>
<!-- /.row -->

/***********************************************************************
ブラウザの幅が768px以上
**********************************************************************/
@media only screen and (min-width: 768px) {
  .row .photo {
    float: right;
    width: 460px;
  }
  .row .txt {
    float: left;
    width: 460px;
  }
}
/***********************************************************************
ブラウザの幅が767px以下
**********************************************************************/
@media only screen and (max-width: 767px) {
  .row .photo {
    margin-bottom: 10px;
    text-align: center;
  }
}

このレイアウトはさっきのパターンをちょっとだけ弄れば実現出来るのですが、どこを弄ったかわかったでしょうか？

正解はPCレイアウトにおける.photoと.txtの「float」の部分です。

/***********************************************************************
ブラウザの幅が768px以上
**********************************************************************/
@media only screen and (min-width: 768px) {
  .row .photo {
    float: right; /* ここと */
    width: 460px;
  }
  .row .txt {
    float: left; /* ここ！ */
    width: 460px;
  }
}
/***********************************************************************
ブラウザの幅が767px以下
**********************************************************************/
@media only screen and (max-width: 767px) {
  .row .photo {
    margin-bottom: 10px;
    text-align: center;
  }
}

上のようにfloatのleft、rightの記述をさっきのパターンと逆にするだけで出来てしまいます。

パターン③「パターン①のちょっと複雑なバージョン」

実際のパターンでは、写真とテキストだけでなく、次のように「写真+写真の説明」と「見出し+テキスト」が並んでいるようなパターンも出てきます。

サンプル

HTML/CSSは以下のようになっています。

<div class="row clearfix">
  <div class="leftCol">
    <p class="photo"><img src="~" alt=""></p>
    <p class="note">画像の説明</p>
  </div>
  <!-- /.leftCol -->
  <div class="rightCol">
    <p class="leading">見出し文見出し文見出し文</p>
    <p class="txt">テキストテキストテキスト</p>
  </div>
  <!-- /.rightCol -->
</div>
<!-- /.row -->

/***********************************************************************
ブラウザの幅に関わらない共通のCSS
**********************************************************************/
.row .rightCol .leading {
  font-weight: bold;
  font-size: 20px;
}

/***********************************************************************
ブラウザの幅が768px以上
**********************************************************************/
@media only screen and (min-width: 768px) {
  .row .leftCol {
    float: left;
    width: 460px;
  }
  .row .rightCol {
    float: right;
    width: 460px;
  }
}
/***********************************************************************
ブラウザの幅が767px以下
**********************************************************************/
@media only screen and (max-width: 767px) {
  .row .leftCol {
    margin-bottom: 20px;
    text-align: center;
  }
}

パターン①では.photoと.txtに直接floatを与えていましたが、今回は少々複雑なので以下のように「leftCol,rightCol」という枠を作り、それにfloatを与えています。

ぱっと見て少々複雑に見えるパターンでも、実際は今回のようにパターン①の応用で出来るものが多くあります。

また、今回は下のように、幅によらない共通のスタイルはメディアクエリを使わず、普通にCSSを書くことでどの幅でも反映されるようにしています。

/***********************************************************************
ブラウザの幅に関わらない共通のCSS
**********************************************************************/
.row .rightCol .leading {
  font-weight: bold;
  font-size: 20px;
}

パターン④「PC: テーブル ⇔ SP: 縦並び」

サンプル

最後に、これもよくあるテーブルレイアウトのレスポンシブコーディングをご紹介したいと思います。

テーブルはPCレイアウトで使ったものをそのままSPレイアウトでも使ってしまうと、かなり窮屈になってしまうことが多々あります。

そこで今回のように、SPレイアウトでは縦並びにすることで解決する方法をよくとります。

HTML/CSSは以下のとおりです。

<table class="sampleTbl">
  <tr>
    <th>見出し</th>
    <td>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</td>
  </tr>
</table>
<!-- /.sampleTbl -->

/***********************************************************************
ブラウザの幅によらない共通のCSS
**********************************************************************/
.sampleTbl th {
  background: #f0f0f0;
  font-weight: bold;
}

/***********************************************************************
ブラウザの幅が768px以上
**********************************************************************/
@media only screen and (min-width: 768px) {
  .sampleTbl th,
  .sampleTbl td {
    padding: 10px;
    border: 1px solid #cccccc;
  }
  .sampleTbl th {
    width: 70px;
  }
}
/***********************************************************************
ブラウザの幅が767px以下
**********************************************************************/
@media only screen and (max-width: 767px) {
  .sampleTbl {
    display: block;
  }
  .sampleTbl tr,
  .sampleTbl th,
  .sampleTbl td {
    display: block;
  }
  .sampleTbl tr {
    border-bottom: 1px solid #cccccc;
  }
  .sampleTbl tr:first-child {
    border-top: 1px solid #cccccc;
  }
  .sampleTbl th,
  .sampleTbl td {
    padding: 5px;
  }
}

PCレイアウトでは特別なことをせず、普通にテーブルのコーディングをしているだけです。

注目してもらいたいのはSPレイアウトのスタイルです。

とくに何もしなければSPレイアウトでも普通のテーブル見た目になってしまうのですが、「table,tr,th,td」に「display: block」を指定することで縦並びにしています。

/* display: blockを指定して縦並びにしている。 */
.sampleTbl {
  display: block;
}
.sampleTbl tr,
.sampleTbl th,
.sampleTbl td {
  display: block;
}

デフォルトだとtable要素は「display: table;」、tr要素は「display: table-row;」、th,td要素は「display: table-cell;」が設定されており、それによっていつものテーブルの見た目になっているのですが、それを「display: block;」によって上書きすることで縦並びにしています。

このパターンは非常によく使うのでぜひ覚えておいてください！

IE9では注意！

先ほどのtableをSPレイアウトで縦並びにするテクニックですが、IE9では対策が必要です。

IE9だとdisplay: blockだけでは足りず、下のようにスタイルを与える必要があります。

.sampleTbl tr,
.sampleTbl th,
.sampleTbl td {
  display: block;
  float: left;
  width: 100%;
}

IE9ではなぜか「float」を設定しないとblock要素として認識されず、さらにfloatだけだと幅が短くなってしまうので「width: 100%」を指定する必要があります。

以上

レスポンシブはマークアップエンジニアだけでなく、デザイン専門のデザイナーでも基本的な仕組みとパターンは知っておかないとコーディングで実現不可能なデザインが出来上がってしまいます。
苦手意識を持っている人が多いようですが、実際にやってみるとそれほど難しいものでもないので、一度是非手を動かして挑戦してみて下さい！

以上、たにっぱでした〜

色々調査した結果、原因と解決法がわかりましたので、今回はそれに関してご紹介したいと思います。

結論

Gulpでpngquantを使用する場合は以下のようにgulpfileを書いているかと思います。

var gulp = require('gulp');

var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

gulp.task('img', function() {
  gulp.src('./src/**/*.png')
      .pipe(imagemin(
        [pngquant({
          quality: '60-80'
        })]
      ))
      .pipe(gulp.dest('./dist'));
});

これに１行追加する必要があります。

var gulp = require('gulp');

var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

gulp.task('img', function() {
  gulp.src('./src/**/*.png')
      .pipe(imagemin(
        [pngquant({
          quality: '60-80'
        })]
      ))
      .pipe(imagemin()) //これを追加！
      .pipe(gulp.dest('./dist'));
});

詳細

理由ですが、特定のpng画像をpngquantで圧縮すると、画像にガンマ補正の情報が付加される場合があり、その場合MacのFirefox,GoogleChromeにおいて画像の色と周りの色に差が出る可能性があるからです。

実例として、以下のデモをMacのFirefoxかChromeで確認してみてください。

デモ

※Windowsでも確認出来るよう、スクリーンショットも貼っておきます。

この画像は#ccccccで塗りつぶされており、デモの背景も#ccccccを指定しています。

にもかかわらず、圧縮後の画像はすこし暗くなってしまっており背景と差が出てしまってますね。

これは、pngquantが圧縮後にガンマ補正情報を付加してしまう時があるのが原因となっています。

実際に圧縮前、圧縮後の画像の詳細をプレビューで確認してみると以下の様な情報が出てきます。

圧縮前

圧縮後

圧縮後の画像には「ガンマ」という項目が増えてしまっていますね。これが原因で表示がおかしくなってしまっています。

この「ガンマ」に関して詳しく話すと結構ややこしい話になるのですが、解決法だけなら単純です。この「ガンマ」情報を除去すれば良いだけです。

除去する方法は色々あるのですが、gulp-imageminがpngを圧縮する時にデフォルトで使用されるoptipngが除去する仕様となっているので、これを利用したいと思います。

その際のgulpfileのソースコードは、冒頭にも記述しましたが以下のようになります。

var gulp = require('gulp');

var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

gulp.task('img', function() {
  gulp.src('./src/**/*.png')
      .pipe(imagemin(
        [pngquant({
          quality: '60-80'
        })]
      ))
      .pipe(imagemin()) //ここでガンマ情報を除去！
      .pipe(gulp.dest('./dist'));
});

以上

pngquantは圧縮率が良いため利用しているのですが、今回の件以外にも落とし穴があったりして結構面倒です。
（qualityの下限を下回る圧縮が必要な画像に関しては圧縮がスキップされ、distディレクトリにコピーもされないため自前でコピー処理を記述する必要があったり…）

ですが、Gulpで自動化を行うことによって、圧縮漏れ等がなくなり成果物の質が担保されるというメリットがありますので、これにめげず積極的に自動化を進めたい次第です！

以上、たにっぱでした〜

今回はそんな環境によって変わる文字背景色の高さを統一する方法をご紹介したいと思います。

結論

background-sizeを使用します。

具体的には

<p class="txt">それは十月無論この尊重帰りにおいてののためを進まだな。<span class="u-bgTxt">もちろん結果が相談者ははなはだこの発展んありまでに偽らてみだがは盲従受けなですので</span>、まだにはするたたなた。</p>

このようなマークアップに対して（.u-bgTxtを指定している箇所が背景色を付ける箇所）

.u-bgTxt {
  background: url('../images/bg_u_bgtxt.png') left center repeat-x;
  background-size: auto 1.2em;
  padding: 0.5em 0;
}

のような指定をします。

詳細

例えば、先ほどのマークアップに対して素直に

.u-bgTxt {
  background: #f1c40f;
}

のようなスタイルを当てたとします。

するとMac（フォントはヒラギノ角ゴ）では

このように表示されますが、Windows（メイリオ）では

このように表示されてしまいます。背景色の高さが全然違いますね。

「.u-bgTxt」に上下paddingを与えることで背景色を高くする方向には調整することが出来るのですが、背景色の高さはOSのみでなくブラウザ毎にも異なっていたので根本的に違う方法じゃないとダメでした。

そこで、冒頭に書いたように

.u-bgTxt {
  background: url('../images/bg_u_bgtxt.png') left center repeat-x;
  background-size: auto 1.2em;
  padding: 0.5em 0;
}

このように指定することで解決します。

「bg_u_bgtxt.png」は10px四方程度の付けたい色で埋めた画像です。これをbackground-sizeで高さを指定することでどの環境でも高さが同じになるようにしています。フォントサイズが変わってもちゃんと表示されるようにemで高さを指定しています。

paddingの指定は環境によってはbackground-sizeの高さ指定より低く表示されてしまうのを調整するための指定です。

こうするとMacでは

Windowsでは

となり、背景色が同じ高さで表示されるようになりました。

これで文字背景色も問題ありませんね！

以上、たにっぱでした〜

WEBサイトの運用・保守時や大規模サイトの構築時には致命的になりかねないそんなモジュールのスタイルのバッティング問題。その解決方法の１つである「BEM」に関して今回はご紹介したいと思います。

具体的な例を上げて説明

モジュール作成

例えばこのようなパーツのデザインカンプがあったとします。

このデザインは複数のページに登場するため、モジュールとしてHTMLとCSSは以下のように記述したとします。

<div class="panel">
  <p class="photo"><img src="~" alt=""></p>
  <p class="txt">テキストテキストテキストテキストテキスト</p>
</div>

.panel {
  border: 1px solid #000;
  padding: 10px;
}
.panel .photo {
  margin-bottom: 10px;
}
.panel .txt {
  font-size: 14px;
  line-height: 1.5;
}

運用時に問題発生

サイトを運用していると、次のようなマークアップの箇所にpanelモジュールを入れることになりました。

<section class="mainSect">
  <h2 class="sectTit">セクションタイトル</h2>
  <p class="txt">セクションのテキスト</p>
  <!-- ここにpanelモジュールを追加したい！ -->
</section>

先ほどのpanelモジュールをそのまま入れると以下のようになります。

<section class="mainSect">
  <h2 class="sectTit">セクションタイトル</h2>
  <p class="txt">セクションのテキスト</p><!-- クラス名が被ってる！ -->
  <div class="panel">
    <p class="photo"><img src="~" alt=""></p>
    <p class="txt">テキストテキストテキストテキストテキスト</p><!-- クラス名が被ってる！ -->
  </div>
</section>

ソースを見ていただければ分かる通り「.txt」クラスが被ってしまいました。

このようにモジュールのような「どこに入るかわからない」パーツに被りやすいクラス名を付けてしまうとバッティングが頻繁に発生してしまいます。

今回のようにバッティングが発生した場合の対処法は、

• モジュールの「.txt」を違うもっと被りにくい名前に変える。
• モジュールを入れる先のページにあった「.txt」を違う名前に変える。

の２パターンになるかと思います。前者が出来れば以降panelモジュールに関してはバッティングが発生しにくくなるのですが、もう既に多くの箇所でpanelモジュールが使われていた場合はその全てにおいて「.txt」のクラス名を変更しなくてはなりません…。

また、後者の場合は修正はすぐ済むのですが、根本的な解決にはなってないのでまた別の場所でpanelモジュールを使うときに同様のバッティングが発生して対処に追われるかもしれません。

このようにモジュールに適当な名前を付けた場合、後々面倒な問題になることがありますのでモジュールの命名にはかなり気を使う必要があります。

被りにくいモジュールの命名規則

そこでpanelモジュールのマークアップを以下のように変えるとどうでしょう？

<div class="panel">
  <p class="panel_photo"><img src="~" alt=""></p>
  <p class="panel_txt">テキストテキストテキストテキストテキスト</p>
</div>

このように「(モジュールのクラス名)_(パーツのクラス名)」という命名規則にした場合、先ほどのパターンは次のようになります。

<section class="mainSect">
  <h2 class="sectTit">セクションタイトル</h2>
  <p class="txt">セクションのテキスト</p>
  <div class="panel">
    <p class="panel_photo"><img src="~" alt=""></p>
    <p class="panel_txt">テキストテキストテキストテキストテキスト</p><!-- 被らない！ -->
  </div>
</section>

これだと名前が被りませんね！

このように、モジュールの中の要素に対して「(モジュールのクラス名)_(パーツのクラス名)」といった命名をすると次のようなメリットがあります。

• クラス名のバッティングが発生しにくい。
• 単純な命名規則のため、命名に時間がかからない。
• 「panel_photo」というクラス名を見た瞬間「これはpanelモジュールのパーツなんだな」と属しているモジュールがすぐわかる。

モジュールのバリエーションが欲しくなった場合は？

さらにサイトを運用していると「特定のpanelモジュールを目立たせたいのでボーダーの色が違うバージョンが欲しい」という要望が発生し、以下の様なpanelモジュールを作る必要が出たとします。

そこで、以下のようにマークアップしたとします。

<div class="panel red">
  <p class="panel_photo"><img src="~" alt=""></p>
  <p class="panel_txt">テキストテキストテキストテキストテキスト</p>
</div>

この場合、

.red {
  color: red;
}

のような形でテキスト色の変更のために「red」クラスが使われているとまたバッティングが発生してしまいます。（そもそもこんな被りやすいクラスをこんなCSSの書き方で宣言するのがかなり問題あるのですが…それはそれとして）。

そこで、モジュールのバリエーションを作る際には「(モジュールのクラス名)-(バリエーション)」という命名規則にすることにします。

<div class="panel panel-red">
  <p class="panel_photo"><img src="~" alt=""></p>
  <p class="panel_txt">テキストテキストテキストテキストテキスト</p>
</div>

この命名規則のメリットはほとんど先ほどと同様ですが、

• クラス名のバッティングが発生しにくい。
• 単純な命名規則のため、命名に時間がかからない。
• 「panel-red」というクラス名を見た瞬間「これはpanelモジュールの赤いバリエーションなんだな」どんなクラスなのかすぐわかる。

ところでBEMは？

タイトルに「BEM」と書いたものの、ここまでBEMに関して全く言及しませんでしたが、実は今までの内容がBEM（正確にはBEMの命名規則をアレンジしたもの）です。

「BEM」は「Block」「Element」「Modifier」の頭文字をとったもので、それぞれ

• Block: モジュール全体のこと（今回の「.panel」のこと）
• Element: モジュール内のパーツのこと（今回の「.panel_photo」「.panel_txt」のこと）
• Modifier: モジュールのバリエーションのこと（今回の「.panel-red」のこと）

を表しています。

BEMに関して詳細に説明するとかなりややこしくなってしまうのですが、命名規則に関しては単純明快で

• Elementは「Block名 + 区切り文字 + Element名」
• Modifierは「Block名 + 区切り文字 + Modifier名」

という命名規則にしようというものです。（ElementとModifierの区切り文字は区分するために別のものを採用する必要があります。今回は「-」と「_」で区別してましたね。）

ちなみに、一時期話題になった「mindBEMding」は区切り文字に「–」「__」を採用していました。

<div class="panel panel--red">
  <p class="panel__photo"><img src="~" alt=""></p>
  <p class="panel__txt">テキストテキストテキストテキストテキスト</p>
</div>

正直区切り文字を連続させる書き方はほぼ見ないので、かなり気持ち悪い書き方ではあるのですが、「Block,Element,Modifierの関係を気持ち悪いほど目立つ区切り文字で区切ることによってより明確にする」という意味では理にかなってはいます。

それと、クラス名にスネークケースを採用している場合は連続させないと単語の区切りなのかBEMの区切りなのかわからないという事情もあったかと思います。（自分はクラス名にキャメルケースを採用しているのでBEMの区切り文字は１つで済ませています。）

BEMに関してより深く知りたいという場合は、以下の記事を参考にしていただければいいかと思います。

• Definitions / Methodology / BEM. Block, Element, Modifier / BEM（英語）
• Definitions / Methodology / BEM. Block, Element, Modifier / BEM（日本語訳）
• 【BEMによるフロントエンドの設計】基本概念とルール | CodeGrid

(おまけ)Sassを使用している場合のBEMの書き方

BEMは構造上、Block名を何度も書く必要があって面倒なのですが、Sass(SCSS)を使用している場合はCSSは以下のように書くことで簡略化できます。

.panel {
  &_photo {
    ~
  }
  &_txt {
    ~
  }
  &-red {
    ~
  }
}

これはコンパイルされると

.panel {
  ~
}
.panel_photo {
  ~
}
.panel_txt {
  ~
}
.panel-red {
  ~
}

のようになります。

Sassで「&」は「親と同じ」という機能になっており、今回の場合は「.panel」が参照されてコンパイルされたような結果になります。

「&」を使っておくとBlock名に変更が生じた場合でも１箇所変更するだけで済みますし、記述も楽なので使うことをオススメします。

以上

「普段小規模なサイトの制作しかしていないからCSSの命名規則とかそんなに気にしなくてもなんとかなっているし…」という方も多いかと思います。

ただ、今は小規模なサイトばかりでも、いつどんなタイミングで命名規則を気にしないと制作が困難になってしまうような大規模案件や保守運用を見越した案件が舞い込んでくるかわかりません。（案件を選べる立場の人ならいいでしょうが、そんな人は中々少数派かと思います。）

いつそんな案件が来ても対応出来るように、命名規則を出来るだけ早く意識するようにしましょう！

以上、たにっぱでした〜

保守運用を見越したコーディングが出来ないと、保守運用フェーズで問題が発生することはもちろん、大規模サイトにおいては開発段階で様々な問題が発生する可能性があります。

今回は、保守運用を見越したコーディングの基本の基本に関して、WEBサイトを制作するという想定で簡単にご紹介したいと思います。

ディレクトリ構造

制作するサイトのディレクトリ構造は上のようになっているとします。

共通の物に関してはcommonディレクトリ内のcommon.cssに記述し、ページ毎の物に関しては各階層のcssディレクトリ内に記述するルールになっています。

色々なページに出てくるパーツは共通CSSに書こう！

では、まずトップページのカンプが届いたので、トップページをコーディングすることにしました。

そこで、トップページのカンプ内に下のようなボタンが出てきました。

この場合、次のようにコーディングするかと思います。

「html/index.html」

<a href="detail.html" class="btn01">詳しくはこちら</a>

「html/css/index.css」

.btn01 {
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 5px;
  background: #2980b9;
}

問題ありませんね。

さて、トップページのコーディングが終わると次はアバウトページのカンプが届き、アバウトページのカンプにも次のようなボタンが出てきました。

そこでトップページで同じボタンを見たので、トップページのCSSをコピペして使うことにしました。

「html/about/index.html」

<a href="detail.html" class="btn01">お問い合わせはこちら</a>

「html/about/css/index.css」

.btn01 {
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 5px;
  background: #2980b9;
}

ちょっと雲行きが怪しくなってきましたがまだ問題ではありません。

次にお問い合わせページのカンプが届き、お問い合わせページにも次のようなボタンがありました。

ここでアバウトページのようにコピペをやろうとすると流石に問題になってきます。

何が問題か

例えば、コーディングしている最中「ボタンの角丸を消すことになりました！」なんてことになったとします。

そうなると

• トップページのCSS
• アバウトページのCSS
• お問い合わせページのCSS

と、同じ形のボタンを修正するのに複数のファイルを弄る必要が出てしまいます。

現状はファイルが３つなのでまだそこまで時間がかかりませんが、大規模サイトとかだと数十ファイル修正しないといけないなんてことも有り得てしまい、時間がかかりますしケアレスミスが発生してしまう可能性も高まります。

共通化出来る箇所は、やり過ぎない範囲で共通化する。というのが原則になってきます。

どうすればいいか

複数ページに渡って出てくる物に関しては、共通CSS（今回の場合は「html/common/css/common.css」）に記述しましょう。共通CSSに記述しておけば、修正に強いだけでなく、別のページで再登場した際にいちちコピペする必要もなくなり開発スピードもあがります。

今回のように、「実際にカンプが届かないとこのボタンが複数ページに渡って出てくるのかわからない」なんてことは良くあります。その場合は最初は各ページのCSSファイルに書いておいて、実際カンプが届いて複数ページに渡って出てくることがわかった時点で共通CSSに書き直す、ということをやるべきです。出来上がったページのCSSを触ることを怖がらず、先を見越して問題になりそうな箇所は積極的に直していきましょう。

共通CSSに書くスタイルは出来るだけ接頭語をつけよう

先ほどcommon.cssに共通パーツ「.btn01」を記述しましたが、まだ少し問題があります。

何かというと、「.btn01」はよく使うネーミングなので、他のメンバーがcommon.cssで使われていることを知らずにコーディングに「.btn01」の名前を使ってしまい、ブラウザで見ておかしいことに気づいて修正に時間をとってしまう、という問題が発生する可能性が高いのです。

共通CSSは全ページで読み込まれる物なので、名前に関しては非常に気を使わないといけません。

そこでおすすめなのが、「接頭語」をつけることです。

私がよくやるのが、共通CSSに共通パーツを書く場合、接頭語として「mod」をつけることです。（「mod」は「module（モジュール）」の略です。）

例えば今回の場合は、

.modBtn01 {
  ~
}

となります。

「共通パーツにはmodを接頭語として付ける」というルールを作り、それをメンバーに伝えておけば無駄な名前被りが発生せず、無駄な作業時間の発生も防ぐことができます。

色違いのパーツが出てきたら「マルチクラス」にしよう。

さて、順調にコーディングしていた所、次は下のようなボタンが出てきました。

パーツの形自体は「.modBtn01」と同じなのですが、色だけが異なっています。

この時、大体次のようなスタイルを書くと思います。

.modBtn01 {
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 5px;
  background: #2980b9;
}
/* .modBtn01のbackgroundだけを変更 */
.modBtn02 {
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 5px;
  background: #c0392b;
}

これでも間違いではないのですが、次のように書いた方がスマートです。

.modBtn01 {
  font-size: 16px;
    font-weight: bold;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 5px;
  background: #2980b9;
}
.modBtn01.modBtn01-red {
  background: #c0392b;
}

こう書いた場合、赤いボタンのHTMLは次のようになります。

<a href="#" class="modBtn01 modBtn01-red">注意事項</a>

このように、複数のクラスを使ってデザインを表現することを「マルチクラス」と言います。（逆に単一のクラスで表現することは「シングルクラス」と言います。）

青いボタンと赤いボタンの違いは背景色のみで、他の部分は共通しています。最初の例でも書きましたが、共通している部分をコピペでやってしまうと、変更が発生した時にコピペした箇所を全部修正しないといけなくなり問題が発生しやすくなってしまいます。

以上

マークアップはカンプ通りにコーディングすればOKというわけではありません。開発段階でいくらカンプ通りにコーディングされていても、それが保守運用に向かない書き方であれば保守運用が難しくなり運用のコストが高くなる、又は場当たり的な改修を繰り返さざるを得なくなり、結果サイトのデザインが損なわれてしまうことも往々にしてあります。

また保守運用を見越したコーディングが出来ないと、大規模サイトの開発においては保守運用フェーズに行くまでもなく、開発段階でCSSが破綻してしまうことも考えられます。

カンプ通りのコーディングだけでなく、保守運用を見越したコーディングも出来るように常日頃から意識するようにしましょう！（より深くこの辺りの知識を仕入れたい人はを「OOCSS」や「SMACSS」、「BEM」、「FLOCSS」などで検索すると幸せになれるかもしれません。）

以上、たにっぱでした〜

そこで今回、僕自身がレスポンシブサイトを作成する際にどのようなJSを準備として毎回書いているかご紹介したいと思います。

現在のレイアウトの状況を判別する関数の作成

レスポンシブサイトを作成していると、「スマホレイアウトの時だけこの処理をしたい」といったような、現在のレイアウトの状況を取得したい場面が頻繁に登場します。

そのため、以下のようなコードをいつも記述しています。

CSS

#MqMark {
  display: none;
}

@media (min-width: 1016px){
  #MqMark {
    font-family: 'pc';
  }
}
@media (min-width: 768px) and (max-width: 1015px) {
  #MqMark {
    font-family: 'tb';
  }
}
@media (max-width: 767px) {
  #MqMark {
    font-family: 'sp';
  }
}

javascript

var MYAPP = {};

(function($, win) {
  var $win = $(window);

  MYAPP.getLayout = function() {
    var $mqMark = $('#MqMark');
    var layout  = $mqMark.css('font-family').replace(/"/g, '');

    return layout;
  };
})(jQuery, window);

解説

このコードでは、「<div id=”MqMark”></div>」といったメディアクエリ判定用（display: none;を使用して見栄えに影響がないようにしている）の要素をHTMLに記述しておき、その要素の状態を取得することにより現在のレイアウトを判別しています。

前述のようなコードを準備しておくと

if (MYAPP.getLayout() === 'sp') {
  // スマホレイアウトの時だけこの中に入る
}

といったような条件分岐が可能になります。

特徴的なのは、現在のレイアウトの取得を、「#MqMark」のfont-familyによって行っている点です。（こちらの記事を参考にさせていただきました。）

実装が気持ち悪いことは気持ち悪いのですが、CSS側との連携等考えると一番スマートなやり方だと感じ自分は使わせて頂いています。

レイアウト切り替わり時にイベントを発生させる。

他にも、「レイアウトが切り替わった瞬間に特定の処理をさせたい」等といった場面も頻繁に遭遇します。

自身がよく遭遇する場面としては、「PCレイアウトで３列で並べているパネル型のアイテムがあり、それをtile.jsで高さを揃えている」状況でかつ「スマホレイアウトだと３列から２列に切り替わる」といったような場面によく遭遇します。こういう場合に切り替わりのタイミングに合わせて処理を実行する必要が出てきます。

このために、以下のコードを前述のコードに加えて準備しています。

javascript

(function($, win) {
  var $win = $(window);

  MYAPP.EVENT_LAYOUTCHANGE = 'layoutchange';

  $(function() {
    // layout trigger
    (function() {
      var oldLayout = false;
      $win.on('resize load', function() {
        var currentLayout = MYAPP.getLayout();

        if (currentLayout !== oldLayout) {
          var event = $.Event(MYAPP.EVENT_LAYOUTCHANGE);

          event.newLayout = currentLayout;
          event.oldLayout = oldLayout;

          $win.trigger(event);

          oldLayout = currentLayout;
        }
      });
    })();
  });
})(jQuery, window);

解説

やってることはシンプルで、resizeイベント発生時に現在のレイアウトを取得して、レイアウトが変わっていれば「layoutchange」イベントをトリガーしています。

このコードを準備しておくと、

var $win = $(window);

$win.on(MYAPP.EVENT_LAYOUTCHANGE, function(event) {
  switch(event.newLayout) {
    case 'pc':
      console.log('layout to pc');
      break;
    case 'tb':
      console.log('layout to tb');
      break;
    case 'sp':
      console.log('layout to sp');
      break;
  }
});

このような方法で、レイアウト切り替わり時に特定の処理を実行することが出来ます。

以上

レスポンシブサイトはHTML/CSSだけでなく、javascriptもレイアウト切り替わりという挙動があることから必然的に複雑になってしまいます。

下手に書いてしまうと普通のサイトより顕著にコードがどんどんカオスになってしまうので、出来るだけよくあるパターンに関してはまとめておいて綺麗に書けるようにしておきたいですね。

以上、たにっぱでした〜

そこで今回はPhotoshopのスクリプトの作り方をご紹介したいと思います。

本記事の対象者

• Photoshopのスクリプトを書いて業務を効率化したいと考えている
• Javascriptはそれなりに書ける
• 英語ドキュメントを見ても体調が悪くならない

基本

Photoshopのスクリプトは複数の言語を選択することが出来るのですが、今回は一番慣れている人が多いであろうJavascriptで作成していきます。

参考ドキュメント

• 公式ドキュメント（英語）
  Adobe Photoshop Scripting | Adobe Developer Connection
  ※こちらの「Photoshop CC JavaScript Reference 」
• サンプルスクリプト
  Adobe Photoshop CS6自動化作戦
• 日本語ドキュメント（一部）
  Adobe CS6 バージョンJavaScript リファレンス

公式ドキュメントは英語なので中々読むのが辛そうに見えるかもしれませんが、全部読む必要はありません。作りたいスクリプトに必要そうなキーワードで検索して（例えばWeb用に保存を自動化したいなら「Web」で検索するとか）関係ありそうな箇所を読むだけでスクリプトを作れることが多いので、今回を期に苦手意識を克服しましょう！

スクリプトファイルの配置場所

• Mac：/Applications/Adobe Photoshop XXXX/Presets/Scripts
• Windows：C:¥Program Files¥Adobe¥Adobe Photoshop XXXX¥Presets¥Scripts¥

スクリプトファイルの拡張子は「jsx」作成してください。
（今回は例として「myscript.jsx」というファイルを作成したいと思います。）

スクリプトの実行方法

「myscript.jsx」を前述のディレクトリに作成した後Photoshopを起動すると、下の画像のように「ファイル」＞「スクリプト」内に「myscript」という項目が出来ていると思います。これをクリックすると「myscript.jsx」に記述されたスクリプトが実行されます。

デバッグ等のために値を出力させたい

alertを使用することが可能です。

var tmp = 100;
alert(tmp); // 100がポップアップで表示される

実際に、「myscript.jsx」に上記のコードを入力して実行すると、100がポップアップで表示されるはずです。

他の方法もあるのですが、alertを使用するのが一番手軽な方法かと思います。

実例

例1：現在アクティブなファイルのパスを表示する

例として、現在アクティブなファイルのパスを表示するスクリプトを書いてみましょう。

var doc = app.activeDocument;
alert(doc.path);

「app.activeDocument」は現在アクティブなファイルの情報が入っているDocumentオブジェクトを返却します。

Documentオブジェクトには色々プロパティがあるのですが、一部を紹介すると。

等があります。

というわけで、アクティブなファイルのパスを表示するスクリプトは、

var doc = app.activeDocument;
alert(doc.path);

となります。
詳しくは公式ドキュメントを参照してください。

このスクリプトを実行すれば現在アクティブなファイルのパスが表示されるはずです。

例2：現在アクティブなファイルをjpg出力する

次は一歩進んでファイルをjpg出力してみましょう。

画像を出力するには「exportDocument」を使用します。

実際のコードは以下のとおりです。
（これからはコードの説明は必要な箇所にコメントで記述します。）

var doc = app.activeDocument;

// Fileの引数に、出力したい画像のフルパスを渡す
var file    = new File('~/Desktop/tmp.jpg');

// optionsは書き出しオプション
var options = new ExportOptionsSaveForWeb();

// 画像形式
options.format    = SaveDocumentType.JPEG;
// 最適化の有無
options.optimized = true;
// 画質
options.quality   = 100;

doc.exportDocument(file, ExportType.SAVEFORWEB, options);

画像を出力したいファイルを開いた上で、スクリプトを実行すると画像が出力されるはずです。

例3：ダイアログから選択したフォルダ直下にあるpsdファイルをjpgで一括出力する

さらに応用編で、例2の作業をフォルダに対して出来るようにしてみましょう。

その前に、まず「選択したフォルダのpsdファイルを開き、ファイル名を表示して閉じる」スクリプトを準備として作ってみましょう。

// Folder.selectDialogでダイアログを開き、フォルダを選択させる事ができる。
var folderObj = Folder.selectDialog("フォルダーを選択してください。");

// ユーザーが「キャンセル」を押した場合は処理を続けないための分岐
if (folderObj) {

  // getFilesでフォルダ直下にあるファイル一覧を取得出来ます。
  // 引数にはファイル名の条件を指定することが出来ます。
  // 今回は「*.psd」とし、拡張子が「psd」のものだけ取得するようにしています。
  var fileList = folderObj.getFiles('*.psd');

  // 取得したファイルそれぞれに対して処理するためにforでループ
  for (var i=0; i<fileList.length; i++) {

    var file = fileList[i];

    // openで指定したファイルをPhotoshopで開くことが出来ます。
    open(file);

    // 開いたファイルはアクティブな状態になるので、「app.activeDocument」で
    // Documentオブジェクトが取得出来ます。
    var doc = app.activeDocument;

    alert(doc.name);

    // closeでファイルを閉じる事が出来ます
    // 「SaveOptions.DONOTSAVECHANGES」は「変更を保存せずに閉じる」オプションです。
    doc.close(SaveOptions.DONOTSAVECHANGES);
  }
}

さらにこれを応用して、「ダイアログから選択したフォルダ直下にあるpsdファイルをjpgで一括出力する」スクリプトを書くことが出来ます。

やることは「alert(doc.name)」の部分を例2の内容で置き換えるだけです。

var folderObj = Folder.selectDialog("フォルダーを選択してください。");

if (folderObj) {
  var fileList = folderObj.getFiles('*.psd');

  for (var i=0; i<fileList.length; i++) {
    var file = fileList[i];
    open(file);
    var doc = app.activeDocument;


    /***********************************************************************
    ここから例2の内容
    **********************************************************************/
    // ここだけ、例2のままだと全て同じ名前で出力されてしまうので、
    // それぞれの名前でjpgファイルが出力されるように変更しています。
    var file    = new File('~/Desktop/' + doc.name.replace('.psd', '.jpg'));
    var options = new ExportOptionsSaveForWeb();

    options.format    = SaveDocumentType.JPEG;
    options.optimized = true;
    options.quality   = 100;

    doc.exportDocument(file, ExportType.SAVEFORWEB, options);
    /***********************************************************************
    ここまで例2の内容
    **********************************************************************/


    doc.close(SaveOptions.DONOTSAVECHANGES);
  }
}

これを実行すると、選択したフォルダ直下のpsdファイルがデスクトップにjpg画像として出力されるはずです。

以上

大量の画像の処理はめんどくさくて時間がかかる作業の割に得るものはほとんど無いので、積極的に自動化していきたいですね。

以上、たにっぱでした〜

参考記事

PhotoshopExtensionのつくりかたとか – Qiita

<ul id="List">
	<li>1</li>
	<li class="red">2</li>
	<li>3</li>
	<li><span class="red">4</span></li>
	<li class="red">5</li>
	<li>6</li>
</ul>
<!-- /#List -->

$(function() {
  var $list  = $('#List');
  var $items = $list.find('li');
});

このように、「$items」にul#List内のli要素が入っているような状況で、「redクラスがついている要素だけ取り出したい」「〜番目の要素を取り出したい」といったような、「もっと要素を条件によって絞り込みたい」って時が結構あります。

今回はそういう場合に使える関数をご紹介したいと思います。

順番による絞込

first/last

最初、又は最後の要素を取り出したい場合に使う関数です。

// 最初の要素を取り出す
var $first_item = $items.first();

// 最後の要素を取り出す。
var $last_item = $items.last();

eq(n)

n番目の要素を取り出したい場合に使う関数です。

// 3番目の要素を取り出す
var $third_item = $items.eq(2);

3番目なのに2を指定しているのは間違いではありません。eqの引数は0オリジン（0が最初の要素と対応）なので3番目の要素を取り出したい場合は2を指定する必要があります。

slice(start, end)

start番目からend番目までの要素を取り出す場合に使う関数です。

// 3~5番目の要素を取り出す
var $new_items = $items.slice(2, 4);

sliceもeqと同様0オリジンなので注意しましょう。

CSSセレクタによる絞込

filter(selector)/not(selector)

「〜のクラスを持っている（持っていない）要素を取り出す」といったCSSセレクタによる絞込をしたい場合はfilter/not関数を使います。

var $red_items = $items.filter('.red');

var $notred_items = $items.not('.red');

この関数に関して注意しておきたいのが、「その要素自身がセレクタで指定した条件に適合するかどうか」で抽出されるかどうか判断される点です。（子孫要素が条件を満たそうが関係ないということです）

今回の例で言うと、liタグ自身が「.red」クラスを持っているかどうかで判断されます。なので、4番目のliタグは子要素にspan.redを持っていますが、liタグ自身にはredクラスが付いていないのでfilterではなく、notでの抽出対象となります。

子孫要素の有無による絞込

has(selector)

filter/notのパターンとは逆に、「子孫要素がセレクタに適合するかどうか」で抽出の判断がされるパターンです。

var $hasred_items = $items.has('.red');

filter/notの時とは異なり、liタグがredクラスを持っていようが関係なく、子孫要素がredクラスを持っているかどうかで判断されますので4番目のspan.redを子要素として持っているliタグのみが抽出対象となります。

以上

「更にこの条件で絞り込みたい」という状況が忘れた頃にやってきて、その度に調べ直すことがよくあるので今回まとめなおしてみました。

以上、たにっぱでした〜

以下のコードをfunctions.phpに追加すればOKです。

function remove_quickedit_from_postlist($actions, $post) {
  unset($actions['inline hide-if-no-js']);

  return $actions;
}
add_filter('post_row_actions', 'remove_quickedit_from_postlist', 10, 2);

説明

変数$actionsの中身をvar_dumpすると以下のようになっています。

array(4) {
  ["edit"]=>
    string(137) "<a title="この項目を編集" href="http://wp.localhost/wp-admin/post.php?post=31&action=edit">編集</a>"
  ["inline hide-if-no-js"]=>
    string(101) "<a class="editinline" title="この項目をインラインで編集" href="#">クイック編集</a>"
  ["trash"]=>
    string(205) "<a class="submitdelete" title="この項目をゴミ箱へ移動する " href="http://wp.localhost/wp-admin/post.php?post=31&action=trash&_wpnonce=52d4da28cb">ゴミ箱</a>"
  ["view"]=>
    string(223) "<a title="hogehogeを表示" href="http://wp.localhost/2016/04/01/hogehoge/" rel="permalink">表示</a>"
}

見て頂ければ分かる通り、表示する項目が$actionsに保管されています。

今回はクイック編集機能が邪魔なので、

unset($actions['inline hide-if-no-js']);

によってクイック編集の項目が配列から削除され、表示されなくなります。

また、今回は利用していませんが、$postに投稿のデータが入っているので、投稿に応じた分岐等を行いたい場合は$postを利用して行うことが可能です。

さらに

削除することはもちろん、必要に応じて項目を追加することも可能です。

例えば、（必要かどうかは置いておいて）Googleへのリンクを追加したい場合は

function add_google_to_postlist($actions, $post) {
  $actions['google'] = '<a href="http://google.com/" target="_blank">Google</a>';

  return $actions;
}
add_filter('post_row_actions', 'add_google_to_postlist', 10, 2);

このようにすれば

こんな感じでGoogleへのリンクが（必要かどうかは置いておいて）設置されます。

今のところ良い使用用途が思い浮かばないのでこんな例になってしまいましたが、覚えておくとどこかで役に立つかもしれません。

以上

管理画面が使いにくいとWordPressを導入する意味が薄れてしまいますので、管理画面のカスタマイズ方法は出来るだけ仕入れて使いやすい管理画面を作れるようにしたいですね。

以上、たにっぱでした〜

ところが、最近Keyboard Maestroというマクロツールを見つけ、完全自動化とまでは行かないものの抽出の効率化が出来るようになったためご紹介したいと思います。

Keyboard Maestro？

Keyboard Maestroはマクロツールです。

マクロツールとは何かというと、特定の一連の作業をキーボードショートカットに割り当てて、設定したキーボードショートカットを押すだけで一連の作業を勝手にしてくれるようにするツールです。

言葉だけじゃわかりにくいと思いますので、実際にデモを見てみましょう。

デモ

実際にKeyboard Maestroを使用して抽出している風景です。

何をしているかというと、「テキストを選択」→「F1キーを押す（すると指定したテキストファイルにテキストが追加される）」→「次のテキストを選択」→（以下繰り返し）という作業を繰り返しています。

わかりやすいようにゆっくり作業をしていますが、実際はもっとテンポよくコピペが進んでいます。

今までは、

「テキストを選択」→「Ctrl+Aで全選択」→「Ctrl+Cでコピー」→「Escボタンを押す」→「エディタをクリック」→「Ctrl+Vでペースト」→「Photoshopをクリック」→「次のテキストを選択」→　…

という作業を繰り返したのですが、Keyboard Maestroを使って

「Ctrl+Aで全選択」→「Ctrl+Cでコピー」→「Escボタンを押す」→「エディタをクリック」→「Ctrl+Vでペースト」→「Photoshopをクリック」

この作業を「F1キーを押す」だけで実行してくれるようにしてる形です。

今までテキスト１つ抜き出すのに７ステップかかっていたのが、２ステップで済むようになったわけです。めちゃくちゃ便利じゃないですか？

インストール

公式サイトからダウンロード・インストールしてください。

マクロの配布

実際に自分の手で設定できれば一番いいのですが、設定方法がややこしいので、インポートして使えるマクロファイルを配布します。

ここからダウンロード

ダウンロードしたファイルを解凍し、出てくる「Extract target txt.kmmacros」というファイルをダブルクリックすればテキスト抽出のためのマクロが追加されます。

抽出したい文字を文字ツールで選択後F1キーを押すと、選択したテキストがデスクトップの「extract.txt」ファイルに追加されます。（特にextract.txtをエディタで開く必要はありません。デスクトップにextract.txtが無い場合も勝手に作ってくれます。）

興味があれば、是非Keyboard Maestroの使い方を調べて実際に自分で設定してみることをオススメします。テキスト抽出以外にも考え方次第で色々な場面で応用が効きそうなツールです。

以上

自分自身がMacユーザーなので、Windowsで同様の事が出来るソフトが有るかは調べてないのですが、マクロツール自体は結構メジャーなツールで色々な方が作成されていますので、Windowsでも探せば見つかるはずなので是非調べてみてください。

マークアップはかなり手作業で無理矢理やってる部分も多く、まだ試行錯誤すれば効率化出来る部分が残っていると思うのでどんどん効率化していきたい次第です。

以上、たにっぱでした〜