小粋空間: Yahoo アーカイブ

Top ＞サービス＞ Yahoo [全て開く]

2009年9月15日

Yahoo! JAPAN OpenID を省略表示する

September 15,2009 1:55 AM
Tag：[Customize, MovableType, Yahoo]
Permalink

Movable Type の「最近のコメント」に、Yahoo! JAPAN OpenID を省略表示するカスタマイズです。

１．Yahoo OpenID と問題点

Yahoo OpenID は次のようになっています。

https://me.yahoo.co.jp/a/<34文字のパラメータ>

例

https://me.yahoo.co.jp/a/HoGeho6eHogeho8geHOgEHoGehOg#12345

Movable Type に、Yahoo Japan ID による認証コメントを投稿した場合、「最近のコメント」にコメント投稿者の名前には、上記の Yahoo OpenID がそのまま表示されます。正しい内容を表示しているという意味では問題はないのですが、率直に言うと、長くて見にくいです。といっても、コメンターの方が悪い訳ではありません。

ということで、表示内容を短く加工するカスタマイズを紹介します。加工前の Yahoo! JAPAN OpenID は、冒頭に挙げた例を使います。

https://me.yahoo.co.jp/a/HoGeho6eHogeho8geHOgEHoGehOg#12345

２．34文字のパラメータだけを表示

Yahoo! JAPAN OpenID の後方にある34文字のパラメータを表示するには、MTCommentAuthor タグに regex_replace タグを組み合わせます。

<mt:CommentAuthor encode_html="1" regex_replace="/https:\/\/me\.yahoo\.co\.jp\/a\/(.*)/","$1" />

加工後の表示

HoGeho6eHogeho8geHOgEHoGehOg#12345

３．「yahoo」と最後の「#xxxxx」だけを抜き出して表示

Yahoo! JAPAN OpenID の「yahoo」という文字と、最後の「#xxxxx」だけを抜き出して表示するには、先ほどと同様、MTCommentAuthor タグに regex_replace タグを組み合わせます。

<mt:CommentAuthor encode_html="1" regex_replace="/https:\/\/me\.(yahoo)\.co\.jp\/a\/.*(#.*)/","$1$2" />

加工後の表示

yahoo#12345

Comments [3] | Trackbacks [0]

2008年11月11日

YUI（Yahoo! User Interface Library）を利用したドロップダウン式グローバルナビゲーション

November 11,2008 1:11 AM
Tag：[CSS, JavaScript, YUI]
Permalink

YUI（Yahoo! User Interface Library）を利用した、ドロップダウン式グローバルナビゲーションを紹介します。

The Yahoo! User Interface Library (YUI)

ドロップダウンの部分は Movable Type のサブカテゴリーを自動的に出力するようにしています。

このエントリーでは、当サイトの配布テンプレートにあわせたデザインに修正していますが、元のサンプル（下）はより洗練されたデザインですので、そのまま使う方がいいかもしれません。

１．The Yahoo! User Interface Library (YUI) のダウンロード

「The Yahoo! User Interface Library (YUI)」の Download YUI をクリック

ダウンロードが開始されるので、yui_2.6.0.zip（2008年11月現在のバージョン）を任意のフォルダに保存してしてください。今回使用した元のサンプルは「Website Top Nav With Submenus Built From Markup」です。「Website Top Nav Using Animation With Submenus Built From Markup」を使用すればアニメーション表示することができます。

２．YUI ライブラリのアップロード

ダウンロードアーカイブ yui_2.6.0.zip を展開して、中にある build フォルダを丸ごとブログディレクトリにアップロードしてください。
ちなみにデフォルトのデザインで最低限使用するのは、build フォルダにある以下のフォルダのようです。

build/assets
build/container
build/menu
build/yahoo-dom-event

アニメーション動作をする場合は build/animation なども必要ですのでサンプルのソースコードを確認してください。

