アーカイブ:Webデザイン

携帯サイト制作の参考情報(公式の一覧)

携帯サイト制作時に参考になるキャリア公式情報のリンク一覧。
情報がほしい時にかぎって、なかなかみつからないので。


■docomo


XHTML 概要(文字コード、画像など)
http://www.nttdocomo.co.jp/service/imode/make/content/xhtml/


iモード対応XHTMLのバージョン
http://www.nttdocomo.co.jp/service/imode/make/content/xhtml/about/index.html


iモード対応のタグリスト(PDF)
http://www.nttdocomo.co.jp/binary/pdf/service/imode/make/content/xhtml/HTML_XHTML_taglist.pdf


iモード対応機種 対応コンテンツ・機能一覧(PDF)
http://www.nttdocomo.co.jp/binary/pdf/service/imode/make/content/spec/imode_spec.pdf


画面領域(ディスプレイ解像度)
http://www.nttdocomo.co.jp/service/imode/make/content/spec/screen_area/


画面の容量(1ページの容量)
http://www.nttdocomo.co.jp/service/imode/make/content/xhtml/notice/standard/index.html


ユーザーエージェント
http://www.nttdocomo.co.jp/service/imode/make/content/spec/useragent/


iモードセンタのIPアドレス帯域
http://www.nttdocomo.co.jp/service/imode/make/content/ip/


ツールダウンロード(i-mode エミュレータ、その他ツール)
http://www.nttdocomo.co.jp/service/imode/make/content/download/index.html


■au


XHTML Basic 概要
http://www.au.kddi.com/ezfactory/xhtml.html


XHTML Basic 技術情報
http://www.au.kddi.com/ezfactory/tec/spec/xhtml.html


機種別情報一覧 
http://www.au.kddi.com/ezfactory/tec/spec/new_win/ezkishu.html
ブラウザ種別 WAP2.0がXHTML対応。


サーバ設定・文字コード指定
http://www.au.kddi.com/ezfactory/tec/spec/4_2.html


ファイルサイズ(1ページの容量)
http://www.au.kddi.com/ezfactory/tec/spec/4_3.html


ユーザーエージェント
http://www.au.kddi.com/ezfactory/tec/spec/4_4.html


IPアドレス帯域
http://www.au.kddi.com/ezfactory/tec/spec/ezsava_ip.html


Openwave SDK(ezweb エミュレータ)
http://developer.openwave.com/ja/index.html


■softbank


WEB & NETWORKについて(文字コード、画像、1ページの容量など)
http://creation.mb.softbank.jp/web/index.html


技術資料 ウェブコンテンツ概要編(PDF)
http://creation.mb.softbank.jp/download.php?docid=101
閲覧に会員登録必要。


技術資料 XHTML編(PDF)
http://creation.mb.softbank.jp/download.php?docid=104
閲覧に会員登録必要。


ユーザーエージェント
http://creation.mb.softbank.jp/terminal/index.html


Yahoo!ケータイにて利用するIPアドレス帯域
http://creation.mb.softbank.jp/web/web_ip.html


端末機能情報一覧
http://creation.mb.softbank.jp/terminal/?lup=y&cat=func


画面領域情報一覧
http://creation.mb.softbank.jp/terminal/?lup=y&cat=display


対応フォーマット一覧(画像、音源など)
http://creation.mb.softbank.jp/terminal/?lup=y&cat=form


ウェブコンテンツヴューア(エミュレータ)
http://creation.mb.softbank.jp/web/web_tool.html
DLに会員登録必要。

Illustratorでドロップシャドウなどの「効果」を外す方法

Illustratorでドロップシャドウなどの「効果」を外す方法。
効果を再編集したい時に使える。



「アピアランス」パレットに、表示されている「効果(ドロップシャドウなど)」を削除する。



■参考サイト


Illustrator(イラストレーター)で効果の再編集
http://kohtguchi.at.webry.info/200607/article_28.html

Illustratorのオブジェクトのアンチエイリアスを個別に外す方法

Illustratorで、配置したオブジェクトのアンチエイリアスを個別に外す方法。
1pxの線を書きたいけれど、にじんでしまって汚くなってしまう場合に使える。



