小粋空間

Excelの行・列の表示・非表示を切り替える

Thu, 09 Feb 2012 07:22:22 PST

Excelの行・列の表示・非表示を切り替える方法です。

動作確認バージョンはExcel2003とちょっと古いです。新しいバージョンではメニューが若干異なると思われますが機能は同じかと思います。

このエントリーの解説では次の表を使用します。この表のB～D列の表示・非表示を切り替えます。エントリーの本題は２項です。

１．「表示しない」メニューを利用する

非表示にしたい列を選択状態にしたあと、右クリックして「表示しない」を選択します。

このようになります。

行を非表示にする場合は行を選択状態にして同様の操作を行います。

非表示にした行・列を表示させるには、非表示になっている行または列をまたがるように選択状態にして、右クリックメニューから「再表示」を選択します。

ただしこの方法では、表示・非表示を一時的にしか行うことしかできません。ということで、より最適な方法を次項に示します。

２．「グループ化」する

このエントリーの本題です。まず、非表示にしたい行・列を選択状態にします。

メニューバーの「データ」→「グループとアウトラインの設定」→「グループ化」を選択します。Excel 2007/Excel 2010であれば「データ」→「アウトライン」→「グループ化」を選択します。

セルの上部に、赤枠で括った表示が現れます。スクリーンショットのB～D列の上部にある点がグループ化対象、さらにその上にある線がグループを示します。線の端に表示されている「－」をクリックすれば、グループ化された列を非表示にします。

非表示になりました。「＋」をクリックすれば、非表示の列を表示します。この機能を利用すれば表示・非表示を繰り返し行うことができます。左側に表示されている「1」「2」の機能については後述します。

グループ化を解除する場合は、解除したい行・列を選択して、メニューバーの「データ」→「グループとアウトラインの設定」→「グループ解除」を選択します。

行のグループ化を行うと、次のように表示されます。

行・列のグループ化をあわせて行うと、次のように表示されます。

行・列を閉じたところです。

複数箇所に設定することも可能です。この状態で左側にある「1」「2」のボタンをクリックすれば、まとめて表示・非表示が行えます。

グループ化はさらに階層化することも可能です。階層化に伴い、左側の番号も積みあがっていきます。

複数のWordPressをまとめて管理できる「ManageWP」

Wed, 08 Feb 2012 09:34:56 PST

複数のWordPressを一括管理できるサービス「ManageWP」を紹介します。アカウントをとってちょっと操作してみましたが、複数のウェブサイトをWordPressで管理している人にとってはかなり便利な気がします。

ManageWP

ManageWPは一括管理可能な画面を提供します。一括管理できるということは、複数のWordPressにログインせずに済むというメリットがあります。たとえば複数サイトに異なる記事を投稿したい場合など、ManageWPにログインして投稿先のWordPressを選択して投稿すれば、複数のWordPress管理画面を横断する必要がなくなります。

トライアル（2週間、10サイトまで）は無償ですが、基本は有償です。価格は最後に紹介します。

以下、操作方法です。

１．サインアップ

ManageWPのページにアクセスして「Sign Up」をクリック。

ユーザー名・メールアドレス・パスワードを入力して「Register」をクリック。

完了するとようこそ画面が表示されます。

２．ウェブサイトの追加

ManageWPに管理したいウェブサイトを追加するには、１項の作業が終わると表示される「Add your first webiste」をクリック。

「website url」にWordPressのインストール先のURL（「wp-admin」は不要）、「admin usename」にインストールしたWordPressのユーザー名を入力して「Add Site」をクリック。

WordPressへのアクセスが成功したら次の画面に切り替わるので、「Click hire to install ManageWP Worker plugin」のあたりをクリック。
これは、ManageWPの管理対象にするWordPressには「ManageWP Worker」プラグインが必要なためです。追加するWordPressにすべてこのプラグインをインストールします。

プラグインのインストール画面に移動するので、「ManageWP Worker」の「いますぐインストール」をクリック。

「プラグインを有効化」をクリック。

ManageWPの画面に戻って「Add Site」をクリック。

これで登録完了です。このダイアログを使って別のウェブサイトを続けて登録することもできますし、あとで追加することもできます。

ウェブサイトを1つ登録すれば次のような管理画面が表示されます。日本語ではありませんが大体分かると思います。左側に主なメニュー、中央にはダッシュボードが表示されます。スクリーンショットは「user-domain/wordpress」と「hoge-domain/wordpress」の2つのウェブサイトを登録した状態にしています。

次項以降で、いくつかの機能を紹介していきます。

３．記事の一括投稿

一括投稿画面です。右サイドバーにある「Select Sites」で投稿するサイトを選択します。

投稿が完了すると次のように表示されます。

一括投稿も可能ですが、複数のWordPressにログインしなおさずに、この画面だけで投稿できるのがいいですね。

４．プラグインの一括有効化

すでに各WordPressにインストールされているプラグインを一括で有効化してみます。ここでは「Akismet」を有効化してみます。

対象のウェブサイトをチェックして、インストール済みのプラグイン「Akismet」を検索します。

有効化するウェブサイトをチェックして有効化します。チェックボックスがウェブサイトの部分とAkismetにあるのは、複数のプラグインがヒットしたときのことを考慮していると思われます。ウェブサイトの部分をチェックすれば、ヒットしたすべてのプラグインにチェックがつきます。

実施状況はプログレスバーで表示されます。

完了しました。ウェブサイトのプラグイン画面をみたところ、チェックしたすべてのWordPressでAkismetが有効化されてました。

５．プラグインの一括インストール

各WordPressにプラグインを一括インストールしてみます。

インストールしたいプラグインを検索します。ここでは「WB-DBManager」を検索します。

みつかりました。「Install」をクリックします。

インストールの進行状況はプログレスバーで表示されます。

チェックしたWordPressにインストールされました。有効化もされています。

６．ユーザーの一括管理

ユーザーの一括管理もできます。スクリーンショットはパスワードの一括変更です。

７．バックアップ

バックアップも行えるようです。これは試してません。

８．SEOチェック

SEOの設定をチェックする機能（被リンク数・トラフィック・Twitter・Facebook等）もあるようです。

９．費用・支払い

費用の確認や支払いは、メニュー上部にある「Trial」のリンクをクリック。

