mlog

備忘録とかメモとか

【Next.js】環境変数(.env)の使い方【公式ドキュメント 意訳】

【Next.js】環境変数(.env)の使い方【公式ドキュメント 意訳】

今回は Next.js で環境変数(.env)を使う方法 を解説したいと思います。

今回は、以下の 公式ドキュメントの環境変数の解説ページを参考に、Next.jsでの環境変数(.env)の使い方について、簡単に解説していきたいと思います

おおよそ、上記ページの流れに沿って、解説を進めていきます。

続きを読む

「新型コロナウイルス感染症対策サイト 全国版(非公式)」を公開しました

「新型コロナウイルス感染症対策サイト 全国版(非公式)」を公開しました

以下のページに「新型コロナウイルス感染症対策サイト 全国版(非公式)」を公開しました。

※ 主にPCユーザを対象としたサイトになります。モバイルからのアクセスは動作が不安定になる事があります。

ソースコードは以下のページで公開しています。

開発者向けの情報やサイト構築における行動原則などは本家リポジトリであるtokyo-metropolitan-gov/covid19を参照してください。

続きを読む

Netlify 向けデプロイテンプレートの中身を解説!

Netlify 向けデプロイテンプレートの中身を解説

今回は、前回紹介した Netlify 向けデプロイテンプレート の中身について解説していきたいと思います。

テンプレートの使い方については、前回記事を参照してください。

目次

  • 目次
  • 簡単な流れ
  • はじめに
  • ディレクトリ構成
  • 主要ファイルの解説
    • src/index.html
    • build.sh
    • デプロイ用のワークフロー設定ファイル
      • production.yml
      • staging.yml
      • pull-req-preview.yml
      • templates/deploy-preview.yml (optional)
  • Netlify「 deploy-preview 」機能の使用について
    • 試したこと、あれこれ (またはカスタム用メモ)
      • pre-commit
      • pre-push
      • 手動ビルド
      • 最終兵器「使わない」
      • 結論
      • その他のメモ
  • まとめ
続きを読む

Netlify向けのデプロイテンプレートを作ってみました! 【ステージング、プルリクプレビュー対応】

Netlify 向けのデプロイテンプレートを作ってみました! 【ステージング、プルリクプレビュー対応】

Netlify 向けのデプロイテンプレート を作ってみました。

今回は、作成したテンプレートの使い方などを解説していきたいと思います。

ステージング環境やプルリクのプレビューにも対応 しています。

Template repository に設定してあるので、そのままテンプレートとして使えます。

環境に合わせて、適当に調整して使ってください。

続きを読む

【Docker】curl コマンド専用のDockerイメージを作ってみました

curl コマンド専用の Docker イメージを作ってみました

CI 環境で curl コマンドを使いたかったので、curl コマンド専用の Docker イメージ を作ってみました。

シンプルなものですが、せっかくなので、作成したイメージを簡単に紹介したいと思います。

作成したイメージの詳しい内容は、以下のページを確認してください。

mm78/curl - Docker Hub

目次

  • 目次
  • 前提条件
  • 使い方
  • イメージの中身
続きを読む

【GCP】Cloud SchedulerからCloud Runを起動してみる

Cloud Scheduler から Cloud Run を起動してみる

今回は Cloud Scheduler から Cloud Run を起動して みたいと思います!

目次

  • 目次
  • Cloud Run サービスの起動用サービスアカウントを作成
  • Cloud Scheduler ジョブを作成する
    • コンソールから作成する場合
    • gcloudを使って作成する場合
  • 動作確認
  • まとめ
続きを読む

【GCP】Cloud TasksからCloud Runを起動してみる

Cloud TasksからCloud Runを起動してみる

今回は Cloud Tasks から Cloud Run を起動 してみたいと思います!

記事の最後には、Cloud Pub / Sub や Cloud Scheduler との違いや、使いどころなどについて、簡単にまとめてみたいと思います。

目次

  • 目次
  • Cloud Run サービスの起動用サービスアカウントを作成
  • タスクキューの作成
  • HTTP タスクの作成
    • タスク作成コード
    • タスク作成
    • 動作確認
  • 補足メモ
    • Cloud Pub / Sub との違い
    • Cloud Scheduler との違い
  • まとめ
続きを読む

【GCP】Cloud Run サービス起動用のサービスアカウントを作成する

Image from Gyazo

Cloud Pub / Sub や Tasks、Scheduler など、他の GCP サービスから Cloud Run サービスを起動したいことがあります。

そのような場合、対象サービスの起動権限をもったサービスアカウントが必要になります。

今回は、Cloud Run サービス起動用のサービスアカウント の作成について解説していきたいと思います!

