CMS（WordPress）などの技術ブログ

Web画面にショートカットキーを実装する方法をご紹介。
取り立てて目新しい話では無いですが、ショートカットキーを実装する機会があったのでメモしておきます。
ショートカットキーを取り入れたい方はご参考ください。

ちなみにサンプルコードはjQueryを使った書き方をしていますが、両方ともjQueryは不要です。
ご自身の環境によって読み替えて下さいね。

1. JavaScriptで一から書く方法

ちょっと追加したいだけ、であれば自分で書くのが早いです。
Ctrlボタンとかと合わせて複合キーによるショートカットを使いたい場合は、後述のプラグインを使ったほうが良いです。

サンプルの説明
「q」のキーを押したら「#shortcut_button」というidのHTML要素をクリックするイベントを発生させます。
ショートカットキーを追加したい場合は、case文を追加していけばOKです。

$(document).keydown(function(e) {

	switch (e.keyCode) {

		case 76:
			// Key: l
			$("#shortcut_button").click();
			break;
	}

});

この方法の場合、キーコードを数値で指定する必要があります。
キーコードを手っ取り早く知るには、What The Key Code?というサイトが便利。
何かキーを押すと、画面にキーコードが表示されます。


2.JavaScriptのプラグインを使う方法

shortcut.jsを使うと複合キーによるショートカットも簡単に実装できます。

使い方は簡単。

まずプラグインを読み込みます。

<script type="text/javascript" src="/js/shortcut.js"></script>

あとはJavaScriptで下記のように記述するだけ。
これで「Ctrl+Enter」をクリックするショートカットキーが作れます。

$(function() {

	shortcut.add("Ctrl+Enter",function() {
		$("#button").click();
	});
	
});

MOUSETRAPというプラグインもなかなか良さ気です。
こちらは自分で試してないので、使えるかどうかは不明ですが、一応メモしておきます。

ブログチェックや情報収集にRSSを使用している方も多いと思いますが、
ニュース系の記事はRSS配信されているところは少ないです。

RSSが配信されていても、タイトルだけの配信だけだったりするので、いちいちRSSリーダーからサイトを確認しなければならず、結構面倒です。

そういう訳でニュース系をRSSで見るのは諦めよう、と随分前に判断して放置していたのですが、
ニュースの本文を含むRSSって本当に無いのかを調べてみました。

すると、Google内にこのようなリンク集を発見！
http://support.google.com/news/bin/answer.py?hl=ja&answer=59255

早速「トップ ニュース」のRSSリンクをクリックしましたが、リダイレクトされて通常のGoogleニュースが表示される、、、
一応GooogleReaderでもこのURLを登録してみましたが、RSSは取得できないと怒られる。

多分このようなページがある、という事はRSS自体はあるのだろうと予測。
そこでURLを色々いじってみたところ、うまく表示されました。


↓これがGoogleのページで紹介されている不完全なRSSリンク
http://news.google.com/news?ned=jp&topic=h&output=rss

↓こちらが修正後のRSSリンク
https://news.google.com/news?hl=ja&ned=us&topic=h&output=rss

※ned=us　→　ned=jp　に修正
※hl=ja　を追加
※nedより先にhlを書く必要があるらしい


なお、冒頭のGoogleのページには「検索結果のフィードの例」というリンクもあり、こちらはうまくRSSが取得できる模様なので、ニュースをキーワードで拾って読みたい方はこんな面倒な事をする必要は無いようですが、一つ落とし穴を発見。

キツネ　だとこのURL。これはうまく表示されます。
http://news.google.com/news?q=%E3%82%AD%E3%83%84%E3%83%8D&output=rss

kitsune　だとこのURLになるはずですが、半角英数だけだとUSサイトを検索しにいく模様。
http://news.google.com/news?q=kitsune&output=rss

先ほどのトップニュースの技を応用。これだときちんと日本語のニュースを拾ってくれます。
https://news.google.com/news/feeds?hl=ja&ned=us&q=kitsune&output=rss


