Googleストリートビュー テスト

今制作しているホームページに、Google ストリートビューの設置を考えています。

大きな地図で見る

と、今までの Mac OS X 10.5.5 safari3.1.2 の環境にて確認していましたが、Windows 環境で IE6/7で見た場合は、初めは表示されるのですが、リロードすると表示されなくなります。

続きを読む "Googleストリートビュー　テスト"

FTP を簡単に使おう。

ホームページを制作する場合、必要になるのが FTP です。
FTP（File Transfer Protocol）一般的には、「エフティピー」とそのまま呼ばれています。
詳細は、e-Words をご参照してください。

FTPとは 【File Transfer Protocol】

通常、FTP に関しては、ホームページ制作ソフトを利用いる場合余り意識する必要も無く、ホームページ制作ソフトに FTP 機能があります。ただ、ホームページ制作ソフトの　FTP 機能で足りない機能や、事故が怖い場合、FTP の専用ソフトをお勧めしています。

FTP 専用ソフトとして
Windows 環境で有れば FFFTP が定番になり、Mac OS X の環境で有れば、Cyberduck が有名です。Cyberduck は作者が海外の方な為オフィシャルサイトは英語ですが、Cyberduck はしっかり日本語化されています。ダウンロードして頂ければ日本語の環境で利用することが出来ます。

また、FTP は単にホームページのデータを公開する為に利用するのでは無く、最近ではレンタルサーバの機能として、FTP を利用した簡易なファイルサーバ機能が提供されている所も多く、容量が大きくメールに添付出来ないようなファイルを共有する場合、便利な機能です。
そのような場合、その都度 FTP ソフトを起動して利用するには少し面倒です。
Windows の場合ネットワークドライブ（もしくはリモートドライブ）と言う機能が便利です。
職場、家庭等で常時接続の環境で有ればシームレスに FTP サーバとの接続が出来るようになります。

以下に、FTP サーバをリモートドライブとして利用する設定方法をご案内します。
OS は、Windows XP です。
画像をクリックして頂くと、大きな画像が表示されます。

マイコンピュータを開きます。左側に有る「その他」内の【マイネットワーク】をクリックします。

「マイネットワーク」が開いたら、左側に有る「ネットワークタスク」内【ネットワーク プレスを追加する】をクリックします。

小窓が開いて、ウィザードが起動します。【次へ】のボタンをクリックします。

【次へ】のボタンをクリックします。

今回は FTP サーバへの接続を行います。「インターネットまたはネットワークのアドレス」欄に、FTP サーバのアドレスを記入します。FTP の資料を確認して頂き FTP サーバとして ftp.hoge.jp 等と記載されているはずです。
ちなみに「hoge.jp」は架空のドメインです。FTP サーバ情報はお手元の資料をご確認ください。
上記の例を元に記入する書式は以下の通りになります。

ftp://ftp.hoge.jp/

となります。

標準では、「匿名でログオン」にチェックが入っています。このチェックを外します。チェックを外すと、ユーザー名の欄が有効になります。FTP の資料を確認し【ユーザー名】を記入してください。ちなみに、「ユーザー名」「FTPアカウント」「アカウント」等は全て同じ意味になります。【次へ】のボタンをクリックしてください。

「このネットワークスレーブの名前を入力してください」の欄は、自動で入っていると思います。内容を確認し【次へ】のボタンをクリックしてください。

ウィザードはこれで終了です。「[完了]をクリックしたときにネットワーク プレースを開く」にチェックが入っているのを確認して頂き、【完了】のボタンをクリックしてください。

マイネットワークが開き、ネットワークドライブのアイコンが表示されます。表示されたアイコンをダブルクリックします。

ログオンの方法の小窓が開きます。「FTPサーバー」「ユーザー名」を確認してください。「パスワード」欄は空欄になっています。手元の資料を確認して記入してください。【パスワードを保存する】にチェックを入れれば、次回からパスワードが要求されなくなります。最後に【ログオン】のボタンをクリックして頂ければ、FTP　サーバにアクセス出来ます。容量が大きなファイルでも遠隔地の人とファイルを共有することが出来るようになります。

