ガラケー独自のstyle=”○○○”形式で書かれたインラインCSSをHTMLと分離してくれるサービス「Cascader」

2011/5/20 金曜日 Posted in DoCoMo, ソフト紹介, 記事紹介・リンク | No Comments »

ガラケー用のホームページを作る場合、ドコモの古い端末が外部CSS形式の表記に対応していないため、style="xxx"といったインラインCSS形式で記述を行わなくてはなりません。 こういったガラケー向けの独自形式で書かれたHTMLを、スマートフォンやPCなど他の環境で使い回すには、全面的な書き直しが必要になるのですが、その手間を省くことができそうなサービスがありました。   「Cascader」というサービスで、HTMLとCSSファイルとを分割してくれます。 海外のサービスですので、当然ガラケー向けに作られたサービスではありませんが、役に立ちそうです。   → Cascader - Cleaning Up The Web [cascader.co]   「Cascader」というサービスは、この記事で知りました。 → WEBマーケティング ブログ インラインCSSで書かれたHTMLを一撃でCSSファイルと分割する「Cascader」 [web-marketing.zako.org]   使い方は簡単で、ガラケー向けに作られたHTMLをコピペするだけで、自動的にCSSとHTMLファイルに分割されます。   単純な置換というわけではなく、同じ属性のスタイルは一つのクラスにまとめてくれたりもするようです。 styleだらけのHTMLでも安心です。   外部CSSに対応していないのは、iモードブラウザ1.0の端末だけですので、今後そのシェア徐々には減っていくと思われます。 iモードブラウザ1.0の端末を切り捨てるタイミングや、既存モバイルサイトのスマートフォン版対応などでこのサービスを使うと、きっと楽ができるのではないでしょうか。   関連: Pythonで書かれたモバイル向けCSSインライン化ライブラリ「HtmlCssInclude」 ケータイ3キャリアに対応するためのDOCTYPE宣言について ドコモ端末でCSSを利用するには Read more..

Pythonで書かれたモバイル向けCSSインライン化ライブラリ「HtmlCssInclude」

2010/11/30 火曜日 Posted in DoCoMo, ソフト紹介, 記事紹介・リンク | No Comments »

Pythonで書かれたモバイル向けCSSインライン化ライブラリ「HtmlCssInclude」というものがあるそうなのでご紹介します。   → gumi Engineer’s Diary モバイル向けCSSのインライン化ライブラリを公開しました [d.hatena.ne.jp]   PerlではHTML::DoCoMoCSS、PHPではHTML_CSS_Mobileといったライブラリがありますが、それとほぼ同様の動きをするもののようです。 iモードブラウザ1.0端末では、style属性を使ってCSSの指定を行わなくてはならず、ヘッダ部分に書かれたCSSや外部CSSなどの読み込みが行えません。 これをライブラリを通すことで、styleに展開してくれ、擬似的に外部CSSを実現するというものです。   ドコモ以外の端末や、最近のドコモ端末で採用されているiモードブラウザ2.0では、外部CSS読み込みがサポートされているため、この辺りは心配ないのですが、まだまだ非対応機種のシェアは高いのが実情です。 Python使いの人は要チェックのライブラリではないでしょうか。   関連: ドコモ用にCSSをインライン化してくれるPHPライブラリ「toInlineCSSDoCoMo」がバージョンアップ ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」(続き) ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」 Read more..

ケータイデザインで出来ること出来ないことがまとめられた記事「携帯サイト(html)の制作に入る前に確認しておきたいチェック項目」

2009/10/30 金曜日 Posted in デザイン, 記事紹介・リンク | 1 Comment »

