almondlab.

Google Mapsで住所、緯度・経度を取得。

almondlab. — Fri, 27 Jan 2012 14:01:28 +0000

Google Maps APIを使って、マーカーの位置から住所、緯度・経度を取得と、住所からマーカーの移動および、緯度・経度の取得するためのコードのメモです。
サンプルはこちら


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Google Map Search</title>
<script type="text/javascript" src="common/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="common/js/functions.js"></script>
<script type="text/javascript">
$(function() {
	setMapSearch({
		container: "map",
		lat: 35.68075,
		lng: 139.76720,
		zoom: 15
	});
});
</script>
</head>
<body>
 
 
 
<div id="map" style="width:500px; height:500px;"></div>
 
 
 
<form>
緯度：<input type="text" id="lat"/><br />
経度：<input type="text" id="lng"/><br />
住所：<input type="text" id="address"/>
<input type="submit" id="search" value="検索"/>
</form>
 
 
 
</body>
</html>

マーカーのドラッグで緯度・経度を書き換えて、ドロップの際に住所を書き換えています。
また住所から検索で、マーカーを移動して、緯度・経度を書き換えています。
JavaScript自体のコードはこちら。

function setMapSearch(params) {
	var geocoder = new google.maps.Geocoder();
	var position = new google.maps.LatLng(params.lat, params.lng);
	var map_options = {
		zoom: params.zoom,
		center: position,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var map = new google.maps.Map(document.getElementById(params.container), map_options);
	var marker = new google.maps.Marker({
		position: position,
		map: map, 
		draggable: true
	});
 
	//マーカーのドラッグ時
	google.maps.event.addListener(marker, "drag", function() { 
		updateLatLng();
	});
 
 
	//マーカーのドロップ時
	google.maps.event.addListener(marker, "dragend", function() {
		var latlng = marker.getPosition();
		geocoder.geocode({latLng:latlng, language:"ja"}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				if (results[0].geometry) {
					updateAddress(results[0].formatted_address);
				}
			}
		});
	});
	updateLatLng();
	setSearch();
 
	//緯度・経度を書き換え
	function updateLatLng() {
		var latlng = marker.getPosition();
		$("input#lat").val(latlng.lat());
		$("input#lng").val(latlng.lng());
	}
 
	//住所を書き換え
	function updateAddress(address) {
		$("input#address").val(address);
	}
 
	//住所から検索して、マップを移動
	function setSearch() {
		$("input#search").click(function() {
			var address = $("input#address").val();
			geocoder.geocode({"address": address}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					map.setCenter(results[0].geometry.location);
					marker.setPosition(results[0].geometry.location);
					updateLatLng();
				}
			});
			return false;
		});
	}
}

Drupal 7のおすすめモジュール。

almondlab. — Sat, 03 Dec 2011 05:23:21 +0000

Drupalでは非常に多くの寄与されたモジュールが存在しますが、初めはどのモジュールを入れたら良いのか迷ってしまいます。

Drupal 7になり、それまでモジュールとして提供されいた主要機能、たとえば「CCK」「ImageCache」などが標準で搭載され、新たに追加するモジュールの数がぐっと減りました。
その上で、これだけは最小限入れておいた方が良いと思うモジュールをいくつか挙げます。

Views	コンテンツの表示方法を柔軟にコントロールすることができます。とても多機能で奥の深いモジュールなので、使い方を覚えるまでが大変ですが、Drupalを利用する上で、最大のアドバンテージになり得ます。具体的な応用例としては、サムネールの一覧表示や、ソート可能なテーブル形式の表示などです。
Chaos tool suite (ctools)	「Views」の利用の際に必須です。管理画面で、モジュールのインターフェイス部分を担っています。
CKEditor	WYSWYGエディタです。同様のエディタはいくつか存在しますが、これが一番使いやすい印象です。 CKEditorを利用するには、モジュールの他に、「CKEditor」本体も組み込む必要があります。「sites/all/modules/ckeditor/ckeditor」のディレクトリの中に本体の「ckeditor」フォルダを入れます。（「ckeditor」フォルダが3つ入れ子になります）
Insert	コンテンツの作成で、画像のアップロードは標準の「Image」で行えますが、その画像を本文内に挿入するには、「Insert」が便利です。アップロードした画像の横にボタンが追加され、テキストエリアのカーソルのある位置に画像を挿入してくれます。また画像スタイル（medium、largeなど）にも対応しています。 CKEditorと組み合わせることで威力を発揮します。
Pathauto	DrupalではURLエイリアスという機能でURLを置き換えることができます。通常「node/1」「node/2」といったデフォルトのURLを「blog/1」「article/2011/12/2」といった具合に、コンテンツと関連性のあるURLに置き換えられます。「Pathauto」では自分で設定したルールに基づいて、自動でURLエイリアスを作成することができます。
Token	「pathauto」の利用の際に必須です。サイト内で扱っている動的なパラメータを利用するためのモジュールです。たとえば投稿者名を、[node:author]と入力することで、実際の名前を表示することができます。ただし利用できる場所は限られてはいます。
Backup and Migrate	データベースのバックアップとリストアができます。公開しているサイトのバックアップはもちろんですが、サイトの制作時に、開発環境のサーバから本サーバへ移すときにも便利です。
Webform	お問い合わせなどのフォームを簡単に作成することができます。フォームの項目も簡単に追加できるので、複雑なアンケートフォームの作成にも便利です。エクセルでの管理用にCSVダウンロードもできます。

