ekkun.com

http://example.com/hoge.html?hoge1=1&hoge2=2&hoge3=3

たまーに HTML で GETパラメーター が必要になる時があるっ！

いま必要って訳ではないけど jQuery で GET パラメーターを取得する方法は覚えておいて損はないと思い調べてみた。
ひとまずエントリー順に。

2009年9月16日
JQuery HowTo: Get URL parameters & values with jQuery
# 配列にしてくれる。

2011年3月25日
Get URL parameters using jQuery | jQuery4u
# コードが短い

2012年6月22日
Get URL Parameters using jQuery | jQuery By Example
# んー？

ということで、複数のパラメーターを配列してくれる2009年のが一番使いやすいっす。
ちなみに今までは jQuery ではなく以下みたく書いてた。
つかコレで十分って話も、、

function getRequest() {
    if(location.search.length > 1) {
        var get = new Object();
        var ret = location.search.substr(1).split(‘&’);
        for(var i = 0; i < ret.length; i++) {         var r = ret[i].split('=');         get[r[0]] = r[1];         }         return get;     } else {         return false;     } } var get = getRequest(); var hoge = get['hoge'];

DEMO を見てもらうと分かりやすいのだけど、埋め込み Google マップを jQuery などでタブ化して複数枚を埋め込むと何故か座標がズレる。
その原因が Javascript でタブとかモーダルを使用する際、ブロックを隠すために併用する CSS の display: none であるらしい。※定かではない
ってことは display: none で隠すのはブロックだけにして、地図を表示する箇所は Javascript で 1 回 1 回読み込めば好いと言うことらしい。

方法 (1): iFrame の要素 REL に URL を埋込み、クリックファンクションで REL -> SRC に変換する
方法 (2): クリックファンクションで HTML を読み込んで表示する

どちらもズレなくなった。

– DEMO

via 埋め込みGoogle マップの座標がズレる場合のメモ。 – ゆず日記
via jQuery UI TabsにGoogleMap埋め込むと表示位置ズレる | 世田谷のエンジニア ブログ

Webフォントを試しにekkun.comに導入っ。
以前、ポストしたTypeKitとGoogleはjsタイプというのとイマイチなフォントなので、uploadタイプでイケテルフォントのMyFontsを採用っと。

WOFF (0Web Open Font Format): 今後の標準
EOT (Embedded OpenType): Internet Explorer
SVG (Scalable Vector Graphics): Google Chromeなどの一部
TrueType: フォントそのもの

@font-face {
    font-family: “myFont”;
    src: url(“myFontFile.eot?”) format(‘eot’),
        url(“myFontFile.woff”) format(‘woff’),
        url(“myFontFile.ttf”) format(‘truetype’),
        url(“myFontFile.svgz”) format(‘svg’);
}

4つのフォーマットのフォントファイルとCSSでお好みのフォントをWebで使える。
ただフォントの著作権とかあるから気をつけてねっていう。

しっかし、欧文フォントは日本語と合わないし日本語フォントは重いし、、
日本語のサイトで使用するには課題が豊富すぎる、、
タイトル回りで使うのが無難だなー。

– DEMO

ギリギリだったということもあり印刷も止めて、お年玉付き年賀状にステンシルでスプレーというカタチを選択。ハンコという選択もあったが押す工数が現実的でなかったので却下。で、ステンシルといえばBanksyっていう安易さで右の写真が元ネタのYou LieというPIECE。

オリジナルの封筒作ると長3や角2や角3まで作るハメに。だったらと思い封筒に貼る用のステッカーを作ったお。
なんと携帯にも貼れちゃうサイズ。欲しい人はコメント頂戴な。

– Demo

百式さんで取り上げられてたクラウド型フォント配信サービスTypekit。
これウェブサーバやクライアントPCで、ごにょごにょしなくてもキレイなフォントをみんながブラウズできるサービス。
プランは4種類で、帯域幅、フォントの種類、使用できるサイト数、使用できるフォント数などがそれぞれ違う。値段もそれなり。
あとSafari 3.1以上、Firefox 3.5以上のWindows、OSX、Linuxと敷居が高い。あと当然、日本語未対応。。

という訳で、さっそくトライアル。

[ 使用方法 ]
– Typekitサイト内で使用したいフォントを指定後、同サイト内にあるTypekit Editorでclass名、id名を指定。
– head内に指定のjavascriptを記載。
– あとは指定したclass or idを表示させたいhtml内に記載。

こんなサービス待ってた！！
これから改良が進んでいくと実用レベルで使えるようになるね。
そうなるとPhotoshopやFireworksでスライスしなくて済む時代が来るかも！

via フォントもクラウドの時代？！あなたのサイトでスタイリッシュなフォントを表示させる『TypeKit』 – 100SHIKI

Create your Flickr Favorites badgeをリリースしてみた。

Flickrの写真をブログや自分のサイトに貼るCreate your own Flickr badgeってあるじゃないですかー。でもー、自分でFavorite(お気に入り)にした写真群は選べないんですよー。意外にFlickrのフォーラムでも望んでいるひとも居たので、バッヂを生成するツールを作ってみました。このツール、人のFavorite(お気に入り)バッヂも作れちゃうんだよね。。あはは。。
バッヂの作り方はID、表示数、表示パターン、表示方法、表示サイズを選んで生成ボタンを押す。あとは生成されたjavascriptをサイトに貼り付けるだけ。簡単簡単。
ちなみに以下はjoiさんのFavorite(お気に入り)。

とはいえFavorite(お気に入り)していない人も多いですけどねー。
ちょっと荒々しく作っちゃったのでバグが多いかも。そんな時はコメントまで。
あとランダムの時重複しちゃうのがダサイ。表示数やサイズはもうちょい自由なので引数を、後ほど記載します。

参照:
– MagpieRSSでMedia RSSのタグを取得するためのAd Hocな改造
– idGettr – Find your Flickr ID