WEBデザイナー覚え書きノート

上記の広告は１ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。

便利すぎるアドオン発見。

詳細はタイトルの通り、「Firefoxで別のPCとBookmark（ブックマーク）を同期（共有）するアドオン。」

会社と自宅間でのFirefoxのブックマークデータをいちいちwebメールなんかで「bookmark.htmlを添付送信して、インポートしてました！」なんて方に朗報です。

これでブックマークの整理は一台のパソコンだけで大丈夫。。
パソコンを複数台もってるあなたに贅沢で最高な一品です。
ざっくりと説明を。

ようは「Foxmarks Bookmark Synchronize」というアドオンで、PC上にあるFirefoxのBookmark（ブックマーク）がオンラインブックマークのような管理になり、別のPCでも同じアドオンをいれると、オンラインブックマークが同期できますー。ってこと。

アドオンのインストールの手順の途中にありますが、自身のアカウントを作ってオンラインのブックマークを利用します。別のPCでもそのアカウントで設定すると、その場で共有が始まるというシロモノ。

ナイス。

ブラウザのバージョンにより、インストール後、Foxmarksの設定ボタンをおすと、XMLパースエラーという不明なエラーが出ており、設定画面を開くことができず。

解決策は共通で下記。

作業についてはFirefoxを終了してから、

C:\Documents and Settings\【ユーザー名】\Application Data\Mozilla\Firefox\Profiles\【名称は各PCで異なる】\extensions\foxmarks@kei.com\chrome\chromeFiles\locale\ja\foxmarks.dtd

上記のfoxmarks.dtdをテキストエディタなどで開き、

‹!ENTITY dialog.label.forgotPassword “ユーザ名とパスワードを忘れた？”›
を五行目に、追記して保存しなおすだけ。
※普通のエディタは文字化けするため、terapadを利用して開くことをお勧めします。

例）

‹!ENTITY dialog.title “Foxmarks ブックマーク同期設定”›
‹!ENTITY dialog.label.username “ユーザ名:”›
‹!ENTITY dialog.label.password “パスワード:”›
‹!ENTITY dialog.label.rememberPassword “セッション間でこのパスワードを記憶する”›
‹!ENTITY dialog.label.forgotPassword "ユーザ名とパスワードを忘れた？"›
‹!ENTITY dialog.label.synchronization “同期設定”›
｜
｜
続く
｜

■terapad（テキストエディタ）
http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html
※分からない人はインストーラー付きで大丈夫ですよん。

それでは、よいブックマーク生活を。

dellのPCを購入。

使い慣れている1280×1024の解像度のモニターを探してたけど、dellの方の勘違いで届いてしまった20インチワイドの1680×1050もなかなかよい。

一般のシェア率を考えると、やっぱり「1024×768」が半分くらいなのでナイガシロにできない。
まぁ、制作を行う際に「見え方」を想像しながら制作ができれば、このサイズでも問題なし！

一応、無償交換はしてくれるみたいだけど、どうしようかなー。

いつものように、各ソフト、ツールやらなんやらを「いつも何使ってるっけなぁ・・なんだったっけなぁ」と未だ旧型のWinowsのOSをフル回転させ思い出しながら、オニューのPCにこれでもかとインストール。

メモをしたり、アプリのキャプチャをとったり、どんなソフトをインストールしていたかを忘れないために、いろいろするけどやっぱり実際にソフトをインストールする時には、そんなメモやらはどこか彼方へ。

記憶という、データベースはまってくもって使い物にならない。
というより、使いこなせてないだけか。

firefoxをいつも通りインストールして、サイト構築には必要不可欠の「webdevelopeｒを導入しなくちゃ！」と気づき早速導入すると・・

な、なんと！html構文のチェックをする機能がなくなってるではないか。

よくよくしらべてみると、自分で導入するような手順になっただけみたい。（気づかねーってｗ）

早速手順を。

Web Developeｒの「ツール」→から「ツールを編集する」。

こちらから追加ボタンをクリックし、「ツールの追加」から、概要を「HTML-lint」などと入力し、ツールタイプを「URL」に変更。
※キーボードショートカットはご自由にどうぞ。

そして下記のURLの入力欄に
http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi?ViewSource=on;URL=
と入力するだけ。

前にあった機能はここからどんどん追加していくみたいね、ヨシヨシ。
さぁー、これからもガッツガッツ作っていきますかー。

やっぱり、XP選択して大正解。

webdevelopeｒはこちら→http://lab.tubonotubo.jp/tools/webdeveloper/index.html

ちなみに今までのwebdevelopeｒのツールのなかに
入っていた項目は下記。

------------------------------------------------------------------------------------------------------------
■概要
→URL
------------------------------------------------------------------------------------------------------------

■HTML構文の検証 (HTML-lint:日本語)
→http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi?Stat=on&ViewSource=on&Method=URL&URL=

■CSS構文の検証 (W3C:日本語)
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=

■RSSとATOMの検証 (Feed Validator:英語)
http://validator.w3.org/feed/check.cgi?url=

■HTML構文の検証 (W3C:英語)
http://validator.w3.org/check?verbose=1&uri=

■リンク切れの検証 (W3C:英語)
http://validator.w3.org/checklink?check=Check&hide_type=all&summary=on&uri=

■米国508条アクセシビリティの検証 (Cynthia Says:英語)
http://www.cynthiasays.com/mynewtester/cynthia.exe?rptmode=-1&url1=

