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

Movable Type5.1で管理画面の検索結果にカスタムフィールドを表示する「SearchResultsCFListingプラグイン」

0
0


Movable Type5.1で管理画面の検索結果の表示項目を追加する「SearchResultsCFListingプラグイン」を公開します。

1.機能

管理画面のブログ記事検索結果項目に、カスタムフィールドおよびキーワード・タグを表示します。

プラグイン適用前の検索結果画面
プラグイン適用前の検索結果画面

プラグイン適用後の検索結果画面(タグ・カスタムフィールドを表示)
プラグイン適用後の検索結果画面

このプラグインはMT5.12で動作確認しています。

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

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

SearchResultsCFListing_0_01.zip

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

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

システム管理画面の「ツール」→「プラグイン」をクリックし、プラグイン設定画面で「SearchResultsCFListing~」が表示されればインストール完了です。

プラグイン設定画面

3.プラグインの設定

ブログの「ツール」→「プラグイン」→「SearchResultsCFListing~」→「設定」をクリックして、必要な項目をチェックしてください。

プラグイン設定画面

4.注意事項

カスタムフィールドを表示する場合、登録しているカスタムフィールド(画像/アイテム/オーディオ/ビデオを除く)がすべて表示されます。

また、プラグインを有効にした場合、表示項目が多くなったときに「ブログ記事の編集」というテキストリンクのスタイルが崩れるのを防ぐため、「ブログ記事の編集」のテキストリンクは80px固定表示になります。


誰でも一度は聞いたことがある定番クリスマスソング一覧

0
0


どこかで一度は聞いたことがある、オーソドックスなクリスマスソング、あるいはクリスマスに演奏される作品の定番を集めてみました。

ここに掲載しているもの以外にも色々あるようですが、個人的に聞き覚えてのあるものでまとめてます。また最近の洋楽・邦楽ポップスははずしてます。

演奏を聴く前に、タイトルだけで口ずさめる曲がどのくらいあるか数えてみると面白いと思います。

ジングルベル(Jingle Bells)

1857年に牧師のジェームズ・ロード・ピアポントが、ボストンにある自分の教会のサンクスギビングのお祝いで歌うために作った曲。最初につけられた歌の名前は「One Horse Open Sleigh(1頭立てのそり)」でしたが、クリスマスでも歌われるようになり、タイトルが「ジングルベル」に変わったようです。

赤鼻のトナカイ(Rudolph the Red-Nosed Reindeer)

1939年、シカゴの大手デパート「モンゴメリー・ウォード」がお店に来た子供達に配るために製作した冊子が250万部のベストセラーとなり、そのストーリーを元にジョニー・マークスが「赤鼻のトナカイ」を作曲しました。

ホワイトクリスマス(White Christmas)

1942年の映画「スイング・ホテル(Holiday Inn)」の主題歌として広まったクリスマスソングです。アメリカのアーヴィング・バーリンによる作詞・曲。

そりすべり(Sleigh Ride )

1948年にアメリカの作曲家、ルロイ・アンダーソンが作曲した管弦楽曲。賑やかで楽しい曲ですが演奏の難易度は結構高いです。

クリスマスおめでとう(We Wish You A Merry Christmas)

イギリスの伝統的なクリスマスキャロルの一つで作曲者不詳。

ウィンター・ワンダーランド(Winter Wonderland)

1934年にリリースされたアメリカのポップス。フェリックス・バーナード作曲、リチャード.B.スミス作詞。

サンタが町にやってくる(Santa Claus Is Coming to Town)