目次

  • 目次
  • サービスアカウントを作成
  • Cloud Run サービスの呼び出し権限を付与
  • 設定の確認
    • 追加したアカウントのチェック
    • 付与した権限のチェック
  • まとめ
続きを読む

【GCP】Cloud Pub/SubとCloud Runを連携してみる

Image from Gyazo

今回は Cloud Pub / Sub と Cloud Run を連携する方法 を解説していきたいと思います!

以下の公式チュートリアルを参考に、Cloud Pub / Sub と Cloud Run の連携を試していきたいと思います。

目次

  • 目次
  • 簡単な流れ
  • 使用する変数を解説
  • デフォルト設定
  • Pub/Sub トピックを作成する
  • サンプルコードを取得
  • コードの内容
    • Dockerfile
    • index.js
    • app.js
  • デプロイ
  • Pub / Sub と Cloud Run の連携設定
    • 参考ページ
  • Pub / Sub サブスクリプション作成
  • 動作確認
  • 後始末
  • まとめ
続きを読む

【GCP】Cloud Pub/SubとCloud Functionsを連携してみる

Cloud Functions + Cloud Pub / Sub

Cloud Functions + Cloud Pub / Sub のチュートリアルを試してみたので、簡単にまとめてみます。

目次

  • 目次
  • サンプルのダウンロード
  • 関数のデプロイ
  • メッセージの送信
  • 後始末
  • まとめ
続きを読む

【GCP】Cloud Build + Cloud Run を使ってみた感想

Image from Gyazo

Cloud Run を試してみたので、簡単にまとめておきたいと思います。

主に、自分用の備忘録目的の記事です。

目次

  • 目次
  • 試してみた内容
  • 使ってみた感想とまとめ (主に Cloud Run )
続きを読む

人気どころのNode.jsバージョン管理ツールを比較 / nvm, n, nvm-windows, nave, nodist

Image from Gyazo

今回は、人気どころの Node.js のバージョン管理ツールを比較 したいと思います。

少し前に Node.js のバージョン管理ツールの比較をしたので、今回は、その時の内容を簡単にまとめたいと思います。

目次

  • 目次
  • はじめに
  • 人気度の動向 ( 2011/01/01 - 2020/04/30 )
    • すべての国
    • 日本
  • 地域別のインタレスト ( 2019/04/30 - 2020/04/30 )
    • すべての国
  • まとめ
    • おまけ / 最近の動向
      • 直近12ヶ月の状況 / すべての国
        • 人気度の動向
        • 地域別のインタレスト
      • 直近5年間の状況 / すべての国
        • 人気度の動向
        • 地域別のインタレスト
続きを読む

Markdownの画像に枠線をつける4つの方法

Image from Gyazo

今回は Markdown の画像に枠線をつける4つの方法 について解説したいと思います!

以下の4つの方法について解説していきます。

  • テーブルを利用する方法
  • style タグを利用する方法
  • style 属性を利用する方法
  • 外部 CSS ファイルを読み込む方法

また、それぞれの方法について、Visual Studio Code のプレビュー、Qiita、はてなブログでの対応状況も添えて紹介していきたいと思います。

目次

  • 目次
  • テーブルを利用する方法
    • 参考記事
  • styleタグを利用する方法
  • style属性を利用する方法
  • 外部 CSS ファイルを読み込む方法
  • まとめ
続きを読む

新型コロナウイルス情報まとめ

新型コロナウイルス情報まとめ

随時情報追加。主に関連リンクなど

Maps

日本

都道府県別新型コロナウイルス感染者数マップ

東京都 新型コロナウイルス感染症対策サイト

「東京都 新型コロナウイルス感染症対策サイト」の派生サイト

新型コロナウイルス感染症対策サイト 全国版

世界

新型コロナ感染 世界マップ:日経新聞

ICAO Coronavirus 3DFX dispersion

Coronavirus COVID-19 Global Cases by Johns Hopkins CSSE

Novel Coronavirus (COVID-19) Situation

Novel Coronavirus (COVID-19) Common Operational Picture

中国

新型コロナ感染 中国マップ:日経新聞

新型冠状病毒肺炎疫情分布

全国疫情地图

香港

Latest Situation of Coronavirus Disease (COVID-19) in Hong Kong

韓国

국내외 코로나19 발생 현황 대시보드

フィリピン

COVID-19 Philippine Cases

イタリア

COVID-19 outbreak in Italy

お願い

便利なサイトや情報があれば、コメントから追加リクエストしてもらえると、ありがたいです。

確認の上で、その都度追加していきます。

矩形、正方形、円形に画像を切り取って表示するmixin (レスポンシブ対応)

f:id:hiro0164:20180216025135p:plain

毎回、切り取り画像をcssで記述するのがめんどうなので、mixin化しました。

コードは以下の通り。

続きを読む