右側にある「order Now」をクリック。

タイプはスタンダード・プロフェッショナル・ビジネスの3種類があります。スタンダードは1年払いで1ヶ月あたり$6.30みたいです。ウェブサイト数と期間によって支払い額は異なるので、詳細を知りたい方はとりあえずアカウントをとって確認してみてください。

以上です。元ネタは「複数のWordPressサイトを運営しているなら、ManageWPでまとめて管理しよう」です。

Movable Typeの一覧画面にリストアクションを追加する

Tue, 07 Feb 2012 09:55:55 PST

Movable Typeのプラグイン開発ネタで、一覧画面にリストアクションを追加する方法です。バージョンは5.1以降です。

「リストアクション」とは、一覧画面内に表示されたチェックボックスをチェックして動作をさせるための機能です。

リストアクションのメニューを表示

１．プラグインのリストアクションを追加する

プラグインのリストアクションは、次のように「プラグインアクション」というoptgroup要素の中に追加したアクションが表示されます。

プラグインのリストアクションを追加するには、次の内容をfoo.plなど任意のファイル名でplugins配下にアップロードします。赤色部分がリストアクション定義です。

package MT::Plugin::Foo;
 
use strict;
use base qw( MT::Plugin );
 
my $plugin  = MT::Plugin::Foo->new({
    id          => 'foo',
    name        => 'foo',
    description => 'This is foo',
    version     => '0.1',
    registry => {
        list_actions => {
            entry => {
                foo => {
                    label => 'foo',
                    mode => 'foo',
                    order => 1000
                },
            },
        },
    },
});
MT->add_plugin($plugin);

２．コア機能としてリストアクションを追加する

コア機能としてのリストアクションは次のように、既存のリストアクションと並べて表示でき、１項のリストアクションよりメニューがすっきりします。もちろんメニューからの動作はプラグインで実装可能です。

コア機能としてリストアクションを追加するには、次の内容をfoo.plなど任意のファイル名でplugins配下にアップロードします。

package MT::Plugin::Foo;
 
use strict;
use base qw( MT::Plugin );
 
my $plugin  = MT::Plugin::Foo->new({
    id          => 'foo',
    name        => 'foo',
    description => 'This is foo',
    version     => '0.1',
    registry => {
        callbacks => {
            init_request => \&init_request,
        },
    },
});
MT->add_plugin($plugin);
 
sub init_request {
    my ($eh, $app) = @_;
    my $core = MT->component("core");
    $core->registry("list_actions", "entry", "foo",
        {
            label => 'foo',
            mode => 'foo',
            order => 1000,
        });
}
1;

１項との違いは、プラグインのレジストリにlist_actionsを追加するのではなく、init_request実行契機でコア機能（$core）のレジストリに追加している点です。

registry()のパラメータにサンプルのようなハッシュ形式を記載すれば、list_actions以外の内容でも追加することができます。

    $core->registry("list_actions", "entry", "foo",
        {
            label => 'foo',
            mode => 'foo',
            order => 1000,
        });

３．注意事項

プラグイン定義はYAMLでも記述することができますが、MT5.12現在では、次のようなYAMLを定義しても一覧画面にリストアクションを追加することができないようです。

id: foo
name: foo
version: 0.01
list_actions:
    entry:
        foo:
            label: 'foo'
            mode: foo
            order: 1000

Androidで全角の英数文字や記号を入力する

Mon, 06 Feb 2012 09:34:56 PST

Androidのデフォルトで用意されているキーボードで全角の英・数・記号を入力する方法です。確認機種はXperia Acroです。機種によって操作方法が違っていたらすいません。

まず、半角英文字の入力は次のような感じです。

全角文字に切り替えるには、キーボードの左下にある「文字あAa12」のキーを長押しします。

切り替え画面が表示されるので、「全」をタップします。キーボードの種類などもこの画面で切り替えられます。

わかりにくいですが、これで全角キーボードに切り替わりました。「＠」マークで冒頭のキーボードとの見分けがかろうじてつくと思います。

入力すると全角になったことがわかります。

上の状態で「↑」をタップして大文字に切り替えれば、そのまま全角で入力できます。半角大文字から全角に切り替えると一旦小文字に戻ってしまうので注意しましょう。

一旦全角にしたら、4つ前の画面で「半」をタップするまで、英数文字と記号について全角文字が適用され続けます。下は全角数字キーボードにして入力したところです。

記号を出すには、数字のキーボードに切り替えてから「↑」をタップします。

これで記号用のキーボードに切り替わりました。これは半角の状態です。

冒頭と同様、左下の「文字あAa12」を長押しして「全」をタップすれば全角記号のキーボードに切り替わります。

以上です。

TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」

Sun, 05 Feb 2012 08:55:55 PST

TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。

１．サンプル

jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。

jQuery.Bottomプラグインサンプル

ページの一番下までスクロールすると自動的にコンテンツを表示します。

なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。

２．プラグインの機能

jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。

３．プラグインのダウンロード

githubのjQuery.Bottomプラグインのページよりダウンロードします（ページ左側にあるZIPをクリック）。

４．プラグインのインストール

コンテンツを表示したいページに次のような内容を設定します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="jquery.bottom-1.0.js"></script>
<script type="text/javascript">
$(function() {
    $(window).bottom({proximity: 0.05});
    $(window).on('bottom', function() {
        // コンテンツ表示の処理を記述
    });
});
</script>

以下、設定内容の解説です。

bottom()メソッドでは、指定したオブジェクトにbottomイベントを登録します。下の例ではwindowオブジェクトに対して登録しています。

$(window).bottom();

特定の要素に対して設定することも可能です。

$('#hoge').bottom();

オプションのproximityは、スクロールバーがページ最下部にどの程度接近したらbottomイベントを発生させるかを決めるためのものです。

$(window).bottom({proximity: 0});

Twitterで、スクロールバーがページ一番下に到達しない時点でコンテンツの読み込みが開始するのを思い出してもらえればこのオプションの役割が分かると思います。

値に「0」を設定すると、スクロールバーがページ一番下に到達したときにbottomイベントが発生します。値を大きくしていくほどページ一番下から遠い位置でbottomイベントが発生します。冒頭のサンプルでは「0.05」になっています。

さて、メインのbottomイベント処理はon()メソッドで実行すると良いでしょう。