1934年11月にエディーカーターのラジオ放送(Eddie Cantor's radio show)で初めて放送されたクリスマスソング。フレッド・クーツ作曲。ネットでは「サンタが町(街)にやってきた」というタイトルでも多くヒットするようです。

サンタクロースがやってくる(Here Comes Santa Clau)

1947年、ジーン・ オートリーとオークリー・ホールドマン共作のクリスマスソング。タイトルが「サンタが町にやってくる」と似ていて紛らわしいです。

ママがサンタにキッスした(I Saw Mommy Kissing Santa Claus)

1950年代前半、アメリカでヒットしたクリスマスソング。ジミー・ボイド作曲。

フロスティ・ザ・スノーマン(Frosty the Snowman)

1950年にリリースされたクリスマスシーズン向けのポップス。スティーブ・ネルソン作曲。日本では同じ曲に別の歌詞をつけた「風も雪もともだちだ」としても知られています。

アヴェ・マリア(Ave Maria)

オーストリアの作曲家、フランツ・シューベルトの最晩年の歌曲の一つで、1825年に作曲されたものです。

アヴェ・マリア(Ave Maria)

1859年、フランスの作曲家であるシャルル・グノーが、バッハの「平均律クラヴィーア曲集 第1巻」の「前奏曲 第1番 ハ長調」に旋律をつけたもので、「グノーのアヴェ・マリア」とも呼ばれています。動画のタイトルは「愛のあいさつ」となっていますが、アップされた方が間違えたようです。

もろびとこぞりて(Joy to the World! the Lord is come)

1719年、アイザック・ワッツ作詞の讃歌。それから100年余りにわたって多くの旋律がつけられましたが、1839年、ローウェル・メイソンが作曲した旋律がこの讃歌のもっともポピュラーなものとなりました。

牧人羊を(The First Noel)

イングランド西部地方に17世紀以前から伝わっている旋律で、ウィリアム・サンディーズが1833年に発表して以来、世界中に広まりました。賛美歌103番。

きよしこの夜(Silent night)

原詞「Stille Nacht」はヨゼフ・モールによってドイツ語で書かれ、フランツ・クサーヴァー・グルーバーによって作曲されました。世界中の300を超える言語に訳されていると言われています。

以上です。タイトルから歌えた曲がいくつあったでしょうか。

Twitter検索結果をリアルタイム表示するjQueryプラグイン「monitter」徹底解説

0
0


Twitterの検索結果をリアルタイム表示するjQueryプラグイン「monitter」を紹介します。スクリーンショットは「Android」の検索結果をリアルタイム表示したものです。

「Android」の検索結果をリアルタイム表示

このプラグインはやや古いもので、現在では公式の検索ウィジェットもありますが、公式のものは日本語の設定が面倒なのとデザインが限られるので、意外にこちらの方が使いやすいかもしれません。

1.機能

Twitterの検索APIとjQueryプラグインを組み合わせてウィジェットをウェブサイトに表示し、ウィジェットに検索結果をリアルタイムで表示します。

ウィジェットは1つのページに複数設置できます。設定方法については4項以降で解説します。

2.公式サイトのデモ

公式サイトでデモを確認できるので、操作方法を紹介します。

公式サイトの「monitter」にアクセスします。

monitter

ページ左上にある「tweets containing」に検索文字列を入力して「Add Column」をクリック。

検索文字列を入力

これで検索結果が表示されていきます。

検索結果

右側に設定・停止・削除用のアイコンが表示されます。

設定・停止・削除用のアイコン

設定画面で言語の設定(ja)もできますがうまく動かないようです。

言語の設定

「Add Column」をクリックすればカラムを複数追加できます。カラム上部をドラッグすれば順番を並べ替えることもできます。

カラムを複数追加

3.サンプル

言語設定を日本にしたサンプルを作ってみました。テキストフィールドに文字を入力すれば検索結果を変更することができます。

Monitter widgetサンプル
Monitter widgetサンプル

スタイルも白背景用に見直して、スクロールバーを表示して過去の履歴を見れるようにしたので、よければCSSファイルももっていってください。

4.ダウンロード

ここからはウェブサイトへのウィジェット設置方法を解説します。

monitter」にアクセスして、右上の「Widgets」をクリック。

monitter

「download」をクリック。

download

ダウンロードしたアーカイブを展開します。実際に利用するのは次の2ファイルです。

  • monitter.min.js
  • monitter.css

この2つのファイルをウェブサイトの任意の位置にアップロードします。

アーカイブにはsamples.htmlがあり、ここにアクセスすればサンプルの表示を確認できます。samples.htmlは同梱されているdemo.cssも呼び出しています。

5.ウィジェットの追加

ウィジェットをウェブサイトに追加するには、以下のコードをページに追加します。

<link rel="stylesheet" href="http://user-domain/monitter.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://user-domain/monitter.min.js"></script>
…中略…
<div class="monitter" title="iPhone" lang="ja"></div>

div要素のclass属性「monitter」は必須で、ここにウィジェットが表示されます。

title属性には検索文字列、lang属性に検索対象の言語を設定します。div要素を複数設定すれば複数のウィジェットを表示できます。

title属性の検索文字列はTwitterの検索API(のSearch Operators)に準じているはずなので、AND検索/OR検索/NOT検索/フレーズ検索/特殊検索が可能と思われます。

検索方法は以下のページが参考になります。

超自己満足プログラミング - Twitter検索APIメモ

6.スタイルの設定

monitter.cssをアップロードしただけの状態(他にCSSの設定がまったくない場合)では実用に耐えられる表示になりません(下)。

download

ということで、文字色は最低限設定してください。

他にスタイルを変更したい場合は、monitor.cssの内容を適宜変更するか、monitor.cssの後方に同じセレクタ・プロパティを追加して上書きしてください。参考までにmonitter.cssのポイントとなる部分にコメントをいれておきます。

.tweet /* ツイート単位の設定 */
{
display: block;
background: #333; /* ツイートコンテンツの背景 */
clear: both;
padding: .6em;
margin: .3em;
overflow: hidden;
}
.tweet imgt /* ツイートアイコンの設定 */
{
float: left;
margin-right: 1em;
border: 2px solid #222;
background: #444;
}
.tweet p.text /* ツイートコンテンツの設定 */
{
margin: 0;
padding: 0;
padding-left: 70px; /* 画像とコンテンツの間隔 */
}
.monitter  /* ウィジェットの設定 */
{
float: left;
width: 280px; /* ウィジェットの幅 */
height: 180px; /* ウィジェットの高さ */
margin: 5px;
border: 4px solid #666;
background: #666; /* ウィジェットの背景 */
overflow:hidden; /* スクロールできるようにするにはここを変更 */
}

7.時間表示の修正

デフォルトのmonitter.min.jsでは、ツイート時間が00分~09分のときに10の位が表示されないので、以下の修正を行うことを推奨します。ファイルが圧縮されているので分かりにくいですが、変更前の文字列で検索して、該当部分をまるっと置き換えてください。

変更前

var thedatestr=thedate.getHours()+':'+thedate.getMinutes();

変更後

var min='00'+thedate.getMinutes();min=min.substr(min.length-2,2);var thedatestr=thedate.getHours()+':'+min;

Movable Typeのテーマにブログ記事を利用できる「EntryImExporterプラグイン」バージョンアップ(カスタムフィールド対応)

0
0


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

1.変更点

カスタムフィールドの定義自体はMTのデフォルト機能でエクスポート・インポートができますが、ブログ記事などに入力したカスタムフィールドデータについてはエクスポート・インポートができませんでした。

今回のバージョンアップで、ブログ記事のエクスポート時にカスタムフィールドデータを含むようにしました。カスタムフィールドはすべての種類に対応しています。

ウェブサイト構築で開発環境から本番環境にブログ記事データを移行する場合などにご利用ください。

2.カスタムフィールドのtheme.yamlでの定義方法

theme.yamlのカスタムフィールドデータは「field.ベースネーム」で定義します。theme.yamlのサンプルは以下の通りです。青色の部分がカスタムフィールドの定義イメージになります。

…前略…
elements: 
  default_entries: 
    component: ~
    data: 
      2010: 
        allow_comments: 1
        allow_pings: 1
        asset_labels: ''
        authored_on: 20100403174432
        category: cat
        convert_breaks: __default__
        created_on: 20110707144724
        excerpt: ~
        field.cfimage: オレンジ
        field.cfselect: 100
        field.cftext: 北海道
        field.cfcehckbox: 0
        field.cfurl: http://user-domain/
        …後略…

手動でtheme.yamlを作成する場合はこのように設定してください。チェックボックスは「0」または「1」、アイテムについては、アイテムの名前を設定すると同時に
「asset_labels:」の項目を追加します。アイテムの設定方法については後述します。

3.カスタムフィールドのデータ移行時の注意

カスタムフィールドを含むブログ記事のエクスポートデータを開発環境から本番環境に移行する場合、カスタムフィールドの定義を事前にインポートしてください。

4.カスタムフィールドのアイテムについて

3項に加え、カスタムフィールドに画像などのアイテムを含む場合、利用するアイテムを事前にインポートしてください。

アイテムのエクスポート・インポートには「AssetExporterプラグイン」で行えます。

インポート済みのアイテムと、ブログ記事のカスタムフィールドで利用するアイテムをひもづけるのは、アイテムのラベル(アイテム編集画面の「名前」)です。テーマ適用時に同じラベル名のアイテムが存在すれば、自動的にプログ記事のカスタムフィールドのアイテムとして登録することができます。

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

アイテム

そしてブログ記事のカスタムフィールドのアイテムに、この3つの画像を登録しています。

ブログ記事のアイテム

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

エクスポート

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

--- 
author_link: ''
class: blog
description: ''
elements: 
  default_entries: 
    component: ~
    data: 
      2010: 
        allow_comments: 1
        allow_pings: 1
        asset_labels: 車,オレンジ,コーヒー
        authored_on: 20100403174432
        category: cat
        convert_breaks: __default__
        created_on: 20110707144724
        excerpt: ~
        field.cfimage1: 車
        field.cfimage2: オレンジ
        field.cfimage3: コーヒー
        …後略…

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

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

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

EntryExporterプラグイン

ブログの6年間のPV推移からわかったこと

0
0


ふと思い立って、Google Analyticsを使ってブログの6年間のPV推移を見てみました。ブログを始めたのは2004年5月ですが、Analyticsを設置したのは2005年11月なので、対象期間は2005年11月から2011年12月になります。

1.ブログ全体のPV推移

まずブログ全体のPV推移です。この期間の総PVは約1500万です。

ブログ全体のPV推移
ブログ全体のPV推移

Analyticsを導入してから徐々にPVが増え、2007年頃(左側のやや出っ張った部分)に日々のPVが9000~10000でピークになりました。がこのあと緩やかにPVが下降してきます。「このまま廃れていくのか…」と思いましたが、最近また以前のPVを取り戻してきています。

右側にある一番突出したPVは、3月11日の東日本大震災のあとに作った「東京電力 計画停電インクリメンタル検索」へのアクセスが急増したためです。そのちょっと右にある出っ張りは、はてなブックマークで急増した「「8.8.8.8,8.8.4.4」より速い「129.250.35.250」」へのアクセスです。

2.トップページのPV推移

面白いと思ったのがトップページのPV推移です。

トップページのPV推移
トップページのPV推移

測定開始当初は平均で1000PV/日だったのが、現在では200PV/日まで下がっています。これは直接トップページにアクセスしてブログをチェックする人が以前の1/5まで減っていることが分かります。実際にはフィードやTwitter、Facebookページなどでブログをチェックしてくれている人がいると思うので、単純に1/5になった訳ではないと思いますが。

3.検索PVの推移

それでは最近のPV増はどこにあるかといえば、検索PVの増加です。

検索PVの推移
検索サマリー

日々のPVがピークのときでも3500程度だった訪問数が、最近では5500に増加しています。検索PV増加の要因は検索キーワードに「Facebook」「jQuery」「Android」といったものが上位にきているからと思われます。

ちなみに最近は「日本一美味しいインスタントラーメン「旭山動物園限定・白クマ塩ラーメン」」へのアクセスがなぜか急増しています。

4.ブログの6年間のPV推移からわかったこと

ということで、安直かつ自明なことであり、まとまりもありませんが、6年間のPV推移からわかったことです。

トップページを直接(日々)チェックする人はますます減少し、今後もフィードやソーシャルネットワークを使って購読するスタイルに移行していく人が増加すると思われます。

フィードや外部サービスで購読している人も、そこから直接パーマリンクにアクセスするので、(企業サイトは話が違うと思いますが)トップページの役割はますます薄れていくと思われます。個人ブログなどは極端な話、ウェブサイト管理者だけがトップページにアクセスするという状況になるかもしれません。

また、ブログへのトラヒックはネット検索とソーシャルネットワーク経由というのが最近の流れですが、トラヒックの流入が「コンテンツ」で分断されているのをひしひしと感じます。たとえば、何らかの要因でブログの「A」という記事のアクセスが急増した場合、そこからブログの関連記事やトップページに流れて全体のアクセス増につながっていくというよりも、それが収束すればブログへのトラヒックは元に戻るという感じです。つまり多くのコンテンツがそれぞれ独立してトラヒックに貢献していく傾向がより強くなるように思います。

そういう意味で、最近思うのはブログの更新頻度です。このブログでは事情がある場合を除き、毎日1エントリーを目標に続けていますが、そうすることでコンテンツの質が落ちるのであれば、数日に1回というペースでよりよいコンテンツを提供した方が、検索やソーシャルネットワークからのトラヒックを考えれば、ブログ全体のPVが向上するのではないかということです。

ニュースサイトなどは日々多くの情報を提供することでアクセスが増加するかもしれませんが、そういうサイトではないので、また違ったアプローチもあるような気がしています。

ちなみに当ブログでは最近ひとつの記事を作るのに、データ収集から記事の推敲まで、少なくとも2時間はかかります。プラグインを公開する場合はコードを作ってから動作確認までの時間も必要です。

平均で15000~20000PV/月になればモチベーションも上がる気がするので、今後はそこに向かって色々と試行錯誤したいと思います。

Movable Typeのテーマ機能を使ってブログ記事・ウェブページを移行する

0
0


Movable Typeのテーマ機能を使ってブログ記事・ウェブページを移行する方法を紹介します。ここでは開発環境のブログから本番環境のブログに移行することを想定します。

1.データ移行イメージ

データ移行手順を図に示します。

データ移行イメージ

①アイテムとカスタムフィールドをテーマとしてエクスポート
②ブログ記事をテーマとしてエクスポート
③アイテムとカスタムフィールドのテーマをインポート
④ブログ記事のテーマをインポート

すべてのデータを1つのテーマとしてエクスポートすることもできますが、アイテムとカスタムフィールドをブログ記事より先に登録する必要があるため、2つのテーマに分けています。

2.利用するプラグイン

以下のプラグインを事前にインストールしてください。

3.移行するデータ

  • ブログ記事またはウェブページ(画像のカスタムフィールドあり)
  • アイテム
  • カスタムフィールド

以下、ブログ記事を移行する手順を解説します。ウェブページの場合は「ブログ記事」の部分を「ウェブページ」に読み替えてください。

4.移行手順①②(開発環境からのエクスポート)

まず、アイテムとカスタムフィールドをエクスポートします。移行したいデータがあるブログ管理画面の「ツール」→「テーマのエクスポート」をクリック。

ブログ管理画面

次の画面で、任意の名前・出力ファイル名を設定します。ここでは名前を「アイテムとカスタムフィールド」、ファイル名を「test1」とします。

テーマのエクスポート

オプションの「アイテム」と「カスタムフィールド」をチェックし、出力形式を選択して「テーマのエクスポート」をクリック。出力形式は同一サーバ内(=同一MT内)での移行であれば「テーマディレクトリへのインストール」、そうでない場合は「zip形式アーカイブでダウンロード」を選択してください。

オプション

エクスポートするデータを絞りたい場合は「アイテム」または「カスタムフィールド」の「詳細」リンクをクリックして、選択画面を表示します。デフォルトは全選択状態になっています。

詳細

続いて、ブログ記事をエクスポートします。テーマのエクスポート画面で、先程と異なる名前・出力ファイル名を設定します。ここでは名前を「ブログ記事」、ファイル名を「test2」とします。

テーマのエクスポート画面

オプションの「ブログ記事」をチェックし、出力形式を選択して「テーマのエクスポート」をクリック。

オプション

ブログ記事についても、エクスポートするデータを絞りたい場合は「ブログ記事」の「詳細」リンクをクリックして、選択画面を表示します。デフォルトは全選択状態になっています。

5.移行手順③④(本番環境へのインポート)

インポート先がエクスポートしたサーバと同一でない場合、zipファイルを展開して、中にあるフォルダ(4項で設定した名前のフォルダ)をインポート先のthemesディレクトリにまるごとアップロードします。

続いてインポートしたいブログの管理画面の「デザイン」→「テーマ」をクリック。

ブログの管理画面

まず、「アイテムとカスタムフィールド」テーマの「適用」をクリックします。

テーマ一覧

続いて「ブログ記事」テーマの「適用」をクリックします。

テーマ一覧

これで再構築すれば本番環境への移行は完了です。以降は後処理なので不要な場合は作業をスキップしてください。

6.テーマの削除

テーマを誤って再適用しないよう、アップロードしたテーマをthemesディレクトリから削除します。管理画面から削除行えないのでFTPツール等で削除してください。

削除すると現在適用しているテーマがない状態になりますが、問題なく動作すると思います。

7.バックアップテンプレートの削除

適用前のテーマにテンプレートが含まれている場合、バックアップテンプレートとして保存されています(運用中のテンプレートはなくなりません)。バックアップされたテンプレートが不要であれば、削除できます。

バックアップを削除したい場合、「デザイン」→「テンプレート」をクリックして、テンプレート一覧画面の右側にある「ショートカット」の「バックアップされたテンプレート」をクリック。

テンプレート一覧画面

不要なテンプレートをチェックして「削除」をクリック。

バックアップテンプレート一覧画面

以上です。

2011年総まとめ:Facebook利用に役立つエントリーBest10

0
0


2011年、当ブログで「いいね!」が多かったFacebook関連エントリーのベスト10+αです。

これからFacebookを始める方も、これらのエントリーにざっと目を通しておけば、Facebookの主な機能と動向が分かるかもしれません。

タイトルをクリックすれば該当記事にジャンプします。

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

2011年9月にフィード機能が搭載されました。フィード機能は友達以外のユーザーの投稿を読んだり、自分の投稿をフィードで友達以外の人に公開することができます。

Facebookフィード購読機能

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

この記事の賞味期限もあと2日となりましたが、Facebookが2012年1月1日に予定している変更点をまとめた開発者向けの記事です。

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

3.Facebookのウォール投稿方法が変更

2011年9月にウォール投稿方法が変更され、そのときに変更内容をまとめたものです。ビギナーの方もこの記事でウォール投稿の機能が確認できると思います。

Facebookのウォール投稿方法が変更

4.1分で分かるFacebookタイムラインの使い方

2011年10月、ユーザーの「プロフィール」ページが新たな「タイムライン」に切り替えが行えるようになり、12月から全てのユーザーが適用できるようになりました。タイムラインはその名の通り、ユーザーがFacebookに投稿したすべての出来事を時系列で表示するものです。

1分で分かるFacebookタイムラインの使い方

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

2011年12月にFacebookページへのIFrameタブ追加方法が変更され、その変更点をまとめた開発者向けの記事です。

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

この変更でIFrameタブ追加手順が結構面倒になってしまったので「FacebookページにIFrameタブを追加するツール」も公開中です。併せてご利用ください。

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

6.Facebookメッセージの「その他」について

見落とされがちな、「メッセージ」の下にある「その他」の紹介です。「メッセージ」と「その他」の違いについても解説しています。

Facebookメッセージの「その他」について

7.Facebookの「いいね」ボタンをブログに設定する

ウェブサイトやブログに「いいね!」ボタン(=この記事の各ランキングに表示しているボタン)を設置する方法です。

Like Button
Like Button

8.Facebookテストユーザー作成ツール

Facebookの各機能を非公開で動作確認するための「テストユーザー」を簡単に作成するツールの紹介です。「Facebookの機能を試してみたいけど、友達に知られたくない」という場合、このテストユーザーを使えば大丈夫です。

現在、公式サイトのアプリのページでテストユーザーを作成できるようになっていますが、テストユーザー同士を友達をする操作などがうまく動作しないケースがあったので、今でもこちらを使うことがあります。

Create and Delete tool for Facebook Test Users
Create and Delete tool for Facebook Test Users

9.Facebookページでノートを利用する

Facebookページの「ノート」の利用方法の解説です。ノートは、ブログのようにちょっとした記事をFacebookページに投稿するときに使うものです。

Facebookページでノートを利用する

10.Facebookアプリ「HTTPS+OAuth2.0」の利用を義務付けへ

Facebookアプリが2011年10月から「HTTPS+OAuth2.0」の利用が義務付けられることになり、その告知エントリーです。

Developer Roadmap Update: Moving to OAuth 2.0 + HTTPS
Facebookアプリ「HTTPS+OAuth2.0」の利用を義務付けへ

11.その他

Facebookに関する記事は上記以外にも数多くエントリーしています。よければご覧ください。

Facebookカテゴリ一覧

また、今年は「Facebookページプロフェッショナルガイド」の執筆に参加させて頂きました。Facebookページについて知りたい方はこちらもぜひご覧ください。

Facebookページ プロフェッショナルガイド
蒲生トシヒロ 竹村詠美 原裕 大元隆志 井出一誠 マクラケン直子 ホシナカズキ 藤本壱 荒木勇次郎 関根元和
毎日コミュニケーションズ

2011年ブログ総括(アクセスの多かったエントリーベスト30など)

0
0


今年も無事に1年が過ぎようとしています。このブログも多くの方々に暖かく見守っていただき、感謝しております。

ということで毎年恒例の振り返り(ブログ関連の活動記録)です。

1.アクセスの多かったエントリーベスト30

Google Analytics の「タイトル別のコンテンツ」より、2011年1月1日から本日までの期間で、アクセスの多かった(トップページ等を除く)エントリーの上位30エントリーを発表します。カッコ内はページビューです。

2011年にエントリーした記事は8つ入っています(★印)。去年もベスト30に入っていた記事はなんと19もあります(●印)。

  1. 「8.8.8.8,8.8.4.4」より速い「129.250.35.250」(52,835)★
  2. リンク画像の枠線を消す(40,569)●
  3. input 要素の disabled 属性と readonly 属性の違い(40,259)●
  4. Windows XP のバックアップ機能(36,965)●
  5. IE6/IE7/IE8/IE9の共存まとめ(32,868)★
  6. Firefox3とFirefox4の共存(23,489)★
  7. IE6/IE7/IE8/IE9のCSSハック(23,475)★
  8. WordPress テーマ(テンプレート)(23,371)●
  9. IE7 の CSS ハック(22,011)●
  10. JavaScript エラーを解消する(21,134)●
  11. Movable Type プラグイン一覧(MT5対応)(20,841)●
  12. Highslide JS でサムネイル画像を拡大表示する(20,752)●
  13. Google マップの埋め込み HTML でふきだしを消す方法(新)(20,327)●
  14. Excel(エクセル)の文字入力で表示が「#######」となる問題(20,071)●
  15. jQuery UI Tabsを使ってタブを実装する(20,001)★
  16. PowerPoint でスライドごとにマスタを切り替える方法(19,902)●
  17. 画像を鮮明に拡大するフリーソフト「SmillaEnlarger」の使い方(17,349)
  18. WordPress テーマ(テンプレート)・3カラム版(17,156)●
  19. Facebookのウォール投稿方法が変更(16,926)
  20. CSS の after 擬似要素で回り込みを解除する(16,866)●
  21. FacebookページにブログのRSSフィードを表示する(16,475)★
  22. docomoのスマートフォンを徹底的に安く利用する(16,176)★
  23. Facebookの「いいね」ボタンをブログに設定する(14,826)
  24. RSS Feed(フィード)を表示する(13,842)●
  25. Movable Type(MT)テンプレート(13,668)●
  26. Windows XP エクスプローラの検索機能でファイルが検索されない問題(13,392)●
  27. Android端末のスクリーンショットを撮る方法(Windows)(13,136)★
  28. アメブロ スキン(アメーバブログ スキン)(12,837)●
  29. WordPress における日付/時間の表示とフォーマット変更方法(12,793)●
  30. ファイルの文字コードを簡単に変更する方法(12,384)●

要するに、●印のものは順位の変動は多少あるものの、検索でヒットする定番記事です。印が何もついていない17位と23位は昨年の後半にエントリーしたものです。もしかしたら★印の分とあわせて次回の定番になるかもしれません。

昨年より良くなっているのはアクセス数で、ベスト30のアクセス数を昨年の記事と比較すると、500614から646696に上昇しています。1記事あたりのアクセスが平均3000~5000程度上がっています。

これは「ブログの6年間のPV推移からわかったこと」で紹介したとおり、今年の8月頃からの検索PVの上昇によるものと思われます。記事へのアクセスのほとんどが検索エンジン経由と仮定して、当ブログでGoogle検索経由のトラヒックが占める割合は変わっていない(80%以上)ので、Googleの検索ヒット率が良くなったように思われます。

2.2011年に執筆した書籍

昨年に引き続き、今年もテクニカルライターの仕事をさせて頂きました。執筆した書籍は「Movable Type 5.1 プロの現場の仕事術」と「Facebookプロフェッショナルガイド」の2冊です。

Movable Type 5.1 プロの現場の仕事術
蒲生 トシヒロ 藤本 壱 西畑 一馬 柳 泰久 伊藤 のりゆき 金子 順 高橋 真弓 天野 卓 奥脇 知宏 荒木 勇次郎
毎日コミュニケーションズ
Facebookページ プロフェッショナルガイド
蒲生トシヒロ 竹村詠美 原裕 大元隆志 井出一誠 マクラケン直子 ホシナカズキ 藤本壱 荒木勇次郎 関根元和
毎日コミュニケーションズ

3.登録中のサービス

2011年に登録または登録中のサービスです。フォロー等ご自由にどうぞ。

Google+/LinkdInも一応登録しています。

4.Google PageRank

当ブログのGoogle PageRankは5を継続中です。最近重要視されてない項目ですが一応掲載しておきます。

ということで、良いお年をお迎えください。


Facebook Platform SDKについて

0
0


Facebookの開発者ブログでPlatform SDKについて告知がありましたので、本エントリーで情報展開します。

Facebook Platform SDK Support
Facebook Platform SDK Support

1.SDKの種類とソース・ドキュメント

Facebookで現在サポートしているSDKの種類と、それぞれのソース・ドキュメントのURLは次の通りです。JavaScriptとPHPのgithubリポジトリはURLが変更になっているようなので注意が必要です。

JavaScript SDK

PHP SDK

iOS SDK

Android SDK

2.バグについて

バグや問題の報告には「バグツール」を使ってください、とアナウンスされています。

Bugs Tool(要ログイン)
バグツール

3.非推奨APIのSDK

以下のSDKは非推奨です。

  • Python SDK: 2012年4月1日にGitHubのリポジトリが非公開になる予定です。
  • C# SDK: 2012年4月1日にGitHubのリポジトリが非公開になる予定です。
  • Facebook iPhone SDK: iOS SDKと置き換えられます。リポジトリはすでに非公開です。

東京スカイツリー

0
0


以前から間近で見たいと思っていた東京スカイツリーに、クロスバイクに乗って行ってきました。自宅から1時間余りで着き、スカイツリーの周りには見物客が大勢いました。

写真は南側のほぼ真下から見上げたところです。リアルで間近から見ると圧巻でした。たいした写真ではありませんが、クリックして拡大するとかなり迫力あると思います。

東京スカイツリー

どの位高いのかうまく説明できませんが、真下から見上げると近くのビルが視界の上側に入ってくる感じです。

真下から見上げたところ2

以前、NHKでスカイツリー建設の特集をやっていて、鉄骨の部分はすべてひとつひとつ形が違うもので組み立てているそうです。また一番上(634m部分)の中心誤差は2cm以下になってないといけないようで、測定時はたしか8mmだったと思います。

骨組み

根元の部分はこのようになってます。

根元の部分

周辺の商業施設もいい感じで出来上がりつつあります。

周辺の商業施設

奥に見えるビルもそれほど低くないのですが、スカイツリーは半端ない高さです。

周辺の商業施設との比較

スカイツリーのオープンは2012年5月です。オープンするとかなり混雑が予想されます。「中に入って昇りたい」という人は別として、外観を見学に行くのは今のうちがいいかもしれません。電車で行く場合、東武伊勢崎線業平橋(なりひらばし)が最寄駅です。

フレームにおさまりきらないスカイツリーをバックに、まだ紹介していないマイ自転車も撮りました。

クロスバイク

ブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法

0
0


ブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法です。ここではCSSを使った方法を紹介します。

動作は主要ブラウザ(IE/FF/Chrome/Safari/Opera)の現時点での最新版で確認しています。

動作確認は以下のサンプルをご利用ください。

サンプル
サンプル

1.ウィンドウの高さに合わせて画像を拡大・縮小する

ウィンドウの高さにあわせて画像を拡大・縮小するには、次のようにします。

HTML

<div id="box">
  <img src="画像のURL" alt="coffee" />
</div>

CSS

#box {
  height: 20%;
}
#box img {
  height: 100%;
}

