Quantcast
Channel: 小粋空間
Viewing all 219 articles
Browse latest View live

MTCafe Tokyoに参加しました

$
0
0


昨日行われた「MTCafe Tokyo」に参加してきました。

参加メンバーは20名ほど。最初に軽く全員の自己紹介を行ったあと、特にルールはなく、Movable Typeに関する情報交換の場となりました。

私はプラグインの簡単な仕組みの説明をしたり、WordPressからMovable Typeのインポートについて対応したりしてました。

また、野田さんDynamicMTMLを使ったスマホ対応のページ作成やプラグイン作成方法などを教えてもらいました。ふと思ったのですが、MTOS+藤本さんのカスタムフィールド風データ作成プラグイン+DynamicMTMLを使えば、ほとんど費用をかけずにWordPress+Ktai Style並みのことができるような気がします。

会の後半は、参加されたメンバーの方と「初心者向けの勉強会やってみたいですねー」みたいな話をしていたところから何人か集まり、座るのも忘れて小一時間ほど立ち話をしていました。

最後は野田さんのライトニングトークで、スマホの3GとWiFiを判別して、スピードに応じたサイズの画像を送るためのMTタグの解説をされていました(下)。

ライトニングトーク

終了後はほぼ全員2次会に流れ込んで、昼の続きが行われました。参加された皆様、お疲れ様でした。


Android端末(docomo Xperia Acro)でテザリングを行う方法

$
0
0


Android端末(docomo Xperia Acro)でテザリングしてみましたのでその手順を紹介します。Android端末であればどれも大体同じだと思います。

テザリング(Tethering)とは、スマホなどのモバイル端末をPCなどにつないでインターネットに常時接続させることです。

docomoのXperia Acroは元々テザリング非対応だったのですが、2011年11月からテザリング対応になりました。その前に購入された方もソフトウェアのアップデートで対応できるようになります。すでにほとんどの方がアップデートしている気もしますが、その手順から説明します。

テザリングだけを知りたい方は2項からお読みください。

1.アップデート

PC経由ではなく、端末から直接アップデートする手順を解説します。

実は11月からアップデート可能なことをすっかり忘れており、自動通知されたアップデートの表示も消去してしまい、どこからアップデートを開始できるかを調べるところから始まりました。

「設定」→「端末情報」をタップ。

設定

「ソフトウェア更新」をタップ。

端末情報

「今すぐ更新」をタップ。

ソフトウェア更新

「利用可能な新しいソフトウェアがあるかどうかを検索します~」と表示されるので「OK」をタップ。

今すぐ更新

「インターネットに接続します~」と表示されるので「OK」をタップ。

インターネットに接続

ソフトウェア検索のあと、「~ダウンロードしますか?」と表示されるので「OK」をタップ。

ダウンロード

ダウンロードが開始します。

ダウンロード開始

「ソフトウェアを更新しています~」と表示されるので「OK」をタップ。

ソフトウェアを更新

自動的にシャットダウンします。このあと、何回か再起動が走り、正常に起動するまで数分~10分ほどかかります。

シャットダウン

正常に起動されました。

起動

ロック解除すると「新しいソフトウェアのバージョンがインストールされました」と表示されます。これでアップデート完了です。

アップデート完了

2.テザリングの設定

3G回線でテザリングします。

「設定」→「無線とネットワーク」をタップし、アップデートで表示されるようになった「テザリングとポータブルホットスポット」をタップ。

無線とネットワーク

端末とPCを付属のUSBケーブルでつないで「USBテザリング」をタップ。

テザリングとポータブルホットスポット

注意事項が表示されるので、確認して「OK」をタップ。

注意事項

「テザリングしました」が表示され、上部に青いUSBケーブルのアイコンが表示されれば、テザリングが開始します。いつも使っている有線LANをPCから抜き、念のためモバイルWiFiルータの電源も切った状態で、PCからインターネットにアクセスできた(ブラウザでキャッシュしていない新しいページを開くことができた)ので間違いないと思います。

テザリングとポータブルホットスポット

なお、「USBテザリング」をタップした時点で、「Sony Ericsson sa0102 Remote NDIS based Device」「Sony Ericsson sa0102 ADB Interface Driver」という2つのドライバがPCにインストールされました。逆に、これがインストールされないとテザリングできないかもしれません。

ドライバ

上記の動作でテザリングの操作は合っていると思いますが、ポータブルWiFiアクセスポイントの設定なども触っていたので、認識誤りがありましたらご指摘ください。

YouTube動画をHTML5で再生する方法(スロー・倍速が可能)

$
0
0


すでにご存知の方も多いと思いますが、YouTube動画をHTML5で再生する方法を紹介します。HTML5版はFlashと同等の再生が行えるだけでなく、スロー・倍速再生ができるようになります。

1.HTML5で再生できるようにする

細かい説明は後回しにして、HTML5で再生するための設定は「YouTube HTML5 動画プレーヤー」のページにアクセスします。アカウントを持っていなくても問題ありません。

YouTube HTML5 動画プレーヤー
YouTube HTML5 動画プレーヤー

ページ下にある「HTML5 試用版を有効にする」をクリックします。

YouTube HTML5 動画プレーヤー

「HTML5 試用版が有効になっています。」になれば設定完了です。これでYouTubeの動画がHTML5で再生されます。リンクをもう一度クリックすれば無効にできるので気軽に試せます。

設定完了

以下、Flash版とHTML5版の違いおよびブラウザ対応状況等を示します。自分のWindowsマシンで確認した内容なので、違っていたらすいません。

2.スロー再生・倍速再生

冒頭に書いたとおり、HTML5版は再生速度を変更でき、2倍速~1/4倍速の5段階の切り替えが可能です。ただしブラウザによって対応状況が異なり、再生速度の変更はChrome/IE9/Safariでのみ動作します。

再生速度

3.マウスカーソル

細かいところでは、Flash版では動画部分にカーソルをポイントしてもカーソルの形状は変わりませんが、HTML5版では形状が変わるので、「動画上でクリックできることが分かる」という点でFlash版よりユーザビリティに優れています。

Flash版のカーソル
Flash版のカーソル

HTML5版のカーソル
HTML5版のカーソル

動画上でクリックすれば再生/一時停止の切り替えが行えます(Flash版からの機能ですが)。

4.フルスクリーン

Flash版でお馴染みのフルスクリーン機能は、HTML5版ではブラウザがフルスクリーンオプションに対応していれば、画面全体に表示されます。全画面表示可能なのはChromeだけのようです。F11で元のサイズに戻ります。

フルスクリーン機能対応していない他のブラウザでフルスクリーンにした場合、ブラウザの幅いっぱいに表示されます。この場合はEscキーで元のサイズに戻ります。

5.右クリックメニュー

動画上を右クリックしたときの、それぞれのメニューを掲載しておきます。HTML5版には「新しいウィンドウで開く」がないようです。

Flash版
Flash版

HTML5版
HTML5版

6.ブラウザ別対応状況

YouTube HTML5 動画プレーヤー」の説明では「HTML5の動画タグと、h.264動画コーデックまたはWebM形式(とVP8コーデック)をサポートしているブラウザで使用できます」ということらしいですが、試したところ、主要ブラウザであれば一部の機能を除いてHTML5での再生が可能のようです。

ページ下に対応状況が一発で分かるアイコンが表示されるようになっており、以下はWindowsで各ブラウザの表示を確認したものです。Google Chromeであればすべての機能が動作します。

Firefox8/Opera11
詳細検索オプション

Safari5/IE9
詳細検索オプション

Google Chrome
詳細検索オプション

また、IE6/IE7/IE8についてはGoogle Chrome Frameをインストールすれば対応するようです(動作未確認)。

