2011/11/30

[JavaScript]ブラウザ判定

jQueryのバージョンによってブラウザ判定ができないことが、昨日判明したのですが、JavaScriptのブラウザ判定の処理は、ブラウザ情報が役に立ちそうだ。

jQueryのプラグインでも作ろうかなーっと。

なんか便利な方法ないかな??

2011/11/29

[jQuery]ブラウザ判定ができない

がーん。なんてこった><

ブラウザ判定ができないかーい。
(死語に近いかも)


以前、jQueryでのブラウザ判定を紹介したのですが、jQueryをバージョンアップすると、どうやら使えなくなるようだ。

まさかーっと思って、参照先のjQuery.supportでのブラウザ判別を見たら、

使えなくなっている

やっぱり、ユーザーエージェントで判定するしか、ないのだろうか?

2011/11/28

[JavaScript]WebRTCについて

WebRTC is a free, open project that enables web browsers with Real-Time Communications (RTC) capabilities via simple Javascript APIs. The WebRTC components have been optimized to best serve this purpose.

via:WebRTC
すばらしい。
何がすばらしいかというと、JavaScriptで、リアルタイムコミュニケーションができちゃうところ。

それなら、web socketでいいじゃない。となるかもしれませんが、おそらく、それよりもなにかしらメリットがあって、この規格ができたのかなと。

さらに調査を行なっていく。

2011/11/27

[html]googleにindexさせない方法

今さら感たっぷりですが、google検索にindexされたくない場合は、

<meta name="robots" content="noindex">

※XHTMLで記述するときは、最後を「/>」で終了します。

noindexタグは、ウェブページをインデックスさせたくない、言い換えると検索結果に表示させたくないときに使います。

via:Meta robots noindex/nofollow/noarchiveタグの使い方
なるほど、同じ記事を読んでいると、デフォルトでは読んでくれるようだ。

2011/11/26

[JavaScript]正規表現に変数を使う

正規表現でreplaceメソッドを使う際に、変数で検索を行ないたいときがあり、困りました。

var keyword = 'text';
var reg = new RegExp('(' + keyword + ')', 'gi');
var pre = 'pre';
var post = 'post';
'text-text-text'.replace(reg, pre + "$1" + post); // $1->"$1"に変更。

via:変数を使う時はnew RegExp、そこで()使って$1とかで置換したい時はRegExp.$1か引用符で囲む
実際は、
var keyword = 'text';
var reg = new RegExp(keyword, 'gi');
でもいけましいた!!

2011/11/25

[css]だけで「...」を実現

やっとわかった。そういうことかー。

こんな感じ

hoge {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}

via:CSSだけで文字列を省略して「・・・」を付けて表示する方法
試したら確かに、できた。

すっげー便利。

2011/11/24

[jQuery]hide()

show()メソッドとは逆に、要素を非表示にしたい場合は、今まで、

$('#hoge').css('display','none');
としていたが、
$('#hoge').hide();
とこれまた簡潔にかけるそうだ。

2011/11/23

[本]タクシー王子、東京を往く。

読了

日本交通を経営している3代目 川鍋一郎が、実際にタクシーに常務して現場体験を行うという内容なのですが、ものすごいリアリティーを感じた。

タクシーに乗るたびに運転手大変なんだろうなーっと漠然と思っていたが、本書で確信を得た。

やっぱり大変なんだと。

言葉で表現するのは簡単なのだが、現実を知るにはやはり本書のような存在はとても貴重。

しかも、

「なんという贅沢な環境だろう」。そう。この人はまさにオプティミズムが制服と腕章を付けているような人なのだ。このオプティミズムがあってこそ、1900億円という負の遺産を受け継いで倒れるどころか事業を立て直すことが出来たのだ。

via:本物の王子 - 書評 - タクシー王子、東京を往く。
そう。社長に就任した時点で1800億円の会社の負債を背負っており、すごいなーっと感心というか、なんというか。
逆に、当事者だったら、どうだろうと思うと、ぞくっとした。

ただ一点気になったのは、池袋営業所の時に、どうして、ホームグラウンドである霞ヶ関や品川の方まで行ってしまったのか?
池袋の場合、新宿、神楽坂、板橋、渋谷、つまり西東京中心に営業した方が、営収がもっとあがったんじゃーないのかなーっと。

2011/11/22

[jQuery]show()

こんな便利なメソッドがあったのか。

いつもは、こんな組み方をしていました。

$('#hoge').css('display','block');
show()メソッドを確認すると、
$('#hoge').show();
ともっと簡潔に書くことができるそうだ。

今度からこれ使おう。

2011/11/21

[jQuery]画像の404を検知

