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

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

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

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

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

前回は、CSSセレクタの中でも、使用頻度の高い「基本のセレクタ」について解説してみました。 今回は、より詳細なカスタマイズのための「応用セレクタ」 を紹介したいと思います。 目次 はじめに より詳細なカスタマイズのための「応用セレクタ」 全ての要素を指定 指定要素の全ての子孫を指定 属性で指定 特定の属性を持つ要素を指定 その他の属性指定 「疑似クラス」による指定 マウスオーバー時の指定 その他の疑似クラス 「疑似要素」による指定 要素の前後をカスタム その他の疑似要素 その他のセレクタ 兄弟を指定 隣接する兄弟を指定 まとめ はじめに CSSセレクタの概要や、記事中で紹介するコードの表示確認方法などは、以下の前回記事で解説していますので、そちらを確認してください。 より詳細なカスタマイズのための「応用セレクタ」 全ての要素を指定 *記号を使って、すべての要素を指定することができます。 実

Neo4jは、最も人気のあるオープンソースのグラフデータベースです。 このシリーズでは、Dockerを使って、Neo4jを試していきたいと思います。 今回は、Dockerを使ったNeo4jのセットアップとユーザの作成について解説していきたいと思います。 目次 DockerでNeo4jを起動！ 初回ログイン！ ユーザを追加してみる！ 「system」データベースに切り替え トライアル用のユーザを追加 作成したユーザで再ログイン サンプルコード まとめ DockerでNeo4jを起動！ docker-compose.ymlを追加して、以下のような設定を追加してください。 version: '3' services: neo4j: image: neo4j restart: always ports: - 57474:7474 - 57687:7687 volumes: - ./volumes/

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

しばらく、はてなブログから離れていましたが、絶賛、復帰検討中です！ 復帰にあたり、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.