【 gabs.log｜おしゃべり好きなWEB制作者のたわごと 】

こちら（どちら？）では、お久しぶりの BUN です。

拙作の「Movable Type タグライブラリ for Dreamweaver 機能拡張」をちょこっとアップデートしました。

Movable Type タグライブラリ for Dreamweaver 機能拡張(Dw CC/MT6対応版)
https://github.com/dreamseeker/MovableType-TagLibrary-for-DwExtension/releases/tag/1.0.5

過去バージョンを導入済みの方は、お手数ですがアンインストールをしてください。
最新版をインストールしてDreamweaverを再起動すると、この機能拡張を利用することができます。

このバージョンでの変更点は、公式タグリファレンスの「@new in mt6.0 タグを含む MTタグ」一覧のうち、不足していた MT タグの追加となります。具体的には、以下のタグを追加しています。

• MTDataAPIScript
• MTDataAPIVersion
• MTHasNoParentFolder
• MTHasNoSubFolders

これで MT6.0.x に対応できているかと思いますが、
お気づきの点などがありましたら、フィードバックくださいませ。

最近になって、やっと不具合の原因が判ったBUNです。
Dreamweaver CC だと、ユーザディレクトリにタグライブラリ関係の設定ファイルが存在しない・・・んですね。どこかに書いてあるんでしょうか？(T-T)

ということで、今回の「Movable Type タグライブラリ for Dreamweaver 機能拡張」アップデートで、Dreamweaver CC でも動作するようになりました。下記より、ダウンロードしてください。

Movable Type タグライブラリ for Dreamweaver 機能拡張(Dw CC/MT6対応版)
http://download.d-s-b.jp/MovableType_TagLibrary_v104.zip

過去バージョンを導入済みの方は、お手数ですがアンインストールをしてください。
最新版をインストールしてDreamweaverを再起動すると、この機能拡張を利用することができます。

このバージョンでの変更点は、下記3点となります。

• Movable Type 6 までのMTタグやモディファイアの追加・アップデート
• Dreamweaver CC 対応
• ファンクションタグの「<mt:Hoge />」書式をサポート（Dw CC のみ）

公式サイトのリファレンスを参照したので、MT6.0.2に完全対応していると思います。
もし、お気づきの点がありましたら、ぜひフィードバックをお願いします。

なお、このDreamweaver 機能拡張の詳細は、以前の記事(Movable Type タグライブラリ for Dreamweaver 機能拡張をver 1.0.0にアップデートしました、Movable Type 5.1 Beta 1のリリースに伴い、 Movable Type タグライブラリ for Dreamweaver 機能拡張を アップデートしました)をご覧ください。

また、Dreamweaver CC の環境設定で「カラーリングスキーマ」を変更する際、<mt:Hoge />書式は「Movable Type ファンクションタグ-2」となりますのでご注意ください。

いつも通りすっかりご無沙汰なBUNですが、Movable Type Advent Calendar 2013 の15日目の記事を書きます。

それにしても、約1年ぶりって。。。
雪も降りしきる訳・・・ですね(｡-_-｡) www

さて、先日 Google Maps JavaScript API v2 の廃止に伴い、過去に制作したサイトで「管理画面に地図は互換表示されてるものの、ジオコーディングが利用できない」ことがありました。
導入していたプラグインに含まれる JavaScript の記述を書き換えることで解消できたのですが、プラグイン自体が既にアップデートされていない・・・という、ままある？状況。

そこで、MT 標準のカスタムフィールドと MTAppjQuery プラグインで地図座標の管理をする方法について共有してみます。

やりたいこと

今回は、（ブログ）記事へカスタムフィールドを追加しつつ、別途用意した JavaScript を読み込ませる形で編集画面に地図を表示させます。あわせて、地図の中心座標やズームレベルの変更にあわせて各フィールドの入力値を変更したり、ジオコーディングで大まかな位置を表示できるようにします。

完成図は、下記のようなイメージです。

なお、 MTAppjQuery プラグインはあらかじめインストールしてある前提で、解説していきます。