SnippetsのExpand Triggerが便利。

almondlab. — Fri, 02 Dec 2011 06:55:05 +0000

Snippetsはコーディングの際によく使うコードの部品を効率よく管理してくれるツールですが、バージョン1.3から省略された文字をタイプすることで、テキストエディッタへダイレクトに入力することができるようになりました。

同様の機能は、TextExpanderといったアプリケーションで実現していましたが、コーディング用アプリケーションというわけではないので、シンタックスのカラーリングができなかったり、コードの管理には不向きです。

Snippetsでこの機能をサポートしてくれたおかげで、TextExpanderに登録していたコードもSnippets内で一つにまとめることができます。
ただ現在のところ、シンプルな機能のみなので、入力完了の際に効果音がなかったり、カーソルの位置を指定できなかったり、TextExpanderと比較すると不便なところもあります。

でも、これまでもSnippetsは着実に機能追加を続けているので、今後に期待がもてそうです。差し当たり、iCloudでの同期を実現してくれると非常にありがたいです。

Snippets (Lucky Ants)

CakePHP 2.0でユーザーのアクセス権限をチェック。

almondlab. — Sat, 08 Oct 2011 08:57:10 +0000

CakePHP 2.0 RC3でブログのサンプル、ACLを設定した後に、各コントローラーでアクセス権限をViewのテンプレートファイル内（View/Posts/index.ctpなど）でチェックするためのコードメモです。

ブログのサンプル、ACLについてはCakePHPマニュアルページの中にあるチュートリアルを参考に設定してみました。（ACLチュートリアルの説明は難解ですね。かなり苦戦しました・・・。）
CakePHPブログチュートリアル（英語）
ACL を制御するシンプルなアプリケーション（英語）

チュートリアルで作成したブログのコントローラ「PostsController.php」のbeforeFilter()の中に下記のコードを記述することで、閲覧しているユーザーのアクセス権限をチェックし、「create」「read」「update」「delete」の各アクションの権限の有無を配列にして、Viewへ渡すデータにセットするようにしています。

function beforeFilter() {
	$acl = array();
	$action = array('create', 'read', 'update', 'delete');
	foreach ($action as $value) {
		$acl[$value] = $this->Acl->check($this->Auth->user('username'), 'posts', $value);
	}
	$this->set('acl', $acl);
}

Viewのテンプレート上では次のように利用できます。

1
2
3

if ($acl['create']) {
	echo $this->Html->link('Add Post', array('action' => 'add'));
}

ユーザーの権限によって、編集や削除のリンクを、表示／非表示にしたい場合などに使えるかなと思います。
他にもっと良い方法があるかもしれませんが・・・。

Espresso 2.0

almondlab. — Fri, 30 Sep 2011 02:43:42 +0000

Espressoのメジャーアップグレードとなるバージョン2.0が登場しました。
今回のバージョンアップでの大きな特長は、CSSEditが統合されたことでしょうか。CSSの編集がグラフィカルになり、より快適になっています。
（それにより、CSSEditの販売・開発は終了してしまったようですが・・・）

インターフェースは前バージョンからそれほど変わっていないようですが、OS X Lionになった今でも非常に美しく感じます。
競合製品であるCodaと、どちらを使うか悩むところではありますが、ビジュアルブルでリッチにコーディングをしたいならEspressoを、効率を重視するならCodaと、その時々で使い分けるのもよいかもしれません。

