サーバの移転ではまったので覚え書きとしてメモ(というか半分以上、愚痴)。

ちょっと前から、サイトリニューアルの依頼を受けて個人で制作してた。
で、完成間近になって、さてサーバを移転するか!とDNSの設定をいじってみたがうまくいかん...。

まずは状況のまとめ

・現行サイトは独自ドメインを使用。(仮に、client-domain.com)
・サーバはロリポップを使用。(仮に、old.lolipop.jp)
・リニューアルを機にサーバをロリポップの別サーバに移転。(仮に、new.lolipop.jp)

これまでにサーバの移転を自分でやったことはなかったけど、DNSの設定を変更すりゃいいんだろ?くらいに思っていた。
が、DNSを変更しようとして重大なことに気付く。

ロリポップの場合、DNSの指定は以下のようになる。

プライマリネームサーバー uns01.lolipop.jp (IP 202.222.19.125)
セカンダリネームサーバー uns02.lolipop.jp (IP 202.222.19.126)

そう、ロリポップのレンタルサーバである限り、ネームサーバの指定値は同じなのだ。
ということはつまり、ロリポップからロリポップへのサーバ移行は、内部の設定を変更してもらわないと「無理」と言うこと。

ということで、現行サーバ管理者に早速ドメイン設定の解除を依頼した...のだが、いつまでたっても解除されない。
ロリポップに事情を話して解決方法を相談したが、「現行サーバ管理者に依頼してください」の一点張り。
これではいつまでたっても、新サーバに移行できないので、色々調べた結果、新サーバのIPアドレス当てにDNSの設定を行うこととした。

IPアドレスの調べ方(Windowsの場合)

(1) スタート > すべてのプログラム > アクセサリ > コマンドプロンプトを起動
(2) nslookup new.lolipop.jp(=調べたいサーバ)と入力してEnter
(3) 表示されたAddress: ***.***.194.77という数字がIPアドレス

IPアドレスを調べるだけなら、nslookupっていう便利なサイトがあるから、そちらを使わせてもらうのが吉。

ということで、DNSの設定をIPアドレスに変更してめでたしめでたし、と思いきや、今度はロリポップ側で403エラーが発生。
どうやら、IPアドレスをDNSの設定値にすると、ロリポップ側ではじいてしまうらしい。

しょうがないので最終手段。別サーバを用意してそこに飛ばすことに。

用意したのは、Host Mysite 101.comなる海外の無料サーバ。
無料サーバをたくさん紹介している「無料ホームページ・無料サーバー比較」というサイトから探してきた。

このサーバ、無料にも関わらずPHPにも対応してるし、広告も入らないという優れもの。
とまあ、サーバの紹介はいいとして、旧サーバのデータを「Host Mysite 101」にアップして、DNSを切り替えたところ...見事に接続できた!

画像がまったく表示されないっていうバグがあったものの、画像を別サーバに置いて、それも力ずくで解決。

この一連のサーバ移転トラブルで3日くらい悩んでた。しかも、まだリニューアル完了してないし...
まだまだ修行が足りないようです。(いろんな意味で)

最後に、この一連の作業をワークフローとして図式化しておきます。
それにしても、×多すぎ...

サーバ移転フロー

スムーズに開閉するドロップダウンメニュー

スムーズに開閉するドロップダウンメニューを作ってみた。名付けて「Waterfall Menu」。

ベースにしたのは、この Sliding JavaScript Dropdown Menu
以前、このJavaScriptを仕事で使おうとしたんだけど、メニューの下に1pxの変な余白ができたりしたので、使うのをやめてしまった。

ということで、リベンジしたよという記事。

Waterfall Menu

jsでスムーズに開閉するドロップダウンメニュー。メニューにマウスオーバすると、サブメニューが展開します。

更新履歴
  • [2011.04.29] ver0.3 マウスオーバ時、title属性がツールチップとして表示されないよう修正
  • [2008.12.15] ver0.2 FireFox2.0でドロップダウンメニューが下のレイヤーに入り込むバグを修正
  • [2008.08.21] ver0.1 リリース
使い方

HTMLのソースは以下。

<dl class="dropdown" title="two">
	<dt id="ddheader-two">Dropdown Two</dt>
	<dd id="ddcontent-two">
		<ul>
			<li><a href="#" class="underline">Navigation Item 1</a></li>
			<li><a href="#" class="underline">Navigation Item 2</a></li>
			<li><a href="#" class="underline">Navigation Item 3</a></li>
			<li><a href="#" class="underline">Navigation Item 4</a></li>
			<li><a href="#">Navigation Item 5</a></li>
		</ul>
	</dd>