以上、ご確認ください。
ちなみに、次回からはマイネットワークを開ければ、ネットワークドライブのアイコンが見えますので、ダブルクリックして頂ければ簡単に接続する事が出来ます。

ちなみに、Mac OS X でも同等の機能が有ります。
Mac OS X はもっと簡単に、ファインダーのメニューから「移動」「サーバへ接続...」を選択すると小窓が開きます。「サーバアドレス」を記入し、「接続」ボタンをクリック、「名前」（ユーザー名、アカウント）と、「パスワード」の入力を求められます。必要事項を記入すれば FTP サーバにアクセスする事が出来ます。

ただ、Mac OS X のファインダー機能で接続した場合、ファイルをダウンロードする事は出来るのですが、アップロードする事が出来ません。多分アクセスした際の権限の問題だと思います。いまいち実用的では有りません。少し調べた所 All About の記事にて、ファインダーの FTP 機能からファイルのアップロードを行う為のユーティリティが紹介されていましたので、リンクしておきます。

FinderからFTPにアップロード

最後に個人的には、FTP では無く、WebDAV が使えるようになると嬉しく思います。
FTP は古くからある通信方式（プロトコル）な為、セキュリティ面で弱い所があります。
WebDAV は http ベースになりセキュリティを強固に出来ます。ちなみに有償ネットワークストレージサービスでは、WebDAV サービスも増えています。
レンタルサーバ会社提供のサービスでは、WebDAV はまだ提供されている所は少ないのかも知れません。
最近レンタルサーバはストレージ（ハードディスク）の容量が増えていますので、是非とも WebDAV も提供して欲しいと思います。

Javascript と 文字コードと、Windows ie の関係

ホームページを制作しておりはまりました。

最近 html ファイルは文字コードを UTF-8 で作る事が多いのですが、今回も UTF-8 で作っていました。
最近では、ユーザビリティも配慮して、文字の大きさを変更出来る Javascript を導入しています。

制作環境は、Mac OS X の環境で、Javascript も問題無く動作しており、最終確認で Windows で確認した際に、文字の大きさを変更する Javascript をクリックすると、エラーが出て動作しません。

ちなみに、Javascript は、外部ファイルとして呼び出しています。
過去に作った物を確認しても問題無く動作しおり、比較しても判りません。
Mac OS X の safari では問題が無いのになぜ、Windows の ie ではダメなんでしょうか。

と散々悩んだあげく、やる事も無く html ファイルの文字コードを　UTF-8 から試しに Shift-JIS に変更した所、無事に動作しました。
では html ファイルを Shift-JIS にすれば良いと言う問題で無く、他の所が文字化けを起こすため、html ファイルはどうしても UTF-8 で無ければいけません。

うん！と思い、外部ファイルの Javascript を確認した所、Javascript の文字コードが、Shift-JIS だった為　UTF-8 に変更し、html ファイルと文字コードを合わせた事で、無事に Javascript が動くようになりました。

基本と言えば基本何だとは思いますが・・・。

最近 html ファイルの文字コードを　UTF-8 にする事が多いのですが、既存の CGI を利用した際によく問題になる事が多いと思います。でもこれは避けて通れない道なんだと思います。

覚書として記録しておきます。

ユーザスタイルシート

10月1日に mixi の新デザインが話題になっています。

詳細に関しては、下記の参照してみてください。
結構過激な記事だと思いますが・・・。

ミクシィデザイン変更で大混乱　ビスタもマックも使えない！

個人的に操作性に関しては慣れれば良いことだと思うのですが、デザイン構成で3カラム、2カラムの選択が出来ない事に対しては、色々意見が出ています。
また、Mac OS 9 or X の IE での見方に関しては、mixi 側の配慮不足も感じますが、マイクロソフト自身がもう、Macitosh 用の IE はサポートを止めており、mixi 以外でも厳しい時代だと思いますので、利用者側で検討すべき事だと思います。
mixi でその気が有れば対応は取れるとは思うのですが、現状のシェアと Apple 自身がサポートを停止している Mac OS 9 及び IE は、動作環境から外されても仕方がないと思います。上記の記事では少し現実を見ていないではと思います。

Viest と IE7 は時間が解決する事で有り、大騒ぎする必要はありません。

