制作中のサイト「新型コロナウイルス 世界の感染状況」に、国名フィルタ機能を追加しました。 また、以下の調整を行いました。 設定変更ボタンのデザイン調整 機能紹介記事リストへのリンク追加 今回の記事では、追加・更新した機能を簡単に紹介したいと思います。 「新型コロナウイルス 世界の感染状況」サイトは以下のページをご覧ください。 その他の「新型コロナウイルス 世界の感染状況」の機能紹介記事は、以下のページをご覧ください 目次 「国名フィルタ」の紹介 フィルタの解除 設定変更時の動作 次回アクセス時の動作 その他の更新内容 まとめ 「国名フィルタ」の紹介 「国名フィルタ」機能を追加しました。 「国名フィルタ」の利用イメージは以下のような感じです。 国名は複数選択が可能です。 また、フィルタに国名を入力して、リストから国名を検索して選択することも可能です。 フィルタの解除 フィルタを個別に解除する

制作中のサイト「新型コロナウイルス 世界の感染状況」に、以下の機能を追加・更新しました。 グラフ表示機能の追加 トップ移動ボタンの追加 設定変更部分の調整 今回の記事では、追加・更新した機能を簡単に紹介したいと思います。 「新型コロナウイルス 世界の感染状況」サイトは以下のページをご覧ください。 その他の「新型コロナウイルス 世界の感染状況」の機能紹介記事は、以下のページをご参照ください。 目次 主な更新内容 グラフ表示機能の追加 「全ての項目」表示タイプについて 初期表示項目 表示項目の切り替え 表示項目の確認 動作が遅い場合は トップ移動ボタンの追加 設定変更部分の調整 まとめ 主な更新内容 グラフ表示機能の追加 グラフ表示機能を追加しました。 グラフ表示は「全ての項目」を表示するタイプと、「並び替え項目のみ」を表示するタイプの２つのタイプを追加しました。 「全ての項目」を表示するタイ

「新型コロナウイルス 世界の感染状況」サイトに以下の３つの機能を追加しました。 「日本比」表示モード ソート項目の先頭表示機能 設定保持機能 今回は、追加した機能について、簡単に紹介したいと思います。 「新型コロナウイルス 世界の感染状況」サイトは以下のページをご覧ください。 その他の「新型コロナウイルス 世界の感染状況」の機能紹介記事は、以下のページをご参照ください。 目次 主な更新内容 「日本比」表示モードの追加 ソート項目の先頭表示機能の追加 設定保持機能の追加 設定保持機能の注意点 まとめ 主な更新内容 「日本比」表示モードの追加 「日本比」表示モードを追加しました。 「日本比」表示モードでは以下のように各国の情報が表示されます。 表示モードを「日本比」モードに切り替える場合は、ページ上部にある、以下のボタンをクリックしてください。 以下のようなダイアログが開くので、「日本比」を選

「新型コロナウイルス 世界の感染状況」サイトに以下の３つの表示モードを追加しました。 人口比 (%) 検査数比 (%) 感染者(累計)比 (%) 今回は、追加した表示モードについて、簡単に紹介します。 「新型コロナウイルス 世界の感染状況」サイトは以下のページをご覧ください。 その他の「新型コロナウイルス 世界の感染状況」の機能紹介記事は、以下のページをご参照ください。 目次 主な更新内容 表示モードの追加 「人口比 (%)」表示モード 「検査数比 (%)」表示モード 「感染者(累計)比 (%)」表示モード まとめ 主な更新内容 表示モードの追加 以下の３つの表示モードを追加しました。 人口比 (%) 検査数比 (%) 感染者(累計)比 (%) いずれも、一部の値を除いて単位は「%」で表示しています。 また、有効数字は２桁までとしています。 ※ 有効数字２桁以降の値は四捨五入しているため、

今回は、「新型コロナウイルス 世界の感染状況」サイトに追加した機能を、簡単に紹介したいと思います。 「新型コロナウイルス 世界の感染状況」サイトは以下のページをご覧ください。 その他の「新型コロナウイルス 世界の感染状況」の機能紹介記事は、以下のページを参照してください。 目次 主な更新内容 並び替え対象の項目を色付け表示 「100万人当たり」表示モード追加 日本トップ表示 その他の更新内容 まとめ 主な更新内容 並び替え対象の項目を色付け表示 並び替えの対象に選んだ項目が色付きで表示されるように調整しました。 以下は、「感染者」を並び替えの対象に選んだ場合の表示です。 「100万人当たり」表示モード追加 100万人当たりのデータ表示モードを追加しました。 デフォルトでは「通常」表示モードとなっています。 「100万人当たり」表示モードに切り替える場合は、以下のような、ページ上部にあるモー