img要素を括ったdiv要素にheightプロパティを設定し、画像の高さを%で指定します。また、img要素に「height:100%」を設定します。

2.ウィンドウの幅に合わせて画像を拡大・縮小する

ウィンドウの幅にあわせて画像を拡大・縮小するには、次のようにします。

HTML

<div id="box">
  <img src="画像のURL" alt="coffee" />
</div>

CSS

#box {
  width: 20%;
}
#box img {
  width: 100%;
}

img要素を括ったdiv要素にwidthプロパティを設定し、画像の幅を%で指定します。また、img要素に「width:100%」を設定します。

3.画像の拡大・縮小サイズを制限する

ウィンドウの高さにあわせて画像の拡大・縮小サイズを制限するには、div要素にmax-heightプロパティ、min-heightプロパティを設定します。

#box {
  height: 20%;
  max-height: 256px;
  min-height: 10px;
}

ウィンドウの幅にあわせて画像の拡大・縮小サイズを制限するには、div要素にmax-widthプロパティ、min-widthプロパティを設定します。

#box {
  width: 20%;
  max-width: 256px;
  min-width: 10px;
}

以上です。このテクニックはFirefoxのホームページを参考にしています。

2011年作成のMovable Type(MT)プラグイン一覧

0
0


2011年に当ブログで公開したMovable Typeプラグイン一覧です。

