5509

jQueryでbackgroundPositionを取得するときの注意

$(‘hoge’).css(‘backgroundPosition’)だとIEで値が取れないんですね、不便か。

XとYを別々に取得したい

値の検証

var bgPosDef = $('#hoge').css('backgroundPosition');

IE8まで（9は未検証）

console: null（空）

Firefox, Chrome, Safari, Operaなど

console: 50px 50px

IEは返されるデータがない！こういうところがみんなが嫌いな所以ですかね。IEはbackgroundPositionではなくて、backgroundPositionXのようにXかYを指定して個別に引き抜きます。

var bgPosX = $('#hoge').css('backgroundPositionX');
var bgPosY = $('#hoge').css('backgroundPositionY');

XとYを取得する

計算を行う場合は、数値にしておく必要があるのでついでに。

var bgPos = bgPosDef.split(' '), // 半スペで分ける
  // bgPos[0] == X, bgPos[1] == Y
  bgPosX = 0,
  bgPosY = 0;
bgPosX = bgPos[0].replace('px', '');
bgPosY = bgPos[1].replace('px', '');
// pxを削除する

IEはpxを削るだけです。

bgPosX = $('#hoge').css('backgroundPositionX').replace('px', '');
bgPosY = $('#hoge').css('backgroundPositionY').replace('px', '');

条件分岐で分ける

var bgPosDef = $('#hoge').css('backgroundPosition'),
  bgPosX = bgPosY = 0;
if ( bgPosDef ) { // backgroundPositionの値が取れた場合
  var bgPos = bgPosDef.split(' '),
  bgPosX = bgPos[0].replace('px', '');
  bgPosY = bgPos[1].replace('px', '');
} else { // 取れなかった場合
  bgPosX = $('#hoge').css('backgroundPositionX').replace('px', '');
  bgPosY = $('#hoge').css('backgroundPositionY').replace('px', '');
}

これくらいはjQueryで対応してくれてもいいような気がしないでもない。。

今までに公開したjQueryプラグイン

はじめに、この記事は役に立つリンク集ではないです。

ブログを初めて2年ちょっとが過ぎ、半年くらいやるやる言ってやらなかったexValidationもようやく公開できたのもあって、自分の中で一段落したので、今まで公開したプラグインの振り返り等も兼ねて書きました。

そもそもは誰かの役に立てばいいなと思って始めたブログなので（ほとんど役に立たないものだと思いますけど）もしかするともしかしてどこかで誰かの役に立てるものもあるかもしれません。

ところで最初のプラグインを公開したときは、（JavaScript的な意味で）それはもう何も知りませんでした。そんな感じで今でも恥ずかしいコードなんですけど、最初の頃はもっと恥ずかしいコードなんですね。だから見ないで…

Read more

[訂正:間違い] formのaction先が異なる文字コードのときに文字化けさせない

10.08.03追記：この記事を見てくれた方へ
ごめんなさい、以下の内容は検索エンジン側が &charset=UTF-8 でパラメータを受け付けるときのみに有効な方法でした。つまり間違いです。

サイトの検索で外部検索エンジンを使うときなど、サイトはUTF-8なのに用意された検索エンジンはShift_JIS、、のようにサイトと検索エンジン側の文字コードが違う、というのはよくある話で、そうすると文字化けを起こします。

hiddenパラメータで文字コードを送る

そういうときはhiddenパラメータでサイト側の文字コードを埋め込んでおくといいです。

以下のようにform要素に入れておきます。


  
  
  

accept-charset属性

formのaccept-charsetという属性で検索エンジン側の文字コードを指定することでも回避できるようですが、IEが未対応なようで、実用的ではないです。

ドメインを5509.meに移転したので、WordPress・リダイレクトの設定メモなど

ようやくドメインを http://moto-mono.net/ から https://5509.me/ に移転しました。ドメインの移転ということで、念のため前のデータは全て残しつつ、htaccessで新しいドメインにリダイレクトしています。その辺のメモ。色々キャプチャ取り忘れたので、画像が全然なくて意味わからないかもしれないです。タイトルにもある通り、WordPressでのデータ移転も含めて書きました。

準備

1. 新しいドメイン（ディレクトリ）にWordPressをインストールしておく

そのままなんですけど、先にインストールしておきます。プレフィクス（テーブル接頭語）は基本的に以前のブログと同じもので大丈夫ですが、同じDBを使う場合はあとあと置換するプレフィクスにしておきます。ここではgogo09_。