今回のリニュアールでは、デザインに関して全面的に CSS を導入しており、見え方に問題が有るならユーザスタイルシートにすればという意見が有り下記の記事に参考になると思います。

• akiyan.com 様：リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた
• 名前を隠して楽しく日記 様：mixiのユーザースタイルシート書いてみた

FireFox を利用している方は、プラグインで簡単に対応出来るみたいですが、Windows で IE を利用している方も多いと思います。下記のリンクが参考になります。

リニューアル後のmixiの表示をユーザースタイルシートで変えてみる IE/Sleipnir編

ユーザスタイルシートは今まで、試した事がなったのですが試してみました。
上記で紹介されている CSS をテキストファイルで保存すれば簡単にユーザスタイルシートが利用出来ます。

ユーザスタイルシートを利用するには、スタイルシート部分をコピーしデスクトップにテキストファイルで、mixi.css と言うファイル名を付けて保存しておきます。
safari にユーザスタイルシートを適用するには、メニューの safari から、【環境設定】【詳細】から、上記保存した、mixi.css を選択すれば適用されます。
不要になれば mixi.css をゴミ箱に捨てれば元に戻ります。

ただ、ユーザスタイルシートは、他のサイトを閲覧する際に影響が出る可能性もある場合もり、個人的にはユーザスタイルシートはフォントサイズの指定位が良いのではと思っていますが・・・。
現状では、ユーザスタイルシートを適用すると、全てのサイトで適用されてしまい、思わぬ障害が発生するかも知れません。
出来る事であればユーザスタイルシートはサイト毎に指定出来るようになると嬉しく思います。
もしくは、何かユーティリティでも有るでしょうか。

ユーザスタイルシートに関しては、下記のリンクが参考になると思います。

• ユーザースタイルシートのススメ
• ブラウザの設定とユーザースタイルシート

Windows IE6 での CSS 対策

最近ホームページの制作は、基本的に XHTML+CSS で制作していますが、不条理な事が多々あります。
CSS で制作している場合、Windows の IE6 において、CSS の解釈が明らかにバグだろうと思われる所も多く、Windows IE6 だけ対策をする事になります。多くの対策はトライアンドエラーで解決するしか無いのですが、多くの人が同じ事で悩んでいると思います。

今回は、リストタグ<li>を display:block;　とブロック化した所、行と行の間に空間があいてしました。
少し調べた所。

ブロックボックス化した要素を含むリストアイテムの後ろに空行が入る(5.x/6.0)

のページが有り、明示的に padding: 0px 0px 1px 0px;　とした事で、無駄な空間を無くす事が出来ました。

上記のページは、「2ちゃんねるweb制作管理板」で話題になった各ブラウザ毎の CSS のバグに関しての纏めサイトです。

2ch はとかく色々言われていますが、技術的な事に関して話題になった事を、有志の人達が情報を整理し纏め、公開して下さっている事が多く、技術的なことで悩んだ時、web を検索すると 2ch の纏めサイトにヒントが有る事が多々あり助かっています。

