デザイン,ユーザビリティ,マーケティングなどの観点からwebについて綴っていきます

【答え】→そんなときは、公開鍵・暗号鍵を設置しよう！
って話になるんだろうけど、今回は諸事情により設置不可。

リポジトリを見に行くたび、ユーザ名・パスワードを入力させられ、不快指数95%くらいになってたので、下記方法で解決です。

ユーザ名の入力回避

リポジトリからチェックアウトする際、以下のように、ユーザ名をURLに追加しておく。
たったこれだけで、ユーザ名を毎回入力する手間がなくなるとは。今までの苦労はなんだったんだ。。。

こんな感じで指定。

パスワードの入力回避

TortoiseSVN > 設定 > ネットワーク > SSH > SSHクライアント　の設定項目として、ユーザ名とパスワードを以下のように指定しておくと毎回の入力が回避できる。
（SSHクライアントとして、TortoiseSVNに付属の TortoisePlink.exe を使用）

こんな感じで指定。

ただ、SSHを使用するプロジェクトが複数あると、この方法が使えない。そんときはどうすりゃいいんだ。。。

まあ、でもとりあえず、不快生活とはオサラバしたので良しとします！

（参考サイト）
・TortoiseSVN で svn+ssh な繋ぎ方(TortoiseSVN)--ＷＥＢシステム開発 技術的備忘録（通称 技忘録）
・svn+sshにてパスワード入力を省略: Ma note

固定リンク

ということで、「IEさん、頼むよ...」っていう話。

JavaScriptのIE用イベントハンドラ「attachEvent/detachEvent」。これを使って呼び出したイベント内では、thisがwindowと解釈される落とし穴が。

下記のイベントをIEで実行すると、どうなるか、さっそく検証。

• デモページ

HTML

JavaScript

ボタンのラベル「送信する」がalertで返される、かと思いきや、結果は「undefined」。
これが、IEでattachEventした関数内では、「this」がwindowオブジェクトとなってしまうってこと。
つまり、detachEventもできず、はまるので注意。

じゃあ、どう書けばいいのか。

JavaScript（修正版）

thisの代わりに「evt.srcElement」で、イベント発生元を取得すればよい。
と、ここまでがIEの話。

IE以外は、「addEventListener/removeEventListener」でイベントを制御するから、その振り分けをすればよい。クロスブラウザで動作する、最終的なコードは下記。

JavaScript（クロスブラウザ対応版）

今回、ブラウザ依存の問題に結構はまってしまったけど、イベントのバブリングフェーズとかキャプチャフェーズについて勉強できたから、許す。（←何を？）

たまにネイティブのJavaScriptを書くと、ブラウザの差異を意識しなくていい「jQuery」のありがたみが身にしみますね。。。

補足：JavaScript（detachEventできないパターン）

thisを意図通り扱うため、上記のようにcallを使う方法もある。けど、この場合、無名関数でattachするから、detachEventできないので要注意です。

（参考サイト）
JavaScript のイベントハンドラ - daily dayflower
JavaScript メモ / チップス attachEvent() と addEventListener() [ ARTEMIS ]

固定リンク

前田かおるさんサイトのお手伝いをした際に、タブを実装することになったので、昔つくったJavaScriptを元にjQueryプラグイン化してみた。

タブにしたい要素を指定するだけという、簡単実装。いやあ、jQueryって便利ですね。ってことで、さっそく解説。

jQuery cookieTab

指定した要素をタブ化するjQueryプラグイン。クッキーを利用して、表示するタブを記憶します。

• デモページ
• ダウンロード

準備

必要なデータを上記よりダウンロード後、CSSとJavaScriptを読み込む。

使い方

JavaScript

タブを適用させたい要素のid（id-of-tabname）を指定し、cookieTabを実行。

HTML（準備用）

上記で指定したタブ内に、タブメニューとタブパネルを配置。
タブメニューには「class="tab-menu"」を、タブパネルには「class="tab-panel"」を付与してください。どちらもオプション設定で変更可能です。

HTML（js実行時）

アクティブなタブメニューに<li class="current">が適用されます。
デフォルト設定では、先頭のパネル（#some-tabA）を表示します。

オプション

オプション項目		デフォルト値	内容
activeTab		0	初期表示しておくタブ
tabMenuElm		.tab-menu	タブメニューとする要素名（#idや.class等のCSS記法にて指定）
tabPanelElm		.tab-panel	タブパネルとする要素名（#idや.class等のCSS記法にて指定）
cookie		使用する	cookieを使用しない（false）
cookie	name	jcookieTab	jcookieTab-(id-of-tabname) = 0 の形式で書き込み
	expires	7	cookieの有効期限 [単位：日]
	path	(none)	cookieの有効範囲：設定したページのみ有効(none), サイト全体で有効（/）etc.
	secure	(none)	セキュアな通信時のみcookieを送信（true）

オプション指定方法

ライセンス

MITライセンスでの配布となります。

jQuery crossFader

• デモページ
• ダウンロード

固定リンク

パソコンの調子が最近悪うございまして。これを機に買い替えを検討してるんだけど、セットアップのことを考えると、気軽に乗り換えられないというジレンマ。

でも寿命は時間の問題っぽいので、来たるべきその日のために、インストールすべきフリーソフトをまとめておく。単なる自分的まとめだけど、ま、それはいつものことということで。。。

ファイル・フォルダ関連

ブラウザ関連

サーバ関連

