fuku-chang.net tag:www.fuku-chang.net,2008-04-16://1 2008-09-19T01:19:29Z My Favorites and Miscellaneous Notes Movable Type Pro 4.21-ja Movable Type 4.21にinstant.js 2.2を設置 tag:www.fuku-chang.net,2008://1.25 2008-09-18T08:29:48Z 2008-09-19T01:19:29Z 写真をポラロイド風に簡単に装飾してくれるinstant.js 2.2を当ブログに... 写真をポラロイド風に簡単に装飾してくれるinstant.js 2.2を当ブログに設置しました。

参照

設置方法

ファイルのダウンロード

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 Classes
値機能
instant初期設定値でエフェクト
ishadowxxドロップシャドウの透明度(0-100/デフォルト:33)
icolorxxxxxxフレームカラー(16進数指定/000000-ffffff/デフォルト:f0f4ff)
itiltleft左に傾ける(未指定で[左傾斜/傾斜無し/右傾斜]の繰り返し)
itiltnone傾けない(未指定で[左傾斜/傾斜無し/右傾斜]の繰り返し)
itiltright右に傾ける(未指定で[左傾斜/傾斜無し/右傾斜]の繰り返し)
noshadingドロップシャドウなし
historicalよれよれフレーム
nocornerフレームを角丸に
preserve縦横比を維持
itxtcolxxxxxxキャプションの文字色(16進数指定/000000-ffffff/デフォルト:000000)
itxtaltalt属性の値をキャプションとして取得
itxttitletitle属性の値をキャプションとして取得

サンプル

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

Bluette Rose

参考

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

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

]]> Movable Type 4.21にSyntaxHighlighter 1.5.1を設置 tag:www.fuku-chang.net,2008://1.23 2008-09-03T07:50:25Z 2008-09-17T08:30:23Z htmlやcssなどのコードを色付きで表示してくれる、Google謹製のJava... htmlやcssなどのコードを色付きで表示してくれる、Google謹製のJavaScript、syntaxhighlighterを当ブログに設置しました。

参照

設置方法

ファイルのダウンロード

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へアップグレード tag:www.fuku-chang.net,2008://1.22 2008-09-03T06:49:42Z 2008-09-03T08:05:28Z Movable Type 4.1から4.21へアップグレードしてみました。 参照... Movable Type 4.1から4.21へアップグレードしてみました。

参照

アップグレード手順

  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 tag:www.fuku-chang.net,2008://1.21 2008-08-28T05:10:31Z 2008-08-29T05:11:30Z 図1 図2 図3 図4 図5 Coda Popup BubblesはjQuer...

js_CodaPopupBubbles_01.png
図1

js_CodaPopupBubbles_02.png
図2

js_CodaPopupBubbles_03.png
図3

js_CodaPopupBubbles_04.png
図4

js_CodaPopupBubbles_05.png
図5

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

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

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

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

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

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

]]> Movable Type 4.1にThickBox 3.1を設置 tag:www.fuku-chang.net,2008://1.20 2008-07-18T02:08:04Z 2008-07-18T05:30:59Z 画像の拡大表示JavaScriptであるThickBox 3.1を当ブログに設置... 画像の拡大表示JavaScriptであるThickBox 3.1を当ブログに設置しました。

参照

設置方法

ファイルのダウンロード

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

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

ディレクトリ構成を決定

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

movableType_thickbox_01.png

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要素は同じグループ扱いになります。

サンプル

