意匠部@wiki BETA

CSS・XHTML/コーディングルール/メールマガジンを作る際に気をつけること

2010-04-15T17:31:42+09:00

*コーディングについて 1.旧式のHTMLを使用する CSSレイアウトは使用しないで、安全で旧式のテーブルレイアウトを使用する。 ※float、positionなどは非対応、widthやmarginの解釈が間違ってるクライアントが多い 2. スタイルは、インラインで指定する head部分のスタイル指定を無視するメーラーがあるので、CSSはインラインで指定する。 ※もちろん外部スタイルシートも危険 3. 背景画像に頼った[[デザイン]]にしない &bold(){背景画像が表示されない場合がある}ので、表示されなくても破綻しないデザインにする。 4. 画像は表示されないものと考える &bold(){画像が表示されない場合でも、情報が伝わるようにデザインする。} 5. 画像には、altを設定する画像が表示されない場合、altに記述したテキストで情報を伝えられます。 6. パス指定は、絶対パスを使用する画像のパスは、http://から記述します。 ※もちろんURLも。最後にローカルで開いてもすべて表示されることを確認する癖をつけること背景はtable要素のbackground／bgcolorで指定するのが無難ただしOutlook2007では背景画像いっさい使えません！ http://itpro.nikkeibp.co.jp/article/COLUMN/20061031/252271/ 7. ファイルの容量は、小さくする容量が大きいとスパムメールになる場合があるため、可能な限り小さい容量にする。 ※ソース中の改行やスペースを取るなど小さな努力が必要。 8. フラッシュやフォームは、避けるフラッシュやアニメーションGIFは、ファイル容量を大きくします。フォームはセキュリティフラグを出すか、動作しません。 ※[[Flash]]は表示できないクライアントがほとんど。Outlook2007ではかなりのhtmlタグ・属性が使えなくなっている 9. より小さいスペースでもよいデザインデザインの幅は、少なくとも800px、できれば750px以内を目安に設計します。 ※実質的には幅650pxくらいまでがいいのではないかと思われる（ノートPCで2カラムのメーラを使う環境を想定するとその辺がギリ）　引用部分：HTMLメールの制作時に気をつけたい9つのポイント（コリス） http://coliss.com/articles/build-websites/operation/work/879.html -日本語の場合、文字コード、改行コードは配信システムに依存するので要確認。手動で配信する場合はiso-2022-jp（JIS）、改行コードはCR/LF -DTDはHTML4.01で。XHTMLは正しく解釈されないことがある -国内主要メーラで必ず表示確認すること。OutlookExpress,Thunderbird,Becky!あたりは必須。 *テキストパートも用意する -multipart/alternative方式で配信すれば、htmlメールを受信しない設定にしている人にはテキストパートが表示される。 *意外と厄介なのがWEBメール参考：CSS support in email clients http://www.campaignmonitor.com/css/ -上記の表を見るとわかるように、特にGmailは外部CSSの読み込み、headへの記述共に使えない。でも最近は使ってる人多いし、対応したい。 -&bold(){backgroundなど重要なプロパティも一切使えない}。背景画像で装飾したい場合はtableのbackground属性を使う -スペーシングはsp.gif（名前は任意。透明で1px*1pxのgif画像）を使うのが一番安全。 -width,height,margin,padding,border辺り無視されることがあるので注意 -valid志向の人は発狂しそうになるけど、グッとこらえること。 -&bold(){WEBメールに対応する場合、tableレイアウトかつCSSはすべて（aタグも含め）インラインで記述する} -gmailで隙間が空く問題背景画像を指定しているセル、画像だけが入っているセルで隙間があく。 font-size:0; line-height:0; vertical-align-bottom; を指定し、ソースの改行やスペースをとると解消される。 *アクセス解析も忘れずに -imgタグで計測 -クリック数を計測する場合はリンクをすべて計測用URLに置き換える *検証 **自分で検証する場合 +ブラウザで表示させたｈｔｍｌを全選択 +gmailでhtmlメール編集画面に貼り付け +送信