アンチエイリアスを消したいオブジェクトを選択して、上部メニューの「効果」の「ラスタライズ」を選択する。
「ラスタライズ」のウィンドウが開いたら、「解像度」を「スクリーン(72ppi)」にして、「オプション」の「アンチエイリアス」を「なし」にして、「OK」を押す。



検索エンジン用サイト登録(管理)ツール

検索エンジン用サイト登録(管理)ツール。


Google ウェブマスターツール
http://google.com/webmasters/sitemaps/?hl=ja


Yahoo! サイトエクスプローラー
https://siteexplorer.search.yahoo.co.jp/


MSN Live Search
http://beta.search.msn.co.jp/docs/submit.aspx

ror.xmlのつくり方について

google、Yahoo!、MSN Live Search対応のサイトマップ ror.xmlについてまとめてあるサイトの一覧。


XML Sitemaps Generator
http://www.xml-sitemaps.com/


ROR Sitemap(RORサイトマップ)
http://www.suzukikenichi.com/blog/ror-site-map/


RORサイトマップで全てのサーチエンジンに対応( Google・Yahoo!・MSN )
http://tno-yotaka37upc.com/ror_sitemap.html


RORサイトマップは全ての検索エンジンに有効
http://dokodemo.rankuappu.com/syono6.html


ROR|Resources of a Resourceで全てのサーチエンジンに有効なサイトマップ
http://weblibrary.s224.xrea.com/weblog/mt/custom/rorresources_of_a_resource.html


MSNのサーチエンジンにサイトマップを登録する方法
http://seoda.seesaa.net/article/34255468.html


ror.xml構築上のトラブル回避
http://www.funaks.co.jp/it_blog/it/rorxml.html

sitemap.xmlのつくり方についてのメモ

sitemap.xmlのつくり方についてのメモ。


Google Sitemaps 用XML自動生成ツール
http://www.google-sitemaps.jp/index.htmll


sitemap.xmlを自動で収集してくれるツールと手動で入力して作成できるツール。
自動収集のほうは、あらかじめ自分のサイトにこのサイトへリンクを貼っておかないといけない。
手動作成のほうは、更新頻度、最終更新日、優先順位をできる。サイトのページ数が少なければ、こちらで充分だと思う。


Googleサイトマップ sitemap.xmlの作り方
http://www.seo-service.net/seo-blog/hint/google_sitemapxml.html

sitemap.xmlの書き方についての簡単な説明。


Sitemaps XML format - sitemaps.org 日本語訳
http://www.seo-service.net/seo-blog/memo/sitemaps_xml_format_sitemapsor.html

同じ方のブログからですが、こっちの説明もわかりやすい。


Google ウェブマスター ツール
https://www.google.com/webmasters/tools/

Pleskの操作マニュアル

Pleskの操作マニュアル。
ほとんど、レンタルサーバ会社のものだけど基本操作のところはだいたい把握できるかも。


PLESKコントロールパネルの使用方法
http://www.primustel.co.jp/01L3user-cpc65b.html


PLESK 7.5 RELOADED マニュアル
http://rentalserver.fc2.com/plesk_help/index.html


PLESK8 SSH設定手順
http://private.isle.jp/support/manualhtml/PLESK8/startupguide/index.html


PLESKライト/ミドルマニュアル
https://yt.com/manual/vs/lt/plesk/09.htm

Parallels FAQ
https://jpy.swsoft.com/?p=19&par_faq=3

VALUE-DOMAIN.COMで、DNSの設定をする

ログイン後、ユーザーコントロールパネルの「ドメイン操作」の「取得済みドメイン一覧」を選択する。設定したいドメインの「DNS」を選択する。


「設定フィールド」へ、下記項目を設定する。


「設定フィールド」が分かれている場合は、下記の通りに項目を設定する。


以下、簡単な説明。
a www IPアドレス(www.hoge.hogeのURLでアクセスできる)
a @ IPアドレス(hoge.hogeのURLでアクセスできる)
mx @ 10(メールサーバの設定。上記で、wwwのみ設定している場合は、@をwwwにする)
a サブドメイン IPアドレス(サブドメインを設定する場合。sub.hoge.hogeのURLなど)


