Home > Web > Movable Type Archive

Movable Type Archive

1 2 3 4

HTML5 に対応した Youtube 動画を貼る方法

Youtube の動画をブログ等に貼るとき、従来は <object> タグを使って次のように書いていた。

<object width="640" height="385">
    <param name="movie" value="http://www.youtube.com/v/SuY6wrMDptA&hl=ja_JP&fs=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/SuY6wrMDptA&hl=ja_JP&fs=1"
        type="application/x-shockwave-flash" allowscriptaccess="always"
        allowfullscreen="true" width="640" height="385"></embed>
</object>

これは Flash による再生にしか対応していないし、お世辞にもきれいなタグとも言えない *1 。そこで、HTML5 版 Youtube にも対応したスマートなタグが推奨されている。

【レビュー】YouTubeビデオの組み込みでHTML5 VideoとFlashの両方をサポートする方法 | ネット | マイコミジャーナル
http://journal.mycom.co.jp/articles/2010/07/26/youtube-for-flash-and-html5/index.html

<iframe class="youtube-player"
    width="640" height="385"
    src="http://www.youtube.com/embed/SuY6wrMDptA"
    frameborder="0"
></iframe>

Continue reading

公式 Tweet Button は HTML5 用?

ページを構成する HTML の正当性を検査してくれるサービスとしては W3C Markup Validation Service が便利だ。

The W3C Markup Validation Service
http://validator.w3.org/

以前このサイトは XHTML 1.0 で構築し、W3C Validation Service でも確認をとっていたのだが、「」で紹介した Tweet Button を設置したあたりからおかしくなった。原因はコードに出てくる data-xxxx 属性だ。

Continue reading

【MovableType】Twitter のつぶやきをサイドバーに表示する

Twitter のログをブログに表示してみた記録。基本的には簡単。ジェネレータで生成した HTML を貼り付けるだけだ。

[Movable Type] Twitterウィジェットをサイドバーに追加してみた - No Second Life
http://www.ttcbn.net/no_second_life/2009/02/movable-type-twitter.html

だけどそのままでは味も素っ気もない。読み込みが終わるまで空欄のままだし、表示も白黒になってしまう。ある程度整形して表示するようにしてみた。

Continue reading

【MovableType】Twitter につぶやくボタンを各記事に設置する

アカウントをとったまま放置していた Twitter を使ってみることにした。ちょうどうまいことに公式の“Tweet Button”なるものが発表されて話題になっているところだったので、ついでにこのブログにも設置してみた。こんな感じ。ITmedia の記事に“Twitter Button”なんて書かれてたからそれ採用したけど、よく見たら“Tweet Button”だね。カコワルイので修正しました。

2010-08-13_131026.png

Twitter / ツイートボタン
http://twitter.com/goodies/tweetbutton

このサイトで作成した HTML タグを MT のテンプレートに貼ればいい……のだが、そう簡単ではない。各記事のテンプレートに貼るだけならば次のようなソースで足る *1

<a href="http://twitter.com/share" class="twitter-share-button"
    data-count="none" data-via="delphinus35" data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

これはクリックしたページのタイトルと URL を Tweet してくれるボタンを生成する。つまり、トップページやアーカイブページ等、複数の記事が載るページでは細工が必要だ。

と言う訳で、このサイトで使っている MT 用のテーマ“mt.Vicuna”に Tweet Button を設置した経過を書いておく。

Continue reading

【MovableType】一定数の記事ごとにページを分割する

MT には最近のバージョン(4.3 以降?)からページ送り機能がついている。これは長すぎるページを一定間隔に区切って分け、各ページにリンクを付けてくれる機能だ。Google の検索結果の一番下に出てくる「1 2 3 4 5 »」のような表示と考えればわかりやすい。特に月別やカテゴリー別のページは数百個の記事が並ぶこともあるわけで、記事が多くなったら必ず導入しておきたい。……というか、なんで標準のテーマにこれがないのかね?

小粋空間: Movable Type 4.3 の新機能(スタティックページのページ分割)
http://www.koikikukan.com/archives/2009/07/29-005555.php

主に、上のリンクに従って設定した。以下に手順を書いていく。

Continue reading

【MovableType】“関連エントリー”の表示を改善する

カテゴリーの例

今まで記事の最後にある「関連エントリー」の表示は、記事のカテゴリーに属すものを最新のものから並べただけだった。これでは、記事が複数のカテゴリーに属す場合、メインカテゴリーの関連記事が表示されない場合がある。

例えば、前回の記事「」は右図のように 4 つのカテゴリーに属していて、そのうち一番上の「keyhac」カテゴリーがメインカテゴリーだ。

この状態で従来の「関連エントリー」表示を行うと次のようになる。

従来の関連エントリー

Continue reading

【Movable Type】5.0 → 5.02 へのアップグレード

今まで面倒で放置していたのだが、Movable Type を 5.0 から 5.02 にアップグレードしてみた。

Movable Type 5.0 から 5.0x へのアップグレード
http://www.movabletype.jp/documentation/mt5/upgrade/mt5.html

Continue reading

【Javascript】SyntaxHighlighter 3.0 を Movable Type で使う

SyntaxHighlighter を Movable Type で使うプラグインには次のものがある。

SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/


SyntaxHighlighter for Movable Type | kwrogu
http://blogspot.makotokw.com/portfolio/movabletype/syntaxhighlighter/

SyntaxHighlighter for Movable Type « kwLog
http://blog.makotokw.com/portfolio/movabletype/syntaxhighlighter/

これは SyntaxHighlighter 2.x にしか対応していないのだが、最新版の 3.0.83 で無理矢理動かしてみた。

Continue reading

【Javascript】SyntaxHighlighter 3.0 の新機能と注意点

ブログ等でコードをさらすときに必携のスクリプト“SyntaxHighlighter”がメジャーバージョンアップして 3.0 になっていた。2.0 系、2.1 系よりアップデートするときの新機能と注意点について書いてみる。

SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/

新機能について
http://alexgorbatchev.com/SyntaxHighlighter/whatsnew.html

Continue reading

【MovableType, MySQL】記事中に BMP 外の文字を使う

100719-0001.png

Movable Type では最新の文字セットが使えない?

を書いていて気づいたのだが、Movable Type では記事中に BMP(基本多言語面)外の文字が使えない。といってもこれは MT 自体の責任ではなく、MySQL の現行リリース 5.1 では BMP 外の文字をサポートしないためだ。

The ucs2 and utf8 character sets do not support supplementary characters that lie outside the BMP.

ucs2utf8 というキャラクターセットは BMP 外にある追補された文字をサポートしません。

http://dev.mysql.com/doc/refman/5.1/en/charset-unicode.html

現在開発中の MySQL 5.5 ではこれが改善されて、BMP 外の文字を扱えるキャラクターセット utf8mb4utf16utf32 が追加された。

漢(オトコ)のコンピュータ道: MySQLコミュニティ騒然!MySQL 5.5.4が与えるインパクト。
http://nippondanji.blogspot.com/2010/04/mysqlmysql-554.html

Continue reading

1 2 3 4

Index of all entries

Home > Web > Movable Type Archive

Feeds
CC Licence

Creative Commons License

このブログはクリエイティブ・コモンズでライセンスされています。

Ferret アクセス解析
W3C Validation

I ♥ validator

Return to page top