サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
saladdays.hatenadiary.org
今回はマニアックにinputタグについて掘り下げようかと。 html5からinputタグのtype属性が大量に追加されています。 今までは type="checkbox" type="radio" type="image" type="text" type="password" なんかを使っていたと思いますが、html5では type="tel" type="url" type="number" など、内容に合わせた専用のtype属性が用意されています。 これで id="tel" とか id="url" なんて指定がいりません。 ただ、当然ブラウザごとに対応状況が違います。 せっかくのスマートフォンブログなので、iPhoneとXperiaでの対応状況を調べてみました。 iPhone(iOS) Android(Xperia) 対応 可否 入力モード 対応 可否 入力モード type="che
iPhone用のWeb制作は、すばらしき諸先輩方のブログなどがあるので、こちらではmixiアプリ スマートフォン版について言及していきます。(もちろんちょいちょい他TIPSも出しますが) 今回はmixiアプリ スマートフォン版において、技術的に「こういうコトができる/できない(やらない)」ことを見ていきます。 できるコト 基本的には後述の「できないコト」以外は、ほとんど制限を受けません。が、「なんだこれ?」とハマって解決できたコトはありました。 ページ遷移時にページトップへ移動する これは結構ハマる方多そう。mixiアプリ スマートフォン版が、という限定ではありません。iframeで読み込んでいるコンテンツ全てに起こります。 iframe内でページ遷移をすると、スクロール位置は保持したまま次のページを表示してしまいます。この仕様、わけわからん。。 解決方法は簡単、リンク先の末尾に「#」を付
mixi meetup 2010で盛り上がった9/10、アメリカ西海岸でとんでもないニュースが発表されていましたね。 アップルが iOS 開発者規約を変更、開発ツール制限を緩和。審査ガイドラインも公開 iPhoneアプリ審査での111の禁止項目(意訳) Appleが発表したApp Storeの審査ガイドラインについて知っておくべき点 Adobeさんにお怒りだったはずジョブズ閣下が、「Objectev-C以外でも開発してもいいよん、別にー」と言ったものだからさぁ大変。AdobeはPackager for iPhoneの開発を再開し、Adobeの株価は12.1%も上がったり大騒ぎでした。 ま、正直「Objecteve-C今から導入するのも手間だし、HTML5で行こうぜ!俺の時代だぜ!」と会社に大見得切っていた僕としてはかなり涙目な状況なのですが、ここは冷静に「FlashでiPhoneアプリが作
ちょっと蛇足ですが、iPhone Webをデザインの参考にしたサイトをつらつらと。 まずはやっぱり本家Apple公式 iPhoneのUIガイドライン目を通しておくと考え方が整理されやすいです iPhone ヒューマン インターフェイス ガイドライン ネイティブアプリかと見紛う作り 多分Appleが作っている唯一のiPhone用サイト iPhone ユーザガイド デザインまとめ(のまとめ)サイト 海外のiPhone/iPadアプリ&Webまとめ iOSpirations soundscape outさんのiPhoneアプリの紹介Webまとめ iPhone アプリと Web デザイン Part.5 カヤックさんのデザイナーブログの人気エントリー http://design.kayac.com/topics/2010/08/post-25.php:title=デザイナー必見!ポータルのポータル【
今回はmixiアプリ for Touch限定ではなく、スマートフォンにおけるHTML5の対応状況について。 まず、基本的にiPhone・Android共に標準のブラウザではWebkitを描画エンジンとして用いており、共通する仕様が非常に多いです。 それらはSafari・Google Chromeを使ってご存じの方も多いかと。 webkitと言えば常に新しい規格を作り標準規格として採用された実績を持つブラウザ、HTML5の対応にも期待が持てます。基本的にhtml5の技術は進んでバリバリ使ってOKと考えましょ。 ただ、XPERIAはAndroid1.6ということで、現存するAndroid端末の中でもかなり古いため、webkitのバージョンが古いのでしょう。ちょっと心配な面もあります。 また、HTML5と言っても実はかなり広義にわたる意味を持っており、今までのXHTMLと違いCSSやJavaSc
ソーシャルアプリをmixi上で展開するとなると、何らからの形でFlashアニメーションの代替が必要になってくるのではないでしょうか。 例えば怪盗ロワイヤルのレベルアップアニメーションとか。 今回はそれらの代替手段を考えてみます。 Flash ジョブズ閣下はお怒りなので、iPhoneではまず今後も対応しないでしょ。Androidも現状未対応なので却下。 アニメーションGIF 今でもモバイルでは結構使ってる。間違いなく堅実な方法。ただ、1コマの容量×コマ数と言えるほど圧縮率は低い。キャッシュを活用できれば有効。 アニメーションpng マイナーだが、実はpngの画質でアニメーションができます。アルファチャンネルにも対応。 けど現状はFirefoxのみ対応。却下。 Canvas html5の新技術。iPhone・XPERIA共に対応。ベクターデータを扱えるので拡大・縮小をしても劣化をしない。しかし
ボタンの縦横サイズ 指で操作するために必然的に自分の指の下になる箇所は隠れます。 そのために縦にボタンを並べると、上のボタンを押しているとき下のボタンは見えません。 ボタン類を縦に並べる場合は、ある程度の距離を取りましょう。 逆に横にボタンを並べる場合、ボタンを教えている最中に横のボタンも見えるため、縦に並べる場合よりも押し間違いが少ないようです。 近い距離にボタンを並べる場合は、横に並べる方がいいかもしれません。 (もちろんそんな風には並べない、というガイドラインを作るのがベストですが) inputタグとlabelタグ テキストテキストやタグで選択肢を用意する際に、クリック領域を広くするためにタグで囲う、もしくはlabel forで対象を指定するなどしている方が多いかと思います。 しかしなぜかiPhone/Androidではに対するlabelが反応してくれません。(はOK) そのため指で
さて、前回のエントリーで色んな制限を学んだので、ようやくデザインに入ります。 今回デザインするみんなでケンテイ(´∀`)は、モバイル版/PC版共に提供をしていますが、PC版を見ていただくとわかるように、モバイル版を力いっぱい流用したデザインです。決して手抜きじゃないよ なので「PC版/モバイル版、どっちを参考にする?」という悩みは無いのですが、基本的にはもし両方のデザインが既にあるのならば、PC版のデザイン+モバイル版のレイアウトが無難ではないでしょうか。 みんなでケンテイ(´∀`)は、基本的にテキストコンテンツの リスト(一覧)表示 回答フォーム 結果表示 で構成されており、iPhone標準アプリの「連絡先」のような構成です。 ただ、「連絡先」で利用されている「A simple list in a plain table view(プレーンテーブル)」(iPhone ヒューマン インター
このページを最初にブックマークしてみませんか?
『30分で学ぶ「mixiアプリ for touch」(スマートフォン版mixiアプリ)の作り方』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く