画像が存在するかどうか(404かどうか)を確認する方法って?

まずは、こちらから

I'm looking for a way to detect that a certain image failed to load correctly (404) in a cross browser way. If that happens, we want to use JS to show a spinner in it's place and reload the image every few seconds until it can be successfully loaded from s3.

via:Detecting a image 404 in javascript
それに対する答えとして、Detecting Broken Images in JavaScriptが紹介されていましたが、これは、native JSの場合。

では、jQueryではどうすればいいのか?
$(function(){
 var jImgObj = $('<img>');
 jImgObj.attr('src','hoge.gif');
 jImgObj.bind('error',function(){
  console.log('not loaded');
 });

 jImgObj.bind('load',function(){
  console.log('loaded');
 });
});
IE7、IE8、chromeで正常動作

2011/11/20

[本]国家の品格

親父が持っていたので、読んでみた。

第1章 近代的合理精神の限界
第2章 「論理」だけでは世界が破綻する
第3章 自由、平等、民主主義を疑う
第4章 「情緒」と「形」の国、日本
第5章 「武士道精神」の復活を
第6章 なぜ「情緒と形」が大事なのか
第7章 国家の品格

via:目次
数学という理論だらけの世界で飯を食っている作者が、理論を否定している、なんという作品なのだろうか!!

だったら、数学の教授なんて、やめてしまえと思うのだが。
しかも、その教授のもとにたくさんの人が教えを請うているのだから。その人たちを裏切る行為とは言えないのだろうか?
その時点で、著者に品格があるようには思えない。

しかしその対案はどうかというと、数多の類書と同じく、「昔はよかった」「やっぱ武士道」といった感じで、藤原氏の批判力の限界が露呈してしまっている。

via:自由と平等の間には
確かにそうなんですよー。本当にもうこの発言やめてほしいと思っちゃいますよー。

しかも、逃げるような言い方かもしれないが、こんな世の中を作ったのは、今の大人達ではないだろうか?

さらにいうと「国家」に「品格」っている?

今の首相は、「ドジョウのように泥臭く汗をかく」と品格と結びつかないような政治を展開しようとしている。
それがいいかわるいかは別として。

著者も、はっきりした「品格」の定義を持っていなかったようなのだが。。。

なんか、最終的にどうなんでしょう?本書は?って感じでした。微妙。

2011/11/19

[css]カーソルを画像に変更する

先輩から教えていただいたのだが、カーソルを画像に変更することができるようだ。

style="cursor: url('../images/htmq.cur')"

via:cursor・・・・・カーソルの形状を指定する
これは便利。なんかの時に使えそう。

2011/11/18

[iOS][html]電話番号を認識させない

webページ上で8桁の数字が存在している場合、デフォルトでは、どうやら、電話番号として認識してしまうようだ。

これを解除するには、どうすればいいのだろうか?

正解は、こちら

<meta name="format-detection" content="telephone=no">

via:数字を電話番号のリンクにしない

2011/11/17

[JavaScript]audioの停止

昨日の記事では、jQueryからaudioタグの生成方法について書きました。

では、JavaScriptから音声を停止させるには?

HTML5 Audio オブジェクトを JavaScript で制御する方法
によると、pauseメソッドと、currentTimeに0を設定すればできるそうです。

<audio src="hoge.mp3" id="idaudio">

<script>
var audio = document.getElementById('idaudio');
audio.pause();
audio.currentTime = 0;
</script>
実際上で試したところ、chromeでうまくいきました。

これで、音声関連は大丈夫です。

2011/11/16

[jQuery]audioタグを動的に作成

どうすれば、audioタグをjQueryで動的に作成することができるのだろうか?
ざっと思いつくのが下記のソース

var audio = $('audio');
audio.attr('src','hoge.mp3');
$('body').append(audio);
実際にこれだと、オーディオが表示されない。

なぜだろうか?

HTML5タグリファレンスのaudioタグの説明によると、インターフェースを表示するには、controls属性を付与する必要があるとのこと。

よって、
var audio = $('audio');
audio.attr('src','hoge.mp3');
audio.attr('controls','controls');
$('body').append(audio);
chromeで実験してみたところ、これでうまくいきました。

ちょっと注意ですね。

2011/11/15

[jQuery]windowの大きさを取得

スクロール分を含めない部分の大きさを取得したい。

windowオブジェクトをjQueryの引数に渡してwidthメソッドやheightメソッドで取得

via:jQueryで画面の中央に要素を表示する方法
逆にスクロール分も含める場合は、

ちなみに画面全体(スクロールする部分も含む)の幅や高さを取得したい場合は

$(function(){
var left = $(document).width();
var top = $(document).height();
});