価格は新規購入の場合$79、アップグレードは2009年4月10日以降の購入者は無料で、それ以前の購入者は$29となっています。

MacRabbit

VMware Fusion 4にアップグレード。

almondlab. — Tue, 20 Sep 2011 10:29:21 +0000

先日、新バージョンとなるVMware Fusion 4が登場したので、早速アップグレード。
大きな特長としては、Lion環境への最適化、パフォーマンスの向上、あとLionを仮想マシンとして実行できるようになりました。

しばらく使ってみた感じでは、Lion環境に合わせたUIの改良は、なかなか好印象です。パフォーマンスに関しては、仮想マシン上では重い処理を実行しないので、正直前バージョンからの違いは分かりませんでした。
気になる点としては、Fusion自体の起動速度が遅くなってしまったような感じがします。

Drupal 7でメニューをカスタムに表示する際のメモ。

almondlab. — Wed, 07 Sep 2011 13:29:42 +0000

通常、管理画面で作成したメニューはブロックを使うことで割り当てられた場所に配置ができますが、テンプレート内に直接追加することもできます。

1
2
3


print theme('links', array('links' => menu_navigation_links('menu-custom'), 'attributes' => array('class'=> 'custom')));
?>

上記では「menu-custom」という名前で作成したメニューを、テンプレートファイル「page.tpl.php」に追加することで、カスタムに表示することができます。

OS X Lionをインストール。

almondlab. — Thu, 21 Jul 2011 01:49:30 +0000

昨日発売されたOS X Lionを、メインマシンとして使っているiMac（Early 2008）にインストールしました。
本当はサプのノートにインストールしたかったんですが、初期のMacBook（Early 2006）でCPUが対象外でした・・・。

インストールは既存のSnow Leopardを上書きするかたちで、ガイドに従って行いました。所要時間はおよそ40分でした。
一番心配していた普段使っているアプリケーションとの互換性ですが、今のところ特に問題はありません。「Coda」「ForkLift」「Path Finder」「QuicKeys」「LaunchBar」など、正常に動いています。（僅かに表示がおかしかったりしますが）

OSのメジャーアップグレードで、これほどスムーズに移行できるのは、よくよく考えてみるとすごいことですよね。

Drupalの管理画面にアクセスできない場合の対処法。

almondlab. — Wed, 22 Jun 2011 07:39:13 +0000

Drupalの管理画面へアクセスの際に、下記のようなエラーが表示されてアクセスできない場合があります。

1	Warning: MySQL server has gone away query: INSERT INTO watchdog...

症状はMySQLへのアクセスに問題を生じているのですが、具体的にはモジュール等のアップデートのチェックで、MySQLがビジーになってしまっているようです。

暫定的な解決方法としてモジュールの管理ページ（admin/build/modules）にアクセスして、（画面にエラーは表示されたままですが）コアモジュールの「Update status」をオフにすることで、とりあえずエラーの表示はなくなります。

ActionScriptで透過ビットマップのロールオーバーを判定。

almondlab. — Wed, 15 Jun 2011 05:54:11 +0000

マウスのロールオーバー時に、ビットマップの透過ではない部分でのみ判定をする方法です。
通常ビットマップのマウス判定には矩形エリア全体が対象になるので、透明PNGの透明部分でも判定されてしまいます。
それを回避する方法として、マウスのイベントリスナーを使うのではなく、マウス座標上にあるビットマップのピクセル色が透明かどうかを測定して、判定をするようにしています。
サンプルはこちら

