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

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

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

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

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

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

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]の部分は、適当なパスワードに変更してください。 起動して試してみる！

今回は、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したい

以下のページに「新型コロナウイルス感染症対策サイト 全国版(非公式)」を公開しました。 ※ 主にＰＣユーザを対象としたサイトになります。モバイルからのアクセスは動作が不安定になる事があります。 ソースコードは以下のページで公開しています。 開発者向けの情報やサイト構築における行動原則などは本家リポジトリであるtokyo-metropolitan-gov/covid19を参照してください。 目次 目次 はじめに 機能紹介 「絞り込み」機能 グラフ＆テーブルリスト 検査・陽性者の状況 検査・陽性者の前日比 陽性患者数 検査実施数 退院者数 死者数 陽性患者の属性 はじめに 主にＰＣユーザを対象としたサイトになります。 モバイルからのアクセスは、動作が不安定になる事があります。 また、データが多いため、表示に時間がかかります。 あらかじめ、ご了承お願いいたします。 機能紹介 「絞り込み」機能 居