SexyColorExtractor とは

MT > SexyColorExtractor
2012年12月24日 23:00
Taku AMANO
 | | コメント(0) | トラックバック(0)

メリークリスマス！

これはMovable Type Advent Calendar 2012の24日目の記事です。

クリスマスにちなんで、iTunes11 のようなシャレオツな表示を実現するためのプラグインを作成したのでご紹介します。

できること

  • 画像からお洒落っぽい感じで色を抜き出すことができます。
  • 以下のタイプの色情報をMTタグで出力することができます。
    • RGB
    • HSV

出力例

output-sample.png

テンプレート

<mt:SetVarTemplate name="gradient_top_bottom">
background: -webkit-linear-gradient(top, <mt:Var name="gradient_values" />);
background: -moz-linear-gradient(top, <mt:Var name="gradient_values" />);
background: -o-linear-gradient(top, <mt:Var name="gradient_values" />);
background: -ms-linear-gradient(top, <mt:Var name="gradient_values" />);
background: linear-gradient(to bottom, <mt:Var name="gradient_values" />);
</mt:SetVarTemplate>
<mt:SetVarTemplate name="gradient_left_right">
background: -webkit-linear-gradient(left, <mt:Var name="gradient_values" />);
background: -moz-linear-gradient(left, <mt:Var name="gradient_values" />);
background: -o-linear-gradient(left, <mt:Var name="gradient_values" />);
background: -ms-linear-gradient(left, <mt:Var name="gradient_values" />);
background: linear-gradient(to right, <mt:Var name="gradient_values" />);
</mt:SetVarTemplate>
<mt:Assets>
<div style="color: <mt:AssetSexyTextMainColor />; text-shadow: 0 1px 0 <mt:If tag="AssetSexyTextMainColor" map="HSV" format="%3$d" lt="128">rgba(255,255,255,0.4)<mt:Else>rgba(0,0,0,0.4)</mt:If>; background-color: <mt:AssetSexyBackgroundColor />; float: left; width: 100%;">
<div style="font-weight: bold; font-size: 120%; padding: 10px;"><mt:AssetLabel /></div>
<div style="color: <mt:AssetSexyTextSubColor />; text-shadow: 0 1px 0 <mt:If tag="AssetSexyTextSubColor" map="HSV" format="%3$d" lt="128">rgba(255,255,255,0.4)<mt:Else>rgba(0,0,0,0.4)</mt:If>; width: 500px; padding: 10px; float: left">
<mt:AssetDescription />
</div>
<div style="position: relative; height: 200px; width: 200px; float: left;">
<mt:SetVarBlock name="gradient_values"><mt:AssetSexyBackgroundColor /> 0%, rgba(<mt:AssetSexyBackgroundColor format="%d, %d, %d" />, 0.25) 20%</mt:SetVarBlock>
<img src="<mt:AssetThumbnailURL width="200" square="1" />" style="position: absolute; right: 0px; top: 0px; z-index: 1;" />
<div style="position: absolute; right: 0px; top: 0px; z-index: 2; width: 200px; height: 200px; <mt:Var name="gradient_top_bottom" />"></div>
<div style="position: absolute; right: 0px; top: 0px; z-index: 3; width: 200px; height: 200px; <mt:Var name="gradient_left_right" />"></div>
</div>
</div>
</mt:Assets>
view raw example.html hosted with ❤ by GitHub

タグ

  • AssetSexyBackgroundColor
  • AssetSexyTextMainColor
  • AssetSexyTextSubColor

モディファイア (全タグ共通)

map="RGB | HSV" (default: "RGB")
format="output-format" (default: "rgb(%d, %d, %d)")

対応しているMT

  • 5以降 (動作確認は 5.2 のみ)

対応している出力方法

  • スタティックパブリッシング
  • ダイナミックパブリッシング
    • インストール後にアップロードした画像に対してのみ出力可能です。
    • フォーマットの指定に"$"を使う場合には"\"でエスケープをする必要があります。(例: format="%3\$d")

必要な環境

  • ImageMagick が利用可能であること (かつ ImageDriver が ImageMagick であること)

インストール

  1. ZIP ファイルをダウンロードします。
  2. ダウンロードしたファイルを展開します。
  3. plugins/SexyColorExtractor を、インストール先のMTに plugins/SexyColorExtractor としてアップロードします。
  4. 設置完了です。

ライセンス

MITライセンス

リポジトリ

usualoma/mt-plugin-SexyColorExtractor

参考にした情報

カテゴリ:

トラックバック(0)

このブログ記事を参照しているブログ一覧: SexyColorExtractor とは

このブログ記事に対するトラックバックURL: https://tec.toi-planning.net/mtos/mt-tb.cgi/980

コメントする