blog.taaas.jp

この記事について

NSEG Advent Calendar 2015 の 22 日目の記事です。
2日目の CSS Bird や8日目のサンプルコードで学ぶ CSS プログラミングの基本テクニックでは CSS でなんでもできそうな記事ばかりだったので、今日は CSS でできないことについて書いてみます。(今日のは短いです)

親要素、兄要素でしか絞り込むことができません

CSS では他の DOM 要素との関係で絞り込むための、

• Descendant combinator ( body div )
• Child combinator ( body > div )
• Next-sibling combinator ( div + div )
• Following-sibling combinator ( div ~ div )

がありますが、これはいずれも、右側の要素に対して「親」または「兄」の要素で絞り込むためのセレクタです。

つまり、チェックボックスで状態を管理する場合、その状態にしたがって表示を変化させることができるのは「弟」または「子」要素のみで、CSS では「親」や「兄」に影響を与えることはできません。 CSS Bird のようなアクションゲームでは、当たり判定のための子要素を用意しておいて、「子どもの .enemy 要素に :hover したら、親の #game-over を表示させる」というようなことができると嬉しいのですが、そういったことはできないのです。サンプルコードで、「DOM の先頭に INPUT 要素が兄弟として並ぶ」形になっていたのはこのためです。

ちなみに、Selectors Level 4 の Editor's Draft では、:has() という「セレクタにマッチする子や孫を持っている要素」を表現するための擬似クラスが含まれていて、これを使うと「#game-over:has(.enamy:hover) { display: block }」のように子要素から親要素に影響を与えるように CSS も書けるようになりそうです。

状態は DOM 構造に従ってしか伝播しません

CSS では :hover などの状態は DOM 構造にしたがってしか伝播しません。例えば次のような CSS があったとき、

「#div2」が「#div1」子要素になっていれば、「#div2」の :hover が「#div1」に伝わります。

しかし「#div1」と「#div2」が兄弟要素の場合には、見た目は同じでも「#div2」の :hover は「#div1」には伝わりません。

また逆に「#div2」が「#div1」の子要素になってさえいれば、見た目としては重なっていなくても「#div2」の :hover は「#div1」に伝わります。

Movable Type と Fastly を連携させるための Fastly というプラグインを公開しました。

mt-plugin-Fastly

このプラグインを使うと認証を必要としないパブリックな Data API のレスポンスをキャッシュさせることができます。これにより先頃から AWS で利用できるようになった t2.nano でも、Data API をフロントエンドで利用しているサイトを運用することも可能になります。(なると思います)

また昨年公開した mt-plugin-DataAPIFormatPHP とあわせて使えば、外部のサイトから PHP で以下のように MT のデータにアクセスをしても、現実的な速度で動作するようになります。(なると思います)

このブログは Fastly と mt-plugin-Fastly を使って運用されています。

できること

• MT でコンテンツを更新した際に、対応する Fastly のキャッシュを即時にクリアすることができます
  • 記事、ウェブページ、アイテム、の全てに対応しています
  • ダイナミックパブリッシングにも対応しています
• 管理画面 (mt.cgi) と、認証付きの Data API (mt-data-api.cgi) を Fastly でキャッシュされないようにします
• 認証なしの Data API の結果をキャッシュさせ、かつコンテンツを更新した際に即時にクリアすることができます
• mt-search.cgi の検索結果についても同様にキャッシュ、クリアすることができます
• キャッシュのクリアを非同期に処理させることもできます
• テンプレートモジュールを ESI で処理させることができます
  • これにより、スタティックパブリッシングでもページ内の部分的な更新が可能になります
  • (ダイナミックパブリッシングでは未対応です)
• PURGE リクエストに任意のヘッダーを指定することができます
  • リクエストヘッダーでアクセス制限をかけている場合に、プラグインの設定で認証情報を追加することができます。(Fastly 側の設定例)

ESI について

ESI は耳慣れない言葉かもしれないので、簡単に補足します。(私も詳しくはありません)

