ダリの雑記：WEBプログラム版

画像ファイルをアップロードして記事に張り付ける際、あらかじめ「サムネイルを利用」にチェックを入れ、その画像幅を決めておく方法です。

そんな必要があるのは稀かもしれませんが、必要になったのでやり方をメモ。

使用したMTは「MTOS version 5.031」

１．「MT設置フォルダ/tmpl/cms/dialog/asset_options_image.tmpl」をダウンロードする。

２．メモ帳以外のテキストエディタで開き、以下の２か所を変更

■116行目

<input type="checkbox" name="thumb" id="create_thumbnail" value="1" <mt:if name="make_thumb">checked="checked" </mt:if>/>

を以下のように変更

<input type="checkbox" name="thumb" id="create_thumbnail" value="1" checked="checked" />

■119行目

<input type="text" name="thumb_width" id="thumb_width" class="smaller-text" value="<mt:var name="thumb_width" escape="html">" onkeypress="widthKeyPress(event)" onchange="adjustWidthHeight(this.form, 1)" size="4" /> <__trans phrase="pixels">)

を以下のように変更

<input type="text" name="thumb_width" id="thumb_width" class="smaller-text" value="（設定したいサイズを半角数字で入力）" onkeypress="widthKeyPress(event)" onchange="adjustWidthHeight(this.form, 1)" size="4" /> <__trans phrase="pixels">)

スマートなやり方ではありませんが、とりあえずは何とかなります。

ちょっと感動したのでメモ。

こちらのサイトからダウンロードできるプラグインは、アップロードするファイルを自動的に判別して、ファイルの内容に沿ったアップロード先を選択してくれます。

MovableType用UploadDir Plugin Ver.0.62　（エムロジック放課後プロジェクトさんのサイト）

解凍してできる「MTUploadDir」フォルダの中にある「plugins」をmt設置フォルダにアップロードするだけ。

設定はmt管理画面のメニュー「ツール＞プラグイン＞UploadDir」から行えます。

デフォルト設定では

audio:mp3,wma,m4a,midi,wav,aiff
videos:mp4,m4v,mpeg,avi,mov,wmv
images:bmp,jpg,jpeg,gif,tif,tiff,png
text:txt
docs:pdf,doc,xls,ppt
src:pl,c,cc,pas,rb
archive:bz2,cab,gz,jar,lzh,rar,tar,taz,zip

見ていただければわかると思いますが、アップロードするファイルが「jpg」なら「images」フォルダ、「pdf」なら「docs」フォルダと自動で選択されます。

わざわざアップロード先を選択するのは面倒なので、このような補助ツールは非常にありがたいですね。

ちなみに今回の動作確認は「MTOS 5.031」で行いました。

メモ。

mixiチェックの設置方法と違い、こちらは超簡単！

１．まずこちらへアクセスします。

http://developers.facebook.com/docs/reference/plugins/like　
（facebook DEVELOPERSサイトの Social plugins ＞ Like Buttonページ）

２．設定を行います。

• URL to Like：静的なHTMLなら各ページのURLをひとつひとつ「URL to Like」へ入力する必要がありますがCMSを使用している場合は、とりあえず未入力。
• Layout Style：ボタンのレイアウトを選択します。（３パターン）
• Show Faces：チェックを入れておくと、ユーザがボタンを押したときに、そのユーザがfacebookに登録しているプロフィール画像が表示されます。
• width：幅
• verb to display：like（いいね）かrecommend（おすすめ）を選択します。
• Font：フォントのタイプ
• Color Scheme：色のタイプ

３．コードを出力

以上の設定を行ったのち、「Get Code」ボタンを押してください。以下のようなコードが出力されます。

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

これを張り付けるわけですが、CMSの場合は各ページごとにそのページのURLを設定する必要があります。

４．記事ページごとにURLを設定する。

３．で記述したコードの赤文字の部分に該当ページのURLが入るように設定してください。
※ただし、URLはurlencodeする必要があります。

例）wordpressの場合は「get_permalink();」を利用します。

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink()); ?>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

※追記：echo を付け忘れていました。申し訳ございません；（2010/12/15）

このコードをボタンを設置する部分に張り付けてください。

以上です。

メモ

大量に画像をアップロードしなくてはならない場合、FTPで一気にアップロードする方法と、MTで１つ１つアップロードする方法の２つがありますが、前者は後々管理画面から削除ができなくなるし、後者は時間がかかる。

そんなとき便利なプラグインが「MultiFileUploader」です。

ダウンロードは以下のサイトから

複数ファイルを一括でアップロードできるMovable Typeプラグイン:MultiFileUploader（スカイアークシステムさんのサイト）

