Google製iOSアプリがマテリアルデザインに固執しない方針にシフト
Googleは自社プラットフォームのAndroidだけでなく、AppleのiOS向けにもアプリを提供しています。このようなAppleプラットフォーム向けにGoogleが提供しているソフトウェアのデザインを担当しているJeff Verkoeyen氏が、Google製のiOSアプリではGoogleのデザインガイドラインである「マテリアルデザイン」に固執しない方針にシフトすることを明らかにしました。 Google’s apps to embrace iOS on iOS – Six Colors https://sixcolors.com/link/2021/10/googles-apps-to-embrace-ios-on-ios/ Google Is Moving Its iOS Apps Toward Platform UI Conventions and Away From Materi
AngularのDragDropModuleを使ってToDoリストを作る | DevelopersIO
AngularでTrelloのようなリストをドラッグ＆ドロップできるような画面を作る方法をご紹介します！ Angular Material CDKのDragDropModuleを使用します。 検証環境 Angular CLI: 8.3.21 Node: 12.13.0 OS: darwin x64 Angular: 8.2.14 @angular/cdk: 8.2.3 事前準備 @angular/cdkが入っていない場合は追加しましょう。 $ ng add @angular/cdk Angularのプロジェクト作成方法はこの記事では割愛します。 実装してみる app.module.tsにインポート文を追加 app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule }
Toastが出ない。まじで出ない。 - Qiita
Toastが出なくて小一時間ハマッたのでメモ。 【Androidスマホのコツ】ウザったい通知は消しちゃえ！不要なアプリ通知を表示させない方法！ 上の記事のように、ウザったい通知は消しちゃえ！とアプリ情報の「通知を表示」を無効にすると、トーストももれなく出なくなってしまいます。なんてこった・・・。 検証端末 Galaxy S3α OS4.3 Nexus5 OS5.0 Toastが表示されない原因 /** * Make a standard toast that just contains a text view. * * @param context The context to use. Usually your {@link android.app.Application} * or {@link android.app.Activity} object. * @param text T
これからAndroidでダークモードを実装するエンジニア／デザイナ向け資料 - Qiita
追記: 20191017 Android 10ではコントロールセンターからダークモードが切り替え可能になり「システムに従う」「バッテリー状態によって切り替える」設定が追加されました。くわしくはこちら 追記: 20190509 Google I/O 2019で公式のダークテーマのデザインガイドラインとオンライン学習ページが公開されました。 - https://material.io/design/color/dark-theme.html - https://codelabs.developers.google.com/codelabs/design-material-darktheme/ はじめに 去年末にQiitaに投稿した「スマホアプリ開発者のための2018年動向まとめ」でダークモードについて少し書いたのですが、2019年になってからダークモードのニュースが増えているような気がします。
Google I/O 2018 で発表された Material Design のアップデート｜Takuo Suzuki
Google I/O 2018 にて Material Design 関連のアップデートがあったので、どのようなアップデートがあったのかこちらの Google Design の記事の意訳を含めて書いてみたいと思います。 Google I/O 2018 では主に次の3つの発表がありました。 1 : Material Theming : よりカスタマイズしやすいデザインシステム 2 : Material Tools Suite : Material Theme Editor, Gallery 等のツール群 3 : Material Components : Material Design を実装する上で利用可能な、Android、iOS、Web、Flutterのライブラリ それでは、ここから順にどのような内容なのかについて説明します。 Material Theming とは2014年に Mat
Angular Material の "Datepicker" の見た目と戦う - Qiita
Angular Material で Datepicker を使おうとした時のお話です。 Angular 自体は 4 です。 Datepicker の Document は以下。 https://material.angular.io/components/datepicker/overview デフォルトだと以下の絵のように <input> に表示されるテキストが M/d/yyyy になるようです。 更に曜日の表記も馴染みがない。 この見た目を変更するべく調査したのです。 まずは、デフォルト状態 <md-form-field> <input mdInput [mdDatepicker]="picker" placeholder="Choose a date"> <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-to
デザイナーに届けたい…マテリアルデザイン事始め Part.2 - Qiita
今回はマテリアルデザインの主なコンポーネントについてです。 前回散々、UIパーツだの要素だの言ってきましたが、そいつらは実際どんなものがあるんだい？ってところを拾っていきます。 いつの日か「ここのUIってこんな感じもどうですかね？」「あー。確かにAndroidってこんな感じのUI多いよね。」「でしょー！」みたいな話ができるようになることを祈って、説明向け資料をまとめていきます。 Part.2 : マテリアルデザインのコンポーネント（小） 前回 Part.1 : マテリアルデザインの概観 次回 Part.3 : マテリアルデザインのコンポーネント（中） コンポーネントってなんなのさ？ 機器やソフトウェア、システムの構成する部品や要素のこと。 今回の場合は、マテリアルデザインを表現するための部品のこと。 コンポーネントを知ると何がいい？ デザインはコンポーネントをうまく組み合わせていくという作
30 Examples of Material Design Palette Color Usage
Easily find the best Material color for your projects. Here is 30 color combination based on material design color palette. By clicking color sample bar, You can check usage example in material design UI. Each of color combinations consists of following three kinds of colors. (1) Main (2) Optional (3) Accent For details, see Google Guideline. Contents
はてなブックマークiOSアプリはマテリアルデザインの悪い見本 - UXエンジニアになりたい人のブログ
はてなブックマークのiOSアプリを真面目に使ってみたらひどい出来だったので書きます。 基本構造 まずはアプリの基本構造をおさらいします。このアプリは大きな画面構成として メイン（様々なエントリー一覧） フィード マイページ の3つからなっています。 それぞれの画面と親子関係、各画面を呼び出すための操作をまとめると以下のようになります。[ ]で囲まれた青文字がUI表現で、赤文字部分が最終操作画面とその説明です。★が初期画面です。 まとめたつもりなんですが読みにくいし主題とあまり関係がないので、面倒な人は下の画像まで読み飛ばしてください [フローティング操作ボタン] メイン（様々なエントリー一覧） [ツールバー横のナビゲーションドロワーボタンから左部ナビゲーション：タイトルは「話題を探す」] [仕切り線：カテゴリー] ホーム [タブ] 人気エントリー（いわゆるホッテントリ）★ 新着エントリー（
Web、モバイルのデザイン新基準「マテリアルデザイン」を学ぼう(1) そもそもMaterial Designって?
Googleは2014年にMaterial Designというデザインシステムを公開しました。そして2017年1月時点で、このデザインを活用したアプリがGoogle Play上に100万以上も公開されています。 この連載では、「Material Designとは何か」「どのようにMaterial Designを利用してアプリを作るのか」を解説していきます。 なぜMaterial Designが生まれたのか かつては「パソコン」が唯一のインターネット環境を提供するデバイスとして存在していましたが、この10年で「スマートフォン」や「タブレット」「ウェラブル端末」「コネクテッドカー」「テレビ」など、さまざまなデバイスから利用できるようになりました。 しかし一方で、Googleの「検索」や「メール」といったさまざまなアプリ・サービスは、増え続けるデバイスごとに、異なるユーザーインタフェースで提供し
Vue.jsでMDL(material design lite)を使う時の注意 - Qiita
軽くハマってしまったので備忘録。 vue-material-componentsの記載を追加。(2016.08.27) mdl-textfieldのfocusに関する記載を追加。(2016.09.18) Vue.js用のマテリアルデザインコンポーネント https://github.com/vuejs/awesome-vue#component-collections Vue.jsで使えるUIコンポーネントはこちらに一覧があるので、ここから好きなのを選ぶ。 ■ vue-mdl http://posva.net/vue-mdl/#!/installation vue-mdl というのがあるのでこれを使う。
Material Design LiteとGithub Pagesで爆速でかっこいいWebページをつくろう！【ステップ付！】 - Qiita
Material Design LiteとGithub Pagesで爆速でかっこいいWebページをつくろう！【ステップ付！】HTMLCSSGitHubMaterialDesign 背景 Webページを新しく作成しなくてはいけなかったのですが、正直面倒だな〜と思ってました。ひとまず承認降りるためにサイトのモックというかプロトタイプを作りたかったのですがどうせ結構時間かかるし、、、と思っていました。 具体的には以下の様なことを今回は実現したかったです。 あんまり1からうんうん唸ってデザインはしたくないが、それっぽい見た目にしたい Bootstrapはもう見飽きた・・・ もちろんスマホも対応したい ひとまず確認してほしいだけなのでURLは適当でいいし、裏側は書かなくていいからさくっと確認してもらいたい Bootstrapは見慣れているけど嫌だけど、自前でCSSは(本格始動した時にしか)書きたくな
マテリアルデザインを手軽に！CSS/HTML/JSコンポーネント「Material Design Lite」の使い方まとめ
数日前にGoogleは、マテリアルデザインの考えを取り入れた公式フレームワークフレームワーク「Material Design Lite」を公開しました。マテリアルデザインの見た目や操作性に重点をおいた、CSS，HTML、JavaScriptコンポーネントで、より手軽にウェブサイトやブログ、ランディングページなどを作成することができます。 今回は、Material Design Liteの基本的な使い方と、公開されている素材やテンプレートを、個人的な備忘録としてまとめています。 詳細は以下から。 Material Design Liteの使い方 ダウンロードしたCSS/JavaScriptを、HTMLファイルに読み込むだけでなく、GoogleがCDNホストしているファイルを読み込むことも可能です。 <link rel="stylesheet" href="https://storage.go
マテリアルデザインをWEBで再現できるコンポーネント「Material Design Lite」を試してみる
数日前にGoogleがマテリアルデザインをWEBで再現できるHTML/CSS/Javascriptコンポーネント「Material Design Lite」を公開しました。テンプレートやサンプルコードを利用してガイドラインに沿ったWEBサイトが作成できるようになります。 マテリアルデザインの作成キットをGoogle公式が発表 マテリアルデザインとはGoogleが2014年6月に発表した、Android5.0から使用されているデザインガイドライン。要素の重なりや階層を影や滑らかな動きで再現します。ユーザーが要素を選択した時に波打つ表現など、心地良いアニメーションがあらゆるところに実装されています。 このマテリアルデザインに惚れ込み、当サイトも俺流にパクってきた「待てリアルデザイン」ですが、これを利用すれば本物のマテリアルデザインに近づけます。 要素の形が境目なく変化していくアニメーションなど
Material Design Lite
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. Templates The MDL components are created with CSS, JavaScript, and HTML. You can use the compone
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google、「Material Design」のアイコンを「Figma」で公開／2,000以上ものアイコンが、5つのバリエーションで。商用も可
5年更新していなかったアプリが 海外バイヤーから数万ドルで 買収されそうになったので、 久しぶりにアプリを更新しようと思ったら 色々仕様が変わっていたので、 細々したよくやるやつをツラツラと話す話/RecentlyAndroidFunctions
Using Material Design with Vue.js 2