ESI は Edge Side Includes の略で、CDN やキャッシュサーバーの層で include の処理をさせるための仕様です。つまり ESI を使うと、(静的な内容ではありますが) PHP の include や、SSI の #include あるいは、Web Components のようなことを、CDN やキャッシュサーバーの層で行わせることができるようです。

Fastly では (2015年12月現在) バックエンドでは varnish (2.1) を利用しているとのとこで、varnish の ESI に関するドキュメント の機能を利用することができるようです。esi:remove はあまり利用することはないと思うので、実質的には「esi:include のみが利用できる」というところだと思います。

Fastly で ESI を利用するために必要なこと

Fastly で ESI を利用するためには、custom VCL. を使って有効にする必要があります。この custom VCL. の機能は登録直後は利用できず、サポートにメールをして有効にしてもらう必要があり、英語が苦手(私は苦手です)な場合には若干敷居が高いです。が、おそらく特別な審査があるということではなく、私は「custom VCL」「request」を含んだ2行くらいのメールを送ったところ数時間程度で有効にしてもらえたので、基本的にはお願いすればすぐに使えるようになるものだろうと思います。

costom VCL が設定できるようになったら、以下の VCL をアップロードすれば ESI を利用できるようになります。

もう少し細かいところについては「How do I enable basic ESI in my VCL?」などを参照するとよいと思います。

プラグインのインストール

1. GitHubからzipファイルをダウンロードしてください。リリース一覧
2. ダウンロードしたファイルを展開してください。
3. pluginsディレクトリにアップロードしてください。

   インストール後のディレクトリの配置は以下のようになります。

   $MT_HOME/
       plugins/
           Fastly/

Getting sterted (とりあえず使ってみる)

とりあえず使ってみるだけであれば、難しい設定は必要ありません。

Fastly

• 公開サイトを Fastly 経由で配信されるようにする

MT

• プラグインをインストールする
• 「ブログのプラグイン設定」を開き、「有効」のチェックボックスにチェックを入れて更新する

以上の設定を行うだけで、以下の機能が有効になります

• 記事やアイテムの更新のタイミングでキャッシュがクリアされる
• 認証が必要な Data API がキャッシュの対象から外される
• mt.cgi に関しては全てキャッシュの対象から外される

ESI を使う

ESI を使う場合にも特別な設定は必要ありません。以下の手順で利用することができます。

1. ブログの「全般設定」を開き、「モジュール設定 > サーバーサイドインクルード」で「Edge Side Includes」を選択して保存する
2. ESI でインクルードしたいテンプレートモジュールを開き「ESIのインクルードとして処理する」にチェックをいれて保存する

以上の準備ができていると、インデックステンプレートやアーカイブテンプレートから mt:Include[module="module-name"] でそのモジュールを呼び出した場合に、ESI で処理されるようになります。

ESI を使うとどんなことが実現できるか

• スタティックパブリッシングを使いながら
• PHP や SSI などサーバー上の仕組みに頼ること無く
• MT の作法で mt:Include を書くだけで
• 全てのページに埋め込まれるようなモジュールを、全体を再構築すること無く
• 通常の記事の更新に合わせて全てのページで更新する

ということができるようになります。

Data API や検索結果のキャッシュをクリアする

Data API や検索結果のキャッシュをクリアする場合には、Fastly の API キー等を設定する必要があります。

MTの設定

1. mt-config.cgi に、FastlyAPIKey という名前で Fastly の API キーを追加する
2. 「ブログのプラグイン設定」を開き、「Service」の欄に Fastly の管理画面で表示されている ID を入れて更新する

以上の設定を行うと、ブログ記事やアイテム、またはテンプレートなどの更新時に Data API や検索結果のキャッシュがクリアされるようになります。

サポートしている出力タイプ

• スタティックパブリッシング
• ダイナミックパブリッシング
  • ESI には未対応です

動作環境

• MT6

この記事について

この記事は Movable Type Advent Calendar 2015 の21日目の記事です。

この記事について