解凍すると

• plugins
• mt-static

のフォルダができるので、それぞれアップロードするだけ。

プラグインが正常に導入されると「アイテム」メニューに「複数アップロード」が追加されますので、そちらから複数ファイルをアップロードしてください。

特に対応バージョンが書いていなかったので不安でしたが、MT5.031にて正常に動作しました。

スカイアークシステムさんのサイトのコメントを見てみると、パスエラーが発生しているようですが、自分のところでは特に問題なしでした。
MTのバージョンのせい？

前回はこちら「MTにてカテゴリを絞り込んで検索する方法」

今回はプラグインを使用します。

この方法のメリットは複数のカテゴリで絞り込めることです。

たとえば以下のようにカテゴリ構成されているとします。

ジャンル
　　SF
　　アニメ
　　クライム
　　コメディ
　　ホラー
メディア
　　DVD
　　VHS
　　ブルーレイ
　　レーザーディスク

「SF×DVD」や「コメディ×VHS」のように複数カテゴリで絞り込みたい場合、前回の方法では実現不可能でした。（一見<input category="SF AND DVD" />で可能そうですができませんでした。）

そこでこちらのサイトで配布しているプラグインを使用します。

CategorySearch（Technology on Informationさんのサイト）

上記のサイトの「リリース＞ダウンロードページ」から最新版をダウンロードしてください。

インストール方法は、ダウンロードしてきたファイルを解凍したのち、「plugins」の中にアップロードすればOKです。

使用方法についても上記のサイトに記述しております。

では以下使用例です。

※なお、以下で使用しているテンプレートはMT5標準で用意されているテーマ「クラッシックブログ」のテンプレートです。

１．検索ウィジェットを編集する

MTブログ管理画面の「デザイン＞ウィジェット＞検索」を開いてください。

その中のformタグで囲まれている部分を、まるごと以下のように書き換えてください。

<form method="get" action="<$mt:CGIPath$><$mt:SearchScript$>">
   
    <MTTopLevelCategories>
    <MTSetVarBlock name="tcid"><MTCategoryID></MTSetVarBlock>
    <div>
        <input type="hidden" name="CategorySearchSets" value="<MTCategoryID>" />
        <select name="<MTCategoryID>">
            <option value="0">すべての<MTCategoryLabel></option>
               
    <MTSubCategories>
        <MTSetVarBlock name="clabel"><MTCategoryLabel></MTSetVarBlock>
        <MTCategorySearchLink type="absolute" set="$tcid" value="$clabel" op="replace" text="ignore" >
        <MTIf name="selected">
            <option value="<MTCategoryLabel>" selected="selected"><MTCategoryLabel></option>
        <MTElse>
            <option value="<MTCategoryLabel>"><MTCategoryLabel></option>
        </MTIf>
        </MTCategorySearchLink>
    </MTSubCategories>
               
        </select>
    </div>
    </MTTopLevelCategories>
   
    <div>
        <input type="text" name="search" value="<$mt:SearchString$>" />
        <input type="hidden" name="CategorySearch" value="1" />
        <input type="hidden" name="CategorySearchIgnoreText" value="1" />
        <input type="hidden" name="IncludeBlogs" value="<$mt:BlogID$>" />
        <input type="hidden" name="limit" value="<$mt:SearchMaxResults$>" />
        <input type="submit" accesskey="4" value="検索"  />
    </div>
   
</form>

■追記（2010/10/27）
MTCategorySearchLinkのtypeを「relative」から「absolute」に変更しました。

２．「検索結果」テンプレートを編集する

MTブログ管理画面の「デザイン＞テンプレート＞検索結果」を開いてください。

「<$mt:SearchString$>」と一致するもの

の部分を

<MTSetVarBlock name="search_string"><$mt:SearchString$></MTSetVarBlock>
<mt:CategorySearchSets glue=" と ">
    「<mt:CategorySearchCategories>
    <mt:CategoryLabel>
    </mt:CategorySearchCategories>」
    <mt:CategorySearchSetsFooter>
        <MTIf name="search_string">
        と「<$mt:SearchString$>」
        </MTIf>
        の検索結果
    </mt:CategorySearchSetsFooter>
</mt:CategorySearchSets>

に変更してください。

この段階でとりあえず再構築をかけてください。

ここまでで、２種類のカテゴリによる絞り込み検索ができるようになりました。

しかし、テキストフォーム(name="search")のところに検索ワードを入力してもスルーされてしまうと思います。

これは

<input type="hidden" name="CategorySearchIgnoreText" value="1" />