今回は、「新型コロナウイルス 世界の感染状況」サイトを作成したので、簡単に使い方や機能などを紹介したいと思います。 国内の感染状況については、以下のページをご覧ください 目次 使用しているデータについて 機能＆使い方の紹介 表示される情報 並び替え機能 使い方 まとめ 使用しているデータについて 以下のAPIで提供されている統計データを使用しています。 https://api.rakuten.net/api-sports/api/covid-193/details 機能＆使い方の紹介 表示される情報 表示される情報は以下の通りです。 人口 感染者(累計) 感染者 重症者 退院・療養解除 死者 検査数 100万人当たりの感染者(累計) 100万人当たりの死者 100万人当たりの検査数 各国の情報表示は以下のような感じです。 ここで、感染数、重症者はデータ更新時点での感染数、重症者です。 また

今回はCSSを使って、オシャレな折りたたみメニューを作ってみたいと思います！ 最初に、ベースとなるサンプルとコードを紹介した後、カスタムパターンをいくつか紹介していきます。 目次 はじめに ブログで使用する場合は はてなブログの場合 ベースサンプル CSSコード HTMLコード カスタムパターン 折りたたみをなしにしてみる サンプル CSSコード HTMLコード マーカーをカスタムしてみる サンプル CSSコード HTMLコード 見出しのあとの下線をカスタム サンプル CSSコード HTMLコード ひらくスピードを調整してみる サンプル CSSコード HTMLコード カスタム内容を組み合わせてみる！ サンプル HTMLコード まとめ はじめに 今回から、CSSコードを<style>タグで囲んだ形で紹介しています。 HTML記述に対応しているブログであれば、紹介しているコードをそのまま貼り付

今回はCSSを使って、振り子のようにゆれる画像を作ってみたいと思います！ 最初に、ベースとなるCSSコードを紹介した後、カスタムパターンをいくつか紹介していきます。 なるべくコピペでも使えるように構成していますので、サンプルを見て気になるものがあれば、ぜひ試してみてください！ 目次 ブログで使用する場合は はてなブログの場合 ベースコード 動作チェック カスタムパターン 画像のサイズを変えてみる！ スイングスピードをカスタムしてみる！ スイングの角度を変えてみる！ マウスオーバー時にスイングを止めてみる！ カスタム内容を組み合わせてみる！ まとめ ブログで使用する場合は ご利用のブログがHTML記述に対応している場合は、紹介するCSSを<style>と</style>で囲んで記述してください。 ※ CSS用の入力欄がある場合は<style>と</style>の囲みなしで記述してください。

今回はCSSを使って、窓のようにひらくテキストを作ってみたいと思います！ 最初に、ベースとなるCSSコードを紹介した後、カスタムパターンをいくつか紹介していきます。 なるべくコピペでも使えるように構成していますので、サンプルを見て、気になるものがあれば、ぜひ試してみてください！ 目次 ブログで使用する場合は はてなブログの場合 ベースコード 動作チェック カスタムパターン 色を変えてみる！ フォントサイズをカスタムしてみる！ フォントを変えてみる！ アニメーションのスピードを調整してみる！ ひらく角度を調整してみる！ カスタム内容を組み合わせてみる！ まとめ ブログで使用する場合は ご利用のブログがHTML記述に対応している場合は、紹介するCSSを<style>と</style>で囲んで記述してください。 ※ CSS用の入力欄がある場合は<style>と</style>の囲みなしで記述して

今回は、CSSを使って見出しにアニメーションをつけてみたいと思います！ 最初に、ベースとなるCSSコードを紹介した後、アニメーションのパターンをいくつか紹介していきます。 目次 ブログで使用する場合は はてなブログの場合 ベースコード 表示の確認 アニメーションパターン 見出しの背景色を変えてみる！ 見出しを回転させてみる！ ゲージ風のアニメーションをつけてみる！ まとめ ブログで使用する場合は ご利用のブログがHTML記述に対応している場合は、紹介するCSSを<style>と</style>で囲んで記述してください。 ※ CSS用の入力欄がある場合は<style>と</style>の囲みなしで記述してください。 HTMLコードについては、そのまま入力でＯＫです。 はてなブログの場合 以下の記事ではてなブログでCSSを使う方法をまとめています。 今回の内容をはてなブログで試す場合は、上記の