NSEG Advent Calendar 2015 の 8 日目の記事です。
2日目の CSS Bird に続いて、CSS プログラミングの基本テクニックを紹介します。

INPUT[type=radio] ~ LABEL

最も基本的なテクニックの一つです。

まず先頭にラジオボタンを並べ、その後ろに各ボタンに対応したLABEL を「position: absolute」で重ねておきます。

そこからタップのアクションに対する変化として、ラジオボタンの checked に応じて LABEL の z-index を変化させることで、同じ場所のタップで次々に隣のラジオボタンの状態を変化させていくことができます。

以下がサンプルコードです。

ラジオボタンの場合は、LABELの1クリックで「対応するラジオボタンへの checked 属性の有効化と、他のラジオボタンの checked 属性の無効化」の2つの状態変化を起こすことができます。これを利用すると、「ゴールの状態になるまでぐるぐる状態変化させる」パズルのようなゲームを作りやすいです。CSS 8puzzle はほぼこのテクニックだけで作られています。

INPUT[type=checkbox] ~ LABEL

これもラジオボタンに並ぶ最も基本的なテクニックです。

ラジオボタンの場合と同じく先頭にチェックボックスを並べ、その後ろに各ボタンに対応したLABEL を「position: absolute」で重ねておきます。

タップのアクションに対する変化のさせ方もラジオボタンと同様です。

以下がサンプルコードです。

チェックボックスは「状態を保存して次々に分岐していく」タイプのゲームを作りやすいです。選択によってエンディングが変わるようなアドベンチャーゲームなどが作れると思います。

CSS Noughts and Crosses はほぼこのテクニックだけで作られています。このゲームではコンピューター側の手順(シナリオ)は最初に計算されていて、ユーザーの選択によって分岐が発生して次の手が変化するという流れになっています。つまり、選択によってハッピーエンド(win)かバッドエンド(lose)の結末になるアドベンチャーゲームとも言えるものになっています。

:hover

:hover 擬似クラスを使うと、デスクトップのような環境であればマウスの動きに追従しているかのように見せることができます。(モバイルのブラウザだと、BUTTON要素をタップするとその後 :hover 扱いになるようなので、今回は :hover を受ける要素を BUTTON にしています)

先頭に :hover を受ける要素を敷き詰めて、その後ろに変化させる要素を置きます。

以下がサンプルコードです。

:hover では、この例のようにマウスに追従しているかのように見せる他にも、「障害物の要素を用意しておいて、その要素が :hover になった瞬間にゲームオーバーの画面を最前面にもってくる」のようにすれば、当たり判定にも利用することができます。

animation

animation を使うと要素を動かすことができます。animation は、 animation-play-state プロパティを running にすると動き始め、 paused にすると動きがその場で止まります。

これを利用すると、前述の「INPUT[type=radio] ~ LABEL」のパターンを使いつつラジオボタンの状態によって animation-play-state 切り替えることで、ユーザーがタップした時点での要素の位置を確定させることができます。

以下がサンプルコードです。

animation による要素の位置の変化は、CSS から利用できる形の状態の変化として残らないのですが、前述の :hover と組み合わせて利用すると「ユーザーのタップのタイミングで障害物の当たり判定を確定させつつ、:hover が発生したらゲームオーバーにする」という形で、「状態を保存する方法」としてゲームに利用できるようになります。

まとめ

以上の4つが CSS プログラミングでよく使われるテクニックです (「私に馴染みのある限りの」ですが) 。基本的にはこれらのテクニックを組み合わせて、その上で兄弟関係や入れ子関係を調整することにより CSS Bird も作られているので、この記事を読んだ後に使われているテクニックに思いを馳せつつもう一度遊んでみると、また違った見方で楽しむことができる、かもしれません。

CSS Bird

Open in a new window

この記事について

これは NSEG Advent Calendar 2015 の 2 日目の記事です。

NSEG とは

NSEG は長野県とコンピューターをテーマにした勉強会で、月1回のペースで開催されています。