ダウンロードしたファイルの中に examples フォルダがあるので、その中のファイルで動作を確認することもできます。

３．マークアップ例

Menu 用のマークアップは次の通りです。id 属性、class 属性はそれぞれ必須です。

<div id="navi">
  <div class="bd">
    <ul>
      <li class="yuimenuitem"><a class="yuimenubaritemlabel" href="...">Cat 1</a>
        <div class="yuimenu yuimenubarnav">
          <div class="bd">
            <ul>
              <li class="yuimenuitem"><a class="yuimenubaritemlabel" href="...">Cat 1-1</a></li>
              <li class="yuimenuitem"><a class="yuimenubaritemlabel" href="...">Cat 1-2</a></li>
              <li class="yuimenuitem menu_end"><a class="yuimenubaritemlabel" href="...">Cat 1-3</a>
                <div class="yuimenu yuimenubarnav">
                  <div class="bd">
                    <ul>
                      <li class="yuimenuitem"><a class="yuimenubaritemlabel" href="...">Cat 1-3-1</a></li>
                      <li class="yuimenuitem menu_end"><a class="yuimenubaritemlabel" href="...">Cat 1-3-2</a></li>
                    </ul>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li class="yuimenuitem"><a class="yuimenubaritemlabel" href="...">Cat 2</a>
        <div class="yuimenu yuimenubarnav">
          <div class="bd">
            <ul>
              <li class="yuimenuitem"><a class="yuimenubaritemlabel" href="...">お知らせ</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li class="yuimenuitem"><a class="yuimenubaritemlabel" href="javascript:void()">Cat 3</a></li>
    </ul>
  </div>
</div>

４．Movable Type で利用する場合のテンプレート設定

当サイトで配布している Movable Type テンプレートへの適用例（冒頭の画面）です。ドロップダウンメニューをテンプレートタグで自動生成します。

ブログ管理画面の「デザイン」→「テンプレート」で「ヘッダー」テンプレートモジュール編集画面を開き、グローバルナビゲーションのマークアップ（青色）を追加します。

...前略...
<link rel="stylesheet" type="text/css" href="<mt:blogURL />build/menu/assets/skins/sam/menu.css"> 
<script type="text/javascript" src="<mt:blogURL />build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="<mt:blogURL />build/container/container_core.js"></script>
<script type="text/javascript" src="<mt:blogURL />build/menu/menu.js"></script>
<script type="text/javascript">
    YAHOO.util.Event.onContentReady("navi", function () {
        var oMenuBar = new YAHOO.widget.MenuBar("navi", { 
                                                autosubmenudisplay: true, 
                                                hidedelay: 750, 
                                                lazyload: true });
        oMenuBar.render();
    });
</script>
 
</head>
<body class="<mt:getVar name="page_layout" />"<mt:if name="body_onload"> onload="<mt:getVar name="body_onload" />"</mt:if>>
<div id="box" class="clearfix">
 
<div id="header">
<h1 id="blog-name"><a href="<mt:blogURL />" accesskey="1"><mt:blogName encode_html="1" /></a></h1>
<mt:if tag="BlogDescription"><p class="blog-description"><mt:blogDescription encode_html="1" /></p></mt:if>
</div>
 