$(window).on('bottom', function() {
    // コンテンツ表示の処理を記述
});

さらに具体的なサンプルを示します。１項の動作サンプルではコンテンツの読み込みんでいる状態を分かりやすくするよう、setTimeout()を利用しているので、実際には以下のような実装になると思います（厳密にはajax()ではなく、getJSON()などを使うと思いますが）。

$(window).on('bottom', function() {
    var obj = $(this);
    if (!obj.data('loading')) {
        obj.data('loading', true);
        $('#image').html('<img src="loader.gif" />');
        $.ajax({
            url: "test.html",
            cache: false,
            success: function(html){
                $("#hoge").append(html);
                $('#image').html('');
               obj.data('loading', false);
            }
        });
    }
});

キモとなるのは赤色の部分で、このプラグインではスクロールを上下させたときにbottomイベントが何回も発生してしまいます。そのときに処理を重複させないための制御で、最初にイベントが発生した時点でobj.dataの「loading」をtrueにすることで次の重複イベントを処理しないようにします。

ローディング画像はイベントが発生した時点で任意のエリアに表示させ、コンテンツの表示と同時に削除します。

$(window).on('bottom', function() {
        …中略…
        ('#image').html('<img src="loader.gif" />');
        $.ajax({
            url: "test.html",
            success: function(html){
                …中略…
                $('#image').html('');
            }
        });
    }
});

５．注意事項

サンプルではスクロールバーが下の方にある状態でページをリロードすると、コンテンツの表示が連続で行われてしまうため、リロードしたときにページの先頭を表示する次の制御が必要かもしれません。

$('html,body').animate({ scrollTop: 0 }, 'normal');

Twitterなどではリロード時にコンテンツを最初から読み込み直しているのでスクロールバーが消えるようですが、そういった何らかの制御が必要みたいです。

６．参考サイト

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

リロードしたときにjQueryでページの先頭にスクロールさせる方法

Sat, 04 Feb 2012 10:33:33 PST

ページをリロードしたときに、jQueryでページの先頭にスクロールさせる方法を紹介します。

リンクをクリックしてページの先頭にスクロールさせる方法はネット色々出てきますが、リロードのタイミングでスクロール（＝要はページの先頭を表示）させる手段がみつかりませんでした。

別の実験を行っていてこのような動作を行いたいケースが発生したため、少し調べてみました。認識誤りな点がありましたらご指摘ください。

１．JavaScriptのscrollTo()を使ったスクロール

まず、JavaScriptのscrollTo()を使って次のようなコードを記述してみましたが、正常に動作しませんでした。

window.onload = function(){
    window.scrollTo(0,0);
}

動作結果は次の通りです。

Firefox：ページトップに移動するが、スクロールバーは戻らない
Chrome：ページトップに移動しない（挙動としては一旦トップに戻って、またもとの位置にスクロールされる）
IE9：ページトップに移動しない（〃）

２．jQueryのscrollTop()を使ったスクロール

次に、jQueryのscrollTop()を使って次のようなコードを記述してみましたが、こちらも正常に動作しませんでした。

$(function() {
    var pos = $('html,body').scrollTop();
    $('html,body').scrollTop(-pos);
});

Firefox：ページトップに移動するが、スクロールバーは戻らない
Chrome：ページトップに移動しない（少し戻るがトップまで戻らない」）
IE9：ページトップに移動しない

３．jQueryのanimate()を使ったスクロール

最後にjQueryのanimate()で次のようなコードを書いてみたところ、とりあえずどのブラウザでもトップに戻ることができました。

$(function() {
    $('html,body').animate({ scrollTop: 0 }, '1');
});

animateの第2パラメータ（duration）を「'1'」としている理由は、「0」では動作しない（jQueryの仕様？）ということと、クォーテーションで括らないとIE9で正常に動作しないためです。また、firefoxはスクロール動作が遅いようです。

以上です。スクロールにこだわった実験ですが、観点がそもそも間違っていて「こうすればリロード前のスクロール状態がクリアできる」という方法があるかもしれません。あしからず。

クロスバイク用のフロアポンプ（空気入れ）

Fri, 03 Feb 2012 09:55:55 PST

昨年買ったクロスバイク用のフロアポンプ（空気入れ）の紹介です。

クロスバイクを購入したとき、お店に人から「空気入れは必ず購入してください」と言われ、ネットで色々と調べて、シマノの「シマノ PRO フロアポンプ HPコンペティション」にしました。

シマノプロフロアポンプコンペティション

posted with amazlet at 12.02.04

シマノプロ

Amazon.co.jp で詳細を見る

なぜフロアポンプを購入しなければならないかというと、

通常の空気入れでは入らない
乗るときに空気圧を常に最適にしておいた方がいい

の2点のためです。ということで、以下解説です。

１．通常の空気入れでは入らない

通常の空気入れで入れらない理由は、空気圧の違いです。

ママチャリのタイヤの空気圧はせいぜい2.5～3kg/c㎡です。ところがクロスバイクやロードバイクの空気圧はなんと7～8kg/c㎡必要です。この空気圧にするためには普通の空気入れで入れることができないようです。

このことを知らずに、ママチャリ用やマウンテンバイク用の空気入れをうっかり買ってしまわないよう、注意が必要です。

またクロスバイクやロードバイクは、空気を入れる部分（バルブ）が仏式バルブ（フレンチバルブ）または米式バルブとなっています。ママチャリは英式です。つまり仏式バルブ・米式バルブに対応した空気入れが必要というわけです。

２．乗るときに空気圧を常に最適にしておいた方がいい

空気圧を常に最適にしておいた方がいいのは、タイヤを長持ちさせるためです。

空気圧が低過ぎるとタイヤと地面との接地面積が増えるため、パンクしやすくなります。また、摩擦も大きくなってスピードが出にくくなります。

乗り始めてから分かったのですが、空気圧を最適にしても数日で4～5kg/c㎡に下がります。つまりこまめに空気を入れる必要があるので、フロアポンプなしにはクロスバイクを楽しむことはできません。

ということでなかなか面倒なのですが、手がかかるところに楽しさもあります。

３．シマノプロフロアポンプコンペティション