■ 参考サイト


Value-Domain.com の設定
http://home.kendomo.net/server/value-domain.html


DNSレコード変更画面
http://setup.value-domain.com/index.php


ValueDomain-FAQ - ・XREAでのドメイン利用
http://faq.value-domain.com:8080/index.php?
%5B%5B%A1%A6XREA%A4%C7%A4%CE%A5%C9%A5
%E1%A5%A4%A5%F3%CD%F8%CD%D1%5D%5D




2008年3月12日 追記:
表記でミスがあったため、その箇所を修正しました。
2枚目の“「設定フィールド」が分かれている場合”の画像内の表記です。
mx.hoge.hoge. → hoge.hoge. に修正。
mx.は、不要でした。

Internet Explorerの別バージョンを共存させる

現状のWeb制作では、サイトの動作確認をするのにIEは6と7の両方でやらないといけない。別のWindowsで、それぞれ確認するのは、けっこう面倒。そんな時は、同じWindows内に、別バージョンを共存できるスタンドアロン型 Internet Explorer が便利。


以下のURLからダウンロードできる。


IE 7
http://tools.veloc-it.com/tabid/58/grm2id/4/Default.aspx


IE 3 〜 6
http://browsers.evolt.org/?/ie/32bit/standalone


IE 3 〜 5.5
http://www.quirksmode.org/browsers/multipleie.html



IE6とIE7で検証する方法
http://blog.webcreativepark.net/2007/01/05-161701.html


Internet Explorer 6 と Internet Explorer 7 を共存させる
http://www.koikikukan.com/archives/2006/11/08-005050.php


異なるバージョンのIEを使えるようになるスタンドアロン型IE
http://www.gorilog.net/toolbox/archives/174

Movable Typeのアーカイブのエントリーを新しい順にする

初期設定で、メインページ(index.html)ではエントリーを新しい順に並んでいるのに、カテゴリーや月別のアーカイブでは、古い順になっている。


テンプレートのカテゴリーアーカイブ、日付アーカイブで以下のように変更すると新しい順になる。


<MTEntries sort_by="created_on" sort_order="ascend">



<MTEntries sort_by="created_on" sort_order="descend">


保存後、再構築で反映される。


sort_orderに、
ascendを指定すると昇順(新しい順)、
descendを指定すると降順(古い順)になる。


Movable Typeの記事を昇順から降順に変える方法
http://cloudberryjam.info/blog/2006/10/movable_type_2.html


テンプレート・タグ リファレンス アーカイブ
http://www.sixapart.jp/movabletype/manual/3.3/
a_template_tag_reference/#index-archive

WordPressのテーマ「Almost Spring」と「Ocadia」を使うとエラーが出る

WordPressの公式サイトで配布されているテーマのAlmost Spring、Ocadiaを使うと下記のエラーが出て、サイトが表示されなくなってしまう。サイトが表示されないだけではなく、管理画面にも入れなくなってしまう。


■Almost Springを使った場合
Fatal error: Cannot redeclare almostspring_sidebar() (previously declared in /wordpressまでのURL/wp-content/themes/almost-spring/functions.php:17) in /wordpressまでのURL/wp-content/themes/almost-spring/functions.php on line 22


■Ocadiaを使った場合
Fatal error: Cannot redeclare ocadia_sidebar() (previously declared in /wordpressまでのURL/wp-content/themes/ocadia/functions.php:22) in /wordpressまでのURL/wp-content/themes/ocadia/functions.php on line 40


インストールしたサーバ上のディレクトリ(wp-content/themes)からこれらのテーマを削除すれば、デフォルトのテーマが選択される。
管理画面にもアクセスできるようになる。


■現象を確認した環境
WordPress本体:WordPress ME 2.2
テーマ:Ocadia 1.3、Almost Spring 1.3


テーマについて
http://n-c-support.com/wordpress/?p=3

FTPで「553 Could not create file.」というエラーが出る

FTPで「553 Could not create file.」というエラーが出て、ファイルをアップロードできないことがあった。


調べてみたら、root権限のディレクトリに別ユーザーでftp接続しているから、ファイルを新規でアップロードする権限がないため、出るエラーらしい。