カスタムフィールドの追加

はじめに、カスタムフィールドを3つ追加します。
システムオブジェクトは「記事」、種類は「テキスト」とします。

名前：緯度
ベースネーム、および、テンプレートタグ：lat

名前：経度
ベースネーム、および、テンプレートタグ：lng

名前：ズームレベル
ベースネーム、および、テンプレートタグ：zoom

ここで記載しているベースネームとテンプレートタグは、あくまで一例です。
「lng じゃなくて long だろ！」など、思うところがある方はご自由に変更してください w

なお、カスタムフィールドだけを追加する専用テーマを用意しました。
ごちらをご利用の場合は、ダウンロードして ZIP ファイルを解凍後にできるフォルダ（mt）を MT のシステムディレクトリと見立てて、「/themes/」の中身をアップロードしてください。

地図用カスタムフィールド追加テーマ
http://download.d-s-b.jp/MTThemes/theme_cf_googlemaps.zip

アップロード後、任意のウェブサイトまたはブログへテーマを適用します。

JavaScript のアップロードと user.css の修正

導入済みの方はご存知の通り、MTAppjQuery プラグインは「/mt-static/plugins/MTAppjQuery/user-files/」に含まれる JavaScript や CSS を調整してカスタマイズできます。

そこで、Google マップ表示用の JavaScript をこのディレクトリにアップロードして管理することにしましょう。

MTAppjQuery user-files 追加データ
http://download.d-s-b.jp/MTAppjQuery_user-files.zip

ZIP ファイル解凍後、 GoogleMaps.js の2〜11行目をお好みで調整してください。

var lat_basename = 'lat';    // 「緯度」カスタムフィールドのベースネーム
var lng_basename = 'lng';    // 「経度」カスタムフィールドのベースネーム
var zoom_basename = 'zoom';    // 「ズームレベル」カスタムフィールドのベースネーム
var map_wrapper_element = 'map-wrapper';    // 上記3つのカスタムフィールドのラッパーID
var map_element = 'gmap';    // 地図を表示させる要素のID名
var map_search_element	= 'map-serach-box';    // 「地図を検索」部分のラッパーID
var lat_default = 37.400529;    //「緯度」の初期値
var lng_default = 140.359743;    //「経度」の初期値
var zoom_default = 15;    // 「ズームレベル」の初期値

lat_basename・lng_basename・zoom_basename はカスタムフィールドのベースネーム、
lat_default・lng_default・zoom_default には地図座標などの初期値をそれぞれ設定します。

参考までに、 GoogleMaps.js の13行目で「緯度のカスタムフィールドがある場合のみ」それ以降のコードを実行するようにしてあります。

if(jQuery('#customfield_' + lat_basename + '-field').length){

特定のウェブサイト（やブログ）に限定する場合は、ここを調整してください。

// 緯度のカスタムフィールドがあり、かつ、ブログ ID が 2 の場合に限定
if(jQuery('#customfield_' + lat_basename + '-field').length && mtappVars.blog_id == 2){

また、14〜21行目で3つのカスタムフィールドをタイトルの次に並べつつ、ドラッグによるソートを無効にしています。user.js で並び順を制御している場合などは、これらの行を削除してください。

// 必要にあわせてソートを調整
$.MTAppFieldSort({
  sort: 'title, c:' + lat_basename + ', c:' + lng_basename + ', c:' + zoom_basename
});
jQuery('#customfield_' + lat_basename + '-field, #customfield_' + lng_basename + '-field, #customfield_' + zoom_basename + '-field')
  .removeClass('sort-enabled')
  .wrapAll('
');

なお、user.css に追記する内容は下記のとおりです。
既に任意のスタイル定義をしている場合は、行末あたりにコピー＆ペーストでよいかもしれません。要素の ID 名を変更した場合は、調整をお忘れなく。。。

#gmap {
  width: 100%;
  height: 300px;
  background: #ddd;
}
#map-wrapper:after,
#map-serach-box:after {
  display: table;
  content: " ";
  clear: both;
}
#map-wrapper > div.field {
  width: 39%;
  float: left;
  margin-right: 1%;
}
#map-wrapper > div.field:last-child {
  width: 20%;
  margin-right: 0;
}
#map-serach-box {
  padding: 0.5em 0 1em;
}
#map-serach-box input {
  width: 70%;
  float: left;
  margin-right: 1%;
}
#map-serach-box button {
  float: right;
  font-size: 12px;
}

