書評『スマートフォンのためのUIデザイン』 - Kentaro Kuribayashi's blog
tikedaさんより、新著『スマートフォンのためのUIデザイン』をご恵投いただきました。ありがとうございます。結論からいうと、名著、英語でいうと、"Epic, just epic"って感じ。必読です。 スマートフォンのためのUIデザイン ユーザー体験に大切なルールとパターン 作者: 池田拓司出版社/メーカー: ソフトバンククリエイティブ発売日: 2013/03/30メディア: 大型本 クリック: 117回この商品を含むブログ (2件) を見る 本書は、スマートフォン用のアプリ・ウェブサイトのパタンを分類・整理した上で、網羅的に紹介する本です。かつての類書に『iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン』という本があって、これはこれで素晴しいのですが、本書はカタログに徹したことで、さらに価値を高めていると感じました。 そもそもデザインにとって、パタン化は伝統的な営み
jQuery MobileのDateboxをカスタマイズ-その２ - Kimura.Memo
iPhone、Androidなどのスマートフォンで動作するjQueryMobileプラグイン - DateBoxが、jQueryMobile v1.1.1に対応*1したので、前回に続き、しつこくまとめてみました。 カレンダー式入力モードを少し使ってみた感じでは、以前より動作が大分安定してきています。 設定オプションがかなり増え、日本語用ローカライズファイルを読込むことで、簡単に日本語表記になってくれます。 また、デフォルトでマニュアル入力が無効にされているので、カレンダーが表示されたと同時にソフトキーボードが起動するということも無くなりました。 以下、主にカレンダー式入力モード（CalBox mode）についてまとめています。 jQueryMobile DateBox とは jQueryMobile DateBox の使い方 必須条件 必要なJavaScriptとCSSを読込む 入力フィー
Facebook Style Slide Out Menu in jQuery Mobile - Aldomatic
I wanted to recreate the slide out menu in the Facebook iPhone app. I also wanted implement it in a jQuery mobile layout. This is what I came up with. HTML It viagra online delivery is made exclusively for strong and hard erection. Do not indulge in the consumption of nitrates loaded stuff, one tolerating any kind of heart issue should get suggested by the cardiologist not to relish in sexual acti
YappoLogs: iPhone で position:fixed な UIToolBar を簡単に作る jquery.mobile.iscroll.js を作った
« iPhone とかの フリックで操作するカルーセル UI を jQuery mobile で作ってる話 (jquery.mobile.carousel) | Main | FizzBuzz最短回答 もしくは Yahoo!Japan 入社課題提出エントリ » iPhone で position:fixed な UIToolBar を簡単に作る jquery.mobile.iscroll.js を作った iPhoneのWebサイトを作っていて、良くあるアプリの上と下の position:fixed なメニューを実装しようとした時に、iScrollを使えばわりかし楽に実装出来ます。 jQuery mobile (1.0a2) を使ってると header/footer 要素に data-position="fixed" を書いておけばそれっぽい動きになるんですが、スクロールイベントを受け取るた
iScroll 4 – Matteo Spinelli's Cubiq.org
iScroll finally received a complete rewrite. Now it’s smoother than ever and adds some new important features: pinch/zoom, pull down to refresh, snap to elements and more custom events for a higher level of hackability. Download Screencast Live Demo GitHub Forum Project info Last code update: 2012.07.14 – v4.2 Device compatibility: iPhone/Ipod touch >=3.1.1, iPad >=3.2, Android >=1.6, Desktop Webk
ネイティブアプリのようなWebアプリを作るために
※image via 003 FREE WEB GRAPHICSデバイスの多様化に伴い、拡張性の高いWebアプリの重要性が見直されています。サイバーエージェントのデカグラフを構成するサービスも基本的にはWebベースで作られていますが、これはアプリの改善スピードを上げたり、各サービス間の回遊性を高めるという狙いもあるようです。 ただし、スマートフォンユーザーはネイティブアプリ先行でサービスに触れているため、これまでのWebアプリでは当たり前だったことが、今ではストレスに感じてしまうことも多いです。HTML5の登場やJavascriptのライブラリの充実などにより、最近ではリッチなWebアプリを作る環境が急速に整ってきてはいますが、それでもスマートフォン向けに満足度の高いWebアプリを提供するハードルは非常に高いと言えると思います。 そこで、「もっさり＆カクカク」な印象のあるWebアプリの操作
html5でアプリの壁を超える方法
制限 同時に再生できる音源は1ファイルのみ 再生できるタイミングはユーザイベントのハンドラ内だけ プリロード不可 OS自体のサイレントモードと連動せず BGMを流すだけならこんな方法も $('<div>BGMを再生しますか？</div>').appendTo('body').click(function () { $(this).remove(); (new Audio('bgm.mp3')).play(); }); $('body').on('click', 'a', function (e) { e.preventDefault(); $.get($(this).attr('href')).success(function (html) { $('body').html(''); $('body').append($(html).find('body')); }) });
jQuery Mobile のbeta2がでたので例によって変更点まとめた
先日，jQuery Mobileがbeta2にあがりました．前回みたいにテンションあがるアップデートではないので，淡々と． beta1以前にあったXSS等の問題はキチンとfixされているようなので，beta1以前でサイトを大公開しちゃってる方々は，可及的速やかにbeta2に上げましょう． 今度こそ脆弱性がなくなってるといいですね！ 今回の変更点 alphaからbetaほどの大々的な動きはありません．普通にHTML駆動で利用している分には，あまり関係なくCDNからの読み込みをb2に変更するだけで，すんなり移行できるはずです． UIウィジェットを選択的にビルドできるように サポートされるプラットフォームの追加 createイベントの追加 DOMキャッシュ管理機構 vclickイベントの廃止 スワイプイベントのしきい値が設定可能に 動的にローディングメッセージを書き換えられるように ページプリフ
jQuery Mobileのイベント処理(3/6):jQuery Mobileによるスマートフォン用Webサイト作成入門 - libro
スマートフォンの操作といえば、タップよりもこちらのほうが重要でしょう。それは「スワイプ」です。画面を指先でさっとなでる、あれですね。これのイベントも、ちゃんとjQuery Mobileには用意されています。 タップはマウスのクリックとほとんど同じ感覚ですからあまり便利さを感じないかも知れませんが、スワイプに相当するHTMLのイベントは存在しません。たとえパソコンでも、マウスで画面上をさっとドラッグすると動くイベント、なんて聞いたことがありませんね。このスワイプに関するjQuery Mobileのイベントは、全部で３種類あります。 swipe――画面をスワイプしたときのイベント swiperight――画面を左から右へとスワイプしたときのイベント swipeleft――画面を右から左へとスワイプしたときのイベント swipeは、とにかくどの方向でもいいからスワイプすれば発生します。これに対し
アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール
モバイルデバイス用のWebサイトやWebアプリケーション開発で大変なものの1つが動作確認です。何台ものデバイスを机の上に並べて、ひとつひとつ確認しなければなりません。 アドビシステムズのAdobe Labsが公開した「Adobe Shadow」は、そうした苦労をしているデベロッパー、デザイナーにとって手放せないツールになるでしょう。 複数デバイスに対する同時表示とリモートインスペクション Shadowがどんなツールなのか解説用ビデオの説明を紹介しましょう。 iPhoneアプリのShadowを起動すると番号が表示されます。 その番号を、MacOSかWindows用Chromeブラウザのエクステンションとして配布されているShadowに入力します。これで、ChromeブラウザとiPhoneがペアになりました。 同じように、Android用ShadowもChromeブラウザとペアにすることができ
HTML5 で作る iPhone ローカル Web アプリ入門
さて、まず「ローカル Web アプリ」ってなんぞっていう話ですが、Web ベースの技術で作られブラウザからサーバにアクセスして利用するものの、いったんロードが完了したら、それ以降はネットワーク接続不要で動作する Web アプリ、といった概念を表した造語です。 iPhone の App Store を経由することなく配布が可能なので、アプリの内容について一切の制限がなく、また、最近のライブラリの進歩やモバイルパフォーマンスの向上により、ものによってはネイティブアプリと遜色ないレベルのものも作れるようになってきました。 先日、1 Click Config (閉鎖済) (解説記事) を作って公開しましたが、これがまさにローカル Web アプリとして動作しています。 ここで使われている技術の各論についてはそれぞれ詳しく書いたサイトがあるのですが、これらの技術をひとまとめに紹介しているサイトが見当た
jQuery Mobile リファレンス的なもの - へっぽこプログラマーの日記
jQuery Mobile のリファレンス的なものを作りました。 取り敢えず叩き台で、ツッコミなどあればコメントください！ ※RC2版に対応しました Page 要素 属性 値 概要 div data-role page ページ 設定 値 既定 備考 data-fullscreen boolean false フルスクリーン表示（ヘッダーとフッターでdata-position="fixed"を指定する必要がある） data-add-back-btn boolean false 戻るボタンの自動生成 data-back-btn-text 任意 "Back" 自動生成された戻るボタンのテキスト data-keep-native 任意 ネイティブで利用するUIをセレクターで指定する data-dom-cache boolean false ページをキャッシュする data-theme 任意 c テ
foursquare Labs Inc.との日本における協力関係の構築について | 2011年 | KDDI株式会社
KDDI株式会社 (本社: 東京都千代田区、代表取締役社長 田中孝司、以下KDDI) は、foursquare Labs Inc. (本社: ニューヨーク、Interim CEO: デニス・クローリー、以下foursquare) と、位置情報を利用したソーシャルサービスの拡大を目指し、日本においてfoursquareのサービス普及促進および顧客の運用サポート等について、協力関係の構築に合意しました。 両社は、まず、2011年2月10日 (金) に発売する「REGZA Phone IS04」、2011年春に発売する「IS05」に、foursquareのアプリケーションのショートカットを搭載します。 foursquareのInterim CEOであるデニス・クローリーは次のように述べています。 「東京が世界で2番目にチェックインされている都市という実績のとおり、foursquareは、日本で大
永久保存版！？携帯コーディング、これだけ読めばすぐできる！ | KAYAC
マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 （いつもありがとうございます！） そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！ 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する） 画像を含むページ容量100KB以内（HTML自体の容量は9KB以内） 画像はgifか
iモード専用サイトのhtmlソースの閲覧方法 « mpw.jp管理人のBlog
iモードブラウザ2.0のJavaScriptを調査･研究する過程で、iモード専用サイトのhtmlソースを閲覧する方法を発見しました。 今回発見した方法を用いれば、「ドコモ・ゲートウェイ以外からのアクセスを禁止している」、「サーチエンジンのクロールを禁止している」、「XSS脆弱性が存在しない」の三つの条件を満たしているiモード専用サイトでも、htmlソースを閲覧することができます。 しかし、htmlソースを閲覧するためには、そのiモード専用サイトが別の二つの条件を満たしている必要があります。 htmlソースが閲覧可能なiモード専用サイトの条件 デフォルトホストで運用されている。（ヴァーチャルホストではない） iモードブラウザ2.0のJavaScriptからのアクセスを禁止していない。 iモード専用サイトのhtmlソースの閲覧方法 iモードブラウザ2.0のJavaScriptで、htmlソース
PHPを使って3分で作る3キャリア対応ケータイサイト | ke-tai.org
PHPを使って3分で作る3キャリア対応ケータイサイト Tweet 2009/11/17 火曜日 matsui Posted in ソフト紹介, 全キャリア対応 | 28 Comments » 本日は3分で3キャリア対応ケータイサイト作れてしまうというPHPスクリプト、「らくらくケータイ3キャリアコンバーター（仮名）」を作成してみましたので、そのご紹介をさせていただきます。 先日のPHP勉強会で発表させていただきました。 ご参加いただいた皆様、本当にありがとうございました。 発表資料をアップしてありますので、まずはこちらをご覧ください。 PHPを使って3分で作る3キャリア対応ケータイサイト View more documents from ketaiorg. ということで、「3分で作る」とは謳っているものの、ドコモ用に作られたHTMLを他キャリア用にコンバートするだけの、実に簡素な作りです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマートフォン対応、気をつけたいトラブル
jQuery Mobile 1.1.0 日本語リファレンス
docomo IDについて | NTTドコモ
GPS携帯を使った口コミサイト構築 - PHPによるメールの受信処理 -
