サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
レスポンシブだけじゃいられない？時と場合によるユーザーエージェント判別の方法 2013.06.14 | 初心者向け | 覚えておきたい 先週、某iPhoneアプリをリリースした際に公式サイトを担当したネイビーです。iPhoneアプリだから公式サイトはiPhoneで見れればいい！というわけではないんですね。知りませんでした。だったらレスポンシブで！と行きたいものの、ニョーンと伸び縮みするスタイルが万人受けするものでもありません。iPhone向けとPC向けのページを作ってユーザーエージェントで振り分ける方針が決まりつつ、いつどこで判別したらよいものか？リリース前日まで悩んでしまいました。PHPによる判別 スマホ向けとPC向けのコンテンツを振り分ける際にまず思いつくのは、サーバ側のプログラムでユーザーエージェントを判別して処理を分岐する方法です。端末によってコンテンツの種類や量を調節したり
iOS向けのテストツール（主にUIテスト）を探していたところ、Calabash-iOSがすごくいいという記事を見つけました。 VOYAGE GROUP エンジニアブログ : iOSの究極テストツール:Calabash-iOSを使いこなすぞ！(1) VOYAGE GROUP エンジニアブログ : iOSの究極テストツール:Calabash-iOSを使いこなすぞ！(2) Calabash-iOSとは Calabash-iOSはオープンソース（Eclipse Public License 1.0）のBDD系UIテストフレームワークです。Calabash-iOSのREADMEを見てみると、「AndroidとiOSのネイティブとハイブリッドアプリケーションのための自動テスト技術です」と書かれています。しかも上で紹介した記事で書かれている通り、シミュレータと実機の両方でテストが実行できるとのことです。
2013-04-13CSS Nite ＠Co-Edo, Vol.8「UIデザインのパターン化」に行ってきたよ 4月4日に行われたCSS Nite ＠Co-Edo, Vol.8「UIデザインのパターン化」に行ってきました。この前ここにも書いたCSS Nite LP26のCSSプリプロセッサの回で、クックパッドの@tikedaさんのお話をもっと聞いてみたいなーと思っていたので、これは！！と思い。テーマは「UIデザインのパターン化」。ちょうど「スマートフォンのためのUIデザイン ユーザー体験に大切なルールとパターン」という本を出されたばかりだったので、本から抜粋された内容が紹介されました。以下Agenda。UIのパターン化・ルール化とは プラットフォームの流儀 画面パターンUIコンポーネント 実践事例 パターンとルールがもたらすメリット 90分という短い時間だったけど、ワークショップ的なの
スマートフォンやタブレットなどのモバイルデバイス向けにUIをデザインする際には、タッチ操作に適したコントロール表現を追求しなければいけません。 タッチ操作に適したコントロール表現とは、前回書いたジェスチャもありますが、それ以前に、ボタンやリンクなどのUI要素を指で押しやすい大きさにすることが大切です。 パソコン画面のマウスポインターと違って、タッチスクリーンにおいて指でボタンをタップする場合、指がそのボタンを覆い隠してしまうので、意図した場所に正しく触れているのか分かりにくく、またボタン自体の視覚的なフィードバックも確認しづらいという課題があります。 またマウスポインターではピクセルレベルで画面上の座標を指し示すことができますが、指先ではそのような細かい操作はできません。 ですからタッチデバイスでは、ボタンやリンクが細かく密集しているようなデザインは大きなストレスになります。 最低限の大き
こんにちは、ゲームチームのキノです。 先週、カジュアルゲームアプリ「なぞダン -なぞるだけダンジョン-」がApp storeで公開されました！！！！ ひとさしゆびだけの超シンプルな（でもムズイ）ダンジョンゲームです！ 過去にキャンペーンの一環などでゲームは何度かつくってきましたが、 今回が初の企画段階からのモック含めた参加になるので、学んだことや役立ったを書いておきます。 あとは地味にデザイナー向けにアプリ制作のtipsなど。 意外と長くなってしまったので、週末にじっくりお読みください〜 アプリは無料！！こちらからダウンロードできます。 それでは記事の続きをどうぞ〜！！ 素材の話 いつも数字忘れるので アイコン （なにか見覚えのある階段的なアイコン） アイコンはかなり肝いりです。 気をつけている点は １キーワードで言い表せるか フレームと世界観はあってるか 類似アプリより突出しているか 画
日本発のiPhoneアプリ「Mooklet」が、仏AppFire主催の期待のアプリを審査するコンテスト「App Star Award 2012」で、審査対象となった数百アプリの中からNo1の座を射とめた。 このアプリはiPhone上で、カメラロールの写真を使ったフォトアルバムを、HTML5で書かれたウェブアプリとして書き出すことができるというもの。書き出された作品は、iPhoneやiPadのブラウザから閲覧可能。サンプルギャラリーなどを見て分かる通り “思い出のアルバム” らしい、豊かな表現でシェアできるところに評価が集まっているようだ。 半自動で動きあるHTML5フォトブックが完成 開発したのは京都在住 KANTETSU WORK代表 コバヤシトール氏。これまでBiND for WebLifeやMogSnapなど人気プロダクトの開発に関わってきた。 アプリはさすがの完成度で、操作するだけ
ベンダー接頭辞（プレフィックス）については最近いろいろと議論が活発ですが、そういう難しい話ではなくて、現状のCSSについての話です。 新しいCSSモジュールを使うために、ブラウザごとに接頭辞をつけなくてはいけない場合があります。まあそれについては現状では仕方ないことなんですが、接頭辞なしでも動作するようになったものでも、いつまで経っても接頭辞つきのものを書くのはどうなのかなと思うわけです。CSSのコードも冗長で読みづらくなりますし、もう使われていない（使われることもない）であろうものを残しておくのもちょっとなー。 実際に運用されているサイトなんかだとそうそう簡単に手を入れられないかもしれませんが……。 また、はてなダイアリーの方でも書きましたが、ブログのチュートリアルを見ていて「もうその接頭辞つきの役目は終わった（終わりつつある）のに、なんでそれしか書いてないの」と思うことが結構あります
モバイルデバイス用のWebサイトやWebアプリケーション開発で大変なものの1つが動作確認です。何台ものデバイスを机の上に並べて、ひとつひとつ確認しなければなりません。 アドビシステムズのAdobe Labsが公開した「Adobe Shadow」は、そうした苦労をしているデベロッパー、デザイナーにとって手放せないツールになるでしょう。 複数デバイスに対する同時表示とリモートインスペクション Shadowがどんなツールなのか解説用ビデオの説明を紹介しましょう。iPhoneアプリのShadowを起動すると番号が表示されます。 その番号を、MacOSかWindows用Chromeブラウザのエクステンションとして配布されているShadowに入力します。これで、ChromeブラウザとiPhoneがペアになりました。 同じように、Android用ShadowもChromeブラウザとペアにすることができ
下記からダウンロード可能です。 http://www.facebook.com/metaps?sk=app_208195102528120
UIについて徒然と考える自分用メモ、２回目はフィードバック。ユーザーに「何かがおきたよ！」と如何に明解に知らせるか？１回目はこちら 随時増えたり減ったりするよ。自分の主観だから間違ってることもチラホラあるかもよ。 振り返ってみてTiltShiftGenでは、遷移系のフィードバックは少なめにして、情報系のフィードバックを多めに調整してたんだなぁとシミジミ。多分、ブラーの処理が重かったからだと思う。隙をみてバージョンアップしたい。 一般論 ・フィードバックとは？ ユーザーの操作に対して、結果を返すこと。操作の実感。 ・フィードバックのないアプリは痛覚の無い人間。 ・物理的なフィードバックもソフトウェア的フィードバックもなければ、ユーザーは何がおきているか知覚できない。 ・何かが起きたら必ずユーザーに通知する。 ・適切なフィードバックが行われるとユーザーは快感を感じる。 ・新雪に足跡をつけたり、
SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ
1つのHTMLでPC、iPhone、Android、BlackBerryに対応するスライドショーを作成出来るライブラリ。 PhotoSwipe from Computerlovers onVimeo. PhotoSwipe http://www.photoswipe.com/ 読み込むファイルは以下の3つ。 <script type="text/javascript" src="simple-inheritance.min.js"></script> <script type="text/javascript" src="code-photoswipe-1.0.9.min.js"></script> <link rel="stylesheet" type="text/css" href="photoswipe.css" />HTMLの記述は以下。 <div id="Gallery">
iPSim -Chrome Web StoreChromeをiPhoneシュミレーターにできる拡張「IPSim」 IPSimを使えばChromeをiPhoneシミュレーターにすることが出来ます。 インストールすると次のようにボタンが追加されます クリックするとシュミレーターが現れます。 縦・横方向での表示が可能。 以下、横表示の例Chrome自体がWebKitベースなので実機でもそれほと差異がない点にも注目。ChromeでサクッとiPhone対応したい場合に入れておくとよさそうですね。 関連エントリPHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScriptErrors Notifier」PHPフロントエンドのコンソールロギング用Chrome拡張「C
Note & Share :iPhone→クラウド メモ放り込みアプリで、Note & Shareのクラウド連携については詳しく見ていきました。今回は、 「ある程度の長文をiPhoneで作成→クラウドへ保存」をいかに快適にするか について考えていきたいと思います。 大前提 ある程度の長文作成を想定しているので、まず、以下の二つのアプリと連携していることを大前提としておきます。ATOK Pad 1.2.1iPhone および iPod touch 互換 iOS 4.0 以降が必要 カテゴリ:仕事効率化 価格: ￥1,200 更新: 2010/11/10 日本語変換に弱いiPhoneで文章を書くには、それを補ってくれるATOKの存在はかなり大きいです。TextExpander 1.1.8iPhone、iPod touch およびiPad 互換 iOS 3.1 以降が必要 カテゴリ
TheiPhone 4 features a vastly superior display resolution (614400 pixels) over previousiPhone models, containing quadruple the 153600-pixel display of theiPhone 3GS. The screen is the same physical size, so those extra dots are used for additional detail — twice the detail horizontally, and twice vertically. For developers only usingApple’s user interface elements, most of the work is already
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