20080423_009_01.jpg 20080526_011_01.jpg 20080704_005_02.jpg
]]> Janis Joplin / JANIS JOPLIN'S GREATEST HITS tag:www.fuku-chang.net,2008://1.19 2008-07-16T09:06:09Z 2008-07-17T10:44:20Z Superflyも強く影響を受けたアーティスト、Janis Joplinのベス... cdJacket_Janis Joplin_JANIS JOPLIN'S GREATEST HITS_640x640.jpg

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

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

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

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

]]> クライマーズ・ハイ tag:www.fuku-chang.net,2008://1.17 2008-07-12T14:00:00Z 2008-07-15T10:12:34Z 公開1週間後に妻と見てきました。普段利用しているシネコンでは、中規模のシアターで... 公開1週間後に妻と見てきました。普段利用しているシネコンでは、中規模のシアターで上映されていました。本を読まない人間なので、当然原作は知らないのですが、たまたま佐藤浩市さん主演で放送されたNHKドラマの前半のみを見ており、中途半端な気持ちでいたこともあって、予告編を見て以来、楽しみにしていた作品でした。

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

]]> Firefox 3 tag:www.fuku-chang.net,2008://1.16 2008-06-19T07:34:48Z 2008-06-20T08:11:51Z 2008/06/18にFirefox 3の日本語版がリリースされました。 Fi... 2008/06/18にFirefox 3の日本語版がリリースされました。

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

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

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

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

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

]]> highslide tag:www.fuku-chang.net,2008://1.15 2008-06-11T07:32:34Z 2008-06-11T08:15:26Z highslideは写真を拡大表示するJavaScriptです。 Microso... 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デザイン ツールの使用を停止する

]]> ザ・マジックアワー tag:www.fuku-chang.net,2008://1.14 2008-06-08T12:00:00Z 2008-06-10T03:48:53Z 公開2日目に妻と見てきました。 文句無しに面白い、映画でした。三谷幸喜さんが好き... 公開2日目に妻と見てきました。

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

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

]]> Movable Type 4.1でファイルアップロード先を指定 tag:www.fuku-chang.net,2008://1.13 2008-06-03T02:32:36Z 2008-06-03T04:28:17Z Movable Typeではファイルのアップロード先が特に指定されていません。 ... Movable Typeではファイルのアップロード先が特に指定されていません。

[ファイルのアップロード]を開くと、アップロード先は...

  1. [<サイトパス>]/[任意のサブディレクトリ（デフォルトは空欄）]
  2. [<サイトパス>/操作日名ディレクトリ(例:2008/06/03)]/[任意のサブディレクトリ（デフォルトは空欄）]
の2つの指定が可能となっています。

[A]は毎回指定するのは面倒ですし(フォームのオートコレクト機能を利用する手もありますが)、[B]も多数のディレクトリが作成されてしまうので好みではないし...

そこで、WEB検索してみると、多くのMovable Typeユーザーの方が、不便に感じているようで、いろいろ対策をとっていらっしゃいました。今回、私は下記トモゾウ氏のスクリプトを拝借しました。

参照: 似顔絵系ブログ TOMO-ZONE > Movable Type 4.1にバージョンアップメモ

movableType_20080603_01.png

先ず、アップロード先のルールを決め...

  • サイトパス/uploads/西暦年/月(例:サイトパス/uploads/2008/06 )
としました。

続いて、トモゾウ氏の記事を参照し、[アプリケーションディレクトリ/tmpl/cms/include/asset_upload.tmpl」]を修正してアップロードしましたが、うまくいかず。

JavaScriptを見ていて、formのidが[upload]ではなく[upload-form]ではと思い、JavaScript内のform指定箇所を修正しましたが、改善せず。

最終的に[upload]を[form[0]]に変更することによって、成功しました。原因が判ったわけではないのですが、結果オーライです。

]]> Superfly / Superfly tag:www.fuku-chang.net,2008://1.12 2008-05-31T14:30:00Z 2008-07-17T10:46:37Z 今日は、勤務最終日でした。事情があって辞めたわけです。 昨日のフジテレビ「僕ら... cdJacket_Superfly_Superfly.jpg

今日は、勤務最終日でした。事情があって辞めたわけです。

昨日のフジテレビ「僕らの音楽」を妻と二人で見ていたのですが、Superfly 志帆さんの歌唱力に二人とも圧倒されてしまいました。妻に、「アルバムのSuperflyを買おうかな」と言っていたのですが、帰宅した際、「プレゼントだよ。」とこのアルバムを渡してくれたのです。

妻の「再就職、がんばりなさいよ」とのメッセージが込められているのだと、思います。ありがとう。

]]> Movable Type 4.1にtagAssistプラグインを導入 tag:www.fuku-chang.net,2008://1.11 2008-04-16T02:55:41Z 2008-04-16T04:12:06Z CSS HappyLifeのhirasawa氏提供のtagAssistプラグイン... CSS HappyLifeのhirasawa氏提供のtagAssistプラグインを導入しました。

