BlogTop > Archives > 2013年2月 Archive

2013年2月 Archive

« 2013年1月 | 2013年2月 | 2013年3月 »

今月のいらんことしい（2013年 2月） 21日
5.2.3へアップグレードした時の設定とトラブルシューティングまとめ 11日
mt.Vicuna Simple にカスタマイズした Pin it ボタンをつけてみる 06日
メモ：Movable Type 4 系から 5.2.3 へアップグレード 03日

今月のいらんことしい（2013年 2月）

Posted by: maRk
2013年2月21日 13:52
Last update: Jan 12, 2015 23:03
MTカスタマイズ | myown

今月（2013年 2月）、サイト内の管理上の変更、カスタマイズした点をまとめたエントリです。

Movable Type を4.x から 5.x にアップグレード
MovableType カテゴリーページに Twitter 検索のタイムラインのウィジェット設置
Tag archive ページにて、記事内に画像のあるときサムネイル表示
Hatena Bookmark Button の Retinaディスプレイ対応版が表示できるようにした
Twitter ウィジェットを Join the conversation 表示のものを新しいウィジェットに変更
mt.config の DBSocket を明示的に指定

アップデート関連の記事について

Twitter 検索タイムラインウィジェット作成までの手順は下記のとおりです（*2013年2月時点仕様変更等で名称など変わるかもしれません）。

Twitter にログインします
Twitter 検索のページで任意の(検索保存ずみでないもの)キーワードをいれます
結果が表示されたら、ギヤアイコンをクリックして、「この検索をサイトに埋め込む」をクリックします
使用するドメインに設置するドメインをいれます。複数の場合は,(カンマ)で区切ります
ウィジェットを作成でウェジェット設置のコードが表示されます
作成後の編集は、Twitter アカウントの設定の項目のウィジェットのところからおこなえます。フォーム内で指定できるものを変更していきます。「変更を保存」で右のプレビューに反映されます。

<mt:CategoryLabel setvar="catLabel"> <mt:Ignore>カテゴリラベルを変数セット</mt:Ignore>
<mt:If name="catLabel" like="使用するページのカテゴリラベル">
<div id="twWidget_time_line">
__ Twitter ウィジェットのスニペット __
</div></mt:If>

記事内に画像のあるやなしやの改造について

<li class="textBody">
<mt:EntryAssets type="image" lastn="1"><img src="<$MTAssetThumbnailURL height="64" square="1"$>" alt="<$mt:AssetLabel escape="html"$>" width="64" height="64" /> </mt:EntryAssets><$MTEntryExcerpt escape="html"$>
</li>

Hatena Bookmark Button の Retina 対応画像のバージョンですが、 data-* 属性をきちんとしていしてあげていないと昔のほうの画像ででてくるようなので、無理やり data-* 属性をセットするようにして動作させました (頑にHTML5 にしない)。

// require jQuery
$(document).ready(function(){
    $(".hatena-bookmark-button").attr('data-hatena-bookmark-layout','standard-balloon');
})
// attr() の第2引数は、ボタンのタイプ (はてなブックマークボタン作成のページを参照)setTimeout (function(){
 var h = document.getElementsByTagName("head")[0] || document.documentElement;
 var script = document.createElement("script");
 script.src = 'http://b.st-hatena.com/js/bookmark_button.js';
 script.type = 'text/javascript';
 script.async = 'true';
 h.appendChild(script);
} ,800);
// はてなブックマークボタンの画像リンクの a 要素には class="hatena-bookmark-button"を付与しておきます

環境変数 DBSocket の設定は、Can't connect to local MySQL server through socket '/tmp/mysql.sock'が出ることがあったためです。

エラーについては、「Can't connect to local MySQL server through socket」エラーについてが参考になりました。

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録リストがあります

当ブログのカスタマイズ記録

Comments
TrackBack Closed

5.2.3へアップグレードした時の設定とトラブルシューティングまとめ

Posted by: maRk
2013年2月11日 14:01
Last update: May 24, 2016 07:46
mt5 | myown

Movable Type を4.2x系より、5.2.3 にアップグレードしたときにおこったトラブルの解決と各設置をまとめたものです

設定について

Movable Type(以下 MT) 4.x 系から 5.x 系に移行した際の確認事項からまとめていきます。

＊作業内容をことごとく詳細にメモをとっていたわけではなく、思いあたったものだけを記載してますので、一部抜け落ちているかもしれません。