が記述されているためで、「CategorySearchIgnoreText」のvalueに値が入っていると、検索ワードが入っていなくても検索結果を返してくれるという利点がある代わりに、検索ワードは無視されてしまうという欠点があります。

できれば検索ワードが入っていない場合はカテゴリのみで検索し、入っている場合はそのワードでも検索するという風にしたいところです。

そこで、今回もJavascriptを使用します。

３．Javascriptを追記する。

読み込めればどこでもいいんですが、とりあえず「デザイン＞ウィジェット＞検索」を開いてください。

一番上に下記のソースを追記します。

<script type="text/javascript">
function searchTextCheck(){
    var searchText = document.getElementById("searchText").value;
    if(searchText != ""){
        document.getElementById("CategorySearchIgnoreText").value = "0";
    }
}
</script>

要するに、検索ボタンをクリックした瞬間、テキストフォームに検索ワードが入っていなければそのままにし、入っていればCategorySearchIgnoreTextのvalueを"0"にする、というわけです。

４．Javascriptで使用するためタグを修正する。

最後に１．で追加したform内のタグの値を少し変更します。

<form me\thod="get" action="<$mt:CGIPath$><$mt:SearchScript$>">
   
    <MTTopLevelCategories>
    <MTSetVarBlock name="tcid"><MTCategoryID></MTSetVarBlock>
    <div>
        <input type="hidden" name="CategorySearchSets" value="<MTCategoryID>" />
        <select name="<MTCategoryID>">
            <option value="0">すべての<MTCategoryLabel></option>
               
    <MTSubCategories>
        <MTSetVarBlock name="clabel"><MTCategoryLabel></MTSetVarBlock>
        <MTCategorySearchLink type="absolute" set="$tcid" value="$clabel" op="replace" text="ignore" >
        <MTIf name="selected">
            <option value="<MTCategoryLabel>" selected="selected"><MTCategoryLabel></option>
        <MTElse>
            <option value="<MTCategoryLabel>"><MTCategoryLabel></option>
        </MTIf>
        </MTCategorySearchLink>
    </MTSubCategories>
               
        </select>
    </div>
    </MTTopLevelCategories>
   
    <div>
        <input type="text" name="search" id="searchText" value="<$mt:SearchString$>" onkeypress="searchTextCheck();" />
        <input type="hidden" name="CategorySearch" value="1" />
        <input type="hidden" name="CategorySearchIgnoreText" id="CategorySearchIgnoreText" value="1" />
        <input type="hidden" name="IncludeBlogs" value="<$mt:BlogID$>" />
        <input type="hidden" name="limit" value="<$mt:SearchMaxResults$>" />
        <input type="submit" accesskey="4" value="検索" onclick="searchTextCheck();" onkeypress="searchTextCheck();" />
    </div>
   
</form>

■追記（2010/10/27）
MTCategorySearchLinkのtypeを「relative」から「absolute」に変更しました。

検索ワードを入力するテキストフォームのタグに
「id="searchText"」
「onkeypress="searchTextCheck();"」

CategorySearchIgnoreTextのタグに
「id="CategorySearchIgnoreText"」

検索ボタンに
「onclick="searchTextCheck();"」
「onkeypress="searchTextCheck();"」

をそれぞれ追加し、再構築してください。

これで、複数のカテゴリによる絞込み検索ができるようになったかと思います。

いや～、それにしてもすばらしいプラグインですね。

感謝感謝です。

MTのウィジェットである「About」。

検索結果ページなどで上記の画像のような文章が出るウィジェットですが、検索にて「カテゴリ」の絞り込みをするとバグります。

具体的にはカテゴリ絞込み検索で、かつ検索にヒットするエントリが存在しない場合は以下のような画面になってしまいます。

特に必要がなければ外しておきましょう。

カテゴリ絞込み検索については「MTにてカテゴリを絞り込んで検索する方法」をご覧ください。

やりたいこと。

MTの検索フォーム。通常だとフリーワードの検索しかできないが、カテゴリを絞り込んだ状態でフリーワード検索を行いたい。

というわけでいい方法がないかな～とググっていると、こちらのサイトでバッチリ解決しました。

MT：検索フォームにカテゴリー絞り込み機能をつける（グラビカ学習帳さんのサイト）

MTブログ管理画面の「デザイン＞ウィジェット＞検索」ウィジェットにてformタグの直下に

<input type="hidden" id="select" name="limit" value="<$mt:SearchMaxResults$>" />
<select name="category">
<option value="0">全カテゴリー</option>
<MTTopLevelCategories>
<MTSubCatIsFirst></MTSubCatIsFirst><MTIfNonZero tag="MTCategoryCount">
<option value="<mt:categorylabel>"><$MTCategoryLabel$> [<$MTCategoryCount$>]</option>
</MTIfNonZero><MTSubCatsRecurse><MTSubCatIsLast></MTSubCatIsLast>
</MTTopLevelCategories>
</select>