クロスバイク・ロードバイク用のフロアポンプにも色々種類がありますが、「シマノプロフロアポンプコンペティション」を選んだのは、楽天のレビューでかなり評価が高かったためです。

以下のページには2012年1月現在で481件のレビューがあり、全体で4.59とかなりの高評価です。

楽天市場 - シマノプロフロアポンプコンペティション

何がいいかと言うと、具体的にはグリップ部分が握りやすく、空気が入れやすいです。また旧モデルから本体が鉄からアルミに変更になり、軽くなってます。

ゲージ（メーター）はこのような感じです。他の製品は本体下部についているものが多いようですが、本体上部についているので見やすいです。表示はbar/psi（1bar×1.02=1㎏/c㎡）で11気圧まで入ります。

バルブは英・米・仏のすべてに対応しています。赤い方がフレンチバルブ用、黒い方が米式バルブ用で、利用する方にレバーの目印をあわせるとバルブに装着できます。英式を使うときにはアダプターを装着します。

空気圧が高いので「入れるのが大変だろうな」と思われるかもしれませんが、実際は3～4回で既定の空気圧になります。

デザインの学校これからはじめるIllustrator&Photoshopの本

Thu, 02 Feb 2012 08:23:45 PST

デザイン系ソフトとして超定番なIllustratorとPhotoshopの入門書の紹介です。著者の黒野明子さんより献本頂きました。ありがとうございました。

デザインの学校これからはじめるIllustrator&Photoshopの本

posted with amazlet at 12.02.03

黒野明子著ロクナナワークショップ監修
技術評論社

Amazon.co.jp で詳細を見る

Illustrator/Photoshopが全く初めての方でも大丈夫なように、本書ではソフトの起動・操作画面の名称から解説が始まります。Illustrator/Photoshopをお持ちでない場合も、DVDに以下のソフトが収録されているので、買った日から学習を始めることができます。

Adobe Illustrator CS5.1体験版
Adobe Photoshop CS5.1体験版

Illustratorの基本操作では、ロゴマークや名刺の作り方、Photoshopの基本操作では写真のレタッチ（加工・修正）やブログバナー・未にバナーの作成など、実用的なサンプルが丁寧で分かりやすく解説されています。

すべての手順が大きな文字で解説されており、それぞれにスクリーンショットもついているので、戸惑うことなく作業を進めることができると思います。また、書籍で使用しているサンプルはサポートサイトからダウンロードすることもできます。

これからIllustrator/Photoshopを始めてみようという方におすすめの1冊です。

以下目次です。

第1章基本図形でイラストを描いてみよう～ Illustrator: 　01 絵を描く準備をしよう; 　02 長方形や正方形を描いてみよう; 　03 楕円や正円を描いてみよう; 　04 図形に色を塗ってみよう; 　05 線の太さを変えてみよう; 　06 タッチのある線を描いてみよう; 　07 ペンツールで自由な図形を描いてみよう; 　08 図形を回転してみよう; 　09 ドキュメントを保存しよう
第2章ロゴマークを作ってみよう～ Illustrator: 　01 文字を入力してみよう; 　02 文字を図形に変換してみよう; 　03 図形を変形してみよう; 　04 図形を重ねて切り抜いてみよう; 　05 図形を装飾してみよう; 　06 グラデーションを指定しよう; 　07 つややかな光の表現を作成しよう; 　08 立体感を出してみよう
第3章名刺を作ってみよう～ Illustrator: 　01 名刺の枠を作ってみよう; 　02 文字のスタイルを指定してみよう; 　03 背景をパターンで指定しよう; 　04 ロゴマークを貼り付けてみよう; 　05 配置を整えてみよう; 　06 名刺のバリエーションを作ってみよう
第4章写真をレタッチしてみよう～ Photoshop: 　01 写真を切り抜いてみよう; 　02 写真の明るさや色を修正してみよう; 　03 写真の一部分だけ色を変えてみよう; 　04 写真に図形を重ねてみよう; 　05 写真に自由に描き込みしてみよう; 　06 ファイルを保存しよう
第5章ブログのタイトルバナーを作ってみよう～ Photoshop: 　01 サイズを指定して新規ドキュメントを作成しよう; 　02 レイヤーを複製しよう; 　03 文字の下地を作成しよう; 　04 タイトルを入力しよう; 　05 ブラシを使ってみよう; 　06 Web 用に書き出してみよう; 　07 ミニバナーを作ろう
第6章写真をイラスト風に加工してみよう～ Photoshop: 　01 人物を切り抜いて合成してみよう; 　02 人物を複数に増やしてみよう; 　03 すべてのレイヤーを統合しよう; 　04 写真をイラスト風のタッチにしてみよう
第7章ポストカードを作ってみよう～ Illustrator&Photoshop: 　01 写真内の不要なものを消去してみよう; 　02 はがきサイズのレイアウト枠を作ってみよう; 　03 背景パターンを作ってみよう; 　04 写真をはがきサイズの枠内に配置してみよう; 　05 テキストを流し込んでみよう; 　06 文字を装飾してみよう; 　07 足跡のマークを入れてみよう

私はIllustrator/Photoshopともなんとなく使えるのですが、この本を読んで基本的な操作からもう一度しっかり身につけようかと思います。

余談ですが、黒野さんとは以前「CMSとして使うMovable Typeガイドブック」という書籍の共著で一緒にお仕事させて頂きました。

CMSとして使うMovable Typeガイドブック

posted with amazlet at 12.02.03

黒野明子荒木勇次郎
翔泳社

Amazon.co.jp で詳細を見る

またいつか、そういった機会があればと思います。

フォームに設置した複数のsubmitボタン（送信ボタン）をjQueryで制御する

Wed, 01 Feb 2012 08:55:55 PST

1つのフォームに複数設置したsubmitボタン（送信ボタン）の挙動をjQueryで操作・変更する方法を紹介します。

１．用途

このエントリーでは次の2つのケースを紹介します。

1つのフォームに同じ動作を行う送信ボタンを複数設置する
1つのフォームに異なる動作を行う送信ボタンを設置する

２．1つのフォームに同じ動作を行う送信ボタンを複数設置する

たとえばページに表示されたフォームなどの上下に送信ボタンがあった方が、スクロール量が減るなどの利便性が高い場合があります。これをHTMLだけで実現するには、form要素（赤色）内にtype属性値「submit」のinput要素（青色）を設置すれば可能です。