勉強会の内容や形式は固定されておらず、フリーテーマの発表会、講師を招いての講演会やハンズオンセミナーなど、様々な形で開催されています。また NSEG 単独での開催だけでなく、他の団体と合同で開催している回も数多くあります。

そんな中、少し前の話になりますが、第17回勉強会ではMozilla勉強会との合同という形で開催され、私はその際に CSS プログラミングについての発表をしたことがあります。この記事ではそれにちなんで、CSS プログラミングとはなんぞやという話と、今回新しく書いた Flappy Bird のクローンの紹介をしたいと思います。

CSS プログラミングとは何か

一言でいうと「CSS を使ってプログラミングされているかのような表現をすること」です。

もう少し定義として厳密に考えると、「CSS を主として、LABEL 要素やFORM 要素の挙動などを利用しつつ、JavaScript を使わずにプログラミングされているかのような表現をすること」とも言えそうです。

CSS だけでプログラミングができるわけでは無いので、ここでは誤解のないように「プログラミングされているかのような表現をすること」という回りくどい言い方をしていますが、ブラウザの挙動を含めて考えると「手順にそって実行されている」結果にはなるので、広義的にはおそらく「プログラミング」という表現で差し支え無いと思います。

CSS プログラミングを学ぶということ

CSS プログラミングはともすると「CSS の仕様を使ってトリッキーなことをやっている」だけのように受け取られてしまうかもしれないのですが、実のところ、「プログラミングされているかのような表現」を支えている部分には論理的な構造があり、まさにプログラミングといった要素をもっていたりもします。

CSS プログラミングの基本的な構成要素は、

• DOM
• CSS

となっていて、「DOM の状態 (チェックボックスの状態や、マウスのホバーの状態) に対して、CSS で見た目を定義する」という形で表現されています。

CSS は if などの条件判定を記述することはできないですし、CSS 内で状態を持つこともできません。つまりできることは、「DOM の状態に対して、見た目を宣言的に記述すること」のみとなります。

また CSS 内で状態を持つことができないため、マウスのクリックやマウスの移動によって引き起こされた「DOMの状態の変化」に対して、「反応的に結果が変化する」ということになります。

つまりプログラミングのパラダイムとしては、

• 宣言的
• リアクティブ

といった要素を持っていると言えます。

そのように考えると一般的なプログラマとしても、ある種のエクササイズとして、「1年に1つ新しい言語を覚える」といった候補に入れてみても(1年かけられるかどうは別にして)よいのではないかと、思わなくもないことろです。

CSS Bird について

Flappy Bird のクローンである今回の CSS Bird は Advent Calendar Driven Development で書いた作品ではあるのですが、実はそれなりに新規性のあるものでもあります。

このゲームでは、:hover 擬似クラスを使って当たり判定を行っていて、タップでジャンプする毎に当たり判定の領域を移動させるということをやっています。したがってここで、2回目以降のジャンプでは、前回のジャンプの状態をストップ(保存)して次のジャンプをさせる必要があるのですが、「前回のジャンプの状態」は (ほとんど) 連続的な値なのでチェックボックスなどで保存することができないという問題がありました。

この問題を解決するために、今回は「animation-play-state を paused にすることで、クリックした時点の縦軸の状態を保存する」という方法を採用しました。より具体的には、ジャンプ時に移動させるレイヤーを入れ子にして、ジャンプ毎に奥から手前に状態を保存しつつ一枚ずつずらして行くという形で、今回の連続ジャンプの機能を実現しています。

「入れ子の DOM 構造と animation-play-state による状態の保存」によって横スクロールアクションゲームを実現するというのは、(私の観測範囲では)これまでになかった新しい作品のパターンだと思います。

まとめ

(それだけではないにしても) CSS プログラミングがトリッキーであることは否めないので、おそらく説明だけでは何をやっているか伝わりづらいと思います。もし興味をもってもらえたらソースを覗いてみるなどして、理解を深めてもらえれば嬉しいです。

またこの記事では触れませんでしたが、CSS プログラミングをするにあたっての基本的なテクニックなどもあるので、それについては別の記事で紹介できればと思っています。

