http://w.atwiki.jp/k-designer/ 意匠部@wiki BETA ja 2009-05-08T11:59:04+09:00 1241751544 https://w.atwiki.jp/k-designer/pages/78.html 1pxのSWFが裏で動いている場合、表示領域におかないと(ページの最下部に置いてあったりすると) ファーストビューでシステムが動作しないままとまってしまうことがある。 見えなくても絶対配置で見える場所に置くと動作するようになる。 例：ホンデレラの書籍生成画面 http://honderella.kayac.com/ ソースの下のほうで生成用SWFが動いてる 慣れたFD/PGと一緒に制作する場合は ほとんどこんなことは起こらないんだけど。。。 念のため覚えておこう。 2009-05-08T11:59:04+09:00 1241751544 https://w.atwiki.jp/k-designer/pages/77.html *インストールする必要があるもの -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-23T19:10:35+09:00 1240481435 https://w.atwiki.jp/k-designer/pages/76.html **基本方針、注意点 -とにかくDocomoが鬼門。 -pとかhnとかPCサイトのコーディングのときに必要なタグの存在は忘れる。ブロック要素はdiv、インライン要素はspanで装飾。 ***以下、早い順。PGがいるなら断然1にすべき。 +XHTMLでコーディングし、docomo向けには変換プログラムを使う +docomoに合わせてすべてtableコーディング +キャリアごとに手動で別ページを用意する **キャリアごとの違い ***table レイアウト ***float と clear -<br clear="all" /> は使わないほうがよさげ ***フォーム -プロパティが足りていないと動かなかったりそもそも表示されなかったりする。必要なものは全部書く。 -docomoで<form action="/">のactionが抜けてるとinputが表示されない -auでselectで初期値が設定されていないとradioボタンになってしまう ***フォントサイズ ※変換プログラムで変換可能 -xhtmlを使う場合（au） style="font-size: ;" xx-mall　x-small→小 small midium large→中 x-large xx-large →大 -xhtmlを使わない場合（docomo） <font size=""> 1,2→小 3→中 4,5 →大 -デザインの段階では そもそも機種によってバラバラだったりするのでそれを想定した[[デザイン]]は難しいが、 よく使われる中くらいのサイズを想定しておけばだいたい間違ったことにはならない。 そのとき中くらいサイズの一文字は20px×20pxでデザインをしておくとよい ***背景色 ※変換プログラムで変換可能 -xhtmlを使う場合（au） backgroundまたはbackground-color -xhtmlを使わない場合（docomo） table bgcolorまたはbackground 色を16進数で指定する場合、3桁で省略してはいけない。（#F00） 6桁（#FF0000）で書く。 ***罫線 -hrタグは癖が強いので使 2009-03-10T08:59:14+09:00 1236643154 https://w.atwiki.jp/k-designer/pages/75.html *概要 -entryBody内のリンクを全て自動的に別ウインドウで表示したいときに、mtのjsを書き換えます。 *使い方 -/cms/mt-static/js/common/Editor/Iframe.js をページ下部の「添付ファイル」にあるIframe.jsで上書きしてください。 *補足 -諸事情でrel="external"にはできず、jsで別ウインドウを開くようになっています。 -★MT4.2でしか使えません！ 2008-11-28T19:50:17+09:00 1227869417 https://w.atwiki.jp/k-designer/pages/74.html *作業環境を整える +[[CSS・XHTML/コーディングをはじめよう/作業ディレクトリの準備]] +[[CSS・XHTML/コーディングをはじめよう/ツールの準備]] [[リンク>http://]] //　以下なるべくそのまま入れてください #divclass(boxData){ *このページの情報 **ここより下層のページ #ls2() **最終更新日 &update(format=Y/m/d H:i:s) } 2008-11-12T11:14:53+09:00 1226456093 https://w.atwiki.jp/k-designer/pages/73.html *携帯サイト制作の鉄則 -[[携帯/キャリア別コーディング]] **携帯サイトのデザイン -とりあえず横幅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/ 2009-03-10T09:00:22+09:00 1236643222 https://w.atwiki.jp/k-designer/pages/72.html *タグ regex="s|http://www.xxx.co.jp||" *使い道 -MTでは画像やリンクがhttp:からの絶対パスで吐き出されてしまうので、テストと本番でドメインが違う場合など、&frasl;から始まるパスに書き換えたいときに。 *使い方 -MTAssetURLや、MTentryLinkなど、URLが吐き出されるタグすべてに対して個別に付与する必要がある <$MTentryLink regex="s|http://www.xxx.co.jp||"$> -EntryBodyに複数の画像がある場合は、以下のように記述&br()（最後にgを付けない場合は一番最初の画像だけが処理される） <$MTEntryBody regex="s|http://www.xxx.co.jp||g"$> 2008-10-17T14:19:07+09:00 1224220747 https://w.atwiki.jp/k-designer/pages/70.html #contents(fromhere=true) （途中） ユーザビリティテスト までいかない、一般的なシミュレーションについて -文字数は増減するのか？（ユーザが入力する場所では特に注意） -途中にリンクやURLは入るのか？(文字数制限する場所では特に注意) - - - - - //　以下なるべくそのまま入れてください #divclass(boxData){ *このページの情報 **ここより下層のページ #ls2() **最終更新日 &update(format=Y/m/d H:i:s) } 2008-10-09T21:46:20+09:00 1223556380 https://w.atwiki.jp/k-designer/pages/69.html *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-04-21T10:31:13+09:00 1240277473 https://w.atwiki.jp/k-designer/pages/68.html *PNG画像圧縮ソフト ファイルサイズを減らして表示を早くしよう。 **[[PNGGauntlet>http://www.gigafree.net/tool/graphiccomp/pnggauntlet.html]](Win) 最低でも1割近くは減る。画像によっては9割減ることも。 インストール手順参考サイト：[[perfectsky>http://www.perfectsky.net/pnggauntlet/]] 2008-10-06T17:31:14+09:00 1223281874