パーティクルやラインアニメーションなど、ウェブページにちょっと見栄えのする表現を加えてみたくなることはありませんか? ICS MEDIAのトップページや弊社採用サイトでもこうした表現を実装していますが、思った通りの演出をコードで表現するのはなかなか難しいものです。技術は分かっても「自分にはセンスがないから……」と諦めてしまっている人もいるかもしれません。 この記事では、簡単なパーティクル表現を題材に、効果的なアニメーション表現のためのテクニックを紹介します。サンプルコードはブラウザー標準のWeb Animations APIを使用して実装していますが、CSSアニメーションやGSAP等のライブラリを用いても同様の実装は可能です。 基本のパーティクル 例題とする基本のパーティクルを見てみましょう。クリックすると中央の星からパーティクルが放射状に広がるアニメーションが再生されます。 デモを別画面
画像出典: https://www.ipa.go.jp/files/000017316.pdf こんにちは。株式会社Flatt Security セキュリティエンジニアの奥山です。 本稿では、独立行政法人 情報処理推進機構(以下、IPA)が公開している資料「安全なウェブサイトの作り方」を紹介します。 「安全なウェブサイトの作り方」は、無料で公開されているにも関わらず、Webセキュリティを学ぶ上で非常に有用な資料です。これからWeb開発やセキュリティを勉強したいと考えている方はもちろん、まだ読んだことのない開発者の方々にも、ぜひ一度目を通していただけたらと思います。 一方、「安全なウェブサイトの作り方」では、一部にモダンなアプリケーションには最適化されていない情報や対象としていない範囲が存在します。それらについても本記事で一部、触れていきたいと考えていますので、資料を読む際の参考にしていただ
自身のプライオリティによりますが、いくつか。 Markdownで幅広く再利用性を利かせたい、長期的に丁寧に版管理したい 自分自身の操作性、描きやすさと、見た目 俄然手軽に、短期的に、Onlineでいつでもどこでも いずれかという視点で考えると良いのかなと思い、並べてみました。 1. 長期的に: Markdownで幅広く再利用性を利かせたい、丁寧に版管理したいなら Markdownで描くことのメリットは再利用性。 将来的に追記・編集、自分以外の誰かが手を入れる可能性が高い。 現在のドキュメントだけでなく多種説明資料、媒体に転用する可能性がある。 ...という点で差分管理をしたいなら、以下。 VSCodeでPlantUML、Mermaid 上記参考で以下。 Alt+D でプレビュー起動。 Ctrl + Shift + P でコマンドパレットを起動し、出力。 png, svg, eps, pdf
自分の声を美少女ボイスやイケメンボイスに変換してくれるボイスチェンジャーは、ライブ配信やムービー投稿の際にありがたい存在です。しかし、ボイスチェンジャーによって変換できる音声は固定されており、自分好みの音声に変換できるボイスチェンジャーを見つけるのは困難です。天王洲アイル氏は、この問題をAIを用いて解決する方法について解説し、さらにAIの力で自分の声を好みの声にリアルタイム変換できるボイスチェンジャー「MMVC」を公開しています。 VRChatなどの登場によって誰でも好きなアバターを使って好きなキャラクターになりきることが可能となりました。また、自分の声を美少女ボイスやイケメンボイスに変換できるボイスチェンジャーも多くの種類が存在しています。しかし、既存のボイスチェンジャーには「理想的な結果を得るためにはボイスチェンジャーに合わせた発声練習が必要」「リアルタイム変換が不可能なため、会話やラ
スマートフォンとPCを併用しながら作業していると、デバイス間で画像ファイルやURLなどを共有したい状況が発生しがちです。無料で公開されているブラウザ拡張機能「Now Push」を使えば、PCとスマートフォン間でサクッとファイルや通知を共有可能とのことなので、実際に使い方を確かめてみました。 Now Push https://www.nowpush.app/index.html Now PushにはiOS版・Android版・Google Chrome拡張機能版・Firefox拡張機能版が存在します。今回はiOS版とGoogle Chrome拡張機能版を使ってPC・iPhone間でファイルやテキストを共有してみます。 まずはPC側のセットアップをするため、「Available in the Chrome Web Store」をクリックします。 拡張機能のインストールページが開くので、「Chr
------------------------------------------------------ 2024 年 1 月更新 本書がきっかけで「なんとか Docker を使えるようになりたい」というプログラマの方向けの入門書を秀和システム様から出版させていただけることになりました 開発系エンジニアのためのDocker絵とき入門 https://www.amazon.co.jp/dp/4798071501 紙書籍と電子書籍、どちらもございます この書籍と執筆経験は、みなさまからの驚くほどの高評価があればこそ得られた機会でした いつも本当にありがとうございます 書籍化に際しまして、この場で次のとおり説明させていただきます 1️⃣ 本書 ( Zenn ) は有料化しません 2️⃣ 本書 ( Zenn ) は今後更新しません 3️⃣ 本書 ( Zenn ) と出版される絵とき入門の違い
音声合成ソフトの開発や販売を手掛けるSSS(仙台市)は3月16日、音声合成ソフト「VOICEVOX」用音源「九州そら」をリリースした。九州そらは、せりふを入力するだけで人間らしい“ささやき声”を出力できるAIだ。 VOICEVOXは、ドワンゴでAIの研究に携わっているヒホ(ヒロシバ)さん(@hiho_karuta)さんが開発した無料の音声合成ソフト。AI技術を活用して、人間らしい話し声を合成できる。イントネーションや話す速さなどの調整も可能。立体音声を制作できるソフトを活用すれば「ASMR動画」の制作にも使える。 九州そらはVOICEVOX用音源として初めてささやき声の合成に対応した。ソフトのダウンロードと利用は無料。「VOICEVOX:九州そら」とクレジットを記入すれば商用利用も無償でできる。 関連記事 「VOICEPEAK」と「CeVIO Pro」、 新しい音声・歌声合成製品はどこがす
はじめに LINQの登場後、C#は地道な進化を続け、C# 7で登場したタプルと分解、パターンマッチング、C# 8で登場したswitch式、C# 8,9で強化されたパターンマッチング などによって、C#のプログラミングスタイルは劇的に変化しました。 昔では考えられなかったようなスタイルのコードが記述可能になり、可読性やコードの安定性が飛躍的に向上しています。 そのキーポイントとなるのが、「宣言的プログラミング」です。 この記事では、最新のC#を使ってコードを宣言的に書く手法を紹介します。 やってる人は自然とやっている事だとは思いますが、そうではない人もいると思いますので、そういう方の参考になればと願っています。 宣言的プログラミングとは 宣言的プログラミングとは、「どうやってやるか(how)ではなく何をしたいか(what)を書く」と良く言われますが、なんとなくあいまいです。 これをもう少し具
Figmaをこれからはじめようというひとがまず知っておきたい、基本の機能や使い方を網羅した完全ガイド2022年版。 ウェブサイトのデモデザインを実際に作成しながら、Figmaの基本となる使い方を一緒に学びましょう。 この記事が読み終わったとき、Figmaの基本的なツールの使い方はもちろん、ウェブデザイン制作の具体的な進め方や、動きのあるプロトタイプの作成、チームによる共有やリアルタイム同時編集まで、一連の流れをまとめています。 コンテンツ目次 1. Figmaを使う前準備 2. Figmaの基本的な使い方について 3. 背景デザインの作成 4. グリッドレイアウトの追加 5. 基本ツールでロゴの作成 6. ナビメニューの作成 7. ヒーローセクションの作成 8. 3カラムレイアウトの作成 9. プロトタイプ機能の使い方 10. Figmaの使い方はアップデート継続中 Figmaを使う前準備
ウェブブラウザで閲覧中のウェブサイトをページ中の画像も含めて保存したいと思ったときに、HTMLファイルと画像ファイル・スタイルシートが別フォルダになることなく、単一のHTMLファイルとして保存できるブラウザ拡張機能が「SingleFile」です。 SingleFile – Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.org/ja/firefox/addon/single-file/ SingleFile - Chrome ウェブストア https://chrome.google.com/webstore/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle SingleFile - Microsoft Edge Addons https://microsoftedge.microsoft.com
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog LINEの技術組織が取り組んでいる・今後取り組む未解決課題を深堀りするインタビューシリーズ「Unresolved Tech Issue」、今回のテーマは「約1万人の社員全員が、家族友人に自慢できる働きやすさNo.1の社内IT環境づくり」です。 国内外を合わせて約1万人が働くLINEには、多種多様な国籍、文化、バックグラウンドの人々が在籍しており、さまざまな部署やプロジェクトで活躍しています。より良い労働環境を実現するために、LINEでは独自システム開発や外部サービス導入するなど積極的に社内ITに力を入れています。一人ひとりが最大限のパフォーマンスを発揮し、サービス競争力を高めることができる環境を目指しています。 社内ITの取り
シムシティやA列車で行こう、Cities: Skylinesなどさまざまな経営シミュレーションの中でも、無料&オープンソースな作品が「Simutrans」です。無料にもかかわらず初版が出た1999年から20年以上にわたって精力的にアップデートが続いているという熱量を持っている作品とのことなので、実際にプレイしてみました。 Simutrans - 輸送シミュレーションゲーム https://www.simutrans.com/ja/ Simutransは独立ソフトウェア版とSteam版が存在するので今回はSteam版をプレイしてみます。 Steam:Simutrans https://store.steampowered.com/app/434520/Simutrans/ ゲームプレイ画面はこんな感じで、シムシティのように斜めから地域を俯瞰する画面。スタートしたばかりですが、市民が住む町など
<link href="https://fonts.googleapis.com">って書くと罰金取られます。 以下はGerman Court Rules Websites Embedding Google Fonts Violates GDPRというニュースの紹介です。 German Court Rules Websites Embedding Google Fonts Violates GDPR ドイツのミュンヘン地方裁判所は、あるWebサイトの運営者が、ユーザの個人情報を本人の同意なしにフォントライブラリを経由してGoogleに提供したとして、100ユーロの賠償を命じました。 Webサイトが原告のIPアドレスをGoogleに無断で提供したことは、ユーザのプライバシー権の侵害に当たると判断しました。 さらに、Webサイトの運営者は収集した情報をその他のデータと突き合わせることで『IPア
相次ぐネット上の言論弾圧について、ドイツ科学協会の発行するジャーナルNachrichten aus der Chemieが「科学者はあらゆる言論弾圧に抵抗しなければならない」という論文を掲載しました。この論文は、現代の言論弾圧「キャンセル・カルチャー」をテーマにしています。 Scientists must resist cancel culture - Krylov - 2022 - Nachrichten aus der Chemie - Wiley Online Library https://onlinelibrary.wiley.com/doi/10.1002/nadc.20224120702 ソクラテスの弁明やガリレオ裁判から中国の金盾に至るまで、検閲は古今東西存在します。ナチスドイツやソビエト連邦などの20世紀に全盛を迎えた全体主義では、政治的見解などに基づいて科学的研究に制限
最近作った Slack Bot が好評だったのでまとめてみました! どこの Slack ワークスペースでも導入できるように詳細に設定方法も記載しています。 🛠 作ったもの tell-me-bot(社内では tell-me-paccho)という、社内用語辞典をいい感じに管理してくれる Slack Bot を作りました。 社内ではもともと Spreadsheet で社内用語を管理していたのですが、メンテナンスする人が限られ、あまり積極的には利用されていない状況でした。 そんな時に@しかじろうさんのこちらの記事を発見して、これはおもしろいアイデアだと思い、Firebase + Bolt(TypeScript)にて作ってみました(アイデアをくれた@しかじろうさんに感謝🙏)。元記事の機能を参考に+αの機能も色々実装しています。 構成 Cloud Functions for Firebase で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く