fuku-chang.net

写真をポラロイド風に簡単に装飾してくれる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 へのアップグレードには「不要になるプラグインの削除・無効化」の記載があるのですが、アップグレード･ウィザードで勝手に行ってくれているようです。

Coda Popup BubblesはjQueryを利用した、ふわっとした吹き出しを表示するJava Scriptです。

試しに、自分のサイトのトップページに設置してみました。

• 設置サイト: fuku-chang.com
• 参照サイト: Coda Bubble Example

Java Scriptは当然ながらそのまま拝借し、吹き出しのimageファイルも頂いてみたのですが、少々問題があったため、imageファイルは作成し直しております。

オリジナルのimageファイルはアルファチャネルを含むPING形式で作成されており、ドロップシャドウ部分が透過されています。まず、FF3では問題ありません(図1)。ところが、この透過部分の表示がIE7で上手くいかず、真っ黒に表示されてしまいます(図2)。

IE7はアルファチャネルを含む透過PING形式をサポートするようになっており、そのまま表示する分には当然問題ありません。擬似的にポップアップのレイヤー表示ではなく、そのままimageファイルを配置したら、正常に表示されます(図3)。そこで試しに、透過されたブラックシャドウ部分を消去して、吹き出しのラウンドやとんがり部分のみ透過させたimageファイルに作り替えると、吹き出しのラウンド部分等が綺麗に表示されます(図4)。
どうも、レイヤー表示した場合、アルファチャネルのうち、何のデータもない箇所は問題ないが、「うっすらと透かしたデータ」は上手く表示できないのかもしれません。

結局、IE7でも綺麗に表示するため、吹き出しのラウンドやとんがり部分は透過させて、透過させないベタなドロップシャドウを付けたimageファイルを作成して、吹き出しを表示することにしました(図5)。

画像の拡大表示JavaScriptであるThickBox 3.1を当ブログに設置しました。

参照

• ThickBox 3.1
• Movable Type備忘録 > jQueryでLightbox風な表示やってみる(ThickBox)

設置方法

ファイルのダウンロード

ThickBox 3.1から下記ファイルをダウンロード

• thickbox.js(お好みでthickbox-compressd.jsをダウンロード・リネーム)
• thickbox.css
• loadingAnimation.gif
• jquery.js(jquery-latest.jsをリネーム.お好みでjquery-latest.pack.jsをダウンロード・リネーム)

ディレクトリ構成を決定

Movable Type備忘録のbizbell氏に習い、下図の構成に決定。

thickbox.jsの編集

ディレクトリ構成を元に、[tb_pathToImage]のパス指定を編集(絶対参照で指定してしまいました)。

ファイルのアップロード

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

テンプレートの編集

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

<link rel="stylesheet" href="<$MTBlogURL$>js/jquery/plugins/css/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<$MTBlogURL$>js/jquery/jquery.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/jquery/plugins/thickbox.js">

投稿記事での使い方

画像が1ファイルの場合

<a href="filePath/fileName.png" class="thickbox" title="sample01"><img src="filePath/thumbnailfileName.png" alt="" /></a>

class属性の指定で、thickboxが機能します。title属性の値が画像のキャプションになります。

画像が複数ファイルの場合

<a href="filePath/fileName.png" rel="sample" class="thickbox" title="sample01"><img src="filePath/thumbnailFileName.png" alt="" /></a>

class属性の指定に加え、rel属性を追加します。同じrel属性が指定されているa要素は同じグループ扱いになります。

サンプル

Superflyも強く影響を受けたアーティスト、Janis Joplinのベスト盤です。

決して器量よしとは言えないJanisですが、彼女を教えてくれた友人は、「このアルバムジャケットの笑顔だけは、かわいいんだよな」と言っていました。

夭折のアーティストですが、その生涯は彼女をモデルとした映画「ローズ」を見る限り、孤独な人生だったようです。この映画ではなく、本人のスタジオ内の様子を撮影した映像を見たことがあり、どのバンド時代の映像か覚えていないのですが、バンドのメンバーにボロクソに言われているシーンが強烈に記憶に残っています。

お気に入りは、スタンダードナンバーのTr.2 Summertimeです。

• Wikipedia > ジャニス・ジョプリン
• Buy from amazon.co.jp: Janis Joplin / Janis Joplin's Greatest Hits
• Wikipedia > サマータイム(楽曲)

公開1週間後に妻と見てきました。普段利用しているシネコンでは、中規模のシアターで上映されていました。本を読まない人間なので、当然原作は知らないのですが、たまたま佐藤浩市さん主演で放送されたNHKドラマの前半のみを見ており、中途半端な気持ちでいたこともあって、予告編を見て以来、楽しみにしていた作品でした。

私も妻も実際の事件が起こった当時をよく記憶している世代でしたから、自分の記憶と重ねながら見ていました。つらく悲しい事件を題材としているのですが、登山シーンが挿入されることによって、救われた気がします。

• 映画『クライマーズ・ハイ』公式サイト
• ウィキペディア > クライマーズ・ハイ

2008/06/18にFirefox 3の日本語版がリリースされました。

• Firefoxの灯火

私は普段はIE利用で、Firefoxのへビィユーザーでも何でもないのですけど...根がミーハーなので、早速インストールしてみました。Firefox 2インストール環境ではそのまま上書きインストールされます。

Firefox 2のへビィユーザーの方はFirefox 3非対応アドオン対策などからFirefox 3との共存を試されているようですね。

• 小粋空間 > Firefox2 と Firefox3（ベータ版）の共存

かなりの高速表示になったらしいのですが、そうですね、たぶんそうなのでしょう、すみません、よくわかりません(^^ゞ

そんな私ですが、実はFirefoxのシェア拡大をひそかに期待しております。

主な理由はCSS3サポートへの貪欲な姿勢です。例えば、擬似要素のサポートも現在開発中のIE8でも未対応のものがまだまだ多いようですね。そんなIEもFIrefoxのシェア拡大が進めば、CSS3サポートも追随せざるをえなくなってくれると思うのですが。どうでしょう。

• builder > 「Firefox 3」をウェブ制作者の視点で見る
• Webtech-walker > IE8 Beta1を早速使ってみた

highslideは写真を拡大表示するJavaScriptです。

Microsoft提供の小規模事業者向けのインターネットサービスに[Microsoft Office Live Small Business]というサービスがあり、その一機能にWEBサイト構築が含まれています。

実はこのサイトで写真を拡大する著名なJavaScript Lightbox2を設置してみたのですが、スクリプトエラーとなってしまいました。そこで、ThickBox 3.1も試してみたのですが、こちらもスクリプトエラー。

他のレンタルサーバーに試しにアップしてみると問題なく動作するので、サーバーの仕様によるトラブルと判断したのですが、なんとかしてレイヤー表示による写真拡大をしたかったため、他のJavaScriptを探していたところ、このhighslideを見つけました。

[Microsoft Office Live Small Business]で問題なく動作しています。

設置サイト: fuku-chang.org > Webデザイン ツールの使用を停止する

公開2日目に妻と見てきました。

文句無しに面白い、映画でした。三谷幸喜さんが好きな役者さんが、これでもかという位登場し、細かいネタも満載です。佐藤浩市さんと西田敏行さんや寺島進さんとの掛け合いは最高でした。

公開中にもう一度観にいく予定です。

• ザ･マジックアワー オフィシャルサイト
• ウィキペディア > ザ･マジックアワー