■タグレファレンス：MTContents
MTContents

今回のタグリファレンス内に掲載されているMTContentsのモディファイア「field:」ですが、コレを使用することでコンテンツデータより特定の情報を取得することができます。

タグリファレンスの解説では「コンテンツフィールドのユニークID="foo"」を指定することができると書いてありますが、そもそも「コンテンツフィールドのユニークID」ってどこで確認するの？という些細な壁にぶち当たりました。
些細な事柄ですが、このIDを把握できなければ前へ進むことはできません。

コンテンツフィールドのユニークIDの確認について
確認場所は
デザイン → テンプレート → 各テンプレートの編集画面

「コンテンツタイプ」や「コンテンツデータ」の界隈にある思いきや、テンプレートの編集画面内にあるということで、気がつくまで時間がかかってしまいました。

注意点
1）コンテンツフィールドの上に同じようなエリアがありますが「コンテンツタイプ」である可能性があり、コンテンツフィールドとは別物です。
2）コンテンツフィールドは、コンテンツタイプの登録が無いと表示されません。

余談
フラット、マテリアル系のデザインはシンプルで個人的には好きなのですが、UI的に最適かと言われると疑問に思うことが多々あります。今回は、そんな日々考えている疑問の原因にぶつかった感じがしました。

お題
今回のお題は。300店舗以上ある店舗情報の中から、ページにアクセスする度にランダムで5店舗を表示させたい。
店舗の登録はコンテンツタイプを使用。尚ページはスタティック(html)である。

ということで、ざっくりとやりたいことをまとめると

①コンテツタイプの内容をjson形式で出力したい。
②出力されたjsonを元にランダムで5店舗を表示。（ココはJSなので省きます）

表示させたい内容は店舗情報から「パーマリンク」「サムネイル画像」「店名」とします。
※サムイル画像は登録が無ければ「準備中」の画像を出力することを想定

準備したソースコードは以下となります。

[
<mt:Contents content_type="店舗情報一覧"><mt:For regex_replace="/^[\ \t\r\n]+/mg","">
  {
    "path":"<mt:ContentPermalink>",
    "thumbnails": "<mt:ContentField content_field="店舗のメイン画像"><$mt:AssetThumbnailURL height="285" square="1"$><mt:Else><mt:WebsiteURL>img/common/shop_thumbnail_noimg.jpg</mt:ContentField>",
    "shopname": "<mt:ContentField content_field="店名"><mt:ContentFieldValue></mt:ContentField>"
  }</mt:For><mt:unless __last__>,</mt:unless __last__></mt:Contents>
]

無事にjsonへ出力ができましたが、ここで問題が...
「準備中」の画像が掲載されている店舗が多すぎじゃね？と。

要望
300店舗に対して画像が登録されているのは50店舗弱。確かに「準備中」の店舗が多々表示されるのは頷けます。そこで、画像が登録されている店舗からランダムで表示できないかな？という要望が。

問題発生
修正の際にハマったのが「,」問題。
jsonはデータの最後にカンマがあると、エラーになってしまします。その問題を解決する方法としてMTunlessの登場となります！しかし、期待した動きにはならず頭を抱えます。

ちなみに考え方として、店舗全体からメイン画像の登録があるものを取得して、データの最後はカンマをつけない。という感じです。
MTContentField内で必要な情報が出力さているのでMTunlessが使えるものだと思い込んでいました。この思い込みが個人的な負のループのはじまりでしたｗ

※MTunlessを使用せず「,」を直接つければ表示されますが、最後のデータにもカンマがついてしまいます。

<mt:Contents content_type="店舗情報一覧">
<mt:ContentField content_field="店舗のメイン画像">
{・・・・}<mt:unless __last__>,</mt:unless __last__>
<mt:Else>
</mt:ContentField>
</mt:Contents>

修正バージョンは1店舗、1画像というルールでは有効な感じなりそうです。

<mt:Contents content_type="店舗情報一覧"><mt:For regex_replace="/^[\ \t\r\n]+/mg","">
  <mt:ContentField content_field="店舗のメイン画像">
  <mt:SetVarBlock name="shopimg" function="push" strip_linefeeds="1"><mt:ContentFieldValue></mt:SetVarBlock>
  </mt:ContentField>