その他の作品

以下の2点が、私が第17回勉強会の当時に作成した作品です。

• CSS 8puzzle
• CSS Noughts and Crosses

TL;DR

• chef-mysql-apt を書きました。
• 公式 deb で mysql-server の 5.7 をパスワード無しでインストールすると、mysql.user.plugin が auth_socket になるので、ALTER USER で明示的に plugin を変更しないとパスワードを変更できないので気をつけた方がよい。
• chef の remote_file での checksum の指定は、ダウンロードしたファイルの checksum を確認するものではないので気をつけた方がよい。 (違うとドキュメントに書いてあるけれど)

cookbook を書きました

MySQL を公式 APT リポジトリからインストールする Chef の cookbook、chef-mysql-apt を書いたのですが、非対話型の環境でのインストールという面でいくつかはまったポイントがあったので、それらの情報をまとめます。

cookbook を利用するだけであれば、node を以下のように設定すれば MySQL 5.7 のサーバーをインストールできます。

非対話型環境での mysql-apt-config のインストール

mysql-apt-config の deb は、インストール時に debconf で MySQL のバージョンを指定して、その結果にしたがって /etc/apt/sources.list.d/mysql.list を生成するという動作をするのですが、非対話型の環境でインストールした場合は未選択の状態となってしまい、どのリポジトリも追加されません。 調べたところ、どうもこういった場合には、debconf-set-selections を使うのが定石であるようなので、cookbook では以下のように対応しました。

debconf からの再設定は本来であれば以下のコマンドでできるような気がするのですが、どうもうまくいかない(応答が無くなってしまう)ので dpkg -r して dpkg -i しています。

sudo dpkg-reconfigure -fnoninteractive mysql-apt-config

非対話型環境で mysql-server をインストールした場合の root ユーザーの設定

非対話型環境で公式 APT リポジトリの mysql-server (mysql-community-server) をインストールするとパスワード無しの状態でインストールされるのですが、ここに若干の落とし穴がありました。

• mysql -u root でログインできない！
• sudo mysql_secure_installation は成功するのに、入力したパスワードで mysql -u root -p で接続しようとしてもできない！

ということで悩んでしまったのですが、mysql-community-server の postinst を確認したところ、

UPDATE user SET plugin='auth_socket' WHERE user='root';

をしているということが分かりました。

• plugin が auth_socket なので、root ユーザーの権限で socket 経由でないと接続できない
• 単に ALTER USER 'root'@'localhost' IDENTIFIED BY 'MyNewPass'; するだけではパスワードを更新できなくて ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'MyNewPass'; のよう明示的に authentication plugins を更新する必要がある
  • mysql_secure_installation で更新されたように見えてできないのはバグな気がします

ということだったようです。cookbook の方でも authentication plugins を更新するようにして、root のパスワードを初期化できるようになりました。

chef の remote_file での checksum

余談ですが、chef の remove_file には checksum を指定できるのですが、ダウンロードしたファイルのハッシュ値が一致することは確認されません。ドキュメントには「The SHA-256 checksum of the file. Use to prevent a file from being re-downloaded.」とあるので、確かにそれを目的とはしていなさそうではありますが。(でも、変な値を入れておいても再ダウンロードされるわけでもないようで、バグなのか詳細追えていないですが) ユースケース的には remote_file こそ、checksum を確認したいような気がするのですが。

とりあえずこの cookbook では、 remote_file の後に file を使って確認する感じにしています。

WordPressとかPHP系のコミュニティに行くと若い女の子がたくさんおるねん

Junnama Noda (2014.11.29)

「PHPを使えばモテるらしい」という話を耳にしたので、この仮説に基づいて Data API を使ってモテる方法を考えてみます。

ストラテジー

Data API はデフォルトで JSON 形式のデータを返すので、json_decode を使えば特に何も拡張しなくても PHPから利用することができます。

ただこの方法だと「json_decode」は 5.2 以降でないと使えなくてリーチできる範囲が狭くなりますし、「file_get_contents」とかなんかギークっぽい感じもするので、これを改善してゆるふわに利用できれば、Data API を使ってもっとモテることができるのではと考えました。