プラグイン設定の調整

最後に MTAppjQuery のプラグイン設定へ script タグを2つ追加します。

<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/PATHtoMT/mt-static/plugins/MTAppjQuery/user-files/GoogleMaps.js"></script>

2行目にある mt-static のパスは、適宜修正してください。

個人的には、必要に応じて直後に読み込まれる user.js でゴニョゴニョできるので「変数 mtapp_html_foot に追加（MTAppjQueryのuser.jsの直前）」にセットするのがオススメです。

問題なく設定できていれば、（ブログ）記事の編集画面に Google マップが表示されます。

補足

出力する際は、テンプレートの任意の場所へ従来のカスタムフィールドと同様に MT タグを記述します。

上記は、拙作の jQuery Google Maps プラグインで表示させる場合のサンプルです。
複数マーカーの表示なども比較的簡単に実装できると思うので、よかったら使ってみてください。

jQuery Google Maps プラグイン
http://labs.d-s-b.jp/plugins/jQuery/jQueryGoogleMaps/

毎度ながら、すっかりご無沙汰なBUNです。
みなさんお元気ですか？(｡-_-｡)

小ネタはストックしてあるものの重い腰がなかなか上がらなかったのですが、Movable Type Advent Calendar 2012 の19日目の記事として、半強制的に書くことにしました。

文体すら忘れかけてるので、サクッと短めに www

さて、先日「スタティック」として実装済みのテンプレートを「ダイナミックパブリッシング」に変更する必要に駆られました。導入しているプラグイン自体の影響を受けることは考えられなかったため、当初「公開を切り替えるだけで大丈夫だろう」と思っていたものの、実際に設定してみると出力先のURLは真っ白に。。。

調べてみたところ、テンプレート内にPHPのコードを記述していたのが原因でした。
このとき初めて知ったのですが、ダイナミックパブリッシング用のテンプレートにPHPのコードを書く場合は、Smartyの記法で書かないといけないのですね。

という訳で、下記のように変更したところ、とりあえず真っ白な画面ではなくなりました。
Movable Typeでは、Smartyのデミリタが2重の中括弧になります。

<?php include('header.php'); ?>

{{php}} include('header.php'); {{/php}}

次に問題になったのが、PHPの変数に直接MTタグを代入している箇所でした。

前述のように{{php}}{{/php}}で囲むだけではダメで、一旦captureにセットしてからget_template_vars関数でPHPの変数に代入できました。

<?php $title = '<$mt:EntryTitle$>'; ?>

{{capture assign="entry_title"}}<$mt:EntryTitle$>{{/capture}}
{{php}}$title = $this->get_template_vars('entry_title');{{/php}}

これまでダイナミックパブリッシングをなんとなく避けてきたBUNでしたが、
これくらいの調整で済むのであれば、使い出がありそうかなと。

「おしゃべり好き」とタイトルに掲げておきながら、すっかりご無沙汰なBUNです。
みなさん、お元気ですか？

久々なので、gabs.log で配布している Movable Type タグライブラリ for Dreamweaver 機能拡張 をご利用いただいている方には、ちょっと便利かもしれない「小ネタ」を書いてみます。

もちろん、必要に駆られました(｡-_-｡)

Movable Typeで「テーマのエクスポート」をすると、テンプレートがMTMLファイルとして出力されます。
以前「Dreamweaverで編集したい！」と [ 環境設定 ] > [ ファイルタイプ/コードビュー ] に .mtml を追加してみたものの、プレーンテキストと同様の表示になったりで、結局テンプレートごとに「ファイルへのリンク」を指定しHTMLファイルとして編集していました。

