技術メモ カテゴリー

web系技術メモ

window 7 移行メモ

[技術メモ] 2009年11月4日(水曜日) 18:47

メインの作業環境をwindows 7 x64に移行したので作業メモを残します。

マルチブート化

ハード丸ごとの新調はせず、HDD追加のみでの移行を決定。
進行中の作業が止まらないように、旧環境を残しつつマルチブート化。
旧環境を壊さないように7は新HDDへインストールし、ハード起動時にブートドライブを変える事で旧環境が立ち上がる仕様。
また、OSとアプリドライブ以外はドライブレターも含めて、新旧兼用。

アンチウイルス

Microsoft Security Essentialsにしてみました。流石に相性問題は少ないでしょうから。

アーカイバ

条件反射で+Lhaca 1.2x系 デラックス版
暗号付きアーカイブを作ったり等々用に7-Zip もインストール。

操作系調整

自動ログイン化

Windows Vista でパスワードを入力しないで自動ログインする方法を参考に自動ログイン化。

キーボード、マウス調整

キーボードのリピート設定が気に入らない(´・ω・`)一番早いと早すぎるけど、1段落とすと遅すぎる

UAC

「通知しない」に(ノ∀`) ごめんなさい

クイック検索窓

googleツールバーでクイック検索窓が使えなかったので、AHKでctrl+spaceで検索窓を開くように。

タスクバー中クリックでアプリを閉じる

Taskbar Overlordにて、同じくAHKで対応。

ホイール操作で裏の窓をアクティブに

ZTop version 1.73 で対応。ただし、エクスプローラのビュー間の挙動はいまいち。なお、
「ホイールを直下のウインドウへ送る」はoffチェック
「直下のウインドウをアクティブにする」をチェック

エクスプローラ中クリックで上階層へ

同じくztopで対応。ただし、用意されている機能では上手く動かず「マウスボタン」の変換機能で「ホイールクリック」で「 Alt+Up 」を送る設定にして対応。弊害が出る可能性あり。要留意。
弊害が出たので、AHKで対応。(“タスクバー中クリックでアプリを閉じる”分もついでにインチキ対応)