via:jQueryで画面の中央に要素を表示する方法
とすればいいようです。

これさえおさえておけばだいぶ便利になるのかなと。

参考
[jQuery]ウィンドウのサイズを取得

2011/11/14

[jQuery]NS空間のタグを取得しにいく

RSS情報をgoogle feed APIで取得し、パースする段階において、<im:image>タグの情報を解析したいとき、どうすればいいのか?

jQueryでXMLをパースして表示するコードサンプル例
PAPERMASHUP
も確かに参考になりますが、ちょっと情報が足りなかったのですが、

こたえは、こちらにありました。

I realize this thread is fairly old but it is the first one that comes up in google when searching for this with jquery. The easiest way to do the search is with:

.find('[nodeName="content:encoded"]')

Hope that helps someone. I spent the last few hours trying to figure out a simple way to access those tags.

via:jQuery parsing RSS and namespaced element like <content:encoded>
というわけでさっそく試したところ、確かに取得できました。

これで、xmlのパースも怖くないですね。

2011/11/13

[本]稼げる男のセックステクニック

こちらはそっこで読了

第1章 仕事ができる人はなぜセックスも上手いのか
第2章 「かわいがられる男」は得をする
第3章 世間からも女からも愛される男のスキル
第4章 「今さえよければいい」はやめなさい
第5章 セックス実践テクニック
第6章 立体的なセックスにするために
第7章 男たちのセックス事例集

via:目次
小悪魔セックスと比較して、著者が、コンサルティング会社を経営しているせいか、アンケートに基づくグラフなどが紹介されていたのが新鮮。

さらに、体位がイラストであって、刺激的だったなー。

ただ、タイトルと内容が噛み合っていなかった気がする。
どちらかというと、稼げるかつセックスがうまい人の特徴を紹介している感じだった。

稼げる人とセックスのうまい人の相関係数はほぼ1に近いようだ。
もちろん例外もあるようだが。

これもよく言われる話だが、あまりがつがつするのはよくない。
充足していなくても、している風にふるまうことが大切なのだと。

あと相変わらずよくわからないのが、「相手の求めているものを与える」というくだり。
そもそも、どうして相手の求めているものがわかるのだろうか?

本当に100%合致ているのだろうか?
わかれば苦労しないと思うのだが。

うーん、ちょっと納得いかなかった。

2011/11/11

[jQuery]$()の存在確認

$()を使ってobjectを作りますが、そもそも、それが存在するかどうかってどこで確認するのだろうか?

そんな疑問がふとあたまをよぎり、調べてみることに。
jQuery ifによる要素の判定
を読むと、lengthプロパティを使って0だった場合が、存在しないということですね。

めちゃくちゃ便利な技なので、覚えておこうーっと。

2011/11/10

[jQuery]マウスホイール操作を取得できるプラグイン

昨日のエントリーでは、NativeJavaScriptを使ってマウスホイールイベントの取得方法について書きました。

で、jQueryのプラグインないかなーっと思っていたところありました。

マウスホイール操作が超簡単になるjQueryプラグイン
上記のエントリーのもとになったMOUSE WHEEL EXTENSION上でプラグインが配布されており、デモページでチェックしたところ、モダンブラウザすべてにおいて動きました。

必ずプログラムもすらっと確認するのですが、少しわからない部分があったので、その部分については後日、書こうかなと。

2011/11/09

[JavaScript]マウスホイールイベントの取得

今、jQueryプラグインのTiny Scrollbarを読んでいるのですが、その中で、マウスホイールイベントをバインドしているところがあって、120やら3やらとなぜ定数がでてくるのか疑問になり、少し調査をすることに。

JavaScriptでマウスホイールイベントを扱い、スクロールも停止する方法で、Mouse wheel programming in JavaScriptが紹介されており、その中にプログラムが書いてありました。

/** This is high-level function.
 * It must react to delta being more/less than zero.
 */
function handle(delta) {
        if (delta < 0)
  …;
        else
  …;
}

/** Event handler for mouse wheel event.
 */
function wheel(event){
        var delta = 0;
        if (!event) /* For IE. */
                event = window.event;
        if (event.wheelDelta) { /* IE/Opera. */
                delta = event.wheelDelta/120;
        } else if (event.detail) { /** Mozilla case. */
                /** In Mozilla, sign of delta is different than in IE.
                 * Also, delta is multiple of 3.
                 */
                delta = -event.detail/3;
        }
        /** If delta is nonzero, handle it.
         * Basically, delta is now positive if wheel was scrolled up,
         * and negative, if wheel was scrolled down.
         */
        if (delta)
                handle(delta);
        /** Prevent default actions caused by mouse wheel.
         * That might be ugly, but we handle scrolls somehow
         * anyway, so don't bother here..
         */
        if (event.preventDefault)
                event.preventDefault();
 event.returnValue = false;
}