管理するブログの数が少なければ従来の方法で問題ありませんが、その都度設定するのは面倒。。。
MTMLの編集時にコードヒントの表示やシンタックスハイライトを使えたら、効率化を図れますよね？

そこで Configuration 内の Extensions.txt と DocumentTypes/MMDocumentTypes.xml を修正します。Configuration フォルダは、OS や Dreamweaver のバージョン、ユーザーアカウント数などで格納場所が異なるようですので、見つからない方はオンラインヘルプを参考にしてください。

Adobe Dreamweaver CS5 & CS5.5 * ドキュメント拡張子とファイルタイプの追加および変更
http://help.adobe.com/ja_JP/dreamweaver/cs/extend/WS5b3ccc516d4fbf351e63e3d117f53d6108-7fda.html

Extensions.txt の修正

Configuration/Extensions.txt の16行目。
PHTML に続けて「,MTML」を追加します。半角かつアルファベットは大文字で入力してください。

PHP,PHP3,PHP4,PHP5,TPL,PHP-DIST,PHTML,MTML:PHP Files

MMDocumentTypes.xml の修正

Configuration/DocumentTypes/MMDocumentTypes.xml の75行目。
ptmlに続けて「,mtml」を追加します。こちらは半角小文字です。
判りづらいかもしれませんが、winfileextension と macfileextension の2つの属性値を変更します。

あとは、それぞれのファイルを保存して Dreamweaver を再起動すれば、MTMLファイルでコードヒントの表示やシンタックスハイライトが有効になります。

なお、ここで解説している内容は Mac版の Dreamweaver CS 5.5 をベースにしています。
バージョンによって、行数が異なるかもしれませんのでご注意ください。

また、修正作業をする前に念のためバックアップを取っておいてください。

必要に駆られないと動かない、腰の重いBUNです。
みなさん、元気にお過ごしですか？(笑)

表題の通り、自作の「Movable Type タグライブラリ for Dreamweaver 機能拡張」を1.0.2にアップデートしました。下記より、ダウンロードいただけます。

Movable Type タグライブラリ for Dreamweaver 機能拡張(MT5.1対応版)
http://download.d-s-b.jp/MovableType50_TagLibrary_v102.zip

過去バージョンを導入済みの方は、お手数ですがアンインストールをしてください。
再度インストール後、Dreamweaverを再起動するとこの機能拡張を利用することができます。

アップデートに伴う変更点は、プライマリカテゴリの出力に関する下記の2点となります。

• MTEntryPrimaryCategoryを新たに追加。
• MTEntryCategoriesタグに、typeモディファイアとキーワード(primary)を追加。

公式サイトのリファレンスを見る限り、MT5.1に完全対応していると思います。
もし、お気づきの点がありましたら、ぜひフィードバックをお願いします！

なお、このDreamweaver 機能拡張をご存じない方は、以前の記事(Movable Type タグライブラリ for Dreamweaver 機能拡張をver 1.0.0にアップデートしました、Movable Type 5.1 Beta 1のリリースに伴い、 Movable Type タグライブラリ for Dreamweaver 機能拡張を アップデートしました)もご覧くださいませ。

いつものことですが。
必要に駆られて、ブログ記事などにソーシャルメディア連携ボタンを表示するための
jQuery プラグインを作成したので、公開してみます。

gabs.logでも、記事の詳細ページでタイトル下に表示させてみました。
対応しているのは、以下8つのサービスです。

• del.icio.us
• Evernote
• Facebook いいね！ボタン
• はてなブックマーク
• livedoor クリップ
• mixi チェック
• Twitter
• Yahoo! ブックマーク

ダウンロードと導入方法

プラグインのダウンロードは、下記URLからお願いします。

jQuery SocialMediaBtns 1.00
http://download.d-s-b.jp/jquery.SocialMediaBtns1.00.zip