Windowsで確認した、各ブラウザのHTML5の対応機能は表のとおりです。

ブラウザHTML5再生スロー・倍速フルスクリーン
Google Chrome15
Firefox8××
IE9×
Opera11××
Safari5×

7.その他

YouTube HTML5動画プレーヤー」のページに「WebM形式対応の動画を見つけるには、詳細検索オプションを使用するか、検索URLに&webm=1を追加します」とあります。

すべてWebM形式対応になっていたら記載情報が古いのかもしれませんが、参考までに「詳細検索オプションを使用」は、YouTubeの検索ボックスで検索したあとに表示される「フィルタ」→「WebM」をクリックすることを指していると思われます。

詳細検索オプション

Movable Typeのテーマにブログ記事を利用できる「EntryImExporterプラグイン」バージョンアップ

$
0
0


Movable Typeのテーマにブログ記事を利用できる「EntryExporterプラグイン」をバージョンアップしました。バージョンアップに伴い、プラグイン名も「EntryImExporterプラグイン」に変更しました。

1.変更点

ブログ記事のエクスポート時に、ブログ記事のアイテム(アイテムのラベル)を含むようにしました。これにより、テーマ適用時に同じラベル名のアイテムが存在すれば、自動的にプログ記事のアイテムとして登録することができるようになります。

例えば、ブログのアイテムに3つの画像「車」「オレンジ」「コーヒー」が登録されているものとします。

アイテム

そしてブログ記事のアイテムに、この3つの画像を登録しています。

ブログ記事のアイテム

このブログ記事をテーマに(バージョンアップしたプラグインを使って)エクスポートします。

エクスポート

エクスポートすれば、エクスポートしたtheme.yamlの該当記事に「asset_labels:」という項目と、ブログ記事アイテムに登録しているラベル名が設定されます(赤色部分)。

--- 
author_link: ''
class: blog
description: ''
elements: 
  default_entries: 
    component: ~
    data: 
      news: 
        allow_comments: 1
        allow_pings: 1
        asset_labels: オレンジ,車,コーヒー
        authored_on: 20111103225230
        category: news
        convert_breaks: __default__
        created_on: 20111103225243
        …後略…

このテーマを別のブログにインポート(適用)する際に、同名のラベル名のアイテムが予め登録されていれば、テーマ適用後にプログ記事アイテムが登録される、という仕組みです。

アイテムは手動でブログに登録してもかまいませんが、他のブログから移行するのであれば、AssetExporterプラグインが便利です。

AssetExporterプラグイン

移行する場合のイメージを図に示します。

全体のイメージ

アイテムとブログ記事は同時にエクスポートできますが、1つのtheme.yamlファイルでアイテムとブログ記事を同時に適用すると、アイテムをブログ記事より先に登録できない可能性があるため、2つのtheme.yamlに分けた方が確実と思われます(theme.yamlの中でアイテムが先に記述されていれば大丈夫かもしれません)。

2.プラグインのダウンロード

EntryImExporterプラグインは下記のリンク先からダウンロードできます。

EntryExporterプラグイン

jQuery lightBoxプラグインで拡大画像の幅・高さを制限する方法

$
0
0


拡大画像を表示するJavaScriptライブラリ「jQuery lightBoxプラグイン」で、拡大画像の幅・高さを制限する方法を紹介します。

jQuery lightBoxプラグインの使い方は、下記の公式サイトやネットの情報をご覧ください。

jQuery lightBox plugin
jQuery lightBox plugin

1.問題点

jQuery lightBoxプラグインは元画像である拡大画像の表示サイズを設定できないため、元画像のサイズによっては次のように期待通りの表示にならないケースがあります。

対処前の拡大画像(ブラウザの幅を超えて拡大)
jQuery lightBox plugin

本エントリーの対処を行うことで、拡大時のサイズを制限することができるようになります。

対処後の拡大画像
jQuery lightBox plugin

2.jquery.lightbox-0.5.jsの修正

jQuery lightBoxプラグインに含まれる、jquery.lightbox-0.5.jsを任意のエディタで開き、24行目あたりに赤色の2行を追加します。

