Works髪うねり予報のWebアプリを作りました。
うねり予報のWebアプリを作りました。今日の湿度に基づいた髪のうねり指数を表示します。 ひとまずMVP。Astroで天気のAPIを読み込んで、Github Actionsで自動更新してます。
Works
Works楽天ブックス人気書籍ランキング（漫画除外）のWebサイトを作りました
書籍ランキング上位は、だいたい漫画が占めていることが多いので、漫画を除外した人気書籍ランキングのWebサイトを作りました。楽天ブックスの総合ランキングから、漫画系ジャンルを除外した人気書籍を、毎日自動更新で紹介。ビジネス書・小説・実用書・雑...
APIホロライブ投稿カレンダー（非公式）を作りました
ホロメンのYouTube投稿のうち、直近の50件を取得して表示するカレンダーを作りました。YouTube Data APIを使用しています。ホロライブ投稿カレンダー（非公式） もっと改善したいところはあるけれど、ひとまずこの状態で様子見。い...
WorksテキストをSRTに変換するWebツールを作りました。
テキストをSRTに変換するツール入力されたテキストを一行ごとにSRT形式の字幕データに変換します。字幕の表示時間は、単純に一文字あたり0.2秒の計算です。ただし、最短でも字幕は1秒以上表示されるように設定しています。細かい調整は動画編集ソフ...
マーケティングWordPressでサイトマップが生成されない問題の解決
WordPressでサイトマップ生成用のプラグインを変えてみたら、サイトマップのURLで404エラーが出るようになりました。Yoast SEOや、XML Sitemap Generator for Google、WPデフォルトのサイトマップ...
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....