フォーマット変換

メール・チャット関連

ユーティリティ

以上、そんな感じで。
他の人って、どんなソフト使ってるんだろ。
これいいよ！ってソフトがあれば、たれこみプリーズです。

固定リンク

前回の、Movable Type移行篇に続き、WordPressの移行についてまとめ。

サーバ移転先

【移転前】ロリポップ　⇒　【移転先】エックスサーバ

WordPressの移行手順

こんな感じで移行しました。

1. アプリケーションのバージョンチェック
2. WordPressデータベースのバックアップ
3. MySQLをバージョンアップ（※必要な場合のみ）
4. WordPressのバージョンアップ
5. 新サーバにWPをインストール
6. 新サーバにデータをインポート

1. アプリケーションのバージョンチェック

MTのときにも書いたけど、移行に失敗しないようWordPressのバージョンを揃えるところから。サーバ移転するし、どうせなら最新の環境で動かしたくて、WordPress3系にバージョンアップ。

このとき、移転先のMySQLのバージョンもチェックして、違ってたら合わせる。エックスサーバーはMySQL5が使えるので、ロリポップで事前にバージョンアップすることにした。

まとめると、こんな感じ。

サーバ	WordPress	PHP	MySQL
移転前：ロリポップ	WordPress 2.8.4	PHP 5.2.6	MySQL 4.0
移転先：エックスサーバー	WordPress 3.0.4	PHP 5.1.6	MySQL 5.0

2. WordPressデータベースのバックアップ

前に、Wordpress2.8へ自動アップグレードしようとして、華麗に失敗した苦い経験があるので、バックアップは入念に行う。MySQLのバージョンアップを行う前に、まずはバックアップ。面倒くさくてもバックアップ。なにはともあれ、バックアップです。

WordPressの管理画面からもバックアップできるけど、プラグインの設定が引き継げないので、「phpMyAdmin」で行う。

実際の作業は下記サイトを参考にさせてもらいました。

（参考）

データベースのバックアップ - WordPress Codex 日本語版

http://wpdocs.sourceforge.jp/データベースのバックアップ

WordPressのサーバー移転メモ：バックアップ編 | コリス

http://coliss.com/articles/blog/wordpress/howto-backup-wordpress-data-for-change-server.html

3. MySQLをバージョンアップ（※必要な場合のみ）

エックスサーバーでMySQL5を使いたかったので、ロリポップ側でも事前にバージョンアップしておく。

ちなみに、WordPress Codexによると、WordPress 3.2からは、PHP 5.2 以上、MySQL 5.0.15 以上がサーバ要件となるみたい。まだ先の話だけどね。。

MySQL5データベースへ移行

作業は下記サイトを参考に進めました。

（参考）

「よろずや工房」のPCよろずカルテ ≫ Blog Archive ≫ ロリポップでのMySQL4からMySQL5への移行

http://www.ntfcorp.jp/yorozuya/?p=4770

MySQL5への移行 / ユーザー専用ページ / マニュアル - ロリポップ！

http://lolipop.jp/manual/user/mysql5-upd/#search_word=mysql

wp-config.phpを書換

続いて、データベースの設定情報を変更するため、WordPress設定ディレクトリ内の「wp-config.php」を書換。

ロリポップのマニュアルがよくまとまっていて親切です。

4. WordPressのバージョンアップ

その前に、もう一回バックアップを取っておく。失敗は怖いです。。。

バックアップが完了したら、Wordpressを自動アップグレード！なのだが、バージョンアップの前に、「プラグインをすべて無効化」しておくこと。先人の教えに忠実に従いましょう。

アップグレードが終了したら、プラグインを有効化して、表示を確認。問題なければ、再度バックアップ。これでようやくサーバ移転用データ、ゲットです！

5. 新サーバにWPをインストール

エックスサーバーの自動インストール機能を利用して、楽させてもらいました。ありがとう、中の人！

最初、ログインできなくて焦ったんだけど、「wp-config.php」内にWordpressのインストールディレクトリを明示的に指定して無事解決です。

（参考）

wordpress ブログのアドレス(URL)を変更したらログインできない - ブログ - 教えて！goo

http://oshiete.goo.ne.jp/qa/4755986.html

wp-config.php の編集 - WordPress Codex 日本語版

http://wpdocs.sourceforge.jp/wp-config.php_の編集

6. 新サーバにデータをインポート

さっきバックアップしたデータを「phpMyAdmin」を使用してインポート。
作業は下記サイトを参考に進めました。

（参考）WordPressのサーバー移転メモ：セットアップ編 | コリス

http://coliss.com/articles/blog/wordpress/howto-setup-wordpress-data-for-change-server.html

画像パスの変更

新サーバでインストールディレクトリが変更になる場合、インポート用データの画像パスを変更しないと画像が表示されない。ということで、下記2つのSQL文を発行してやりましょう。

（参考）

WordPressで使える知ってると便利な13のSQL文 | Web活メモ帳

http://blog.verygoodtown.com/2010/02/wordpress-useful-sql-13/

WordPress を別のディレクトリに移動する：トイレのうず／ぼやき

http://www.1010uzu.com/boyaki/200902-09160050.html

最後に

以上で、WordPressの移転が完了。
あとは、プラグインの動作確認とか、もろもろ検証しときましょう。

次回は、メールサーバ変更（GoogleApps）についてまとめる予定です。
がんばれ、オレ。

固定リンク