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

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

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

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

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/

今回は、付箋風ボタンを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

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

今回は styled-components を試してみたい と思います。 ついでに、色を操作できるライブラリ chroma.js も試してみたいと思います。 styled-components と chroma.js の詳細については、以下のページを参照してください。 それでは早速、styled-components と chroma.js を試していきたいと思います。 目次 目次 Reactセットアップ 必要なパッケージのインストール 「 styled-components 」と「 chroma-js 」を試してみる src/index.tsx src/packages/Sandbox.tsx src/packages/SampleButton.tsx 実際に動かしてみる まとめ Reactセットアップ TypeScript が慣れているので、惰性で typescript テンプレートを

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 以下のコマンドで、テストの実行してく

今回は GitLab プロジェクトに GitHub リポジトリをインポートする方法 を紹介したいと思います。 大雑把な流れとしては、「 GitHub でインポート用のアクセストークンを生成 > GitLab でインポート設定」 といった流れです。 GitLab でインポート設定は GitHub で生成したアクセストークンを入力するだけなので、とくに難しい設定はありません。 目次 目次 GitHub でインポート用のアクセストークンを生成する GitLab でインポートの設定をする まとめ それでは、早速、GitLab への GitHub リポジトリのインポート方法を紹介していきたいと思います。 GitHub でインポート用のアクセストークンを生成する GitHub で右上のプロフィール画像をクリックして、Setting ページへ移動 Developer settings > Persona

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