アップグレードが完了してもすぐに全体を再構築しないこと。再構築をかけないかぎりは静的なページの表示に変化はありません（当然のことながらダイナミックで動いている部分には変更が反映されることがあります。

従ってテンプレートの確認の優先順位としてはスタティックなページより、ダイナミックなページのテンプレートのほうを先におこなうほうがよいといえます）。

1. サイトの構成とパスはあっているか？

MT4.xからMT5.x にしたときにブログが存在する場合、自動でサイトが判別されて、その配下にブログがおさめられるという仕様になっています（あとからでも移動なども可能です）。

以下確認事項を列挙します

ユーザーダッシュボードを開いたときに、下のほうのウィジェットに「ウェブサイト」のタブにあるURLがドメインのトップなどになっているか
ブログのタブに、MT4.x で作成したブログ群が並んでいるか
ウェブサイト管理ページの設定＞全般のところのパスに正確な値が入っているか
ウェブサイト管理ページの設定でウェブサイトのURLはあっているか（www. ありかなしかなど MTWebSiteURLに反映されるので）
ブログ管理ページの設定＞全般のところのパスおよび公開設定は旧環境と同じ値が入っているか
各管理ページのタイムゾーンの設定はあっているか

変更をおこなったら、保存をクリックします。反映には再構築ですが、ほかの確認がすんでから全体の再構築時でかまわないとおもいます。

2. プラグインが認識されていないものはないか?

MT4.x で使えていたものが、MT.5x で使用できない、もしくはシステムのプラグイン一覧のところに警告表示のあるものはないか、などをチェックしておきます。

動作しないか、または動作に不安があるプラグインについては、アップグレード後の確認の段階ではシステムのプラグインリストより個別にプラグインの使用を停止するか削除しておくほうがいいでしょう。

MT5.x系でのプラグイン動作の確認情報

小粋空間: Movable Type プラグイン一覧（MT5対応）
拙作プラグインのMovable Type 5.2対応状況 - The blog of H.Fujimoto
MT5・プラグインの皆さん動いてますか - WolaWola　（続編は前掲の『小粋空間』のページ上に全てリンクされています）

3. テンプレートの状態

アップグレード後にテンプレートが文字化けしていたりしないか
ダイナミックパブリッシングに設定しているテンプレートは正常に動作しているか
グローバルテンプレートなど初期化はおこなったか
- 5.13、5.07、4.38 へのアップグレード後に必要な作業 : Movable Type 5 ドキュメントこのブログでは、コミュニティ関連の機能を使っていない状態だったので、特に変更はやっていません。該当する場合は修正の必要があります。

トラブルに関して

a.　5.2.3 設置完了後に YAML のエラーで管理画面に入れない
b.　サイトのテンプレートで文字化け
c.　ダイナミックパブリッシングにしているテンプレートが404 で返る
d. PubSubHubbub プラグインで ping が動作していない

a. ですが、 YAML モジュールがMT5が YAML::Syck を標準にしていることで、書式において厳密になっているのが主な原因といえます。

対処方法は、問題のおこるプラグインを削除してしまう、あるいは、YAML::Syckに怒られないように.yamlファイルを修正するか、 YAML::Tiny を使うように、mt-config.cgi に書き込むなどです。

インストール時は、修正とかすると時間がかかってしまうので、一時的にmt-config.cgi に YAMLModule YAML::Tiny を書き加えました。

インストールが完了して一通り確認作業が終わった時点で、問題のおこっているプラグインの.yaml ファイルの修正にとりかかりました。というのも、標準にYAML::Syck が採用されたのはおそらくパフォーマンスに関係してるとおもわれ（確かベンチとったかたが記事をあげていたような）、面倒でも YAML::Syck の環境にしたかったので。ローカルのほうのMTOSもYAML::Syck になってますし。

エラーをおこしているプラグインの具体的な名前をあげると、 CommunityActionStreams とか Motion 。 CommunityActionStreams はGitHub 上のものに差し替えると大丈夫そうです。

.yaml の修正ですが、[_1] <a href= ... > のようなコードは、シングルクォーテーションを使って囲うことでエラーは回避できます。　あと、インデントにタブが使われているものもエラーですので、それらは半角スペースに、それとインデントの位置があっているかもチェックしておきます。

まあ、どちらもほとんど使わないようになってきたので削除してしまったほうが早かったかもしれません。

b. の文字化けについて

これは、Movable Type 5.x の変更点、注意事項、および既知の問題 : Movable Type 5 ドキュメントに書かれている、「データベースがMySQL 5.x で、UTF-8を利用している場合は、mt-config.cgiに"SQLSetNames 0"を指定してください。」の文面どおりにおこなったらなりました。

