Multi-touch web development | Articles | web.dev
Multi-touch web development Stay organized with collections Save and categorize content based on your preferences. Introduction Mobile devices such as smartphones and tablets usually have a capacitive touch-sensitive screen to capture interactions made with the user's fingers. As the mobile web evolves to enable increasingly sophisticated applications, web developers need a way to handle these eve
スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog
最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください） download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT
Win/Mac/Linuxで動作するiPhone/iPadエミュレーター -iBBDemo3
Windows, Mac OS, Linuxで動作するAdobe AirアプリのiPhone/iPadエミュレーター「iBBDemo」が3にバージョンアップしたので紹介します。 iBBDemo3 [ad#ad-2] iBBDemoはiBBDemo2からAdobe AIRベースになり、一時開発が打ち切られましたが、このたびiBBDemo3をリリースした、と作者様より連絡をもらいました。 iBBDemo3の変更点は、バグ修正とviewportメタタグへの対応です。 iBBDemo3のiPadモードで当サイトを表示 iBBDemo3のキーボードショートカット iBBDemo3の主な操作はキーボードショットカットで行います。 iPad Ctrl+1 iPhone Ctrl+2 位置変更 Crtl+矢印キー（右・左） ズームイン Ctrl++ ズームアウト Ctrl+- コンテンツのスクロール マウ
iPhoneサイト向けCSSサンプル（CSS3）｜ConneLog｜ConneCre
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> * { word-break: break-all; -webkit-touch-callout:none; -webkit-tap-highlight-color:rgba(255,255,0,0.4); -webkit-text-size-adjust:none; } word-break: break-all; URLなどの文字列の強制改行。ただし句読点なども先頭にくるため要検討。 -webkit-touch-callout:none; 長押しした際のとび先URL非表示。ただし画像リンクをタップした際のハイライトがおかしくなる。aタグ要素にdisplay: block ;を指定す
スマートフォン機種情報一覧 - maxfactory | モバイル関連の技術メモ
※OSのバージョンとユーザエージェントはOSアップデートがある端末もあるので、正しい値ではありません。近しい値ではあるので、参考までに
スマートフォンUA一覧・2010夏
最近、電車内でもXPERIAなどAndroid勢をだいぶ見るようになってきましたね。 以下、まとめ。 HTC Desire X06HT Mozilla/5.0 (Linux; U; Android 2.1-update1; ja-jp; HTCX06HT Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 ※「モバイルビュー」 ON。オフのときはMacを語る模様。 Sony Ericsson Xperia SO-01B Mozilla/5.0 (Linux; U; Android 1.6; ja-jp; SonyEricssonSO-01B Build/R1EA018) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2
伊藤直也氏が語るグリースマートフォン向け開発シフト｜【Tech総研】
日本でも本格的な普及期に入ったiPhone/Androidなどのスマートフォン。デバイスが変わることで、ソーシャルネットワーク・サービス(SNS)のプラットフォームや、アプリケーションも変わっていく。猛スピードでスマートフォン対応を進めるグリー。その開発現場で話を聞いた。 現在、国内で1000万台使われていると言われるスマートフォン。2年後には国内出荷台数は6000万台に達するとみられる。携帯電話を機種変更するつもりでショップを訪れると、スマートフォンしか並んでいないということが、まもなく起こるだろう。それに伴い、スマートフォンビジネスが本格化しつつある。そのビジネスは、海外市場へも広がる。フィーチャーフォンからスマートフォンへビジネスの軸足を大胆にシフトしつつあるのが、ソーシャルネットワーキング・サービス(SNS)業界。中でもグリーの動きは急ピッチだ。 国内だけをみても、昨年8月にはスマ
もう知らないでは許されない！！「これからはじめる」という人のためのjQuery Mobile情報まとめ | ke-tai.org
もう知らないでは許されない！！「これからはじめる」という人のためのjQuery Mobile情報まとめ Tweet 2011/5/27 金曜日 matsui Posted in Android, iPhone, 記事紹介・リンク | 4 Comments » モバイルサイト作成のためのフレームワーク「jQuery Mobile」が、すごい人気ですね。 当初は数ある選択肢の中の一ツールとして程度の扱いでしたが、AdobeのDreamweaverが本格対応するなど、その勢いは留まるところを知らず、根幹的な技術になりそうな気配すらあります。 今回は過去に当サイトで掲載させていただいた情報も含め、jQuery Mobileを学ぶ上で知っていた方が良さそうなリンクをまとめてみました。 本家サイト。英語が苦手な私は、主にダウンロード用途ぐらい。 → jQuery Mobile 本家サイト（英語） [j
[jQuery Mobile]役立つコード集とつまづきやすいポイント | コリ
jQuery Mobileを使って、スマートフォン対応ページをはじめて作成する際に役立つコード、つまづきやすいポイントを紹介します。 10 handy jQuery mobile tips and snippets to get you started [ad#ad-2] 下記は各ポイントを意訳したものです。 スマフォ対応ページの基本HTML jQuery Mobileの利用方法 AJAXナビゲーションの停止 リストアイテムの省略を阻止 Media Queriesの利用 プラットフォームの特定 フォームを使用する際の注意点 ポップアップ ダイアログの作成 キャンセルとセーブのボタン カラム構造を作る時のポイント スマフォ対応ページの基本HTML まずは、スマートフォン対応ページを作成するための基本となるHTMLです。 HTML <!DOCTYPE html> <html> <head> <
Amebaついにオープン化、まずはスマホ版から
サイバーエージェントがコミュニティサイト「Ameba」のスマートフォン向けプラットフォーム「Ameba Smartphone Platform」を開発し、一部デベロッパーに対して開放する。外部のアプリケーションデベロッパーがAPIを利用して、スマートフォン版Amebaにゲームなどを提供できるようになる。 Ameba Smartphone Platformではサイバーエージェントグループが開発するアプリを提供するほか、一部のデベロッパーにAPIを公開し、サードパーティのアプリを迎え入れる。4月時点ではiOS向けの提供を、今夏にはAndroid向けの提供を予定している。 このプラットフォームを利用することで、スマートフォン向けアプリからAmebaユーザー同士のコミュニケーション機能やランキング機能、ブログ投稿機能、画像投稿機能などを利用できるようになるという。 サイバーエージェント技術部門 執
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
Android用ページ制作に役立つかもしれないアプリ3つ
twitter facebook hatena google pocket Android用のページを作る際に役立つかもしれないアプリを紹介します。 ちなみに一般的なAndroidアプリは下記を見るといいかもしれません。 参考）Androidの神アプリスレまとめ記事の内容を整理しつつ最新化しました sponsors Google Chrome to Phone コーディングした後、実機で確認するのが、面倒だったりしますよね。 Chromeのエクステンション（Google Chrome to Phone Extension）を利用すればワンクリックで実機のブラウザを立ち上げ、当該ページを表示してくれます。 ※firefoxのアドオンもあります。FoxToPhone アプリのGoogle Chrome to Phoneでは、履歴を残してくれるので、何度も見るのに最適です。 ■URL：https
ke-tai.org > Blog Archive > Android専門雑誌「Androider＋（アンドロイダープラス）」が創刊されるようです
Android専門雑誌「Androider＋（アンドロイダープラス）」が創刊されるようです Tweet 2011/4/15 金曜日 matsui Posted in Android, ニュース | No Comments » 今年の6月に、Android専門雑誌「Androider＋（アンドロイダープラス）」が創刊されるようです。 → Impress Japan ニュースリリース インプレスジャパンとトリワークスが業務提携 -トリワークスの運営するAndroid人力レビューサイト『アンドロイダー』の公式マガジン『Androider＋』をインプレスジャパンが創刊!- [impressjapan.jp] → ケータイWatch Androidアプリ情報を掲載「アンドロイダー」の公式マガジン創刊 [k-tai.impress.co.jp] 今回創刊される「Androider＋」は、Android
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
【スマホ集中連載 第5回】 "アプリ開発の検証作業の進め方" 〜高い品質を保つための3ステップ : LINE Corporation ディレクターブログ
スマートフォンのアプリ検証を担当している宮澤です。 スマホ集中連載の第5回目、本日はアプリの品質管理について見直す際に役立つと思われる項目、検証作業のノウハウについて記載します。 はじめに Webサービスと異なり、アプリは実機にユーザがインストールして使うので、例えばアプリのバグを発見して即座に修正・公開しても、ユーザにアップデートを行ってもらわねばその修正を反映できません。iPhoneアプリの場合はAppleの審査を挟みますので、即時公開可能なAndroidアプリよりもなおのこと時間を要します。 また、それと同時にせっかくサービスに興味を持っていただき、利用したいと思っていただいているお客様の気持ちに答えられなくなってしまうので、最大限注意を払い神経を使って取り組まなくてはいけない重要なミッションです。 アプリのそうした品質管理を考える上での3つのステップについて説明していきます。 ST
iPhone アプリを Android に移植したときのメモ : 管理人@Yoski
1月の12日に Android 端末買って、3週間後に ツイキャス・ビュワーをリリースする、という挑戦的な目標を立てていたのだけど、無事作業も完了したのでその時のメモ。 結論から書くと Android よくできてる。開発もやりやすくて楽しい。いやー、こりゃいい。 なにそれお前こないだまで iPhone 厨じゃなっかったのかコラ、と言われそうですが、開発者にとってみれば Android の方が優れてるところが多いと思います。はい、あとメモ。もう順不同でざーーーーーっと。 ■初めに思ったこと とくかく Java 嫌だ。いやいや嫌嫌面倒くさい。なんとかこれ回避できんかな、とおもって Titanium に手をだして、おぉ、こりゃいいや、となるも Android 版は完成度あと一歩のところだったので断念。 次に Adobe AIR に手をだすという苦し紛れの行動にでるも、これもあえなく断念。ま、ライ
スマートフォン関連の基礎勉強法 : LINE Corporation ディレクターブログ
こんにちは、ブロググループの飯田 (@iishun) です。 2011 年はさらにスマートフォン市場の拡大が加速すると云われています。弊社でも 2010 年 10 月にライブドア全体のスマートフォン関連事業を推進していくスマートフォングループが設立されました。 が、各コンテンツのスマートフォンサイト・アプリは各グループのコンテンツ担当が運用するのでスマートフォン関連の知識は必須になります。 そこで今回は僕がここ最近実践しているスマートフォンに関する勉強法を、実際に使用した参考書籍と共に紹介してみます。これから「スマートフォンの事を勉強しなきゃ！」と思った人に役に立ってもらえればなと思います。 1. HTML5/CSS3 の特徴を知る HTML5/CSS3 がスマートフォン用のマークアップ言語というわけじゃありませんが、スマートフォンのウェブサイト (Webkit 系) は HTML5/CS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
グリーに学ぶ、スマートフォン開発向けWebアプリ要素の最新技術 ～HTML5、CSS3を採用したポイントとは
iPhoneデザインボックス
はてなブログ | 無料ブログを作成しよう
