2009年7月 Archive

冷やし中華を作る前にそろえたい具を過去にまとめていたのですがその2009年度版です

今回は内容が薄っぺらなので、前回の記事を先に提示して時間を稼いでおくとします。

• 冷やし中華始める前に

で、ついでにフラッシュのゲームも再度紹介させていただきます。

• 冷やし中華（フラッシュゲーム）

今年限定で個人的におススメな冷やし中華の具とは

• チャーシュー
• 白髪ねぎ
• 錦糸卵
• レタスの千切り
• きざみ海苔
• パイナップル（缶詰）
• トマト

食材の加工とか

チャーシューは千切りに。「ラーメン屋さんのチャーシュー」が手に入ればベストなのですけど。肉屋さんで売っているチャーシューとか、スーパーだと、生ラーメンやそれ用の具材のコーナー（？）あたりに、チャーシューを置いるところもあります。余力のあるかたは自分で作成といったあたりでしょうか。

白髪ねぎは水にさらしておきます。チャーシューと白髪ねぎの組み合わせが今年のポイントです。

錦糸卵は焼いた直後のものを切るよりは、冷ましたものを切ったほうが細く切りやすいです。

レタスの千切りは、切ったあとに水にさらしておきます。

以上です。あと、好みの問題ですが、麺は少なめにして、具を多くしてタレを多めにかけると（おかずとして）割りとうまいです。

今月（2009年7月）、サイトでテンプレート等をカスタマイズしたところをまとめた記事です。

今月は不要部分の見直しなどが主な変更点です。

• ActionStreamsでプロフィールから「はてなハイク」を外した
• Movable Typeの編集画面でのダイアログについて、変更ファイルの適用
• 主にインデックステンプレートでのインクルードファイルの見直し
• ページ上部に戻る（Return to page top）リンクを個別記事ページで削除した

メモ：MTでファイルアップロード等のダイアログが画面内に収まり切らない時の対処にて、ダイアログボックスの表示に手を加えてみました。

インクルードするファイルが、ウィジェトを更にインクルードしているものについては、直接記述にするなどして、調整をおこなってみました。あと、インデックステンプレートのみに有効なウィジェットなどについても、mtifによる振分けを見直し、直接テンプレートに記述してみるなどしてみました。というわけでこのブログでは既にmt.Vicunaの原型もとどめてない様子です。

『ページ上部』へのリンクですが、このリンクはよく使われていないものとみなしました。根拠とか、それを明確にできる資料は揃っていません。個別記事においては、記事内容の末端までページが送られたら、それはよいほうなのでないか、と読みきったうえので選択です。

mt.Vicunaのテンプレートで疑問を感じるのが、「Return to page top」です。1行くらいしかない、ページ上部に戻るためだけのリンクをインクルードさせていることはよくわかりません。単にmt:Include module=という書き方で揃えると、テンプレートの見通しがいいから、といった理由にしか見えないのです。

ところで、話は少々それますが、「Six Apart - Movable Type アップグレード 秘話ブログ - :GIZMODO JAPAN編 - :第三話　MT4高速化しよう！講座の巻」という記事内に、mt:includeのタグは処理に時間がかかるタグとのことがちらっと（＃――かどうかは知らんけど）触れられています。自分のテンプレート内をもう一度見返してみようかなと考えさせられました。

Movable Type 4.54.25以降で、ファイルアップロードなどの画面がモニタの解像度やウインドウサイズによって収まりきらずにボタン類が画面に表示されなくなる問題の対処法です

以下の内容は、Movable Type 4系に関するものです。

この問題は、通常の使用では表面化しない類のものかと思うのですが、画像ファイルなどをアップロードする際に表示される、「ダイアログ」が画面内に入りきらないことで、「キャンセルボタン」や「アップロード」といったボタンが表示されなくなってしまう、というものです。

解決法としてMovable Type.JPにて、代替テンプレートが公開されています。

• ファイルアップロード画面に「アップロード」のボタンが表示されない | Movable Type 4 FAQ

説明を読んでファイルをダウンロードして、Movable Typeが設置されているディレクトリ内の指定された箇所にファイルを置くだけなのでそれほど面倒ではありません。

それで、適用するファイルのパスは、以下のようになります。

• MTがインストールされているディレクトリ/alt-tmpl/cms/include/footer.tmpl

適用後、ダイアログが画面に収まりきらないときにスクロールバーが表示される動作になっていれば正常な動作です。

以下は試しにFirefoxでFirebugを起動させてみたときのスクリーンショットです。

おまけ

