スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

以前に、Twitter APIにふれた記事を書きました。
PHPでTwitter APIを使ってみる
認証を必要としない、簡易版を紹介したのですが、今回は認証を含めた処理にチャレンジしたいと思います。

前回もお話したように、Twitter APIに認証にはBASIC認証、OAuth認証、あとxAuth認証というものがあるようですが、BASIC認証は2010年の6月にサービスが停止し、使えなくなるそうです。そこで、今回はOAuthを勉強してみたいと思います。OAuthは、ゼロオースではなくて、オーオースと読むようですね。

さて、WebアプリでTwitter APIのOAuthを実装するためには、twitter developersでアプリケーションを登録する必要があります。
http://dev.twitter.com/

OAuthを利用するためには、アクセストークン(Access Token)とアクセストークンシークレット(Access Token Secret)が必要になります。少し難しいので、詳細は割愛しますが、APIキーみたいなものです。下記のサイトでアプリ登録することで、Access TokenとAccess Token Secretを取得できます。
http://dev.twitter.com/apps/

アプリケーション追加のフォームに遷移します。入力するのは、

ネットワーク構成変更で旧サーバから新サーバに切り替えることになり、Subversionのリポジトリを移動させました。
バージョンとしては、移行元
Ubuntu9.10 Subversion1.6.5
から
WindowsXP Subversion1.6.6
への移行です。

SubversionではOSなどのプラットフォームには依存しないようで、基本的にはMacも含めて移行が可能のようです。

普天間問題は、何が問題なのでしょうか。

私は、生まれも育ちも沖縄です。生まれる前から沖縄に米軍基地はありました。
幼い頃から、連日、地元の新聞やテレビでは米軍関係のニュースをやっていました。外では、毎日のように軍用機が飛んでいるし、少し遠出するのには基地が見える道を通っていました。ごく自然で、それがあって当たりまえの生活だったんです。
こんなこと言うと、怒られるかもしれませんが、個人的に基地の存在については反対とは言い切れません。おじー、おばーは、戦争を経験した思いから、反対の気持ちが強いのかもしれませんが。私は、その意思を引き継いでいない、ダメな若造かもしれません。基地が無くなることにこしたことはないですが、しかし、常に生活の隣合わせであった基地について、「賛成」「反対」で片付けられる単純な問題でないことはよく分かっているつもりです。

AS3でブラウザ判定をしたかったので、調査メモです。

ActionScriptはクライアントで動作するスクリプトなので、ブラウザ情報を取得できるはず、ということで調べてみました。
結果、どうやらActionScript自体にはブラウザを判定するクラスは用意されていないようです。その代わり、外部APIとやりとりするための「ExternalInterface」というクラスが用意されており、これを利用してJavaScriptの関数を呼び出したり、逆に呼ばれたりといった処理が実現できます。

具体的には、ブラウザを判定するために、JavaScriptの「window.navigator.userAgent」を呼び出します。

WindowsのOSを使用していると、フォルダのいたるところに「Thumbs.db」というファイルが勝手に生成されます。

このファイルは、Windowsで画像ファイルを保存してあるフォルダに縮小版画像を表示するために使用されているようです。
画像をフォルダに入れた時に、画像がアイコンではなく、その画像内容のサムネイルが一覧で並びます。それが縮小版です。この縮小版を表示するのに、画像のサイズや量が多いと処理に時間がかかります。そこで予め、縮小版のデータを「Thumbs.db」に保存しておくことで、サムネイルを表示するスピードを早くするという効率化を図っているんですね。

ActionScript3では、任意のMovieClipにリンクに設定した場合に、オーバー時にハンドカーソルになるように以下のように記述します。

var mc:MovieClip = new MovieClip();
mc.buttonMode = true;

同様にして、TextFieldにリンクを設定する場合ですが、テキストフィールドはbuttonModeの属性は持っていません。そこで、ハンドカーソルをセットしたムービークリップにテキストフィールドを追加します。

HTMLのみでページ内リンクを作成する場合、通常、以下のようにコーディングしますね。

<a name="top" id="top"></a>
<a href="#top">ページTOPへ</a>

「ページTOPへ」をクリックすると、nameとidに「top」を設定している箇所にスクロールします。nameとidの2つを設定しているのはクロスブラウザ対策です。

この時、スクロールといっても、ブラウザの縦スクロールバーが表示されている場合に、そこに瞬時にジャンプするだけです。

特にページが縦に長い場合に、瞬時に移動してしまうと、画面が急に差し変わるので、他のページに遷移したと錯覚を起こす場合もあるようです。また、ただ単純に見栄えが良いということで、最近ではJavaScriptを利用してスムーズなスクロールを実装するサイトを多く見かけます。

前にjQueryを利用した画像ロールオーバーのサンプルコードを紹介しました。

jQueryで画像ロールオーバー

このサンプルでは、画像切り替えがスムーズではなく、瞬時に画像が差し変わるだけです。それでも特に問題はないのですが、今回は一つ手を加えて、徐々に透過させて切り替える、つまり、フェードイン・フェードアウトを利用してふわっと切り替えるように改良してみました。

jQueryのバージョンは1.3.2です。

何かと話題のTwitterですが、利用者が1億人を突破したようです。ここ数年で日本の人口に匹敵するユーザが登録し、さらに増加しているという現状、その情報をどう活用するかがキーになってきますね。

というわけで、活用方法の1つということでTwitter APIを試してみることにしました。APIを利用することで、サイトにつぶやきを表示させたり、Twitterと連携したアプリケーションが作れるようです。

さて、その中身ですが、大きく分けて、
・Twitterにログインしなくても閲覧できる、公開されている情報は、APIでも認証なしに活用できる
・Twitterでログイン後にする、自身の投稿、リツイート、返信、自分のフォローしている人の情報操作などは、APIでも認証が必要
の2つがあるようです。

認証には、Basic認証とOAuth認証があるようですが、Basic認証は2010年6月には廃止されるようです。まだまだ発展途上ともいえる技術、今後のAPIの仕様変更には注意しないといけないようですね。

画像ロールオーバーを実装するためにjavascriptを用いる例は多数存在しますし、私もよく利用します。今回、jQueryにも慣れてきたので、簡易版ではありますがjQueryでその機能を実装してみました。

jQueryのバージョンは1.3.2です。

function ROverImg(classname){
	var prefix = '_o';
	$("img").each(function(){
		var src = $(this).attr("src");
		if($(this).hasClass(classname) && src.indexOf(prefix + ".") == -1){
			var size = src.length;
			var over = src.substring(0, size - 4) + prefix + src.substring(size - 4, size);
			$(this).attr("out", src);
			$(this).hover(
				function(){
					$(this).attr("src", over);
				},
				function(){
					$(this).attr("src", $(this).attr("out"));
				}
			);
		}
	});
}

簡単に説明すると、imgタグ全てに対してクラス名「classname」を指定した要素を探し出し、ロールオーバー画像をセットするという処理です。

Monthly Archives