</dl>

<dl class="accordion">に変更すると、下のコンテンツも連動して移動。(JavaScriptじゃなくて、CSSを変えてるだけ)。
title属性を振ってるのは、どのサブメニューが伸びるのかを指定するため。

<dl class="dropdown"> ⇒ 重なるように移動
<dl class="accordion"> ⇒ 下のコンテンツも連動して移動
<dl title="hoge"> ⇒ hogeというidが付いた<dd>が移動

実装しては見たもののHTMLのソースが全然綺麗じゃない...。
もうちょっとプレーンなソースが書けるよう努力します。


ライセンス:
クリエイティブコモンズライセンス:帰属(Attribution, by)」での公開・配布となります。


参考記事:
[JS]軽量のスムーズに開閉するドロップダウンメニューのスクリプト | コリス
Sliding JavaScript Dropdown Menu - Web Development Blog
JavaScriptでのクロージャの使い方

今さらな感じがするけど、タモリの弔辞に感動した。
特に最後の一文。
ちょっと引用してみる。

(前略)
私はあなたに生前お世話になりながら、一言もお礼を言ったことがありません。
それは肉親以上の関係であるあなたとの間に、お礼を言うときに漂う他人行儀な雰囲気がたまらなかったのです。
あなたも同じ考えだということを、他人を通じて知りました。
しかし、今お礼を言わさせていただきます。
赤塚先生、本当にお世話になりました。ありがとうございました。
私もあなたの数多くの作品の一つです。合掌。

赤塚さんとタモさんがいかに深くつながっていたかを知らされ、グッと来た。

「どう生きていいか分からなくなったときは、どう死にたいか考えなさい」という教訓があるけど、タモさんの弔辞を聞いてその意味が分かったような気がする。

この弔辞を僕はYoutubeサンスポの記事で見た。
なんでもかんでもwebでコトが済んでしまう時代。果たして、これでいいのか。

ドメインを取得した。

苦労してMTをインストールした後だし、ドメインの移行って大変そうだから敬遠していたのだが...。どうやらサーバの移転と違って、ドメインを変えるだけなら簡単にできるらしい。
それならってことで早速ドメインを取得。旧ドメインからの移行が無事終了したので、移行の流れを自分用のまとめとして記事にしておく。

まず、以前の状況のまとめ。
1. 使ってたのはロリポップのサブドメインプラン(hoge.lolipop.jp)。
2. hoge.lolipop.jp/blog フォルダにMovableType4.1をインストール済み
3. hoge.lolipop.jp/piyo フォルダにphpを使ったサイトを構築。

ほんとは「skylovedesign.net」でドメインが取りたかったんだけど、既に埋まっていたので代わりに「skyld.net」を取得。


以下、ドメイン移行手続きの流れ。

(1) ドメイン管理会社のサイトで、欲しいドメインを申請する。
(僕は「ムームードメイン」で取得しました。キャンペーン期間中につき「.net」が年間649円だったので。以下、ムームードメイン+ロリポップという組み合わせでの流れを記述。)

(2) ドメイン申請の決済終了後、ムームードメインのコントロールパネルから「ドメインの取得」を選択し、ドメインを発行する。
(この手続きを行うまで、ドメインは使えない。)

(3) 同じくムームードメインのコントロールパネルから、「ネームサーバ設定変更」を選択。『ロリポップ!のネームーサーバーを使用する』をチェックした上でDNS情報を変更する。

(4) MT管理画面から、ブログのサイト設定を変更する。
(MT管理画面 > ウェブログの設定 > サイトのurlとアーカイブのurlを新しいサブドメインのurlへ書き換え > 再構築をかけ終了)

(5) 旧ドメインにアクセスしにきた人を新ドメインに飛ばすために、.htaccessでリダイレクトの設定を行う。

この(5)ではまってしまった。

googleで調べた方法、『.htaccessに Redirect permanent文を書く』ことで新ドメインにリダイレクトさせようとした。
ソースコードは以下。

.htaccess
Redirect permanent / http://www.skyld.net/

もうお気付きの方も多いと思うが、上のように書くと無限ループに陥っておかしなことになる。
上のコードの意味は、アクセスしてきたものはすべて http://www.skyld.net/ に飛ばしなさいということ。