ZIPファイルを解凍後にできるフォルダーを任意のディレクトリにアップロード後、
ボタンを表示したいファイルに、script要素でリンクと初期化の記述を加えるだけで導入できます。
具体的な初期化の記述については、サンプルコンテンツをご確認ください。

jQuery SocialMediaBtns プラグイン　サンプル
http://labs.d-s-b.jp/plugins/jQuery/jQuerySocialMediaBtns/

---

なお、商用・非商用に関わらず、自由にお使いいただけます。
ただし、実際にご利用される前に、テスト環境で動作に問題がないかをチェックいただくことをオススメします。

現在のところ、jQuery 1.5.2、IE8 / IE7（Windows 7）、Safari / Firefox 4.0 / Firefox 3.6 / Chrome 10（Mac）で動作確認しています。IE6に対応する予定はありませんので、不具合があるかもしれません、あらかじめ、ご了承ください。

先週末、ホテルはまつにて「プロジェクトマネジメント基礎講座」が開催されました。
そのレポートは、誰かにお任せするとして。。。(笑)

ワークショップの際にご一緒させていただいた@type920さんから、
「小粋空間さんで配布されているSplit プラグインをダイナミック・パブリッシングでも使えないかな？」とご質問をいただきました。

その折は、「ダイナミック・パブリッシングなら、PHPを直接記述するかも。」とお答えしたものの、
あまりスマートな答えとは、言えませんよね。。。

そこで、もっと簡単に実現できるよう、プラグイン化してみました。
Perlはsplit関数、PHPはexplode関数で分割・・・という、いたってシンプルなプラグインです。
制作にあたり、前述のSplit プラグインも参考にさせていただきました。

@type920さん、荒木さん、ありがとうございます！

導入方法

プラグインのダウンロードは、下記URLからお願いします。

SplitModifier 0.1.0
http://download.d-s-b.jp/MTPlugins/SplitModifier_v0.1.0.zip

---

追記 2011.03.01
SplitModifier 0.1.1に、アップデートしました。
詳しくは、指定した文字で出力されるデータを分割するMTプラグイン SplitModifier をアップデートをご覧ください。

---

ZIPファイルを解凍後にできるフォルダーをMovable Typeのシステムディレクトリ内にある「/plugins/」へコピー(アップロード)してください。

なお、商用・非商用に関わらず、自由にお使いいただけます。
ただし、実際にご利用される前に、テスト環境で動作に問題がないかをチェックいただくことをオススメします。(※現状、MT 4.2.3、MT5.0.4で動作チェック済みです。)

SplitModifier プラグインで、できること

SplitModifier プラグインの主な機能は、以下のとおりです。

• split モディファイアで、分割の基準となる文字列を指定できます。
• グローバル・モディファイアですので、MTファンクションタグで利用できます。(MTブロックタグは、テストしていません。)
• 分割後の値は、固有の変数名を指定することで取得できます。
• ダイナミック・パブリッシングに対応しています。

SplitModifier プラグインの使い方

本文に「37.400529,140.359743,15」とGoogle Mapsの座標が入力してあり、
緯度、経度、ズームレベルをそれぞれ取得する場合を例にあげてみます。

まず、テンプレート内の任意の場所で、SetVarsタグによる変数のセットを行います。
下記のサンプルでは、split モディファイアの値に「カンマ」を指定して、本文を分割しています。

<$mt:EntryBody split="," $>

SetVarsにセットされる値は、次のようになります。
変数名の接頭辞（split_var）は、固定値です。そこに、0から始まるインデック番号が付加されます。

split_var0 = 37.400529
split_var1 = 140.359743
split_var2 = 15

セットされた変数を出力する場合は、テンプレートの任意の場所でGetVarタグを記述してください。

緯度：<$mt:GetVar name="split_var0" $>
経度：<$mt:GetVar name="split_var1" $>
ズームレベル：<$mt:GetVar name="split_var2" $>

注意点

本文やテキスト（複数行）のカスタムフィールドの場合、p要素が出力される場合があります。
このプラグインでそのまま分割してしまうと、生成されたページの文書構造が崩れる可能性が考えられます。