<form name="foo" method="post" action="foo.cgi">
  <input type="submit" value="送信" />
  …中略…
  <input type="submit" value="送信" />
</form>

サンプル1

ただし、HTMLだけで実現する場合、form要素内にinput要素を記述しないといけないという制約があるようです。次のマークアップでは送信ボタンをクリックしても動作しません。

<input type="button" value="送信" />
<form id="foo" name="foo" method="post" action="foo.cgi">
  …中略…
</form>
<input type="button" value="送信" />

かといってform要素の開始タグと終了タグの記述位置を、送信ボタンを表示したい位置に移動するのもどうかと思われます。

ということで、input要素とjQueryと組み合わせれば送信ボタンを好きな位置に設置する例を示します。ちなみに、input要素は「XHTMLタグ一覧表示ツール」をご覧になればお分かりの通り、div要素やp要素、span要素などの子要素であれば、form要素だけでなく、任意の位置に記述することができます。

具体的には、次のようなjQueryを実装します。HTMLマークアップは動作に必要な要素以外は省略しているのでツッコミなしで。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(function(){
    $('input[type=button]').click(function() {
        $('#foo').submit();
    });
});
</script>
 
<input type="button" value="送信" />
<form id="foo" name="foo" method="post" action="foo.cgi">
  …中略…
</form>
<input type="button" value="送信" />

サンプル2

送信ボタン用のinput要素はform要素の外側にあります。送信ボタンをクリックすれば、jQueryのclickイベントでform要素を検索し、submitイベントを実行します。

あるいは、送信ボタンによって動作を変更したい場合があると思います。

２．1つのフォームに異なる動作を行う送信ボタンを設置する

１項で設置したボタンに対し、それぞれ異なる動作を行わせる方法を紹介します。

まず、フォームから起動するCGI（action属性）などを変更するには、次のようにします。input要素にid属性値（赤色）を追加し、それぞれにclickイベントを実装します。clickイベントの中では、form要素のaction属性値を書き換えてからsubmitイベントを実行するようにします。どちらか一方が書き換え不要な場合はform要素のaction属性をそのまま利用しても構いません。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(function(){
    $('#button1').click(function() {
        $('#foo').attr('action', 'bar.cgi');
        $('#foo').submit();
    });
    $('#button2').click(function() {
        $('#foo').attr('action', 'hoge.cgi');
        $('#foo').submit();
    });
});
</script>
 
<input id="button1" type="button" value="送信" />
<form id="foo" name="foo" method="post" action="foo.cgi">
  …中略…
</form>
<input id="button2" type="button" value="送信" />

サンプル3

次に、同じCGIを起動し、クリックされた送信ボタンによってPOSTデータを変更したい場合は、次のようにします。type属性「hidden」のinput要素（赤色）を追加し、clickイベントの中でform要素のinput要素の値を設定してからsubmitイベントを実行します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(function(){
    $('#button1').click(function() {
        $('input[type=hidden]').val('bar');
        $('#foo').submit();
    });
    $('#button2').click(function() {
        $('input[type=hidden]').val('hoge');
        $('#foo').submit();
    });
});
</script>
 
<input id="button1" type="button" value="送信" />
<form id="foo" name="foo" method="post" action="foo.cgi">
  <input type="hidden" name="data1" value="" />
  …中略…
</form>
<input id="button2"  type="button" value="送信" />

サンプル4

CGIでは（上の例では）POSTデータの「data1」から値を取得できます。さらに異なるCGIを起動したい場合は、上記の2つのサンプルを組み合わせてください。

以上です。他にも実現方法はあると思いますので色々試してみてください。

Movable Typeのプラグインをまとめて有効・無効にできる「MultiPluginSwitcherプラグイン」

Tue, 31 Jan 2012 08:55:55 PST

Movable Typeのプラグインをまとめて有効・無効にできる「MultiPluginSwitcherプラグイン」を公開します。

１．背景

デフォルトのプラグイン設定画面（システム管理画面）では、プラグインを有効・無効にする機能として、

個別指定
一括指定

の2種類が用意されています（下）。

個別指定用のボタン

一括指定のボタン

ただし、複数のプラグインを選択してまとめて有効・無効にするという機能はありません。

私のMT実験環境には色々なプラグインをインストールしており、プラグイン開発中に他のプラグインを無効にして該当のプラグインのみ動作確認したいケースがあります。

1つずつ無効にするのは時間がかかって結構面倒なので、FTPツールでconfing.yamlをリネームして無効化していました。が、それもかなり非効率で、「一発で複数のプラグインを無効化できるようにしたい」というのがそもそもの発端です。

それ以外にも、インストールしたプラグインが動作しないといった場合、他のプラグインを無効にして切り分けを行うといった用途でも使えると思います。

２．機能

MultiPluginSwitcherプラグインは、複数のプラグインを選択して有効または無効にすることができます。

本プラグインをインストールすると、プラグイン設定画面の一覧にチェックボックスと「無効」「有効」のボタンが表示されます。チェックボックスをチェックして「無効」または「有効」をクリックすれば、チェックしたプラグインの無効化または有効化を一括で行えます。

無効にしたいプラグインをチェックして「無効」をクリック

チェックしたプラグインをまとめて無効化

その他、細かい機能として、「無効」「有効」をクリックしたときには確認ダイアログを表示します。また、チェックされていない状態で「無効」「有効」をクリックすれば「選択されていません」というアラートを表示します。

３．プラグインのダウンロード・インストール

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

MultiPluginSwitcher_0_01.zip

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

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

４．注意事項

MultiPluginSwitcherプラグインを無効にすると、当然ですがプラグイン設定画面にチェックボックスや「無効」「有効」ボタンが表示されなくなります。

MultiPluginSwitcherプラグインを無効にしたところ

その際はMultiPluginSwitcherプラグインのみ有効にすれば元に戻ります。

インストール不要なスクリーンキャスト（動画キャプチャ）サービス「Screencast-O-Matic」

Mon, 30 Jan 2012 08:55:55 PST

インストール不要なスクリーンキャスト（動画キャプチャ）サービス「Screencast-O-Matic」を紹介します。

Screencast-O-Matic