用途別+アルファベット順に並べています。2011年に作成したプラグインは合計36と、過去最多となりました。

1.一覧画面関連のプラグイン

AddCFQuickFilterプラグイン

ブログ記事一覧などのリスト画面をカスタムフィールドの値で絞り込めるようにします。MT5.0x専用です。ListingCustomFieldプラグインと組み合わせれば強力です。

AddCFQuickFilterプラグイン

AssetFolderViewerプラグイン

アイテム一覧にフォルダを表示します。MT5.0x専用です。

AssetFolderViewerプラグイン

EntryAssetListingプラグイン

記事一覧画面にアイテムを表示します。MT5.1x専用です。

EntryAssetListingプラグイン

LimitPerPageChangerプラグイン

管理画面の一覧表示で任意の表示件数を指定できるようにします。MT5.0x専用です。

プラグイン適用後(「表示数」に任意の数値を入力可能)
LimitPerPageChangerプラグイン

ListingCustomFieldプラグイン

カスタムフィールドで作成したデータを管理画面の一覧に表示します。表示項目はチェックボックスで増減可能です。MT5.0x専用です。

ListingCustomFieldプラグイン

ListingFieldEditorプラグイン

カスタムフィールドを一覧画面で編集できるようにします。MT5.1x専用です。

ListingFieldEditorプラグイン