それで、「ダイアログ自体をドラッグしてみたらどうよ」、ということで実装してみました。

先ほどの件でjQueryが使われてましたので、DraggableというUIを利用するとします。

jQuery UIからUI coreとDraggableをダウンロードしておきます。ダウンロード後は展開したファイルからui.core.js、ui.draggable.jsをMTのjqueryフォルダ内か自分が管理するJSファイルのディレクトリなどにアップロードしておきます。

先述のfooter.tmplファイルを開いてjQueryの呼び出しの箇所と、スクリプト実行の部分を書き換えをおこないます。

</mt:unless>というコードの下付近から以下のように変更しています。なお、jQueryのヴァージョンで1.3.2を使っている関係で、デフォルトのfooter.tmplのjQuery呼び出しファイル自体も変更しています。

<script type="text/javascript" src="<$mt:Var name="static_uri"$>jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<$mt:Var name="static_uri"$>jquery/ui/ui.core_172.js"></script>
<script type="text/javascript" src="<$mt:Var name="static_uri"$>jquery/ui/ui.draggable_172.js"></script>
<script type="text/javascript"><!-- 
    $("head").append('<link rel="stylesheet" href="<mt:var name="static_uri">css/dialog_draggable.css" type="text/css" media="screen" />');
    $(document).ready(function(){
                $('#dialog-container').draggable();
    });
    jQuery(function() {
        jQuery(window).resize(function() {
            var $dialog = $('#dialog');
            var height = jQuery(window).height();
            if ($dialog.length) {
                $dialog.height(height - 60);
                $('#dialog-iframe').height(height - 60);
            }
        });
    });
// -->
</script>

jQueryで、スタイルシートをappendしていて、スタイルシートで使っているのは、カーソルの形を変えるといった程度のものです。mt-static/css/ 以下か自分がわかる任意の箇所に置きます。

/* for draggable dialog */
#dialog-container{ cursor: move; }
#dialog-container:hover { border: 2px solid blue; }

footer.tmplを変更したものに差し替えて、ダイアログを見ますと以下のように、ダイアログの外側のグレーアウトされた部分でドラッグ可能となりました。

それと注意点としてですが、MTのヴァージョンをあげた、などに起因して動かなくなってしまった場合は、この代替テンプレートファイルを削除されるとよろしいかと。

はてなスターの位置を固定表示にするユーザースタイルシートを書いてみました。

引用スターとかいうのをやっていて、引用箇所がページ下部とかで、スクロールする必要のあるとき、ふと思いついたというもの。選択箇所を確認しながらスターをというやつですな。必要あるのかどうか微妙ですけど。

以下のようなスタイルシートですが、Firefoxのユーザースタイルシートで個人的使用のものです。ページに埋め込まれますと、たぶん、何かの嫌がらせに。。

h3 .hatena-star-star-container {
    z-index: 9999;
   -moz-opacity:.7;
    padding-left:3px;
    border-right:1px solid #ddd;
    border-left:5px solid pink;
    position:fixed;
    top:100px;
    left:0;
    width:3em;
    max-height:15em;
    overflow:auto; }
h3 .hatena-star-star-container a {
    display:block; }
h3 .hatena-star-inner-count{
    margin:1em!important; }

追記部分等にあたる、id=moreに対し、ユーザースタイルシートで枠線で囲むスタイルを指定して各サイトを閲覧してきました。その結果からわかったことなどをまとめてみます。

前から追記部分に対してスタイルを指定する試みをしていて、「(総集編：2008)使っているStylishユーザスタイルまとめ」にて紹介していました。そのユーザースタイルシートを再掲しておきます。

#more,
#extended
         {
  background-image:none !important;
  border:1px dotted blue !important;
  padding: 3px !important;
}

ブログで記事の『追記』にあたる、idのmoreがどのような箇所で適用されているのか、というのを巡回していたページのなかからまとめておきます。

個人の巡回範囲なので、あまりアテにはならないとは思います。どこのサイトがどのように指定されているといった情報を閲覧のたびに記録していたというわけでもありません。

なお、「追記部分」という記述については、moreといったidが指定されたブロックを指すものとします。Movable Type 4では「続き」というタブのエリアに書かれた情報のことを言ってると思ってください。

more等が指定されているエリアのパターンについて

1. 書き出しがあり、追記部分はその記事の本文となっている
2. 追記部分は、あとから追加したテキストとなっている
3. 「追記」の文字を明記しておいてその段落にidを指定している
4. 追記は書かれていなくて、追記部分の要素は空となっている
5. 追記ではなく、文書の補足情報･ナヴィゲーションの箇所に指定している