良エントリーがありましたのでご紹介します。 ケータイデザインで出来ること出来ないことがキレイにまとめられた「携帯サイト(html)の制作に入る前に確認しておきたいチェック項目」というエントリーです。   → これからゆっくり考L 携帯サイト(html)の制作に入る前に確認しておきたいチェック項目 [sakaki0214.com]   ケータイサイトでは、どうしても実現しづらいデザインというものがあります。 このエントリーでは、ケータイで表現できないようなデザイン案をもらわないように、デザインファイルをもらった時にバーッと見てチェックすべき箇所をまとめているとのことです。   詳細は上記ブログ内でサンプルサイト付きで解説されているので、そちらを見ていただくとして、チェックポイントを簡単に引用させていただくと、次のようになっています。 tableの使用はOKか 背景色を複数色使っていないか 枠線を使っていないか サムネイル画像の横にテキストが来るパターン リストアイコンの下に文字が回り込んでくるかどうか ページの左右に微妙な余白が空いていないか フォントサイズは2段階ないし1段階か 太字を使っていないか   ※非常に細かい話ですが、上記エントリー内では902がテーブルが利用不可と書かれていますが、902はiモード対応HTML6.0なので全機種でtableタグが利用できるはずです。   このブログの書き手はコーダーさんとのことで、ならではの視点で良エントリーとなっていますね。 最近はケータイサイトでもかなり凝ったデザインが求められるようになってきていますので、デザインのやり取りが発生する際のチェック項目として活用してみてはいかがでしょうか。   関連: ケータイ3キャリアに対応するためのDOCTYPE宣言について 3キャリアのキャプチャを撮って保存してくれるサービス「モバミル」 ドコモ端末でCSSを利用するには Read more..

iPhone OS 3.0のSafariでコピーふきだしを無効にするには

2009/6/22 月曜日 Posted in iPhone, TIPS | No Comments »

先日リリースされたばかりのiPhone OS 3.0絡みのTIPSをご紹介します。 iPhone OS 3.0から待ちに待ったコピペ機能が付きましたが、スクロールすることが多いサイトなどでは、ふきだしが表示されてしまって不便なことがあります。 このふきだしをCSSを使って無効にする方法があるそうです。   → masuidrive on rails - iPhone 3.0のMobileSafariでコピペを無効にする方法 [masuidrive.jp]   コピー用のふきだしとは次のようなものです。 画面を少しの間長押ししていると表示されます。   次のようなCSSを指定するだけで、コピーのCSSがでなくなるようです。 body { -webkit-user-select: none; }   非常に簡単ですね。 iPhone向けサイトを作成されている方は覚えておいて損はないと思います。 他にも何かiPhone 3.0向けのTIPSをご存知の方がいましたら、ぜひタレコミをお願いします。   関連: iPhone OS 3.0がリリースされたので早速試してみました 6月26日にソフトバンクから「iPhone3G S」が発売されます iPhone OS 3.0からブラウザ上でGPS位置情報が取れるようになるとのことです Read more..

ドコモ端末がついに外部CSSに対応したようです

2009/5/20 水曜日 Posted in DoCoMo, ニュース | 3 Comments »

昨日発表されたドコモの新端末(iモードブラウザ2.0端末)では、とうとう外部CSSに対応したようです。 JavaScriptやCookie対応の影に隠れて触れられてなかったのですが、これはかなり大きな修正です。 ドコモのCSSはケータイサイト作成の上で、最大の懸念とも言ってよかったのでこれは嬉しいですね。   → NTT docomo 作ろうiモードコンテンツ iモードブラウザ2.0対応i-CSS2について [nttdocomo.co.jp]   外部CSSに加えて、もちろんヘッダ内に書くCSSにも対応しているようです。 これは昨日から新しく提供が開始された、iモードHTMLシミュレータII 8.2でも確認できます。 → NTT docomo 作ろうiモードコンテンツ iモードHTMLシミュレータII [nttdocomo.co.jp]   test.html <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd" > <html> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" /> <title>サンプル</title> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <div class="head_area">テスト</div> <hr> あいうえお<br /> <a href="test.php">リンク</a> <hr> </body> </html> test.css html { background: #99AA99; } div.head_area { text-align: ... Read more..