SearchResultsCFListingプラグイン

管理画面の検索結果一覧の表示項目を追加します。

プラグイン適用後の検索結果画面(タグ・カスタムフィールドを表示)
プラグイン適用後の検索結果画面

2.再構築関連のプラグイン

RebuildByChangeWidgetプラグイン

ウィジェットセット更新時にインデックステンプレートを再構築します。

RebuildByChangeWidgetプラグイン

RebuildByUpdateAssetプラグイン

アイテム更新時に、該当アイテムを利用しているブログ記事ページ・ウェブページを再構築します。MT5.x用です。

RebuildEntryByIdプラグイン

ブログ記事保存時に別のブログ記事を再構築します。

RebuildEntryByIdプラグイン

3.アイテム関連のプラグイン

DeleteAssetWithDeleteCFAssetプラグイン

アイテムのカスタムフィールド削除に連動して、ウェブページやブログ記事の「関連アイテム」も同時に削除します。

カスタムフィールドの「画像を削除する」をクリックすると
カスタムフィールド

該当の画像をブログ記事アイテムから削除
ブログ記事アイテム

ImageSizeModifierプラグイン

携帯サイト向けに画像を縮小します。MT4.x/MT5.0x/MT5.1xに対応します。

RevisableAssetプラグイン

ブログ記事・ウェブページに関連づけたアイテムをリビジョン対象にできるようにします。

RevisableAssetプラグイン

UploadImageResizerプラグイン

画像アップロード時にリサイズを可能にします。

UploadImageResizerプラグイン

4.カテゴリ関連のプラグイン

AllCategorySelectorプラグイン

記事編集画面でカテゴリを一括選択できるようにします。

AllCategorySelectorプラグイン

CategorySelectorFilterプラグイン

選択できるカテゴリを限定します。

選択後の状態(選択したカテゴリ以外のカテゴリのチェックボックスはdisable)
CategorySelectorFilterプラグイン

ParentCategorySelectorプラグイン

記事編集画面で親カテゴリを一括選択できるようにします。

ParentCategorySelectorプラグイン

5.コメント関連のプラグイン

ApproveCommentPermissionプラグイン

「ユーザー」のロールにコメント公開権限を与えることができます。

プラグイン適用後(「公開」ボタンを表示)
ApproveCommentPermissionプラグイン

CommentEmailByteChangerプラグイン

投稿コメントのメールアドレスを半角に変換します。

投稿時のメールアドレス(全角)
投稿時のメールアドレス(全角)

投稿後のメールアドレス(半角に変換)
投稿後のメールアドレス(半角)

CustomizedCommentfilterプラグイン

指定文字列を含むコメントを受け付けません。

CustomizedCommentfilterプラグイン

6.記事編集画面関連のプラグイン

BodyFieldCustomizerプラグイン

記事作成編集画面の本文・追記フィールドの動作をカスタマイズできるようにします。MT5.1x専用です。

プラグイン適用後かつ本文・追記フィールドを非表示にしたところ
BodyFieldCustomizerプラグイン

BodyFieldEraserプラグイン

記事作成編集画面の本文・追記フィールドを非表示にします。MT5.0x専用です。

BodyFieldEraserプラグイン

PublishButtonChangerプラグイン

Movable Type 5.1のブログ記事投稿画面・ウェブページ作成画面の公開ボタンの動作を変更します。例えば記事公開時に確認ダイアログを表示します。

PublishButtonChangerプラグイン

TextareaTabEnablerプラグイン

テンプレート編集画面でタブ文字が入力できるようにします。

タブ文字挿入後のカーソル位置
TextareaTabEnablerプラグイン

7.その他管理画面関連のプラグイン

AssociationBlogDiscriminatorプラグイン

ブログ権限付与時に親ウェブサイト名を表示します。

AssociationBlogDiscriminatorプラグイン

CustomFieldDataCheckerプラグイン

カスタムフィールドで入力したデータの重複チェックを行えるようにします。

CustomFieldDataCheckerプラグイン

EmulateIEプラグイン

IE9でMT4/MT5.0x/MT5.1xの管理画面を操作できるようにします。

EntryExporterプラグイン

テーマ機能を使って、ブログ記事(アイテム・カスタムフィールド含む)のインポート・エクスポートを行えるようにします。

EntryExporterプラグイン

Linklistプラグイン

お気に入りリストが作れるプラグインです。

Linklistプラグイン

ReturnArgsChangerプラグイン

ブログ記事・ウェブページ削除後の遷移画面を指定できます。本番環境でいわゆる「ゴミ」を残したくない場合などに利用できます。

ReturnArgsChangerプラグイン

RevisionRemoverプラグイン

記事更新履歴をクリアします。

RevisionRemoverプラグイン

UserEmailCheckerプラグイン

管理画面からのユーザー登録時やコミュニティ機能を使ったユーザー登録時に、同一メールアドレスのユーザー有無をチェックします。

UserEmailCheckerプラグイン

8.拡張テンプレートタグ

CommentAuthorIdentityプラグイン

MTCommentAuthorIdentityタグ(認証サービスに登録しているプロフィール・ページへのリンクを表示する)の改良版プラグインです。

CurrentStyleプラグイン

テンプレートに適用しているスタイルとレイアウトを表示するためのMTCurrentStyleタグとMTCurrentLayoutタグを提供します。

EntryAuthorDataプラグイン

ブログ記事投稿ユーザーの情報を出力するためのMTEntryAuthorDataブロックタグを提供します。

MondayCalendarプラグイン

カレンダーを月曜日始まりにするためのMTMondayCalendarブロックタグを提供します。

MondayCalendarプラグイン

Facebook「シェア」の使い方徹底解説

0
0


Facebookのニュースフィードやタイムラインに表示されている「シェア」の使い方を詳しく解説します。

1.基本

まず基本情報として「シェア」というリンクがどこに表示されているか、下のスクリーンショットでご確認ください。

タイムラインに表示されている「シェア」
シェア

ニュースフィードに表示されている「シェア」
シェア

現在、Facebookで非推奨となっている「シェア」ボタンのことではありません。

Facebook Share(非推奨)
Facebook Share

以下、この「シェア」リンクを使った操作方法を詳しく解説します。「シェア」の機能や「シェア」と「いいね!」との違いなどについては、他のサイトで良記事が公開されているので、この記事の9項にあるリンクから辿ってください。

2.登場人物

動作確認はいつもの通り、テストユーザーを使っています。

説明で登場する人物は以下です。

  • Davidさん:ウォールにネタを投稿する人
  • Karenさん:Davidさんの投稿をシェアする人
  • Bobさん:シェアされた投稿を読む人

Davidさんが「おいしいラーメン屋がある」という投稿をし、それを読んだKarenさんがその投稿をシェアします。そして、Bobさんがシェアされた投稿を読むという図式です。

シェアの図式

3.Davidさんの投稿

Davidさんが自分のウォールに次のような投稿をします。

ニュースフィード

4.Karenさんによるシェア

KarenさんはDavidさんの投稿をシェアしようと思い、「シェア」をクリックします。

「シェア」をクリック

ダイアログが開くので、テキストエリアにシェアするときのメッセージを入力します。

メッセージを入力

「シェア」のところが「自分のウォール」になっていれば、自分のウォールに投稿されます。

自分のウォール

「友達のウォール」を選択することもできます。「友達のウォール」を選択した場合、投稿したい友達の名前を入力します。

友達のウォール

例えば、Karenの友達のBobを選択することもできます。友達の名前はインクリメンタル検索で表示されます。また「グループ」の選択やメッセージ送信を行うことも可能です。

友達を選択

公開範囲も設定できます。

公開範囲

すべての設定を行って「近況をシェア」をクリックすれば投稿完了です。

近況をシェア