<mt:ifArchiveTypeEnabled archive_type="Category">
<div id="navi" class="widget-content">
    <mt:topLevelCategories>
        <mt:subCatIsFirst>
            <mt:hasParentCategory>
        <div class="yuimenu">
            </mt:hasParentCategory>
            <div class="bd">
                <ul>
            <mt:unless name="start_flag">
                    <li><a href="<mt:blogURL />" title="Home">Top</a></li>
                    <li><a href="<mt:blogURL />about.html" title="about">About</a></li>
                <mt:setVar name="start_flag" value="1" />
            </mt:unless>
        </mt:subCatIsFirst>
        <mt:if tag="CategoryCount">
                    <li class="yuimenuitem<mt:subCatIsLast> menu_end</mt:subCatIsLast>"><a class="yuimenubaritemlabel" href="<$mt:categoryArchiveLink$>"<mt:if tag="CategoryDescription"> title="<mt:categoryDescription remove_html="1" encode_html="1" />"</mt:If>><mt:categoryLabel /></a>
        <mt:else>
                    <li class="yuimenuitem<mt:subCatIsLast> menu_end</mt:subCatIsLast>"><a class="yuimenubaritemlabel" href="javascript:void()"<mt:if tag="CategoryDescription"> title="<mt:categoryDescription remove_html="1" encode_html="1" />"</mt:if>><mt:categoryLabel /></a>
        </mt:if>
        <mt:subCatsRecurse />
                    </li>
        <mt:subCatIsLast>
               </ul>
           </div>
           <mt:hasParentCategory>
        </div>
           </mt:hasParentCategory>
        </mt:subCatIsLast>
    </mt:topLevelCategories>
</div>
</mt:ifArchiveTypeEnabled>

赤色で示した部分は Menu のマークアップに対する id 属性値です。id 属性値を変更する場合はこの部分が全て同じ値になるようしてください。

JavaScript の MenuBar のパラメータの意味は次の通りです。

autosubmenudisplay: true：マウスオーバーでドロップダウンを表示; false：クリックしてドロップダウンを表示
hidedelay: マウスアウト後に非表示にするタイミング

また、サブテンプレート内にある

            <mt:unless name="start_flag">
                    <li><a href="<mt:blogURL />" title="Home">Top</a></li>
                    <li><a href="<mt:blogURL />about.html" title="about">About</a></li>
                <mt:setVar name="start_flag" value="1" />
            </mt:unless>

は、カテゴリー以外のメニューを表示する場合に適宜利用してください。

５．Movable Type で利用する場合のCSS設定

４項の設定を行った後、スタイルシートに下記の内容を設定してください。

#navi {
    border-bottom: 1px solid #669;
    background: #fff;
    height: 25px;
}
html > body #navi,
html > body #navi ul li a { /* for Safari */
    height: 28px;
}
#navi ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#navi ul li {
    border-right:1px solid #333;
    width: 100px;
}
#navi ul li a {
    display: block;
    color: #333;
    font-size: 75%;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 2.3;
    text-decoration: none;
}
#navi ul li a:link,
#navi ul li a:visited {
    background: #fff;
}
#navi ul li a:hover {
    color: #000;
    background: #ccc;
}
#navi ul li li {
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
}
#navi ul li li.menu_end {
    border-bottom: 1px solid #333;
}

６．その他

元のサンプルでは class 属性値に yuimenubarnav （赤色部分）を外すと、トップメニューの右矢印が非表示になります。

<div id="productsandservices" class="yuimenubar yuimenubarnav">

Comments [0] | Trackbacks [1]

2008年8月25日

YUI Compressor で JavaScript ファイルを圧縮する

August 25,2008 1:03 AM
Tag：[JavaScript, YUI]
Permalink

YUI Compressor の使用方法を紹介します。

YUI（Yahoo! UI Library） Compressor は、JavaScript ソースコードの圧縮アプリケーションで、バージョン2.0 からは CSS の圧縮も可能になっています。

ダウンロードした Windows 用のバージョンではコマンドラインからの実行のみ有効です。コマンドラインから実行するには Java の実行環境が必要なので、Java の設定方法もひっくるめて紹介します。

なお、当ブログではこれまで複数の JavaScript ファイルを読み込んでいましたが、HTTP リクエスト回数を削減するため、ひとつのファイルにまとめ、さらに YUI Compressor で圧縮してみました。

１．JRE 6 Update 7 のダウンロード

JRE（Java Runtime Environment）は Java プログラムを実行するためのソフトウェアです。

Java の公式サイトの「Javaソフトウェアの無料ダウンロード（JRE）」または「ダウンロードはこちらから」をクリック。