解決方法としては、次のどちらか。
A)root権限のID、パスワードでFTP接続する。
B)root権限を持っている人(システム開発者か、サーバ管理者)にエラーの出るディレクトリのパーミッションを777にしてもらう。


↓参考ページ


553 Could not create file.
http://www.kyoto-giraffe.net/2006/04/553_could_not_create_file.html


No.11786 vsftpでアップロードすると、「553 Could not create file.」が表示される。
http://sakaguch.com/PastBBS/0022/B0011786.html




2007年8月21日 追記:
実際に、検証はしていないけどもう一つ方法があるかな。


C)root権限を持っている人(システム開発者か、サーバ管理者)にエラーの出るディレクトリを削除してもらう。その上で、再度与えられてるIDでログインし、該当のディレクトリを作成する。(これならパーミッションは755か、それ以下でもいけるはず)


*ただし、そのディレクトリが何らかのシステム関連のものだと削除すると問題が起こる可能性はある。

PCサイト、携帯サイト(各キャリア)への振り分け

具体的な方法としては、JavaScriptか、PHP(CGI、Java)か、.htaccess。
JavaScriptは、ブラウザで機能を切っていたら効かないので、
PHPか、.htaccessでやった方が無難かな。


■PHPでの設定


ブラウザ振り分けでイメージアップ!
http://japan.internet.com/column/webtech/20040929/8.html


携帯ブラウザのユーザーエージェントによる機種判別、キャリア判別
http://memorva.jp/memo/mobile/http_user_agent.php


■.htaccessの設定


携帯サイトでのユーザのターゲッティングと運営。第1回 「ユーザーの振り分け」
http://dspt.blog59.fc2.com/blog-entry-22.html


PCからの閲覧を拒否(制限・振分け)する方法(中級者向け・サーバーサイド)
http://upup.blog3.fc2.com/blog-entry-186.html

MovableTypeのRSSが、mixiで表示されない

MovableTypeのRSSが、mixiに反映されていなかったので、ちょっといじってみた。


mixiのヘルプに載ってたFeedチェッカー(?)で、チェックしてみたら、formタグを載せているエントリーが引っかかってたので外してみたが、それでも反映されなかった。


mixiで読み込むRSSをAtomではなく、RSS2.0にすると反映された。(ただし、mixiは4時間間隔で取り込むため、すぐには反映されない)
MovableType 3.34では、「このブログのフィードを取得する」では、Atomになっているけれど、RSS2.0もプラグインなしで生成しているみたい。サイトURLの後に index.xml をつけると確認できる。
RSS1.0(index.rdf)は、標準では生成していないらしい。


Atom:
http://サイトURL/atom.xml


RSS2.0:
http://サイトURL/index.xml


RSS1.0:
http://サイトURL/index.rdf




2007年5月29日 追記:
FEED Validatorで引っかかっていたのは、正確にはformタグではなくformタグ内のJavaScriptだった。ただし、そのエントリーも復活させたが、RSS2.0であれば問題なく反映されているようだ。mixi以外のサービスでも特に問題はなさそう。




2007年6月2日 追記:
rsd.xmlは実装されているみたい。


RSDとは?
http://www.nurs.or.jp/~sug/blog/archives/2006/04/000rsd.html


ちなみに、RSS1.0を使う方法は↓


RSS1.0テンプレートを追加する
http://bizcaz.com/archives/2005/12/30-002935.php

MacとWindowsで、hostsファイルの設定をする

■ Macで設定する場合
Macで、hostsの設定をする場合、10.2以降はNetInfoで設定しても反映されないらしい。Windowsみたいに簡単に設定できるソフトもないっぽいので、ターミナルでの操作が必要。(検証環境は、Mac OS X 10.4.9)


*以下は、正しい操作ではないかもしれません。参考にする場合は自己責任でお願いします。


(1)アプリケーション→ユーティリティ→ターミナルを起動する。


(2)sudo vi /private/etc/hosts を入力する。コピペでもOK。


(3)パスワードを求められるので、アカウントのパスワードを入力する。


(4)パスワードが通った後は、何度かReturnキーを押すとIPとドメインの設定が出てくる(Returnキーを押さなくてもIPとドメインの設定が表示されるときもある?)。


