モバイルサイトの3キャリア共通CSSと最新コーディング事情 : LINE Corporation ディレクターブログ
こんにちは、「livedoor Blog」を担当している吉沢です。 スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blog では、スマートフォン分野に注力しながら、月間15億PV あるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blog で採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。 アクセスシェア〜ライブドアの場合 まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。 1年前と比べると、iモードブラウザ2.
スマホサイトの作り方で、あんまり書かれてないことを書いてみた - Kaleidoscope
【スマホ対応サイト制作のより詳しい記事はこちら】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） スマホサイトの作り方関連のブログとかを見てて、viewport周りの基本的な設定は書かれているのですが、 個人的に重要だと思うポイントが、なかなかどなたも書いてらっしゃらないような気がするので、まとめてみました。 それは、 とにかく内側のHTML要素をハミ出さないように作る どうしてか？ ふつうは、スマホサイトというのは縦スクロールしかさせたくないですよね。 例えば、iPhoneで言うPortrait（縦）表示のとき、横幅320pxを超えたページ構成になると、 おかしな横スクロールが発生してしまいます。 viewportで拡大とかの禁止をおこなっていても、そうなります。 （まぁ、拡大とは意味が違うので当然なのですが。。。） 具体的にどうい
Androbookでノベルやゲームも！-HTMLで売上628万円?-：村上福之の「ネットとケータイと俺様」：オルタナティブ・ブログ
Androbookというandroid用電子書籍プラットフォームを作りました。誰でも簡単に無料でAndroidマーケットを通じて世界中に電子書籍を売れるサービスです。今回HTML5に本格対応しました。zipで圧縮したHTMLだけで挿絵付きノベルやゲームなども作れますし、それをAndroidマーケットを通じて世界中に出せます。androbookは手数料も取りません。無料のサービスです。 HTMLも文字だけでなく、小説に挿絵を入れたい。 ノベルゲームなどを作りたい。 絵が描けないから文字だけのコンテンツを作りたい。 そういう声がいっぱい来ていたんで実装してみました。 書籍のサンプルとして作った「ダメ人間のための起業入門」。3ページくらいで終わるやる気のない新書です。すでにAndroidマーケットで無料で配っています。サンプルのHTMLもWebにあります。 また、ゲームのサンプルも作ってみました
月間60億ページビューを誇るケータイ・ブログサービス”DECOLOG”のストーリー前編 【三橋ゆか里】 | TechWave（テックウェーブ）
［読了時間：7分］ DECOLOG（デコログ）というケータイ・ブログサービスをご存知ですか？TechWave読者には初めて耳にする方も多いかも？DECOLOGは月間ページビューが60億、10代後半から20代前半の女の子に圧倒的に支持されるケータイ・ブログサービスです。モバイルページビューは、ミクシィやモバゲー、Yahoo!モバイルに次ぐ規模。そんなDECOLOGを運営するミツバチ・ワークスの代表取締役で、TSUTAYAオンラインの立ち上げメンバーでもあった光山一樹さんにお話を伺ってきました。今回の取材はとっても新鮮でした。一言で表現しようとすると、どうしても便利な「ギャル」って言葉になってしまうけれど、実際のブロガーはそれくらいの年齢層の普通の女の子。そんな彼女たちのお話を聞いていたら、ある意味外国より異文化かもなんて思っちゃいました。新規ブロガー登録が数件だったサービス開始当初から、月間
永久保存版！？携帯コーディング、これだけ読めばすぐできる！ | KAYAC
マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 （いつもありがとうございます！） そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！ 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する） 画像を含むページ容量100KB以内（HTML自体の容量は9KB以内） 画像はgifか
iモードブラウザ2.0のJavaScriptではiframe内のコンテンツを読み出せない - ockeghem's blog
iモードブラウザ2.0では、同一ドメインであっても、iframe内のコンテンツがJavaScriptにより読み出せないよう制限が掛かっていることを確認しましたので報告します。 【追記】元の内容には、重大な事実誤認がありました。正確には、同一ドメイン・同一ディレクトリであれば読み出せます。詳しくは追記2をご覧ください。 きっかけ ケータイtwitter(twtr.jp)においてDNS Rebinding攻撃に対する脆弱性を発見・通報し、即座に修正された - 徳丸浩の日記(2010-02-22)にて既に紹介したように、twitter.comの日本のケータイ向けフロントエンドであるtwtr.jpにDNSリバインディング脆弱性があったことを確認・報告し、直ちに修正されました。このエントリの中に、以下のように書いています。 すぐに確認作業が終わるだろうと思っていたが、意外なところで失敗した。ログイン
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
iモード専用サイトのhtmlソースの閲覧方法 « mpw.jp管理人のBlog
iモードブラウザ2.0のJavaScriptを調査･研究する過程で、iモード専用サイトのhtmlソースを閲覧する方法を発見しました。 今回発見した方法を用いれば、「ドコモ・ゲートウェイ以外からのアクセスを禁止している」、「サーチエンジンのクロールを禁止している」、「XSS脆弱性が存在しない」の三つの条件を満たしているiモード専用サイトでも、htmlソースを閲覧することができます。 しかし、htmlソースを閲覧するためには、そのiモード専用サイトが別の二つの条件を満たしている必要があります。 htmlソースが閲覧可能なiモード専用サイトの条件 デフォルトホストで運用されている。（ヴァーチャルホストではない） iモードブラウザ2.0のJavaScriptからのアクセスを禁止していない。 iモード専用サイトのhtmlソースの閲覧方法 iモードブラウザ2.0のJavaScriptで、htmlソース
モバイルサイトのWebデザイン15選 - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 携帯、モバイルサイトの デザインってどうなってるのか 少し興味が沸いたのでモバイル サイトのキャプチャを取って アーカイブとしてまとめている モバイルデザインアーカイブさん から15のモバイルサイトで好きな デザインを15個厳選しました。 個人的なギャラリーとなっていますが、共感して頂ければ幸いです。キャンペーンサイトのデザインなどもあるので現在は確認出来ない事もあります。 FAT ONLINE SHOPPING 余計な情報を入れず、一番伝えたい事は画像にしてTOP絵にしています。 FAT ONLINE SHOPPING AEON Lake Town シンプルですが、画面の小さいモバイルサイトで情報を絞り込むのはかなりいいのでは。Ｆｌａｓｈで操作も軽快でした。 AE
モバイルサイト構築前に知っておきたいユーザビリティ10のポイント（第1回） | モバイルサイト構築のユーザビリティいろは | Web担当者Forum
就職したい企業・業種ランキング、トップ20は国内企業が独占【リスクモンスター調べ】 4月13日 6:30
[Think IT] 第2回：携帯サイトの制作から公開まで (1/3)
Linuxディストリビューション「Zorin OS 18.1」リリース ─ LTS版の改良と互換性強化 4月17日 1:28
[Think IT] 第1回：携帯サイトとPCサイトはここまで違う！ (1/3)
Linuxディストリビューション「Zorin OS 18.1」リリース ─ LTS版の改良と互換性強化 4月17日 1:28
3G端末（FOMA・WIN・3GC）のモバイルサイトのコーディング＆デザイン - livedoor ディレクター Blog(ブログ)
こんにちは。『Cure』や『livedoor 歌詞』を担当しているモバイルディレクターの吉沢です。 つい最近、PC サイトのディレクターが初めてモバイルサイトの開発を担当するという機会がありました。 どの情報を伝えれば初めてモバイルサイトを担当する人にもスムーズに進められるのか、PC とモバイルで一番特徴のあるコーディングとデザインについて、これだけ覚えておくと簡単な3G（FOMA・WIN・3GC）端末用モバイルサイトが作れてしまうノウハウをご紹介したいと思います。 【01】対応端末について こちらの記事にもあるとおり、3G 端末（FOMA・WIN・3GC）がアクセスの9割を占めているため、これからオープンさせるサイトの対応端末は、3G 端末で十分そうですね。 サイトの内容にもよりますが、下位端末（PDC・P型・C型など）を対応端末として含めてしまうと、機能や容量制限などに悩まされ、逆に運
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
ke-tai.org > Blog Archive > ケータイでの画像回り込みについてまとめてみました
ケータイでの画像回り込みについてまとめてみました Tweet 2008/6/11 水曜日 matsui Posted in デザイン | 7 Comments » 本日、ケータイでの「画像の回り込み」に関して調査しましたので、メモを兼ねてまとめてみます。 もちろん、キャリア毎に書き分けてしまっては意味が無いので、3キャリアで共通して使える書き方を調べてみることにしました。 まず問題となったのが、auでfloatが利かないことです。 では、オーソドックスにimgタグのalign属性を使ってみてはどうかということになりますが、今度はドコモ(XHTML)で正しく表示されません。 なかなかやっかいです。 そこで、次のようなサンプルHTMLを作成し、3キャリアでテストを行ってみました。 <img src="test.gif" style="float:left;" align="left" /> あ
HTML::Split
HTML を指定の文字数で分割するための HTMLS::Split なるモジュールを CPAN に up しましたので、さっくり使い方なんかをつらつら。 なにするモジュール？ 最初に書いたとおり、HTML を指定の文字数で分割するためのモジュールです。 携帯端末などで HTMLタグを含むテキストデータが 10KB 未満など、きびしい制限があるデバイス向けに HTML を出力する際には、PC ブラウザで見せている長文をそのまま出力するわけにはいきません（容量オーバーってことできれてしまう）。 そこで、HTML を分割する必要があるのですが、ただ、単純に HTML を分割といっても、 タグの途中できれたらどうしようもない A タグのテキストノードなんかが分割されるのはあんまりうれしくない。分割してもいいけど、次のページはどうやってはじめるのさ（ なしに突然 がやってくる）？ CSS を当てたい
TRANS - 携帯用CSSを書く上で押さえておくべきポイント
先日、diggでVitamin Features » Make your site mobile friendlyというエントリーが上がってきてました。見てみると、非常にうまい具合に携帯向けのCSSやHTMLの書き方などが紹介されていました。僕も携帯向けCSSの書き方には興味があったので、勉強がてら重要なポイントを抜き出して、和訳してみました。 和訳文は次からスタートです。（上記サイトの「mobile」は携帯電話やPDAを含めたモバイル機器が正確な訳ですが、ここでは話を分かりやすくするために「mobile」を全て「携帯」と訳しています。） 基本からスタートしよう。 既に論理的でセマンティックなHTMLを構造化しているんだったら、携帯を含めたどのデバイスでもきれいに、使いやすく、アクセシブルになっています。携帯によっては、WAPに準拠しているかもしれないし、もしかしたらWAP2もいけるかもし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
adakoda.com
お探しのページは見つかりませんでした - ma-san web design- 千葉県（四街道市・千葉市・佐倉市）でホームページ制作