MovableTypeをVer6から7へアップグレード

ゴールデンウィークを利用して、当ブログを運用しているMovableTypeをVer6からVer7へとアップグレードしました。

MovableTypeをVer6から7へアップグレード

Ver7の提供開始からちょうど2年、プラグインの互換性を調べたりするのが面倒だったのでVer6のまま運用していたのですが、ようやく最新の「MovableTypePro r.4605」になりました。

一部管理画面を操作するプラグインの動作がおかしかったりしますが、回避策を見つけたり利用停止にしました。

Ver7からコンテンツタイプというのが使えるようになりましたが自分には関係ないかな?そういえばVer6からのDataAPIも「それ何?」な感じで。あくまでもセキュリティ対策で最新版にしたというところでしょうか。

合わせてブログを設置しているレンタルサーバのPHPのバージョンを5系から7系に変更しました。

サーバの変更自体はクリックひとつで完了しましたが、ブラウザでブログを表示しようとしたところ画面が真っ白で何も表示されません。5系から7系に変更するにあたり、ブログを構築している自分で組んだPHPのスクリプト内に7系では使用できない構文があったようで、苦労しながら移行チェッカーをパソコンにインストールし、その結果から更に苦労しながら修正して何とか動作しました。

7系だと5系より処理速度が速いということですが、体感的にはよく分からないです

ブログにPocketボタンを設置

今さらではありますが、いわゆる「あとで読む」サービスの「Pocket別ウィンドウでリンクを開きます」、その登録ボタンをブログに設置してみました。

ブログにPocketボタンを設置

コード作成ページで好みのボタン表示方法を選び、作成されたコードをブログのテンプレートに貼り付けただけで簡単に設置できました。

実際に表示させてみると他のボタンと横並びにしたいのに改行されてしまったので、これについてはスタイルシートで対策しました。

Pocket
https://getpocket.com/別ウィンドウでリンクを開きます

ブログ記事内の複数動画をタブ化して表示してみる

これまでブログに記事を投稿した時にそれに関する動画を掲載することがありましたが、複数の動画サイトやSNSに動画を投稿している場合、動画をタブ切り替えで選択して表示できるように工夫してみました。

ブログ記事内の複数動画をタブ化して表示してみる

いくつかのサイトを参考にスタイルシートを使ってタブの表示と切り替えができるようにしました。

記事編集時にYouTubeやニコニコ動画など使用する動画サイトのサービス名と動画のIDを変数化して保存、それをMovableTypeの動画表示用に作成したモジュールに渡して、タブ部分と各サービスの動画貼り付けコードに沿った内容のHTMLを出力しています。

これからも機会があれば動画撮影したものをブログに掲載していこうと思います。

ブログをスマホ対応にしてみた

当ブログをスマートフォン向けに最適化してみました。
ブログをスマホ対応にしてみた
これまでは当ブログをスマホで見ると、PCサイトと同じ本文とサイドバーの左右2カラムデザインが表示され文字が小さくなったりしていましたが、本文部分が最初に表示されるようにカスタマイズしました。

PC用とスマホ用それぞれのHTMLを用意し二つのURLでの運用を考えましたが、MovableTypeでそれをしようとするとテンプレートを作り直したりいろいろと面倒そう。そこで、スタイルシートのみで対応させるレスポンシブデザインに挑戦してみたところ、一部HTMLの修正は必要でしたが、大まかな部分は簡単に対応させることができました。

ただ、デザインが崩れる等の荒さが目立つところが多くあるので、今後少しずつ修正していこうと思います。

ブログにオリジナル投稿動画のサムネイルページを設置

当ブログでは自分で撮影したクレーンゲームの挑戦などを動画で公開していますが、投稿動画をサムネイルで一覧表示するページを設置し、タイトルバナー下のMOVIE表示のペンギンアイコンをクリックすることでページに移動できるようにしました。
ブログにオリジナル投稿動画のサムネイルページを設置
サムネイル毎に記事タイトルのキャプションとYouTubeやニコニコ動画等アップロード先サイトを示すアイコン を表示、画像にカーソルを乗せると拡大表示、クリックで該当記事へ移動するようにしています。

このようなページを作成してみたものの・・・もう5年以上も動画を投稿していませんね

ブログに自作のフォトサムネイルページを設置

当ブログには以前から外部で配布されているスクリプトを使用して、ブログ内に掲載している画像のサムネイルから各記事へ移動できるページを設置していましたが、今回MovableTypeのタグのみを使用したオリジナルのサムネイルページを作成し設置しなおしました。
ブログに自作のフォトサムネイルページを設置
各記事に設定しているOGP用画像を80x80のサイズでタイル状に表示、画像をクリックすると該当する記事へ移動できるようにしました。

ブログを常時SSL化しました

当ブログを常時SSL化しました。

ブログを常時SSL化しました

いろいろと苦労しましたが、ブログを設置しているレンタルサーバ上でSSL化を設定、ブログ内の記事でサーバ内へのリンクや画像等のアドレスを http から https に置換、ソーシャルブックマーク等SSL対応していないものは修正、また一部の外部サービス等は削除、最後に .htaccess を書き換えて http://~ でアクセスがあった場合 https://~ へとリダイレクトするようにしました。

まだちゃんと構成できていないのでブラウザでアクセスすると警告が出ますが、近日中に対策を施したいと思います。