(5)「A」キーを押して、Vimの入力モードにして、IPとドメインを入力する。入力が終われば、「esc」キーを押して入力モードを抜ける。


(6)「:w」で保存する。保存できなければ、「:w!」で保存する。


(7)ターミナルを終了し、OSを再起動する。


ちなみに、ターミナルで以下コードを入力すれば、再起動しなくても反映されるらしい。
sudo kill -HUP `cat /var/run/lookupd.pid`


Mac OS X: ローカル NetInfo にホストを追加する方法
http://docs.info.apple.com/article.html?artnum=88158-ja


mac OSXでのhosts設定
http://coldfusion.seesaa.net/article/38477268.html


Vimの使い方
http://www15.ocn.ne.jp/~tusr/vim/vim_text0.html


Mac OS Xでhosts.txtを書き換えた際、OSを再起動しなくても済むターミナルのコマンド
http://webdog.be/archives/061125_232341.php


■ Windowsで設定する場合
Hosts File Managerを使うと簡単に設定できる。
次のURLからダウンロードできる。


Hosts File Manager
http://softwarefactory.jp/japan/products/hostsfilemanager/index.html


■hostsとDNSの優先順位
何かで読んだけど、Windowsでの優先順位はHosts→DNSだけど、Macでは逆になるみたいなことが書いてあった気がする。
気のせいか勘違いかもしれない。あとでちゃんと調べよう。

MacのDreamweaver 8で、thtml(CakePHP)を使う

Mac版 Dreamweaver 8 で、CakePHP の thtml を使う設定。
(ちなみに検証環境は、Mac OS X 10.4.9)


【1】「Extensions.txt」に " THTML " を追加する。
1行目のどこに加えてもOKみたいだけど、PHP関連ということで分かりやすくTPLの後がいいと思う。

HTM,HTML,SHTM,SHTML,HTA,HTC,XHTML,STM,SSI,JS,AS,ASC,ASR,XML,XSL,
XSD,DTD,XSLT,RSS,RDF,LBI,DWT,ASP,ASA,ASPX,ASCX,ASMX,CONFIG,CS,
CSS,CFM,CFML,CFC,TLD,TXT,PHP,PHP3,PHP4,PHP5,TPL,LASSO,
JSP,JSF,VB,VBS,VTM,VTML,INC,JAVA,EDML,WML:All Documents


HTM,HTML,SHTM,SHTML,HTA,HTC,XHTML,STM,SSI,JS,AS,ASC,ASR,XML,XSL,
XSD,DTD,XSLT,RSS,RDF,LBI,DWT,ASP,ASA,ASPX,ASCX,ASMX,CONFIG,CS,
CSS,CFM,CFML,CFC,TLD,TXT,PHP,PHP3,PHP4,PHP5,TPL,THTML,LASSO,
JSP,JSF,VB,VBS,VTM,VTML,INC,JAVA,EDML,WML:All Documents


Extensions.txtは、以下の位置にある。
両方設定してみたが、どっちか片方だけでもOKっぽい。

/Applications/Macromedia Dreamweaver 8/Configuration/Extensions.txt

/Users//Library/Application Support/Macromedia/Dreamweaver 8/Configuration/Extensions.txt


【2】「MMDocumentTypes.xml」に " thtml " を追加する。
75行目に2カ所追加する。

<documenttype id="PHP_MySQL" servermodel="PHP MySQL" internaltype="Dynamic" winfileextension="php,php3,php4,php5" macfileextension="php,php3,php4,php5" file="Default.php" writebyteordermark="false">


<documenttype id="PHP_MySQL" servermodel="PHP MySQL" internaltype="Dynamic" winfileextension="php,php3,php4,php5,thtml" macfileextension="php,php3,php4,php5,thtml" file="Default.php" writebyteordermark="false">


MMDocumentTypes.xmlは、以下の位置にある。
/Applications/Macromedia Dreamweaver 8/Configuration/DocumentTypes/Extensions.txt


【3】ダブルクリックでthtmlファイルが開くようにする。
上記のままでは、ファイルをダブルクリックしても開かない(Dreamweaverを起動して、ファイルメニューから開くでは開ける)。


