スマートフォン向けWebサイトの表示速度 高速化手法
対象読者 スマートフォンWebサービス開発者 特に、フロントエンド周りの開発に従事する方 スマートフォン向けWebサイト高速化のテクニック スマートフォンはOS／デバイスの進化が激しく、要求される最適化の内容も半年で別物になることがあります。そのため最適化に際しては、案件ごとの状況や目的、デバイス／OSのシェアに応じて、まずターゲット端末を選定し、問題の検出を行います。 この記事では「iPhone 4＋iOS 5」を想定して話を進めます。実際に「iPhone 4＋iOS 5」はよく現場でも最も動作が重い組み合わせとしてターゲット端末に挙がります。これはiPhone 4がRetinaディスプレイを採用したことで960×460ピクセルの高解像度を備えながら、CPUなどのデバイス性能が潤沢とはいえず、ボトルネックが生まれやすいためです。iOS 4ではなくiOS 5をターゲット端末として扱うのは、
スマホアプリ開発の最前線で使われている、UIデザインメソッド20(3) デベロッパーに聞く、今日から使えるJavaScript 高速化術(前編)
アプリ制作の技術者から学ぶ当連載や、中村洋基氏をはじめとするクリエイターが登壇する11月17日（土）開催のセミナー、中国・上海のWeb制作会社訪問ツアーなどの豪華賞品が当たるアプリアワードを行う「TapApp(タップ＊アップ)プロジェクト」と連動した連載第3回は、実際にソーシャルゲームのコーディングを行っているサイバーエージェント(以下、CA)のデベロッパーに、すぐに使えるJavaScript高速化のテクニックについて聞いた。 高速化がもとめられるスマホ用Webアプリ開発の現場 スマートフォン用ゲームというと、ネイティブアプリケーションの形で提供されるものをまず思い浮かべるかもしれないが、最近ではソーシャルゲームを中心に、ブラウザ上で動作するWebアプリケーションとして提供されるタイトルが続々と登場している。ユーザーがアプリをダウンロードする手間がなく、iPhone、Androidなど複数
はじめてスマートフォンサイトを作る人へ。制作で気をつけたいポイント５つ
スマートフォンの普及に伴い、スマートフォンサイト制作案件が増えてきている方も多いと思います。かくいう私もその一人です。 最近は一人でカバーしきれない程のご依頼をいただくようになり、新たに担当者を増やすことにもなりました。 普段私が気をつけている点、どういったことを考えてスマートフォンサイトを制作しているかを伝えることになったので、ついでに記事にしてしまいたいと思います。 私がスマートフォンサイトを制作するときのポイントは、以下のとおりです。 1.そのサイトはいつ・誰が・どんな時見るのか2.実際のサイズ感を考えて、使いやすさを確かめる3.死角と押しやすい位置を意識する4.CSS3で実現可能なデザインを5.ユーザは本当にスマホサイトを求めているのかそれでは、詳しくお話していきたいと思います。 こんなの当たり前だよ！ということばかりかもしれません。 案件やサイトのジャンルによっては当てはまらない
手描き風がいい感じ、全1,000種類以上のスマフォやウェブのUIエレメントが揃ったKeynote用のベクター素材 -Keynotopia
iPhonem iPad, Androidなどのスマートフォンをはじめ、ウェブサイトやFacebook、Windows 7やOS Xなど、さまざまなモックアップのアイテムが揃ったKeynote用の素材を紹介します。 Free Keynote Mockup Templates for iPhone, iPad, Android, ... - Keynotopia [ad#ad-2] ダウンロードできる素材は1,000種類以上のアイテムが揃っており、テンプレートはスマートフォンやウェブサイト用のものもあります。 iPhone用モックアップ テンプレート iPad用モックアップ テンプレート Android用モックアップ テンプレート BlackBerry用モックアップ テンプレート ウェブアプリケーション用モックアップ テンプレート Facebook用モックアップ テンプレート OS X用モッ
[スマートフォン]ヘッダーを固定配置にするJavaScript | サイブリッジラボブログ
はじめまして、今回初登場のアシスタントデザイナーのまこっちゃんです。 今後ともよろしくお願いいたします。 最近はスマートフォンサイト制作全盛期ですよね。今後はスマートフォンでリッチなサイトが、現れるのではないかとわくわくしています。 今回は、スマートフォンサイト制作中に躓いた固定ヘッダーにつきまして、『固定ヘッダーのJavaScriptは何がベストか』を考えていきます。 Mobile Webkit では【position:fixed;】が効かない！ 皆さんもPCサイトで一度は固定ヘッダーのサイトを制作された事があるかと思いますが、スマートフォンサイト制作で試された方もいらっしゃるのではないでしょうか。 PCサイトの固定ヘッダーで使用される【position:fixed;】がiPhone・iPadなどでは効かないという問題点に気をつけましょう。 iscroll まず、スマートフォン向けに使わ
![[スマートフォン]ヘッダーを固定配置にするJavaScript | サイブリッジラボブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e82e2c864f8e014b0448593dedfe46486c4e1fd5/height=288;version=1;width=512/http%3A%2F%2Fwww.cybridge.jp%2Fimg%2Fcommon%2Flogo_cybridge_m.gif)
【スマートフォン向け開発】ユーザビリティチェックリストを作ってみた
最近はスマートフォン系の開発から離れてしまっているので、感覚が鈍らないうちに（備忘録も兼ねて）スマートフォン向け開発（主にネイティブアプリ開発）におけるユーザビリティチェックリストを作ってみました。 ちなみに、このチェックリストは以下が前提となっていますのでご了承ください。 ・独自性を生み出すようなものではない ⇒現在のスマートフォンアプリのメインストリームの中で、アプリの印象をより洗練されたものにするためのポイントです。 ・案件の内容に関わらず意識すべきポイント ⇒ある程度汎用性の高いチェックリストになっているとは思います。 それでは、全てベーシックな内容ではありますが、その中でも特に基本的なものから説明していきます。 ※僕がiPhoneユーザーということもありiPhoneの画面イメージばかりが並んでいますが、全てAndroidでも使えるチェック項目です。 小さくし過ぎない、詰め込み過ぎ
CSS で作るスマートフォン向け片手操作メニュー
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
Developers.IO
EVENT【7/5（金）札幌】DevelopersIO 2024 SAPPORO Business Lab #devio2024
リーンスタートアップをどう実践するのか
Y Combinator に学ぶスタートアップ強化プログラム (3 か月間でスタートアップを成長させる Accelerator Program の仕組み�)Takaaki Umada
スマートフォンサイトに適したユーザビリティとは？【リサーチ】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
iPhoneやAndroidのUIパターンを収集するシンプルで見やすいギャラリーサイト・Patterns of Design
いくつか同じようなギャラリーサイトは ありますが、こちらもなかなか見やすか ったのでメモ。スマートフォンのUIの パターンギャラリーサイトです。スマー トフォンに限らず、通常のWebサイトの パーツデザインの参考にもなりそうです。 特にスマートフォンのUIは細かい部分のこだわりが見られてとても参考になりますので見ておいて損は無いかと思います。 シンプルな作りです。パーツはカテゴリで分けられていて探しやすいです。ちょっと重いかな・・ 例えばこちらはグリッドのカテゴリ。同じ幅、同じ高さという限られた空間の中で、様々な工夫が見られます。 クリックするとその場でLightbox風にポップアップします。iTuneへのリンクもあるので確認しやすいですね。 同じようなギャラリーサイト似たようなサイトは沢山あるので合わせてチェックしてみてはいかがでしょう。 Mobile UI Patternspttrns
Androidでfont-weight:boldを適用する方法
Androidでfont-weight:boldを適用する方法 Androidでは日本語にfont-weight:boldが適用されません。 <p style="font-weight:normal">ノーマル normal</p> <p style="font-weight:bold">ボールド bold</p> このHTMLをAndroidで確認すると次のようになります。 日本語だけ太字になっていないですね、デフォルトのフォントにbold体がないらしいんですが、デバイス毎にフォントも変わるのでfont-familyでは回避できず。 対策としてはfont-weightの代わりにtext-shadowを利用して太字にします。 <p style="text-shadow:1px 0 0 black">ボールド bold</p> ただ、この方法だとiPhoneでは太字になるけどAndroidで
レスポンシブwebデザインで制作する時のポイント
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
jQueryでスマホサイト向けに画像サイズを縮小する方法
jQueryでスマホサイト向けに画像サイズを縮小する方法を紹介します。 １．サンプル 次のようなPCサイト用のページがあります。この場合、Movable Typeでページを出力しています。ページで使っている記事内の画像サイズは幅470pxです。 このページをスマホサイト向けに別のページを作り、画像サイズを縮小して表示します。画像サイズは幅280pxに縮小しています。 ２．カスタマイズ サイズを変更するには、下記のスクリプトをページ内にあるhead終了タグの直前に追加します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <script type="text/javascript"> jQuery(function(){ $('img').each(functio
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Mobile Playbook
Good night, Posterous
HugeDomains.com
スマートフォンサイト制作時にデザイン・UIの参考になるサイト集 – creamu
iPhoneサイトの幅サイズトーク [CSSNite裏]![iPhoneサイトの幅サイズトーク [CSSNite裏]](https://cdn-ak-scissors.b.st-hatena.com/image/square/dd5f9f0ce2c68290a7264d8be14192d5b6fdb014/height=288;version=1;width=512/https%3A%2F%2Fs.togetter.com%2Fogp2%2Fee013045eae25acd6c9dff71b774ddf0-1200x630.png)
