Almondlab

ブログのRSSから広告をカットする方法。

2011.03.26 / Notes

RSS
Tool

アメーバなど無料ブログのRSSフィードをWebサイトで掲載したい場合、よく「PR」の広告文が含まれてしまいます。
この広告をカットして掲載するには「Yahoo! Pipes」を使うと簡単に行えます。

Yahoo! Pipiesのトップページ右上にある検索フィールドから、例えば「ameba」と入力して検索すると、アメーバブログの広告をカットするための項目がたくさん表示されます。
このうちどれか一つを選んで、表示される「RSS」フォームにブログのRSSアドレスを入力し「Run Pipe」ボタンを押します。
しばらくすると、PipeされたRSS項目が「Get as RSS」として表示されます。
このリンクをWebサイトで登録すれば、広告をカットされたRSSが表示できます。

Yahoo! Pipes

CKEditorのスマイリー画像を追加する方法。

2011.03.20 / Notes

CMS
Drupal

ブログやCMSなどでWYSIWYGエディタはよく利用されていますが、オープンソースのCMSであるdrupalでも、モジュールとしてCKEditorを利用することができます。drupalにはいくつかのWYSIWYGエディタをモジュールとして利用できますが、自分的にはCKEditorが一番でしっくりきます。

CKEditorには機能の一部として、スマイリーアイコン画像を本文中に使うことができますが、標準のアイコンは種類が少なく、絵柄も日本向けではないので、あまり実用性はないように思います。

このスマイリーアイコンをカスタムで追加するには、下記のようにアイコン画像ファイルを指定のフォルダに追加し、ソースコードに画像のファイル名を記述することで、アイコン画像を追加することができます。

追加するアイコンの画像ファイルは、下記のフォルダに格納します。
ckeditor/plugins/smiley/images

追加した画像ファイルをCKEditorに登録するために、次の2カ所に記述をします。いずれも配列として続けて追加します。
ckeditor/_source/plugins/smiley/plugin.js

CKEDITOR.config.smiley_images = [
	'regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif',
	'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif',
	'devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif',
	'broken_heart.gif','kiss.gif','envelope.gif'];

CKEDITOR.config.smiley_images = [

'regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif',

'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif',

'devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif',

'broken_heart.gif','kiss.gif','envelope.gif'];

ckeditor/ckeditor.js

i.smiley_images=['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif','embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif','test.gif'];

i.smiley_images=['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif','embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif','test.gif'];

以上でCKEditorのスマイリーアイコンに、カスタムの画像を追加することができます。

また必須ではないですが、画像のalt属性、title属性として利用するための、説明文も追加することもできます。
ckeditor/_source/plugins/smiley/plugin.js

CKEDITOR.config.smiley_descriptions =
	[
		'smiley', 'sad', 'wink', 'laugh', 'frown', 'cheeky', 'blush', 'surprise',
		'indecision', 'angry', 'angle', 'cool', 'devil', 'crying', 'enlightened', 'no',
		'yes', 'heart', 'broken heart', 'kiss', 'mail'
	];

CKEDITOR.config.smiley_descriptions =

[

'smiley', 'sad', 'wink', 'laugh', 'frown', 'cheeky', 'blush', 'surprise',

'indecision', 'angry', 'angle', 'cool', 'devil', 'crying', 'enlightened', 'no',

'yes', 'heart', 'broken heart', 'kiss', 'mail'

];

ckeditor/ckeditor.js

i.smiley_descriptions=['smiley','sad','wink','laugh','frown','cheeky','blush','surprise','indecision','angry','angle','cool','devil','crying','enlightened','no','yes','heart','broken heart','kiss','mail']

1	i.smiley_descriptions=['smiley','sad','wink','laugh','frown','cheeky','blush','surprise','indecision','angry','angle','cool','devil','crying','enlightened','no','yes','heart','broken heart','kiss','mail']

先に追加した画像ファイル名の配列と同じ順番で、説明文を追加します。

CKEditor

jQueryで要素の存在を確認する方法。

2011.03.13 / Notes

jQueryを使って、要素の存在を確認する際のメモです。

$(function() {
	if ($("#target").length > 0) {
		//#targetが存在した場合の処理
	}
});

$(function() {

if ($("#target").length > 0) {

//#targetが存在した場合の処理

}

});

iOSアップデートが完了しないときの対処法。

2011.03.11 / Notes

iPhone

本日iPhoneのiOS4.3が公開されて、早速アップデートを行いました。
はじめにiTunesでアップデータをダウンロードして、引き続きiPhone 4にアップロードが始まります。
しかし、iPhoneスクリーン上のインジケータが途中まで進んだところで何故か止まってしまい、そのまま1時間ほど経過しても完了しません。

やむを得ずiTunesを強制終了して、Mac本体も再起動し、再度アップデートを試してみましたが、同じくアップデートが完了しないまま止まってしまいます。

いろいろ試してみて、最後にダウンロードしたアップデータのファイルをいったん破棄し、再度ダウンロードし直してアップデートを行ってみたら、今度は問題なくアップデートが完了しました。
ちなみにアップデータのファイルは、下記に保存されます。
/Users/ユーザー名/Library/iTunes/iPhone Software Updates/iPhone3,1_4.3_8F190_Restore.ipsw

稀なケースなのかもしれませんが、同じ症状に遭遇した方の参考になれば幸いです。

テキストフィールドの文字数をカウント。

2011.03.05 / Labs

テキストフィールドに入力した文字数を、リアルタイムにカウントするためのスクリプトです。
サンプルはこちら

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	countField("textarea#field");
});

function countField(target) {
	$(target).after("<div class=\"count\"></div>");
	$(target).bind({
		keyup: function() {
			setCounter();
		},
		change: function() {
			setCounter();
		}
	});
	setCounter();

	function setCounter(){
		$("div.count").text("文字数："+$(target).val().length);
	};
}
</script>
<title>Count Field</title>
</head>
<body>



<p>テキストエリアに入力した文字数がカウントされます。</p>
<form>
<textarea id="field" cols="100" rows="10"></textarea>
</form>



</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

$(function() {

countField("textarea#field");

});

function countField(target) {

$(target).after("<div class=\"count\"></div>");

$(target).bind({

keyup: function() {

setCounter();

change: function() {

setCounter();

}

});

setCounter();

function setCounter(){

$("div.count").text("文字数："+$(target).val().length);

};

}

</script>

<title>Count Field</title>

</head>

<body>

<p>テキストエリアに入力した文字数がカウントされます。</p>

<form>

</form>

</body>

</html>

テキストエリア内でキーストロークがあった時、またはテキストエリアの内容が変更されたときに文字数をカウントして、表示を書き換えています。

function countField(target) {
	$(target).after("<div class=\"count\"></div>");
	$(target).bind({
		keyup: function() {
			setCounter();
		},
		change: function() {
			setCounter();
		}
	});
	setCounter();

	function setCounter(){
		$("div.count").text("文字数："+$(target).val().length);
	};
}

function countField(target) {

$(target).after("<div class=\"count\"></div>");

$(target).bind({

keyup: function() {

setCounter();

change: function() {

setCounter();

}

});

setCounter();

function setCounter(){

$("div.count").text("文字数："+$(target).val().length);

};

}