/** Initialization code. 
 * If you use your own event management code, change it as required.
 */
if (window.addEventListener)
        /** DOMMouseScroll is for mozilla. */
        window.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;
確かに、これで動作した。が、100%完璧なソースでもないようだ。 同記事によると、いくつか、反例があって、99%成功するようだ。 残り1%に同対処するかは今後の検討事項となりそうだ。 jQueryのプラグインないかなー。。。

2011/11/08

[css]のみだけで角丸を作成

すばらしいすぎる

CSS3を使って角丸を作ることができるとわかっていたが、実際に試してみると、おもしろい。

border-radius

を参考に作りました。

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div style="
  background-color:red;
  height:100px;
  width:100px;
  -webkit-border-radius: 6px 6px 6px 6px;
  -moz-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;"></div>
</body>
</html>
border-radius: 水平方向/垂直方向
でまず考える。
水平方向:左上 右上 右下 左下
で設定を行い、垂直方向も同様に、
垂直方向:左上 右上 右下 左下
と指定する。

ただし、/以降を省略した場合は、水平方向と同じ半径で設定をしてくれる。

実行結果は、こちら、chromeかsafariでお試しあれ。

2011/11/07

[JavaScript][Google Feed API]サーバーサイド処理なくfeedをゲット

ajaxを使って、外部feedを取得したいのですが、same-originポリシーでそれは無理。

で、解決策としてサーバーサイドを使う必要があるのですが、毎回、毎回、これだと面倒。

なんか方法がないかなーっと模索したところ、ありました。

Google Feed API

さっそく、iTunesランキングをゲットするコードを作りました。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript"
  src="https://www.google.com/jsapi?key=IN_YOUR_KEY"></script>
<script type="text/javascript"
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.extend({
  init:function(){
    var feed = new google.feeds.Feed(
        "http://itunes.apple.com/us/rss/topsongs/limit=100/xml"
    );
    feed.setNumEntries(100);
    feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);
    feed.load(function(xml){
      console.log(xml)
    });
  }
});
google.load("feeds", "1");
google.setOnLoadCallback(jQuery.init);
</script>
</head>
<body>

</body>
</html>
実行した結果、取得できました。

ポイントは、setNumEntriesメソッドを使わないと、デフォルトで4件取得してしまうところ。

今回は、100件なので、setNumEntries(100)としました。

また返り値を、JSONにしたかったので、google.feeds.Feed.JSON_FORMATキーを引数としてsetResultFormat()にセットしました。

これで、サーバーサイド言語を使わずに、実装できるようになったので、より早くWEBページを作れそうです。

2011/11/05

[javascript][iTunes]アフリツール

昔のエントリーを探しても発見できなかったので、1エントリー設けることに。

ことの発端は、
Ajax - iTunes Store 検索
じつは、
http://www.apple.com/itunesaffiliates/API/AffiliatesSearch2.1.pdf
でiTunesの中を検索することができたんです。

しかも、検索結果をJSONPで返すこともできるそうです。

で、もう少し調査したところ、appleにAffiliateサイトがありました。

Join the Affiliate Program

アフリに参加するには、日本の場合、リンクシェアに参加する必要があるわけですが。

にしても、いっぱい、Linking Toolsにツールが紹介されていました。

RSS Feed Generator

Search API
はかなり使えるかなと。

Widget Builder
は、cool

久しぶりにwebでアプリを作りたくなりました。

2011/11/04

[jQuery]twitterのNotification Plugin

再度、登場したらしい。
Twitter風にエラーや通知をページ上部に表示させるjQueryプラグイン

実際に、参照元になっているJquery Notification Plugin.のプログラムを参照すると、

function showNotification(params){
/// 省略 ///
}

function closeNotification(){
/// 省略 ///
}
と外部関数が定義されていた。

これは、ちょっとまずいと思う。なんでかというと、衝突する必要があるからだ。

なので、ちょっと書き換えて、正規のjQuery Pluginの形式で書き進める必要がある。

めんどいけど、書き換えようかなー。

参考
前に書いた記事は、
これスゴ、twitterのような通知バーを表示するjQuery Notify bar

2011/11/03

[jQuery]pluginのアカウント

jQueryのPluginサイトのアカウントを作りました。

どんどん、プラグインをかこうかなーっと思ったのですが、画像を貼付けることができない

最低でも、一つは貼付けられるようにしてほしいなっと思うのですが。。。