謝々: tagAssistプラグイン - MTのエントリーをちょっと便利にしちゃうの

導入方法

  1. 上記リンクより、tagAssistアーカイブファイルをダウンロード
  2. 同ファイルを解凍
  3. 解凍したフォルダ内の[mt-static/plugins/]フォルダ下の[tagAssist]フォルダを、スタティックディレクトリ下の[plugins]ディレクトリへアップロード
  4. 解凍したフォルダ内の[plugins]フォルダ下の[tagAssist]フォルダを、アプリケーションディレクトリ下の[plugins]ディレクトリへアップロード
  5. ダッシュボードの[設定-プラグイン]にてtagAssis0.1.6が表示されていることを確認
]]> Movable Type 4.1へアップグレード tag:www.fuku-chang.net,2008://1.10 2008-04-16T01:22:59Z 2008-04-16T02:06:11Z 遅まきながら、Movable Type 3.32から4.1へアップグレードしてみ... 遅まきながら、Movable Type 3.32から4.1へアップグレードしてみました。

参照: Movable Type 3 からのアップグレード

  1. バックアップ
    1. FTPクライアントソフトを使って、全データをダウンロード
    2. MySQLデータファイルをレンタルサーバー提供のphpMyAdminからバックアップ
    3. Movable Typeのダッシュボードからエクスポート
  2. 旧バージョンファイルの削除
    • アプリケーションディレクトリを削除
    • スタティックディレクトリを削除
    • ブログディレクトリは削除しない
  3. 新バージョンファイルのアップロード
    • 解凍ファイルの[mt-static]フォルダをスタティックディレクトリへアップロード
    • 解凍ファイルの[mt-static]フォルダ以外をすべてアプリケーションディレクトリへアップロード
  4. パーミッションの変更
    • アプリケーションディレクトリ直下の全てのcgiファイルのパーミッションを755へ変更
  5. mt-config.cgiの編集
    • バックアップしておいた3.32のmt-config.cgiに下記行を追加
      • AltTemplate feed results_feed.tmpl
  6. mt-config.cgiのアップロード
    1. アプリケーションディレクトリへ上記編集を加えたmt-config.cgiをアップロード
    2. 同ファイルのパーミッションを755へ変更
  7. mt.cgiを実行してアップグレード
    1. アプリケーションディレクトリのmt.cgiにアクセス
    2. 管理者アカウントでログイン
    3. ウィザードに従い、アップデートを実行
    4. 完了後、ダッシュボードが表示され、アップデート完了
  8. WEBページ表示トラブル
    • 上記作業直後のWEBページはスタイルが何も適用されていない状態だったため、ダッシュボードより[デザイン]-[スタイル]から適当なスタイルを適用するものの、正しく反映されない(一部のスタイルは適用されるが、タイトルやカラムが正常表示されない)。
    • 下記作業を実行後、正常表示となった
      1. [デザイン]-[テンプレート]を表示
      2. 右ペインの[ブログのテンプレートを初期化]をクリック
      3. [新しいテンプレートセットを適用]-[既定のブログ]を選択し[次へ]
      4. 指示に従い、初期化を実行
      5. 全てのページを再構築
      6. 直前に選択していたテンプレートセットが正しく適用された
]]> ThickBox 2.1.1 tag:www.fuku-chang.net,2007://1.9 2007-03-09T03:24:50Z 2007-04-23T01:14:45Z 画像を拡大表示するJavaScriptライブラリ。 ライブラリの入手 Si... 画像を拡大表示するJavaScriptライブラリ。

  1. ライブラリの入手
    • Site: ThickBox 2.1.1
    • Download:
      • ThickBox.js
      • jQuery.js
      • ThickBox.css
      • loadingAnimation.gif
  2. インストール
    1. file:
      • ./js/ThickBox.js
      • ./js/jQuery.js
      • ./css/ThickBox.css
      • ./images/loadingAnimation.gif
    2. html header
  3. (X)HTML

    Note: 複数の画像をリストアップして、同じrel="xxx"を設定するとグループ化される。
]]>