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

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

Docker を使った、ローカル環境用の MongoDB テンプレート を作ってみたので、簡単に紹介したいと思います！ 2020/07/16 時点でテンプレートに含まれる内容は以下の通りです。 MongoDB Mongo Express 定期バックアップ用コンテナ MongoDB コンテナの設定にはデータの永続化設定も含んでいます。 目次 目次 はじめに ベース ファイル構成 docker-compose.yml .env.template .docker/dind-cron/Dockerfile まとめ はじめに 紹介するテンプレートでは Docker Compose の使用を前提にしています。 Docker Compose がインストールされていない場合は、テンプレートは使用できませんので、予めご了承ください。 ベース 以下の Docker Official Images の Mong

今回からは、JavaScript(TypeScript)を使って指定のPersonのリレーションを検索・表示する簡易アプリを作成していきたいと思います。 アプリの作成を通して、JavaScriptとNeo4jの連携について解説していきたいと思います。 今回の記事では、JavaScriptとNeo4jの連携環境のセットアップし、ターゲット選択用のセレクタを実装していきます。 ターゲット選択用のセレクタには、対象候補の自動補完機能も実装したいと思います。 ↓ 「Dockerで試すNeo4j」シリーズ記事一覧はこちら 目次 はじめに 注意事項 構成 React+TypeScript環境をインストール 必要なパッケージをインストール 環境変数を定義 型定義 Neo4jドライバを取得 全ての「Person」ノードを取得 ターゲット選択用のセレクタを追加 仕上げ 動作確認 サンプルコード まとめ はじ

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を参照してください。 目次 目次 はじめに 機能紹介 「絞り込み」機能 グラフ＆テーブルリスト 検査・陽性者の状況 検査・陽性者の前日比 陽性患者数 検査実施数 退院者数 死者数 陽性患者の属性 はじめに 主にＰＣユーザを対象としたサイトになります。 モバイルからのアクセスは、動作が不安定になる事があります。 また、データが多いため、表示に時間がかかります。 あらかじめ、ご了承お願いいたします。 機能紹介 「絞り込み」機能 居

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

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

今回は 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 テンプレートを

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