2ch のスレッドも /* CSS・スタイルシート質問スレッド【66th】
まで進んでいます。

個人的には皆で共有出来る情報を纏めるのは嫌いでは無いですが、いかんせん時間の余裕が無い為なかなか参加出来ません。
時間の余裕が出来たらせめて ROM にでもなろうと思います。

上記サイトは、ただ2004年で更新が止まってしまっているのは残念に思います。
今回のバグは、web 制作者で有れば知っていて当然のバグなんだと思います。また雑誌等で公開されていることも多いのかと思います。

多くの雑誌等の元ネタは、上記のように多くの人が集まって話をしている所の情報を纏めた物も多いのではないでしょうか。

IE7 で Google マップが表示しない。

最近サイト構築の仕事が多く、日々制作に精を出しておりますがなかなか終わりません。本当はブログを書く余裕もないのですが、Google マップを設置して問題が発生し解決したので覚書で書いておきます。

現象は、サイト内に設置した Google マップが、IE7 で表示させる事が出来ず。以下のエラーが出て表示出来ません。

-- エラー内容 --
インターネット サイト
htt://〜〜は開けません。
操作が中断されました
-- エラー内容 --

とエラーが表示し、OK をクリックすると「Internet Explorerではこのページは表示できません」になってしまいます。
ちなみに、Mac OS X の safari では問題無く表示出来ています。

散々テストして原因は Google マップをコントロールしている JavaScript　を <div> や <table> タグで囲むと、上記のエラーが出て、表示させる事が出来ません。
対策として、<div> や <table> で囲まない。もしくは、JavaScript　を外部ファイルとして、html ファイルから出す事で回避する事が出来ました。

問題解決してから、別のキーワードで検索したら、下記の参考リンクがヒットしました。同じ原因だと思います。
これは、IE のバグ？それとも、Google Maps API の仕様？？

参考リンク
IE6、IE7でGoogle Mapsから取得した地図データをテーブルタグの中で表示しようとすると、地図がグレーになり表示することができません。
野菜小屋の地図をGoogle Maps APIで作ってみるテスト
Google MapsがIEで表示できない
GoogleマップとIEの「開けません。 操作は中断されました」
ETC:Google Maps API 使用時の注意点

スタイルシートの初期化

web 制作の覚書として。

スタイルシートを利用して、web を制作する際に、ブラウザ毎の挙動の違いで苦労する事が多々有ります。
最近では、事前にスタイルシートの初期設定をゼロにしてから、設定するこが多いみたいです。
web を検索していたら、スタイルシートの初期化言う事を知りました。

参考になるサイトをリンクしておきます。
スタイルを初期化する【css tips】
bodyに設定しておくと便利な3つのポイントとおまけ
CSSを書くときに最初に読み込むファイル 06年10月25日現在

上記を参考に、自分でも web　を制作する際の、ベースになるスタイルシートを作りたいと思います。

おまけ
Webデザイン超基本のお作法50選
とても参考になります。
ホームページを制作される方は一読する事をお勧めします。

良い SEO 対策とは？

japan.internet,com の記事にて

SEO の基本を忘れてはいけない

時々ホームページの制作をさせて頂く事が有りますが、時には独りよがりの要望が有ります。
私としては、ホームページは、クライアント様が自己満足するのでは無く、そのホームページを見て頂いた方に、如何に必要な情報を伝える事が出来るかを、念頭に考えて制作するように心掛けていますが、時にはご理解して頂けないクライアント様がおります。

多くのクライアント様は、私に任せて頂けますが、余りお付き合いが無い所とお仕事をさせて頂くと、厳しい場合が有ります。また、完成しているサイトのメンテナンス等で、検索エンジンにヒット出来るようにして欲しいと要望を頂きますが、無理な場合が殆どです。

上記の記事にて

さらに、「よいサイトって何ですか？」と聞かれたら、「伝えたい情報をしっかり伝え、伝えたい情報にユーザーが容易にたどり着けるようにし、新しい情報をどんどん更新するサイト」と答える。

と、言う事を依頼者側が理解して欲しいと思います。

要は、利用者側に適切な情報を伝達出来るように、心掛けて制作していれば、自ずと SEO 的にも良い結果が得られる事になると思います。

ある程度の規模の企業で有れば、社名だけで検索出来るので有れば、オール FLASH でも良いと思いますが、ホームページから集客を考えるいる場合、独りよがりでは無く、如何に必要な情報が伝達出来を一番に考え、その上でどのようにデザインするかが、デザイナーの腕では無いでしょうか。

私の場合は、最後のデザインの所が弱い為、中々 web デザイナーを名乗れません(^^:::。

最後に、最近はどうか知りませんが、お付き合いのある企業様に、SEO 対策に関して飛び込み営業や、FAX で売り込みに来る事が有るそうです。
SEO 対策なんてそんなに簡単な物では有りませんし、順位なんて保証出来ません。順位を保証すると言う業者は、信用しない方が無難かと思います。
また、正直な話 SEO 対策は1回行えば完了と言う物では無いと、理解して欲しいと思います。

IE7 の配布方法に思う

現在 IE7 の β3 が配布されていますが、正式版の配布がそろそろ始まりそうです。

ITmedia の記事にて

IE 7は自動更新で配布

上記の記事から一部引用します。

IE 7ではActiveXのオプトイン方式やフィッシング対策フィルター、セキュリティ設定修正のための「Fix My Settings」機能といったセキュリティ強化が図られ、同社は正規版Windowsの全ユーザーに対してIE 7のインストールを推奨している。

IE7 はセキュリティと機能をアップしたメジャーアップデートですので、多くの方に利用して頂きたいと思いますが、web を制作されている方はちょっと頭が痛い問題だと思います。理由はスタイルシートの解釈が、IE6 とだいぶ違うようで、IE に依存しているサイトは大きな問題になるかも知れません。

ホームページを CSS できちんと制作している場合、CSS の一部修正にて IE7 に対処出来ると思いますが、CSS をファイル個別に記述している場合は、大幅な修正になる可能性が有ると思います。。

現在　IE7β3 が配布されていますので、web 制作者は事前のか確認が絶対に必要です。
個人的には、safari　や、Firefox の見え方に近くになりますので歓迎です。
IE7 は IE6 との互換性は低くなりますので、他の環境を今まで意識していないサイトは要注意です。

IE7 の配布が自動配布で無ければ、そんなに問題にならないと思いますが、自動配布となれば利用者は何も知らず（判らず）にアップデートされて、ホームページの見え方が変わり驚くと思います。

どうなんでしょうか、web 制作会社は　IE7 の対応をどのように取るのでしょうか。
有償でお仕事にするのでしょうか、流石に無償（もしくはメンテナンスの範疇）での修正は出来ないと思いますが、高額な請求も考え物です。
ビジネスチャンスと捉えた方が良いのでしょうか(^^)。

ユーザの立場なら、マイクロソフトの都合でホームページの修正が必要になり、費用がかかるのは納得出来ないのでは？と思いますが・・・。

jcode.pl と UTF-8

ホームページを制作する際に、簡単な更新案内、ホームページ上からメールを送る為の仕組みを良く利用します。
基本的に、CGI と言うプログラムを利用させて頂きますが、最近ちょっと不具合が出ています。

実は、CGI プログラムを利用すると、文字化けを起こします。
その原因は、ホームページの文字コードに原因が有ります。基本的にホームページの文字コードは、シフトJIS にしておけば問題は無いのですが、最近制作するホームページは文字コードに UTF-8 を利用する事が多くなっており、ホームページの文字コードを UTF-8 にして、CGI を設置すると文字化けを起こします。

この原因は、CGI で利用している日本語処理モジュールが、UTF-8 に対応いていないのが原因です。多くの CGI プログラムでは、jcode.pl と言うモジュールが利用されていますが、この　jcode.pl が UTF-8 に対応していません。jcode.pl　自身の開発が２００２年で止まっているので仕方が無いと思います。

ちなみに、jcode.pl　が有ったからこそ、多くのプログラマさんが助かったと思います。もし、jcode.pl が無ければCGI プログムで日本語が利用出来なかったのではないでしょうか、作者の歌代 和正氏に多いに感謝いたします。

ただ、世の中は流れて行きますので、UTF-8 の要望も出てきており、少し調べた所、jcode.pl に変わる、jcode.pm と言うモジュールがあります。

jcode.pm は、歌代 和正氏の意思を引継ぎ、小飼 弾氏が開発し、日本語エンコードを Perl へ組込む活動を行って下さっています。

Jcode.pm - jcode.pl の後継、Encode.pm への架け橋

基本的には、 jcode.pl の代わりに、Jcode.pm に置き換え、CGI プログムの一部を修正することで、利用出来るとの事です。修正箇所を上記ホームページから引用します。

使用例

here's some.

jcode.plからの移行

1."require 'jcode.pl';" となっている箇所をすべて "use Jcode;"に
2."jcode::" となっている箇所を "Jcode::"に
ほとんどの場合、これで十分なはずです。

との事で、試しに変更した所、無事に利用出来るようになりました。

ただ、CGI ブログムの設定画面が、CGIプログム自身で html を書き出し表示させている為、逆にこの部分で文字化けを起こしてしまっています。基本的には表に出てこない領域ですので今の所放置していますが、追々対応を検討してみたいと思います。プログラマーじゃないので簡単に対処出来ないのが悲しい所です(^^;;;。

関連リンク
歌代 和正氏のブログ　log.utashiro.com
小飼 弾氏のブログ　404 Blog Not Found