フォームボタンの表示は、シェアする内容によって「リンクをシェア」「写真をシェア」などに変わります。また、リンクや写真などはニュースフィードからもシェアできるようです。

リンクのシェアの場合
写真をシェア

写真のシェアの場合
リンクをシェア

5.シェアされた投稿

シェアされたKarenさんの投稿はBobさんのニュースフィードに次のように表示されます。

シェアされた投稿

そして、Davidさんの投稿には「シェア1件」というテキストリンクが表示されます。

シェア1件

そのテキストリンクをクリックすると、シェアしてくれた人が分かります。

シェア1件

6.シェアされた投稿をさらにシェアするとどうなるか

シェアされた投稿をさらにシェアすると、どのように表示されるか確認してみましょう。

ここではKarenがシェアした投稿を、Bobがさらにシェアすることにします。

さらにシェア

Bobがシェアした投稿です。シェア元のKarenの名前は消えています。

シェアされた投稿

ただし、元ネタを提供したDavidさんのウォール投稿のシェア数は変わりません。

Davidさんのシェア数

その代わり、Karenさんのウォール投稿のシェア数が上がっていました。6つ手前の画像と比べてみてください。

Karenさんの投稿のシェア数

ちなみに、シェアされたものをシェアするときには、「xxより」という表示と「(削除)」のテキストリンクが表示されるようです。

テキストリンク

「(削除)」のテキストリンクをクリックすると表示が消えます。

テキストリンクをクリック

消した状態で投稿してみましたが、消さない場合との違い(例えばDavidさんにシェアがカウントされる等)はありませんでした。実際のユーザーでは何か違いがあるのかもしれません。ご存知の方、情報お待ちしています。

7.Facebookページの「シェア」

これまではユーザーのニュースフィードを例に解説しましたが、Facebookページでも同じように「シェア」が行えます。

Facebookページでの「シェア」
Facebookページの「シェア」

8.その他

調べてみたところ、タイムライン機能を使っている人の近況(テキストのみ)投稿は、友達のニュースフィードに「シェア」リンクが表示されないようです。その人のタイムラインを見れば「シェア」リンクが表示されます。間違ってたらすいません。

また、Twitter連携アプリでの投稿などでは、「シェア」リンクはニュースフィードにもタイムラインにも表示されないようです。

9.「シェア」の機能や「シェア」と「いいね!」の違い

「シェア」の機能や「シェア」と「いいね!」の違いを知りたい方は、以下の記事をご覧ください。

Movable Typeの再構築コストを下げる「RebuildIndexFilterプラグイン」バージョンアップ

0
0


Movable Typeのインデックステンプレートの再構築コストを削減する「RebuildIndexFilterプラグイン」をバージョンアップしました。

このプラグインは2008年に公開したものです。ということで、このプラグインをご存知ない方のために、改めて紹介も兼ねたいと思います。

1.インデックステンプレートの再構築について

プラグインの機能を説明する前に、Movable Typeのインデックステンプレートの再構築の振舞いについて解説します。

インデックステンプレートは、その公開設定が「スタティック」になっている場合、管理画面からの再構築を除き、次のいずれかのイベントが発生すると、すべて再構築されるようになっています。

  • ブログ記事の投稿・編集
  • ウェブページの作成・編集
  • コメント投稿
  • トラックバック受信

具体例を示します。「クラシックブログ」テーマでは次の6つのインデックステンプレートが登録されています。

  • アーカイブインデックス
  • スタイルシート
  • メインページ
  • JavaScript
  • RSD
  • 最新記事のフィード

この6つのテンプレートの「公開」設定が、次のように「スタティック」になっているとします。

「公開」設定
公開設定

そうすると、再構築時間に差はありますが、6つのインデックステンプレートがすべて再構築対象になります。ファイルの内容に変更がない場合、ファイル自体は出力されませんが、再構築データと出力ファイルの比較処理まで実施されると思います。

つまり、インデックステンプレート再構築の問題点は、「再構築の必要がないテンプレートまで再構築対象になってしまう」ことです。

もうひとつ例をあげると、コメント投稿では「メインページ」テンプレート以外のインデックステンプレートを再構築する必要はないのですが、MTのデフォルト機能ではそういった制御を行っていないので、再構築対象となってしまいます。公開設定を「手動」にすれば再構築対象外にできますが、そうすると必要なイベントで再構築できなくなります。

また、デフォルトで用意されているインデックステンプレート以外に、Googleサイトマップやサイドメニューなど、多くのページをインデックステンプレートで作っていると、さらに再構築対象のインデックステンプレートが増加し、イベントの応答時間に影響します。

ちなみに当サイトでは、図のように多くのインデックステンプレートを登録しており、ブログ記事投稿やコメント投稿でかなりの再構築コストがかかってました。以前、別のサーバを使っていたときは500エラーも発生することがありました。「最近のブログ記事」などのサイドメニュー類は、各ページで表示内容を統一させたいのでインデックステンプレートで生成し、Ajaxで表示させています。

当ブログのインデックステンプレート
インデックステンプレート

インデックステンプレートだけでなく、インデックステンプレートからインクルードしているテンプレートモジュールも当然再構築対象になります。

2.プラグインの機能

このプラグインを適用すれば、イベントごとに再構築対象のインデックステンプレートを指定できるようになります。

当ブログではこのプラグインを導入して、図のような設定を行いました。これによりイベントごとの再構築時間がかなり短縮されました。

インデックステンプレート

プラグインの具体的な機能ですが、インデックステンプレートの再構築トリガを、次の5種類のイベントから選択することができます。

  • ブログ記事の投稿
  • ウェブページの作成
  • コメント投稿
  • トラックバック受信
  • すべて

例えば、フィードなどは「ブログ記事の投稿」のみをトリガに再構築することで、コメント投稿などによる再構築から除外することができます。設定画面は3項をご覧ください。

3.変更点

今回のバージョンアップでMT5.1に対応できるようにしました。画面処理の変更のみです。インデックステンプレートのオプション設定部分に、次のように「再構築イベント」が表示されます。

インデックステンプレートのオプション設定部分
オプション設定部分

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

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

RebuildIndexFilterプラグイン

Movable Typeの記事一覧画面にアイテムを表示する「EntryAssetListingプラグイン」バージョンアップ

0
0


Movable Typeの記事一覧画面にアイテムを表示する「EntryAssetListingプラグイン」に不具合があったため、バージョンアップしました。

このプラグインの機能は、下のスクリーンショットのように、記事一覧画面の右端に「アイテム」を表示します。1つの記事に複数のアイテムがある場合は並べて表示します。

EntryAssetListingプラグインを適用したところ
EntryAssetListingプラグイン

1.修正点

システム管理画面のブログ記事一覧にあるオプションのチェックボックスで「アイテム」をチェックしてもアイテムが表示されず、代わりに、

Can't call method "id" on an undefined value at C:\xampp\htdocs\MT-5.12-ja\plugins\EntryAssetListing\lib/EntryAssetListing/CMS.pm line 91.

というエラーが発生する不具合を修正しました。

エラーが表示されたところ
エラーが表示されたところ

原因は、もともとこのプラグインはブログ・ウェブサイトのブログ記事一覧画面のみを対象にしていたのですが、システム管理画面の表示に関する考慮が不足していたためです。ご迷惑をおかけ致しました。

この修正により、システム管理画面のブログ記事一覧でもアイテムが正常に表示されるようになります。

システム管理画面のブログ記事一覧
システム管理画面のブログ記事一覧

また、システム管理画面のプラグイン設定画面で、システム管理画面のブログ記事一覧のアイテムに関する設定を行えるようにしました。

システム管理画面のプラグイン設定画面
システム管理画面のプラグイン設定画面

ウェブサイト・ブログの設定はこれまで通り、それぞれの管理画面のプラグイン設定で制御できます。

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

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

EntryAssetListingプラグイン

CSS3デザイン プロフェッショナルガイド

0
0


CSS3本の紹介です。以前マイナビ様より献本頂いたものでのすが、当時は執筆やらプラグイン開発やらでばたばたしていて紹介ができておらず、そのままになってしまっていました。遅ればせながら本エントリーで紹介したいと思います。

CSS3デザイン プロフェッショナルガイド
秋葉秀樹 秋葉ちひろ 小山田晃浩 外村和仁 蒲生トシヒロ 宮澤了祐
マイナビ

本書はCSS3をターゲットとしたもので、構成は、CSS3の基本・リファレンス・CSS3ビジュアルサンプルの3つに分かれています。

「CSS3の基本」ではCSS3を使って何ができるか、CSS3を利用する場合の注意点などが紹介されています。「リファレンス」は15のセクションに分かれており、各セクションではCSS3のプロパティについて、サンプルのHTML・CSSおよび表示例つきで詳細に解説されています。

