iPhone/Android/PC 対応。jQuery で書くタッチイベント
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
今どきのCSS3グラデーションの指定方法 (2015年版)
緑はベンダープリフィックスが必要 前回との差異はAndroid4.4よりlinear-gradient (to bottom)に対応している点です。 Androidブラウザのシェア 現在のAndroidブラウザのシェアですが、Android4.0以下は非常に少なくなっており対応する必要はなくなってきています。 参考:Dashboards | Android Developers というわけで、-webkit-gradient()による指定はもう不要で-webkit-linear-gradient()とlinear-gradient()のみ記述しておけば、ほとんどのブラウザに対応可能です。 /*Other Browser*/ background: #91bae4; /*For Old WebKit*/ background: -webkit-linear-gradient( top, #b
FlexboxでAndroid 4未対応のボックス折り返し(flex-wrap)を実現する方法 - Qiita
CSS3のFlexboxを試した人からよく聞くのが「Android 4系でボックスの折り返しができない」という声です。本記事ではポリフィルを使ってAndroid 4でもflex-wrapによるボックスの折り返しを実現する方法を紹介します。 なお、Flexboxの基本については記事「初心者でも始められるFlexbox入門 - ICS MEDIA」を参照ください。 Android 4におけるflex-wrapの挙動 Android 4におけるボックスの折り返しができないとはどういうことなのか、まずその挙動を確認してみましょう。 flex-wrapプロパティにwrap値を指定すると、親要素の横幅を超えたときにボックスが折り返し、複数行のレイアウトが可能になります。 下記のようなHTML・CSSコードを例にして考えてみます。リストで並べたボックスに対して、Flexboxレイアウトと折り返しを指定し
デザイナーがAbemaTVの実装に携わってみて感じたこと｜CyberAgent Technical Creator Hub
内田 達也 2013年新卒入社。複数のコミュニティサービスを経て2015年6月より「AbemaTV」でAndroid、スマホのブラウザ面のUIを担当。プライベートでネイティブアプリの開発も行う。 こんにちは！AbemaTVでUIデザインを担当している内田達也です。この記事では、AbemaTVの立ち上げにおいて、デザイナーがどの程度エンジニアさんの領域に入り込むことができたかを書きたいと思います。 結論から言うと、現在4人いるデザイナー全員がAndroid、iOS、ブラウザいずれかの実装に直接参加することができました。作業量は皆様々でしたが、まずは一歩踏み出せた気がします。 弊社の一般的なデザイナーの役割 これまで弊社でデザイナーと呼ばれる人たちはSketchやPhotoshopでビジュアル部分を制作し、実装はすべてエンジニアさんにお任せしていました。これは、デザイナーが綺麗なUIを作るの
よくわかるマテリアルデザインの設計コンセプト | fladdict
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
スマタブinfo | スペック検索とシェア率が役立つ国内スマホ・タブレット機種情報サイト
スマートデバイスの形状、OS、ディスプレイサイズ、CPU、シェア情報ほか詳細なスペックから抽出・比較ができるため、サービス対象の選定から不具合の調査まで広くご利用いただけます。 機種依存やOSバージョン依存に関わるバグ情報の投稿や検索ができます。質問と解決策の回答はもちろん、自分で見つけた問題の報告も。あなたもぜひ情報の提供者に！（準備中） 国内で販売された機種を網羅的に所有して、豊富な実績を誇る検証サービスに活用してきたKSKが提供します。スマホ・タブレットの信頼できる情報だけでなく、ノウハウも詰まった情報サイトを目指します。
「夢だったゲームアプリ開発。700万円かけて売上14万円でゾンビ化」京都のアプリ開発者「room6」が語るアプリビジネスの厳しさ。 | アプリマーケティング研究所
「夢だったゲームアプリ開発。700万円かけて売上14万円でゾンビ化」京都のアプリ開発者「room6」が語るアプリビジネスの厳しさ。 今回は京都のアプリ開発チーム「room6」を取材しました。長年の夢だった「自社ゲーム」。700万円かけて開発した「とっとこダンジョン」。累計売上はいくらなのか。 【11/25 追記】room6さまの都合により、記事内容を一部修正しました。 ※room6 代表 木村征史さん（左）、デザイナーさん（右） １、「とっとこダンジョン」について 「room6」について教えてください。 受託開発の仕事をやりながら、ゲームアプリを開発しています。現在は、僕（エンジニア）とデザイナーの2名で会社として活動しています。一人で夜中までプログラミングしていますよ。 起業してもうすぐ丸5年です。「ゲームつくってから死にたい」と思い、「room6」を立ち上げました。人生も後半戦に差し掛
アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点（スライド付） | ベイジの社長ブログ
スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。（以降、両者をガイドラインと略します） スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく（comScore調査／2014）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは
Typography – Material Design 3
The Material Design type scale includes a range of contrasting styles that support the needs of your product and its content.
950ページ超え！ Androidアプリの開発入門テキストが完全無料公開中！
これから「Androidアプリを作ってみたい！」という人や、「もっと体系的に勉強したい！」という人に朗報です！ アプリ開発スクールで知られる「TechInstitute」から、アプリの設計・開発・公開まで網羅した初心者向けの入門テキストが、なんと無料で公開されているのでご紹介したいと思います！ 950ページを超えるボリューム満点のテキスト！「TechInstitute」のWebサイトで公開されている「専用ページ」にアクセスすると、誰でもすぐにテキストをダウンロードすることが出来ます！ トピック毎に、興味のある分野だけダウンロードしたり、「まとめてDL」ボタンから一気にテキストを入手することも可能。 ファイルはPDFで提供されており、全部で950ページを超える大ボリュームの内容は以下の通り！ ＜目次＞ ファーストステップ プログラミングとは何か コンピュータとスマートフォン 初回のプランニン
「世界中の人がモーニングコールしてくれるアプリを試してみた」…笑えると海外掲示板で話題に : らばQ
「世界中の人がモーニングコールしてくれるアプリを試してみた」…笑えると海外掲示板で話題に ユーザー同士がつながったソーシャル・アプリ全盛の時代ですが、スマートフォン向けに「世界中の誰かがモーニングコールをかけてくれるアプリ」が新たに登場したそうです。 「今までにない奇妙な体験ができる」と、海外掲示板で盛り上がっていました。 利用者の声をご紹介します。 アプリの名前は「Wakie」。 現在AndroidとWindows Phoneがあり、iOSも間もなくリリースされる予定とのこと。 要は目覚ましアプリなのですが、世界中のスマホユーザーとつながっていて、知らない人から生の声で起こされるという、ネット通話を利用したアラームクロックだそうです。 実際に使用してみた人々のコメントをご紹介します。 ●この前Waikeを使ったら、やけに酔っぱらった「起きろ」という英語しか話せないロシア人に起こされた。う
ブログのスマートフォン対応の際に考えたこと
遅ればせながら、2014年8月にこのブログのスマートフォン対応を行いました。 iPhone, iPod touch, Android, Windows Phone, BlackBerry などの各種スマートフォンのほか、 Kindle, Sony Tablet, Nexus 7 などのタブレットではスマートフォン用のテーマで表示されるはずです。 iPad は、PC 用のテーマのほうが見やすいと感じたのでそのままにしています。 なぜ今までスマートフォン用のテーマを作っていなかったのか 一番大きな理由は「見づらいというご意見をいただかなかったから」です。 また、昨年まではスマートフォンからのアクセスは 10% ちょっとしかなかったため、それほど必要性を感じていませんでした。 とはいえ全く何の対応もしていなかったわけではなく、iPhone や Android の場合は、本文のフォントサイズが少し
androidでHTML5 audio使ったHLS形式のストリーミング再生が上手くいかない - lxyuma BLOG
スマホのブラウザ上で、音声のstreaming配信がしたい。 そこでhtml5 audioでHLS形式のURL(*.m3u8)指定して再生した時に 動かないandroid端末が一部あった。その対応した話。 結論は、単に、audio.type指定すれば良かったというだけの話だけど、 せっかくなので、スマホのストリーミング配信の話から、まとめる。 目次 flashとスマホ hlsとは html5 audio androidで再生できない話 その対応どうしたか？ flashとスマホ ストリーミング配信というと、PCは未だ、flash使う事が多いと思われる。 試しに、amazonの視聴見てみると、やっぱりflash。 スマホでflashは、どうかというと、 iphoneでflashは入らない。 iOS8でflash対応という記事が少し前にあったが、日付の通り、エイプリルフールのネタなので、注意。
PCサイトをスマホ対応 CSSテク自己まとめ（１・２回まとめ） - Kaleidoscope
PCサイトをスマホ対応するという記事を１・２回と続けてみて、意外とボリューム満載になってしまったので、 一旦ここまでのCSSテクについてまとめます。 ■第1回 メニュー編 ■記事はこちら ★タグでViewportの設定。メディアクエリによるCSS振り分け。 スマホサイトを作る上で欠かせない準備。 … <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--viewportの指定--> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <!--/viewportの指定--> <!--メディアクエリでPC用・
GREEのUserAgent比率を公開します(2014/08) | GREE Engineering
サンダルは鼻緒派のago（@kyo_ago）です。 今月もGREEを利用して頂いているクライアントのUA比率を公開します。 グラフは以下のデータを元に作成しています。 { "os": { "Android": 66.2, "iOS": 33.8 }, "version": { "Android": [ { "percent": 36.9, "name": "4.2" }, { "percent": 19.8, "name": "4.1" }, { "percent": 19.7, "name": "4.0" }, { "percent": 12.4, "name": "2.3" }, { "percent": 6, "name": "4.4" }, { "percent": 3.8, "name": "4.3" }, { "percent": 1.3, "name": "other" }
GREEのUserAgent比率を公開します(2014/07) | GREE Engineering
このアイコン使い始めてそろそろ7年になります。ago（@kyo_ago）です。 今月もGREEを利用して頂いているクライアントのUA比率を公開します。 グラフは以下のデータを元に作成しています。 { "os": { "Android": 66.3, "iOS": 33.7 }, "version": { "Android": [ { "percent": 37.1, "name": "4.2" }, { "percent": 21.1, "name": "4.0" }, { "percent": 20.3, "name": "4.1" }, { "percent": 13.6, "name": "2.3" }, { "percent": 4.3, "name": "4.3" }, { "percent": 3.6, "name": "other" } ], "iOS": [ { "perc
PC向けサイトがスマホでも崩れないようにする方法 - Qiita
PC向けに作った Web サイトをスマートフォンでみると、「 部分的に意図せず文字が大きくなる 」といった不具合が起きることがあります。 解決策ググって修正しようとすると、こんどは「 毎回、ページの左上が拡大された状態で表示されてしまう 」状況に陥ってしまうことがあります。 （私はありました。） ということで、PC向けサイトも最低限スマートフォンで見られるようにする方法をメモっときます。 勝手に文字が大きくなる対策 -webkit-text-size-adjust という、モバイル版ブラウザでのみ有効なプロパティがあるようです。 このプロパティが、デフォルトでは auto になっているため、文字が自動的に調整されて大きくなってしまう、というカラクリでした。 reset.css あたりに追記しておくのが妥当かと思います。 参考：iPhone版Safariで文字サイズがおかしくなるときは-we
HTML5学習(3)スマートフォン向けコーディングの基本まとめ - 青春B■雑記blog‐青酸カリ カラメルシロップ味‐
HTML5学習のまとめ【HTML5勉強用ページ-学習記事、お薦めリンク集、お薦め書籍まとめ-】はこちら 現状、HTML5でのコーディングはPC向けよりもスマートフォン向けが主なのではないかと思います。 対応していないブラウザのことまで考えないといけないPCに比べて、スマートフォンはHTML5に対応した新しいブラウザが搭載されているからです。 ということで今回は、スマートフォン向けのコーディングについて概要だけではありますがまとめます。外部へのリンクばかりですが。 今回と次回の2回に渡ってスマートフォン向けコーディングの話を書いて以降、videoやaudioといったHTML5の注目新要素を学習していく予定です。 PC/スマートフォンサイトの切り替え モバイル：iPhone 3G発表記念! iPhoneにおける次世代モバイルブラウジングの波｜gihyo.jp … 技術評論社で、スタイルシートを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Android Developers
https://repopgl.org/