[Ajax] Google AJAX Feed APIでRSSを表示する

by

Google Ajax APIシリーズ記事その３はFeedについて。
RSS表示に関しては前にPHPで表示する方法を書きましたが、Magpie RSSだとページをPHPにする必要がありました。
Google AJAX Feed APIを利用すると、javascriptファイルを読み込むだけでhtmlファイルに外部のRSSを表示させることが出来ます。
なんでか妙にマイナーな気がするのはきっと難しそうに見えるからに違いないと思い、３ステップで使えるようにしてみた。
ZIPも用意してみたのでお試しあれ！

※Mapはこの記事、Searchはこの記事で解説しています。

続きを読む

[mootools]セレクトメニューを連動させて動的に選択肢を変更する

by

セレクトメニューが２つあって、1つ目のセレクトメニューを選択したら、その値によって２つ目のセレクトメニューの選択肢を入れ替えるというものです。
わざわざ何番煎じか分からないネタを遇えて取り上げたのは、巷でよく見かける「配列にデータを入れて出力する」という方法ではなく、Validなソースでこれをやりたかったためです。
選択肢がやたらと多くなりがちなもの、たとえば県から市を選んだりするフォームなどでよく使われていると思います。
とりあえずセレクトメニュー２つだけ連動させてみました。

XHTML

連動させるセレクトメニューにそれぞれIDが必要。
親セレクトメニューのoption要素につけたクラス名と、子セレクトメニューのoptgroup要素のクラス名を同じにします。
optgroup内に入れた要素が選択された時に入れ替わる選択肢になります。

<label for="select">選択肢１</label>
<select name="select" id="select">
	<option value="果物" class="fruit">果物</option>
	<option value="肉" class="meat">肉</option>
	<option value="魚" class="fish">魚</option>
</select>
<label for="select2">選択肢２</label>
<select name="select2" id="select2">
	<optgroup class="fruit" label="果物">
	<option value="リンゴ" selected="selected">リンゴ</option>
	<option value="みかん">みかん</option>
	<option value="ぶどう">ぶどう</option>
	<option value="桃">桃</option>
	</optgroup>
	<optgroup class="meat" label="肉">
	<option value="m1">牛肉</option>
	<option value="m2">豚肉</option>
	<option value="m3">鶏肉</option>
	</optgroup>
	<optgroup class="fish" label="魚">
	<option value="maguro">マグロ</option>
	<option value="sisyamo">ししゃも</option>
	<option value="iwashi">イワシ</option>
	<option value="sanma">サンマ</option>
	</optgroup>
</select>

見ての通り普通にソース書くのとそう変わらんので、javscriptオフでもフォームは機能します。
option要素を持たないselectを作る必要もないからバリデートに怒られる心配もない。
optgroupのラベルはどっちでもいい。

続きを読む

[memo] 中国　ＩＴソースコード強制開示強行へ

by

あまりにポカーンなニュースだったので晒しage。

中国、ＩＴソースコード強制開示強行へ…国際問題化の懸念

制度は、中国で生産・販売する外国製の情報技術（ＩＴ）製品について、製品を制御するソフトウエアの設計図である「ソースコード」の開示をメーカーに強制 するものだ。中国当局の職員が日本を訪れ製品をチェックする手続きも含まれる。拒否すれば、その製品の現地生産・販売や対中輸出ができなくなる。

どの先進国も採用していない異例の制度で、非接触ＩＣカードやデジタル複写機、金融機関向けの現金自動預け払い機（ＡＴＭ）システムなど、日本企業が得意な製品も幅広く開示対象になる可能性がある。

中国側は、ソフトの欠陥を狙ったコンピューターウイルスの侵入防止などを制度導入の目的に挙げる。しかし、ソースコードが分かればＩＣカードやＡＴＭなどの暗号情報を解読するきっかけとなる。企業の損失につながるだけでなく、国家機密の漏洩(ろうえい)につながる可能性もあるため日米欧の政府が強く反発。日本の経済界も昨秋、中国側に強い懸念を伝えた。

あれ？海賊版の本場はどこの国でしたっけ？ｗ
ＦＦ１１、リネージュ、ラグナロクオンラインなどのＭＭＯ経験者なら、どこの国のファーマーやアカウントハッカーが多いのかもご存知でしょう…
参考»FF１１のハッキング対策説明サイト

戦闘機の設計を盗もうとしたり、納品した製品が偽者だったりといったことをしちゃうお国柄。
こちらのブログのＩＴ三面ニュースの記事をみているとこの強行姿勢に通じるものを感じる。

続きはソースコードって何ぞ？？という人への説明

続きを読む

[mootools] 簡単なドロップダウンメニューの作り方

by

たくさんのメニューを小さな場所へ収めるのにドロップダウンメニューはもってこいの方法で、
色々とスタイリッシュなライブラリーが出てますが、ドロップダウンするのが１箇所だけだったら自作でもいいんじゃないの？
ってことで簡単にmootoolsでのドロップダウンメニューの作り方を書いてみます。

ドロップダウンメニュー　完成サンプル

サンプルページ