package {
 
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.PixelSnapping;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	public class Main extends Sprite {
 
		public function Main() {
			var target:Sprite = new Sprite();
 
			//ライブラリ内の「Cloud」ビットマップクラス（透過PNG）インスタンスを作成
			var bitmap_data:BitmapData = new Cloud();
			var bitmap:Bitmap = new Bitmap(bitmap_data, PixelSnapping.NEVER, true);
			target.addChild(bitmap);
			stage.addChild(target);
			setBitmapRollOverOut(target, bitmap_data, targetOverTest, targetOutTest);
		}
 
		//ロールオーバー時
		private function targetOverTest(target:*):void {
			target.buttonMode = true;
			target.alpha = 0.5;
		}
 
		//ロールアウト時
		private function targetOutTest(target:*):void {
			target.buttonMode = false;
			target.alpha = 1;
		}
 
		//引数にロールオーバー時、ロールアウト時の関数を渡します
		private function setBitmapRollOverOut(target:Object, bitmap_data:BitmapData, rolloverFunction:Function, rolloutFunction:Function):void {
			var color:uint = 0;
			target.addEventListener(Event.ENTER_FRAME, targetOverEnter);
 
			function targetOverEnter(event:Event):void {
 
				//マウス位置のビットマップの（アルファ値を含む）ピクセル色を測定
				color = bitmap_data.getPixel32(target.mouseX, target.mouseY);
 
				//ビットマップが透明でなければロールオーバー関数を実行
				if (color != 0) {
 
					//ロールオーバー関数の実行を一度だけにするため、一旦エンターフレームを解除します
					//同時にロールアウトのエンターフレームを再開します
					target.removeEventListener(Event.ENTER_FRAME, targetOverEnter);
					target.addEventListener(Event.ENTER_FRAME, targetOutEnter);
					rolloverFunction(target);
				}
			}
 
			function targetOutEnter(event:Event):void {
 
				//マウス位置のビットマップの（アルファ値を含む）ピクセル色を測定
				color = bitmap_data.getPixel32(target.mouseX, target.mouseY);
 
				//ビットマップが透明だったらロールアウト関数を実行
				if (color == 0) {
 
					//ロールアウト関数の実行を一度だけにするため、一旦エンターフレームを解除します
					//同時にロールオーバーのエンターフレームを再開します
					target.addEventListener(Event.ENTER_FRAME, targetOverEnter);
					target.removeEventListener(Event.ENTER_FRAME, targetOutEnter);
					rolloutFunction(target);
				}
			}
		}
	}
}

QuicKeysでアプリケーションの表示＆非表示アクションを作成。

almondlab. — Thu, 26 May 2011 00:41:14 +0000

QuicKeysは、Mac上でのいくつかの処理をまとめ一つのアクションに登録して、作業を自動化することができるユーティリティです。
またMacでの状態をある程度チェックできるので、状況に応じて処理を振り分け、簡単なシーケンスのアクションも作成できます。

次の例は、Safariのアクティブ、非アクティブの状態をチェックして、表示、または非表示にするアクションです。

上記のような小さなアクションでも、自分に合わせてたくさん作っておくと、Macの操作性はぐっと良くなるのでおすすめです。

CakePHPで「home.ctp」のレイアウトを変更。

almondlab. — Wed, 25 May 2011 04:50:37 +0000

CakePHPでトップページの表示を変更するには「app/views/pages/home.ctp」を書き換えることで可能です。
この場合レイアウトは、自動的に「app/views/layouts/default.ctp」を利用します。

通常レイアウトの変更には、コントローラーのアクションに「$this->layout = ‘default’;」といった感じで、任意に変更ができるのですが、もともとコントローラーを作成しないトップページの場合では、簡単にレイアウトの変更ができません。

そのための解決方法として、トップページの表示を担うコントローラーをCakePHPコアのライブラリからコピーして、一部修正することにします。
はじめに、コアに含まれるライブラリ「cake/libs/controller/pages_controller.php」を、「app/controllers」にコピーします。

「pages_controller.php」内のdisplayアクションは次のようになっています。（バージョン1.3.8）

function display() {
	$path = func_get_args();
 
	$count = count($path);
	if (!$count) {
		$this->redirect('/');
	}
	$page = $subpage = $title_for_layout = null;
 
	if (!empty($path[0])) {
		$page = $path[0];
	}
	if (!empty($path[1])) {
		$subpage = $path[1];
	}
	if (!empty($path[$count - 1])) {
		$title_for_layout = Inflector::humanize($path[$count - 1]);
	}
	$this->set(compact('page', 'subpage', 'title_for_layout'));
	$this->render(implode('/', $path));
}

このdisplayアクションに、レイアウトを指定する記述を追加することで、トップページ用のレイアウトを変更できます。

function display() {
	$path = func_get_args();
 
	//ここから
	if ($path[0] == 'home') {
		$this->layout = 'home';
	}
	//ここまで
 
	...
 
}

上記の例では、ページのパスが「home（トップページ）」の場合に、「home」レイアウトを利用するようにしています。
後は「app/views/layouts」フォルダに、テンプレート「home.ctp」を作成すればレイアウトの変更が可能になります。

DrupalとWordPressについて。

almondlab. — Tue, 24 May 2011 06:42:43 +0000

現在人気の高い2つのCMS、DrupalとWordpressですが、同じくCMSという括りではあるものの、実際には両者でかなり性格の異なっているように思います。
大きく分けると、サイトの構築、更新作業において、Drupalは複雑なサイト、Wordpressはシンプルなサイトに向いているようです。