CSS・XHTML/tips/1pxのSWFは絶対配置で見える位置に置く

2009-05-08T11:59:04+09:00

1pxのSWFが裏で動いている場合、表示領域におかないと(ページの最下部に置いてあったりすると) ファーストビューでシステムが動作しないままとまってしまうことがある。見えなくても絶対配置で見える場所に置くと動作するようになる。例：ホンデレラの書籍生成画面 http://honderella.kayac.com/ ソースの下のほうで生成用SWFが動いてる慣れたFD/PGと一緒に制作する場合はほとんどこんなことは起こらないんだけど。。。念のため覚えておこう。

ツール/非PG向けローカル開発環境

2009-04-30T17:53:02+09:00

*バーチャルホスト＠WIN **XAMPP(WINDOWS) 1.下記URIよりXAMPPをダウンロード（以下、ZIP版で説明）。 http://www.apachefriends.org/jp/xampp-windows.html#2671 2.任意の場所にZIPファイルを解凍。　※パスに日本語が含まれない場所が望ましい。　　例: C:/xampp/ など（以下、上記フォルダにインストールしたと仮定して説明） 3.setup_xampp.bat を実行。 4.何かキーを押してsetup_xampp.batを終了。 5.xampp-portcheck.exe でポート80がどうなっているかチェック。　別のプログラムが使用していたら、　そのプログラムをポート80以外に変更してフリーにする。　※Skypeの場合は以下で設定変更。　　メニューバーから[[ツール]]＞設定＞詳細＞接続　　「上記のポートに代わり、ポート80を使用」のチェックを外す。 &bold(){★ここから先は仮サイト http://example/ を設定する説明をします。} 6.C:/xampp/apache/conf/extra/httpd-vhosts.conf をエディタで開き（関連付けると後でラク）、 ##NameVirtualHost *:80 　を NameVirtualHost * 　に変更。最終行に下記を追加して保存して閉じる。 Include conf/vhosts/*.conf 7.C:/xampp/apache/conf内に、vhosts フォルダを作成。 8.作成したvhosts内に example.conf というファイル作成し、以下の内容を記述、【】部分を編集して保存して閉じる（以下の設定例を参考に！）。 ServerName 【サイト名をいれる】 DocumentRoot "【作業ディレクトリのパスをいれる】" Order allow,deny Allow from all ※「サイト名」にはhttp://●●●/ の●●●を記述。　「作業ディレクトリのパス」は自分の環境に置き換える。　パスに日本語が含まれていると正しく動作しないので注意。 ■設定例：exampleの場合 ServerName example DocumentRoot "C:/works/example/htdocs" Order allow,deny Allow from all 9.C:/WINDOWS/system32/drivers/etc/hosts　をエディタで開く。 127.0.0.1 localhost 　をコピペ 127.0.0.1 サイト名　「サイト名」を変更。　※「サイト名」にはhttp://●●●/の●●●を記述。 10.C:/xampp/xampp-control.exe　をクリックしてコントロールパネルを開く。 11.Apacheの「開始」をクリック。すでに起動してたら一旦停止してから「開始」。 12.ブラウザのアドレスバーに http://example/ を入力してアクセス。　他のサイトを設定したい場合は、8～12を繰り返す。　C:/works/以下に _xampp_settings というフォルダをつくって、　その中に vhostsフォルダと hostsファイルへのショートカットをつくっておくと便利。 ■Firefoxの拡張機能[[Server Switcher>https://addons.mozilla.org/ja/firefox/addon/2409]] ローカル環境と本番環境を切り替える拡張機能。クリックもしくはCtrl+Shift+Xを押すだけで切替られる。例：　http://example/　⇔　http://www.example.com *Synergy *MACでのhostsの設定 [#u37eb8b0] +MacのTerminalで下記を入力して、hostsを開く。~ sudo vi /etc/hosts +「i」か「a」を押して挿入モードに入る。 +Winと同様にIPとサーバ名を記述。~ 例：192.168.xxx.xxx hogehoge +Escを押してノーマルモードに戻る。 +「:wq」で保存して閉じる。 ※hostsの設定が増えてくると煩雑になるので、コメントを入れて整理する例 # group1 000.000.000.000 hogehoge # group2 000.000.000.000 fuga 000.000.000.000 s.fuga [[vim（エディタ）の使い方>http://www15.ocn.ne.jp/~tusr/vim/vim_text0.html#mozTocId496119]] ------------------------------------------------------------- -----ここよりMac ------------------------------------------------------------- *バーチャルホスト＠Mac **XAMPP(Mac) 1.下記URIよりXAMPPをダウンロード（以下、ZIP版で説明）。 http://www.apachefriends.org/jp/xampp-macosx.html 2.任意の場所にdmgファイルを解凍。　※パスに日本語が含まれない場所が望ましい。　　例: C:/xampp/ など（以下、上記フォルダにインストールしたと仮定して説明） 3.setup_xampp.bat を実行。 4.何かキーを押してsetup_xampp.batを終了。 5.xampp-portcheck.exe でポート80がどうなっているかチェック。　別のプログラムが使用していたら、　そのプログラムをポート80以外に変更してフリーにする。　※Skypeの場合は以下で設定変更。　　メニューバーからツール＞設定＞詳細＞接続　　「上記のポートに代わり、ポート80を使用」のチェックを外す。 &bold(){★ここから先は仮サイト http://example/ を設定する説明をします。} 6.C:/xampp/apache/conf/extra/httpd-vhosts.conf をエディタで開き（関連付けると後でラク）、 ##NameVirtualHost *:80 　を NameVirtualHost * 　に変更。最終行に下記を追加して保存して閉じる。 Include conf/vhosts/*.conf 7.C:/xampp/apache/conf内に、vhosts フォルダを作成。 8.作成したvhosts内に example.conf というファイル作成し、以下の内容を記述、【】部分を編集して保存して閉じる（以下の設定例を参考に！）。 ServerName 【サイト名をいれる】 DocumentRoot "【作業ディレクトリのパスをいれる】" Order allow,deny Allow from all ※「サイト名」にはhttp://●●●/ の●●●を記述。　「作業ディレクトリのパス」は自分の環境に置き換える。　パスに日本語が含まれていると正しく動作しないので注意。 ■設定例：exampleの場合 ServerName example DocumentRoot "C:/works/example/htdocs" Order allow,deny Allow from all 9.C:/WINDOWS/system32/drivers/etc/hosts　をエディタで開く。 127.0.0.1 localhost 　をコピペ 127.0.0.1 サイト名　「サイト名」を変更。　※「サイト名」にはhttp://●●●/の●●●を記述。 10.C:/xampp/xampp-control.exe　をクリックしてコントロールパネルを開く。 11.Apacheの「開始」をクリック。すでに起動してたら一旦停止してから「開始」。 12.ブラウザのアドレスバーに http://example/ を入力してアクセス。　他のサイトを設定したい場合は、8～12を繰り返す。　C:/works/以下に _xampp_settings というフォルダをつくって、　その中に vhostsフォルダと hostsファイルへのショートカットをつくっておくと便利。 ■Firefoxの拡張機能[[Server Switcher>https://addons.mozilla.org/ja/firefox/addon/2409]] ローカル環境と本番環境を切り替える拡張機能。クリックもしくはCtrl+Shift+Xを押すだけで切替られる。例：　http://example/　⇔　http://www.example.com *Synergy *MACでのhostsの設定 [#u37eb8b0] +MacのTerminalで下記を入力して、hostsを開く。~ sudo vi /etc/hosts +「i」か「a」を押して挿入モードに入る。 +Winと同様にIPとサーバ名を記述。~ 例：192.168.xxx.xxx hogehoge +Escを押してノーマルモードに戻る。 +「:wq」で保存して閉じる。 ※hostsの設定が増えてくると煩雑になるので、コメントを入れて整理する例 # group1 000.000.000.000 hogehoge # group2 000.000.000.000 fuga 000.000.000.000 s.fuga [[vim（エディタ）の使い方>http://www15.ocn.ne.jp/~tusr/vim/vim_text0.html#mozTocId496119]]