また、インデックスやアーカイブなどの一覧表示部分で使用する際、
分割数にバラつきがあると、意図しない値が出力される場合がありますので、ご注意ください。

なお、不具合や愛のあるダメ出し(笑)などございましたら、お気軽にフィードバックをお願いします！

MTユーザーのみなさんは既にご存じかもしれませんが、
2011年2月15日にMovable Type 5.1 Beta 1 が公開されました。

過去のバージョンと比べてどんな変更があるのかは、
公式アナウンスと小粋空間さんのレポートをご覧ください。

Movable Type 5.1 Beta 1 を公開 | MovableType.jp
http://www.movabletype.jp/blog/movable_type_51_beta_1.html

Movable Type 5.1新機能の徹底解説: 小粋空間
http://www.koikikukan.com/archives/2011/02/16-015555.php

これ以上、BUNが詳しく解説できる自信はありません(笑)
個人的には「カテゴリやフォルダの並び替え」と「親ウェブサイトのモジュールをインクルード」は、
制作作業の効率化に繋がるかな・・・と、喜んでいます。

さて、Movable Type 5.1から、MTタグの一部にモディファイアが追加されるということで、
当ブログで配布しているMovable Type タグライブラリ for Dreamweaver 機能拡張を
本日アップデートしました。下記より、ダウンロードいただけます。

Movable Type タグライブラリ for Dreamweaver 機能拡張(MT5.1 Beta 1対応版)
http://download.d-s-b.jp/MovableType50_TagLibrary_v101.zip

一部ファイルのディレクトリを変更してあります。
ver 1.0.0を導入済みの方は、お手数ですがアンインストール後に再度インストールしてください。
また、Dreamweaverの再起動もお忘れなく。。。

このバージョンでの変更点は、下記の2点となります。

• リスティングフレームワークに対応したブロックタグ(MTTopLevelCategories、MTSubCategories、MTCategoryNext、MTCategoryPrevious、MTTopLevelFolders、MTSubFolders、MTFolderNext、MTFolderPrevious)に、sort_byモディファイアとキーワード(user_custom)を追加。
• MTIncludeタグに、parentモディファイアとキーワード(1)を追加。

include_blogs と exclude_blogs モディファイアについては、
既存のままでも併記できるため、変更はありません。

公式タグリファレンスへの記載は、ベータ版ということでまだありませんので、
藤本さんのブログ記事を参考にさせていただきました。ありがとうございます！

Movable Type 5.1のテンプレートタグの改良点 - The blog of H.Fujimoto
http://www.h-fj.com/blog/archives/2011/02/16-130609.php

Movable Type 5.1の正式リリース時に上記以外の変更がある場合には、
再度アップデートを行います。

なお、このDreamweaver 機能拡張をご存じない方は、以前の記事(Movable Type タグライブラリ for Dreamweaver 機能拡張をver 1.0.0にアップデートしました)もご覧くださいませ。

既にご存じの方もいらっしゃるかと思いますが、
来る11月6日(土)、ビッグパレットふくしまで「MTDDC Meetup FUKUSHIMA 2010」を開催することになりました。

しかも、gabsの3人がうっかり出演します。
・・・大丈夫なのでしょうか？(笑)

Google Chrome for Macのβ版がアップデートされ、
ブックマークの同期機能やExtensionsを(比較的)気軽に利用できるようになりました。

パスワード管理ツールに、シェアウェアの1Passwordを利用しているBUNとしては、
できればChromeでも使いたいなと思っていた矢先。
専用のExtention(ただし、α版)がリリースされていることを知りました！

Chrome で 1Password が使えるようになる Extensions がリリースされました - MacBookの小部屋
http://dbarg2.blog102.fc2.com/blog-entry-876.html

これは、便利ですね。

Adobe BrowserLab
https://browserlab.adobe.com/

ちょうど良いタイミングでネタを発見！(笑)

Flash Playerをインストールしたブラウザであれば、OSやバージョンをまたいだ表示チェックが可能になる・・・そんな素晴らしいサービスです。