ダブルクリックで開けるようにするには、次の設定が必要。


(1)thtmlの拡張子のファイルを選択する。
 ↓
(2)右クリック(もしくはcontrol+クリック)で、コンテクストメニューを出して「情報を見る」を選択する。
 ↓
(3)「このアプリケージョンで開く」で、その他を選択し、「その他のアプリケーションを選択」を開く。
 ↓
(4)「選択対象」を「全アプリケーション」にする。
 ↓
(5)Dreamweaver 8を選択する。
 ↓
(6)「このアプリケージョンで開く」の「すべてを変更...」をクリックする。


■ Windows版 Dreamweaver 8 で、thtmlを使う設定
以下を参照。方法は基本的にMacとほとんど同じだけど、いじるファイルの位置が違う。


CakePHP and Dreamweaver 8(英語)
http://www.help2go.com/Tutorials/Web_Page_Design/
CakePHP_and_Dreamweaver_8.html


THTML dan Dreamweaver !(インドネシア語?)
http://idcake.web.id/blog/2007/04/12/thtml-dan-dreamweaver/

ブラウザのシェア(利用率)

ブラウザのシェア(利用率)について調べてみた。


Top Browser Market Share Trend for April, 2006 to March, 2007
http://marketshare.hitslink.com/report.aspx?qprid=3


W3Counter Global Web Stats December 17, 2006
http://www.w3counter.com/globalstats/


ブラウザシェア(ブラウザ市場調査)
http://www.seo-equation.com/www/cat25/browser_market_share


欧米と日本におけるブラウザのシェア
http://metalsty.seesaa.net/article/31956391.html


ブラウザのシェア
http://blog.ohgaki.net/index.php/
yohgaki/2006/12/20/a_a_ca_ba_pa_ra_ma_sa_c


まとめるとこんな感じ。↓


Interet Explorer 70〜80%
Firefox 10〜20%
Safari 3〜4%
Netscape 1%以下
Opera 1%以下


日本に限ったデータだと2005年が最新版になるみたいだけど、国内でもこのデータとそんなに変わらないのでは。
海外より、IE比率がちょっと多くて、Firefox比率がちょっと少ないかもしれないけど、だいたいこの数字内に入るのではないかな。


以下は、Webサイトを制作する側としての意見。
この数字をみるとNetscape、Operaは動作確認から外したいな。業務効率も考えないといけないし。
CSSは、テーブルレイアウトと比べるとブラウザによって解釈違うので、合わせるのが結構面倒だ。コーディング自体は、CSSの方が圧倒的にしやすいし、面白いんだけど。


同じレンダリングエンジン使っているブラウザでも表示違うのはなぜだろう。
レンダリングエンジンのバージョン違い?
IEとSleipnirで表示が違っているのを見たことはないけど、FirefoxとNetscapeではけっこう表示が違っているのを見たことある。(CSSのborder、margin、paddingの指定あたりで)
Windows版IEとMac版IEもかなり別もの。

Webページのコピーライト表記について

Webページのフッタに表記されているコピーライト表記の、表記規定や更新の必要性について。


根本的なところで表記の必要性に関して。
国際条約上においても、必ず表記しておかないと著作権保護されないないわけではないようだ。表記しておいた方が著作権をアピールできるため、表記があったほうが良いようだ。
条約、表記方法などは下記URLにわかりやすくまとめてられている。


コピーライトの表記
http://www.nice-web.net/memo/2004/09/post_1.html


ただ、発行年の表記だけで良いのあれば、内容の更新を行った年に表記を修正しなくても良い気がするが、どうなんだろう。


↓JavaScriptやSSIを使って、年表記を自動更新する方法。


著作権表記の「年」表示を自動更新する!
http://allabout.co.jp/internet/hpcreate/closeup/CU20061101A/index3.htm


JavaScriptを利用する方法は簡単だけど、クライアント側の時間を利用するため明確な表記としては、弱い気がする。




2007年7月6日 追記:
一括管理する方法として便利なのは、次のどっちかかなと思う。
・コピーライト表示の画像を張る。(altには、年は書かない)
・PHPのインクルードで読み込む。(メタもこれをすると便利)