ソリューション

• Data API は出力のフォーマットを変更する仕組みをもっているので、プラグインを作成してPHPのソースコードで出力できるようにする。
• また Data API は、エンドポイントに拡張子を付けることでフォーマットを指定できるるので、これも利用する。

この2つの戦略を適用すると、以下のようなコードで PHP から Data API を利用できるようになります。

プラグイン

DataAPIFormatPHPをインストールすると、前出のコードが動くようになります。

インプリメンテーション

DataAPIFormatPHPの実装は非常に簡単なもので、PHPのデータ構造への変換はPHP::Sessionモジュール(をちょっと改造したもの)にお任せしているため、数十行程度のconfig.yamlのみで実現されています。

コンクルージョン

それでは、DataAPIFormatPHPでよいお年をお迎えください。

Movable Type Advent Calendar 2014の8日目の記事でした。

トフ

トフはシックス・アパートの公式キャラクターです。CC BY-NC-SA 4.0 の下でライセンスされており、オリジナルは シックス・アパートのウェブサイトで入手可能です。

各ツールのアップデートを行いました。お試しいただいている方は申し訳ありませんが、SyncedTheme プラグインの方は必ず更新をお願いします。

SyncedTheme 0.03

ダウンロード

• システムレベルのテンプレート編集権限の無いユーザーでも、アカウントを持っていればテーマのファイルをアップロードできてしまうという問題があったので、これを修正しました。

0.03 では機能の追加はないので、ローカル環境でテストをするだけの場合には 0.02 でも問題はありません

mt-sync-theme 0.1.5

Homebrewの場合

brew update && brew upgrade mt-sync-theme

ダウンロード版

ダウンロード

• MTの環境により正しく認証の情報を取得できない問題を修正しました。
• 「プラグインがインストールされていない」などの状態が報告されるようになりました。

MTSyncTheme.app 0.0.5

ダウンロード

• アプリケーションが起動できないという致命的な問題を修正しました。
• 「プラグインがインストールされていない」などの状態が報告されるようになりました。

(GitHub向けの) known_hosts を内包した ssh ラッパーを書いてみました。

ssh 接続で git clone する場合、GIT_SSH 環境変数を設定するとそれを使って接続してくれるのですが、このスクリプトを設定すればサーバー上のプログラムで GitHub から clone しようとした場合にも Host key verification failed と言われずに clone できます。

ほんとうは CheckHostIP=yes にしてIPアドレスを埋め込んだ方がいいと思います。

これは何か？

MTでテーマを同期するためのツールチェーンの一部で、デスクトップ上のファイルをMTにアップロードするためのアプリケーションです。(全体についてはこちら)

できること

• デスクトップ上のテーマのファイルをMTに同期することができます
• デスクトップ上に保存したテーマから直接プレビューを生成できます
  • 複数のファイルにまたがる変更の場合にも、全ての変更を反映した状態でプレビューを生成できます
• デスクトップ上に保存したテーマから、MTにテンプレートを一括で反映することができます
• 同じテーマのブログをまとめて再構築することができます

デモ

(全体の説明でのデモと同じものです)

動作環境

• OS X 10.9 以降
  • OS X Mavericks
  • OS X Yosemite
  • それ以降

インストール

1. GitHubからdmgファイルをダウンロードしてください。リリース一覧
2. ダウンロードしたファイルを開いて、MTSyncTheme.app をアプリケーションフォルダへインストールしてください。

(これ以降の説明はコマンドライン版の mt-sync-theme とほぼ同じ内容です)

実行前の設定

最小限の設定

1. MTにSyncedThemeをインストールしてください
2. 書きだしたテーマをデスクトップに保存してください
3. MTSyncTheme.appを実行する準備が整いました

詳細設定

