mobileに関するmei_koutsukiのブックマーク (14)

  • fladdict » スマホのUI考 〜 ボタンについて

    SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ

    mei_koutsuki
    mei_koutsuki 2011/06/13
    これはよいまとめ。メモ書きだろうけども。
  • jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布します

    簡単なものですけど、jQuery Mobile でのマークアップ時によく使うっぽい UIのサンプル作ったので配布します。 簡単なチートシート代わりになるのでは 無いかと思ったのでシェアしてみよう かと。良かったら使ってください。 というのも、JQMの日語サンプルの配布先を見かけなかったので、なかなかお困りの方もいらっしゃるんじゃないかなと。調べるの面倒ですし、手元にサンプルコードあったほうが何かと便利ですよね。 というわけで、以前マークアップサンプルの記事書いたときに作ったサンプルサイトに手を加えた物を丸ごと配布します。 流石にかなり出てるので今更説明不要かもですけど、ざっくり説明するとWebサイトをスマフォ向けに簡単に出来るjQueryプラグインです。 以下のサンプルで使用しているファイルが丸ごと梱包してあります。 サンプル※別窓 いちおうキャプチャ。 目次 サムネイル付きのサンプルと

    jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布します
    mei_koutsuki
    mei_koutsuki 2011/05/23
    時間があるときに見てみる
  • 1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering

    初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初

    1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
  • スマートフォンアプリデザインに役立つ 基礎のまとめ!

    スマートフォンアプリデザインに役立つ 基礎のまとめ!:一撃デザインの種明かし(14)(1/4 ページ) 各キャリアが新Android携帯を続々と発表し、スマートフォンへの注目がますます盛り上がる中、アプリケーションも、iPhoneAndroidともに展開するものが増えてきました。 そういった中で、稿ではスマートフォンアプリのデザインのコツをまとめてみます! iPhoneAndroidともに展開しているアプリ3例 まずは、iPhoneAndroidともに展開している有名アプリを3つ紹介します。それぞれのスクリーンショットを見ながら違いを探してみてください。 【1】クックパッド レシピの投稿と検索ができるアプリです。PCサイトの雰囲気はそのままに、トップ画面を旬のキーワードと履歴、検索ボックスのみに絞ったシンプルなUIになっています。要素とコンテンツを極力減らすことで、レシピ検索に集中

    スマートフォンアプリデザインに役立つ 基礎のまとめ!
    mei_koutsuki
    mei_koutsuki 2011/04/14
    最近すごいスマートフォン関係の記事増えてきたなぁ
  • jQuery Mobile が必須スキルになる!と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。

    Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいです。マジで。 HTML5+CSS3への対応が目に付きますが、個人的にはjQuery MobileとPhoneGapフレームワークの導入に注目します。 アプリ開発はこれまで、Objective-Cやjavaが主流でしたがDreamweaverでアプリへの書き出しまで出来てしまうなんて…。今後、モバイルアプリケーションの統合開発環境のデファクトスタンダードになる予感が。 ってことで、まずはjQuery Mobileを理解せねば! jQery Mobile についてはまだ書籍はあまりなく洋書しかありませんでしたので、参考になる記事を取り上げてみます。 http://jquerymobile.com/ 家サイト jQuery Mobile Gallery http://w

    jQuery Mobile が必須スキルになる!と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。
    mei_koutsuki
    mei_koutsuki 2011/04/14
    勉強しなきゃなぁ
  • WebサイトをiPhoneに対応させる -レスポンシブ・ウェブデザイン- - EC studio デザインブログ

    このところのスマートフォンの広がりにより、デザイン部でもWebサイトのスマートフォン対応の必要性をひしひしと感じています。 実際のスマートフォン対応の取り組みとしてはこれからなのですが、その時のために従来のサイトをスマートフォンに対応させる方法、特に今回は閲覧環境に応じてページレイアウトを柔軟に切り替える、レスポンシブ・デザイン レスポンシブ・ウェブデザイン(Responsive Web Design)(ご指摘ありがとうございます。)に関していまさらながら調べてみたので、大枠的なことをふわっとまとめておこうと思います。 レスポンシブ・ウェブデザインって まず「レスポンシブ・ウェブデザインとはなんぞや」と言うところですが、 Webサイトのページレイアウトを閲覧環境(パソコン、iPhoneAndroid など)に応じて動的に変更させる手法で去年あたりからよく耳にするようになりました。 ブラウ

    mei_koutsuki
    mei_koutsuki 2011/03/31
    考えなきゃね。
  • iモードHTMLとiモードXHTMLを正しく切り替える方法 携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-

    最近発売されているドコモの機種(FOMA)のブラウザにはたいてい iモードHTMLとiモードXHTMLの両方に対応したモードが搭載されています。 例えば、最新のハイエンド機種FOMA 904iでは、ドコモの技術情報の端末スペック表を見ると、 iモードHTMLはバージョン7.0、iモードXHTMLは2.1に対応していることが分かります。 これは、携帯電話が機能向上するのと並行して、 携帯に対応したHTMLもバージョンアップを繰り返すためです。 このi-HTMLとi-XHTMLの違いは、多くはHTMLタグで指定できる属性やCSSの対応状況になりますが、簡単に言ってしまえば、i-XHTMLのほうがより豊かな表現が可能になっていると解釈しても間違いではないでしょう。 さて、携帯サイトを作成する際のポイントについてふれますが、 多くの方が勘違いされているのは、 ドコモの機種が割と新しい機種、つまりX

  • XHTML仕様で携帯サイトを作成する際のコンテンツMIMEタイプ切り替え 携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-

    最近では携帯サイトはXHTMLで作るようになってきていますが、 そこで指定すべきコンテンツMIMEタイプはどのようにしなければならないか。 これはこのブログや書籍をご購入いただいた方はすでにご存じかと思いますが、 ドコモの仕様に合わせて「application/xhtml+xml」を指定するということでした。 再度説明するとドコモがXHTMLモードになる条件は ①サーバーが出力するHTTPヘッダーを「application/xhtml+xml」とする。 ②metaタグの「content」を「application/xhtml+xml」とする。 ことでした。しかし、この方法では、 1. 古い機種によってはエラーになってしまう可能性があること。 2. auやソフトバンクはMIMEタイプを「text/html」としてもXHTMLで動作すること。 3. 「application/xhtml+xml

  • モバイルでのXHTMLとCSS

    ちょっと脱線#2 次々と賛同者が! iアプリとかで良かったら喋るよー♪by yoshiori モバイルってなかなか知識得る機会ないから興味あるよ!by tobetchi なんかしゃべりましょうか?むしろ最近の話に弱いですが、準備しますよby tmtysk いきたいby fshin2000 高まる期待(*'∀`)=3ワクワクby cafistar モバイル勉強会興味津々!by clearether モバイル勉強会期待してます。by kaoritter これに対して携帯から全レスするみにたぼ (`・ω・´) シャキーン

  • memokami :: モバイル勉強会で「ケータイの絵文字の扱い方」について話してきました

    6月16日土曜日、モバイル勉強会に参加してきました。 miniturboさんのtwitterの一言から始まった今回の勉強会に yosukeさん経由で誘っていただきました。当に感謝です! 会場はELFさんのご尽力で、株式会社ノッキングオンさんに 無料で貸していただきました。 私は携帯の絵文字についてスピーカーさせていただきました。 私(memokami)がプレゼンした資料をアップしておきます。 「ケータイの絵文字のはなし」 ※追記 パワポの出力をリンクしてたら、FireFoxで見れないことが判明。 snotesがswfに変換してくれました。感謝! さてそんなモバイル勉強会のご報告です。 ★アジェンダ 6月16日(土)快晴 時間:13:30~18:30 懇親会:18:30~朝まで 場所:麻布十番 株式会社ノッキングオン 【アジェンダ】 ◆スピーカー 「そろそろiアプリについて一言言っておくか

    memokami :: モバイル勉強会で「ケータイの絵文字の扱い方」について話してきました
  • Flash Lite 2.0/3.0メモ

    Flash Lite 2.0/3.0 「Flash Lite 2.0」「Flash Lite 3.0」とは携帯電話用のFlashの実行環境。 オブジェクト指向言語「ActionScript 2.0」対応。 ドコモ/ソフトバンク/au/Willcomの4キャリア対応も容易。 (サウンドはキャリア依存) ActionScript 2.0用のコンパイラ「mtasc」も存在する。 Javaプログラミング感覚でFlashコンテンツを作成することもできる。 (MLDサウンドの読み込みなど日の携帯ならではの機能は使えないみたい。) 「Flash Lite 3.0」はFLV再生にも対応している。

  • エリクサーサポート

    TOP 販売終了に関するお知らせ 2017.04.01 ELIXIR5、エリクサー・ユニバーサル の販売を終了しました。 2017.01.31 ELIXIR5、エリクサー・ユニバーサル 販売終了のお知らせ サポート情報 2020.02.26 対応端末一覧を更新しました。 2020.02.26 ソフトウェアアップデート・リリースのお知らせ(Ver. 2.265) 2020.01.08 ソフトウェアアップデート・リリースのお知らせ(Ver. 2.264) 2019.12.19 年末年始の製品サポートに関するお知らせ 2019.12.13 対応端末一覧を更新しました。 2019.12.13 ソフトウェアアップデート・リリースのお知らせ(Ver. 2.263) 2019.10.15 iPhone 11/11 Pro/11 Pro Maxへの対応のお知らせ 2019.08.27 対応端末一覧を更新し

  • 携帯ホームページを作ろう! -ちょっと詳しいモバイルサイトの作り方-

    さっそく、読者の方から、「iモードブラウザ」が「2.0」になりましたが、 携帯サイト市場としてすぐに対応は必要ですか? というご質問を頂いたので、今更ではありますが僕なりの見解をお伝えしますね。 結論から言うと 「もちろん動向をウォッチしていくことは必要だが、焦ってすぐに対応する必要はない」 と思います。 iモードブラウザ2.0がドコモ新機種(昨年の夏モデル)に搭載されたとき、 技術系のブログではいち早く過去のブラウザバージョンとの違いを比較した情報を伝えていましたが、 私はその情報はもちろん作り手として知る必要はあると思うんですけど、 おそらく皆さんが思っているのは、そうではなくて、 じゃぁすぐに対応すべきかっていうことだと思うんです。 確かに携帯サイト業界のトレンドや動向は変化が早いと言われますが、 XHTML+CSSベースで携帯サイトが作れるようになった今でも、 核となる制作ノウハウ

  • red-eyes.jp Webツール モバピク

    携帯用画像にリサイズ変換して出力するAPI形式のWebツールです。─ モバピク URL形式で指定した画像ファイルを 携帯用画像にリサイズ変換して出力する API形式のWebツールです。 対応キャリアはDoCoMo,AU,SoftBankです。 新しく履歴ページを作成しました! こちらのAPI利用履歴で確認できます。 webアクセス時の携帯ユーザーエージェントより機種判別を行い、 機種情報データベースから情報を取得し、適切なサイズにリサイズします。 (機種情報データベースに存在しないものは強制的に120x120サイズに変換します。) 以下のようなAPI形式で利用してください。 画像ファイルPATHのURLを赤文字のように指定してください。 http://red-eyes.jp/api/mbpic/http://www.google.co.jp/intl/ja

    mei_koutsuki
    mei_koutsuki 2007/11/13
    JUGEMに使ってみようかな?
  • 1