を入力するだけ。（グラビカ学習帳さんのソースをまるまる引用）

これで、プルダウンでカテゴリを絞り込み、かつフリーワード検索を行うことができます。

ただ、問題点が。

上記の方法を試してみるとわかりますが、「検索結果」画面に移るとカテゴリ選択のプルダウンが「全カテゴリー」に戻ってしまいます。検索についてはもちろん選択したカテゴリで絞り込まれているので問題ないといえば問題ないんですが、できれば選択したままの状態で表示してほしい。

<$mt:SearchString$>のようにカテゴリの値も取得できるタグがあれば、selected="selected"をつけることができますが、どうもそういうタグが無いっぽい？

なぜ無いんだーーー！！

仕方ないのでjavascriptにてGETリクエスト値を取得することにします。

※以下の変更はMT5で行っております。MT4での動作は確認しておりません。

１．カテゴリプルダウンにIDをつけます。

上記の「検索」ウィジェットで追加したプルダウンの、selectタグに「id="select_category"」を追記します。

<input type="hidden" id="select" name="limit" value="<$mt:SearchMaxResults$>" />
<select name="category" id="select_category">
<option value="0">全カテゴリー</option>
<MTTopLevelCategories>
<MTSubCatIsFirst></MTSubCatIsFirst><MTIfNonZero tag="MTCategoryCount">
<option value="<mt:categorylabel>"><$MTCategoryLabel$> [<$MTCategoryCount$>]</option>
</MTIfNonZero><MTSubCatsRecurse><MTSubCatIsLast></MTSubCatIsLast>
</MTTopLevelCategories>
</select>

２．検索ワード出力の部分を改良します。

MTブログ管理画面の「デザイン＞テンプレート＞検索結果」テンプレートを開き

「<$mt:SearchString$>」と一致するもの

の部分を

カテゴリ：<span id="search_category"></span><br />
<MTSetVarBlock name="category_string"><$mt:SearchString$></MTSetVarBlock>
<MTIf name="category_string" eq="">
検索ワード：なし<br />
<MTElse>
検索ワード：<$mt:SearchString$><br />
</MTIf>
と一致するもの

に変更します。

３．２．と同じく「検索結果」テンプレートのheadタグ内に以下のスクリプトを記述します。

<script type="text/javascript">
function getRequest(){
    if(location.search.length > 1) {
        var get = new Object();
        var ret = location.search.substr(1).split("&");
        for(var i = 0; i < ret.length; i++) {
            var r = ret[i].split("=");
            get[r[0]] = r[1];
        }
        return get;
    }else{
        return false;
    }
}

function searchCategory(){
    var get = getRequest();
    var search_category = decodeURI(get["category"]);
   
    if(search_category == "0"){
        document.getElementById("search_category").innerHTML = "すべて";
    }else{
        document.getElementById("search_category").innerHTML = search_category;
    }
   
    var option = document.getElementById("select_category").getElementsByTagName("option");
    for(i=0;i<option.length;i++){
        if(option[i].value == search_category){
            option[i].selected = true;
              break;
        }
    }
}
</script>

getRequest()関数は「JavaScriptでGETを取得する（S-MEMOサイトさん）」を参考にしました。（というかまんまです。）

４．同じく「検索結果」テンプレートのbodyタグにてsearchCategory()関数を呼び出します。

bodyタグに「onload="searchCategory()"」を追加してください。

<body id="<$mt:BlogThemeID$>" class="mt-search-results <$mt:Var name="page_layout"$>" onload="searchCategory()">

これで検索結果ページでも、どのカテゴリで絞り込んだかを表示でき、かつ検索フォームのカテゴリ選択プルダウンが選択されたままの状態で表示されるようになります。

こんな感じ↓

jqueryを利用して、Wordpressでページ遷移なしにコメントを投稿できるプラグイン「Quick Comments」（作成者：「をかもと」さん）

使用するにあたり、いくつか注意点があります。もしこれを使用しているのにうまく動かない場合は、こちらの「Quick Comments FAQ」をご覧ください。

なお、FAQには書かれていませんが、Quick Commentsとは別にheader.phpでjqueryを呼び出している場合にも正常に動作しなくなる場合があります。
その時は、jqueryの記述を取り除くか、「wp_head()」の前にjqueryを呼び出してください。

例）

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.4.2.min.js"></script>
<?php wp_head(); ?>