こう書けば、旧ドメインにアクセスしてきた場合、新ドメインにリダイレクトすること自体は可能だが、新ドメインにたどりついた瞬間、またリダイレクトしようとして。その後も、その後も同じことを繰り返す。そう、つまり無限ループ。

この無限ループを回避するため、最終的には.htaccessにこう書いた。

RewriteEngine on
RewriteCond %{HTTP_HOST} ^(skyld\.net)(:80)?
RewriteRule ^(.*) http://www.skyld.net//$1 [R=301,L]
RewriteCond %{HTTP_HOST} ^(hoge\.lolipop\.jp)(:80)?
RewriteRule ^(.*) http://www.skyld.net/$1 [R=301,L]

2~3行目: wwwなしのskyld.netへのアクセスをwww.skyld.netにリダイレクトする処理
4~5行目: 旧ドメインhoge.lolipop.jpへのアクセスをwww.skyld.netにリダイレクトする処理


これでドメイン移行完了。かかった時間は3時間くらい。はじめに思ってたよりは簡単だったかな。

あ、そうそう、ムームードメインでは引き続き○○○.netの割引キャンペーンをやってるみたい。8/25が締め切りなので、ドメイン取得を検討中の方は使ってみてはいかがでしょ?


あ、なんかアフィリエイトブログみたくなってる。まあ、気にせずに。

参考記事:
サブドメインへ移行しようかと。 - 我楽
dis-CHARGE.net - リダイレクトについて
セカンドノート: 独自ドメインへ移行

ちょっと前に、職場でFLASHのことで相談を受けた。どうやらバナーに連動してFLASHを動かしたいってことらしい。
JavaScriptを絡めればできそうだけど。って答えておいたけど、やったことなかったので試しに作ってみた。以下、備忘録として作り方を記しておく。

【作成したもの】
テキストリンクのマウスオーバに連動してシーンが移動するFLASH。
以下、デモ。

実装方法を簡単にまとめておく。

  1. テキストリンクにマウスオーバしたら、JavaScriptのonmouseoverイベントでFLASHへ渡す関数を呼び出す。
  2. FLASH側でExternalInterfaceクラスを使い、JavaScriptから引数を受け取る。
  3. 受け取った引数(たとえばlabel1)を元に、FLASH側で関数を実行し任意のフレームに移動。
  4. HTML側でテキストリンクからマウスアウトした場合は、(1)と同様にJavaScriptのonmouseoutイベントでFLASHをデフォルトの状態(1フレーム目)に戻す。

HTMLのソース

<div id="flash">
<div id="areaA">
	<object id="myFlash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="400" height="200" align="middle">
		<param name="movie" value="test.swf" />
		<param name="quality" value="high" />
		<param name="allowScriptAccess" value="always" />
		<embed src="test.swf" name="myFlash" quality="high" allowScriptAccess="always" width="400" height="200" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
</div>
<div id="areaB">
	<ul>
		<li><a href="test.html" onmouseover="callExternalInterface('label1');" onmouseout="callExternalInterface('label0');">≫シーン1へのリンク</a></li>	
		<li><a href="test.html" onmouseover="callExternalInterface('label2');" onmouseout="callExternalInterface('label0');">≫シーン2へのリンク</a></li>	
		<li><a href="test.html" onmouseover="callExternalInterface('label3');" onmouseout="callExternalInterface('label0');">≫シーン3へのリンク</a></li>	
	</ul>
</div>
</div>

JavaScriptのソース

function callExternalInterface(label) {
	getMovieName("myFlash").callFlaFunction(label); 
}
function getMovieName(movieName) {
	if(navigator.appName.indexOf("Microsoft") != -1) {
		return window[movieName]
	}else{
		return document[movieName]
	}
}

最後はActionScriptのソース

Flashの画面キャプチャ

1フレーム目
/*label0*/
_root.stop();
import flash.external.*;
var flashFunction:String = "callFlaFunction";
var realFunction:Function = playFunction;
ExternalInterface.addCallback(flashFunction, null, realFunction);
function playFunction(v_label){
	_root.gotoAndPlay(v_label);
	v_text = v_label;
}

以上、作り方をまとめてみた。
頭でなんとなく分かっていても、それを形にするのって難しいなあ。

んで、ここまで作ったけどFLASHをバナーと連動させる話は「なし」になったらしい。ま、いつか使うときがあるか。

参考記事:外部APIを使用したFlashとJavaScript

新しい記事<   1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  10  |  11  | すべての記事  >古い記事