WebARENA SuiteXへWordpressのインストール

今までお客様にレンタルサーバはファーストサーバ株式会社をお勧めしておりましたが、平成24年6月20日の大規模障害発生に伴い、被害に遭われたお客様がファーストサーバ株式会社との契約を打ち切り、改めてNTTコミュニケーションズの WebARENA 共有サーバ SuiteX を契約、Wordpress のインストールで少し手間取った為、覚え書きを記録しておきます。

ちなみに WebARENA は平成23年5月にクラウドサービスで障害を発生させています。
お客様が WebARENA を選択した理由はファーストサーバ株式会社とでは会社規模が違うとのこと。

WebARENA SuiteX のサイトを確認した所、Wordpress の利用は問題ないことは事前に確認していましたが、実際作業を行うといろいろ手間取りました。

続きを読む "WebARENA SuiteXへWordpressのインストール"

Flifboard 日本語化記念

Flipboard が日本語化されたので、お勧めと覚え書きです。

Flipboardとは、iPad 及び iPhone、iPod touch用に提供されている、Facebook、Twitter等のソーシャルメディア及び、Google リーダーや、サイトのRSSフィードを読み込み表示するツールです。
2012年5月16日に日本語化され使いやすくなりました。
また、アンドロイド用も開発中との事です。

Flipboard: あなたのソーシャルニュースマガジン

Flipboard の特徴は、読み込んだデータを単なる一覧では無く、雑誌のように綺麗にレイアウト表示して記事がとても読みやすくなります。ネット上の情報を Flipboard だけで管理出来るのはとても便利です。

続きを読む "Flifboard 日本語化記念"

ヤフーリスティング広告とポイントを貯めるサイトとの関係

お客様の代理で時々ヤフーリスティング広告（旧オーバーチュア）を運用する場合があります。
先日お客より依頼を頂き、ヤフーリスティング広告を始めましたが予算の消費が早く、クリックが多い事を初めは喜んでいました。

アクセスログを確認した所、実際訪れてくるサイトはヤフーで無く「げん玉」サイト言う所から訪れていることが分かりました。

げん玉｜現金に交換できるポイントを貯めるポイントポータルサイト
http://gendama.jp/

上記サイトにユーザー登録をして、サービスを利用するとポイントが貯まります。
貯まったポイントは楽天や、ツタヤ、DHC等のポイントに交換出来ます。

良くあるお小遣いを稼ぐサイトだと思います。
このような、ポイントを貯めるサイトと、ヤフーリスティング広告の関係が良く分かりませんでした。

続きを読む "ヤフーリスティング広告とポイントを貯めるサイトとの関係"

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選
とても参考になります。
ホームページを制作される方は一読する事をお勧めします。