</mt:For></mt:Contents>
[
<mt:Loop name="shopimg" regex_replace="/^[\ \t\r\n]+/mg","">
<mt:Var name="__value__">
{<mt:Contents content_type="店舗情報一覧" field:ID情報="$__value__">
    "contentsid":"<mt:ContentID>",
    "path":"<mt:ContentPermalink>",
    "thumbnails": "<mt:ContentField content_field="店舗のメイン画像"><$mt:AssetThumbnailURL height="285" square="1"$><mt:Else><mt:WebsiteURL>img/common/shop_thumbnail_noimg.jpg</mt:ContentField>",
    "shopname": "<mt:ContentField content_field="店名"><mt:ContentFieldValue></mt:ContentField>"
  </mt:Contents>}<mt:unless __last__>,</mt:unless __last__>
</mt:Loop>
]

想定した方法は、
①画像が登録さているフィールドの画像の値を取得する
②取得できた画像の値を配列へ
③配列をループさせる事で出力
④取得した画像の値をfield:でマッチングさせて店舗データを出力
⑤ループ処理に伴いMTunlessの動作を確認

最後に「,」が表示されてしまう問題が解決できました。

懸念点
例えばチェーン店や、大型商業施設など同じ画像を使いまわしていると一つの値で複数の店舗が取得されてしまい結果、jsonが壊れるカタチになります。
運用上のルールがネックになりますが、合致すれば御の字になりそうです。（ただまだまだ改善の余地はあります）

まとめ
・MTContentFiel内ではMTunlessが動作しないみたいなので、MTloopが動作するカタチに変更
・条件は取得する値がユニークであり、1つのコンテンツデータのみで使用されていること

MT7になってコンテンツタイプが扱えるに様になったのは大きいですね。
癖はありますが、コツが分かればそれなりに扱えます。
ただ、コンテンツタイプを横断したデータのやりとりはサーバへの負荷が大きいみたいで設計や仕様を考える上ではボトルネックになりそうだと思いました。

demo

モーダルについて
モーダルの処理は「jquery.layerBoard.js」を使用させていただきました。
（KIYOTA氏へ：素晴らしいプラグインをありがとうございます。）

jquery.cookie.jsからjs.cookie.jsへ
jquery.layerBoard.jsでは「jquery.cookie.js」が使用されています。
その「jquery.cookie.js」ですが、GitHub上にて「js-cookie」のアナウンスされおり、今回は「js-cookie」を使用するところに至りました。
ちなみに「jquery.layerBoard.js」の一部も編集を行っております。

js.cookie.js：cookieへの保存
今回だと以下の方法でcookieにaccessを保存することできました。便利ですよねー。

  var cookie = 'access';
  Cookies.set('name', cookie);

js.cookie.js：cookieの取り出す
なかなか直感的な感じですね。

  Cookies.get('name');

コード内の流れ

    $('input[name="viewCtr"]').change(function() {
     
      //チェックされたらcookieにaccessを保存
      if ($(this).is(':checked')) {
        var cookie = 'access';
        Cookies.set('name', cookie);
      } else {
      
      //チェックが外されたらcookieからaccessを削除
        Cookies.remove('name', cookie);
      }
    });
    
    var keys = Cookies.get('name');
    
    //格納されたCookieを使用してモーダルがしている部分にclassを追加
    if(keys == 'access'){
        $('#layer_board_area').addClass('changed');
      }

備考
検証はサーバー環境で行う事をオススメします。

関連ファイル
js.cookie.js
jquery.layerBoard.js（js.cookie.js版）
jQuery
※jquery.layerBoard.jsのライセンスは開発者である「KIYOTA氏」の意向を尊重致します。

パッケージ ※js.cookie.jsとjQueryは含まれておりません

gulpが動く環境作り
東区フロントエンド勉強会の主催者：末包さんが準備されましたスライドを参考にgulpが動く環境をつくり事ができます。

gulp + sass で目指せ倍速コーディング:環境準備編

gulpを使ってコーディング
「gulpを使ってsassを動かしてみる。」という目標をたてた上で以下のスライド資料を参考にしながら進めると大まなか概要を知ることができます。

gulp + sass で目指せ倍速コーディング

ここまでは、さらっときましたが、実際に手を動かしてみるいろんなエラーが出たりして動くまではいろいろと大変でした。ただ、その分からないところを調べながら、検証しながら進めるのが楽しいんですよね！