1. MTにSyncedThemeをインストールしてください
2. (オプション) SyncedTheme を使ってテンプレートをテーマファイルにリンクしておくと便利です
3. (オプション) ブログからテーマを書き出してください
4. 書きだしたテーマをデスクトップに保存してください
5. (オプション) テーマのディレクトリにmt-sync-theme.yamlという名前で設定ファイルを置いてください。
   • 設定例
     • Mac
     • Windows
   • 設定値はコマンドラインオプションとして指定することもできます
6. MTSyncTheme.appを実行する準備が整いました

使いかた

概要

利用可能なコマンド

• Preview
  • ファイルの更新を監視して、ファイルが更新されるとプレビューページを生成し、指定されたハンドラでページを開きます。
  • このサブコマンドではmt-sync-themeは本番環境には影響を与えません。
• On the fly
  • ファイルの更新を監視して、ファイルが更新されると対応している公開ページを更新し、指定されたハンドラでページを開きます。
  • このサブコマンドではmt-sync-theme本番環境に影響を与えます。公開前の構築時に利用されることを想定しています。
• Sync
  • デスクトップ上のファイルをMTにアップロードします。
• Apply
  • 関連付けられている全てのブログで、テーマを再適用します。
• Rebuild
  • 関連付けられている全てのブログを再構築します。

Preview

• ファイルの更新を監視して、ファイルが更新されるとプレビューページを生成します。
  
  • このコマンドはファイルを監視するループになります。Ctrl+C で終了します。
• 更新されたファイルがインデックステンプレートかアーカイブテンプレートであった場合、url_handler として指定されたコマンドで URL を開きます。
  • モジュールテンプレートの場合には、theme.yaml で "preview_via" を指定することで、任意のテンプレートでプレビューを生成することができます。

On the fly

• ファイルの更新を監視して、ファイルが更新されると対応するページを生成します。
  
  • このコマンドはファイルを監視するループになります。Ctrl+C で終了します。
• このコマンドを実行する前には、ブログを1度再構築しておく必要があります。
• 更新されたファイルがインデックステンプレートかアーカイブテンプレートであった場合、url_handler として指定されたコマンドで URL を開きます。
  • モジュールテンプレートの場合には、theme.yaml で "preview_via" を指定することで、任意のテンプレートでプレビューを生成することができます。

Sync

• デスクトップ上のファイルをMTにアップロードします

Apply

• 関連付けられている全てのブログで、テーマを再適用します
• 以下の importer のみが実行されます。
  • template_set
  • static_files
  • custom_fields
    • テーマからカスタムフィールドを適用すると失敗するケースが多いですが、これはMT側の仕様です

Rebuild

• 関連付けられている全てのブログを再構築します。

詳細設定

preview_via

preview_via を使って、プレビューに利用するテンプレートを明示的に指定することができます。

--- 
elements: 
  template_set: 
    data: 
      templates: 
        module: 
          entry_summary: 
            label: Entry Summary
            preview_via: main_index

関連するツールのリンク

• ツール全体について
• SyncedTheme
  • MT側でこのツールを利用可能にするためのプラグイン
• mt-sync-theme
  • デスクトップ上のファイルをMTにアップロードするためのコマンドラインツール
• MTSyncTheme.app (このページです)
  • デスクトップ上のファイルをMTにアップロードするためのアプリケーション

これは何か？

MTでテーマを同期するためのツールチェーンの一部で、デスクトップ上のファイルをMTにアップロードするためのコマンドラインツールです。(全体についてはこちら)

これはコマンドラインツールです

もしコマンドラインツールに馴染みが無く、かつ OS X 10.9 (Marberics) 以降をお使いの場合には、この記事をとばしてMTSyncTheme.appを読んでいただくことをおすすめします。

できること

• デスクトップ上のテーマのファイルをMTに同期することができます
• デスクトップ上に保存したテーマから直接プレビューを生成できます
  • 複数のファイルにまたがる変更の場合にも、全ての変更を反映した状態でプレビューを生成できます
• デスクトップ上に保存したテーマから、MTにテンプレートを一括で反映することができます
• 同じテーマのブログをまとめて再構築することができます

デモ

