G-chan Square

じーちゃん/へたっぴの綴る、日々のつれづれとか。
twitterのまとめとゲームネタが中心。2015年からロードバイク/ミニベロ始めました。

[movable type6] ついにG-chan Squareをレスポンシブ対応しました

地味に大変な作業でした。。

なので、いくつかメモを残しておこうかと。

テンプレート

テンプレートは、公式サイトから@Style Bootstrap Theme for Movable Typeを選択。

最初はMT6標準で使えるRainierを使うつもりでしたが、昨今流行りのBootstrapを扱ってみたかったんで、こちらを採用。

レスポンシブ対応は、単純にPCとスマホの場合とでレイアウトを動的に変更する以外に、画像のサイズの調整なんかもあるんで、それらのことも扱いやすいBootstrapを選択して正解だったと思われ。

PHPによるスマートフォンフラグ

じーちゃんとこのこのブログは拡張子htmlですが、内部ではPHPを実行しています。
で、UserAgentを解析してスマホからのアクセスの場合とPCからのアクセスの場合とでフラグ分けしようと思ったんですよ。で、この処理をどのページからも確実に呼ばれるはずところってことで、テンプレートの「HTMLヘッダー」に記述したんですよ。

そしたら……コメント投稿のPerlのCGIでもこのテンプレートヘッダを呼ぶんで、PHPのコードがPerlに処理されずにそのまま出力されてしまうという事態発生w

PHPだと実行されて、Perlだと無害で実行も出力もされないという器用な記述方法がみつからず……

しょうがないので、結局、各アーカイブテンプレートの頭に記述を移しました。

各画像のimgタグにclass='img-responsive'を自動で追加

記事テンプレートの末尾付近に

を追加。(もちろんjQueryは事前に読み込んでおく)

「全部の画像をレスポンシブ対応するのにimgタグ書き換えるとか、かったるいなー」とか思っていたんですが、もう強制対応w

ちなみに、Bootstrapのシステムで上記の'img-responsive'を適用すると、imgタグがinline要素からblock要素になっちゃうんで注意。
imgタグの後に改行タグとかあると、不自然な空行が発生してしまいます。

TweetPostが動かない

MovableType6から6.2になったから……というよりは、OSがCentos6.4から7.2に変わったからのせいだと思うんですが、記事を投稿したら同時にtwitterでお知らせ投稿してくれるプラグイン「TweetPost」が動かなくなっちゃいました。
Response does not confirm to OAuth1.0a. oauth_callback_confirmed not received at /var/www/html/mt/plugins/PostTweet/posttweet.pl line 937.
$VAR1 = bless( { 'params' => {}, 'browser' => bless( { 'max_redirect' => 7, 'ssl_opts' => { 'verify_hostname' => 0 }, 'protocols_forbidden' => undef, 'show_progress' => undef, 'handlers' => {
 'response_header' => bless( [ { 'owner' => 'LWP::UserAgent::parse_head', 'callback' => sub { "DUMMY" }, 'm_media_type' => 'html', 'line' => '/var/www/html/mt/extlib/LWP/UserAgent.pm:683' } ],
'HTTP::Config' ) }, 'no_proxy' => [], 'protocols_allowed' => undef, 'local_address' => undef,
 'use_eval' => 1, 'requests_redirectable' => [ 'GET', 'HEAD' ], 'timeout' => 180, 'def_headers' =>
bless( { 'user-agent' => 'libwww-perl/6.05' }, 'HTTP::Headers' ), 'proxy' => {}, 'max_size' =>
undef }, 'LWP::UserAgent' ), 'tokens' => { 'consumer_secret' =>
 '**************************************', 'consumer_key' => '******************************' },
'protocol_version' => '1.0a', 'urls' => { 'request_token_url' => 'https://api.twitter.com/oauth/request_token',
 'authorization_url' => 'https://api.twitter.com/oauth/authorize', 'access_token_url' =>
'https://api.twitter.com/oauth/access_token' } }, 'PostTweet::OAuth::Simple' );
みたいなエラーが出るように。
どうも、oauth_callback_confirmedというoauth関連の何かを受け取れていない様子。

ただ、これOAuth1.0aで通信してるんだけど、もうOAuthも2.0が主流だし、ぐぐってもあんまり情報がない。
仕様をしっかり理解して解決するのも時間がかかるんで、放置中です。

Centos6.4の環境ではちゃんと動くんで、環境周りの問題だと思うんだけどなあ……



あとは、CSSが干渉するんでアクセスカウンタを忍者のをやめてFC2のに変更したり、google adsを入れ直したり、あとはちまちまと細かいレイアウト調整とかしてました。

とりあえず、今後数年はこれで行く予定ですわい。

コメントする