復習
ハンズオンの勉強会は、動くまでの手順を体験できますが、それに理解がついてくるほど自分は賢くないので、時間を見つけて復習しています。
今回はgulpそのものから「gulpfile.js」の中身など基礎と基本の部分を重点的に復習しました。
きっかけは、ハンズオンで完成したgulpfile.jsを後から見て思ったが「なんとなくは分かるけど、カスタマイズが出来ない！」という事でした。

プラグインのインストール
gulpの特徴はプラグインをインストールすることで自分ごのみ環境を構築できるところだと感じました。

gulp-slim
gulp-slim
slimの記述ルールでマークアップが可能になります。

gulp-plumber
gulp-plumber
コンパイル時にエラーが生じてもプロセスを終了せず継続することが可能になります。
ちなみにcompassと一緒に設定する場合は以下ような設定するとよい。

  .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))

gulp-sass
gulp-sass
sassの利用が可能になります。

gulp-compass
gulp-compass
compassの利用が可能になります。

gulp-autoprefixer
gulp-autoprefixer
CSSを利用する際に接頭詞（ベンダープレフィックス）が必要なプロパティに対して自動的に付加してくれます。

gulp-combine-media-queries
gulp-combine-media-queries
CSSでMedia Queryを使用した場合、記述内容を整理してくれます。

gulp-csscomb
gulp-csscomb
CSSを利用する際にフォーマットをキレイにまとめてくれます。
※ジェネレーターはこちら

gulp-minify-css
gulp-minify-css
CSSを圧縮(min)をおこなってくれます。

gulp-rename
gulp-rename
出力ファイル名を変更することができます。
詳細参考サイト：gulp-rename って？

run-sequence
run-sequence
gulpfile.js内のtaskを順次実行することが可能になります
詳細参考サイト：gulp の run-sequence を使うときは return を忘れずに

gulp-imagemin
gulp-imagemin
画像の圧縮が可能になります。
詳細参考サイト：gulp-imageminプラグインとは

imagemin-jpegtran
imagemin-jpegtran
JPG画像を圧縮する際に、これが無いとうまく動作しないみたいです。

imagemin-optipng
imagemin-optipng
PNG画像を圧縮する際に、これが無いとうまく動作しないみたいです。

gulp-changed
gulp-changed
srcとdestを比較して変更があったファイルをチェックしてくれます。
詳細参考サイト：gulp-changedプラグインについて

選択された状態でDeleteキーを押せば削除できます。しかし、まれにリストを削除しようとするとエラーで削除できないことがあります。
※スクリーンショットを撮り忘れましたが「0x4c30003」こんなエラーコードだったかと思います。

作業をする前に
※EaseUS EverySyncは一旦完全に停止してきます。
※参考にされる方は自己責任でお願いします。

同期項目に関するリストを見つける
自分の場合(Windows)は以下の階層に対象となるフォルダ及びファイルがありました。
※ちなみにAppDateは隠しファイルになるので、環境によっては見えない場合があります。
隠しファイルを表示させる方法

C:\Users\ユーザー名\AppData\Roaming\eufsc

eufscフォルダ内にある「eufscdb.db」が、今回編集するファイルとなります。
eufscdb.dbを見つけたらデスクトップなどにコピペを行います。（ファイル編集時に壊れた。という時の保険みたなものです。）

eufscdb.dbを編集するソフト
次にeufscdb.dbを開くためのソフトを紹介します。
自分の場合は「DB Browser for SQLite」という使用しました。
窓の杜：DB Browser for SQLite
GitHub：https://github.com/sqlitebrowser/sqlitebrowser

※DB Browser for SQLiteのインストールは割愛します。

DB Browser for SQLiteを起動したらタブの上にある「Open Database」をクリックして先ほど見つけたeufscdb.dbを選択します。

ファイルが読み込まれたことを確認したら、タブの「Browse Data」をクリックします。

画面が切り替わって登録されてる同期項目の一覧が表示されます。

削除したい項目の行を選択して「Delete Record」をクリックします。

画面上から対象の項目が削除された事を確認したら「DB Browser for SQLite」を終了します。
右の上のバッテン、ファイルからexit、どちらもOKです。

EaseUS EverySyncを再度起動し、削除したい項目が消えれていれば作業完了です。