Java の公式サイト

左サイドバーの「Java のダウンロード一覧」をクリック。

Java のダウンロード一覧

Windows の場合、「Windows XP/Vista/2000/2003 オンライン」または「Windows XP/Vista/2000/2003 オフライン」をクリック。

Windows 版のダウンロード

クリックするとファイルのダウンロード画面になるので、任意のフォルダにダウンロードします。

２．JRE 6 Update 7 のインストール

ダウンロードした jre-6u7-windows-i586-p-iftw.exe をダブルクリック。セットアップウィザードが開始するので、「同意する」をクリック。

セットアップウィザード

インストールが開始します。

インストールが開始

「完了」をクリック。

インストール完了

これで JRE がインストールされました。デフォルトでは C ドライブの Program Files\jre1.6.0_07 にインストールされます。

３．パスの設定

コマンドプロンプトから Java コマンドが簡単に実行できるようにします。この作業はスキップしても構いませんが、設定しておいた方が後の作業が楽になります。

マイコンピュータを右クリックして「プロパティ」を選択し、開いた画面の詳細設定タブをクリックして、「環境変数」をクリック。

詳細設定タブ

システム環境変数の Path をクリックして「編集」をクリック。

システム環境変数

「変数値」の最後に以下の内容を追加して、「OK」をクリックします。

;C:¥Program Files¥Java¥jre1.6.0_07¥bin

「変数値」の編集

先頭のセミコロンは、設定済の値との区切り文字になるので、必ず付与してください。また、jre1.6.0_07 というフォルダを他の名称に変更している場合は、フォルダ名を適宜修正してください。

残りの画面も順次「OK」をクリックして閉じてください。

４．YUI Compressor のダウンロード・インストール

Yahoo! UI Library: YUI Compressor の Download をクリック。

Yahoo! UI Library: YUI Compressor

「Download YUI Compressor version 2.3.6」をクリック（バージョンは2008年8月現在）。

「Download YUI Compressor version 2.3.6」をクリック

クリックするとダウンロードが開始されるので、任意のフォルダにダウンロードし、展開してください。

５．JavaScript ファイル・CSS ファイルの用意

圧縮したい JavaScript ファイルまたは CSS ファイルを、YUI Compressor を展開したフォルダの build フォルダに配置します（パスの設定方法が分かっていれば配置場所はどこでも構いません）。

ここでは、圧縮前のJavaScript ファイル名を hogehoege.js として配置します。

６．YUI Compressor の実行

「スタート」→「プログラム」→「アクセサリ」→「コマンドプロンプト」を開き、YUI Compressor を展開したフォルダ（ここでは yuicompressor-2.3.6）に移動し、さらにその配下のbuild フォルダに移動します。コマンドプロンプトは３項の設定が終わってから起動したものを利用してください（３項以前に起動したコマンドプロンプトは３項の設定が反映されません）。

YUI Compressor を展開したフォルダ

コマンドプロンプトで次のコマンドを実行します。

java -jar yuicompressor-2.3.6.jar -o hogehoge-min.js hogehoge.js

-o の後に出力ファイル名を設定します。hogehoge.js が入力する（圧縮前の）JavaScript ファイル名です。

JavaScript ファイル内に日本語を使っている場合は、入力ファイルの文字コードを指定してください。UTF-8 の場合は次のようにします。

java -jar yuicompressor-2.3.6.jar --charset UTF-8 -o hogehoge-min.js hogehoge.js

文字コードを指定しないとエラーになる可能性があります。

正常に終了すればコマンドプロンプトには何も表示されずに終了します。

コマンドプロンプト

出力ファイルを任意のエディタで開き、圧縮されていることを確認してください。複数の JavaScript ファイルをひとつにまとめる機能はないようですので、予めひとつのファイルにしてから、YUI Compressor を実行してください。

コマンドラインのオプションはインストールした YUI Compressor の doc¥README に解説があります。