音声プレイヤー audioDicL 取説

概要

・audioDicLはPCブラウザで動作するソフトウェアです。
・プログラミング言語として html5,svg,javascript を使用しています。
・ネット接続不要でローカルPCのみで動作します。
・ローカルPC内の音声データ(mp3 ファイル)を読み込んで再生できます。
・音声区間にタグ付けすることで文字検索から任意の音声区間を再生できます。

用途・特徴

・主に語学学習者が確認

【Vue.js】要素をドラッグして動かす

※2019年ぐらいに別ブログで書いた記事のリメイク版です。

Vue.jsを使って、練習がてらHTMLの要素をドラッグして動かすやつを作った。べつにdivで作った箱でもなんでもよかったのだけれど、ちょうど最近SVGを使って作画してるので、なんとなくSVGのlineで作った×でも動かしてみることにした。

<svg @mousemove="touchmove($event)" @mouseup="t

【Vue.js】動的に要素を増やす

※だいたい3年前ぐらいに別ブログで書いてた記事のリメイク版です。

当時はjQueryからVue.jsに移行しようと勉強中で、「そもそも動的に要素を追加するにはどうすればいいんだろうか」という所で小一時間悩んだ。jQueryだと何も考えずにappend()なり使ってテキトーにやってたんだけども、Vue.jsではそもそもの考え方が違う。語弊はあるかもしれんが、内部で持ってるデータ（モデル）が表示（ビ

音声辞書開発日記 #03

音声辞書の実装(実現方法)

自分が聴きたい音声を瞬時に引きたい場合、パソコンが一番有利であると考える。意外に知られていないのが、パソコンのキー操作(キーを押すこと)はマウス操作やスマホ操作よりも速いかつ疲れにくいということ。多くの情報を扱いたい場合はキーボード操作を使いたい。

一般の人にとって、プログラミングはハードルが高いと思われているが、目的設定がしっかりとできていれば、時間をかければそれ

[Blogger #029] SVGアイコンをCSSの疑似要素に使う

SVGアイコン埋め込みを2回分に分けてBlogger 側に記事かきました。

SVG埋め込みは、以前 note で書いたんですが、CSSへはやっていなかった。HTML埋め込みはnote、CSS埋め込みはBlogger って分かれちゃうのもなんだなってんで、note 記事を焼き直しし、セットでBlogger 記事にしておきました。

何故、CSS疑似要素にSVGアイコンが必要になったのか？

記事書

ブログを更新しました✨（夫が）
駆け出しエンジニアの方にぜひ👏

FigmaでSVGを書き出してreact/typescriptでサクっと扱うSVGR
https://omameno.com/blog/figma-svg-react-typescript-svgr

[Blogger #012] SVGのアイコン埋め込み

最初、いくつかのアイコンを使うため、fontawesome を利用するようになると思う。このマガジンのシリーズだと＃003で、紹介して入れておいた。で、＃004の検索ボックスの眼鏡マーク、＃005のページトップに戻るアイコンなどで、使ってきました。

使うフォントだけ埋め込み
#010 で、更新日のスクリプトをいじくってるときに、鉛筆マークと、更新マークを埋め込むのに、SVGで埋め込んであるほう

【大体分かる！】超ざっくりPNG, JPG, SVGの違い

前書き：画像やアイコンを使うことが増えてきた

　インターネットを閲覧する際、そこにはテキスト意外にも画像やアイコンが散りばめられていることがよくあります。一昔前ならファイルの重さの関係などでテキストを多く、画像は最小限という形式も珍しくはなかったかと思いますが、近年は個人ブログなんかでも画像がバンバン出てきます（このnoteもそのうちの一つです）

（1996年のYAHOO! JAPANトップペ

#298 灰とSVG　今更聞けない３D入門

SVGのデモもあったな、SVGといえばSVGタイガー

ガオー

p5に移植するのもかなり手慣れたものになった

余裕が出てきたのでようやっとソース読む

必須ではないようだが、moduleタグの中で必要なサンプル（という名のほぼライブラリ）を読み込んでいく。大抵こういう形をしている。

<script type="module"> import * as THREE from 'http