「CSS3ビジュアルサンプル」では、ウェブサイト制作に役立つ、CSS3を使った実践的かつクールなサンプルが掲載されています。サンプルはサポートサイトでも動作を確認できるようになっています。

アルファベットで調べたい場合は、巻末の索引で調べることができます。

以下、目次です。

Chapter1 CSS3の基本
 Section1 CSS3をWebクリエイターが使う意義
 Section2 CSS3で何ができるか
 Section3 CSS3を積極的に利用するために
 Section4 CSS3書き方の基本
Chapter2 CSS3リファレンス
 Section1 Values and Units(プロパティの値の種類、単位の種類)
 Section2 Color(値として利用する色
 Section3 Font(フォント、文字の形)
 Section4 Text(文字列や行の装飾、制御、制限)
 Section5 CSS basic box model(ボックスの大きさ、基本的なレイアウトフロー)
 Section6 Backgrounds and Borders
     Backgrounds(背景色、背景画像とその複数指定)
     Rounded Corners(角丸を適用する)
     Border-Images(枠線に画像を適用する)
     Miscellaneous Effects(背景、ボーダー以外のボックスへの効果)
 Section7 Multi-column Layout(段組とそれに関する設定)
 Section8 Flexible Box Layout(柔軟に制御可能な横並び/縦並びレイアウト)
 Section9 Basic User Interface(ユーザーの動作や入力に関してスタイルを適用)
 Section10 Image Values Gradients(CSSでグラデーションを生成する)
 Section11 Transforms(拡大・回転・ゆがみ・移動など、様々な要素の変形を制御する)
 Section12 Transitions(時間的変化によるアニメーションを設定する)
 Section13 Animations(キーフレームによるアニメーションを設定する)
 Section14 Media Queries(環境に合わせてスタイルを切り替える)
 Section15 Selectors(スタイルを適用するための選択子)
Chapter3 CSS3ビジュアルサンプル
 Section1 ボタン
 Section2 アニメーション
 Section3 レイアウト
 Section4 テーブル
 Section5 ギャラリー
 Section6 フォーム
 Section7 ナビゲーション
Appendix
 Section1 HTML5の基本
 Section2 作業時間を短縮するCSS3ジェネレーター
 Section3 CSS3の学習に役立つWebサイト

ということで、「CSSは知っているけど、これからCSS3について知りたい」という方におすすめの書籍です。

ソーシャルコマース ~業界キーマン12人が語る、ソーシャルメディア時代のショッピングと企業戦略~

0
0


書籍「ソーシャルコマース ~業界キーマン12人が語る、ソーシャルメディア時代のショッピングと企業戦略~」の紹介です。マイナビ様から献本頂きました。ありがとうございました。

Eコマース業界では「ソーシャルコマース(=ソーシャルメディアを利用して商品やサービスの電子商取引を促進すること)」が注目されつつあるようで、海外ではすでにトレンドになっており、日本でも注目され始めているキーワードになっています。

本書は、Facebookを利用したソーシャルコマースである「F-Commerce」を中心に、海外や国内の動向や事例などを紹介しています。個人的に目新しいところでは「O2O(Online to Offline)コマース」やチェックイン(自分の居場所を友達に伝える機能)を使ったソーシャルコマースの拡大や、将来的な技術であるNFC(短距離無線通信規格)の可能性についても触れられています。

紹介されている数多くの事例に触れた感想としては、ネットがFacebook・Twitter・mixiなど、ソーシャルの時代に突入している中、Eコマースも「ソーシャル」がキーワードとなるサービスが確実に拡大・多様化していく予感がしました。

今後、ソーシャルコマースの導入を検討されている企業担当者はもちろん、Eコマース業界の最新動向を知りたい方や、Facebookページの活用方法を知りたい方にもおすすめの1冊です。

以下、目次です。

Chapter1 ソーシャルコマースがもたらす変化
 1-1 ソーシャルメディアとは
 1-2 ソーシャルメディアがビジネスをどう変える?
 1-3 「ソーシャルコマース」は何を変えるか
 1-4 F-Commerceは売れない?
Chapter2 海外ソーシャルコマース最新動向
 2-1 F-Commerce最新動向
 2-2 O2Oコマース海外最新動向
 2-3 注目スタートアップの動向
Chapter3 国内ソーシャルコマース最新動向
 3-1 国内F-Commerce最新動向
 3-2 国内O2Oコマース最新動向
 3-3 国内スタートアップ最新動向
Chapter4 ソーシャルコマース展開にあたってのポイント
 4-1 プラットフォームやモールの動きについて
 4-2 展開の方法
 4-3 取り組む際の心構え
 4-4 海外への展開について
 4-5 効果測定
Chapter5 国内事例紹介&インタビュー
 5-1 BAD LAND
 5-2 RICE FORCE
 5-3 iQON
 5-4 アラタナ・GMOペイメントゲートウェイ
 5-5 リトルムーン
 5-6 漫画全巻ドットコム
Chapter6 プラットフォーム/モール担当者に聞くソーシャルコマース戦略
 6-1 bidders
 6-2 paperboy&co.
 6-3 Yahoo!JAPAN
 6-4 楽天市場
 6-5 mixi

さらに、書籍で触れられている主なサイトのリンクを掲載しておきます。どのサイト(またはアプリ)がどのような役割や効果を表しているかは書籍をご覧いただければと思います。

Windows+Node.js+Socket.IO

0
0


Windowsを使ってNode.js+Socket.IOを試してみました。

Node.js

マシンはWindows VISTAですが、Windows 7でも同じだと思います。以前はCygwinでコンパイルをしないといけなかったようですが、現在はWindows用のexeファイルが提供されていて、かなり簡単に動かすことができるようになっています。

1.Node.jsとは

Node.jsは、サーバサイドJavaScriptの実装の1つで、グーグルが開発したV8 JavaScriptエンジン上で実行します。要するにサーバ側の処理をJavaScriptで書くことができます。

サーバサイドJavaScriptには「CommonJS」という仕様が策定されており、Node.jsはCommonJSに準拠して開発されています。2012/01/10追記:独自仕様もあるようです。

Node.jsの特徴として、非同期処理を行うための「イベントループ」と呼ばれる技術を用います。「イベントループ」というのは「C10K問題(クライアント1万台問題)」で有名になった技術で、大量のクライアントからのリクエストを処理するためのアーキテクチャです。

Node.jsはシングルスレッドなので、イベントループ処理はノンブロッキングI/O(データ送受信(I/O)の完了を待たずに、他の処理を開始する処理方式)で実現します。

つまり、すべての処理をノンブロッキングI/Oにしておかないと、イベントループ処理が止まってしまいます。例えば他の言語でノンブロッキングI/Oを実現するにあたってライブラリを利用する場合、ライブラリでブロックしていないことが要件となりますが、JavaScriptはそもそもブロッキングI/Oをもっていないので、相性が良い(そういうことを心配する必要がない)らしいです。

2.Node.jsのインストール

Node.js公式サイトにある「DOWNLOAD」をクリック。

Node.js公式サイト

「Windows Installer」をクリック。

DOWNLOAD

ダウンロードしたファイルを実行します。「Next」をクリックすればすぐにインストールが開始します。

インストールが開始

インストール中です。

インストール

完了しました。めちゃくちゃあっさりしています。

インストール完了

Node.jsは「C:¥Program Files¥nodejs」というフォルダにインストールされます。実行ファイルは「C:¥Program Files¥nodejs¥node.exe」です。「npm」という、Node.js用のパッケージマネージャも一緒にインストールされており(ネットで調べると以前は別にインストールする必要があったようですが不要)、同じフォルダにある「npm.cmd」が該当します。

3.Node.jsの動作確認

Nodeはコマンドプロンプトから操作します。ということで、コマンドプロンプトを起動します。

まずバージョンを表示する「node --version」を入力してみます。インストール時にパスは通っているはずなので、どのフォルダからでも起動できると思います。

コマンドプロンプト

バージョンが表示されました。「node --help」を入力すれば利用可能なオプションが表示されます。

バージョン表示

パスが通っているかどうかは、「コンピュータ」→右クリックで「プロパティ」→「システムの詳細設定」→「詳細設定」タブ→「環境変数」→「システム環境変数」の「Path」を選択して「編集」をクリックすれば分かります。

パスの確認

Node.jsはV8エンジン上で動いているので、通常の処理もできるようです(というかNode.jsはネットワーク処理に特化したライブラリらしいです)。単に「node」と入力すると「>」というプロンプトが表示されるので、計算などが行えるようです。

コマンドプロンプト

こちらを終了させる場合はCtrl-cを2回行います。

4.ブラウザからNode.jsにアクセスする

ブラウザからNode.jsにアクセスして何かを表示するにはnode起動時にクライアントを通信を行うためのJavaScriptファイルを指定します。クライアントから任意のURL(後述)にアクセスすると、このJavaScriptファイルが動作するという仕組みです。

Node.jsの公式サイトにあるサンプルファイルを用いて、ブラウザからアクセスして「Hello World!」を表示させてみます。次のファイルをexample.jsというファイル名でnodejsフォルダ直下に作成します。

var http = require('http');
 
http.createServer(function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Hello World\n');
}).listen(8124);
 