どちらのCMSも長く利用していますが、それぞれに得意なところ、不得意なところがあるので、構築するサイトの構成によって使い分けるようにしています。
これまで2つのCMSを自分が使ってきた中で、それぞれ次のような特徴があると思います。

Drupalで最も優れているところは、コンテンツの柔軟性にあります。
通常のブログタイプのCMSでは、一つ記事にタイトル、本文のみの構成ですが、Drupalでは様々なタイプの追加フィールドを任意で設けることができます。なので、例えば不動産サイトのような複雑な情報サイトでも、比較的容易に構築することが可能です。

もう一つ大きな特長として、ユーザー権限の管理があります。
複数の階層によるユーザーグループの権限を作成でき、ユーザー毎に、きめ細かくサイト内ページの閲覧権限などを設定できます。会員制サイトなどの構築には威力を発揮します。

逆にマイナスと感じるところは、やはり学習の難しさにあると思います。
初めてインストールした直後では最小構成の機能しか使えない状態なので、ブログとして利用する場合でも、画像の挿入さえままならない状況です。
いくつかのモジュールを組み合わせれば、基本的なブログとして利用できるようになりますが、初めて利用した際には、かなりハードルが高いように思います。
さらにサイト構築となると、テーマ作成も必要になりますが、これがまた簡単ではありません。
Drupalのルールに基づいてテンプレートファイルなどを作成していきますが、理解するにはそれなりの時間がかかってしまいます。
ただ一度覚えてしまうと、とても理にかなったルールなので、開発も楽しく？なります。

WordPressはブログタイプのCMSで、固定ページ機能を組み合わせることで、大抵のWebサイトの構築には十分な能力を持っています。

またブログをベースにしていることもあり、シンプルな管理画面に加え標準でのWYSWYSエディタが搭載されていて、とても親しみやすい印象を受けます。
テーマを含むサイトの開発においても、HTMLの知識と、Wordpressの出力を担うテンプレートタグをおおまかに理解していれば、独自のサイト構築も難しくはありません。

WordPressにとってもマイナス部分は、これは良いところでもありますが、あくまでブログベースのサイトしか作れないことです。
基本的にタイトル、本文の構成なので、イレギュラーなコンテンツの作成ができません。
カスタムフィールドを使う方法もありますが、更新作業の際にパソコンに詳しい人だったら問題ありませんが、そうでない人にとっては、かなりストレスが溜まるように思います。

2つのCMSを比較すると、自分の中では上記のような特徴が挙げられますが、あくまで性格の異なるもととしてとらえています。
例えるなら、自動車とバイクのような違いがあるように思います。

サイトの構築では、いろいろなケースがあるので、どのように構築するかは毎回悩みます。
ただ一つのCMSのみで構築を考えるより、CMS利用の有無も含めて、複数のCMSを使い分けていくことがベストのようです。ケースによってはJoomla!やMoodleが向いている場合もあります。
とりわけ、DrupalとWordpressは開発も盛んで将来性が高いので、時間をかけて学習するだけの価値はあるように思います。

Drupal 7でユーザープロフィールの項目をノード内に出力。

almondlab. — Mon, 23 May 2011 12:15:15 +0000

Drupal 7から標準で実装されたユーザープロフィールの項目を、ノードの投稿者情報に関連づけて出力する方法です。

一般的にユーザーアカウントの名前には英数字のみで構成されるので、それとは別に日本語での名前を、ユーザープロフィールに「field_name」として追加しています。

ユーザープロフィールを出力する一番簡単な方法は、ビューを使うことですが、今回はテーマに組み込む方法で出力を行います。

テーマに変更を加えるのは次の2つです。

「template.php」にpreprocess関数を追加
「node.tpl.php」にユーザープロフィール変数の出力コードを追加

テーマフォルダの中に含まれている「template.php」ファイルに、次のようにpreprocess関数を追加します。


function THEMENAME_preprocess_node(&$variables) {
	$value = db_query("SELECT field_name_value  FROM {field_data_field_name} where entity_id= :uid", array(':uid' =>$variables['uid']))->fetchField();
	$variables['alter_name'] = $value;
}
?>

関数名の「THEMENAME」の部分は、実際のテーマ名に置き換えます。
ここでは投稿者の「uid」からユーザープロフィール「field_name」を参照して、「node.tpl.php」に渡す変数の配列に値を追加しています。