2. wp-contentをコピーしておく

テーマとかプラグイン、アップロードした画像ファイルなどもろもろ入っているのでこれもアップロードしておきます。

3. データをまるっとバックアップ

データのエクスポートはWordPress Database Backupで。
Redirectionも使っているのですが、このRedirectionのログがあほみたいに容量（6MB強）が大きかったのでこれだけチェック外しました。

4. プレフィクスを置換する

そもそも違うDBを使う場合はそのままで問題ないですが、今回は同じDBを使っているので、プレフィクスを置換しました。ダウンロードしたバックアップSQLデータをテキストエディタで開いて（シンタックスハイライトはオフにしないと大変なことになります）、一発置換でいいです。

“next_” >> “gogo09_”

データの取り込みからWordPressへの適用

1. バックアップデータをインポートする

プレフィクス置換済みのものをインポートします。インポートはphpMyAdminのImportから行いました。

2. ドメインを書き換える

設定が古いドメインのままになっているので、まずはDBを書き換えます。ドメイン設定は、プレフィクス_optionsに含まれています。

Browseから一覧を表示してsiteurlの項目の値を新しいドメインに書き換えます。

3. WordPressにアクセスする

http://新しいドメイン/wp-admin からWordPressにアクセスします。するとデータが更新されて、中身盛りだくさんなブログになっているはずです。

3-1. 基本設定のWordPressの場所を変更する

上のほうですね。新しいドメインに変えます。

3-2. アップロードファイルを変更する

これも新しいディレクトリに変えておきます。

4. 記事などに含まれる古いドメインを新しいドメインに書き換える

これはSearch Regexというプラグインを使うと簡単に書き換えることができます。

検索するとずらっと出てくるので、Search patternに検索語、Replace patternに置換するものを入れてReplate & Saveボタンをクリックすることで一発置換できます。

ここまでで、新しいドメイン上で今までのデータを持ったブログができました。

(5.) パーマリンクの変更

ドメインを変えたことにあわせて、記事のパーマリンクも変更しました。なんせ長かった･･･

今までのパーマリンク：/%year%/%month%/%day%/%postname%.html
新しいパーマリンク：/log/%postname%

だいぶすっきり！

mod_rewriteを使ったリダイレクトの設定

このままだと諸々登録されている古いブログのほうにアクセスが集まってしまうので、新しいブログへリダイレクトを設定します。htaccessでmod_rewriteの指定を行います。ドメインが変わるので、恒久的なリダイレクトになり、ステータスコードは301を使います。

mod_rewriteの指定方法は「URLの書き換え Rewrite」を参考にしてください。

RewriteRule ([^\/\.]+)\.html$ https://5509.me/log/$1 [R=301,L]
RewriteRule index.php https://5509.me/ [R=301,L]
RewriteRule ^(feed|about|labs)$ https://5509.me/$1 [R=301,L]
RewriteRule ^(tag|category)(\/.*)$ https://5509.me/$1$2 [R=301,L]
RewriteRule ^([0-9]+)(\/[0-9]+)? https://5509.me/log/$1$2 [R=301,L]

1行目は、旧記事URLから新しいURLへのリダイレクト。
2行目は、トップページのリダイレクト。
3行目は、ページとfeedのリダイレクト。
4行目は、タグとカテゴリページのリダイレクト。
5行目は、アーカイブページのリダイレクト。

記事URLのリダイレクト

重要なのは1行目なので、そこだけ解説しておきます。たとえば、要素をふわっと表示させる〜のURLは

https://5509.me/2010/04/30/whatinout.html

ですが、新しいURLのルールは

https://5509.me/log/whatinout

に変わります。共通する箇所は太字になっているところなので、この部分を正規表現で取得します。正規表現は

([^\/\.]+)\.html$

になり、（）で取得した部分を$1で取得できるのでリダイレクトのURLは

https://5509.me/log/$1

となります。

にそれぞれなっています。基本的に正規表現が使えるはずですが、チカッパはapacheのバージョンが1.3.xx系だったので \d{2} とかが使えませんでした。

Google Analyticsなど使っているサービスのドメイン変更など

最後に、使っているサービスのドメインを変更しておきます。これが結構多くて大変でしたね。。

それにしても

全部の数字が0とか新鮮ですね･･･なんとなく記念にキャプチャした。

さみしくなんかないよ･･･！

Author

nori
nori
- UI Engineer
Location
- ,