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

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

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

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

今回は、「新型コロナウイルス 世界の感染状況」サイトに追加した機能を、簡単に紹介したいと思います。 「新型コロナウイルス 世界の感染状況」サイトは以下のページをご覧ください。 その他の「新型コロナウイルス 世界の感染状況」の機能紹介記事は、以下のページを参照してください。 目次 主な更新内容 並び替え対象の項目を色付け表示 「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の使用については、以下の記事でまとめています

今回は、はてなブログでCSSデザインを使う８つの方法 を紹介します！ はてなブログにCSSデザインを追加する方法はいくつかありますが、今回はその中でも、比較的簡単な、はてなブログの設定項目からCSSを追加する方法 を紹介します。 Googleタグマネージャーを使用した設定方法もありますが、そちらは次回記事で紹介したいと思います。 まずは、今回紹介する「はてなブログの設定項目でCSSを使う方法」で、とりあえず試してみるのがオススメです！ 目次 はてなブログにCSSの追加してみる！ CSSを追加可能な場所一覧 おすすめの設置場所 サンプルCSS（動作チェック用） 設定方法【設置場所別】 headに要素を追加 記事中 記事上 記事下 ヘッダ フッタ サイドバー デザインCSS 動作チェック サンプル投稿（動作チェック用） クラス名の指定について ブログ構成要素のカスタムについて スマホ表示でのC

今回は、付箋風ボタンをCSSで作る方法を紹介したいと思います！ 最初に、ベースとなるCSSコードを紹介した後、簡単なカスタムパターンをいくつか紹介していきます。 目次 目次 ベースコード 使い方 カスタムパターン 付箋の色を変えてみる！ 角丸表示にしてみる！ 影の度合いを調整してみる！ 影薄めバージョン 影マシマシバージョン まとめ ベースコード 付箋風のボックスは以下のようなCSSで実現することができます。 .button.tag { display: inline-block; text-decoration: none; padding: 0.5rem; background: #f7f7f7; border-left: solid 6px #58ad5a; color: #58ad5a; font-weight: bold; box-shadow: 5px 5px 5px rgba

今回は Netlify にステージング環境を追加する方法 について解説したいと思います！ Netlify では、簡単にステージング環境を追加する事ができます。 GitHub と連携する場合であれば、GitHub にステージング用のブランチを追加して、Netlify の設定ページで公開用ブランチを追加するだけでステージング環境が出来てしまします。 おまけに、デフォルトでプルリクごとのプレビューも自動で用意されている という( ﾟДﾟ)ｶﾞｸｶﾞｸ それでは、早速、Netlify にステージング環境を追加する方法を解説していきます。 目次 目次 はじめに 簡単な流れ GitHub リポジトリに staging ブランチを追加 Netlify で staging ブランチの公開設定 全てのブランチを公開する場合 個別にブランチの公開設定をする場合 ステージング用のページを確認！ プルリクのプレビ

今回は Netlify + GitHub 環境で簡単にサイトを公開する方法 について解説したいと思います！ 「 Netlify 」は静的コンテンツのホスティングサービスです。 GitHub や GitLab、Bitbucket のリポジトリに置いてある静的コンテンツを比較的簡単な設定で Web 上に公開することができます。 サイトを更新する場合も、GitHub に更新内容をプッシュするだけでサイトが更新 され、非常に便利です。 その他、公開用ブランチやディレクトリの選択が自由 だったり、無料枠の範囲で独自ドメインを設定できる など、簡単設定かつ高機能、懐にも優しいサービス内容となっています。 目次 目次 簡単な流れ 公開用の GitHub リポジトリの作成 リポジトリ作成 & クローン 公開用のブランチを作成 公開用ファイルを追加 コミット & プッシュ Netlify で公開設定 Net

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」の使い方 記事の取得 注意事

「Visual Studio Code」の「Remote Development」用のテンプレート を作ってみたので、簡単に紹介したいと思います。 主にテンプレートの使い方について解説していきます。 目次 目次 はじめに 準備 「Visual Studio Code」のインストール 「Dev Container」用の拡張機能のインストール 使い方 テンプレートコードの取得 セットアップ ベースイメージの変更 表示名の設定 .gitignore の調整 「Dev Container」の起動 うまく動かないときは 「docker-compose.extend.yml」の「command」フィールドをチェック Compose ファイルのバージョンをチェック その他のテンプレート Python 開発環境 Node.js 開発環境 C 言語開発環境 まとめ はじめに 「docker-compose.

ディープラーニングフレームワークを使ってみようと思い、人気の３つのフレームワークを比較 してみました。 今回は、比較した内容を簡単にまとめてみたいと思います！ 比較したフレームワークは以下の３つです。 PyTorch Keras TensorFlow ※ モバイルからだとグラフが表示されない事があります。上手く表示されない場合はPCからのアクセスを試してみたください。 目次 はじめに 執筆時点の比較 人気度の動向 すべての国 日本 地域別比較 すべての国 日本 最近の動向 人気度の動向 すべての国 日本 地域別比較 すべての国 日本 まとめ はじめに 執筆時点の比較と最近の動向を紹介・補足したいと思います。 最近の動向については、随時変化するため、グラフの紹介のみに留めたいと思います。 執筆時点の比較 人気度の動向 ※ 2015-06-25 ～ 2020-06-25 の地域別比較 すべての

今回は、docker-seleniumでVNCパスワードを変更する方法を紹介したいと思います。 目次 Dockerfileでイメージカスタム 起動して試してみる！ ユーザデータの永続かもしたい場合は... Docker Composeを使う場合 ユーザデータを永続化する場合 まとめ Dockerfileでイメージカスタム Dockerfileで以下のようにdocker-seleniumイメージを調整すると、VNCパスワードを変更する事ができます。 FROM selenium/standalone-chrome-debug:3.141.59-20200525 RUN x11vnc -storepasswd [your_password] /home/seluser/.vnc/passwd ※ [your_passoword]の部分は、適当なパスワードに変更してください。 起動して試してみる！