MT/インストール/ローカル(Mac)

2009-04-23T19:10:35+09:00

*インストールする必要があるもの -Xcode Tools --Mac OS X Install Disc 1からインストール -MAMP --http://www.mamp.info/en/index.html *ダウンロード -[[MT4個人ライセンス>http://www.ecbuyers.com/b2c/catalog/default.php?cPath=28_127&prmcd=salk070821b2cmtper]] *ファイルの配置 -ダウンロードしたファイルを解凍してフォルダ名を「mt4（なんでもいい）」にリネーム。以下の場所にコピー。 /Application/MAMP/cgi-bin/mt4/ *MAMP起動 -スタートページがでてくることを確認 *MT4設定ウィザードここが一番の関門です。 http://localhost:8888/cgi-bin/mt4/mt-wizard.cgi -mt-staticの場所をhttp://から指定 -mt-staticのローカルの場所を指定 *メールの設定 -Sendmailを選択 *ユーザーネームなどを設定 *完了 **課題 -ImageMagicのインストール

ツール/いれたほうがいい

2009-04-21T10:31:13+09:00

*PDFリーダー Adobe以外のもある。 **[[Foxit Reader>http://www.foxitsoftware.com/pdf/rd_intro.php]](Win) 驚きの高速起動！2.3からタブ型になった。ダウンロード：[[窓の杜>http://www.forest.impress.co.jp/lib/offc/print/docviewer/foxitreader.html]] **[[クセロReader ZERO>http://xelo.jp/xelopdf/readerzero/index.html]] タブ型PDFリーダー。起動も早いし、OCR変換もできる。ウィンドウ下部の広告がちょっと…。参考記事：[[窓の杜>http://www.forest.impress.co.jp/article/2007/08/08/xeloreaderzero.html]] **[[PDF Viewer>http://www.docu-track.com/home/prod_user/PDF-XChange_Tools/pdfx_viewer?act[69]=download]](Win) タブ型PDFリーダー。他のよりちょっと起動が遅いけど、文書内にいろいろ書き込める。参考記事：[[窓の杜>http://www.forest.impress.co.jp/article/2007/04/12/pdfxchangeviewer.html]]

携帯

2009-03-10T09:00:22+09:00

*携帯サイト制作の鉄則 -[[携帯/キャリア別コーディング]] **携帯サイトのデザイン -とりあえず横幅240px、ファイルサイズ100KB以下（画像、Flash、CSS含む）で作っとけ！ -ただしauでは１つあたり4KB以上の外部CSSファイルは読み込まれないので注意！！ -ターゲットにもよるけど、色はPCサイトに比べて派手めにしておいた方がいい。 -絵文字は機種によって違うので注意。 -一列に収まらないコピーでは滅びたと思っていたマーキーが大活躍。 -文字数は意外と入らない。★調査中★ -WEBセーフカラー216色はだいたい同じように発色するので無難 **携帯サイトの広告 -キャリアの公式サイトに申請する場合は広告が入れられないので考えなくてよい。 -入れる場合は・・・（★調査中★） ***docomo向けCSS対策ライブラリ -perl　http://d.hatena.ne.jp/tokuhirom/20070809/1186617282 -PHP　http://blog.asial.co.jp/411 ***参考：その他キャリア間の差異を埋めるモジュールについて MobileCat http://mobilecat.koneta.org/ ここは実験場らしい **携帯サイトの表示確認実機でのテストは非常に手間とコストがかかるので、その前に以下の環境で万全を期しておくこと。 ***FireMobileSimulatorを使うこちもFirefox用アドオン。BETA版だけどいいかんじ！今のところ一番いいかも。 -[[ダウンロードページ>https://addons.mozilla.org/ja/firefox/addon/8519]]　※要Add-onsへのユーザ登録 -[[Firefoxを簡単に携帯シミュレータにするアドオン「FireMobileSimulator」公開中です！>http://d.hatena.ne.jp/thorikawa/20080816/1218908754]]：作者サイト ***User agent switcherを使う +Firefoxのアドオン[[User agent switcher>https://addons.mozilla.org/ja/firefox/addon/59]]を導入 +[[User Agent Switcher の携帯用のXML>http://blog.cgfm.jp/garyu/archives/112]]を公開してくださってる方がいるので、UASにこれらを追加 +Fxからチェック。とりあえずリンク切れとか大体のバランスを見るのには使える。ただしサイトによっては403になったりリクエストがループして見られない。 ***各キャリアから出てるシミュレータを使う -[[iモードHTMLシミュレータII>http://www.nttdocomo.co.jp/service/imode/make/content/html/tool2/]] -[[Openwave SDK6.2K(au)>http://developer.openwave.com/ja/tools_and_sdk/openwave_mobile_sdk/SDK62K/]]（公開停止中） -[[Softbank>https://creation.mb.softbank.jp/members/index.html]]※要会員登録なんかいまいち見られないサイトが多いのでインストールする必要はないかも。。 ***【有料】他社から出てるシミュレータを使うそれぞれの精度などについては★調査中★ ***キャリアのテストセンターを使う各キャリアで提供しているテストセンターに出向いてテストさせてもらうことができます。公式サイトを作るときはこちらの利用が必須になる場合もあります。テストしたい機種数などにより予約の空き具合が変わるので、利用するには早めのスケジューリングが必要です。また、一回に使える時間は限られているので、「すべて完成してから念のため確認する」という気持ちで行ったほうがよいでしょう。 ***【有料】外部のテスト環境を使うテスト結果をレポートしてくれる専門の会社があります。より精密なチェックが必要な場合はそういうところに委託することもできます。かなり高額になるので、よっぽどの大規模サイトを作るのでなければ使わなくてよいでしょう。 **その他忘れがちなこと -対応してない機種でアクセスしたときのページを用意する。 -携帯でも使えるアクセス解析を入れる。Google Analyticsは使えません。 **参考リンク -[[【モバイル向けサイト制作】今から始める携帯サイト制作>http://www.thinkit.co.jp/article/143/]]入門用良記事。 -[[携帯開発向けに便利な支援ツール/サイト >http://labs.unoh.net/2007/06/post_92.html]] -[[モバゲーのような携帯サイトを作るための12のTips >http://dspt.blog59.fc2.com/blog-entry-39.html]]←このサイトの情報量は凄い -[[3G端末（FOMA・WIN・3GC）のモバイルサイトのコーディング＆デザイン >http://blog.livedoor.jp/ld_directors/archives/51104376.html]] -[[ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」 >http://phpspot.org/blog/archives/2008/07/cssphptoinlinec.html]] iyahhoiの携帯カテゴリ、何気に便利！ -[[IE・FFで絵文字を表示する>http://www.iyahooi.com/entry/2008/05/ieff.html]] -[[使える絵文字一覧ページ>http://www.iyahooi.com/entry/2008/09/post_160.html]] //　以下なるべくそのまま入れてください #divclass(boxData){ *このページの情報 **ここより下層のページ #ls2() **最終更新日 &update(format=Y/m/d H:i:s) }

携帯/キャリア別コーディング

2009-03-10T08:59:14+09:00

**基本方針、注意点 -とにかくDocomoが鬼門。 -pとかhnとかPCサイトのコーディングのときに必要なタグの存在は忘れる。ブロック要素はdiv、インライン要素はspanで装飾。 ***以下、早い順。PGがいるなら断然1にすべき。 +XHTMLでコーディングし、docomo向けには変換プログラムを使う +docomoに合わせてすべてtableコーディング +キャリアごとに手動で別ページを用意する **キャリアごとの違い ***table レイアウト ***float と clear -
は使わないほうがよさげ ***フォーム -プロパティが足りていないと動かなかったりそもそも表示されなかったりする。必要なものは全部書く。 -docomoで

のactionが抜けてるとinputが表示されない -auでselectで初期値が設定されていないとradioボタンになってしまう ***フォントサイズ ※変換プログラムで変換可能 -xhtmlを使う場合（au） style="font-size: ;" xx-mall　x-small→小 small midium large→中 x-large xx-large →大 -xhtmlを使わない場合（docomo） 1,2→小 3→中 4,5 →大 -デザインの段階ではそもそも機種によってバラバラだったりするのでそれを想定した[[デザイン]]は難しいが、よく使われる中くらいのサイズを想定しておけばだいたい間違ったことにはならない。そのとき中くらいサイズの一文字は20px×20pxでデザインをしておくとよい ***背景色 ※変換プログラムで変換可能 -xhtmlを使う場合（au） backgroundまたはbackground-color -xhtmlを使わない場合（docomo） table bgcolorまたはbackground 色を16進数で指定する場合、3桁で省略してはいけない。（#F00） 6桁（#FF0000）で書く。 ***罫線 -hrタグは癖が強いので使わない。 -spacer.gifと背景色指定で対応。色の境目に画像を入れると境界がかわいくなってGood

MT/entryBodyの中のリンクを自動的に別ウインドウで開く

2008-11-28T19:50:17+09:00

*概要 -entryBody内のリンクを全て自動的に別ウインドウで表示したいときに、mtのjsを書き換えます。 *使い方 -/cms/mt-static/js/common/Editor/Iframe.js をページ下部の「添付ファイル」にあるIframe.jsで上書きしてください。 *補足 -諸事情でrel="external"にはできず、jsで別ウインドウを開くようになっています。 -★MT4.2でしか使えません！

CSS・XHTML/コーディングをはじめよう

2008-11-12T11:14:53+09:00

*作業環境を整える +[[CSS・XHTML/コーディングをはじめよう/作業ディレクトリの準備]] +[[CSS・XHTML/コーディングをはじめよう/ツールの準備]] [[リンク>http://]] //　以下なるべくそのまま入れてください #divclass(boxData){ *このページの情報 **ここより下層のページ #ls2() **最終更新日 &update(format=Y/m/d H:i:s) }

CSS・XHTML

2008-11-12T11:01:00+09:00

*はじめての方へ -[[コーディングをはじめよう(新人さん向けステップガイド)>CSS・XHTML/コーディングをはじめよう]] *tips -[[初期段階のXHTML+CSS設計>CSS・XHTML/tips/初期段階のXHTML+CSS設計]] -[[IE6で透過PNGを使う>CSS・XHTML/tips/IE6で透過PNGを使う]] -[[プログラマに頼らずフォームを設置する>CSS・XHTML/tips/プログラマに頼らずフォームを設置する]] -[[div全体をリンクにしたい>CSS・XHTML/tips/div全体をリンクにしたい]] -[[iframeの背景を透明する>CSS・XHTML/tips/iframeの背景を透明する]] -[[ハック決定版>CSS・XHTML/ハック決定版]] -[[クロスブラウザチェック>CSS・XHTML/クロスブラウザチェック]] -[[メールマガジンを作る際に気をつけること>CSS・XHTML/コーディングルール/メールマガジンを作る際に気をつけること]] -[[1pxのSWFは絶対配置で見える位置に置く>CSS・XHTML/tips/1pxのSWFは絶対配置で見える位置に置く]] *よくある失敗 +[[【】見えてるけどクリックできないエリアがある>CSS・XHTML/よくある失敗/all/見えてるけどクリックできないエリアがある]] *未解決ゾーン -[[【FF3】【Opera】【Safari】widthを指定しないと崩れる件>CSS・XHTML/未解決ゾーン/【FF3】【Opera】【Safari】widthを指定しないと崩れる件]]