スマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark
最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには？ ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。 例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介
Androidデバイスのディスプレイサイズ、DPI一覧 - Hacking My Way 〜 itogのhack日記
2011/10/1最新情報を公開しました http://d.hatena.ne.jp/itog/20111001/1317438659 AndroidDeviceInfoShareを公開してから早一ヶ月、あっという間にFINGERPRINTベースで100以上のデバイス情報がシェアされてます。 その中で、多くの人が一番気にしてるディスプレイサイズ、DPIに関する情報を表にしてみました。 最新の情報はアプリで見てください。インストールは以下から https://market.android.com/details?id=com.itog_lab.android.adis MODEL MANUFACTURER BRAND widthPixels heightPixels xdip ydpi density 001DL Dell Inc dell 800 480 160.42105 160 1 A
Flash終了でアプリは消えないと思うよ？
アプリが消える日？ スマホからアプリが消える日――web化していくスマートフォンの未来 ↑こちらの記事が興味深い内容だったので、iOSアプリデベロッパの端くれとして意見を書いてみる。 （僕はFlasherではありませんよ） 別に記事にいちゃもん付ける訳ではないですが、裏付けが乏し過ぎるかなと。 正直、スマホとアプリのビジネスがどういうものなのか解ってないなーと思いました。 「モバイル向けFlash終了」という理由って、そもそもあんまり関係ない。 そういう理由では、アプリは無くならないです。 以下、理由です。 ちなみに、Android Marketは詳しく無いので、App Storeをベースに書いてます。 理由１：Webアプリにできることは限られている やっぱり出来ることでは、ネイティブアプリの方がアドバンテージが当然高い。 以下、Webアプリが不利な点 ・カメラなどハードウェア操作が出来な
フリック・スワイプ操作の画像ギャラリーに使えるjQueryプラグイン5選 // 4S（ヨンエス） – スマートフォンサイト制作しよう
HTML5やCSS3など、スマートフォン用サイト制作についてまとめるブログフリック・スワイプ操作でスライドする画像ギャラリー等に使えるjQueryプラグインをいろいろ探してまとめてみました。 ここに挙げたものは全て試してみましたが、どれも一長一短なので用途に合わせて使ってみてください。 テスト端末 ・iPhone4（iOS4.1） ・Xperia Arc(Android 2.3) ●jCarouse 作者が日本人なので日本語の解説あり。 iPhoneでは快適にフリック・スワイプ操作でスライドすることができますが、Androidではフリック・スワイプが機能しません。 iPhone限定のサイトに使用するのであれば問題ないと思います。 [対応状況] iPhone：○ Android：×（フリック・スワイプ操作が機能しない） ●jquery.flickslide.js 作者が日
Androidでアプリ内課金を始めるための基礎知識
Android Marketのアプリ内課金サービスとは アプリ内課金サービスとは、アプリ内でデジタルコンテンツを販売するためのAndroid Marketのサービスです。このサービスを利用することで、音楽や画像などのダウンロード可能なファイル、ゲーム難易度やポーションなどの架空のアイテム（俗に言う「アイテム課金」）など、幅広いコンテンツを販売が可能です。 アプリ内課金の特徴は、以下のとおりです。 決済はAndroid Marketが代行してくれる 決済方法はAndroid Marketでアプリを購入する方法と同じでユーザーフレンドリー 決済手数料はアプリ販売と同じ30％ 以下はアプリ内課金サンプルの決済処理の画面遷移です。 左画面で、アプリ内で購入するアイテムを選択し「Buy」ボタンをタッチすることで、中央画面のAndroid Marketが提供するチェックアウト画面が表示され、ここで決済
画像を使わずCSS3だけで尖ったBack・Nextボタンを作る方法
CSS3だけで、iOS風のBackやNextの尖ったナビゲーションボタン作る方法ないかな〜と探していたところ、良記事があったので紹介します。Androidで確認してませんが、webkit向けなのでたぶんAndroidでも大丈夫だと思います。Androidはひと工夫必要そうです。 CSS3 Wizardry -Back and Next Buttons Revisited- CSS3 Wizardry -Subpixel Rendering- Buttons Revisitedの方が改良版で疑似要素バージョンみたいです。原理はSubpixel Renderingの方がわかりやすいです。 ポイントとなるHTML ボタンを構成する要素はこれだけ。 <!--ボタン要素--> <div class="button bordered back"> <span class="label">Back</s
iPhone・Androidの両対応サイトなら、アイコン設定にprecomposed付けた方がいいかも
今回のエントリはちょっとした小ネタです。 今やiPhone・Androidの普及を考えると、スマホ最適化してないサイトでも「ホーム画面アイコン」「ショートカットアイコン」の設定は必須になってきたと思います。 以下のようなタグで、ページに簡単にアイコンを設定できます。 <link rel="apple-touch-icon" href="画像ファイルのパス（png）" > とくにiPhoneは、指定した画像に自動的に磨き処理のエフェクトをかけてくれるので、いい感じになるな〜と関心していました。 ただ、Androidについては磨き処理をやってくれないので、ちょっとした悩みでした。 iPhoneの方がいい感じになるだけに、Androidのアイコンがかなり寂しい感じに見えてしまいます。
スマホサイト：このブログで使ったサンプルソースのキャプチャ並べてみた。ソースDL可。
スマホサイトのリスト型メニューを何パターンか作ってみた 仕事がいったん落ち着きはしたものの、やっぱり僕の周りでも今まで以上にスマホスマホと騒いでます。 スマホサイトといえば、リスト型メニュー？がスマホならではですよね。 今後のスマホサイト対応の波に速攻対応できるように 今のうちに、リスト型メニューをいくつかのパターンで作っておくことにしました。 （だいぶ行き当たりばったりのエントリーになってきました。。。） スマホサイトのデザインで重要になってくるのが、CSS3の活用だと思ってます。 なぜなら、3G回線などでは通信速度が遅いため、ページ全体のデータ量を軽くする必要があるのです。 となると、極力画像使用を抑えることになるのですが、やっぱり見た目にきれいなページにしたいですよね。 そこでCSS3が活躍してくれるのです。 ポイントとなるCSSを載せておきます。 参考になる部分はご活用いただいて、
はてなから引越しました。
はてなからブログを引越しました。 WordPressに移行しました。 前のブログはこっち http://d.hatena.ne.jp/izit_kosuke/ 基本的なスマホ対応してます。（iPhone・Androidでアクセスしてください） 【サイトトップ】 超突貫で作ったので、細かい部分でいろいろ行き届いてません。 カテゴリやエントリがないリンクすらありますw IE6は完全切り捨てです（笑） IE7ではレイアウトが微妙に崩れるようです。 iPhone／Android対応してますが、フリックできるところとか （完全なフリックの実装はしてない） ときどきバグります。 また、スマホ時もPCサイトの画像（サイズの大きい画像）をそのまま読込んでいるので ページ読込みにやや時間がかかります。 スマホサイトやアプリの制作関連をエントリしていきつつ、 サイトも良くしていこうと思ってます。
スマホ最適化でやったこと
※Androidでアクセスされた方は使用感をいただけると幸いです。 （サイトトップ） 先日簡単なエントリで書いてますが、今まではてなダイアリーにエントリを書いてまして、やはりデザインの限界などがありWordPressに移行しました。 同時に、基本的なスマホ最適化もおこなっています。 ようやく自分のサイトでスマホ最適化ができたので…ということでのエントリです。 ちなみに、このサイト自体はまだまだ作りかけでして… そもそもサイトの構成がちゃんと考えられておらず、かなりいろいろ行き届いてないサイトです（笑） （IE系ではちゃんと表示されません…そのうち手入れします。すみません） どちらかというと、スマホ最適化でのユーザーインターフェースに重きを置いてのエントリとなります。 では、以下にスマホ最適化でおこなったことをまとめてみました。 （ちなみに対象としているスマートフォンはiOSデバイス（iPh
スマートフォンサイトの作成術 - 大川洋一
2011年4月2日に開催されたPHPカンファレンス関西で使用した「スマートフォンサイトの作成術」のスライドです。Read less
【スマホ集中連載 第5回】 "アプリ開発の検証作業の進め方" 〜高い品質を保つための3ステップ : LINE Corporation ディレクターブログ
スマートフォンのアプリ検証を担当している宮澤です。 スマホ集中連載の第5回目、本日はアプリの品質管理について見直す際に役立つと思われる項目、検証作業のノウハウについて記載します。 はじめに Webサービスと異なり、アプリは実機にユーザがインストールして使うので、例えばアプリのバグを発見して即座に修正・公開しても、ユーザにアップデートを行ってもらわねばその修正を反映できません。iPhoneアプリの場合はAppleの審査を挟みますので、即時公開可能なAndroidアプリよりもなおのこと時間を要します。 また、それと同時にせっかくサービスに興味を持っていただき、利用したいと思っていただいているお客様の気持ちに答えられなくなってしまうので、最大限注意を払い神経を使って取り組まなくてはいけない重要なミッションです。 アプリのそうした品質管理を考える上での3つのステップについて説明していきます。 ST
スマホサイト制作：URLバーをページ読込み完了時に引っ込める方法 - Kaleidoscope
今回もあまりがっつり書ける時間が無いので、超小技のエントリー(￣▽￣;) たとえば、Yahooさんとかがやっているんですが、 「ページを読込んだときに、URLバーが引っ込む」という、ちょっとした気配りの動き。 Yahoo! JAPAN （スマートフォンサイト） （Yahooさんの手法とは違うかもしれませんが） その方法を紹介します。 僕の場合は、ページ読込みが完了した時に1ピクセルだけスクロールさせています。 そもそも、iOSのSafariやAndroidの「ブラウザ」は、 ページ読み込み完了時に、スクロール位置が1ピクセル以上あった場合、 URLバーが引っ込む仕様のようです。 （あくまで推測。ページ内リンクなどで、そうなるのが根拠です。） まぁ、これのなにがいいのかというと、 ページの表示範囲を少し広く見せられる。 ってところでしょうか。 やり方は簡単です。 JavaScriptでWin
「スマホ対応サイト制作 初心者向け」 -2.画像をCSSで操る編（前編）- - Kaleidoscope
【目次】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） さて、前回はCSSでスマホ向けにする超基本の紹介でした。 が…実際のところ、あんな超シンプルなサイトは無い訳で… 実践となると、もう少し工夫が必要になってくると思います。 そこで、今回はサンプルをもう少し現実的な形にして、 スマホ化してみたいと思います。 今回のサンプルファイルです。 smart_sample02.zip ＜今回のポイント＞ 1．要素の取捨選択 → 要らない要素はdisplay:none; 2．HTMLとCSSだけで画像を振り分ける → HTMLソースにPC用とスマホ用の両画像を配置。idやclass指定で、CSSでdisplay:none; 3．CSS3グラデーションの活用＆疑似要素を使ったカスタマイズ 今回のサンプルとなるサイトはこんな感じです。 前回よりも
スマホサイト：このブログで使ったサンプルソースのキャプチャ並べてみた。ソースDL可。 - Kaleidoscope
即座にDLできるようにアーカイブ化。 ※naruさんのご指摘により、2.19以前のサンプルソースのCSSが微妙だったことがわかりました。矢印部分のリンクが有効になってなかったです。 （あまりいらっしゃらないとは思いますが…）もしそれ以前にDLされた方は、現在修正版をお使いください。 ご報告いただいたnaruさん、ありがとうございました。 （ちなみに、ここでDLできるサンプルなどなど、動作保証をするものではないのでご了承ください） smart_sample02.zip 02.zip 02v.zip 03.zip 03v.zip 04.zip 04v.zip スマホサイトのリスト型メニューを何パターンか作ってみた 仕事がいったん落ち着きはしたものの、やっぱり僕の周りでも今まで以上にスマホスマホと騒いでます。 スマホサイトといえば、リスト型メニュー？がスマホならではですよね。 今後のスマホサイト
PCサイトをスマホ対応 CSSテク自己まとめ（１・２回まとめ） - Kaleidoscope
PCサイトをスマホ対応するという記事を１・２回と続けてみて、意外とボリューム満載になってしまったので、 一旦ここまでのCSSテクについてまとめます。 ■第1回 メニュー編 ■記事はこちら ★タグでViewportの設定。メディアクエリによるCSS振り分け。 スマホサイトを作る上で欠かせない準備。 … <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--viewportの指定--> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <!--/viewportの指定--> <!--メディアクエリでPC用・
「スマホ対応サイト制作 初心者向け」-2.画像をCSSで操る編（後編）- - Kaleidoscope
【目次】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 前編の続きです。（前編はこちら） 3．CSS3グラデーションの活用 ヘッダはできあがりましたが、まだメニューの画像がヘンです。 こちらも、ヘッダでおこなったような方法が取れなくもないのですが、 さすがにメニューは５個もあるし、その分HTMLソースに記述するのは、なんだか気が引けます。。。 幸い画像がただのグラデーションなので、どうにかCSSを使って対応できるかもしれません。 CSS3には、グラデーションを描く機能があるため、それを活用してみたいと思います。 ★まず、メニュー画像は全てdisplay:none; この手法はもうおなじみ。 imain.cssに追記 #globalNav li>a>img{ display:none; } すると… 当然なのですが、メニューが無くなった。。。 メニュー画像を消してしまったので、
ブログやWebサイトをスマートフォン向けに最適化してくれるWebサービス・Mippin Mobilizer
なかなか便利だなと思ってご紹介。 自分のブログなどをスマフォ向けに 最適化したいけど時間が無かったり スキルがなかなか追いつけなかっ たり、という方も多いかと思います。 Mippin Mobilizerはその最適化を してくれるWebサービスです。 要はRSSを使ってこのWebサービス上でスマフォ向けレイアウトにしてくれる、というものですので、アドレスはMippin Mobilizerのドメインを使います。この点はmobifyと同じですね。 日本でもガラケー向けに最適化してくれるサービスがあります（名前忘れた）が、そのスマフォ版のようなもの。コーディングやマークアップも知識も不要で、マウスのみで作成可能です。 アドレスを入力する 最適化したいサイトのURLを入力します。矢印をクリックすると右側にプレビューが表示されますよ。RSSが発行されていればどんなサイトでもOKです。同時にレイアウトを
「スマホ対応サイト制作 初心者向け」みたいな感じで書いてみた -1.メニュー編-（※iPhone寄り） - Kaleidoscope
【目次】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） 今持ってるPCサイトをスマホ対応したいなぁ…と思ってるものの、 「どこから手を付けていいのやら、わからん！！」って方も多いのではないでしょうか？ ということで、記事でも書いてみっかぁ！と、なぜかやる気になったので、連載形式で書いてみることにしました。 ただ、途中で飽きたり、やる気が無くなったら、予告無く終了する可能性大です(￣▽￣;) 僕自身、人に教えられるほどのスマホサイト制作の熟練者というわけでは無いので、もっと良い手段や方法があるかもしれません。 「ここはこうしたらいい」など、ご意見ありましたら、逆に教えてください(^-^; 【まずはじめに】 スマホサイトと言っちゃったものの、とりあえずはiPhone向けのサイトを基準とします。 Androidの「ブラウザ」も、iPhon
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマートフォンサイト制作