スクリーンキャスト（動画キャプチャ）はクライアントにインストールするタイプが主流のようですが、「Screencast-O-Matic」はブラウザから起動するだけで簡単に録画が行えます。録画した動画はYouTubeに連携してアップロードすることも可能です。

「Screencast-O-Matic」は少なくとも2007年から続いている、ある意味老舗のサービスのようです。無償で利用する場合は最大15分録画できます。有償サービスを利用すれば無制限に録画できます。

以下、操作方法を紹介します。

１．録画の準備

Screencast-O-Maticのサイトにアクセスして、「Start Recording」をクリック。アカウント取得やログインを行わなくても動作可能です。

Screen Recorderのローディング画面が表示されます。いつまでたってもこの画面から切り替わらない場合は、ローカルPCにJavaがインストールされていないため、６項を参照してインストールしてください（「インストール不要」という謳い文句がうそっぽい感じになってしまいますがそれはおいといて）。

ローディングが完了しました。

完了すると同時に、次の画面（Screen Recorder）が表示されると思います。点線の矩形がスクリーンキャスト範囲になります。点線枠の四隅などに表示されている小さい四角をドラッグすれば、点線の範囲を変形できます。変更したときのサイズは下に表示されます。点線か真ん中のメッセージをドラッグすれば矩形を移動できます。マイクや音量などの設定も下部のアイコンで行えるようです。

２．録画

左下の赤い録画ボタンをクリックすると、次のようにカウントダウンが開始します。

「Go」が出て次の表示になれば録画開始です。左下の一時停止ボタンで録画を止めることができます。右側の「Done」は録音終了です。「Restart」をクリックすると最初からやり直します。

上のスクリーンショットは真っ白な背景でキャプチャしていますが、実際には録画したい画面が表示されます。ここでは「HTML5のcanvasを使ったお絵かきツール詳説」で作ったお絵かきツールの動画を録ってみました。

下の動画が実際に録ったものです。マウスポインタの移動やクリックなどもアニメーションで表示されるので非常に分かりやすいです。

３．プレビュー

録画を止めるとプレビュー画面が表示されます。

このような感じでプレビューできます。

４．YouTubeへのアップロード

録画した内容はローカルPCにダウンロードすることもできますが、ここではYouTubeにアップロードしてみます。「Publish to YouTube HD」をクリック。

タイトル、説明などを入力します。

「Upload to YouTube」をクリック。

初回の場合またはログインしていない場合は次のような承認リクエスト画面が表示されるので「アクセスを許可」をクリックします。

エンコード中です。

アップロード中です。

アップロード完了しました。アップロード先のリンクも表示されます。

リンクをクリックします。無事にYouTubeにアップロードされました。タイトルや説明なども反映されています。

５．録画内容の消去

録画内容の消去するには「Screencast-O-Matic」を再度起動します。起動すると、前回の録画とともに画面右側に次のメッセージが表示されます。

「Delete」をクリックすれば前回の録画が削除されて、新しいスクリーンキャスト画面が表示されます。「Use Recording」をクリックすれば前回の録画画面に戻ります。

６．Javaのインストール

Javaのダウンロードのページにある「無料Javaのダウンロード」をクリックして、ダウンロードしたファイルを実行すればインストールが行えます。

以上です。直感的に操作できるので個人的には大変重宝しています。他にも色々な機能がありそうなので、機会があればまた紹介したいと思います。

HTML5のWebsocketを使ってチャットする

Sun, 29 Jan 2012 07:03:00 PST

HTML5のWebsocket（Node.js+Socket.IO）を使って、チャットが行えるサンプルを作ってみました。Node.js+Socket.IOについては、下記のエントリーを参照してください。

Windows+Node.js+Socket.IO

環境を作ったのは自分のPCのためリアルでお見せできないのが残念ですが、動画をキャプチャしたのでそちらでご確認ください。

１．サンプル動画

2つのブラウザからそれぞれ「http://127.0.0.1:8124」にアクセスして、チャットを行います。入力した文字列を送信すると、送信者およびページにアクセスしているブラウザに内容を反映します。

下の表示は画面が小さいので、全画面表示にするかYoutubeのサイトで直接見た方がいいかもしれません。

Websocket Chat Sample

２．サンプルコード

Node.jsとSocket.IOを使ったサンプルコードを掲載しておきます。

色々ネットを探しましたが（探しきれてないかもしれません）、Node.js+Socket.IOでチャットを行う適当なコードがみつからなかったので自作しました。Node.jsやSocket.IOに精通されている方にとっては当たり前のような実装かと思います。冗長な部分等ありましたらご指摘ください。

app.js（サーバ側のソース）

var app = require('express').createServer()
  , io = require('socket.io').listen(app);
app.listen(8124);
 
app.get('/', function (req, res) {
    res.sendfile(__dirname + '/index.html');
});
 
io.sockets.on('connection', function (socket) {
 
    // クライアントからメッセージ受信
    socket.on('server send', function (msg) {
 
        // ブロードキャストで送信
        io.sockets.emit('send user', msg );
    });
 
    // 切断 
    socket.on('disconnect', function () {
        io.sockets.emit('user disconnected',count);
    });
});

index.html（クライアント側のソース）

<style>
body {
    margin: 20px;
}
p {
    margin: 5px 0;
    padding: 5px 0;
    border-bottom: 1px solid #000;
}
dt{
    margin-top: 5px;
    width: 100px;
    float: left;
    text-align: right;
}
dd{
    margin: 5px 0 5px 100px;
}
input {
    font-size: 100%;
    padding: 5px;
}
#message {
    width: 400px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
jQuery(function(){
  var socket = io.connect('http://localhost');
 
  // サーバからメッセージ受信
  socket.on('send user', function (msg) {
      jQuery('#chat').prepend('<p>'+msg+'</p>');
  });
  jQuery('input[type=submit]').click(function(){
      var name = jQuery('#name').val();
      var message = jQuery('#message').val();
 
      // サーバへメッセージ送信
      socket.emit('server send', name+'：'+message);
  });
});
</script>
<div>
  <dl>
    <dt>名前：</dt><dd><input type="text" id="name"></dd>
    <dt>メッセージ：</dt><dd><input type="text" id="message" size="140" /></dd>
    <dd><input type="submit" value="送信" /></dd>
  </dl>
  <hr />
  <div id="chat"></div>
</div>

