blog.taaas.jp

この記事について

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にアップロードするためのアプリケーション

これは何か？

MTでテーマを同期するためのツールチェーンの一部で、ブログのテンプレートと「テーマ」のファイルをリンクすることができるプラグインです。(全体についてはこちら)

できること

• ブログのテンプレートから、ファイルのリンクを一括で設定することができます
  • 今までのように、１つずつファイルのリンクを設定する必要がありません
• mt-sync-theme や MTSyncTheme.app を利用するための Data API のエンドポイントを追加します

リンクの一括設定は次のようなイメージです。ブログの新規作成画面に「テンプレートにリンク」のチェックボックスが追加され、これにチェックを入れてブログを作成すると、作成されたブログのテンプレートから「テーマ」のファイルにリンクされます。

もう少し詳しい説明

MTの「テーマ」は再適用もできるので運用開始後の利用も想定されているのですが、再適用やテンプレートの初期化は手間がかかるので、トライアンドエラーでテンプレートを書いていくためには現実的な作業ではありませんでした。また一括で複数のブログを初期化することもできないので、複数のブログに同じテーマを適用していても、更新時にはそれぞれ適用する必要がありました。

このプラグインの機能を使うと、ブログのテンプレートを全て、テーマのファイルにリンクします。その状態になっていれば、テーマをダウンロードしてデスクトップで編集し、それをMTに戻すだけでテンプレートの変更を反映させることができます。

また複数のブログでテーマを共有している場合には、テーマのファイルを更新するだけで関連付けられている全てのブログのテンプレートを更新することができます。

複数のブログで共有している場合には、別のメリットもあり、ブログAとブログBがあった場合、ブログAの方でMT上でテンプレートを更新しただけでブログBのテンプレートも更新できる、という状態になるので、「デスクトップとの連携」しなくてもリンクしているという状態を活かすことができます。

つまりこのプラグインは「テーマ機能」を、「ブログ作成時の雛形」から「運用の中でのテンプレートの更新を管理するための器」にするというパラダイムの転換を促すものであると思っています。(大げさに言えば)

スクリーンショット

テーマのエクスポート時に同時にリンクの設定を行うことができます。(実際の運用ではこちらから設定するケースの方が多いかもしれません)

インストール

1. GitHubからzipファイルをダウンロードしてください。リリース一覧
2. ダウンロードしたファイルを展開してください。
3. pluginsディレクトリにアップロードしてください。
   インストール後のディレクトリの配置は以下のようになります。

   $MT_HOME/
       plugins/
           SyncedTheme/
   

制限事項

このプラグインを使って「<__trans ... />」を含むテンプレートにリンクをすると、翻訳された状態で保存されます。(元に戻すことはできません)

関連するツールのリンク

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

これは何か？

「テーマ」の機能を利用してデスクトップとMTを連携させるためのツールです。

できること

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

デモ

開発の背景

バージョン管理システムの利用がウェブ制作の現場にも普及してきたためか、最近では、

テンプレートをバージョン管理システムで管理したい

という話を、しばしば耳にするようになりました。

MTにもテンプレートの更新履歴を管理する機能があり、これはMT上で更新の流れを追うためには便利なのですが、特定の時点のスナップショットを保存しておくことはできないですし、また制作側としては「ブログ単位のまとまりとしてテンプレートを管理」したいところがあるような気がするので、それには少し別のアプローチをとった方がいいかなと思っていました。

またそれと平行して個人的に、MTの「テーマ」の機能はブログ作成時の雛形としては有用な機能がそろっているものの、一括で適用する機能などが無いなと思っていて、もう少し機能が追加されれば運用のための機能としても使えるようになるなとも思っていました。

それらの問題に対する自分なりの回答が、今回のツールになります。

ツールの詳細

このツールは以下の3つのプラグインやアプリケーションで構成されています。

• SyncedTheme
  • MT側でこのツールを利用可能にするためのプラグイン
• mt-sync-theme
  • デスクトップ上のファイルをMTにアップロードするためのコマンドラインツール
  • いわゆる黒い画面で動くものです
  • 次の MTSyncTheme.app が使える場合には、このツールは無視して大丈夫です
• MTSyncTheme.app
  • デスクトップ上のファイルをMTにアップロードするためのアプリケーション
  • mt-sync-theme の GUI フロントエンドです
  • OS X 10.9 (Mavericks) 以上が必要です

インストール方法や使いかたはそれぞれのページで説明していきます。

トフについて

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