Figmaでちょっとしたデザインをつくるときに使っているプラグイン8選 - ICS MEDIA
アイコンやスライド作成など、デザイナーに限らずちょっとしたデザインをつくる機会はありませんか？ そんなとき、Figmaのプラグインを使うと、いつもより少し凝ったデザインを手軽につくることができます。 今回は、画像加工やあしらいをつくるときに便利なプラグインを8個紹介します。2024年6月時点で、すべて無料で使用できるので気軽に試してみてください。 Figmaのプラグインを使ったことがないという方は、以下の記事で使い方を紹介していますので参考ください。 『Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選』 1. Noise & Texture Noise & Texture | Figma 「Noise & Texture」は、ノイズやさまざまなテクスチャーを画像として作成できるプラグインです。 プラグイン実行後、設定パネル内の［Add to Canvas］をクリックすると
HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
[電話無人対応] Amazon Bedrock + Whisperで、名前のヒアリング精度を確認してみた[Amazon Connect] | DevelopersIO
[電話無人対応] Amazon Bedrock + Whisperで、名前のヒアリング精度を確認してみた[Amazon Connect] はじめに Amazon Connect + Amazon Bedrock + Whisper APIの組み合わせで、発話による名前（フルネーム）のヒアリング精度を確認してみました。 以前、Amazon ConnectとAmazon Lexを利用し、ヒアリング精度を確認しましたが、今回は、Amazon Bedrock + Whisper APIの組み合わせで確認してみます。 ヒアリング精度の確認方法は、発話によって名前を伝えた際、発話通り名前を認識するかAWS Lambdaのログから確認します。 構成 構成としては、下記の通りです。 名前のヒアリングに関して、Connectのフローは下記の通りです。 コンタクトフロー内で「メディアストリーミングの開始」ブロ
![[電話無人対応] Amazon Bedrock + Whisperで、名前のヒアリング精度を確認してみた[Amazon Connect] | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/4a0c72b2ac2c13db00bebc51dcd05dd91b9c254c/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2024%2F04%2F2024-03-29-cm-hirai-1200x630-1-2.png)
[電話予約の無人化]Amazon Connect + GPT-4 JSONモード + Whisperで、1回の発話から予約情報(日付,時間など)を抽出 | DevelopersIO
[電話予約の無人化]Amazon Connect + GPT-4 JSONモード + Whisperで、1回の発話から予約情報(日付,時間など)を抽出 はじめに Amazon Connect + GPT-4 JSONモード + Whisperで、1回の発話から予約情報(電話番号,日時,名前,人数)を正しく抽出できるか検証しました。 コールセンターでは、有人対応から無人対応に変更したいニーズが増えているように思います。 電話予約の無人対応を想定し、1回の発話で、下記の５つの予約情報を抽出できるか確認します。 お名前 電話番号 予約日 予約時間 人数 発話で予約情報を抽出する方法として、GPT-4 Turbo のJSONモードを利用します。 JSONモードの詳細は、下記を参照ください。 例えば、「名前はクラスメソッドで、電話番号は09011111111。来週の火曜日の19時に4名で予約できます
![[電話予約の無人化]Amazon Connect + GPT-4 JSONモード + Whisperで、1回の発話から予約情報(日付,時間など)を抽出 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/e41bad5b85c8a6e53a308ad1ab6864682d595877/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2023%2F11%2Fhirai_reservation_1200x630.png)
『フロントエンドの知識地図』出版のお知らせ - ICS MEDIA
株式会社ICSの池田・西原・松本の3人で『フロントエンドの知識地図 〜 一冊でHTML/CSS/JavaScriptの開発技術が学べる本』という書籍を執筆しました！ ICS MEDIAではHTML・CSS・JavaScriptにおける最新技術をテーマに取り扱っています。ウェブメディアの特性上、記事は断片的な情報となることが多く、体系的な発信が難しいと我々は課題感を持っていました。そこで、この書籍ではICS MEDIAでは発信の難しかった、フロントエンドの全容を一冊で伝えることを目指しています。 2023年11月24日の発売で、Amazonや書店や電子版で購入できます。 Amazon サポートページ 2023年4月に執筆を開始し、フロントエンドのトレンドをまとめてキャッチアップできるようテーマを選定しました。344ページで、紙面はフルカラー。内容の厚みにたいして、定価2,860円（本体2,6
ウェブアクセシビリティの基本：ランドマークロールを理解する
ページ冒頭におくメインコンテンツ等へジャンプするためのリンクです。tabキーでフォーカスが当たるまでは非表示にしているサイトも多いです。 ランドマークが適切に実装してあれば不要という意見もありますが、2022年の支援技術利用状況調査報告書では「よく使う」「時々使う」を含めると80%になるようです。 region role="region"は、他に適切なランドマークが存在しない場合に使用される一般的なランドマークです。 regionロールにするにはsection要素を使ってマークアップします。 section要素はheader, footer要素の例のように、特定の条件下でロールが変わります。 section要素のデフォルトのロールは「対応するロールなし」であり、ランドマーク要素ではありません。ChromeのアクセシビリティツリーではSectionと表示されますが、これは独自の仕様のようです
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI - ICS MEDIA
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI 2023年5月〜6月にリリースされたChrome 114とEdge 114には、「ポップオーバーAPI」というAPIが搭載されました。 ポップオーバーとはコンテンツの1番上に重ねて表示するUIで、ユーザーにアクションを促したり、補足の情報などを伝えるために画面に表示します。ポップオーバーAPIのMDNのドキュメントではオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを総称して「ポップオーバー」と呼んでいます。 ウェブサイトでよく見かけるポップオーバーですが、実装するには意外と調整や考慮の多いUIです。たとえば、画面の1番上に重ねるためにはz-indexで他の要素との重なり順を調整する必要があります。Escキーを押した時や要素外をクリックした時にポップオーバーを閉じるには、Java
実は大量にあるWindowsのファイルパス記述方法まとめ
macOSやLinuxではファイルパスの記述方法が非常にシンプルですが、Windowsには幾通りものファイルパス記述方法が存在しています。そんなWindowsのファイルパスについて調査した結果を、ファイル管理アプリ「Fileside」を開発するErik Jälevik氏がまとめています。 The weird world of Windows file paths | Fileside https://www.fileside.app/blog/2023-03-17_windows-file-paths/ Windows システムのファイル パス形式 | Microsoft Learn https://learn.microsoft.com/ja-jp/dotnet/standard/io/file-path-formats ファイルパスには、各ファイルまでの道筋をすべて記述する「絶対パス」
カルーセルUIを実現するJSライブラリまとめ(2024年版) - 導入手間や機能の比較紹介 - ICS MEDIA
いずれもMITライセンスで公開されていますので、個人・商用問わず利用可能です。 Slick.js Slickスリック.jsは簡潔なコードで実装できるのが特徴のモバイルフレンドリーなカルーセルライブラリです。機能は少なめですが、ナビゲーションや表示するスライド数を変更するといった基本的な機能は備わっています。jQueryプラグインのため実装にはjQueryを読み込む必要があります。タッチ・スワイプ操作にも対応しています。ReactやVue向けのモジュール、TypeScriptのサポートは公式で提供されていませんがOSSで存在します。 このJSライブラリの基本的な実装と、アニメーションをフェードに変えた作例を用意しました。 基本の作例 サンプルを別ウインドウで開く コードを確認する <div class="slick carousel"> <div>1</div> <div>2</div> <
フロントエンドエンジニアのための生放送と RTMP 通信基礎
前回「フロントエンドエンジニアのための動画ストリーミング技術基礎」では HTTP ベースのストリーミング技術に関して勉強会を実施しました。視聴者に映像を届けるためのストリーミング技術に関してのお話でした。 本記事は、AbemaTV の生放送番組で撮影機材から送られた映像がエンコーダーを介してリアルタイムに放送する部分について勉強会を実施した際の資料です。 生放送における動画データの通信 AbemaTV では生放送で撮影した動画データのやりとりに RTMP というプロトコルを利用しています。 RTMP とは RTMP は Real-Time Message Protocol の略で、その名前の通りリアルタイムにコミュニケーションを行うためのプロトコルです。Web 業界では Photoshop などでお馴染の Adobe Systems 社が開発しています。Adobe Flash Player
自家製HTTPストリーミング配信のすすめ - pullover
pullover 停滞中... トップページページ一覧メンバー編集 自家製HTTPストリーミング配信のすすめ 最終更新： jaijai 2015年06月19日(金) 14:41:19履歴 Twitch.tvみたいなライブ配信をTwitchなどを使わないで行うにはどうすればいいのかというおはなし。 iOS/Android向け→自家製HTTP+HLS配信のすすめ 一般的な方法 エンコーダー → RTMPサーバー → RTMPdump → HTTPサーバー → 視聴者のWebブラウザ それぞれフリーで利用可能がものがあるけどいかんせん設定がめんどくさい（わかりづらい）。 今回の方法 OBS → FlazrDumper → 視聴者のWebブラウザ FlazrDumperはRTMPサーバーとHTTPのサーバーが合体したようなソフトでPeerCast用に開発されたものです。FlazrDumperの設定
HTMLコーダーにとっての2020年。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第6回目となる本記事ではウェブ業界の「HTMLコーダーにとっての2020年」と題してアンケート結果を紹介します。 HTMLのエディター HTML制作によく使われるエディターはどれでしょう？ アンケートで質問してみました。 805票の回答があり「VS Code」が64.5%、「Atom」が8.8%、「WebStorm」が8.2%、「その他」が18.5%でした。 VS Codeは圧倒的な人気ですね。ICS MEDIAでは記事『VS Codeの拡張機能7選』で紹介しているとおり、無料のソフトウェアなのに開発を便利にする機能がたくさん揃っていて魅力的です。 WebStormの回答者数は
パソコンを買い換えた時に真っ先にインストールしたWindows無料ソフトまとめ
システム・汎用ソフト まずは、パソコンの一般的な操作に便利なソフトです。 GeekUninstaller GeekUninstaller Windowsソフトのアンインストーラーです。 Windowsデフォルトのアンインストール機能はめちゃくちゃ重いのに対して、このGeekは、とても軽く瞬時に立ち上がります。 加えて、通常のアンインストール機能では、残ってしまうファイルやフォルダ、レジストリキーをスキャンして綺麗に削除してくれる支援機能もあります。 とりあえず、新しいパソコンを購入したら、Geekを起動して、不要なソフトを削除することから始まります。 Clover Clover Brings Chrome-Style Tabs to Windows Explorer. Windows標準のエクスプローラーを、Google Chromeライクなタブ仕様にしてくれる、エクスプローラータブ化ソフ
ペライチのWebページをすばやく作り始められるやつ「Rin 3.0」作った - MEMOGRAPHIX
Rin 3.0 というのを作った。 Rin - A lean, gulp-based HTML and SASS boilerplate by sanographix僕はいわゆるペライチのWebサイトを作ることが多いんだけど、そういう制作時に使っているフレームワークというかBoilerplate的なやつです。 フレームワークといっても、BootstrapのようにCSSをモリモリ書いて汎用コンポーネントを用意しまくる、というふうにはしていない。結局各webサイトでデザインの要件が大きく異なる場合が多いので、CSS部分の記述をできるだけ少なくして、各サイト向けに柔軟にスタイルを書けるようにする方針をとっている。一方でビルドツールに求められることは割と毎回一緒なことが多いので、gulpですばやく環境構築して、スタイルは各サイトでよしなに、みたいな雰囲気。 Rinは、だいたい下記のようなことがすば
[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック
背景画像をブラウザいっぱいに表示するスタイルシートのシンプルなテクニックを紹介します。 デスクトップだけでなく、スマフォやタブレットにも対応、しかもたった一行なのでスニペットに加えておくと便利です。 デモを幅480pxで表示 コンセプト 「background-size」をビューポート全体をカバーするために使う 「background-size」はレスポンシブ対応にする時に非常に有効なプロパティです。値に「cover」を使うことで、背景画像を相対的に自動で調整します。 ※IE8以下はサポートしていませんが、後述のスクリプトを使用するとbackground-sizeが機能するようになります。 「Media Queries」をスマフォ対策として使う スマフォなどの小さいサイズのスクリーン用にMedia Queriesを使って、小さいサイズの画像ファイルを使うことができます。もっともこれはオプシ
NHKでのアニメ化は歓迎すべきか？ NHKアニメの魅力を分析 - おたぽる
「ログホラなんてNHKだし深夜枠じゃないしサービスカット期待できねーだろwwww」 これは今期の新番組としてNHK Eテレで始まった『ログ・ホライズン』に関するネットの書き込みだ。ふと考える。受信料を払っている以上、NHK放映のアニメは“すべて有料コンテンツ”なのではないか。僕や君が見ても見なくても、今この瞬間もNHKのアニメに対して我々はお金を払っているのだ。というわけで、果たしてアニメファンにとってNHKで番組が放映されることは良いことなのか悪いことなのか？ それぞれの面について検証してみようと思う。 ◎NHKアニメのデメリット面は…… ■封印作品・幻の作品が多い 1979年放映の『マルコ･ポーロの冒険』は海外ロケの実写とアニメのドラマ部分をミックスした意欲作だが、当時の放送原盤が発見されず、再放映もソフト化も不可能に。82年放映・日仏合作の『太陽の子エステバン』は海外で続編やゲーム化
なぜ武雄市図書館はすごいのか – 見えてるものをちゃんと見よう – ガジェット通信
なぜ武雄市図書館はすごいのか – 見えてるものをちゃんと見よう 武雄市図書館について、慶應大学総合政策学部教授の上山信一氏が非常に興味深い考察記事を公開されている。 なぜ武雄市立図書館はすごいのか――ツタヤ、スタバとのコラボ（下）*1 *1：「なぜ武雄市立図書館はすごいのか――ツタヤ、スタバとのコラボ（下）」 2013年08月22日 『上山信一＠”見えないもの”を見よう』 http://www.actiblog.com/ueyama/304221 樋渡市長や図書館職員、運営受託者のCCC(カルチュアコンビニエンスクラブ)へのインタビュー取材で得たことをもとに、武雄市図書館がなぜすごいのかが分析されているが、見えないものを見ようとするあまり、武雄市図書館のすごさが伝えきれていないと感じた。 僭越ではあるが、見えていることをもとに補足し、このプロジェクトの意義を考えたい。 CCCと共同で投資
[JS]jQueryのMasonry風レイアウトをスタイルシートで簡単に調整できるスクリプト -Salvattore
デモページ：Dynamic content コンテンツはさりげないアニメーションで追加・削除されます。 Salvattoreの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="js/salvattore.js"></script> Step 2: HTML HTMLは単にパネルを並列に配置するだけで、ラッパーに「data-columns」を加えます。 <div id="timeline" data-columns> <div>Item #1</div> <div>Item #2</div> <div>Item #3</div> <div>Item #4</div> <div>Item #5</div> </div> Step 3: CSS コラム数はスタイルシートで設定します。 レスポンシブ対応にするには、Media Querie
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Windows 11のパッケージ版が発売、メディアはUSBメモリ
Engadget | Technology News & Reviews
