シンプルUIの裏に隠された多彩な機能群 - Google Chrome徹底解説 - フル機能を使い倒そう(1)
見逃されがちなChromeの便利な機能 世界で最も使われているWebブラウザが「Google Chrome」だ。パソコンでもスマートフォンでも、Google Chromeが最大のシェアを占めている。そのシェアは2位以下を大きく引き離しており、その状況がもう何年も続いている。 Googleは早期の段階からGoogle Chromeの自動アップデート機能を有効にしてきた。このため、一度Google Chromeをインストールしたらほとんどのケースで常に最新のバージョンを使っている状態になっている。Googleアカウントとのひもづけも行われており、PCを買い替えてもいつのまにかこれまでと同じ設定のGoogle Chromeを使っているという体験をしたことがあるはずだ。 GoogleはChromeの開発に力を注いでおり、新機能の投入も継続的に行われている。しかし、そのシンプルなUI/UXから、追加
【HTML＆CSS】初心者が躓きがちなスタイリングについて解説してみた - Qiita
はじめに はじめまして！ DMM WEBCAMP Advent Calendar 🎄 7 日目を担当することになりました、@k_uki512と申します！ Webアプリケーション開発において、HTML＆CSSを使用したフロントエンド開発は避けて通れません！ですが、実際にCSSを書いてみると自分の思ったようなスタイリングができないことも多いと思います。 そこで今回は、初心者が躓きがちなスタイルの事例とその解決策をいくつか紹介していきたいと思います！🙌 対象者 CSS（SCSS）によるスタイリングに苦手意識がある方 ホームページ制作,LP制作（web制作） にも興味がある方 基本的な HTML&CSS を学習後、更にステップアップしたい方 簡単なFlexBoxのスタイリングについて知っていると更に良い（横並び、中央揃え程度でOK） 本記事では、Bootstrap や Tailwind CSS
開発者必見！Chromeの拡張機能おすすめ40選【2023年版】 - Qiita
はじめに この記事はNuco Advent Calendar 2023の7日目の記事です。 本記事では、おすすめのChromeの拡張機能を8つのカテゴリ別に40個紹介しようと思います。 利用ユーザー数と評価は、2023年11月時点のものです。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 目次 Google Chromeの拡張機能とは? 1. 開発全般に使える拡張機能 (4選) 2. テストデータ作成に使える拡張機能 (2選) 3. サーバーサイド開発時に使える拡張機能 (3選) 4. フロントエンド開発時に使える拡張機能 (14選) 5. クラウドサービス利用時に使える拡張機能 (3選) 6. ドキュメント作成時に使
画像生成 AI で生成した画像は CNN で判別できる？ - Qiita
はじめに RetailAI Adventurers Advent Calendar 2023 の 8 日目の記事です。 昨日は @zushi_ryota さんの『Mockito-Kotlin を使ってテストコードを書いてみる』でした。 昨年末の ChatGPT の登場により、今年は『生成 AI』が流行語大賞のトップテンに入るほど世間一般に AI が浸透し、AI エンジニアでなくても LLM を使ったサービスを開発するなど一気に普及していきました。 更にタイムリーなことに本記事の投稿前日の 2023 年 12 月 7 日には、 Google (DeepMind) が ChatGPT を凌駕すると言われている次世代マルチモーダル AI モデル「Gemini」を発表 Apple が Apple Silicon 向けに最適化された ML フレームワーク「mlx」を OSS として公開し、llama
テクニカルサポートチームで「お問い合わせ対応」と「開発タスク」を両立するためにやったこと - Qiita
この記事はリンクアンドモチベーション Advent Calendar 2023の8日目の記事です。 はじめに CREエンジニアのWakaです！ CREのテクニカルサポートチームでは、 「お問い合わせ対応」と「開発タスク」を並行しながら業務を行っております。 【参照】 CREのおしごと CREのおしごと〜エンジニアチーム編〜 課題 お問い合わせの数の変動によって、開発タスクが進まない状況でした。 チームの中でもプロダクトに関するお問い合わせが多いから仕方がないよね・・・という空気感。 この状況をコントロールできる状態にしたい！と思い、対策を打つことにしました。 対策 この記事で、対策の内容ステップを３に分けて、ご紹介します！ ステップ１：可視化する お問い合わせ対応（Jira Service Project）と開発タスク（Jira Software Project）と管理が分かれており、それ
【2023年版】エンジニア向け読むべき資料まとめ - Qiita
はじめに 今回は無料で公開されているエンジニア向け修資料をまとめました。 資料の作り方も勉強になるので「勉強会で登壇している人」「企業の研修担当の人」にも参考にしてほしい内容になっています。 記事の主な対象者 研修資料を網羅的に見たい人 エンジニア初心者から中級者 研修資料の作成をしていきたい人 MIXI23卒新人研修 毎年更新をしているMIXIさんの資料は量と質が凄いです。各資料において、動画による解説もついているので、初心者でも理解しやすい構成になっています。 2023年版のMIXIさんの研修資料は下記の内容が学べます Git研修 データベース研修 設計・テスト研修 コンテナ研修 iOSアプリ開発研修 Androidアプリ開発研修 フロントエンド研修 ゲーム開発研修 Flutter研修 AI研修 セキュリティー研修 インシデントハンドリング研修 チーム開発研修 GMOペパボ GMOペパ
【閲覧注意】イライラ不可避なUIデザイン10選 - Qiita
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 はじめに 人は見た目が9割 皆さん一度はこの言葉を耳にしたことがあるのでしょう。内面がどれほど素晴らしくても、外見がそれに見合わないと、なかなか本当の価値を認めてもらえないものです。 この話は人間だけでなく、アプリケーションにも当てはまります。どれだけ内容が素晴らしくても、見た目がイマイチだったり使い勝手が悪かったりすると、ユーザーに敬遠されてしまいます。(私は以前ネ⚪︎フリからア⚪︎プラに切り替えたのですが、使いにくく感じたため、すぐに元のサービスに戻しました) エンジニアの皆さん、優れた技術力を持ちながら、デザインが原因でユーザー離れを招いていませんか？そうならないよう
iMessageで写真に素早くアクセスする裏ワザ。対応アプリの並び替え、編集も | ライフハッカー・ジャパン
iOS 17では、iPhoneの「メッセージ」アプリから写真にアクセスする方法が変わりました。この変更によって写真や動画を送信するプロセスが、以前よりめんどうになっています。 ですが、RedditユーザーのSmiley-v2氏が発見した今回ご紹介するハックで、サクッと写真にアクセスして送信する方法をご紹介します。 iMessageで写真を手早く送るメッセージアプリで写真や動画を手早く送りたい時は、「＋」をタップして「写真」を選択するのはおすすめしません。少し手間がかかってしまいます。 そうではなく、メッセージアプリを開いたら、「＋」を長押ししてみましょう。 すると、キーボードが表示される場所に、写真ギャラリーが開きます。 あとは、送りたい写真・動画を選択すれば、送信が可能です。 対応アプリのショートカットを並べ替えるiOS 17では、メッセージアプリでチャットを開いて、「＋」をタップすると
【朗報】Safariでも「複数のプロファイル設定」が可能に！使い分けのメリットや設定方法とは | ライフハッカー・ジャパン
ブラウザは、仕事とプライベートで使い分けできるよう、プロファイルを設定できることは絶対に必要。にもかかわらず、Appleが自社ブラウザSafariにプロファイル設定機能を追加したのは、2023年のことです。 今では、iOS 17とmacOS 14 Sonomaで同じようにプロファイルの設定が可能となったので、非常に便利！ 仕事用とプライベート用のタブを別々に保存できるだけでなく、各プロファイルで実行するブラウザ機能拡張を選べるようになりました。 プライバシー保護の観点でも◎プロファイルを設定できるようになったのは、プライバシー保護という点でもとても有益です。 ブラウザ機能拡張を使用する場合は、さまざまな個人データにアクセスされることになりますが、プロファイルを設定しておけば、アクセスされるデータの制限が簡単にできます。 オンになっている機能拡張が少なければ、使用リソース量が減り、Safar
「声優イベントばかりやってる」サイエンスホール 担当者が明かした人気の理由
東京都千代田区の科学技術館の地下2階にある劇場型ホール「サイエンスホール」の公式X（旧ツイッター）が、「声優イベントばかりやってる」と投稿で明かして、話題になっている。 科学技術館は、皇居外苑の北の丸公園にあり、その中のサイエンスホールは、410人が収容できる施設だ。公式サイトでは、「講演会、セミナー、シンポジウム、各種発表会、トークショー、アニメイベント等に最適です」とうたっている。 「何百回も擦られたネタを自虐的に使わせていただきました」 「サイエンスホールをご存知ない方の為に」。ホールの公式Xでは2023年12月6日、こう切り出して、次のように自らを紹介した。 「武道館の隣に科学技術館という博物館があります。その地下にサイエンスホールという声優イベントばかりやってるホールがあります。こちらに馴染みが深い方は科学技術館ごとサイエンスホールと表現します。イギリスをイングランドと表現するよ
Gmailの新スパム規制対応全部書く
[2024年1月10日、19日追記] GmailとYahoo!側のアップデートに合わせていくつか細かい説明を追加しています（大筋は変わっていません）。変更点だけ知りたい方は「追記」でページ内検索してください。 2023年10月3日、Googleはスパム対策強化のため、Gmailへ送るメールが満たすべき条件を2024年2月から厳しくすると発表しました。また米国Yahoo!も、2024年2月 第一四半期[1] から同様の対策を行うと発表しています。端的に言えば、この条件を満たさないと宛先にメールが届かなくなるという影響の大きな変更です。 この記事では、Gmailや米国Yahoo!の規制強化への対応方法を解説します。ただし米国Yahoo!にメールを送る人は多くないと思うので、フォーカスはGmail寄りです。また、メール配信サービス（海外だとSendGridやAmazon SES、国産だとblas
「型システム入門」の先へ：TypeScriptの型システムのいくつかの側面 | 雑記帳
この記事は TypeScript Advent Calendar 2023 の8日目の記事です。言語実装勢にも役立つ内容を含んでいるかもしれないので、 言語実装 Advent Calendar 2023 にも登録しています。 TypeScriptで型システムに興味を持った人が「型システム入門」を読んだという話を時々聞きます。「型システム入門」は、Types and Programming Languages (TAPL) という本の邦訳で、型システムに興味を持った人が読むのは自然なことです。 型システム入門 プログラミング言語と型の理論 | Ohmsha 型システム入門 サポートページ ですが、この本の原著は2002年出版で、最近の話題がカバーされていなかったり、邦題に「入門」とあるように発展的な話題は扱っていなかったりします。一応続編的な感じのAdvanced Topics in Typ
Day.jsでよく使う機能の覚書 - Qiita
JavaScriptの日付操作ライブラリであるDay.jsでよく利用する使い方について書き残しておきます。 公式ドキュメントが充実しているので、網羅的に知りたい方はそちらを見ていただいた方が早いでしょう。 基本 インストール
Day.jsの使い方について - Motomichi Works Blog
参考にさせていただいたページ Day.js公式 GitHub - iamkun/dayjs: ⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API Installation · Day.js その他 Day.jsの簡単な使い方 便利な日付操作ライブラリ parse '2022-03-03' みたいな文字列をDay.jsのオブジェクトに変換します。 const example = dayjs('2022-03-03'); format 例えば現在時刻のオブジェクトを取得して、以下のように任意の文字列に変換できます。 const example = dayjs().format('YYYY-MM-DD-HH-mm-ss'); unixtimeを取得する 秒の場合 co
JavaScriptのimport文を使ってみた - Qiita
JavaScriptのimport文は、いままでHTMLで<script>タグを追加するなりしないと使えなかった外部のJavaScriptファイルを、JavaScriptファイル上で読み込むことができます。 注意点 注意点は以下 exportされたクラス・メソッドしかimportすることはできない import文を使うときは、HTMLの<script>タグにtype="module"属性を付与する ローカル環境(file://なURL)では動作しない exportされたクラス・メソッドしかimportすることはできない インポートしたいJavaScriptのメソッドおよびクラスは、必ずexport句で「そのクラス・メソッドがエクスポート対象である」ということを明示する必要があります。 例えば以下のようにAクラスをインポートできるようにしたいときは…
【暫定回避策】yarnでパッケージインストールする際にlocal issuer certificateのエラーの回避 | 記事 | とあるクリエイターのエンジニアブログ | T-CREATOR
yarnでパッケージインストールする際にlocal issuer certificateのエラーを回避する手順についてメモしました。 経緯 会社のネットワークからyarn add を実行して パッケージインストールする際にlocal issuer certificateのエラーになったため 暫定的な回避策調べてメモしました。 背景としてプロキシサーバーが変更になったことが起因していて 証明書の設定は別途必要のためその設定は別で実施します。 環境 Yarn 1.22.4 Node.js 14.15.3 発生したエラー yarn add を実行 zshCopy code$ yarn add express yarn add v1.22.4 info No lockfile found. [1/4] 🔍 Resolving packages... error An unexpected err
Moment.js → Day.js の移行は全置換じゃだめ。イミュータブルですので - Qiita
タイトルで言いたいことがわかった人は読む必要のない話です。 サマリ Day.js は JavaScript の軽量な日付操作ライブラリで、Moment.js のAPIと互換性があるため、Moment.jsからの移行先として候補にあがることが多いです。 Moment.js との大きな違いとして、単体で Locale の情報を含んでおらず、プラグインを追加して利用する必要があります。 これについてはこの記事では割愛します。 もうひとつ、Day.js は Moment.js と違って immutable（不変オブジェクト） であるという特徴を持ちます。 個人的にこれは Moment.js と比べて優れた点であると思いますが、移行の際は気をつけないと、発覚の遅れるバグを生む危険性があります。 日本語の紹介記事をざっとググった限り、この点にちゃんと言及している記事が見つからず、誰かが不幸になりそうな
moment.js の Day.js 移行｜dinii（ダイニー）公式
こんにちは、業務委託エンジニアの井手です。3 ヶ月ほどかけて moment.js を Day.js へと完全移行したのでその舞台裏やノウハウ、教訓についてお話ししようと思います。 なぜ moment.js を Day.js へ移行するのかmoment.js はリッチな format や parse を持たない JavaScript の Date 型を補完してくれるライブラリの先駆者として長年活躍していましたが、公式 HP に Considering using Moment in your project? There may be better modern alternatives. For more details and recommendations, please see Project Status in the docs. https://momentjs.com/とある通
Day.jsの使い方・まとめ
Day.js の使い方・まとめ Moment.jsが非推奨なので、日付操作系のライブラリは、構文が似ており人気の高いDay.jsを採用。 1. Day.jsのインストール
Moment.jsは非推奨だが安易にdate-fnsに変えるな。date-fnsのisValidではparseを活用せよ
問題点 面倒な日付処理をやってくれるMoment.jsですが、mutable設計が混乱を招くとして、今後は非推奨と発表しています。immutableに変更する作業も実施しないとのこと。 https://momentjs.com/guides/#/lib-concepts/mutability/ The moment object in Moment.js is mutable. This means that operations like add, subtract, or set change the original moment object. var a = moment('2016-01-01'); var b = a.add(1, 'week'); a.format(); "2016-01-08T00:00:00-06:00" // aも変更されてしまう。a.clone().
Moment.js の代わりとしての date-fns とは - Qiita
import { format, formatDistance, formatRelative, subDays } from 'date-fns' format(new Date(), "'Today is a' iiii") //=> "Today is a Sunday" formatDistance(subDays(new Date(), 3), new Date()) //=> "3 days ago" formatRelative(subDays(new Date(), 3), new Date()) //=> "last Friday at 7:26 p.m." format, formatDistance, formatRelative, subDays などの関数を import してそのまま使うだけですね。 加算 https://date-fns.org/v2.15.0
非推奨となったMoment.jsから移行を終えた話
こんにちは、スターフェスティバル株式会社 エンジニアのsoriです。 今回は1つのサービス内のアプリケーションで使われている日時操作ライブラリMoment.jsを移行した際に気をつけたことなどをお話しします。 なぜ移行したのか Moment.jsは、2020年後半に「今後新機能の開発をせず、新規プロジェクトでの使用を推奨しない」旨アナウンス[1]がありました。 アナウンスとしては、Moment.jsがmutableなAPIを使用しており、immutableなものに変更するためには大きな破壊的な変更が必要になること、 また、バンドルサイズが大きいなどの問題があることが挙げられています。 個人的に使用していた感触としては、枯れたライブラリであり気軽に利用できるものであるのは確かなものの、仕様が緩い点[2]などが見受けられ、堅牢なコーディングを行うことにも障害があるように感じられました。 とはい
非推奨となったMoment.jsから移行を終えた話
こんにちは、スターフェスティバル株式会社 エンジニアのsoriです。 今回は1つのサービス内のアプリケーションで使われている日時操作ライブラリMoment.jsを移行した際に気をつけたことなどをお話しします。 なぜ移行したのか Moment.jsは、2020年後半に「今後新機能の開発をせず、新規プロジェクトでの使用を推奨しない」旨アナウンス[1]がありました。 アナウンスとしては、Moment.jsがmutableなAPIを使用しており、immutableなものに変更するためには大きな破壊的な変更が必要になること、 また、バンドルサイズが大きいなどの問題があることが挙げられています。 個人的に使用していた感触としては、枯れたライブラリであり気軽に利用できるものであるのは確かなものの、仕様が緩い点[2]などが見受けられ、堅牢なコーディングを行うことにも障害があるように感じられました。 とはい
日付を扱うJavascriptライブラリmoment.jsの使い方
今回はJavascriptライブラリのmoment.jsのご紹介です。⇒詳しくは公式サイトにてご確認ください 現在のバージョンは2.12.0です。2016年4月現在 日付を取り扱うアプリケーションを使う場合は必須ですね、あまり使わない場合はdate関数を使っても良いのですが、日付の計算や今日が何曜日とか今年は閏年なのかとかこの日付は期間中の値なのかなど時間や日に関することならこのライブラリーに任せてしまいましょう。 カレンダーとか作る際にも役立ちそうですね。 それでは早速見ていきましょう。 インストール方法ですがサイトからダウンロードして使うかnpmやbowerなど使っても良いです。 moment.min.jsの方が軽くて良いのですがローカライズ版のmoment-with-locales.jsを使ってみます。英語出力以外に日本語環境が入っています。フランス語やイタリア語など他の言語も入って
【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。 「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひこの機会に、font-familyの正しい設定方法をマスターしてください。 ※本記事は、各OSの標準インストールフォントや、ブラウザのアップデート状況などを踏まえて、なるべく最新の情報をお届けできるように、内容を随時更新しています。著者の調査した情報に基づいて執筆しているため、内容に間違いや不備のある可能性もあります。（最終調査日：2023年7月） font-familyの役割とは CSSのf
WEBデザインに利用できる可読性の高いフォント6選|名古屋のホームページ制作・WEB集客会社 株式会社オンカ
ホームページのWEBデザインを制作する際に最も重要な一つの要素として、使用するフォントの選定が挙げられます。Adobe FontsやGoogle Fontsなどのホームページに実装することができるWEBフォントサービスは近年充実度を増し、デザイン性の高いフォントなどもWEBデザインに気軽に使用することができるようになりました。しかしデザイン性の高いフォントはホームページの見栄えを良くし、他社ホームページとの差別化が望める一方で可読性が低くなってしまうという問題もあります。WEBフォントの中にはUIに特化してデザインされた可読性に優れたフォントもあり、可読性の担保されたフォントを用いることでコンテンツの内容がどんなユーザーにも伝わりやすくなり、結果的にSEO効果を期待できることもあります。そこで今回は、UIや可読性に配慮して開発されたWebフォントをご紹介します。 【目次】 1. 英語フォン
ウェブサイトにおすすめなフォントまとめ②｜れたすばーがー
前回の、おすすめなフォントまとめ①では、主にシンプルなフォントを紹介しました。今回は、ちょっとお洒落な、特徴のあるフォントを紹介します。 Poppinsまず初めに紹介するPoppinsは、Indian Type Foundryによってデザインされた、全体的に丸い感じで可愛らしいフォントです。ちょっとおしゃれなフォントが使いたかったらこれがおすすめです。とてもお洒落で読みやすく、次世代の高速ブラウザとして注目されているBraveなども使用しています。 Montserrat次に紹介するMontserratは、アルゼンチンのグラフィック デザイナー Julieta Ulanovskyによってデザインされた、デザイン性の高い、力強い太めのフォントです。フォントのウェイトも豊富で、見出しに使うのがおすすめですが、本文にも問題なく使えます。 JostJostは、Owen Earlによってデザインされた
日本語等幅フォント - Qiita
コーディングやメモ書きに必須となる等幅フォント。色々調べてみたのでメモを残します。 個人的にはSource Han Code JPが好きです。英数字:かな漢字=1:2が必須ならNoto Sans Mono CJK JPでしょうか。 M+系のポップ感は少し苦手です。 Noto Fonts / Source Han Sans https://www.google.com/get/noto/ https://github.com/adobe-fonts/source-han-sans AdobeとGoogleが共同開発しているフォント。Googleの方はNoto Sans、Adobeの方はSource Han Sans(源ノ角ゴシック)。Notoの由来は"No Tofu"(豆腐文字=文字化け時に表示される四角)だとか。 日本語だけでよいのでNoto Sans CJK JPをダウンロード。 Not
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
本当にわかりやすいAI入門
日付の操作が楽になる！Moment.jsの使い方 | したっけ
おすすめのGoogleフォントをまとめる会