console.log('Server running at http://127.0.0.1:8124/');

コマンドプロンプトから「node example.js」を入力します。

コマンドプロンプト

「Server running at http://127.0.0.1:8124/」は、console.log()の内容なので、これが表示されていれば正常に動作しています。この状態でブラウザから「http://127.0.0.1:8124/」にアクセスしてみます。

ブラウザからアクセス

おぉ!表示されました。

5.Socket.IOのインストール

Socket.IOはHTML5のWebSocket(クライアント・サーバの双方向通信)を実現するために必要なライブラリのようです。WebSocketで双方向通信を確認したかったのですが、この記事では簡単なサンプル動作にとどまってます。

ネットで調べたところ、Googleの「Socket.IO」というのがみつかったのでこれを利用してみます。「Socket.IO」の「How to use」をクリック。

Socket.IO

ここに以下のようなnpmコマンドが載っていました。

How to use

npm install socket.io

ということで、コマンドプロンプトからこのコマンドを実行します。

コマンドプロンプト

インストールされたようです。

6.Socket.IOのサンプル作成(Node HTTP server)

「How to use」のページに掲載されているサンプルを動かしてみます。

サーバ側のファイルです。app.jsというファイル名でとりあえずnodejsフォルダに作成します。

var app = require('http').createServer(handler)
  , io = require('socket.io').listen(app)
  , fs = require('fs')
 
app.listen(80);
 
function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }
 
    res.writeHead(200);
    res.end(data);
  });
}
 
io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

クライアントが読み込むファイルをindex.htmlというファイル名で、app.jsと同じフォルダに配置します。script要素でsocket.io.jsをインクルードしています。このパスはこのままでOKです。

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>

コマンドプロンプトから「node app.js」を実行してみましたが、「Error: listen EADDRINUSE」というエラーが発生しました。

エラー発生

これは、app.jsで指定しているリスンポートが正しくないためです(ポート80はPC上でXAMPPを起動しているためと思われます)。ということで、app.jsのポートを8124に変更します。

app.listen(8124);

これで再度起動します。多分うまく動作していると思います。

コマンドプロンプト

このサンプルは、ブラウザからアクセスすると真っ白な画面になります。

ブラウザからアクセス

ソースコードはindex.htmlの内容が表示されているので、正常に動作しているようです。

ソースコード

表示されたソースコード上のsocket.io.jsをクリックしたところ、こちらも正常に表示されました。

socket.io.js

とりあえずここまでです。「How to use」のページには他にもサンプルがあるので色々試してみるとよいでしょう。サンプルによっては、次のコマンドを実行する必要があるようです。

npm install socket.io express

HTML5のWebsocketを使って同時接続数をサーバから送信する

0
0


HTML5のWebsocket(Node.js+Socket.IO)を使って、現在の同時接続数をサーバから送信するサンプルを作ってみました。

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

1.サンプル動画

2つのブラウザからそれぞれ「http://127.0.0.1:8124」にアクセスして、そのページの同時接続数を各ブラウザに表示します。接続数の増減によって、ページに接続しているコネクションすべてに、サーバから情報を送信します。操作をしていないブラウザにも即時に接続数が反映されます。

非常にシンプルなものですが動いたときはちょっと感動しました。

2.サンプルコード

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);
 
// カウンタ初期化
var count = 0;
app.listen(8124);
 
app.get('/', function (req, res) {
    res.sendfile(__dirname + '/index.html');
});
 
io.sockets.on('connection', function (socket) {
 
    // 接続時にカウンタのインクリメント
    count++;
 
    // ブロードキャストで送信
    io.sockets.emit('user connected',count);
 
    // 切断
    socket.on('disconnect', function () {
 
        // カウンタのデクリメント
        count--;
 
        // ブロードキャストで送信
        io.sockets.emit('user disconnected',count);
    });
});

index.html(クライアント側のソース)

<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('user connected', function (data) {
      jQuery('span').html(data);
  });
 
  // 切断時の動作
  socket.on('user disconnected', function (data) {
      jQuery('span').html(data);
  });
});
</script>
<div>このページにアクセスしているのは<span></span>人です。</div>

サンプルコードの配置や起動方法については、Windows限定ですが「Windows+Node.js+Socket.IO」を参照してください。

また、このコードを実行する前に、上記記事の最後に掲載している「npm install socket.io express」を実行してください。

3.クライアントへの送信方法

サーバからブロードキャストで送信するには次のように記述するようです。赤色はイベント名で、任意の文字列を記述します。

io.sockets.emit('user connected', count);

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

socket.on('user connected', function (data) {
    // ...
});

サンプルコードはブロードキャストで行ってますが、次のように記述すれば送信先を変更できるようです。

// 自分以外の全員に送る
socket.broadcast.emit('user connected',count);
// 自分だけに送る
socket.emit('user connected', count);

4.参考サイト

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

JavaScriptで現在日時を取得する

0
0


JavaScriptで今日の日付と時刻を取得・表示する方法です。

毎回同じものを作っているような気がするのと、JavaScriptのビギナーの方むけの情報という意味で、このエントリーで動作サンプルを掲載しておきます。

1.現在日時を取得するサンプル

現在日時を取得するサンプルを以下に掲載します。このサンプルをウェブページに丸ごとコピー&ペーストすれば、サンプル下にある「出力結果例」の表示になると思います。

<script type="text/javascript">
var get_current_timestamp = function() {
    var weeks = new Array('日', '月', '火', '水', '木', '金', '土');
    var d = new Date();
 
    // 年月日・曜日・時分秒の取得
    var month  = d.getMonth() + 1;
    var day    = d.getDate();
    var week   = weeks[ d.getDay() ];
    var hour   = d.getHours();
    var minute = d.getMinutes();
    var second = d.getSeconds();
 
    // 1桁を2桁に変換する
    if (month < 10) {month = "0" + month;}
    if (day < 10) {day = "0" + day;}
    if (hour < 10) {hour = "0" + hour;}
    if (minute < 10) {minute = "0" + minute;}
    if (second < 10) {second = "0" + second;}
 
    // 整形して返却
    return d.getFullYear()  + "/" + month + "/" + day + "(" + week + ") " + hour + ":" + minute + ":" + second;
}
 
// 現在の日付・時刻を表示する
document.write(get_current_timestamp());
</script>

出力結果例

2012/01/12(木) 00:03:03

青色部分は現在日時の取得処理を関数にまとめたもので、その下の行にある「document.write( ... );」は、その関数を呼び出して動作を確認するためのものです。

2.別の関数から現在時刻を取得する

別の関数から現在時刻を取得したい場合、たとえばfoo()という関数から取得するには、赤色部分のように記述してください。青色は、1項のサンプルの青色部分が相当します。

<script type="text/javascript">
var get_current_timestamp = function() {
  // 中略
}
function foo() {
    var current = get_current_timestamp();
    // 変数currentを使った処理を記述
}
</script>

3.出力フォーマットを変更する

出力フォーマットを変更するには次の部分を書き換えてください。

return d.getFullYear() + "/" + month + "/" + day + "(" + week + ") " + hour + ":" + minute + ":" + second;

例えば「xxxx年xx月xx日 xx時xx分」にするには、次のように書き換えます。

return d.getFullYear() + "年" + month + "月" + day + "日 " + hour + "時" + minute + "分";

4.月日時分秒を1桁で出力する

月日時分秒の「1」~「9」を1桁で出力したい場合は、次の部分をまるっと削除してください。

// 1桁を2桁に変換する
if (month &lt; 10) {month = "0" + month;}
if (day &lt; 10) {day = "0" + day;}
if (hour &lt; 10) {hour = "0" + hour;}
if (minute &lt; 10) {minute = "0" + minute;}
if (second &lt; 10) {second = "0" + second;}

5.注意事項

get_current_timestamp()は関数リテラルによる定義(var xx = function(){ ... }という形式)のため、関数定義の前にdocument.write()などの処理を記述すると正常に動作しません。

<script type="text/javascript">
document.write(get_current_timestamp()); // これはエラー
var get_current_timestamp = function() {
  // 中略
}
</script>

要するに1項のサンプルや2項のように、get_current_timestamp()の定義の後方に、get_current_timestamp()を呼び出す処理を記述してください。

Viewing all 219 articles
Browse latest View live




Latest Images