WorksテキストをSRTに変換するWebツールを作りました。
テキストをSRTに変換するツール入力されたテキストを一行ごとにSRT形式の字幕データに変換します。字幕の表示時間は、単純に一文字あたり0.2秒の計算です。ただし、最短でも字幕は1秒以上表示されるように設定しています。細かい調整は動画編集ソフ...
フロントエンド
Works
APINext.jsを使ってホットペッパーのグルメサーチAPIを表示する
今回は、Next.jsのgetServerSidePropsを使って、ホットペッパーのグルメサーチAPIを読み込んで表示させてみます。APIキーをゲットまず、リクルートWebサービスのAPIキーを発行します。新規登録ページにてメールアドレス...
APIYouTube Data APIを使って検索結果を表示する（Node.js, Express.js, React.js, TypeScript）
今回はYouTube Data APIを使って、特定のキーワードの検索結果を表示するだけのWebアプリを作ってみます。参考のためにGithubにコードを上げています。Google CloudコンソールにてAPIキーを発行する最初に、YouT...
CSSCSSで文字をパララックスで表示する
今回は、スクロールする際に文字をパララックスで表示します。JavaScriptは使わずにCSSだけ使用します。完成イメージはこんな感じです。ひらがなパララックスPure CSS Parallax Websitesというページを参考にしました...
JavaScriptHTMLとJavaScriptでドラッグアンドドロップできるリストを作る
今回は、ドラッグアンドドロップができるリストを作成します。Drag and Drop Sortable List With Javascript (Simple Example)の記事を参考にしました。完成形のGIF動画です。リストをドラッ...
CSSJavaScriptとCSSでアコーディオンメニューを作る
今回はJavaScriptとCSSでアコーディオンメニューを作っていきたいと思います。完成形はこんな感じです。アコーディオンメニューの完成形アコーディオンメニューの作成今回のファイル構成です。全部同じディレクトリにあります。- index....
CSSウェブサイトに簡単に雪を降らせるスクリプトを試す
一行のスクリプトタグを追加するだけで雪を降らせられるものがあったので試してみます。スクリプトタグはこちら。まずはHTMLとCSSでベースを作ります。いったん雪がないバージョンを作成します。雪がない、ただのHTMLとCSSソースコードは下記。...
CSSTailwindを使ってレスポンシブなお問い合わせフォームを作ってみる
今回はHTMLとTailwindを使ってお問い合わせフォームを作ってみます。完成品はこちら。Tailwindのインストールと設定Tailwind公式サイトのTailwind CLIの記述を参考にインストールをしていきます。npm(Node....
フロントエンドReact Router v6.4 でページ遷移をする
今回はReact Routerでページ遷移を行ってみます。今現在のバージョンは、6.4.5です。公式チュートリアルでviteを使っているので、viteを使ってインストールしてみます。viteを使ってReactをインストールターミナルで、np...
フロントエンドReactとReduxでNHK番組表APIを読み込む
React Reduxを使ってNHKの番組表のAPIを読み込みんでみます。今回は、NHK番組表APIの「Ｐｒｏｇｒａｍ Ｌｉｓｔ ＡＰＩ （Ｖｅｒ．２）」を利用します。Create React AppでReactとReduxをインストールま...