オープンソースVOICEVOX は OSS(オープンソース・ソフトウェア)版 VOICEVOX をもとに構築されています。 製品版と OSS 版の違いやモジュール構成は VOICEVOX の全体構成 をご参照ください。 ソフトウェア部分は Electron + Vue 、音声合成エンジン部分は Python + FastAPI です。 追加したい・改善したい機能があれば、ぜひ開発にご参加ください。
IT企業が社内の新人エンジニアに向けた研修資料や動画を無償公開し、話題になっている。学べる内容はIT業界の文化からゲームエンジン「Unity」を使ったゲーム開発までさまざまで、中には150ページ超のスライドや5時間超の動画もある。 ネット上では「初心者(エンジニア)の指針になる」「IT基礎知識の一通りのことが身につく」「動画があって助かる」などと評判だ。改めて公開内容と目的をまとめた。 サイボウズ、新人ITエンジニア向けに「IT業界文化」など サイボウズが7月20日に公式ブログで、4月から6月にかけて行った研修の資料を公開した。7月30日時点でブログへの「はてなブックマーク」(以下、はてブ)は約1950件、Facebookの「いいね」は約590件付いている。同社は“駆け出しエンジニア”向けとしている。 (関連記事:サイボウズの“駆け出しエンジニア”向け研修資料が話題 Webアプリ開発やIT
スクロールに連動するアニメーションはIntersection Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。 ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。 Animate on scroll using Intersection Observer by Keerthi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Step 1: カードUIをHTMLとCSSで実装する Step 2: CSSに基本的なアニメーションを追加する Step 3: Intersection Observerを使用する前に、HTMLに変更を加える Step 4: JavaScriptのInt
プログラミング言語のお作法から外れたコードやメンテ性が悪いコードを書くのはダメとよくいわれます。わたしは学生の頃、そういう意見を過剰に気にしていました。コードを書くことそのものに慣れていないのに綺麗に書こうとして手が動かず、動かないがゆえにコーディングの練習が進まない、という悪循環になっていました。そうすると何もアウトプットしないまま知識だけが増えていって、自分がこれくらいできそうというイメージと実際のプログラミング能力とのギャップで苦しみました。 この意識が薄れたのは、あるときものすごく手が早い人のコードを偶然見たときでした。たしかにちゃんと動くものができているんですが、そのコードの中身は当時の私の基準からいって*1おぞましいほど汚いものでした。そこで「これはわたしが書けば100倍くらい綺麗なコードを書けるんでは…」と一瞬思ったんですが、その後すぐに「あ、自分は知識はあるけど練習してない
こんにちは、デザイナー兼フォトグラファーのおまめ (@omame_creator) です。 今回はPhotoshopで写真を切り抜く方法、髪の毛のような細かいものをきれいに切り抜く方法、背景と馴染ませる方法を解説します。 どれも私が試して一番短い時間で簡単にできた方法なので、ぜひ試してみてください! 独学でつまずいていませんか? Photoshopの使い方を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい!」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年3月に編集部が情報を更新しました 「選択とマスク」を使って髪の毛を切り抜く方法 髪の毛を目立たせるため、強めになびかせた
Web制作の現場でよく使ってきたCSSのみで実装するボタンデザインを紹介します。hover時のスタイルも合わせて公開しているので、そのまま利用することができます。主に自分用のデザインストックとして投稿しますが皆さんも使えるボタンデザインがあるかもしれません。ぜひあなたの現場でもご活用ください。 背景色と矢印のボタン HTML<div class="button01"> <a href="">ボタンデザイン</a> </div> CSS.button01 a { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 1em 2em; width: 300px; color: #333; font-size: 18px; font-weight: 700; bac
プロジェクトが始まるときにかなり初期の段階でWBSを作ることは多いとおもいます。そのWBSの作成、プロマネやディレクターに任せっぱなしになっていないでしょうか。WBSはスケジュールをガントチャートで表したものを指していると思われがちですが、実はスケジュールだけでなく見積もりやアサインを精度高く行うためにも重要なものです。 たとえば「Webデザイン作成」というスコープにどのような実作業が含まれているかはWBSを作ることによって見える化しプロジェクトメンバーやクライアントと共有できるようになります。ときどき下記のように書かれたWBSを見ることがあります。 Webデザイン作成 ・作成 ・確認 ・修正 ・確認2 ・修正2 ・確定 しかし、これでは「Webデザイン作成」に必要な知識、さらには作業量・スケジュール・予算も分かりません。Webデザイン作成の例を続けると、下記のように「作成」のスコープを分
こんにちは! エンジニアのまうみです。 突然ですが、「今使ってるブログサービスからWordPressに引っ越ししたい」と検討中の方はいらっしゃいますか。 もし、現在のブログサービスに記事をエクスポートする機能がない場合、手作業で記事を更新する必要があります。10記事程度ならまだしも、100記事以上ともなると、それは流石に手作業では骨が折れますね。 そこで今回はGoogle Apps Script(以下:GAS)で、スクレイピングしたデータをスプレッドシートに保存するプログラムを作り方をご紹介します。 【前提】スクレイピングとは スクレイピングとは、あらかじめ指定したWebサイトを巡回して情報を取得し、新たな情報を出力するためのプログラムです。 今回は、開発環境を構築することなく簡単にプログラムを実行できるGASを使用します。特に開発環境は初心者がつまづくところなので、そこをスキップできるの
フリーのITエンジニアやWebデザイナーも国の労災保険へ加入が可能に。業務や通勤での疾病、負傷、死亡など補償。国の労働政策審議会が了承。9月から 会社員やアルバイト、パートなど雇用されている立場である労働者が、仕事や通勤を事由としたケガや病気になり、あるいは死亡した場合、いわゆる労災保険、正式には「労働者災害補償保険」による保険給付が行われます。 労災保険は国が管掌しており、労働者を一人でも雇用する会社には労働者災害補償保険法によって加入が義務付けられています。 IT業界は残念ながら長時間労働が常態化している職場が少なくありません。そしてこれに起因する過労、うつなどの精神疾患をはじめとするさまざまな労働災害が発生していることは、読者もご存じのことでしょう。 会社員やパート、アルバイトなどであれば、こうした労働災害は労災保険によって補償されます。 一方、企業とは雇用関係になく、準委任契約や受
この記事では、あまり知られていないCSSの小技20個を実例サンプルと一緒にご紹介します。 わずかなコードで実装可能なテクニックばかりで、ウェブ制作でも気軽に活用することができます。 HTMLの小技テクと一緒に活用してみてはいかがでしょう。 【HTML】知っておくと便利!短いHTMLコードで実装できる小技テク17選 そもそもCSSってなに? CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、HTMLなどのマークアップ言語で書かれた文書の表示方法を記述するためのスタイルシート言語です。CSSは、HTMLやJavaScriptと並んでWebの主要な技術です。 CSSは、レイアウトや配色、フォントなど、デザインとコンテンツを分別することを目的としています。これによって、コンテンツのアクセシビリティの向上、デザインの柔軟性やコンテンツの制御しやすさ、関連
Checka11y.cssは読み込むだけでアクセシビリティチェックを行えるCSSです。 よくあるアクセシビリティチェックツールのと同等の精度かどうかは個人的には少し懐疑的ですがCSS製とあって非常に手軽に利用できるメリットがあります。 CDNも用意されていて <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/checka11y-css@:version/checka11y.css" />上記の:versionの箇所を過去のリストから好みで選んで使ってくれ、との事でした。 OSSとしてソースコードが公開されている他、各ブラウザの拡張機能も提供してくれているようです。ライセンスはMIT。 Checka11y.css
一目瞭然。 先日開催されたGoogle I/Oにあわせ、Google スプレッドシートのタイムライン表示機能が案内されています。 有料にて提供されるGoogle Workspaceで使える、このスプレッドシートの新タイムラインビュー。画面下部のタイムラインをポチれば、それぞれのどのタスクに誰がいつ参加していたのかが、わかりやすいバーで表示されるのです。 具体的には、オーナー、カテゴリー、キャンペーンなどの属性での整理が可能。これにより、マーケティングキャンペーン、プロジェクトのマイルストーン、スケジュール、チーム間のコラボレーションなどの管理能力が強化されるとしています。 Google spreadシートといえば無機質なデータの羅列だと思っていた皆さん(私も)、もしGoogle Workspaceのユーザーならぜひこの機能を活用してみてくださいね。 Source: Google
米村歩@日本一残業の少ないIT企業社長 @yonemura2006 自分の会社をブラック企業にしてしまった失敗だらけの経営者です。その後、残業ゼロ、有給消化率100%へ。「エンジニアが幸せになれる会社とは?」が現在のテーマ。ガッキー休暇の人。株式会社アクシア代表取締役(システム開発)。ご相談等はお気軽にDMください! axia.co.jp/blog 米村歩@日本一残業の少ないIT企業社長 @yonemura2006 エンジニアが1行のソースコードを直すのに何日もかかったとして、何でたった1行直すのに何日もかかってるんだ!とキレる人は、砂漠に落ちた針を拾うのに、何で針1本拾うだけで何日もかかってるんだ!とキレるのと同じです。針が落ちてる場所が最初からわかってたら苦労しないっつーの。 2021-06-04 08:28:31
私が決めた要件通りにシステムを作ってもらいましたが、使えないので訴えます:「訴えてやる!」の前に読む IT訴訟 徹底解説(88)(1/5 ページ) 連載目次 この連載を始めて、7年になる。長くご愛読いただいている読者の皆さまに感謝の念が絶えない。このように長くIT紛争を見続けていると、同じような問題、同じような言葉に何度となくぶつかることがある。街中にある主要な交差点のように、気が付くとその場に立っていて「さて今日はどの方向へ曲がればいいか」と考える場所。そんな言葉である。 「契約の目的とシステムの要件」――IT紛争の勉強や著述などをしていると、いつもこの言葉にぶつかる。「定義されていない要件であっても、それなしには契約の目的を達成できないものであれば、事実上定義されていたと考えなければならない」「たとえ要件通りでも、契約の目的に資することのないシステムを作れば、債務不履行に問われる危険も
この記事では、あまり知られていないHTMLの小技20個を実例サンプルと一緒にご紹介します。 CSSやJavaScriptなども使わずに、わずかなHTMLコードだけで実装可能な便利テクニックで、手軽に利用できるのもポイントです。 先日紹介したCSS小技テクと一緒に活用してみてはいかがでしょう。 【CSS】知っておくと便利!短いコードで実装できるCSS小技20選 たった1行のCSS!よく見かけるWebレイアウトを実現する凄技テクニック10個 そもそもHTMLってなに? HTML(Hypertext Markup Language)は、Webブラウザで表示するための基本となる標準的なマークアップ言語です。また、CSS(Cascading Style Sheets)などの技術や、JavaScriptなどのスクリプト言語によってサポートされることもあります。 ホームページを作るときは、まずHTMLを
優秀なエンジニアか否かって話、超レアなトップ人材か否かの前に、「自分で考えて、調査して、試してみて、なぜそうでなければいけないかを説明できる」時点でかなり上位だと思っていいです 「その行動は自分で決めましたか?言われた通りにやっているだけじゃ無いですか?」と、振り返ってみましょう
CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Radius Generator CSSのborder-radius を使ってボックスや画像をユニークな形状に変化できるWebサービス。 Fancy Border Radius Generator シンプルなコードで実装可能です。 正方形の写真をCSSで変形させました 上のように正方形の写真をユニークな画像に見せることができます。 Fancy Border Radius Generator Clippy – CSS clip-path maker CSSのclip-pa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く