1. はよく使われているパターンです。詳しい事情はわかりませんが、アーカイヴ一覧ページなどで、コンパクトに記事を束ねることができるというのが主な目的なようです（と思われます）。記事先頭部に記事をイメージした画像を使われているのもよく見かけます。

2. ですが、文書を書いてあとから追記したものを、moreの箇所に書かれているというケースです。

3. は1. と似ているのですが、続きの位置ここからである、ということが明示されているパターンです。hr要素にidを指定されているものもありました。

• <p id="more">続きの文章</p>

4. は、テンプレートタグの処理的な問題によるもの、といったところでしょうか。適用したユーザースタイルシートでの見え方としては、「青の点線に空白が囲まれているだけ」となります。

例えばMovable Typeですと、追記をあらわすのに、MTEntryMoreというタグがありますが、<mt:if tag="EntryMore"></mt:if>のように、内容の有無で出力の振り分けがなされずに出力されているものと思われます。MTではなく、ブログサーヴィス等でもこのようなページを確認しています。

5. はカテゴリのリンクや、ナヴィゲーションといった情報群のブロックをid=moreとして指定されているというものです。

はてなブックマークでエントリーページのURIが変更とのこと。既に張られていた旧URI からは全てリダイレクトされるようです。

URI変更については、はてなブックマーク日記の記事を参照します。

• エントリーページの URL 変更について - はてなブックマーク日記

「http://」がURIに含まれない形になるということと、rel="canonical"により正規化されたURIを指定、また既存のURIについては永続的にリダイレクトをおこなうようであります。

ということから、Movable Typeでの「↑B」ボタン設置のリンクについてはこれまでどおりで問題はなさそうです。

で、もしこの変更にあわせた形とするのですと、以下のような感じになるかと。テスト用の簡素なものですから運用レヴェルのものではないです。

<ul>
<mt:Entries lastn="5">
<li><MTEntryTitle>
<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink regex_replace="/http:///",""$>" rel="nofollow">
<img src="←「↑B」画像までのパス→" width="16" height="12" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" />
</a>
</li>
</mt:Entries>
</ul>

例のごとく（？）でregex_replaceによる置換です。スラッシュが続いてヘンテコな感じですが期待どおり（何？）な結果がでます。いちおう、nofollowつきで。

んー、あまりスッキリしないですね。リダイレクトしてくれるというのですから、こちらがわざわざ合わせる必要もないのですけれども。

追記：2013/02/24 http スキームを取り除くグローバルモディファイアをつくりました。

以下のようにつかいます

 <a href="http://b.hatena.ne.jp/entry/<$mt:EntryPermalink RemovehttpScheme="1"$>">

• markdiarycom / mt-plugin-RemovehttpScheme -- Bitbucket

このブログでプラグインによってページ分割されたページのパラメタが付いているページについて、NOINEXとしたその後の状況についてです。

先月エントリしました、「今月のいらんことしい(2009年6月)」にて触れていました、「カテゴリアーカイブでパラメタ（page=）の付くページはNOINDEXとしてみた」についてですが、その後の経過をみてみました。

確認の方法ですが、Google Analyticsにて、先月（自2009年6月1日,至2009年6月30日）の範囲で「閲覧開始ページ」の情報から、「page=」が含まれるページというフィルタをかけることで確認をおこなっています。

Analyticsのグラフでみたところでは、パラメタによってメタタグ挿入の振り分けを実施したあとから、「page=」の付いているページの数値が減少していることが、ぱっと見ただけで確認できました。

と、言葉だけで示してもピンとこないので、いちおう参考としてグラフを作ってみました。

先述したフィルタ済みの結果をエクスポートして、Excelにて取り込み、「日付」とパラメタ付きページの「閲覧開始数」のデータを基としたグラフです。

補足およびコメント

ExcelへはAnalyticsから、エクスポートの機能で「CSV形式（Excel）」を選び、出力されたファイルからデータはそのままでグラフ作成をおこないました。

考えついた当初は、パラメタのないページは検索結果にインデックスしておき、パラメタ付きのページをインデックスさせないことでタイトルが同じで内容の異なるものがインデックスされないようにするということを目的としていました。

重複するコンテンツの対処としては、rel="canonical"というのがあるのですが、アーカイブページについては目的が異なるような気がしましたために使わないでいます。

全体のアクセスからみていきますと、アーカイブページから（当サイトに）入るケースは減少傾向となりましたが、個別ページはアクセス数はそれなりにあるようでして、全体としては、極端な変化がみられないという感じでした。