ABC 2016 Springで発表した「Androidアプリ実装アンチパターン」の暫定資料だよ あとで、発表時に喋った内容をテキストで追加したものをアップロードするよ
ABC 2016 Springで発表した「Androidアプリ実装アンチパターン」の暫定資料だよ あとで、発表時に喋った内容をテキストで追加したものをアップロードするよ
スマートフォンで横長な画像を挿入した時、その部分だけスクロールできるようにするUI time2012/08/21 hatenabookmark- PCサイトにある画像をスマートフォン向けに載せる場合、その画像を縮小したり、分解したりして載せるかと思います。ただ、以下のようになかなかうまくいかないケースもあるでしょう。 サイズが横長なため(横スクロールを起こさないよう縮小するが)、比較的横幅が狭いスマートフォンでは小さく表示せざるを得ない 地図や案内図など分解することが難しい 例えば、こんな画像です。 札幌市営地下鉄路線図 西荻窪さんぽMAP そんな時に役立つUIを少しこさえてみました。 画像のサイズは保持しつつ、かつページ全体では横スクロールを起こさずに画像がある部分だけ横スクロールするというものです(AppStoreのスクリーンショットのUI、といえばおわかりの方もいらっしゃるでしょうか
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone(iPod Touch)向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記: iPhone向けサイト制作の書籍を執筆しました! 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5+CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張(CSS)があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
未だにiPhoneデザイン中の解像度と実機に表示される大きさに慣れないshiihoです。 今回はiPhoneのデザインで自分なりに約にたったツールをまとめてみようと思います。 それでは早速見てみましょう マインドマップで遷移図を整理 iPhoneアプリは通常のWEBページに比べて状態の変化や遷移が複雑な場合があります。 マインドマップで整理してみると上記画像のように分かりやすくなりました。 ソフトによっては画像も取り込めるのでサイトマップとしての流用もできそうです。 矢印や階層表示など自動で計算して整列してくれるので イラストレーターで作るより楽に図形を制作できます。 画像はMindNodeというMacのソフトを使用していますが XmindというソフトならWindowsにも対応しています。 MindNodeダウンロードはこちら http://mindnode.com/jp/ Xmindダウ
どのようなディスプレイサイズでも自動で レイアウトを調整してくれるレスポンシブな イメージスライダーを実装出来るjQueryプ ラグイン・Blueberryのご紹介です。イメージ スライダーを取り入れているサイトは多い のでこういうのは助かりますね。 iPhone等のスマートフォンにも自動でサイズを調整してくれます。痒いところに手が届く系ですね。地味にありがたい。 見た目はシンプルなイメージギャッラリーです。が、閲覧するディスプレイのサイズに依存する事無く、自動で幅を調整、最適化してくれます。MediaQueryと相性良さそうですね。 表示確認 Media Queries Testerでのキャプチャです。 Mobilizerでのキャプチャです。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます!現在、長野県長野市の制作会社でWeb作成中! iPhoneサイトで画像ギャラリーをフリック操作に対応させる※iPhoneで見てください フリック対応のデモはこちら 先月、iPhoneサイトのデザインを集めたiPhoneデザインボックスを公開しました。 反響はすごくあり、アルファブロガーのネタ帳さんやWebクリエイターボックスさん、PHPSPOTke-tai.orgさんなど多くの方に紹介していただきました。 ありがとうございます。 現在、スマートフォンのサイトのコーディングで簡単な方法として フレームワークのjQueryMobileを使う方法があります。 私は、最初から楽をするのが好きではないので自
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
デスクトップ・スマートフォン・タブレットの主要なブラウザの古いバージョンから最新版までに対応した、クロスブラウザのチェックに使えるWindows用のソフトウェアを紹介します。 Cross browser testing -BrowseEmAll [ad#ad-2] BrowseEmAllのサポートブラウザ BrowseEmAllの主な特徴 BrowseEmAllの使い方 BrowseEmAllのダウンロード BrowseEmAllのサポートブラウザ デスクトップ 主要ブラウザの最新版に対応。 IE7-9 Firefox3.6-12 Chrome12, 16, 19 Safari4, 5, 5.1 Opera10, 11 スマートフォン・タブレット 横置き・縦置きに対応。 iPhone, iPhone4, iPad, iPad2, iPad3 シミュレーター Android2.2, 2.3,
日立公共システムエンジニアリングはこのほど、新潟県新潟市 公式サイトのリニューアルを実施したことを発表した。新しいWebサイトは6月1日より公開されている。 今回のリニューアルでは、「年齢や国籍、障害の有無に関わらずすべての人が、知りたい情報を迷わず探せるWebサイト」を目標に改善が実施された。障害者や高齢者のWebサイト利用に配慮した指針として設けられたJIS規格「ウェブアクセシビリティJIS(JIS X 8341-3:2010)」の等級AAにも準拠している。また、従来サイトのリニューアルにあわせ、スマートフォン対応サイトも新設された。 新潟市の公式サイトは1996年にオープンして以来、多数の市民に利用されており、月間アクセス数は平均約28万件にのぼる。しかし近年、掲載する情報量の増加に伴って「知りたい情報を見つけにくい」といった声が多く寄せられるようになり、今回のリニューアルにつながっ
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
320 dpi Androidの密度グループ iPhoneを当てはめると、iPhone 3までがmdpi、iPhone 4からはxhdpiに区分けされそうです。日本で流通しているAndroidスマートフォンの多くはhdpiに属するでしょうが、最近のHD解像度の端末はxhdpiに属しそうです。 IS05やXperia ray, INFOBAR A01/C01などはグループ上hdpiに属しています。しかし、画面サイズが小さいことからピクセル密度が300dpi前後と、xhdpiに近くなっています。小型で高解像度な端末が増えると、所属するグループだけでは画面の精細さを判断するのは難しくなるでしょう。 ピクセル密度の違いが見た目に影響する さて、ピクセル密度のばらつきによって、すこし困ったことが起こります。密度の低い環境に合わせて作られたコンテンツの見た目が、密度の高い環境で良く見えない可能性が出て
表示サイズに合わせて最適なサイズで表示する、幅が固定ではないレイアウト用の超シンプルなスライダーを実装するjQueryのプラグインを紹介します。 「Blueberry」という名前は、開発時に使った画像がブルーベリーだったからだそうです。 デモページ:幅480pxで表示 [ad#ad-2] Blueberryの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプト、あと当スタイルシートを外部ファイルとして記述します。 ※スタイルシートはスライダーのベースとなるスタイルが記述されています。 <link rel="stylesheet" href="css/blueberry.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></scrip
こもりまさあきさんによる『レスポンシブ・ウェブデザイン』(MdN)という素晴らしい書籍も出てきて、2012年後半は、さらにレスポンシブWebデザインへの取り組みが増えそうです。 スマホを購入した理由のひとつとして「PCサイトを見たいから(PCメールをやりとりしたいから)」というものが上位に来ることがあるといった統計(リンク)がよく引き合いにだされますが、これって、その昔、「印刷用のCSSの実装」とデジャブします。つまり、ユーザーの声「えっと…. そのまま印刷したいんだけど」。 よかれと思って行う実装がかならずしも喜ばれることではないかもしれないとう想像力をキープしておかなければなりません。 さて、レスポンシブWebデザイン。これには2つの意味合いがあると考えています。 ひとつは、ワンソースでのマルチデバイス対応。デバイスごとにことなる対応を行うまでの手間はかけられない、っていうときに使う方
2012年5月30日 著 鷹野さんが「レスポンシブWebデザイン」の是非に関する考察をされていました。 よかれと思って行う実装がかならずしも喜ばれることではないかもしれないとう想像力をキープしておかなければなりません。 まったくもって御意ですね。異なるデバイスでもって同じサイト/ページを利用するユーザーを想定すればこそ、その点は注意が必要だと思います。レスポンシブWebデザインだからといって、スマートフォン程度のスクリーン幅とデスクトップPCのスクリーン幅とでレイアウトやトーン&マナーを過度に変えてしまうのは、考えものだと思うのです。ユーザーは、自身の求める情報なり機能をすぐと見つけられなかった際、見つけるための手がかりを必要とするわけでしょう。その近傍に何があったか、というような記憶を活かせるだけの配慮は必要だと思います。 さて、レスポンシブWebデザイン。これには2つの意味合いがあると
2012年5月29日 著 Responsiveの本当の意味を考えてみる必要がある。と思う今日この頃です。という記事を読んでの感想など。 この現状で、なんでもかんでもスマートフォンやタブレットのデバイスサイズに合わせるWebサイトが果たしてResponsive Web Design(レスポンシブWebデザイン)なのでしょうか? デバイスの最適化と言う観点から、現状の流れは非常に疑問に思えます。 すべてのWebサイトで闇雲にレスポンシブWebデザインを採用すべきだ、とは誰も主張していないと思うのです。少なくとも、自分の狭い観測範囲ではそう。ゆえに、なんでもかんでも......というくだりには違和感を覚えます。また、筆者の方はレスポンシブWebデザインをデバイスへの最適化として捉えているようですが、その点も違和感があります。以前、レスポンシブWebデザインと「最適化」のなかで書いたように、自分は
Responsive Web Design(レスポンシブWebデザイン)と言うと、デバイスのモニターサイズを「どうするこうする」と言う話に重点が置かれている現状に、少し嫌気がさしている毎日です。 たしかに、デバイスのサイズに合わせて、最適なコンテンツの幅や文字のサイズの調整も大事な事なのかもしれません。 ただそれは、"情報を伝える"と言う"目的"における"手段”の一つであって、必ずしも、それが答えでは無いはずです。 ましてや、デバイス事にレイアウトを変える事を、効果として制作側が面白がってやる為の理由では無いはずです。(実験的にやるのは良いですが) 利用シーンに最適化する必要がある スマーフォンやタブレットが普及した事で、これまで以上にWebの情報の活用方法は変わってきていることは説明の必要もないかと思います。 利用するシーンもこれまで以上に、日々の生活に密着しているのではないでしょうか?
こんにちは、プロモーション担当のクーパーです。みなさんは、ガラケー派?スマホ派?ぐんぐん浸透してきている感のあるスマートフォンですが、みなさんの周りではいかがでしょうか。 そんなスマホ動向をデータでチェックしたい時には、“OUR MOBILE PLANET” by Google がおすすめです。 OUR MOBILE PLANETとは? Google が提供する OUR MOBILE PLANET では、各国別のスマホに関するデータが公開されています。 太っ腹!基本は英語ですが、日本市場に関するデータについては日本語も用意されています。 中には、チェックボックスで自分の欲しいデータをチェックしていくと自動でチャートを生成してくれるツールもあります。プレゼンやブログ作成に重宝しそうです。 例えば、2012年版:30歳~49歳で、スマホを使ってショッピングをしたことのある人の男女別割合を日/英
iPhone、iPadを基準にした数値が目立ちます。 レイアウトをPC、タブレット、モバイルで変更すると考えた時に、 代表的なデバイスでありユーザー数も多いiPhone、iPadが基準になるのも自然な流れかも知れません。 しかし、例えばブレークポイントをiPad基準にした768pxにすると、 幾つかのAndroidタブレットは800pxなのでこれらのデバイスにはタブレット用のレイアウトが適用されません。 ブレークポイントの数 少ないサイトは1〜多いところでは十数のブレークポイントを設けてるサイトもあります。 ただし、多く設定してるサイトもその全てでレイアウトが大きく変化する訳ではなく、 ごく一部のコンテンツのみ調整するといった使い方をしています。 例えば下記のサイトでは1300pxを境に境界線(.splitter)のみスタイルが変わります。 Remodelista: Sourcebook
え、なんのことやらと思うようなエントリータイトルですが、以下のスクリーンショットのような状態を作りたいときです。 ちなみにviewportの指定は「<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />」の、ピンチイン殺してるやつです。 左から青赤黄色のボーダーがビューポート幅にあわせて同じ幅でぴっちりとおさまっています。 IE6脳でコーディングしてしまうとfloatで横並びにしてそれぞれの幅に「33%」「34%」「33%」を指定しておこうかとか考えがちですが、これだと右隅に余白ができてしまいます。 HTMLとCSSは以下となります。 <ul> <li><a href="#">あ</a></li> <li><a href="#"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く