…前略…
(function($) {
    /**
     * $ is an alias to jQuery object
     *
     */
    $.fn.lightBox = function(settings) {
        // Settings to configure the jQuery lightBox plugin how you like
        settings = jQuery.extend({
            maxWidth : 0,
            maxHeight : 0,
            // Configuration related to overlay
            …後略…

同様に、195行目あたりに赤色の9行を追加します。

…前略…
function _set_image_to_view() { // show the loading
    // Show the loading
    $('#lightbox-loading').show();
    if ( settings.fixedNavigation ) {
        $('#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
    } else {
        // Hide some elements
        $('#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
    }
    // Image preload process
    var objImagePreloader = new Image();
    objImagePreloader.onload = function() {
        $('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]);
        // Perfomance an effect in the image container resizing it
        if ( settings.maxWidth && objImagePreloader.width > settings.maxWidth ) {
            objImagePreloader.height = objImagePreloader.height * (settings.maxWidth / objImagePreloader.width);
            objImagePreloader.width = settings.maxWidth;
            jQuery('#lightbox-image').css('width', settings.maxWidth + 'px');
        } else if ( settings.maxHeight && objImagePreloader.height > settings.maxHeight ){
            objImagePreloader.width = objImagePreloader.width * (settings.maxHeight / objImagePreloader.height);
            objImagePreloader.height = settings.maxHeight;
            jQuery('#lightbox-image').css('height', settings.maxHeight + 'px');
        }
        _resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
        //    clear onLoad, IE behaves irratically with animated gifs otherwise
        objImagePreloader.onload=function(){};
    };
    objImagePreloader.src = settings.imageArray[settings.activeImage][0];
};
…後略…

修正が完了したら、元のディレクトリに上書き保存してください。

3.jquery.lightbox実行部分の修正

jquery.lightboxを実行するときに赤色のオプションを追加します。指定した数値の単位はpxで、このサイズが画像拡大時の最大幅(または高さ)になります。

$(function(){
    $('.lightbox').lightBox({
        maxWidth: 800,
        maxHeight: 800,
    });
});

幅だけを制限したい場合はmaxWidthのみを、高さだけを制限したい場合はmaxHeightのみを記述してください。両方記述した場合、幅の制限が優先されます。

4.参考サイト

参考サイトは下記です。ありがとうございました。

jquery lightbox で拡大画像の幅を指定する

FC2ブログテンプレートのtitle要素をカスタマイズする

$
0
0


FC2ブログテンプレートのtitle要素をカスタマイズする方法を紹介します。

1.完成例

このカスタマイズを行うことで、次のように、ページ別に異なるタイトルを表示できるようになります。

トップページ(「FC2ブログ」がブログ名)
トップページ

記事ページ(「てすと」が記事タイトル)
記事ページ

カテゴリーページ(「日記」がカテゴリ名)
カテゴリーページ

月別ページ
月別ページ

検索結果ページ
<br />
検索結果ページ

タグ検索結果ページ
タグ検索結果ページ

以下、テンプレートタグの基本も含め、カスタマイズ方法を解説します。サンプルのテンプレートタグだけ欲しい方は、4項に掲載したものをコピーしてください。

2.ブログ名を表示する

title要素にブログ名を表示するには、次のようにします。

<title><%blog_name></title>

<%blog_name>はブログ名を出力するテンプレートタグです。

3.ページ別に出力情報を変更する

2項の記述では、すべてのページでブログ名しか表示されないので、次のように変更することで、ページ別に出力情報を変えることができます。

<title><%sub_title> <%blog_name></title>

<%sub_title>タグはページに応じた内容を出力するテンプレートタグです。ページ別の出力内容は次のようになります。

ページ出力内容
メインページ(出力なし)
記事ページ記事タイトル
カテゴリーページカテゴリー名
月別ページ年月
検索結果ページ検索キーワード
タグ検索結果ページタグ名

ただし<%sub_title>タグを使った場合、月別ページについては、例えば2011年12月のページは「201112」という風に表示されるので、見栄えがよくありません。

月別ページは、年を表示する<%now_year>タグと月を表示する<%now_month>タグを使って「2011年12月」と表示させる方がよさそうです。

この<%now_year>タグと<%now_month>タグを使うには「月別ページのときだけ」という条件分岐が必要になります。

また、記事ページのときにブログ名とのセパレータ文字「|」や「-」を使いたい場合もあると思います。このときも条件分岐が必要です。

条件分岐の方法は3項で解説します。

3.ページ別の出力情報を細かく制御する

2項の設定よりさらに細かい制御を行うには次のテンプレートタグを使用します。例えば先程の「月別ページのときだけ異なるタグを利用する」という場合は次のようにします。

<!--date_area--><%now_year>年<%now_month>月<!--/date_area-->
<!--date_area--><%sub_title><!--/date_area-->

<!--date_area-->~<!--/date_area-->は、月別ページのときに囲った部分(上の例では「<%now_year><%now_month>月」を出力)を実行する役割があります。

また、<!--not_date_area-->~<!--/not_date_area-->は、月別ページ以外のときに囲った部分(上の例では「<%sub_title>」を出力)を実行する役割があります。

各ページを判定するテンプレートタグは次のとおりです。

用途テンプレートタグ
トップページで表示<!--index_area-->~<!--/index_area-->
トップページ以外で表示<!--not_index_area-->~<!--/not_index_area-->
記事ページで表示<!--permanent_area-->~<!--/permanent_area-->
記事ページ以外で表示<!--not_permanent_area-->~<!--/not_permanent_area-->
カテゴリーページで表示<!--category_area-->~<!--/category_area-->
カテゴリーページ以外で表示<!--not_category_area-->~<!--/not_category_area-->
月別ページで表示<!--date_area-->~<!--/date_area-->
月別ページ以外で表示<!--not_date_area-->~<!--/not_date_area-->
検索結果ページで表示<!--search_area-->~<!--/search_area-->
検索結果ページ以外で表示<!--not_search_area-->~<!--/not_search_area-->
タグ検索結果ページで表示<!--tag_area-->~<!--/tag_area-->
タグ検索結果ページ以外で表示<!--not_tag_area-->~<!--/not_tag_area-->

4.title出力用テンプレートタグ

3項までのテンプレートタグを使った、冒頭のtitle要素用のテンプレートタグです。このままコピペしてお使いください。

<title>
<!--permanent_area--><%sub_title><!--/permanent_area-->
<!--category_area--><%sub_title>カテゴリ<!--/category_area-->
<!--date_area--><%now_year>年<%now_month>月アーカイブ<!--/date_area-->
<!--search_area-->「<%sub_title>」の検索結果<!--/search_area-->
<!--tag_area-->タグ「<%sub_title>」の検索結果<!--/tag_area-->
<!--not_index_area--> - <!--/not_index_area--><%blog_name>
</title>

表示内容を変更したい場合は、3項のテンプレートタグ一覧と見比べながら該当箇所を適宜修正してください。

5.FC2ブログテンプレート

今回のカスタマイズは、当ブログで配布中の「FC2ブログテンプレート」にも反映しました。

新しくなった公式Twitterボタン(ツイートボタン)のデザインを修正する

$
0
0


Twitterのリニューアルに伴い、公式Twitterボタン(旧ツイートボタン)の機能とデザインが変更されたようです。Twitterボタン作成ページもリニューアルされています。

新しい作成ページでは、これまでの「リンクを共有する」ボタンの他に「ハッシュタグ」「フォロー」「@ツイート」が作れるようになりました。

Twitterボタン
Twitterボタン

これにより、これまでブログに設置していた公式Twitterボタンのデザインも変わっています。

本エントリーではデザインを修正する方法をいくつか紹介します。レイアウトの崩れ具合によっては他の修正が必要かもしれませんので予めご了承ください。

1.ボックスタイプの幅を修正する(その1)

リニューアル前からブログなどに設定しているボックスタイプ(垂直タイプ)はリニューアル後に次のような表示になっています。

ボックスタイプ

これを次のようにコンパクトなサイズに修正します。

ボックスタイプ(修正後)

修正するには次のCSSを利用します。

iframe.twitter-share-button {
    width: 65px!important;
}

デフォルトの幅は55px、高さは62pxになっているようです。ブラウザによって見え方が異なるかもしれないので、適切な値に適宜修正してください。

2.ボックスタイプの幅を修正する(その2)

もうひとつの方法として、Twitterボタンのマークアップに含まれる、「data-lang="ja"」を「data-lang="en"」に変更して英語表記にします。英語表記にすることで、さらに幅の縮小が可能です。

英語表記

ブラウザによってテキストが見切れている場合、先程と同じセレクタで調整します。

iframe.twitter-share-button {
    width: 60px!important;
}

これで綺麗に表示されます。

ボックスタイプ(修正後)

3.水平タイプの幅を修正する

水平タイプの幅は130pxにひろがったようで、当ブログに設置している表示を見ると、右側に無駄な空白ができてました。

Twitterボタン

こちらも先程と同じセレクタで幅を調整します。

iframe.twitter-share-button {
    width: 105px!important;
}

105pxにするとこのようになります。

Twitterボタン作成ページ

大量のツイートがあると、はみ出すかもしれませんが、9999までは大丈夫みたいです。というか、そもそも大量のツイートはないでしょう(笑)。

Twitterボタン

4.ボックスタイプと水平タイプを両方使っている場合

サイト内でボックスタイプと水平タイプを両方使っている場合、個別にスタイルを調整する必要があります。

ボックスタイプはclass属性に「twitter-count-vertical」水平タイプは「twitter-count-horizontal」が与えられるので、次のようにセレクタを指定します。

iframe.twitter-share-button.twitter-count-vertical {
    width: 65px!important;
}
iframe.twitter-share-button.twitter-count-horizontal {
    width: 105px!important;
}

「twitter-share-button」は省略しても大丈夫だと思います。

iframe.twitter-count-vertical {
    width: 65px!important;
}
iframe.twitter-count-horizontal {
    width: 105px!important;
}

5.作成ページでボックスタイプを作る

新しいTwitterボタン作成ページではボックスタイプを作るフォームがなくなっています。

Twitterボタン作成ページ

ボックスタイプを作るには、Twitterボタンのマークアップに赤色の「data-count="vertical"」を追加します。

<a href="https://twitter.com/share"
  class="twitter-share-button"
  data-via="yujiro"
  data-lang="ja"
  data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

設置したあと、1項の対処を適宜行ってください。

もしかしたら今後ボックスタイプはサポートしなくなるかもしれません。

クロスバイク購入

$
0
0


突然ですがクロスバイクを購入しました。ということで日記エントリーです。

1.きっかけ

会社で「自転車に乗り始めて体重が減った」という人の話を聞き、私も運動不足解消の意味で、その話を聞いてから「自転車を購入しよう」と思いたちました。

ウォーキングも時々やっているのですが、どうせやるならもう少し楽しめる方がいいというのもありました。

2.自転車の種類

思い立ってはみたものの、どういう自転車がよいのか全く分からない状態だったので、とりあえず自転車の種類から調べることにしました。

かなりおおざっぱな説明ですが、自転車には次の種類があります(他にも色々ありますが購入対象として)。

  • ロードバイク(ロードレーサー):競争用自転車
  • マウンテンバイク(MTB):未舗装路や山道を走るために作られた自転車
  • クロスバイク:ロードバイクの軽快さとマウンテンバイクの操作性を組み合わせた自転車

いわゆるママチャリは「シティサイクル」と呼ばれるようです。ロードバイクやクロスバイクのタイヤを小径にした「ミニベロ」というものもあります。

ロードバイクで一般道路を走っている人をよくみかけますが、ドロップハンドルでがっつり走るというつもりもなく、MTBで山道を走るつもりもなく、街中を走る程度で考えていたので、クロスバイクから選ぶことにしました。

3.自転車メーカー

自転車メーカーは国内・国外あわせるとかなりの数にのぼります。自転車メーカーについては以下のリンクをご覧ください。

Wikipedia - 自転車メーカー

かなりの数に上る中、概ね各メーカーのクロスバイクは一通り調べました。調べたというより、自分が気に入ったデザインの自転車を見つけるという作業をひたすら繰り返しました。

デザインの他に「車重10kg以内」に絞ることにしました。ちなみにママチャリの車重は15~20kgです。

4.候補のメーカーと車種

作業を繰り返した結果、候補に残ったメーカーは以下です。

候補に残った車種および、カタログページへのリンクを掲載しておきます。一部車重が10kg以内でないものも含まれているかもしれません(公開されていないものもあります)。

Bianchi CAMALEONTE 2
Bianchi CAMALEONTE 2

COLNAGO Windy
COLNAGO Windy

Giant TRADIST SL
Giant TRADIST SL

Pinarello TREVISO
Pinarello TREVISO

Wilier Bassano(PDFファイルです)
Wilier Bassano

実際の購入車種については来週末あたりにお披露目したいと思いますが、上記のどれでもありません(爆)。

5.最近の自転車について

かなり長い間自転車に乗っていなかったので、以前と変わったことや、そもそも知らなかったことなど、調べてみて分かったことを綴っておきます。

  • 変速段数が格段に増えた(ロードバイクはリアのみで最高11段あるらしい)
  • ドロップハンドルの変速レバーがブレーキと一体化している(=デュアルコントロールレバー)
  • 1種類の自転車に複数のサイズがある
  • ロードバイク・MTB・クロスバイクは毎年モデルが変わる

また、海外メーカーの自転車については、欲しい!と思った車種があっても入荷できないか、時間がかかるという書き込みをネットでみつけました。つまり、店頭に置いてあるものから選ぶしかないということになります(間違ってたらすいません)。


jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説

$
0
0


jQuery Mobileのデザインを簡単に作れる、jQuery Mobile公式サイトで提供している「ThemeRoller」を紹介します。

ThemeRoller
ThemeRoller

こんな風にjQuery Mobileのデザインが簡単に出来上がります。リンクをクリックすれば同じデザインが表示された状態で「ThemeRoller」が起動します(2012/01/11頃まで)。

jQuery Mobile

このエントリーで紹介する情報は2011年12月のものです。

1.ThemeRollerへのアクセス方法と全体レイアウト

jQuery Mobileのトップページにある「Themes」をクリック。

jQuery Mobile

ウェルカムメッセージが表示されるので、「Get Rolling」をクリック。

ウェルカムメッセージ

冒頭の編集画面が現れます。左ペインにテーマの各種設定項目、右ペインにプレビュー画面が表示されます。プレビュー画面は複数表示させることができるので出来栄えを見比べることができます。デフォルトでは3画面表示されています。

ThemeRoller

左ペインのタブの一番右側にある「+」をクリックすれば、プレビュー画面を増やすことができます。タブの「Global」はすべてのプレビュー画面、「A」~「C」はそれぞれのプレビュー画面の設定に対応しています。

左ペイン

2.カラーピッカーの使い方

右上のカラーピッカーはドラッグすることができます。

カラーピッカー

プレビュー画面の背景部分にドラッグすると、

プレビュー画面

このように反映されます。

プレビュー画面

カラーピッカーのドラッグは設定項目に対しても有効です。適用部分には枠線が表示されます。

設定項目

適用した色は右側の保存領域に追加されていきます。最大で5つまでみたいです。

設定項目

Adobe Kulerとも連携しています。「Adobe Kuler」をクリックすると、

Adobe Kuler

Adobe Kulerのカラーピッカーに切り替わります。これもドラッグ可能です。左側のプルダウンを使えば、表示テーマの切り替えや検索が行えます。

Adobe Kulerのカラーピッカー

手動で入力する場合は、次のようなカラーピッカーが表示されます。

カラーピッカー

3.Inspectorの使い方

Inspectorを「ON」にします。

Inspector

プレビュー画面にマウスをポイントすると設定範囲が枠線で表示されます。

プレビュー画面

さらにクリックすると、設定に必要な左ペインの項目が自動的に表示されます。

左ペイン

4.設定項目

左ペインの設定項目をスクリーンショットでご覧ください。InspectorのON/OFFによって項目が異なります。

Inspector OFF
Inspector OFF

Inspector ON
Inspector ON

5.テーマのダウンロード

テーマをダウンロードするには「Download Theme」をクリック。

Download Theme

適当な名称を表示されたダイアログの右上に設定して「Download ZIP」をクリック。これでjQuery Mobileのテーマ部分をダウンロードできます。jQueryやjQuery Mobile本体は含まれませんので注意してください。

Download ZIP

ダイアログに表示されているマークアップを使えばテーマを読み込みますが、link要素やscript要素は2011年12月現在でやや古い(1.0rc2などになっている)ので適宜修正してください。

6.テーマのインポート

ダウンロードしたテーマをインポートするには「Import」をクリック。

Import

表示されたテキストフィールドに、圧縮していないCSSファイル(.min.cssではなく.cssの方)の内容をペーストして「Import」をクリックすれば元のデザインをインポートできます。

インポート

7.テーマのシェア

作成したテーマをシェアするには「Share」をクリック。

Share

表示されたURLでシェアすることができます。この機能を利用すれば作成したテーマをサーバに保存することもできますが、ヘルプの説明によると保存期間は30日なので、大事なテーマはダウンロードした方がよいでしょう。

シェア

不明な点は左ペイン上部にある「Help」をご覧ください。

Facebookの「フィード購読ボタン」をウェブサイトに設置する

$
0
0


Facebookから新しいソーシャルプラグイン「フィード購読ボタン(Subscribe Button)」が2011年12月9日に公開されました。

Introducing the Subscribe Button for Websites
Introducing the Subscribe Button for Websites

本エントリーでは、フィード購読ボタンの機能と設定方法について説明します。

1.フィード購読について

まず、Facebookのフィード購読とは、Facebook上の友達でないユーザーの投稿(フィード)を読んだり、逆に自分の投稿を友達以外のユーザーに公開できる機能です。

例えば、友達でないユーザーのフィードを購読するには、購読したいユーザーのページに表示されている「フィードを購読」をクリックするだけです。なお、ユーザーが購読を許可していなければ、このボタンは表示されません。

フィードを購読

フィード購読の基本的な機能については以下の記事を参照してください。

Facebookフィード購読機能の徹底解説

2.フィード購読ボタンについて

フィード購読ボタンは前項のように、これまでFacebook上にしか表示されませんでしたが、ソーシャルプラグイン「フィード購読ボタン(Subscribe Button)」を利用することで、フィード購読ボタンをブログなど外部のウェブサイトに設置することができるようになりました。

なお、フィード購読対象にできるは個人ユーザーのみで、Facebookページは対象外です。Facebookページの購読者を増やすには「いいね!ボタン」を設置しましょう。

私のFacebookのフィード購読ボタンのサンプルは次のようになります。「フィードを購読」をクリックすれば、Facebook上で友達になっていなくても私の投稿が読めるようになります。ボタンの下に空白があるのはアイコンを表示するためのものです。



実際の動作は試していないので、不具合があったらすいません。次項より実際の設定方法について説明します。

3.アプリの作成

フィード購読ボタン作成にはアプリケーションIDが必要なので、そのためのアプリを作成します。

アプリのページで「Create New App」をクリック(初めて作る場合はその前に許可画面が表示されると思います)。

アプリのページ

適当なアプリ名とネームスペースを入力し、「I Agree~」をチェックして「続行」をクリック。ネームスペースに数字は使えません。

アプリ作成ダイアログ

セキュリティコードを入力して「送信」をクリック。

セキュリティコード

これでアプリが作成できました。作成したアプリには他に色々な設定項目がありますが、多分作成のみで大丈夫だと思います(間違ってたらすいません)。

アプリケーションIDは次項のフィード購読ボタンを作成時、フィード購読ボタン表示コードに自動的に埋め込まれます。厳密には、複数のアプリから選択でき、そのアプリケーションIDが埋め込まれます。

4.フィード購読ボタンの作成

「Subscribe Button」のページにアクセス。

Subscribe Button
「Subscribe Button」のページ

フォームに各項目を設定します。「ProfileURL」には自分のFacebookのユニークURL(後述)を設定します。

フォーム

ユニークURLは、「ホーム」→「アカウント設定」に表示されています。

ユニークURL

設定が完了したら「Get Code」をクリック。

Get Code

コードが表示されます。コードは「HTML5」「XFBML」「IFRAME」の3種類から選べます。好きなコードを選択し、ウェブサイトの任意の位置にペーストしてください。一番設置しやすいのは「IFRAME」だと思います。

HTML5
HTML5

XFBML
XFBML

IFRAME
IFRAME

アプリケーションを複数作成している場合は、赤枠の部分から該当のアプリケーションを選択してください。

アプリケーションを選択

以上です。

Facebookが2012年1月1日に予定している変更点について

$
0
0


Facebookが2012年1月1日に予定している変更点について、開発者ブログの以下の記事で告知がありました。その中からいくつかの項目について情報展開します。

Platform Updates: Operation Developer Love
Platform Updates: Operation Developer Love

1.FB.Data.*

JavaScript SDK APIの以下のAPIが2012年1月1日からサポート対象外となり、新しいアプリケーションで利用できなくなります。

  • FB.Data.query
  • FB.Data.waitOn

2.FB.Canvas.setAutoResize

以前もこのブログで情報展開しましたが、スクロールバーを非表示にする「FB.Canvas.setAutoResize」が「FB.Canvas.setAutoGrow」にリネームされ、「Fb.Canvas.setAutoResize」はAPIとして削除されます。

関連記事:Facebookアプリで「HTTPS+OAuth2.0」の利用義務付けが始まります&setAutoResize()が使えなくなります

3.FBML

FBMLについても、2012年1月1日からサポート対象外となり、セキュリティとプライバシーに関するバグは修正されません。また、2012年6月1日にFBMLエンドポイントはプラットフォームから削除されます。

ただしソーシャルプラグインのXFBMLは使えるような記載があります。詳細は以下のページをご覧ください(間違ってたらすいません)。

Facebook Markup Language (FBML)
Facebook Markup Language (FBML)

4.Requests 2.0

すべてのアプリケーションにRequest 2.0がオプトインされます。おおざっぱですいませんが機能の詳細は以下の記事を参照ください。

Improvements to Requests 2.0

5.開発者ロードマップ

本題からそれますが、2012年1月1日~6月1日までの開発者ロードマップを抜粋しておきます。テキストをクリックすれば元記事にジャンプします。画像をクリックすれば拡大します(拡大後に右下のアイコンをクリックすれば最大化します)。

Developer Roadmap
開発者ロードマップ

ということで、ロードマップに気をつけて開発を進めましょう。

FacebookページへのIFrameタブ追加方法が変更

$
0
0


Facebookの開発者ブログで、「2012年2月1日にすべてのアプリケーションのプロフィールページを削除します」というアナウンスがありました。

Removing App Profile Pages
Removing App Profile Pages

この関係で、2011年12月10日以降に新しく作成したアプリケーションについては、「アプリのプロフィールページを見る」というリンクが表示されなくなりました。

2011年12月10日以前に作成したアプリケーションのメニュー
プロフィールページ

2011年12月10日以降に作成したアプリケーションのメニュー
プロフィールページ

また、このリンクがなくなったことでFacebookへのIFrameタブ追加方法も変更されています。

ということで、FacebookページへのIFrameタブ追加方法および、アプリのプロフィールページの作成方法を紹介します。アプリの作成手順については省略しているので、「Facebookのタイムラインにアプリを追加する方法」の1項を参照してください。

1.FacebookページにIFrameタブを追加する

IFrameタブをFacebookページに追加するには、作成したアプリの「基本設定」→「ページタブ」の「Secure Page Tab URL:」を設定します(これは既存と変わりません)。このURLはIFrameタブとして表示するコンテンツのURLです。

ページタブ

設定後、ブラウザから次のURLを実行します。

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=YOUR_URL

YOUR_APP_IDとYOUR_URLにはそれぞれ次の値を設定します。

  • YOUR_APP_ID:App ID(アプリケーションID)
  • YOUR_URL:さきほど設定した「基本設定」→「ページタブ」の「Secure Page Tab URL:」

指定したURLにアクセスして、次のような内容が表示されればOKです。「Facebookページを選択」のプルダウンから表示したいFacebookページを選択し、「ページタブを追加」をクリックします。私が試したときはポップアップにならなかったので、ブラウザサイズを小さくして表示しています。

ページタブ

実行URLに「display=popup」がなくても大丈夫みたいです。

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

このURLでは次のように表示されます。

ダイアログ

2.アプリのプロフィールページを作る

以前のようなアプリのプロフィールページを作成するには、アプリ編集画面左メニューの「詳細設定」をクリック。

メニュー

「連絡先情報」の「アプリのページ」にある「Facebookページを作成する」をクリック。

詳細設定

「アプリのページを作りますか?」というダイアログが開くので「承認」をクリック。

ダイアログ

「『アプリ名+Community』ページを作りました」というメッセージが表示されるので、「閉じる」をクリック。

ダイアログ

「連絡先情報」の「アプリのページ」に「アプリ名+Community」のリンクが表示されるので、リンクをクリック。

ダイアログ

ステップ1でプロフィール写真設定を行います(後でも行えます)。

プロフィール写真設定

ステップ2でファン獲得の設定を行います(後でも行えます)。

プロフィール写真設定

ステップ3で基本データを入力します(後でも行えます)。

プロフィール写真設定

これでページが追加されました。外部に公開するには、上部の「Facebookページを公開」をクリックします。

プロフィール写真設定

3.2011年12月10日以前に作成したアプリケーションについて

2011年12月10日以前に作成したアプリケーションについては、プロフィールページの上部には次のような警告(黄色部分)が表示され、2012年2月1日に削除されます。

プロフィールページ

「Click here to migrate to an existing Facebook Page 」をクリックすればデータ移行のようなこともできるみたいです。詳しくは冒頭の開発者ブログをご覧ください。

WordPressの「Wordbookerプラグイン」を使ったFacebookウォール投稿とタイトル・画像を自由に設定できるようにするためのカスタマイズ

$
0
0


WordPressでFacebookと連携させる「Wordbookerプラグイン」を使って、記事投稿と連動してFacebookページにウォール投稿を行う方法と、その際にタイトルと画像を自由に設定できるようにするためのカスタマイズを紹介します。

下のスクリーンショットの例では、「WordPressのTwenty Elevenテーマについて解説します。」という部分と本文左のTwenty Elevenテーマの画像について、記事ごとに自由に設定できるようになります。

ウォール投稿

あわせて、Wordbookerプラグインの簡単な設定についても解説します。

1.Wordbookerプラグインとウォール投稿時の問題について

「Wordbooker」はWordPressとFacebookの連携を行うためのプラグインです。主に次のような機能があります。

  • 記事投稿や固定ページ投稿投稿と同時にFacebookにウォール投稿する
  • 記事などにいいね!ボタンを表示する
  • Facebookコメントを表示する
  • OGPを出力する

WordPressのFacebook関連プラグインは他にもいくつかあるようですが、ネットで調べると、設定後確実に動作するという点で、このプラグインの評判がいいようです。

機能も非常に豊富ですが、ウォール投稿に限っては、

  • 投稿時のタイトルを記事単位で設定できない
  • 画像はOGPの画像を利用する

といった仕様になっているようで、やや柔軟性に欠けています。ということで、カスタマイズまで含めた利用方法について紹介します。

なおプラグインの設定項目が非常に多いため、本エントリーでは最低限の設定にとどめています。

2.プラグインのダウンロード

画面はWordPress3.3を使っています。

プラグインの「新規追加」をクリック。

新規追加

フォームに「Wordbooker」を入力して「プラグインの検索」をクリック。

プラグインの検索

「Wordbooker」の「いますぐインストール」をクリック。

いますぐインストール

「インストールが完了しました」が表示されればOKです。つづけて「プラグインを有効化」をクリック。

プラグインを有効化

これでインストールされました。

3.プラグインの設定

ここではFacebookページに投稿するための最低限の設定を紹介します。

「設定」→「WordBooker」を選択。

WordBooker

「Connect with Facebook」をクリック。

Connect with Facebook

「ログイン」をクリック。

ログイン

「許可する」をクリック。

許可

「Reload Page」をクリック。このあと設定項目画面が表示されます。

Reload Page

記事投稿時にFacebookページのウォールに投稿できるようにするには、「User Level Settings」を設定します。「Blog Level Settings」の「General Posting Options」でも設定できます。

WordBooker

  • Default Publish Post to Facebook :Yes
  • Default Publish Page to Facebook :No
  • Post to the following Wall :投稿するFacebookページを選択し、「As a Wall Post」を選択した状態でチェックボックスをチェック

この状態で記事投稿を行えば、選択したFacebookページのウォールにも投稿されます。ちなみに「Post Attribute :」が投稿時のタイトルになりますが、ここでは次のカスタマイズ前提なので設定していません。

4.ウォール投稿時のタイトルと画像を自由に設定できるようにする

ここではカスタムフィールドを使って、ウォール投稿時のタイトルと画像を自由に設定する方法を紹介します。

まず、プラグインファイルwp-content/plugins/wordbooker/wordbooker.phpを任意のエディタで開き、次の変更を行います。バージョン2.0.9では1345行目あたりです。

変更前

…前略…
function wordbooker_fbclient_publishaction($wbuser,$post_id) 
{    
    …かなり中略…
    $post_data = array(
        'media' => $images,
        'post_link' => $post_link,
        'post_link_share' => $post_link_share,
        'post_title' => $post_title,
        'post_excerpt' => $post_content,
        'post_attribute' => $post_attribute,
    #    'post_full_text' => $post->post_content,
        'post_id'=>$post->ID,
        'post_date'=>$post->post_date
        );
    …後略…

変更後(青色を追加、赤色を変更)

…前略…
function wordbooker_fbclient_publishaction($wbuser,$post_id) 
{    
    …かなり中略…
    $images[0]['src'] = post_custom('facebook_image');
    $post_data = array(
        'media' => $images,
        'post_link' => $post_link,
        'post_link_share' => $post_link_share,
        'post_title' => $post_title,
        'post_excerpt' => $post_content,
        'post_attribute' => post_custom('facebook_title'),
    #    'post_full_text' => $post->post_content,
        'post_id'=>$post->ID,
        'post_date'=>$post->post_date
        );
    …後略…

修正後、元のディレクトリに上書きアップロードしてください。

そして、記事投稿時にカスタムフィールドを次のように設定します。

WordBooker

「facebook_title」にウォールに投稿するときのタイトル、「facebook_image」にウォールに投稿するときの画像のURLを設定します。記事に追加した画像のURLは、画像編集画面の「リンクURL(ファイルのURL)」から取得できます。

これで次のように投稿されます。

ウォール投稿

ウォール投稿タイトルをカスタムフィールドでなく、「抜粋」フィールドを利用する場合は、次のように変更するとよいでしょう(赤色部分)。

…前略…
function wordbooker_fbclient_publishaction($wbuser,$post_id) 
{    
    …かなり中略…
    $images[0]['src'] = post_custom('facebook_image');
    $post_data = array(
        'media' => $images,
        'post_link' => $post_link,
        'post_link_share' => $post_link_share,
        'post_title' => $post_title,
        'post_excerpt' => $post_content,
        'post_attribute' => $post->post_excerpt,
    #    'post_full_text' => $post->post_content,
        'post_id'=>$post->ID,
        'post_date'=>$post->post_date
        );
    …後略…

上記の$post_dataに設定している配列データがウォール投稿時のデータに対応するので、この辺りをごにょごにょすれば他の項目も色々カスタマイズできると思います。

Movable Typeテーマ「フォトログ」バージョンアップ

$
0
0


当ブログで配布中のMovable Typeテーマ「フォトログ」をバージョンアップしました。

「フォトログ」テーマ(クリックすればサンプルページにジャンプします)
Movable Type フォトログテーマ

「フォトログ」は写真投稿用ブログ専用テーマで、jQueryとjQuery lightBoxプラグインで画像表示や画像拡大を行います。

1.変更点

画像拡大時の幅および高さを制限できるようにしました。

制限前の画像拡大時の表示
jQuery lightBox plugin

制限後の画像拡大時の表示
jQuery lightBox plugin

最大幅・高さを変更するには、「メインページ」インデックステンプレートと「ブログ記事」アーカイブテンプレート(下)の赤色部分の値を変更してください。

テンプレート

デフォルト「0」は元画像をそのまま表示します。幅だけで制限したい場合は「幅」の値のみ変更してください。幅・高さを両方指定したときの動作は次のようになります。

  • 画像の幅が指定した最大幅を超えている場合:指定幅で拡大
  • 画像の幅が指定した最大幅を超えていない場合:画像の高さが指定した最大の高さを越えていれば指定の高さで拡大、超えていなければ元画像のサイズで拡大

この変更は「jQuery lightBoxプラグインで拡大画像の幅・高さを制限する方法」を組み込んだものです。

2.ダウンロード

「フォトログ」テーマは以下のリンク先からダウンロードできます。

Movable Type フォトログテーマ

自転車用ライトに最適な「GENTOS(ジェントス) 閃 SG-355B」

$
0
0


クロスバイクの夜間走行用にライトを購入しました。肝心のクロスバイク本体はいつ紹介するんだ?という話はおいといて(笑)。

ネットで色々調べて、最も評判が良いと思われる「GENTOS(ジェントス) 閃 SG-355B」をAmazonで買いました。購入時の値段は、58%OFFの2315円でした。

GENTOS(ジェントス) 閃 355 【明るさ100ルーメン/実用点灯10時間】 SG-355B
GENTOS(ジェントス) (2010-03-20)
売り上げランキング: 3

Amazonの「スポーツ&アウトドア」のベストセラーで第3位になっています。

下の写真はクロスバイクのハンドルに取り付けたところです。

SG-355Bの評判がいい理由は以下の3つです。

1.安くて明るい

LED(発光ダイオード)を使ったタイプで「100ルーメン」という明るさです。自転車雑誌のライト特集も読みましたが、他の自転車専用ライトで、この値段(2300円前後)でこれだけ明るい商品は他にないようです。つまりコストパフォーマンスに優れているということです。

早速夜間走行で使ってみましたが、申し分ない明るさです。ヘッドの部分を回せば、ワイドビーム(30℃)からスポットビーム(8℃)までの無段階調節が可能です。

2.パイプホルダーがついている

GENTOS・閃は他にも色々な種類がありますが、このSG-355Bのみパイプホルダー(自転車のハンドル部分に取り付けるためのホルダー)がついており、明らかに自転車用を狙った製品のように思われます。

Amazonの以前のレビューでは「ホルダーが壊れる」といった内容がいくつかありましたが、改善されているようで、全く問題なく取り付けることができました。

ホルダーは素手で取り付けることができるよう、ナットがプラスチック製の大きな形状のものになっています。また、ホルダーの内側にはゴムがついているので、ハンドルに傷がつく心配もなく、走行時にずれることもないと思います。

3.eneloopが使える

SG-355Bは単4電池を3本使い、eneloopにも対応しています。eneloopは通常の電池より電圧がやや低いということと、サイズが若干大きい(JIS規格には準拠してます)という点が通常の乾電池と異なる点ですが、そのいずれにも対応しているようです。

機器によっては電池収納部が乾電池のJIS規格に準拠していないため、eneloopだと電池ボックスに入らないというトラブルもあるようです。

ちなみに連続点灯時間は約10時間です。

4.その他

3秒以内にスイッチを2回押せば点滅モードにもなります。

また、ストラップと携帯用のオリジナルポーチもついていて、至れり尽くせりな商品です。ストラップをつけてハンドルに通しておけば、走行中の万一の落下防止にも使えると思います。


FacebookページにIFrameタブを追加するツール

$
0
0


先日エントリーした「FacebookページへのIFrameタブ追加方法が変更」で紹介したとおり、IFrameタブをFacebookページに追加するには、次のようなURLを手動で起動しなければなりません。

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=YOUR_URL

ということで、FacebookページにIFrameタブを追加できるツール(というか、たんなる入力フォーム)を作りました。よろしければ以下のページをブックマークしてご利用ください。

Facebookページ IFrameタブ追加ツール
Facebookページ IFrameタブ追加ツール

使い方

フォームのテキストフィールドに次の内容を設定して、「実行」をクリック。

  • YOUR_APP_ID:App ID(アプリケーションID)
  • YOUR_URL:アプリの「基本設定」→「ページタブ」の「Secure Page Tab URL:」または「Page Tab URL:」

Facebookページ IFrameタブ追加ツール

ウィンドウが開くので、「Facebookページを選択」をクリック。

Facebookページ IFrameタブ追加ツール

IFrameタブを追加したいFacebookページをクリックして「ページタブを追加」をクリック。プルダウンメニューが縦に長いとすべて表示されないので、図のようにウィンドウの高さを予め変えてください。

Facebookページ IFrameタブ追加ツール

クリックすると、「YOUR_URL」に指定したURLに移動します。この例では指定URLにファイルをアップロードしていないので何も表示されませんが、これでFacebookページにアプリが追加されています。

Facebookページ IFrameタブ追加ツール

以上です。

Movable Type5.0のリスト画面をカスタムフィールドの値で絞り込める「AddCFQuickFilterプラグイン」

$
0
0


Movable Type5.0のブログ記事一覧などのリスト画面をカスタムフィールドの値で絞り込める「AddCFQuickFilterプラグイン」を公開します。

1.機能

Movable Type5.0の記事一覧画面の「絞込み」に、カスタムフィールドの項目を表示します。

カスタムフィールドの項目を表示

表示するタイプは「テキスト」「ラジオボタン」「セレクトボックス」の3種類です。「テキスト」の場合は、条件を入力するテキストフィールドを表示します。

テキストフィールドを表示

「ラジオボタン」「セレクトボックス」の場合はオプションを表示します。

オプションを表示

こんな感じで絞り込めます。

絞り込み

動作確認はMT5.06で行っています。今のところMT5.06以下のバージョンでは動作保障していませんので注意してください。

2.プラグインのダウンロード

下記のリンクをクリックして、プラグインアーカイブをダウンロードします。

AddCFQuickFilter_0_01.zip

プラグインアーカイブを展開し、pluginsディレクトリにあるAddCFQuickFilterフォルダごと、Movable Typeのアプリケーションディレクトリのpluginsディレクトリにアップロードします。

また、プラグインファイルに含まれるlib/MT/CMS/Entry.pmを、Movable Typeのアプリケーションディレクトリのlib/MT/CMS/Entry.pmと差し替えてください(元のEntry.pmはリネームして必ず保存してください)。

システム管理画面のプラグイン設定画面で、「AddCFQuickFilter~」が表示されればインストール完了です。

プラグイン設定画面

Entry.pmは740~750行目に該当の処理を追加しています。既存の処理を使えそうなのですが、正常な動作確認が行えていないため、このような方式にさせて頂いてます。

Facebookバナーの作り方

$
0
0


Facebookには、Facebookのコンテンツをシェアするための「Facebookバナー」というものがあります。

Facebookバナー
Facebookバナー

Facebookバナーには次の種類があります。

  • プロフィール用バナー
  • 写真バナー
  • 「いいね!」バナー
  • Facebookページ用バナー

ということでFacebookバナーの作り方を紹介します。作業はFacebookにログインした状態で行ってください。

1.プロフィール用バナーを作る

Facebookバナーのページにある「プロフィール用バナー」をクリック。

Facebookバナーのページ

ページ右側にある「このバナーを編集」をクリック。

プロフィール用バナー

レイアウトと表示したい項目をチェックして「保存」をクリック。項目を変更すると右側のプレビューに反映されます。

編集

「バナーが更新されました。」と表示されれば更新完了です。バナーを表示するコードは右側のBlogger/TypePad/Otherのいずれかをクリックします。ここでは「Other」をクリックします。

プロフィール用バナー

コードが表示されるのでコピーして、ウェブサイトの任意の位置にペーストしてください。

プロフィール用バナー

下は完成イメージです(2011年12月現在)。プロフィールの変更がバナーに反映されるのがメリットです。

プロフィール用バナー

2.「いいね!」バナーを作る

「いいね!」バナーは、いいね!をしているFacebookページを自分のウェブサイトで紹介するときなどに利用します。

Facebookバナーのページにある「「いいね!」バナー」をクリック。

Facebookバナーのページ

Facebookページを選択してコードを取得します。バナーの編集は行えません。

「いいね!」バナー

下は完成イメージです(2011年12月現在)。ちょっとシンプルすぎて何のバナーか分からないのと、Facebookページの画像がサムネイルに反映されないのが残念な感じです(笑)。

プロフィール用バナー

3.Facebookページ用バナーを作る

自分が管理者になっているFacebookページのバナーを作ることができます。Facebookバナーのページにある「Facebookページ用バナー」をクリック。

Facebookバナーのページ

バナーを表示したいFacebookページの「このバナーを編集」をクリック。

Facebookページ用バナー

レイアウトと表示したい項目をチェックして「保存」をクリック。項目を変更すると右側のプレビューに反映されます。

編集

「バナーが更新されました。」と表示されれば更新完了です。バナーを表示するコードは右側のBlogger/TypePad/Otherのいずれかをクリックします。ここでは「Other」をクリックします。

Facebookページ用バナー

コードが表示されるのでコピーして、ウェブサイトの任意の位置にペーストしてください。

Facebookページ用バナー

下は完成イメージです(2011年12月現在)。実際にはバナーの下に「Facebookページも宣伝」というリンクも表示されますが、ここでは取得コードからその部分を削除しています。バナー上の「小粋空間」というFacebookページ名も、コードから削除すれば非表示にできます。

プロフィール用バナー

Facebookページの場合、ソーシャルプラグインの「Like Box」の方が効果があるように思われますが、ちょっとしたスペースに表示したい場合にFacebookバナーが利用できそうです。

Firefox10の新機能について

$
0
0


2011年12月20日、Firefox9が予定通りリリースされました。が、PCには早くもFirefox10(Aurora)のベータ版をインストールしてみました。

Firefox10

Firefox10では以下の改善が行われます。

  1. アドオンのバージョン互換性を柔軟に判断
  2. 「進む」ボタンを無効時に非表示
  3. HTML5ビデオでスナップショットの保存、統計データ表示が可能
  4. Firefox Syncのセットアップが簡単に
  5. 開発者ツールにインスペクタが追加
  6. CSS 3D Transformに対応
  7. WebGLでアンチエイリアスをサポート
  8. フルスクリーンAPIに対応
  9. mouseenter/mouseleaveイベントに対応
  10. dataURL でも Workerを生成
  11. Page Visibility APIに対応

以下、「Firefox 10 の主な新機能を紹介します」の記事を元に、Firefox10の新機能を紹介します。

1.アドオンのバージョン互換性を柔軟に判断

基本的にアドオンは後方互換性あり(=Firefoxのバージョンがあがっても動作可能)として扱い、実際に問題が生じる可能性のあるケースについてのみ非互換と判断するようになります。

言い換えると、Mozillaのアドオンサイトで配布されていないアドオンなども、互換性情報を無視する「Compatibility Reporter」アドオンなどを使わずにインストールできるようになります。

2.「進む」ボタンを無効時に非表示

「進む」ボタンは無効な時には表示せず、有効になった時にスライド表示されるようにします。

「進む」ボタンが有効なとき
「進む」ボタンが有効なとき

「進む」ボタンが無効なとき
<br />
「進む」ボタンが無効なとき

なお、ボタンのレイアウトを変更して、進むボタンとアドレスバーの間に他のボタンが入ると、これまで同様、進むボタンは表示されたままとなるようです。

進むボタンとアドレスバーの間に他のボタンが入っているとき
進むボタンとアドレスバーの間に他のボタンが入っているとき

3.HTML5ビデオでスナップショットの保存、統計データ表示が可能

HTML5 ビデオの右クリックメニューに、現在のフレームを静止画として保存する「スナップショットを保存」メニューと、動画のサイズ、音声チャンネル数やサンプルレート、フレーム数などを表示する「統計情報を表示」メニューが追加されます。

4.Firefox Syncのセットアップが簡単に

ブックマークなどのユーザデータを同期するFirefox Syncサービスのセットアップが、これまでより分かりやすく、以下のように改善されるようです。

これまでの新規アカウント作成画面(このあとウィザード画面がいくつか続く)
新規アカウント作成画面

Firefox 10の新規アカウント作成画面(次へをクリックすれば設定完了)
新規アカウント作成画面

  • 新規アカウント作成:メールアドレス・パスワード・画像認証を入力のみ
  • デバイス間のデータ同期:既存端末で表示される12桁のワンタイムパスコードを入力するのみ
  • その他:セットアップ時にリカバリキーの確認が不要

5.開発者ツールにインスペクタが追加

Firebugのような「インスペクタ」が追加されます。

インスペクタ

対象要素を右クリックして「要素を調査」をクリックするか、「Web開発」→「調査」をチェックしてから、任意の要素を選択(要素のボックスが強調表示されます)してクリックします。

対象要素を右クリック
対象要素を右クリック

「Web開発」→「調査」をチェック
Web開発

インスペクタの使い方は別途エントリーしたいと思います。なお、書き換え可能な対象は要素の属性とスタイルのみのようです。Firebugとの併用も可能なので、要素の内容を書き換えたいといった場合はFirebugを使いましょう。

6.CSS 3D Transformに対応

CSSの3D Transformに対応します。3D Transformを利用すれば、複雑な JavaScriptのコードやWebGLなどを使うことなく、単純なCSSスタイル指定だけでWebページ中で3次元のコンテンツを利用できます。

3D CSS Tester
3D CSS Tester

7.WebGLでアンチエイリアスをサポート

WebGLコンテキストの生成時に次のようにantialiasオプションを有効にすると、図形の輪郭でジャギーが発生しないよう滑らかに描画されるようになるようです。

ctx = canvas.getContext('webgl', { antialias: true });

8.フルスクリーンAPIに対応

W3Cで仕様策定中のフルスクリーン APIの対応がデフォルトで有効になります(Firefox 9ではデフォルトオフ)。任意の要素に対して mozRequestFullScreen()メソッドを呼び出すことで、その要素が画面全体に拡大表示して描画されます。

9.mouseenter/mouseleaveイベントに対応

IE が独自に実装した、マウスポインタが要素から出入りする時に発生するイベントmouseenter/mouseleaveについて、DOM Level 3 Eventで標準化されることになったため、Firefoxでもこれらのイベントをサポートすることになるようです。

10.dataURLでもWorkerを生成

これまでは別スレッドで実行させたいスクリプトのURLをWorker()に渡してワーカースレッドを生成していました。しかしこれでは単一ファイルの HTMLではワーカースレッドが使えないし、ワーカースレッド用のスクリプトを文字列から生成できないなどの制約がありましたが、Worker()にdataURLを渡すことも可能になるようです。

Bug 699857 - Workers: Allow data urls

11.Page Visibility APIに対応

ブラウザが最小化されたりタブを切り替えてページが表示されなくなった時に、アニメーションやビデオ再生などの処理停止を(簡単に)可能とするため、document.hiddenおよびdocument.visibilityStatusプロパティでページが表示中であるかどうか判断できるPage Visibitity APIをサポートします。

12.Android向けのFirefoxについて

Android向けのFirefoxでは、メモリ使用量が大幅に削減されるようです。また、バッテリーステータスAPIにも対応し、端末がバッテリー駆動かどうかによって処理内容を変えることも行うようです。

CSSで3D画像を実現するサンプルいろいろ

$
0
0


昨日の「Firefox10の新機能について」でも紹介しましたが、CSS 3D Transformの機能を使えば、3D画像をCSS(とHTML)で実装できるようになります。

ということで、3D画像のサンプルを新旧織り交ぜていくつか紹介します。いずれもhacks.mozilla.orgに掲載されているもので、Google Chrome/Safari/Firefox10以上であれば正常に動作すると思います。

1.Fun with 3D rollovers

「Fun with 3D rollovers」は、MDNのロゴにマウスをポイントすると、MDNのロゴとその裏に隠れているHTML5のロゴが回転します。

Fun with 3D rollovers
Fun with 3D rollovers

2.3D CSS Tester

「3D CSS Tester」はCSSのパラメータを変更できるようになっており、変更することでリアルタイムに動作が変わります。

3D CSS Tester
3D CSS Tester

上記のブラウザを使っていない方は以下のYouTubeでお楽しみください。

3.3D HTML5 LOGO

「3D HTML5 LOGO」は回転するHTML5のロゴと、そのパラメータを変更できるようになっています。

3D HTML5 LOGO
3D HTML5 LOGO

4.Poster Circle

「Poster Circle」は円錐状の3つのリングが回転しながら全体が回るサンプルです。

Poster Circle
Poster Circle

5.Browser Memory

「Browser Memory」はいわゆる神経衰弱ゲームになっていて、HTML5のロゴを2枚クリックして、同じマークのブラウザロゴを当てていきます。ロゴが一致しなかったら自動的に元に戻ります。

Browser Memory
Browser Memory

ということでお楽しみください。

Viewing all 219 articles
Browse latest View live




Latest Images