３．サーバへのデータ送信方法

サーバへ文字列を送信するには、まず、クライアント側にsocket.emit()を記述します（青色部分）。

クライアント側

jQuery('input[type=submit]').click(function(){
    var name = jQuery('#name').val();
    var message = jQuery('#message').val();
    socket.emit('server send', name+'：'+message);
});

「emit」は「送信する」という意味の英単語で、サーバ・クライアントどちらでも使えます。赤色は送受信のためのカスタムイベントで、ここでは任意の文字列「server send」を記述しています。第2パラメータには送信ボタンをクリックしたときのテキストフィールドデータ（チャットの名前と文字列）の関数を定義しています。

そして、クライアントからのデータを受信できるよう、サーバ側にsocket.on()を記述します。

サーバ側

io.sockets.on('connection', function (socket) {
    socket.on('server send', function (msg) {
        // 受信メッセージの処理
    });
});

第1パラメータのカスタムイベント名はクライアントで設定したものと一致していなければいけません。ここが一致していないとサーバで受信できません。第2パラメータはデータ受信時の関数を定義します。パラメータ（ここではmsg）には受信時のデータを定義できます。

４．クライアントへの送信方法

クライアントへブロードキャストで文字列を送信するには、まず、サーバ側にio.sockets.emit()を記述します（青色部分）。

サーバ側

io.sockets.on('connection', function (socket) {
    socket.on('server send', function (msg) {
        io.sockets.emit('send user', msg);
    });
});

赤色は先程と同様、カスタムイベントで、ここでは任意の文字列「send user」を記述します。第2パラメータにはクライアントから受信したチャットデータ（msg）を設定しています。

そして、サーバからのデータを受信できるよう、クライアント側にsocket.on()を記述します。

クライアント側

socket.on('send user', function (msg) {
    jQuery('#chat').prepend('<p>'+msg+'</p>');
});

受け取るクライアントでは、サーバ側のemit()の第1引数（赤色のイベント名）を必ず指定します。ここが一致していないとクライアントで受信できません。第2パラメータはデータ受信時の関数を定義します。パラメータ（ここではmsg）には受信時のデータを定義できます。

受信後、チャットデータ（msg）をjQueryのprepend()を使って表示します。

以上です。サンプルのHTML・CSS・jQueryの説明は割愛しています。

Movable Type 5でお気に入りリストが作れる「Linklistプラグイン」バージョンアップ

Sat, 28 Jan 2012 07:03:00 PST

Movable Type 5.1でお気に入りリストが作れる「Linklistプラグイン」をバージョンアップしました。

１．機能

このプラグインを利用すれば、次のようなリンクリストを簡単に作ることができます。

リンクはリンク作成画面から登録します。

登録したリンクは、MT5.1のリスティングフレームワークを利用して管理できます。

２．修正点

一旦保存したデータを更新すると、新規データとして保存される不具合を修正しました（大ボケでした、すいません…）。

また、MTLinkListタグに次の2種類のモディファイアを設定できるようにしました。これによりリンクリストの柔軟なソートが可能になります。

sort_byモディファイア

リンクリストの並び替え対象を設定します。

　title：「タイトル」フィールドでソート
　description：「説明」フィールドでソート
　url：「URL」フィールドでソート
　created_on：作成日時でソート
　modified_on：修正日時でソート

設定がない場合は「title」でソートします。

sort_orderモディファイア

リンクリストの並び替える方向を設定します。

　ascend：昇順にソート
　descend：降順にソート

設定がない場合は「ascend」でソートします。

モディファイアの設定サンプル

「説明」フィールドを使って降順にソートする場合は、次の青色部分を追加します。「説明」フィールドに、表示させたい順番に番号を設定すれば任意の順序で表示させることができます。

<mt:Linklist sort_by="description" sort_order="descend">
  <mt:LinklistHeader>
<div class="widget-archives widget">
  <h3 class="widget-header">お気に入り</h3>
  <div class="widget-content">
    <ul>
  </mt:LinklistHeader>
    <li><a href="<$mt:LinkURL$>"><$mt:LinkTitle$></a></li>
  <mt:LinklistFooter>
    </ul>
  </div>
</div>
  </mt:LinklistFooter>
</mt:Linklist>

３．プラグインのダウンロード

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

Movable Type 5でお気に入りリストが作れる「Linklistプラグイン」

自販機レベルまで温める／冷やすことができる1本用ドリンク・クーラー＆ヒーター「MOBICOOL D03AC/DC」

Fri, 27 Jan 2012 07:03:00 PST

節電のためか職場が異様に寒く、せめて買ってきた温かい缶コーヒーを温めようと思い購入しました（節電に貢献できなくてすいません）。

MOBICOOL(モビクール) 冷・温蔵ドリンクカンクーラーホワイト D03AC/DC

posted with amazlet at 12.01.27

MOBICOOL(モビクール)

Amazon.co.jp で詳細を見る

当初、USB式の「カップウォーマー」というもので探していたのですが、期待する温度に全く到達しないことが分かりました。

参考：ITmedia - 実験：USBカップウォーマーはどこまで実用的か

ということで、通常の100V電源が利用タイプにしようと思ったのですが、「1本だけを温めるコンパクトなタイプ」というのがなかなか見つからず、ようやく見つかったのがこの1種類のみです。余談ですが、コンビニにある、缶を温める機械のことを業界用語で「缶ウォーマー」と呼ぶらしいです。

購入の決め手になったのは、Amazonのレビューがほとんどなかった代わりに、楽天のレビューでかなり評価が良かったためです。以下のページには2012年1月現在で20件のレビューがありますが、全体で4.2とかなりの高評価です。また、多くのショップで売り切れ・在庫切れというのもありました。

楽天市場 - ポータブルドリンクヒーター＆クーラー電気式ホルダーで温め＆冷却オフィス・インドア・ドライブ・レジャー用MOBICOOL　D03AC/DC

レビューの内容も含めて、「MOBICOOL D03AC/DC」のメリット・デメリットを挙げておきます。

メリット

温・冷ともに自販機並の温度になる（冷やすと水滴がつくくらい、温めると持てないくらい）
高さの異なる缶やペットボトルが利用可能

デメリット

常温から冷やしたり温める場合は時間がかかる
190ml缶は温まりにくい

