Googleが自社のWebサイトやAndroidで採用しているデザイン体系。 いわゆるフラットデザインの流れを汲んだものだが、影を用いることで立体的に見せ、必要な情報を見分けやすくしている。
Material. マテリアル
概要 現在、JavaScript のライブラリである React を利用した Web アプリの開発はとても人気があります。 私自身も実際に React を利用して Web アプリを開発しています。 Web アプリを開発しているとやはり気になるのが UI の構築で、簡単にきれいな UI ができるのが理想的ですよね。 今回は React で UI をきれいに整えることができ、さらにとても簡単に実装することができる OSS 「MUI」を紹介します。 利用手順 React で利用するライブラリのため、以下のように npm または yarn を用いてのインストールとなります。 // with npm n…
こんにちは、たびとです。 今回で、TubeEater 開発は最終回です。 完成したのは喜ばしいのですが、GitHub に公開する前に最終確認をしていたら、 「YouTube はダウンロードを禁止している」と書いてあるじゃないですか。 ただし、「クリエイティブ・コモンズ」として、認められている場合は、 ダウンロードが許可されるようです。
こんにちは、たびとです。 前回は、お手軽 YouTube ダウンローダーの中核部分を説明しました。 その後、ダウンロード処理と並行して画面周りを作りこんでいます。
Android ボタンにxmlファイルのデザイン内容が反映されない時の対処（マテリアルデザインの無効） こんにちは、TF's appsです。自身のアプリをAndroid OSの最新バージョンにアップしようとした時の話です。新規にプロジェクトを作成してファイルを１つ１つ手作業でマージしていきました。そこである異変に気が付いたのです。 あれっ！？ ボタンデザインが反映されていない 図１のボタンデザインを期待していたのですが、実際は図２の内容となりました。その後も色々と調査したのですがズバッと記載してある記事が少ないので紹介します。 図１：期待していたデザイン 図２：現実のデザイン xmlファイルの…
こんばんは、さじです。 前回記事、「webデザインで気を付けること」の結びで書いたGoogleマテリアルデザインについて紹介します。Appleのアクセシビリティへの配慮にも書きましたが大企業の社会的弱者への考え方を学びより良いwebデザインを行うための個人的勉強のメモになります。今回もGoogle先生の翻訳を日本語らしくしながら自分の解釈でまとめた内容となっています。 webブラウザChromeの仕様に照らし合わせた内容と各種ツールを利用した場合の具体的な事例が掲載されています。 こちらの「Material Design」よりアクセシビリティの項目を中心にまとめます。 material.io …
インフラジスティックス・ジャパン株式会社、ローカライゼーションのルミです。Ignite UI for Angular 17.1 リリースいたしました。本リリースでは、様々な新機能と重大な変更が含まれておりますので是非ご期待ください。詳細は以下をご覧ください。 Typedoc と Sass の API サイトで表示するバージョンを選択いただけますが、製品リリースから同バージョンの API ご提供までには通常数日いただいております。また前バージョンリリース以降に API の追加/変更がない場合、最新バージョンはドロップダウンに追加されない場合があることにご注意ください。
インフラジスティックス・ジャパン株式会社、ローカライゼーションのルミです。Ignite UI for Angular 16.1 リリースいたしました。本リリースでは、様々な新機能と重大な変更が含まれておりますので是非ご期待ください。詳細は以下をご覧ください。 Typedoc と Sass の API サイトで表示するバージョンを選択いただけますが、製品リリースから同バージョンの API ご提供までには通常数日いただいております。また前バージョンリリース以降に API の追加/変更がない場合、最新バージョンはドロップダウンに追加されない場合があることにご注意ください。
はじめに 今月はReact（+α）スキルの向上と応用情報技術者試験の対策をしていました。 実務でReactを使うことになり、改めて自分のフロントエンドスキルを見直して実装力を高めているところです。 去年の８月にポートフォリオを作成した以来ですが、「今改めて見ると、まだまだ改善点が多いなあ」と感じます。 そこは現時点での成長と受け止め、ひとまずは実装力を上げていこうと思います。 応用情報技術者試験は午後問題の演習に時間がかかっています。 オンライン講座 Udemy React & TypeScript - The Practical Guide ReactをTypeScriptで書くのが、あまり…
アイコン作ったり、アプリのUI作るなどのデザインに役に立ちそうなAI試す。 過去にも何個か試したけどあんまりいいのはなかったが、進化しているかもしれないし新しいツールも出てきているようだ。 bibinbaleo.hatenablog.com UIデザイン全体 Galileo AI Relume アイコン Magician その他Figma Figma Autoname Automator Adobe イラレ Photoshop 生成拡張 スーパーズーム 砂の上に文字 UIデザイン全体 ワイヤーフレーム作成とか、もう全部作っちゃうやつとか Galileo AI www.usegalileo.ai…
こんにちは！TECH Street編集部です！ 2024年1月18日（木）に開催した、 「エンジニアの自由研究発表会vol.9」のイベントレポートをお届けします。毎回大好評の自由研究発表会！今回も個性的な発表ばかりで、大盛況のイベントとなりました。 登壇者はこちらの方々！ かーでぃさんにっくさん／オシロ株式会社 リードエンジニア鈴木 潤さん／パーソルホールディングス株式会社 うーたんさん／株式会社ゆめみ エンジニア 早速、内容を紹介いたします！ マイコンで動かす「シャアザクくん vs ズゴックくん」 動画デモ 準備するもの 作ってみた 試作1号機：めちゃくちゃ雑なシャアザクくん 試作2号機：シ…
メニューの作成も、各画面への遷移も、Jetpack Composeを使うとかなり楽になりますね。 Scaffoldを用いたメニューのデザイン、画面の遷移、Androidデバイスによるメモリ管理に関わらず値を保持する方法など、教えてください。 sharedPreferencesを用いたデータの保持および、復帰の方法について教えてください。 rememberSaveableブロックで復帰できない場合は、onCreate()ブロックが再度実行されるのですか？ 話は変わりますが、違う画面のComposable間でのデータの共有やカプセル化についても教えてください。 ありがとうございました。最初に戻りま…
こんにちは！ 今回はChrome DevToolsの基本操作についてまとめます。 Chrome DevToolsとは Google Chromeに付属しているWeb開発に役に立つツール DeveloperTool、デベロッパーツール、開発者ツールとも呼ばれる HTML、CSS、JavaScriptの動作を詳細に検討できる パフォーマンス分析なども可能 起動方法 ショートカット 動作 F12 通常起動 Ctrl + Shift + I 通常起動 Ctrl + Shift + C Inspectモードで起動 Inspectモード 選択した要素の詳細情報（HTML, CSS）が表示される ショートカ…
G-gen の杉村です。2024年2月のイチオシ Google Cloud アップデートをまとめてご紹介します。記載は全て、記事公開当時のものですのでご留意ください。 はじめに Meet で参加者全員向けに画面のピン留めができるように Cloud Logging から Cloud Storage へのエクスポート Cloud Translation で Adaptive Translation が Preview => GA（Preview） Google Meet API が Preview => GA Google アカウントのログイン画面の UI が変更に Gemini Enterpri…
インフラジスティックス・ジャパン株式会社、ローカライゼーションのルミです。Ignite UI for Angular 17.0 リリースいたしました。本リリースでは、様々な新機能と重大な変更が含まれておりますので是非ご期待ください。詳細は以下をご覧ください。 Typedoc と Sass の API サイトで表示するバージョンを選択いただけますが、製品リリースから同バージョンの API ご提供までには通常数日いただいております。また前バージョンリリース以降に API の追加/変更がない場合、最新バージョンはドロップダウンに追加されない場合があることにご注意ください。
インフラジスティックス・ジャパン株式会社、ローカライゼーションのルミです。Ignite UI for Angular 15.1 リリースいたしました。本リリースでは、様々な新機能と重大な変更が含まれておりますので是非ご期待ください。詳細は以下をご覧ください。 Typedoc と Sass の API サイトで表示するバージョンを選択いただけますが、製品リリースから同バージョンの API ご提供までには通常数日いただいております。また前バージョンリリース以降に API の追加/変更がない場合、最新バージョンはドロップダウンに追加されない場合があることにご注意ください。
ChatGPTに聞いてみた。 以下、回答。 アイコンのデザインには、多様なスタイルや指針が存在します。以下に一般的なデザインの種類をいくつか挙げます。 マテリアルデザイン (Material Design): Googleが提唱するデザイン言語で、シャドウ、動き、深さの概念を用いてより直感的でタッチフレンドリーなインターフェースを実現します。 フラットデザイン (Flat Design): テクスチャ、グラデーション、シャドウを排除したシンプルなデザイン。クリーンでミニマリスティックな外観が特徴です。 ニューモーフィズム (Neumorphism): ソフトな内部シャドウと外部シャドウを組み合…
こんにちは、たびとです。 前回は RedfishViewer のインストールと最低限の操作について説明しましたが、 今回は開発の視点から、もう少し掘り下げて説明していきたいと思います。
自分の振り返り用。 リンクは youtube に飛びます。 機能名 コメント 一枚画像(https://www.youtube.com/watch?v=JSqUZFkRLr8&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG） AboutDialog ダイアログを表示する AlertDialog さまざまなアニメーションを設定できる。flutter_animate パッケージを入れると使うことができる Animate さまざまなアニメーションを設定できる。flutter_animate パッケージを入れると使うことができる AnimatedCrossFade 画像…
※この記事は、2024年1月に更新しました。 最近、トップページにカード型のレイアウトを採用するwebサイトが増えています。「カード型レイアウト」とは、四角いカードの中にサムネイル画像、記事タイトルなどが入っているデザインです。 画像を収集できるサービス「Pinterest」（ピンタレスト）がこのデザインを採用してから、ECサイトを中心に多くのサイトで見かけるようになりました。 出典：Pinterest はてなブログでも、CSSをカスタマイズすれば、トップページをカード型デザインにすることができます。といっても、初心者にカスタマイズは難しい。 そこで、はじめからカード型デザインを実装しているデ…
これから学んだ技術についてはメモ程度でもいいからブログ記事に残しておこうと思う。 今回はjQueryプラグインでテーブル生成用のGrid.jsです。 gridjs.io マテリアルデザインのようなシンプルでおしゃれな感じのテーブルUIを作ることができます。 次のような機能がそろってます。 ・ソート ・検索フィルター ・カラムのサイズ動的変更 ・ページング ・ヘッダーの固定 ただネックなのが検索フォームやページングの位置を調整するのが難しいということ。 それにチェックボックスをテーブルのセル内に埋め込むこと自体はホームページのExampleを参考に実装できるのだけど、そのチェックボックスを押した…
fladdict.net
tsukuruiroiro.hatenablog.com
gigazine.net
lab.sonicmoov.com
uxlayman.hatenablog.com
uxmilk.jp
gigazine.net
www.slideshare.net
developers-jp.googleblog.com