本来、Quick Commentsでjqueryを呼び出しているため、別途jqueryを設ける必要はないはずなのですが、独自に作成したスクリプトが動かなくなるケースもあります。その場合に上記の方法で対処してください。

今回参考にさせていただいたサイト

WordPress Plugins/JSeries：該当記事「Quick Comments (コメント投稿 Ajax 化)」「Quick Comments FAQ」

wordpressには

wp_tag_cloud()

という、タグクラウドを生成する便利な関数が存在しますが、それはそれとしてタグの一覧を取り出したい時があります。

方法はカテゴリー一覧と同様、「get_terms」を利用します。

<?php
$tag_all = get_terms("post_tag", "fields=all");
foreach($tag_all as $value):
     echo $value->name;
endforeach;
?>

get_termsの第一引数を「post_tag」にするだけ。

get_termsで取得されるフィールドは

• term_id
• name
• slug
• term_group
• term_taxonomy_id
• taxonomy
• description
• count

となっていますので、foreachでループさせて「$value->term_id」という風に取得してください。

ついでに、特定のタグが付いている記事を取得する場合は、get_postsで

get_posts("tag=hoge");

という風にするだけです

今回は「Google Maps Anywhere」は利用せず、「Custom Field GUI Utility 3」を改造した方法を説明いたします。「Custom Field GUI Utility 3」についてはこちらのサイトをご参照ください。

「かたつむりくんのWWW」さんのサイト

この方法のネックは

• いろいろとファイルをアップロードする必要があり、手間がかかる。
• Custom Field GUI Utilityの「バージョン3.0.5」でのみ利用できる。
• テーマも改造しなければマップが表示されない
• さらっと改造したソースのため、不具合が起こる可能性あり。

などあります。

メリットは

• カスタムフィールドからマップを立ち上げられる。
• テーマ編集次第で吹き出しを自由にカスタマイズできる。

など。

簡単に設定したい場合は「WordPressのカスタムフィールドでGoogleMAPその１」の方法をどうぞ。

作業前の注意事項

Custom Field GUI Utility3.0.5がインストールされていること前提に説明していきます。
※バージョンにご注意ください
入ってない場合は、こちらのサイトからダウンロードしてインストールしてください。

また動作保証はいたしませんので、いきなり動作中の本番サーバに適応させることはやめたほうが良いかと思います。

手順

１．例によってあらかじめAPIキーを取得してください。

Google MAPS API に登録する （Google Maps API）

２．こちらのファイルをダウンロードして解凍してください。

Custom Field GUI Utility3の差し替えファイル：「cfgu.3.0.5_replace_file.zip」をダウンロード

このzipファイルを解凍すると

• cfg-utility.php
• cfg-utility.class.php
• map/map_setting.html
• map/map_setting.js

の４ファイルが入っています。

この中の 「map_setting.html」をテキストエディタで開き、５行目「（APIキー）」と書かれている部分に、１．で取得したAPIキーを上書きしてください。

３．FTPソフトにてサーバにアクセスし、「wp-content/plugins/custom-field-gui-utility/」にアップロードしてください。（４ファイルのうち、「cfg-utility.class.php」と「cfg-utility.php」は上書きで）

４．「custom-field-gui-utility」内の「conf.ini」をダウンロードし、マップ用フィールドを追加してみてください。

「type」を「mapfield」にすることにより、そのフィールドはマップフィールドになります。

例）

[Lat_Long]
fieldname = マップ座標
type = mapfield
class = post
size = 60
sample =「マップ設定」から地図情報を設定してください。

追加できましたら、「conf.ini」を元の場所にアップロードしてください。

５．WordPressの管理画面に入り、記事の追加画面、または編集画面を開いてください。下図のようなフィールドが追加されているかと思います。

６．それでは、マップの設定を行います。フィールド右にある「マップを設定」をクリックしてください。ポップアップでマップ設定ウィンドウが開きます。このウィンドウでマーカー座標、中心座標、ズームレベルを設定してください。

７．６．の作業が終わりましたら「決定」ボタンを押してください。下図のようにマーカー座標緯度、マーカー座標経度、中心座標緯度、中心座標経度、ズームレベルが数値化されカスタムフィールドに入ります。

８．これでカスタムフィールド用タグ（get post metaなど）にて座標情報を取得できるようになりました。

あとはテーマにてこの数値を取得し、マップ化すれば完了です。マップ化に必要な記述方法やファイルなどは、こちらの記事を参照してください。

• GoogleマップAPIで地図とマーカー・バルーンを表示（個別版）
• GoogleマップAPIで地図とマーカー・バルーンを表示（複数版）