September 2008アーカイブ

写真をポラロイド風に簡単に装飾してくれるinstant.js 2.2を当ブログに設置しました。

参照

• instant.js (javascript instant image effect)

設置方法

ファイルのダウンロード

instant.jsから下記ファイルをダウンロードして解凍。

• instant.zip

ディレクトリ構成を決定

thickboxやSyntaxHighlighter設置時の構成に習い、下記構成に決定。

Movable Type インストールディレクトリ/
    +-- js/
    |    +-- instant/
    |    |    +-- instant.js
    |    |    +-- cvi_text_lib.js

ファイルのアップロード

ディレクトリ構成に従い、各ファイルをアップロード

テンプレートの編集

Movable Typeの管理画面より[ヘッダー・テンプレート]のhtml要素内に下記項目を追加して保存。

投稿記事での使い方

img要素のclass属性に下記のinstant.js独自の値を指定します。複数指定の場合はスペースで区切ります。

サンプル

よれよれフレーム・右傾斜・キャプション付

参考

このinstant.jsはMovable Typeのホーム(fukuchang.net)、カテゴリ別ページ(JavaScriptの最近のブログ記事)、月別ページ(September 2008アーカイブ)では問題なく表示されるのですが、個別ページ(Movable Type 4.21にinstant.js 2.2を設置)では、機能しません。

おそらく、個別ページでbody要素に追加されるonload属性(mt.jsのfunction呼び出し)とinstant.jsがバッティングしているようです。

htmlやcssなどのコードを色付きで表示してくれる、Google謹製のJavaScript、syntaxhighlighterを当ブログに設置しました。

参照

• syntaxhighlighter - Google Code

設置方法

ファイルのダウンロード

syntaxhighlighter Downloadsから下記ファイルをダウンロード

• SyntaxHighlighter_1.5.1.rar

ディレクトリ構成を決定

thickbox設置時の構成に習い、下記構成に決定。

Movable Type インストールディレクトリ/
    +-- js/
    |    +-- syntaxHighlighter/
    |    |    +-- shBrushCpp.js
    |    |    +-- shBrushCSharp.js
    |    |    +-- shBrushCss.js
    |    |    +-- shBrushDelphi.js
    |    |    +-- shBrushJava.js
    |    |    +-- shBrushJScript.js
    |    |    +-- shBrushPhp.js
    |    |    +-- shBrushPython.js
    |    |    +-- shBrushRuby.js
    |    |    +-- shBrushSql.js
    |    |    +-- shBrushVb.js
    |    |    +-- shBrushXml.js
    |    |    +-- shCore.js
    |    |    +-- css/
    |    |    |    +-- SyntaxHighlighter.css
    |    |    +-- flash/
    |    |    |    +-- clipboard.swf

ファイルのアップロード

ディレクトリ構成に従い、各ファイルをアップロード

テンプレートの編集

Movable Typeの管理画面より[ヘッダー・テンプレート]のhtml要素内に下記項目(SyntaxHighlighterを利用して表示しています。以下同様。)を追加して保存。

Movable Typeの管理画面より[フッター・テンプレート]のbody要素の終了タグ直前に下記項目を追加して保存。

投稿記事での使い方

pre要素若しくはtextarea要素に必要なコードを貼り付けます。コードを囲んだ何れかの要素のname属性の値に"code"を指定し、class属性に貼り付けたコードに該当する値(参照:Supported languages)を指定します。

textarea要素を使用した場合

textarea要素ではcols属性とrows属性は必須属性な為、必ず指定することになりますが、実際の表示領域はSyntaxHighlighterが調整しているので、この値を調整しても反映されないようです。

pre要素を使用した場合

<pre name="code" class="xhtml">
... some code here ...
</pre>

pre要素内のテキストで[<][>]を使用する場合、それぞれ代替の[&lt;][&gt;]に置換しておく必要があります。

参考

THE HAM MEDIAのValidに対応させたコードを綺麗に見せる『SyntaxHighlighter』導入記事に『preタグではname要素(属性: Fuku-chang註)を使うことが本来できない』とあります。実際、The W3C Markup Validation Serviceでチェックをすると「there is no attribute "name".」と叱られます。

サイト管理人のハム氏はスクリプトの修正で対処されていますが、私はtextarea要素を使うことにしました(^^ゞ

Movable Type 4.1から4.21へアップグレードしてみました。

参照

• [重要] Movable Type 4.21 出荷開始
• Movable Type 4.2 へのアップグレード
• Movable Type アップグレードガイド

アップグレード手順

1. バックアップ
   1. FTPクライアントソフトを使って、全データをダウンロード
   2. MySQLデータファイルをレンタルサーバー提供のphpMyAdminからバックアップ
   3. Movable Typeのダッシュボードからエクスポート
2. 旧バージョンディレクトリのリネーム
   • アプリケーションディレクトリをリネーム(当方環境では[cgi-bin/mt]を[cgi-bin/mt_41]に)
   • スタティックディレクトリをリネーム(当方環境では[mt-static]を[mt-static_41]に)
   • ブログディレクトリはそのまま
3. 新バージョンファイルのアップロード
   • 解凍ファイルの[mt-static]フォルダをスタティックディレクトリへアップロード
   • 解凍ファイルの[mt-static]フォルダ以外をすべてアプリケーションディレクトリへアップロード
4. パーミッションの変更
   • アプリケーションディレクトリ直下の全てのcgiファイルのパーミッションを755へ変更
5. 旧バージョンのmt-config.cgiのアップロード
   1. アプリケーションディレクトリへ旧バージョンのmt-config.cgiをアップロード
   2. 同ファイルのパーミッションを755へ変更
6. 旧バージョンで使用していたプラグインのアップロード
   1. 旧バージョンのスタティックディレクトリの[mt-static/plugins]にある追加プラグイン(当方環境では[tagAssist]のみ)を新バージョンの同ディレクトリへアップロード
   2. 旧バージョンのアプリケーションディレクトリの[/plugins]にある追加プラグイン(当方環境では[tagAssist]のみ)を新バージョンの同ディレクトリへアップロード
7. mt.cgiを実行してアップグレード
   1. アプリケーションディレクトリのmt.cgiにアクセス
   2. 管理者アカウントでログイン
   3. ウィザードに従い、アップデートを実行
   4. 完了後、ダッシュボードが表示され、アップデート完了
8. WEBページ表示トラブル
   • 上記作業直後のWEBページはスタイルが何も適用されていない状態だったため、ダッシュボードより[デザイン]-[スタイル]から適当なスタイルを適用するものの、正しく反映されない(一部のスタイルは適用されるが、タイトルやカラムが正常表示されない)。
   • 前回の3.32から4.1へのアップグレード時の対処をそのまま、実行してみる
     1. [デザイン]-[テンプレート]を表示
     2. 右ペインの[ブログのテンプレートを初期化]をクリック
     3. [新しいテンプレートセットを適用]-[既定のブログ]を選択し[次へ]
     4. 指示に従い、初期化を実行
     5. 全てのページを再構築
     6. 直前に選択していたテンプレートセットが正しく適用された
   • 今回は、上記作業でも改善されなかった。そこで再度適当なスタイルを適用したところ、正常表示に戻った(上記作業は不要だったかもしれません)。

参考

Movable Type 4.2 へのアップグレードには「不要になるプラグインの削除・無効化」の記載があるのですが、アップグレード･ウィザードで勝手に行ってくれているようです。