まずXHTMLソースは次のように、ボタンになるリンクの下（兄弟）にulとかでリストメニューを作り
識別用のIDをボタンに、クラスを子メニューにつけておきます。

<ul id="navigation">
	<li><a href="#" title="サンプル１">サンプル１</a></li>
	<li><a id="sampleMenu" href="#" title="サンプル２">サンプル２</a>
		<ul class="childMenu">
		<li><a href="#" title="Menu1">Menu1</a></li>
		<li><a href="#" title="Menu2">Menu2</a></li>
		<li><a href="#" title="Menu3">Menu3</a></li>
		<li><a href="#" title="Menu4">Menu4</a></li>
		</ul>
	</li>
	<li><a href="#" title="サンプル３">サンプル３</a></li>
</ul>

説明続く。（結構長いです）

続きを読む

[dw] Dreamweaverの初期設定ドキュメントの内容を変更する

by

Dreamweaverで新規作成から新しいファイルを作成すると、自動的にいくつかのタグが追加されますが
いちいちメタ追加するの面倒だから使用頻度高いのを予め入れてしまおう、という話です。

dreamweaver デフォルトでファイル作った時の画面

初期は上記の様にシンプルな感じだと思います。bodyの上にある変な空行も気になるところ。
で、適当にあると便利そうなタグを入れてカスタマイズすると次の様になる。

dreamweaver カスタマイズした後にファイル作った時の画面
headの他にbodyの中にも色々入れておくことが出来ます。

また、htmlファイルの他にもCSSとかJavascriptとかPHPとか、
Dreamweaverから作るファイルの初期設定は全て変更する事が出来る。

続きを読む

[Ajax] Google AJAX API ローダーの利用方法

by

Google Ajax APIローダーの使い方についてのメモです。
Seachについては前に書いてるのでGoogleMapを例にしてます。

GoogleMapやGoogleSearchなどのGoogleが提供するAjaxAPIサービスを利用する際、大抵は各APIのスクリプトタグを逐一挿入していると思います。
たとえばMapなら下記のようなソースです。

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABCDEFG" type="text/javascript"></script>

利用するサービスが複数あるとその分スクリプトタグが増えていくことになりますが、
Google AJAX API ローダーを使用すると、複数または全てのAjaxAPIの読み込みが次の１行で完結します。

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>

V3 APIについて追記

続きを読む

[wp] WordPress2.7 記事に添付された画像を取得して表示

by

WordPress2.7は画像に「大サイズ」が加わって全部で４種類になりました。
記事から投稿された画像を出力する内容のエントリーはこれまでに何度か書いてますが、
wp_get_attachment_image() を利用して画像をゲットする関数を作ったので晒しておきます。

関連記事

続きを読む

ホームページビルダーv13でXHTML+CSSコーディング

by

安価なオーサリングソフトとして超王道なホームページビルダー（笑）でいつもやってるコーディングは出来るのか？
実際やってみたら案の定残念な感じだったので、これは酷いと思ったところを列挙してみる。
なお、触ったのはver13体験版で製品版ではありません。

続きを読む

[CSS]２行以上あるテキストを上下中央に配置する

by

画像の隣にテキスト、というのではなくて文章だけの場合です。
テキストが一行ならline-heightでおｋだけど、行が複数あった場合はどうする？

Vertical Centering

テーブル使えば一発だけどdivでやろうとすると結構面倒くさい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
		<title>Vertical Centering Text in DIV</title>
		<style>
			.centering {
				display: table;
				height: 300px;
				width: 300px; 
				background: #efefef;
				overflow: hidden;
			}
			.centering-body {
				display: table-cell;
				vertical-align: middle;
			}
		</style>
		<!--&#91;if lt IE 8 &#93;>
		<style>
			.centering {
				position: relative;
			}
			.centering-body {
			 	 position: absolute;
				 top: 50%;
			}
			.centering-body div {
			 	position: relative;
				top: -50%;
			}
		</style>
		<!&#91;endif&#93;-->
</head>
	<body>
<div class="centering">
	<div class="centering-body">
		<div><p>et Aenean Vestibulum morbi tristique netus Donec vitae, quam sit Pellentesque eleifend libero ultricies amet placerat Mauris vitae est. ac eu ante. tempor et feugiat egestas. semper. fames amet, malesuada tortor mi egestas sit turpis quam, eget, habitant leo. ultricies senectus </p></div>
	</div>
</div>
	</body>
</html>

続きを読む

[google] Google AJAX Search API でサイト内検索結果をページ内に表示する

by

Googleのカスタム検索エンジンの検索ボックスと検索結果をページ内に埋め込む方法（オーバーレイではない）について。
Mapと同じくSearchもAPIで色々することが出来ます。

GoogleSearchAPI

サイト内検索の検索ボックスをサイトに埋め込むのは、登録した時に作成されるコードを埋め込むだけなので簡単ですが
APIを利用する場合はJavascriptとAPIの仕様が分かってないとややこしいので、分からない人向けに説明を書いてみた。
この記事では、サイト内検索の検索ボックスと検索結果をAPIを利用して既存ページに埋め込む初歩についてまとめてます。
更に詳しいカスタマイズ方法 についてはDeveloper’s Guideなどを参照してください。

続きを読む