インストール

Mac OS X / Homebrew

Homebrew をお使いの場合には、以下のコマンドでインストールできます。

brew tap mt-sync-theme/mt-sync-theme
brew install mt-sync-theme

バイナリ (Windows環境の場合はこちらになります)

実行プログラムをこちらからダウンロードできます。リリース一覧

go get

go の環境があれば go get でもインストールできます。

go get github.com/mt-sync-theme/mt-sync-theme

実行前の設定

1. MTにSyncedThemeをインストールしてください
2. (オプション) SyncedTheme を使ってテンプレートをテーマファイルにリンクしておくと便利です
3. (オプション) ブログからテーマを書き出してください
4. 書きだしたテーマをデスクトップに保存してください
5. (オプション) テーマのディレクトリにmt-sync-theme.yamlという名前で設定ファイルを置いてください。
   • 設定例
     • Mac
     • Windows
   • 設定値はコマンドラインオプションとして指定することもできます
6. mt-sync-themeを実行する準備が整いました

使いかた

概要

mt-sync-themeはサブコマンドをとり、それを実行します。

mt-sync-theme preview

利用可能なサブコマンド

• preview
  • ファイルの更新を監視して、ファイルが更新されるとプレビューページを生成し、指定されたハンドラでページを開きます。
  • このサブコマンドではmt-sync-themeは本番環境には影響を与えません。
• on-the-fly
  • ファイルの更新を監視して、ファイルが更新されると対応している公開ページを更新し、指定されたハンドラでページを開きます。
  • このサブコマンドではmt-sync-theme本番環境に影響を与えます。公開前の構築時に利用されることを想定しています。
• sync
  • デスクトップ上のファイルをMTにアップロードします。
• apply
  • 関連付けられている全てのブログで、テーマを再適用します。
• rebuild
  • 関連付けられている全てのブログを再構築します。

preview

• ファイルの更新を監視して、ファイルが更新されるとプレビューページを生成します。
  
  • このコマンドはファイルを監視するループになります。Ctrl+C で終了します。
• 更新されたファイルがインデックステンプレートかアーカイブテンプレートであった場合、url_handler として指定されたコマンドで URL を開きます。
  • モジュールテンプレートの場合には、theme.yaml で "preview_via" を指定することで、任意のテンプレートでプレビューを生成することができます。

mt-sync-theme preview

on-the-fly

• ファイルの更新を監視して、ファイルが更新されると対応するページを生成します。
  
  • このコマンドはファイルを監視するループになります。Ctrl+C で終了します。
• このコマンドを実行する前には、ブログを1度再構築しておく必要があります。
• 更新されたファイルがインデックステンプレートかアーカイブテンプレートであった場合、url_handler として指定されたコマンドで URL を開きます。
  • モジュールテンプレートの場合には、theme.yaml で "preview_via" を指定することで、任意のテンプレートでプレビューを生成することができます。

mt-sync-theme on-the-fly

sync

• デスクトップ上のファイルをMTにアップロードします

mt-sync-theme sync

apply

• 関連付けられている全てのブログで、テーマを再適用します
• 以下の importer のみが実行されます。
  • template_set
  • static_files
  • custom_fields
    • テーマからカスタムフィールドを適用すると失敗するケースが多いですが、これはMT側の仕様です

mt-sync-theme apply

rebuild

• 関連付けられている全てのブログを再構築します。

mt-sync-theme rebuild

詳細設定

preview_via

preview_via を使って、プレビューに利用するテンプレートを明示的に指定することができます。

--- 
elements: 
  template_set: 
    data: 
      templates: 
        module: 
          entry_summary: 
            label: Entry Summary
            preview_via: main_index

関連するツールのリンク

• ツール全体について
• SyncedTheme
  • MT側でこのツールを利用可能にするためのプラグイン
• mt-sync-theme (このページです)
  • デスクトップ上のファイルをMTにアップロードするためのコマンドラインツール
• MTSyncTheme.app
  • デスクトップ上のファイルをMTにアップロードするためのアプリケーション