次に「node.tpl.php」にて、上記で渡された変数を出力します。

1	print $alter_name; ?>

「node.tpl.php」ファイルを書き換え後は、「パフォーマンス」でキャッシュのクリアをしないと、うまく反映していないかもしれません。

Drupal 7のスクラッチテーマ作成。

almondlab. — Sat, 21 May 2011 08:44:42 +0000

Drupal 7正式版が登場して5ヶ月あまり経ちますが、そろそろ主要モジュールも整ってきたので、Drupal 6からDrupal 7へ移行を進めています。
Drupal 7でサイトを構築するにあたり重要となるテーマ作成ですが、基本的な構成のみをまとめたスクラッチテーマを作成してみました。
Drupal 7のスクラッチテーマ

drupal 7ではテーマを継承してサブテーマを作ることができるので、上記の基本構成以外はサブテーマにて装飾を加えていくことで、効率的なサイト構築が可能です。

テーマ制作の流れは、おおむねDrupal 6の場合と変わっていないように感じました。
ただしテンプレートファイル内で利用するメソッド、パラメータには変更があったので、Drupal 6のテーマをDrupal 7用に書き換えるのは、少し大変かもしれません。

またDrupalオフィシャルサイトでは、テーマ作成のためドキュメントが充実しているので、とても参考になりました。
Theming Drupal 6 and 7 | drupal.org

ActionScriptで方向キー操作のメモ。

almondlab. — Sun, 15 May 2011 06:24:16 +0000

ActionScriptで方向キーが押された時のイベントのメモです。

import flash.events.KeyboardEvent;
 
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress);
 
function onKeyPress(event:KeyboardEvent):void {
	switch (event.keyCode) {
		case 38: break; //up
		case 40: break; //down
		case 37: break; //left
		case 39: break; //right
	}
}

ステージにイベントリスナーをかけて、方向キーが押された時に関数を実行します。

jQueryでアンカーポイントまでスクロール。

almondlab. — Fri, 01 Apr 2011 13:26:33 +0000

jQueryでページ内のアンカーポイントまでスムーズにスクロールするスクリプトです。
スクロールのイージングには「jquery.easing.1.3.js」を利用しています。
サンプルはこちら

function scrollToAnchor() {
	$("a[href*=#]").click(function() {
		var target = this.hash;
		var offset = $(target).offset().top;
		if (offset > $(document).height()-$(window).height()) {
			offset = $(document).height()-$(window).height();
		}
		$("html, body").animate({scrollTop:offset}, {duration:1000, easing:"easeOutQuart"});
		return false;
	});
}

タグのリンクからハッシュ（#の部分）のみを抽出して、ページ先頭からの高さを調べています。

ActionScriptでXMLを操作するときのメモ。

almondlab. — Tue, 29 Mar 2011 07:35:38 +0000

ActionScriotでXMLを操作する際に、よく使うメソッドのメモです。

var xml:XML =
<root>
	<item id="1">
		<name>test1name>
		<url>www.example1.comurl>
	item>
	<item id="2">
		<name>test2name>
		<url>www.example2.comurl>
	item>
	<item id="3">
		<name>test3name>
	item>
root>;
 
//一つ目（0番目）の「item」ノード内の「name」ノードの内容を取得
trace(xml.item[0].name)
//test1
 
//二つ目の「item」ノードの「id」属性を取得
trace(xml.child("item")[1].@id)
//2
 
//「item」ノードの数を取得
trace(xml.item.length());
//3
 
//「item」ノード内の「url」ノードの数を取得
trace(xml.item..url.length());
//2
 
//一つ目（0番目）の「item」ノードの二つ目（1番目）のノード名を取得
trace(xml.item[0].child(1).name());
//url
 
//「item」ノード内の「name」ノードの内容が「test1」の「url」ノードの内容を取得
trace(xml.item.(name == "test1").url);
//www.example1.com
 
//「item」ノード内の「id」属性が「2」の「url」ノードの内容を取得
trace(xml.item.(@id == 2).url)
//www.example2.com
 
//三つ目（2番目）の「item」ノードに「url」ノードの有無をブール値で取得
trace(xml.item[2].hasOwnProperty("url"));
//false

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

almondlab. — Sat, 26 Mar 2011 05:21:04 +0000

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

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

Yahoo! Pipes

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

almondlab. — Sun, 20 Mar 2011 14:32:25 +0000

ブログや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/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'];

以上で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/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']

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

CKEditor