ややこしくてちょっと疲れましたが、長年の疑問が晴れて少しすっきりしました。
お困りの方は是非お試し下さい。

WordPressのトップページのテンプレートファイルは home.php、index.php　あたりを使用する場合が多いと思います。

その場合、header.phpでトップページ用の条件分岐をする必要が出てきます。
（もちろん、必要ない場合もあります）
この条件分岐のタグはどれが適しているのか、という点について改めて検証をしてみました。

トップページ（フロントページ）の条件分岐に使えるテンプレートタグ

is_home()

is_front_page()

is_page()

何もカスタマイズをしていない場合、WordPressのトップページ独自のコンテンツは管理画面側で管理できませんが、固定ページをトップページ（フロントページ）として割り当てる事が可能です。


フロントページの変更方法

管理画面 -> 設定 -> 表示設定 -> フロントページの表示　でトップページにしたい固定ページを選択すればOK。
※固定ページが1つも無い場合は「フロントページの表示」が表示されないのでご注意を。


条件分岐タグの検証結果

さて、本題に戻ります。
フロントページをデフォルト設定の場合、固定ページを設定した場合で、条件分岐タグはどのような結果を返すのかを検証しました。
結果は下記の通り。

テンプレートタグ	フロントページ設定無し	フロントページとして固定ページを設定
is_home()	true	false
is_front_page()	true	true
is_page()	false	true

is_front_page() が万能です。フロントページの条件分岐にはやはり is_front_page() が良いですね。
しかし、is_home() にもメリットがあります。home.php というテンプレートファイルとネーミングが揃っていてわかりやすいです。
ケースバイケースでご利用下さいませ。

WordPressをカスタマイズすればするほど、管理画面が使いにくくなっていきます。
特にそう思う時は、投稿や固定ページのタイトル、本文、スラッグ、カスタムフィールドなどにプログラム的な意味を持たせている場合。

元々ブログシステムなので、最低限の項目しか表示されないのは当然といえば当然です。
しかしそこはWordPress、見やすくカスタマイズも可能です。

どんな案件でもよく使うのは「固定ページのスラッグを固定ページ一覧に表示」する事。
固定ページはスラッグをURLとして表示するケースが多く、この項目こそ管理画面に必要だと思います。


カスタマイズ方法

下のコードをfunctions.phpに追記するだけ。

function add_page_columns_name($columns) {
	$columns['slug'] = "スラッグ";
	return $columns;
}
function add_page_column($column_name, $post_id) {
	if( $column_name == 'slug' ) {
		$post = get_post($post_id);
		$slug = $post->post_name;
		echo attribute_escape($slug);
	}
}
add_filter( 'manage_pages_columns', 'add_page_columns_name');
add_action( 'manage_pages_custom_column', 'add_page_column', 10, 2);

functions.phpって何？という方もいると思いますが、その辺りの話はまた別の機会に記事を書きます。

これ、ちょっとした事ですが、とても効く技です。
URLで固定ページを選べるようになるので、
開発者だけでなく、クライアントさんにとっても便利なカスタマイズですよ。

LinuxのコマンドはWindowsとは比べ物にならない程便利なものが揃っています。

これがWindowsで使えたら、、、と思うこともしばしば。
今回はLinuxの便利コマンドの1つである「wget」をWindowsで使う方法についてご紹介します。


1) 「WGET for Windows」のダウンロードページにアクセス

ダウンロード先
WGET for Windows
http://users.ugent.be/~bpuype/wget/


2) 「wget.exe」というリンク先をクリック（又は右クリックで保存）

↓このリンクです


3) コマンドプロンプトから「wget URL」の書式で実行するだけ

ファイルはカレントディレクトリにダウンロードされます


4) どこからでも使いたい場合はPATHを通しておくと便利です

※Windowsの環境変数 > PATH　に「wget.exe」のあるフォルダを追加します。
　PATHは設定を誤るとWindowsが起動しなくなる場合もあるので、
　意味がわからない場合は、この設定はやらない方が無難です。