操作をミスった。ファイルが壊れた。
もしファイルがおかしくなった場合は、「C:\Users\ユーザー名\AppData\Roaming\eufsc」内にあるeufscdb.dbを削除してください。
次に、編集前にバックアップしたeufscdb.dbを先ほど消したフォルダ内にコピペしてください。
ひとまず、DB Browser for SQLiteで操作する以前の状態に戻すことができます。

最後になりましたが、EaseUS EverySyncの簡単な紹介です。
EaseUS EverySyncは有料のファイル同期ソフトです。
http://jp.easeus.com/file-sync/

構造は大変シンプルで、フォルダAとフォルダBの同期を取る。というモノです。
自分の場合はローカルと、ネットワークドライブの同期を取るのに重宝しております。
有料ソフトなので、もしかするとしっかりとサポートを受ける事ができるかもしれませんね。

<body onLoad>
<body class="">
<body id="">
<body data-rel="">

というタグが混在していました。

そこで検索内容を <body ココに含まれるモノを対象としない >　という、感じの検索方法にしました。
コレでbodyタグ内に特定のプロパティが含まれていても、検索対象として扱う事が可能になりますね！

実際にDreamweaver上で検索をかける時の表記方法は以下です。

<body((?: (?:onload|(?:id|class|data-rel)=(?:"[\w\-_%]+"|"")))*)>

置換ワードは

<body$1><h1>hoge</h1>

置換の際に$1へ正規表現で検索された内容が格納されるみたいです。
考え方を変えればいろいろな検索と置換に対応出来そうですね！

【最後に】
ファイルが多くなったり、自分が全て把握していないサイトだと置換対象から漏れている事もあるので、最終的にはファイルのタイムスタンプを確認して、タイムスタンプが変更されていないファイルの中身を確認することが大事ですね。

参考サイト

ドリの正規表現について解説（検索・置換）
http://tenderfeel.xsrv.jp/memo/70/

検索情報を維持できる事を解説
http://labs.cybridge.jp/webdesign/dreamweaver/498.html

第4回　正規表現を使った検索・置換にチャレンジ
https://www.adobe.com/jp/newsletters/edge/january2010/articles/article4/

reveal.jsは以下より！
hakimel/reveal.js · GitHub http://bit.ly/1u1ognR

参考サイト

なんかかっこいいプレゼンテーションテンプレートを探しているならreveal.js使ってみろって

オシャレなスライドショーを簡単に作れちゃう reveal.js の使い方を reveal.js を使って解説してみた.
サンプルが大変印象的でした。

※一番色々載っているのはGitHubのページですね。

少し触ってみた感想です。表現自体はすごいです！
気になる点として、普段PowerPointやKeynoteを使用している方はレイアウトという点で、どれだけ思い通りに配置できるかがネックになるのか。と、思いました。

昨年「何事も自分次第」という言葉を耳にして、なるほどなー。と、思ったことを今年は実現していきます！

(※A)参考サイト：iso-8859-1（Latin-1）一覧表
参考ページ

(※B)参考サイト：ユニコード表
参考ページ

実際に触ってみて、\nの「改行」と\rの「復帰」違いはなんだろう。と、思い調べた結果分かりやすいページがあったので書き留めておきます。
■参考サイト：エスケープ文字の復帰（￥r）とはなんですか？
参考ページ

\fの「改ページ」について分かりやすいページがあったので書き留めておきます。
■参考サイト：\f 改頁 \r 復帰 の意味を教えて下さい！
参考ページ
※上記について私自身は検証はしておりません（＾＾；

ちなみに「page-break-brfore 」については、このブログでも書き留めていたので紹介します。

「\nってなんて言うだっけ？」「エスケープシーケンスだね」と、答える事が出来れば幸いです（＾＾

page-break-before,page-break-afterは印刷の時に効果的なプロパティです。
用途は「印刷時にどこまでを1ページ内にまとめるか」という時に大変便利です。

DEMO

使用方法などは、参考ページをご覧下さい。

■特徴
主にブロックタグで利用できるみたいです。
spanなどのタグもdisplay:blockを使用することでブロック要素になるので、page-break-の効果を受けることができるみたいです！
その他、ul中のli、dl内のdt、ddも対象になります。

■注意点
table内で使用するthead、tbody、tr、th、tdなどに設定しても予想しているような動きにはならないと思うので注意が必要です。
表組みなども含むコンテンツが、長くなりそうな要素はコンテンツ自体を見なおしたほうが良さそうですね！