今回は、付箋風の見出しをCSSで作る方法を紹介したいと思います！ 最初に、ベースとなるCSSコードを紹介した後、簡単なカスタムパターンをいくつか紹介していきます。 目次 ブログで使用する場合は はてなブログの場合 ベースコード 使い方 カスタムパターン 付箋風見出しの色を変えてみる！ 背景色も調整してみる！ 角丸表示にしてみる！ 右側だけ(もしくは左側だけ)を角丸にしてみる！ 影の度合いを調整してみる！ まとめ ブログで使用する場合は ご利用のブログがHTML記述に対応している場合は、紹介するCSSを<style>と</style>で囲んで記述してください。 ※ CSS用の入力欄がある場合は<style>と</style>の囲みなしで記述してください。 HTMLコードについては、そのまま入力でＯＫです。 はてなブログの場合 はてなブログでのCSSの使用については、以下の記事でまとめています

静的コンテンツのホスティングサービス「 Netlify 」では、無料枠の範囲で独自ドメインの利用が可能です。 今回は Netlify に独自ドメインを設定する方法 について解説したいと思います。 目次 目次 はじめに 簡単な流れ カスタムドメインの設定 Netlify での設定 DNS 設定 サイトチェック まとめ はじめに 本記事では、以下の記事で公開したページをベースに解説を進めていきます。 Netlify + GitHub 環境で簡単にサイトを公開する方法 まだ Netlify を利用していない、または、独自ドメイン設定用のサイトがない場合は、上記のページを参考にサイトを公開してください。 簡単な流れ 本記事では、以下のような流れで解説を進めていきます。 Netlify でドメイン追加設定 DNS プロバイダで CNAME レコードを追加 サイトチェック まとめ それでは、早速、Ne

npm パッケージの公開用テンプレート を作ってみました。 本記事ではテンプレートの内容について、簡単に解説したいと思います。 以下は、2020/07/09 時点でテンプレートに含まれる内容です。 TypeScript CI/CD (publish by GitHub Actions) Jest ESLint Prettier EditorConfig husky ※ 上記以外の項目については、テンプレート中の package.json などを参考にしてください。 【目次】 テスト Jest 自動整形 ESLint Prettier editorconfig ビルド & デプロイ セットアップ package.jsonの調整 デプロイ設定 ビルドチェック デプロイ (npm publish) publish unpublish まとめ テスト Jest 以下のコマンドで、テストの実行してく

しばらく、はてなブログから離れていましたが、絶賛、復帰検討中です！ 復帰にあたり、GitHubではてなブログの記事を管理できないかと調べていた所、blogsyncというツールを使えばうまく行きそうだったので、試しに記事管理用の環境を作ってみました。 本記事では、作成した環境push-to-hatenablogのセットアップと使い方を解説したいと思います。 push-to-hatenablogの中身については、別記事で投稿予定です。 目次 目次 簡単な流れ 「blogsync」とは？ 「push-to-hatenablog」について 必要な環境 セットアップ 記事管理用のGitHubリポジトリを追加 push-to-hatenablog をクローン blogsync.yamlの追加 Secretの追加 DOMAIN BSY 「push-to-hatenablog」の使い方 記事の取得 注意事

今回は、docker-seleniumでユーザデータを永続化する方法 を紹介したいと思います。 目次 セットアップ 実際に試してみる！ まとめ セットアップ 今回は、selenium/standalone-chrome-debug:3.141.59-20200525イメージを使用して試して行きたいと思います。 selenium/standalone-chrome-debug:3.141.59-20200525イメージの場合だと、ユーザデータは/home/seluser/.config/google-chromeにあります。 Docker Composeを使う場合は、このディレクトリをvolumesでマウントしておけば、データが永続化されます。 version: '3' services: chrome: image: selenium/standalone-chrome-debug:3.1

ここのところ、Nuxt.jsを試しているのですが、PhpStorm環境でコーディングしていると、コード中にESLintからのエラーメッセージがあふれます。 敬愛するPhpStormさんなら、ReformatショートカットでESLintのフォーマットでReformatしてくれるかと期待しましたが、残念ながら適用されず。 ESLintフォーマットで調整したものをうっかりReformatしてしまうと、ESLintフォーマットが破棄されてPhpStormで設定しているフォーマットでRefomatされてしまします(´・ω・`；) なんとか、ESLintでReformatしてくれないものかと、情報を探していたら、以下のページを見つけました。 How to make WebStorm format code according to eslint? 以下、ESLintフォーマットでReformatしたい