モバイルアプリケーション開発のためのHTML/CSS/JavaScript関連技術まとめ
モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。 「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。 クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作
[携帯]画像を縦に隙間なく並べる方法 ver02 │ これからゆっくり考L +α
前にも同じエントリー「[携帯]複数画像を縦に隙間なく表示させられるか」をあげていますが、サンプルを作り直したので書き直してみました。 以下のようなデザインをコーディングする場合、画像を縦に隙間なく表示させる必要があります。 3つ並んでいる赤ちゃんの写真のところです。 結論を先に言ってしまうと、3キャリア1ソースで画像を縦に隙間なく表示させることは現状不可能です。 （2010年9月6日現在） ということで、以下検証結果です。 brで画像を改行 <div style="text-align:center;"> <img src="img/ph_01.jpg" alt="zzzzz" width="208" height="169" /><br /> <img src="img/ph_02.jpg" alt="いつも太陽の方向を向いてすやすや" width="208" height="149"
ケータイサイトのtableタグの特徴と、5つのデザイン例＆ソース : LINE Corporation ディレクターブログ
※文中のケータイ livedoorのPVに誤りがあり、修正いたしました (2010/9/22) こんにちは、『プチペット』を担当している吉沢です。 Webサービスのケータイ対応がやっと当たり前になってきたかと思ったら、今度はスマートフォンの対応と、モバイル業界の時の流れはものすごく速いですね。 そんな中、ケータイは新しい端末のシェアが増えていく度に、サイトで表現できる自由度が高くなり、単に作るだけではなく、デザインで差をつける時代が来ています。 それが読み取れる世の中の動きとして、たとえばモバイルデザインアーカイブさんは、年鑑が出るくらい書籍・サイト共に人気ですよね。また、ちょっと前に発売された書籍『ケータイサイト解体新書 デザインパターンから理解する実装テクニック』は、いろいろなデザインパターンからHTMLを引けるため、デザインをする上でとても参考になります。 携帯サイト年鑑2010 著
永久保存版！？携帯コーディング、これだけ読めばすぐできる！ | KAYAC
マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 （いつもありがとうございます！） そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！ 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する） 画像を含むページ容量100KB以内（HTML自体の容量は9KB以内） 画像はgifか
【ケータイ】tableタグを使って表現力アップ！（初心者向け）
こんにちは。カヤックで携帯サイトのコーディング、運用などをやっているフィリップです。 携帯コーディングでtableを使うと、ページ構成の表現度が結構広がりますので、今回は事例を使って、その基本的な使い方や落とし穴を紹介したいと思います。 tableタグは新しい機種では問題なく使えますが、古い機種の場合では効かないこともあるので、今回は以下の端末を対象とします。また3キャリア向けにxhtmlは1ソースにしています。 【docomo 902以降端末、au WIN端末、softbank 3G端末】 注意：tableの入れ子をすると、表示されない場合があるので（au端末の一部）、tableの入れ子は避けた方がよいでしょう。 【事例1】メニューなどのテキストを綺麗に並べたい時 画面のスクリーンショット html <table width="100%"> <tr> <td width="50%"> <
case:MobileDesign! モバイルサイトのデザイン紹介ブログ
case:MobileDesign! モバイルサイトのデザイン紹介ブログ 引っ越ししました。 http://case-mobile-design.com/ case:MobileDesign! モバイルサイトのデザイン紹介ブログ > 2010-02-15 >
iモードブラウザ2.0で新しく導入されたmetaタグ一覧
このたび発売されたdocomoの新機種に搭載され、大注目の中で致命的バグが見つかっている模様のiモードブラウザ2.0ですが、いろいろあったトコロで、今後のdocomo携帯のスタンダードとなるのは間違いなさそうな情勢です。 それに先立ちまして「iモードブラウザ2.0で新たに導入されたmetaタグ」を調べましたので、忘備録替わりに置いときますね。 iモードブラウザ2.0で新しく導入されたmetaタグ一覧 「描画サイズのモード」設定のmetaタグ <meta name="disparea" content="qvga" /> └QVGA（旧来のdocomo基本サイズ）で表示する。 <meta name="disparea" content="vga" /> └VGA（480*640の新仕様サイズ）で表示する。 ※本体側でも描画サイズの初期設定が出来るようです。 「ページのリフレッシュ」設定のme
– このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2024年5月時点の調査。
[携帯]入力フォームとボタンを横一列に並べる │ これからゆっくり考L +α
どこにでもありそうな、よくある入力フォーム。 テキストボックスとボタンを横一列に並べたい場合、3キャリア1ソースで実現するにはtableが必要になってきます。 tableのセルの中に入力フォームとボタンを入れないと、auで改行してしまいます。 tableを使っていないサンプルページ →サンプルページを見る tableを使っているサンプルページ →サンプルページを見る 入力フォームとボタンを隣同志のセルにいれればOKです。 <table> <tr> <td><input type="text" size="20" style="width:160px;" /></td> <td><input type="submit" value="検索" /></td> </tr> </table> docomoとsoftbankはtableに入れなくても横一列になるんですけど、auではなぜかなりません。
[携帯]xhtmlのリンク指定方法〜cssとbodyの違い │ これからゆっくり考L +α
結論から言ってしまうと、「bodyとcss、どちらで指定しても見え方は一緒」です。 <body link="#5994FF" vlink="#59E2FF"> <style type="text/css"> <![CDATA[ a:link{color:#5994FF;} a:focus{color:;} a:visited{color:#59E2FF;} ]]> </style> サンプルページ →サンプルページを見る bodyに指定してもCSSに指定してもどっちも変わらないなら別にどっちでもーじゃん？ って思うんですが、CSSを使って一工夫するとちょっとだけよくなる！っていうのをご紹介します。 まずは予備知識として docomoのiモードブラウザ1.0では、CSSを使う場合はインラインに記述する必要があったのですがく（リンクの疑似クラスのみhead内に記述することができます）、iモード
携帯サイト[xhtml]のコーディング前のチェックポイント │ これからゆっくり考L +α
前回のhtml版に引き続き、今回はxhtmlの場合です。 htmlと比べて出来ることが増えるので色々なデザインの再現が可能ですが、やはり3キャリア1ソースとなると気をつけるべきポイントがいくつかあります。 コーダー（もしくはディレクター？）さんは、デザインをパッと見て「このデザインで組めます！」「組めません無理です...」の判断が咄嗟にできるようになると素敵だと思います。 デザイナーさんは、これからあげるチェックポイントを頭の片隅にいれつつデザインしていただけると、コーダーからの戻しが少なくてすむようになるかと思います。 前置きはこのぐらいにして、早速本題へ。 以下が今回のサンプルデザインです。 「これをxhtml、3キャリ1ソースコーディングしてください」 と言われた場合で考えていきます。 前提条件は、 ・3キャリア1ソース ・xhtml ・文字コード：Shift-JIS ・改行コード：
モバイルサイトマークアップ5つの小技 : LINE Corporation ディレクターブログ
こんにちは。10月の組織編成でブログビジネス部に異動になりました飯田です。 普段はディレクターしてますが、時にモバイルサイトのマークアップをするときがあります。以前、こちらのエントリーでモバイルサイトを作るうえでのノウハウを紹介していますが、本エントリーではもう少し実践的な「モバイルサイトで○○を表現するには」をすごく簡潔に紹介してみたいと思います。 ある程度の端末で正常に表示されることを確認していますが、一部を除いて正常に表示されない場合もありますがご了承ください。なお、本エントリーで紹介している記述はわかりやすいように style 属性を全てインラインで記述しています。 見出しに背景色 div タグXHTML 対応の端末であれば下記のタグで簡単に見出しに背景色をつけることができます。 <div style="background-color="#0000ff;">ほげほげ</div>
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
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/4/21 月曜日 matsui Posted in お知らせ | 1 Comment » 先日の4/18(金)に、北海道Webコンソーシアムで、「ケータイサイトのはなし（入門編）」という話をさせていただきました。 （関係者・参加者の皆様、色々とありがとうございました。） せっかくですので、発表に使用した資料をアップさせていただきます。 ケータイサイトをはじめて作るという方を対象に、知っていた方がよいと思われるポイントをまとめてみました。 → 北海道Webコンソーシアム [hwcon.org] → 発表に使用したスライド資料 「ケータイサイトのはなし（入門編）」 ※PDFファイルです | View | Upload your own 口頭での補足ありきの資料のため、文章だけだと多少言葉足らずで
jkondoに憧れて » 超手抜きでウェブサイトをモバイル対応 2008
◆追記 評判良かったので大幅に加筆訂正してみました。 ちょっと昨日、一昨日と携帯向けサイトを作っていたのですが、最近の携帯電話事情がわからず、どういうタグを使えばいいのかとか、CSSは対応しているのかとか、文字コードの問題はどうするのかとかいろいろわからないところが多かったので、ちょっと自分なりに調べてまとめてみます。 間違いが含まれている可能性が非常に高いです。 突っ込み大歓迎。 前提 キャリア別とか2G用にテンプレートを複数作って対応というのは個人で出来るレベルじゃないので、モバイル向けは１ページごとに１枚のテンプレート追加で作る。 なるべくPC向けのテンプレートを大幅に修正しなければいけないようなものは避ける。 長くなるので最初にまとめ ・文字コードはUTF-8。 ・マークアップ言語はXHTML Basic。 ・画像はJPEGかGIF。 ・CSSはインラインで書く。
ウノウラボ Unoh Labs: 携帯サイト作成時のXHTMLでの相違点
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
お探しのページは見つかりませんでした - ma-san web design- 千葉県（四街道市・千葉市・佐倉市）でホームページ制作