■W3C/WCAGの検証 (Cynthia Says:英語)
http://www.cynthiasays.com/mynewtester/cynthia.exe?rptmode=2&url1=

■ページの表示速度の検証 (英語)
http://www.websiteoptimization.com/cgi-bin/wso/wso.pl?url=

IE6でセキュリティのダイアルログが出てしまう際の対応策。

SSL接続を行っていて、特有のページのみの表示なのかどうかを原因切り分け。
iframeを使っているところ、flashを置いてるところ、など原因がありそうな部分を探る。

iframeなら、「src=」が抜けていないか、flashのページなら、codebase="http://download〜が外部にhttp通信をしようとしているのが原因なので、https://に変更する。

以上で、あっさり解決。

IE6自体のバグで、xml宣言があるとブラウザ側が後方互換モードで表示してしまい、margin:auto;が効かなくなる問題について。

WEB標準準拠でのコーディングを行う際に、必ずひっかかるところ。
あくまでもWEB標準で組みたいためにぶちあたる問題のため、xml宣言を削除するなどといったナンセンスな対策はあえて、いれてません。


対策としては以下を。

１．IE6にのみ効くCSS（ハック）を記述し、ボディ自体にtext-align:center;をかける。bodyの中コンテンツ全てにもハックを使い、センタリングされているものを任意の方向へleft rightで調整。

例） * html body { text-align:center; }

２．PHPを使い、IE6の時にだけxml宣言を吐き出さないようにする。
※phpが動かせるサーバー要、拡張子をhtml→phpにする。
※文字コードはそれぞれに合わせて変更要。

例）

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if (ereg("MSIE 6.",$ua) > 0) {
echo '';
} else {
echo '<?xml version="1.0" encoding="euc-jp"?>'."\n";
}
?>

SEO的には拡張子の違いは影響がないことは既に言われていますが、もしもphpの拡張子を嫌うようであれば、.htaccessでindex.htmlのままでphpとして動かす方法もあります。

一応、記載しておきます。

.htaccessへの記載内容
----------------------------------
AddType application/x-httpd-php .html
----------------------------------

■.htaccessについては過去記事の下記を参照ください。
http://webnooboegaki.blog33.fc2.com/blog-entry-40.html

「http://www.○○○○.com/」や「http://○○○○.com/」など、それぞれのアドレスからアクセスすると、アドレスバーにはそれぞれのアドレスで、同じページが閲覧できるサイトが多く見受けられます。

何がどういけないのかと言いますと、人間からの見た目は同じページであったとしても、検索エンジンから見た中身が全く別のものになってしまうということです。

SEO的な観点から見るとつまり「どちらからアクセスしても、ブラウザのアドレスバーに表示されるのは統一されている方が良い！」ということです。

「301リダイレクト」とは、URLが変わってサイトが引越しなどを行った際に、古いアドレスに接続しても引越し後のアドレスを自動的に読み込ませる時などに用いられる手法です。

この手法を使って自身の管理する「ドメインの表示の統一」を行うことができます。

「.htaccess（ドットエイチティーアクセス）」というファイルを生成し、サーバーのルート（トップページのある階層）に置いてあげる、それだけです。

一般的な「○○.txt」や「○○.jpg」などとは違い、名前がなく拡張子のみのファイルなので、まずメモ帳などで「sample.txt」などと名前をつけ、中身を記載してからサーバーにアップ。

そして、アップ後に名前を変更する。
【sample.txt】→【.htaccess】へ。

それでは早速、記載する内容を。

----------------------------------------------------

■「www」ありで統一する場合

Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^xxxxxxxxxx\.com
RewriteRule ^(.*)$ http://www.xxxxxxxxxx.com/$1 [R=301,L]

■「www」なしで統一する場合

Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.xxxxxxxxxx\.com
RewriteRule ^(.*)$ http://xxxxxxxxxx.com/$1 [R=301,L]

----------------------------------------------------

上記の内容を記載します。

簡単に説明すれば、ここのホームページにアクセスした時には、この内容に記載されていることを守らなければならない。といったような仕組みです。

※「xxxxxxxxxx」部分はご自身のドメインにご変更ください

どちらを使うかはご自由にどうぞ！見慣れたものとするか、シンプルイズベストとするか。大事なのは、アリナシではなく、統一して運営をするというところにあります。

余談ですが・・・

php言語などで運営されている動的なページの場合は「index.php」などがトップページになります。

各ページへのリンクを「フォルダ止め」で指定すると、基本的にはそのフォルダの「index.html」のみを読みにいく仕組みとなっています。

そういった場合に「.htaccess」を使ってあげることで、まず「index.html」を読みにいき、もしなかったら次に「index.php」を読みにいくといった指定をしてあげることも可能です。

その時の記載内容は下記です。

----------------------------------------------------

DirectoryIndex index.html index.php

----------------------------------------------------
※半角をあけて、記述すれば追記も可能です。

下記のように記載することで、合わせ技も可能です。
(wwwはナシで設定する場合)

----------------------------------------------------

DirectoryIndex index.html index.php
Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.xxxxxxxxxx\.com
RewriteRule ^(.*)$ http://xxxxxxxxxx.com/$1 [R=301,L]

----------------------------------------------------

「.htaccess」というものは非常に便利なものであり、色々な指定を行なうことができます。
便利で結構使えるものなので、どうぞご活用ください。