「ファンの音がうるさい」という評価もありましたが、そうでないという方もいるので製品でばらつきがあるのかもしれません。私の場合、特に気になるレベルではありませんでした。

なお、この製品の温冷機能は「ペルチェ式」というもので、環境に良くないフロンガスが発生することはありません。さらにアルミマグカップが付属でついているので、自分で淹れた珈琲や他の飲料を保温するのにも使えそうです。

以下、製品仕様です（ドリンク・クーラー D03AC/DCより引用）。

機能	冷却・加熱
容量	350mL、500mL缶同様サイズのペットボトル等もOKです。
電源	12VDC
消費電力	最大20W
保冷/保温方式	ペルチェ式
保冷/保温温度	冷却：外気温マイナス最大22℃ 加熱：最大60℃（いずれも外気温による）
付属品	アルミマグカップ、AC/DCアダプター付きAC電源ケーブル、シガーオスプラグ付きDC電源ケーブル、
サイズ	145 x 110 x 130mm
重量	600g

ちなみに到着した品物はすべて英語か他の外国語で書かれていました（もちろん国内で使えます）。

2012年1月現在では、Amazonといくつかのオンラインショップで購入可能です。売り切れているショップも再入荷されるのかもしれませんが、気になる方はお早めにどうぞ。

FacebookのOGPをチェックする方法

Thu, 26 Jan 2012 08:23:45 PST

すでにご存知の方も多いと思いますが、FacebookのOGP（Open Graph Protocol）がウェブサイトのページ上に適正に設定されていることをチェックする方法を紹介します。

１．OGP（Open Graph Protocol）とは

OGPとは、ソーシャルグラフ内で任意のウェブページを表現するための情報を提供する技術で、次のようなmeta要素を指します。

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

OGPを設定すれば、Facebook上で該当のページを紹介するときにページのURLを貼り付けるだけで、次のように適切な内容が反映されます。犬の画像はog:imageに設定した画像、説明はog:descriptionに設定した内容です。

またOGPを設定しておけば、ページに設定した「いいね！」ボタンを押したときの公開範囲が友達のニュースフィードに拡大されるという大きなアドバンテージがあります。

ちなみにOGPはミクシィやグリーでも利用されているようです。それらの設定方法については別途エントリーしようと思います。

２．OGPをチェックする

本題です。OGPの設定はページごとに手作業で設定するのではなく、Movable TypeやWordPressなどのCMSでOGPを自動出力するケースが多いと思います。

<meta property="og:title" content="<$mt:EntryTitle$>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<$mt:EntryPermalink$>" />
<meta property="og:image" content="<mt:EntryAssets lastn="1"><$mt:AssetURL<></mt:EntryAssets>" />

このような場合、きちんとしたOGPが出力されていることを確認する必要があると思います。また、OGPの設定内容（つまりCMSのテンプレートタグ）を変更した場合も確認した方が良いでしょう。

OGPをチェックするには、Facebookの「Debugger」を利用します。

Debugger

「Input URL」に、確認したいページのURLを入力して「デバッグ」をクリック。

次のように青色のメッセージだけが表示されればOKです。「Object Properties」にOGPの取得内容が表示されます。

プロパティの設定が不足している場合などは次のような警告が表示されます。

致命的な問題がある場合は次のようなエラーが表示されます。ちなみにこのエラー原因は、og:urlの内容が存在しないURLを設定したためです。

３．その他

Debuggerではmeta要素部分のみのチェックのようですが、html要素にも次のような設定が必要となりますので、忘れないようにしましょう。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#">

小粋空間

Excelの行・列の表示・非表示を切り替える

１．「表示しない」メニューを利用する

２．「グループ化」する

複数のWordPressをまとめて管理できる「ManageWP」

１．サインアップ

２．ウェブサイトの追加

３．記事の一括投稿

４．プラグインの一括有効化

５．プラグインの一括インストール

６．ユーザーの一括管理

７．バックアップ

８．SEOチェック

９．費用・支払い

Movable Typeの一覧画面にリストアクションを追加する

１．プラグインのリストアクションを追加する

２．コア機能としてリストアクションを追加する

３．注意事項

Androidで全角の英数文字や記号を入力する

TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」

１．サンプル

２．プラグインの機能

３．プラグインのダウンロード

４．プラグインのインストール

５．注意事項

６．参考サイト

リロードしたときにjQueryでページの先頭にスクロールさせる方法

１．JavaScriptのscrollTo()を使ったスクロール

２．jQueryのscrollTop()を使ったスクロール

３．jQueryのanimate()を使ったスクロール

クロスバイク用のフロアポンプ（空気入れ）

１．通常の空気入れでは入らない

２．乗るときに空気圧を常に最適にしておいた方がいい

３．シマノプロ フロアポンプ コンペティション

デザインの学校 これからはじめるIllustrator&Photoshopの本

フォームに設置した複数のsubmitボタン（送信ボタン）をjQueryで制御する

１．用途

２．1つのフォームに同じ動作を行う送信ボタンを複数設置する

２．1つのフォームに異なる動作を行う送信ボタンを設置する

Movable Typeのプラグインをまとめて有効・無効にできる「MultiPluginSwitcherプラグイン」

１．背景

２．機能

３．プラグインのダウンロード・インストール

４．注意事項

インストール不要なスクリーンキャスト（動画キャプチャ）サービス「Screencast-O-Matic」

１．録画の準備

２．録画

３．プレビュー

４．YouTubeへのアップロード

５．録画内容の消去

６．Javaのインストール

HTML5のWebsocketを使ってチャットする

１．サンプル動画

２．サンプルコード

３．サーバへのデータ送信方法

４．クライアントへの送信方法

Movable Type 5でお気に入りリストが作れる「Linklistプラグイン」バージョンアップ

１．機能

２．修正点

sort_byモディファイア

sort_orderモディファイア

モディファイアの設定サンプル

３．プラグインのダウンロード

自販機レベルまで温める／冷やすことができる1本用ドリンク・クーラー＆ヒーター「MOBICOOL D03AC/DC」

FacebookのOGPをチェックする方法

１．OGP（Open Graph Protocol）とは

２．OGPをチェックする

３．その他

３．シマノプロフロアポンプコンペティション

デザインの学校これからはじめるIllustrator&Photoshopの本