---- 同じような現象は、Google検索をかけてみるといくつかみられました。サーバーの環境などにもよるものらしいですが、当方の環境も当りだったということのようです。

具体的には、テンプレート名やサイトのタイトルなど複数の箇所で文字化けがおこります。環境変数を削除すれば、ほとんど解消します。しかしながら、これまでにデータベースになく新たにセットされたテーマで文字化けはそのままでした。

そこで、グローバルテンプレートについてはテンプレートの初期化を、サイトのテーマについては、再適用で文字化けは解消しました。

d. PubSubHubbub ですが、GitHub 上の https://github.com/miyagawa/MT-PubSubHubbub 最新版に差し替えて使用しています。

ところが、そのままで使うと、ping が送信されないので当然リーダーのサービスにも反映されていませんでした。

以前のヴァージョンもそういえば、テンプレートが標準でないときに動作してなかったことを思い出して修正をおこないました。

Plugin.pm の11行は、

if ($tmpl && $tmpl->identifier eq 'feed_recent')

となっています。このブログだと、template_identifier がNULL のため、以下に修正（改変？）しました。

　 if ($tmpl && $tmpl->name eq 'Atom')$tmple->name

テンプレート名が 'Atom'のものを対象とする

（注：これは自分が修正したときのものです。１回既存のテンプレートをテーマとしてエクスポートし、既存のフィードのテンプレートはテーマの configuration で identifier => 'feed_recent' にして、最適用させるかidentifier にfeed_recent 登録済なテーマに入れ替えるのが望ましい方法です）

いまのところ以上です。なにか気づいたことがあったら追記します。

Comments
TrackBack Closed

mt.Vicuna Simple にカスタマイズした Pin it ボタンをつけてみる

Posted by: maRk
2013年2月 6日 13:20
Last update: Jan 12, 2015 23:04
JavaScript | MTカスタマイズ

mt.Vicuna Simple テンプレートに Pinterest の Pin it ボタンを設置してみます

はじめに

すでに使っている人向けで記述してますので、HTML構造については、本家サイト(vicuna.jp)など参照してください。

参考にしているのは、 Pinterest ブログ上に設置されているコードで、旧タイプのボタンをカスタマイズしたものです。

通常は、Pin It Button for Web Sites （http://pinterest.com/about/goodies/）のフォームにサイトのURL をいれて得たコードをもとに URLのパラメータを Movable Type 用のテンプレートタグに置き換えするなどしてカスタマイズします（このページではこの方法の説明はしません）。

表題のとおりに、mt.Vicuna テンプレートでの貼付け法で、ほぼ初期の状態で設置の動作を確認したものです。カスタマイズされたものについてはこのとおりに動作しない場合もあり得ます。

設置について

ボタンをつける箇所は、ブログ記事テンプレートのタイトル下の ul .info のリストに追加するということとして説明しています。

Pin itボタンパーツ

<li class="pint">
     <a class="pinit" onclick="pinitbtn(this);return false;" href="http://pinterest.com/">
        <img src="http://passets-ec.pinterest.com/images/pinit_preview_none.png" width="49" height="25" alt="pin it" />
     </a>
</li>

<ul class="info"></ul> 内にいれます。

Pin it をおこなう部分

前掲のコードはすでに設置されているものとして、以下のコードを</body> より前に設置

以下は、テンプレートタグを利用して直接 JavaScript コードを埋め込む場合です。

<script type="text/javascript">
//<![CDATA[
var pinitbtn = function(elm){
  var desc,url,media='', image='', section;
  desc = '<$mt:EntryTitle remove_html="1" encode_js="1"$>';
  url = '<$mt:EntryPermalink encode_js="1"$>';
 
  section = elm.parentNode.parentNode.parentNode.getElementsByTagName('DIV')[0];

      if (section) {
        image = section.getElementsByTagName('IMG')[0];
        if (section.getAttribute('class','textBody') && image && image.src) {
          media = image.src;
        }

      if (desc && url && media) {      
        window.open( 'http://pinterest.com/pin/create/button/?url='
        + encodeURIComponent(url)
        + '&media='
            + encodeURIComponent(media)
        + '&description='
            + encodeURIComponent(desc)
       , 'signin'
       , 'width=665,height=300,scrollbars=1,resizable=1');
      }
}
};
//]>
</script>

詳細

外部ファイルにしたいとき

