► 2024 ( 1 ) ► 6月 ( 1 ) ► 2022 ( 1 ) ► 11月 ( 1 ) ► 2021 ( 5 ) ► 9月 ( 1 ) ► 8月 ( 1 ) ► 1月 ( 3 ) ► 2020 ( 12 ) ► 10月 ( 1 ) ► 6月 ( 5 ) ► 5月 ( 1 ) ► 4月 ( 2 ) ► 3月 ( 2 ) ► 1月 ( 1 ) ► 2019 ( 6 ) ► 9月 ( 1 ) ► 7月 ( 1 ) ► 6月 ( 1 ) ► 3月 ( 2 ) ► 2月 ( 1 ) ► 2018 ( 6 ) ► 12月 ( 1 ) ► 11月 ( 1 ) ► 5月 ( 1 ) ► 3月 ( 1 ) ► 2月 ( 1 ) ► 1月 ( 1 ) ► 2017 ( 6 ) ► 12月 ( 1 ) ► 11月 ( 1 ) ► 8月 ( 1 ) ► 7月 ( 1 ) ► 5月 ( 1 ) ► 3月

こんにちは、けちょる(@Kechol)です。このエントリーはFirefox OS Advent Calendar 2013 17日目の記事になります。 デバイスAPIの話とかは他のみなさんが書かれると思ったので、今回はFirefoxOSアプリのUIデザインについて少し書きたいと思います。 Firefox OS アプリのUIってただのHTMLでしょ その通りです。だからWebデザイナーさんとか余裕でアプリが書けます。最近はBootstrapとかFoundationとか、CSSのUIフレームワークもたくさんあるのでそういうのを使えば簡単にそれっぽいUIが作成できると思います。 とはいえ、iOSやAndroidにUIガイドラインがあるように、FirefoxにもUIのガイドラインがあります。 Firefox OS アプリのUIガイドライン こちらのサイトがFirefox OS のUIガイドラインで

2013年12月18日10:00 “学校生活”がコンセプトのSNSアプリ「Class」をさっそく使ってみた！ http://narumi.blog.jp/archives/1711835.html“学校生活”がコンセプトのSNSアプリ「Class」をさっそく使ってみた！ これは、なかなか面白いなと思いました。 同い年6人で使って15日で卒業、学校みたいなSNS「Class」 - LINE NEWShttp://news.line.me/issue/digital/a58d080d7e72 株式会社we-bがリリースした「Class」というアプリは、同じ地域・同い年の見知らぬ6人が2週間限定で「同じクラス」となり、クローズドな場でコミュニケーションを取るというもの。 この動画を見るとどんなものかわかりやすい。 入学、クラス分け、担任の先生、卒業という一連の流れを体験できるのが特徴で、まさに“

When IFTTT launched an iPhone app in July, it opened up a whole slew of new possibilities about how to put the incredibly handy service to even better use than ever. New channels accessible via the iPhone app allow access to your iPhone contacts, photos and reminders. Once you've activated the channels on your phone, you can create new recipes from the comfort of your browser. We've put together a

The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible. .avoid-clicks { pointer-events: none; } While the pointer-events property takes eleven possible values, all but three of them are reserved for use with SVG. The three valid values for any H

RDVCalendarViewを使えばアプリにカレンダーUIを組み込むことができます。iOS 7標準のカレンダーアプリの月表示画面に似たデザインになっており、iOS 7のUIによく合うと思います。主な特徴は以下の通りです。 iPad・iPhone両対応 ランドスケープ・ポートレイト表示両対応 高いカスタマイズ性 NSLocaleを使用して完全にローカライズ可能 GitHubからダウンロードできるプロジェクトにはデモが含まれており、これを見れば基本的な使い方はわかるかと思います。 RDVCalendarViewのカレンダーUIは3つのクラスから成り立っており、これらのクラスを継承したクラスを作成してカスタマイズすることが可能です。例えば、日にちのセルに付加するマーカーはデフォルトでは四角で日付文字の右上に付いていますが、iOS 7標準のカレンダーアプリの月表示画面のように日にち丸いマーカーを

スマホやタブレットで写真を表示していると、ピンチでズームしたり、ドラッグで移動したりができて便利なので、あれを Web 上で実現してみたくなった。 最近のブラウザーでは touchstart や touchmove イベントでタッチ情報を取れたり、イベントの touches でマルチタッチを扱えたりするので、実現するための基盤はそろっている。 適当なライブラリーがあるかと思って探してみたが、意外と苦労してしまった。 Hammer.js が使えない タッチを扱うためのライブラリーとしては Hammer.js がメジャーらしい。スワイプ・ピンチ・ドラッグなど、各種イベントにも対応していて、これを使えば一発解決してくれそうだ。 ところが、画像ビューワーを作るには不向きだった。困ったのは次の 2 点。 ピンチやドラッグは個別には動くが、組み合わせたときに「表示位置」と「倍率」の関係を自前で計算する

Mavericks（OS X 10.9）のユーザーインターフェースは、基本的には前バージョンのMountain Lion（OS X 10.8）を踏襲しています。「Finderタブ」や「タグ」といった新機能を除けばMountain Lionとほぼ同じで、正直なところ目新しさを感じないのも事実。 しかし、実はものすごく細かいところで、結構いろいろと変化しているんです。Dockで起動中のアプリを示すインジケーターの形が丸から棒状に変わったのはかなりわかりやすいほう。中にはルーペでみないとわからないような、「なんでここを変える必要があったの?」と問いただしたくなるような部分も。 というわけで、そんなMavericksのデザインの細かすぎる変更点を、ランク別に見ていきましょう。 初級：Dockのテクスチャー OS Xのインターフェースの象徴ともいえる「Dock」。このテクスチャーが、Mountain