MButton::
	CoordMode,Mouse,Screen
	MouseGetPos, x, y, , WinUnderMouseClass,1
	yposition := A_ScreenHeight - y
	if (yposition < 40) {
	;if ( (yposition < 40)&&(x > 1600) ) {
		Send,{LButton}{LButton}
		Send,!{F4}
	} else {
		Send,{MButton}
		WinGetClass, class, A
		if (class == "CabinetWClass") {
			Send,!{UP}
		}
	}
return

ATOK

「無変換」をIMEオン/オフに変更。辞書を移行。

ブラウザ関係

IE

やっとシェアでIE7を逆転した8をメインに。IE7Proも概ね動き(一部動いてないアドオンもあり)快調。
ローカルflashチェック用に、セキュリティを中にし、『インターネット オプション(O)』『詳細設定』タブ『マイ コンピューターのファイルでのアクティブ コンテンツの実行を許可する*』にチェック
IE7環境は予備機に残し、IE6環境はOS新機能のXPmodeのIE6をそのまま利用することに。

その他

FireFox、Opera、Safari、Chromeの最新版をそれぞれインストール。特にFireFoxはフォルダ丸ごと(AppDataのデータフォルダも)移すだけでアドオンも動いて感動。

周辺機器のドライバ

案外困ったのがこれ。レーザープリンタ(LBP5000)、PCFAX兼スキャナ(MFC-5840CN)がどちらもwindow 7(x64)では切り捨てに。
結局、MFC-9120CNに買い換える事にしました(´・ω・`) とは言え、LBP5000は替えトナーまであるので予備機として保存。

その他

ローカルサーバ

旧環境に合わせてxamppで構築。でもVertrigoのが楽かもしれません。
phpが5.3になり、「Warning: strtotime()」が出たので、
PHP Warning: strtotime():なエラーに倣って、php.ini に date.timezone = “Asia/Tokyo” を追加。

タスクスケジューラ

データファイルのバックアップやcronが使えない環境の日時指定更新等で希に使用するタスクを移行。
エクスポート機能が便利でした。

時刻調整

HKEY_LOCAL_MACHINE\System\CurrentControlSet\Services
\W32Time\TimeProviders\NtpClient のSpecialPollInterval の値を変更。
「32」と言うのがなんか引っかかりますがとりあえず。

アイコン間隔

「デザインの詳細設定」でアイコンの間隔も変えられました(Vistaでもできた)。
デフォルトではVistaより広くなっていてアイコンを並べられなかったので……

ウィンドウ背景色

デフォルトの#ffffffでは、背景入れ忘れを見落とすので若干グレーに変更。

所感

  • FireFoxの移行が楽でしかも細部まで移せて素敵だった
  • エクスプローラがvistaより遥かに素直だった
  • でも細部のカスタマイズはやはりサード頼み
  • 大量ファイルのコピーはwindows 7 x64では大幅に改善されていた(vista32 では絶望だった)
  • x64は筋が良い。ただし古い機器のドライバ以外
  • 実はあんまりvistaと変わらないが、デフォルトの操作性が素直になってるので、vistaと違って初心者にもお勧めできる

コメントは受け付けていません。

今年、2件ほどギャラリーサイトをコーディングしました。
JSでゴリゴリと動かす感じ物でしたが、その際何気にハマったのが表題の件。
横スクロールさせる上で、まず、横一列に並べなくてはなりません。

改行させない

サンプルはこちら。
まずは、inlineで並べた要素を改行させない命令が肝。

#thumbnails {
	white-space: nowrap;
}

でもこのままでは余白がグチャグチャなので、それらを整える必要があります。

整える

#thumbnails {
	display:block;
	margin:0;
	padding:0;
	font-size:9px;
	font-family:sans-serif;
	white-space: nowrap;
}
#thumbnails img {
	margin:0;
	padding:0;
	border:0;
}
#thumbnails a {
	display:inline;
	margin:0 -2px 0 0;
	padding:0;
	border:0;
}

我ながら強引(ノ∀`)
inlineで何となく開く要素間マージンをフォント指定で調整し、その後マイナスマージンで詰めています。
このケースの場合、IE6~8、FF3.5、Chrome3.0、Safari4.0.2、mac Sarfari4.0.3、mac FF3.5 での横マージンが同じになりますが、フォントファミリー、フォントサイズ指定によって、ズレますOrz
恐るべしinline。
素直にtableを使うべきか。

コメントは受け付けていません。

最大化だって!?

コンテンツ側でブラウザサイズを変えるなんてとんでもない!と思っておりますが、
希に、ブラウザサイズを変える仕様を求められる事があります。
個人的な信念がどうあれ、仕様がないケースも(ノ∀`) ダジャレ

タグブラウザ時代

window.resizeTo(screen.width,screen.height);
window.moveTo(0,0)
コードとしては↑な感じですが、これが近頃鬼門。ブラウザのタブ化と共に、挙動が結構変わってます。

Firefox

タブが2つ以上ある状態でブラウザサイズが変わるのはFirefoxくらいです。

IE8,Safari

IE8やSafariは、タブが1つの状態もしくはスクリプトから開いた新窓ならリサイズされます。
ただし、IE8の場合はリサイズ結果は必ずしもフルスクリーンとは限らず、その挙動の差異もいまいち原因不明。

その他

Chromeは、スクリプトから開いた新窓ならリサイズされますが、手動で開いた窓はリサイズ無効。
Operaに至っては、MDI(ノ∀`)

結論

全画面化が強く求められるコンテンツはflash化が良さそうです。
その他はほどほどの対応が現実的でしょうか。

コメントは受け付けていません。

半透明のナビゲーションをホワホワさせようとして失敗の巻
$(“#sample”).fadeIn(“slow”); 等、にて透過PNGを扱うと、
IE(6も7も8も)では透過部分が黒く崩壊(ノ∀`) おのれIE

コメントは受け付けていません。

近頃、javascriptでインターフェイスを実装する機会がありました。
クリックしたり~~のイベントをjavascriptレベルで実装するのですが、押せる所でカーソルが手の形にならないんですね。
そこで、
cursor:hand;
等とCSSレベルで指定してみます……むむむFireFoxで「手」にならない(‘A`)
まぁ、そう言うモンかな……で、妥協できるシェアでも無い昨今。
調べてみると、なんと、handはIE仕様だったんですね(><)
cursor:pointer;
と記述することで解決しました。
忘れませんように。

Comments (1)

ページトップへ

携帯SEOの練習

[技術メモ] 2009年6月18日(木曜日) 17:29

WEBサービス100選 日本で有名でないおもしろサービス part2の文末に記載されている「こねた」に触発されケータイサイトを作ってみました。当然アクセスはありません\(^o^)/

アクセスにガツガツするのは嫌いなのですが、私もウェブ屋の端くれ。好き嫌い以前に、ある程度は出来なきゃなりませぬ。と言う訳で、これを機会に携帯SEOに挑戦!……基礎的すぎてお恥ずかしい(ノ∀`)

とりあえずサイト作る

後にも先にもまずはサイトを作らねば始まりません。

押しやすそうなドメインを取ってみた

携帯で押しやすそうな admda.com を取ってみました。

深く考えずにコンテンツを作ってみた

知育系の内容で、更新の必要がほとんど無いツールっぽいコンテンツを作ってみました。
深い理由はありません。ただ、絶対音感コンテンツはDoCoMo未対応に(ノД`) だってDoCoMoで音を出すのがそんなに難しいとは知らなかったんです

googleにインデクスしてもらう

勉強と言うことで、今風のやり方に挑戦。

google webmaster tools

google webmaster toolsにアカウントを作ります。

サイトマップを作成

モバイルサイトマップの作製にマニュアルがありますが、googleサイトマップ ツール等でググると、ウェブ上で使える楽ちんツールがヒットしましたのでそちらのお世話になりました。
google webmaster tools にサイトマップのURLを登録すれば、数分(精々数時間?のオーダー)で認識されました。

robots.txtを設置

ロボットウェルカムですから、無くても全く問題ないような気がしましたが、練習ですので、しっかり!?と設置。

インデクスされたのは3日後

金曜日夜にこの作業を行い、実際にインデクスされたのは月曜日でした。

アドセンスを使う

同金曜日に、Google AdSenseに申請。こちらの承認も月曜の昼ころとなりました。

ソーシャルブックマークサービスに登録

触発された元ネタに従い、めぼしいソーシャルブックマークサービスに登録。
SEO以外で勉強になった点も少なからず有りました。例えば、

  • アドレスを入力するとタイトルを自動取得してくれるインターフェイスを採用しているブクマサービスが多かった
  • 携帯のUIDを認証の代わりにしていて~もにゃもにゃ~でセキュリティ的に問題のあるサイトが少なくなかった
  • 普段携帯サイトを使わないからか、メアドの入力や空メールがとても怖かった(結局ほとんどの操作をPCから行うことに)

ポッとでの孤立サイトにドカンとアクセスが集まるような劇的な効果は有りませんが、確かに、SEO効果は有りそうです。キーワードでググると、ブクマサービスのページがかなり引っかかりますので。

マイナー検索エンジンにも登録

携帯専用の検索エンジンサービスにも何件か登録してみましたが、即反映されないからでしょうか、今のところSEO的な効果は見られません。

失敗した点

まだ、ちょっと登録した段階なのですが、それでも結構失敗したなぁと思う点があります。

  • コンテンツそれぞれを別サイトにすべきだった
  • もろもろ登録作業中に登録キーワードが揺らいだ
  • 既存カテゴリにバッチリ当てはまるコンテンツではなかった

ぼやき

社○.comなんかは、17日にドメイン登録でその日のうちにブレイク。おそらく某ニュースサイト自身による小遣い稼ぎか実験なんだろうなぁ(・ω・)
4文字+jpのドメインは某NTT系列が抑えまくってる。

コメントは受け付けていません。

position:relative;やabsoluteで位置を調整するケースがありますが、
微調整に向いているrelativeに意外な落とし穴を発見。

落とし穴1:パーセント値の扱いが違う

サンプルHTMLを用意しました。
これの、黄色のボックスの位置がブラウザによって結構変わります。
px指定の場合は大差無いんですけどね(・ω・)パーセント指定だと途端に癖が出まくります。
まとめると以下の通り。

自ボックスを基準にした指定値(ほぼ)を取る

IE6
IE7

ブラウザのinnerHeight?を基準にした指定値をとる

Chrome(2.0.172.30)
safari(4.0)

指定が無効

IE8
FireFox(3.0.10)
Opera(9.64)
macのSafari(3.2.3)

落とし穴2:webkitの挙動がwindowsとmacで異なる

微妙なバージョンの違いかも知れませんが、何れにせよ、
本件に限らず、windowsのChromeやSafariでレンダリングが意図通りだからと言って、
macのSafariでも大丈夫とは限らない訳です((((;゚Д゚))))
ちゃんと、macチェックもしましょう俺(ノ∀`)
※追記:safari4で挙動がそろいました

コメントは受け付けていません。

ウェブとしては、テキストはザックリ(゚Д゚)と流し込み、ブラウザのレンダリングに任せて整形。細かい文字送りや禁則に左右されないデザインを心がけるのが理想の一つです。
しかし、毎度毎度そうはいきませんよねぇ。
字数を決めてコピーを書いてもらった挙げ句、macだけちょっと2、3文字飛び出て改行しちゃいます(ノ∀`)とかwindowsは字足らず気味になっちゃいます……等々を避ける為にも、テキストのズレを最小に抑えたいケースも多々。

最も簡単な方法

等幅フォントにしてしまうことです。
PSDデザインの時点で、「HiraKakuPro W3」か「MS ゴシック」を使ってテキスト部をデザインしてもらいます。
これだけで、全角は大体合います。

厄介なのは実は半角

サンプルHTMLを用意しました。
このテストのAが通常の等幅フォント指定となります。(私の場合)
しかし、これですと、半角に差が出ちゃうんですよねぇ。「MS ゴシック」の半角の方が細いのです。

全角指定が先の場合

Aの書き方
font-family:”Hiragino Kaku Gothic Pro”,”ヒラギノ角ゴ Pro W3″,”MS ゴシック”,Helvetica,Arial,sans-serif;
では、全角フォントを先に指定し、その後半角フォントを指定しています。
しかし、この指定方法では、半角も「MS ゴシック」に(つまり細く)なってしまうんですよね……

半角指定が先の場合

Bの書き方
font-family:Helvetica,Arial,sans-serif,”Hiragino Kaku Gothic Pro”,”ヒラギノ角ゴ Pro W3″,”MS ゴシック”;
では、逆に、半角フォントを先に指定しています。
しかし、FireFoxとMacのSafari以外、つまりwindowsの殆どのブラウザでは、全角フォントの指定が無視されてしまいます。よって、ツカエナイパターン。

バッチリ合わせるには

まぁ、Aで良いと思います。実用的には。半角でズレますけど。
そこもバッチリ合わせたいんじゃー!!と言う場合は、
Cの方法。
全角に font-family:”Hiragino Kaku Gothic Pro”,”ヒラギノ角ゴ Pro W3″,”MS ゴシック”;
半角に font-family:Helvetica,Arial,sans-serif;
全角と半角で異なるフォントを割り当てるしかなさそうですOrz
もっとマシな方法を発見したい(ノ∀`)

コメントは受け付けていません。