タイトルなどの情報を JavaScript から取得する形にしたいときはそれぞれ url は location.href とか、rel=canonical(指定してあるとき)など、 desc はPin itしたときテキストエリアに入るテキストで、タイトルでいいときは document.title などです。

section でエントリの部分を拾ってきます。要素がカスタマイズされているとノードの取得がうまくいかないかもしれませんので適宜調整がいるでしょう。

記事に画像があるときとないときがあるような場合、記事中の画像の有無でふり分けて出力といった方法が考えられます。

Pinterest ブログのほうでは、ボタン設置の a要素の内容は空として、背景画像にボタンの画像をあてているようです。

mt.Vicuna Simple テンプレート

mt5-theme-mtvicuna-simple GitHub

Comments
TrackBack Closed

メモ：Movable Type 4 系から 5.2.3 へアップグレード

Posted by: maRk
2013年2月 3日 16:32
Last update: May 24, 2016 07:46
mt5

Movable Type 4から5系にアップグレードしましたのでそのおぼえ書きです

手順を追っていきますが、特にやらなくてもよさそうなものもありますので、このとおりにすれば間違いなし、という意味ではないです。2013年 2月版ということで。将来的には手順がかわるかもしれません。

バックアップ

不具合がおこったときの備えのためのバックアップです。

ここのサイトではアクションストリームプラグインを入れてますので、そのデータをプロフィールのページから過去のログをばんばん削除していきます。これで少しはダンプファイルのサイズが少なくなるかと。

そのあと、サーバの管理ページ経由（理由は管理画面からデータベースの保存機能があるため。定期のバックアップのときはいつも phpMyAdmin でダンプファイル作成してローカルに落とすのと両方でやっています）で phpMyAdmin に入ります。オーバーヘッドのあるテーブルをチェックして最適化をおこないます。そのあとエクスポートタブからダンプファイル作成をしてダウンロードします。

次に、Movable Type (4.2)のバックアップ機能から、バックアップをとります。ここではこのブログのみでバックアップをしてます。

つぎにブログのエクスポート機能で、記事データをエクスポートします（これを使うことになるのは非常事態のときくらいかも）。

このあとに、ブログの公開設定のところを開き、公開設定の一連の項目をスティッキーズなどにメモしておきます

そして、ブログの静的ファイルのバックアップも試みました。ターミナルから ssh で入って、アカウントのディレクトリ（ドキュメントルートの上の階層）にバックアップ用ディレクトリを作りそこにコピーしていきます。

個人無償版のダウンロード

SixApart のサイトにいって、最新版の Movable Type をダウンロードします。

Movable Type 個人無償版ウンロード : 各種お問合せ - Six Apart

利用許諾に目をとおして、同意できたならば、送信フォームに確実に自分のところに届くメールアドレスと、利用目的を選択して送信します。

フォームに入力したメールアドレスに、ダウンロードページのURLとログインキーが記載されたメールが届きます。

あとはページを開いて指示通りすすめばダウンロードされます。

ファイルのアップロードとインストール

ダウンロードしたファイルを FTP クライアントを使って、サーバーにアップロードします。今回はドキュメントルート上におきます。その後にターミナルから展開、もとの MTディレクトリより必要なファイル群をコピーします。

その辺りは、Movable Type 5 を最新のバージョンへアップグレード : Movable Type 5 ドキュメントの 2. 新しいディレクトリでのアップグレードに記載されています。

＊この部分は自分用なので、読み飛ばしてかまいません。

XSearch 用のファイル一式をコピー、所定の場所に収める
.htaccess ファイルのローカル用のバックアップとコピー
mt-config.cgi に DefaultLanguage ja を入力する
コピーされた plugins ディレクトリで必要のなくなったプラグインを削除

必要な作業が終わったら、ブラウザからMTにアクセスします。このときはFirefox でなく Safari のほうを使ってやりました。いきなり YAML でエラーがでたので、とりあえずは、mt-config.cgi に環境変数 YAMLModule YAML::Tiny をセットして回避しました（これはインストール作業が完了した後でエラーのおこっているプラグインの.yamlファイルに修正をおこない、現在は YAML::Syck のほうで動作させています）。

アップグレードウィザードが走り、あとはデータベースの更新などが行なわれてダッシュボードに入ることだできました。

Movable Type 5.2.3 インストールまでは以上です。

さて、これでめでたし、めでたし、といきたいところでしたが、いくつか不具合がみつかったので次回にでもそのまとめを書いてみようと思ってます。