mlog

備忘録とかメモとか

簡単セットアップ!Netlifyにステージング環境を追加する方法

Image from Gyazo

今回は Netlify にステージング環境を追加する方法 について解説したいと思います!

Netlify では、簡単にステージング環境を追加する事ができます。

GitHub と連携する場合であれば、GitHub にステージング用のブランチを追加して、Netlify の設定ページで公開用ブランチを追加するだけでステージング環境が出来てしまします

おまけに、デフォルトでプルリクごとのプレビューも自動で用意されている という( ゚Д゚)ガクガク

それでは、早速、Netlify にステージング環境を追加する方法を解説していきます。

目次

  • 目次
  • はじめに
  • 簡単な流れ
  • GitHub リポジトリに staging ブランチを追加
  • Netlify で staging ブランチの公開設定
    • 全てのブランチを公開する場合
    • 個別にブランチの公開設定をする場合
  • ステージング用のページを確認!
  • プルリクのプレビューチェックもできる!
  • まとめ
続きを読む

Netlify に独自ドメインを設定する方法

Image from Gyazo

静的コンテンツのホスティングサービス「 Netlify 」では、無料枠の範囲で独自ドメインの利用が可能です。

今回は Netlify に独自ドメインを設定する方法 について解説したいと思います。

目次

  • 目次
  • はじめに
  • 簡単な流れ
  • カスタムドメインの設定
    • Netlify での設定
    • DNS 設定
    • サイトチェック
  • まとめ
続きを読む

Netlify + GitHub 環境で簡単にサイトを公開する方法

Image from Gyazo

今回は Netlify + GitHub 環境で簡単にサイトを公開する方法 について解説したいと思います!

「 Netlify 」は静的コンテンツのホスティングサービスです。

GitHub や GitLab、Bitbucket のリポジトリに置いてある静的コンテンツを比較的簡単な設定で Web 上に公開することができます。

サイトを更新する場合も、GitHub に更新内容をプッシュするだけでサイトが更新 され、非常に便利です。

その他、公開用ブランチやディレクトリの選択が自由 だったり、無料枠の範囲で独自ドメインを設定できる など、簡単設定かつ高機能、懐にも優しいサービス内容となっています。

目次

  • 目次
  • 簡単な流れ
  • 公開用の GitHub リポジトリの作成
    • リポジトリ作成 & クローン
    • 公開用のブランチを作成
    • 公開用ファイルを追加
    • コミット & プッシュ
  • Netlify で公開設定
    • Netlify に登録
    • サイトの公開
      • Netlify のインストール
      • 公開リポジトリの選択
        • 公開したいリポジトリが表示さない場合は...
      • デプロイ設定
        • 公開するブランチの選択
        • 公開用ディレクトリの設定
        • サイト公開
  • 公開サイトの確認
  • 内容の変更チェック
  • 公開URLの調整
  • まとめ
続きを読む

【React】styled-components を試してみる!

styled-components を試してみる!

今回は styled-components を試してみたい と思います。

ついでに、色を操作できるライブラリ chroma.js も試してみたいと思います

続きを読む

npmパッケージの公開用テンプレートを作ってみました | with TypeScript, Jest, ESLint, Prettier, etc.

npmパッケージの公開用テンプレートを作ってみました | with TypeScript, Jest, ESLint, Prettier, etc.

npm パッケージの公開用テンプレート を作ってみました。

本記事ではテンプレートの内容について、簡単に解説したいと思います。

以下は、2020/07/09 時点でテンプレートに含まれる内容です。

  • TypeScript
  • CI/CD (publish by GitHub Actions)
  • Jest
  • ESLint
  • Prettier
  • EditorConfig
  • husky

※ 上記以外の項目については、テンプレート中の package.json などを参考にしてください。

続きを読む

【GitLab】GitHubリポジトリをGitLabプロジェクトにインポートする方法

Image from Gyazo

今回は GitLab プロジェクトに GitHub リポジトリをインポートする方法 を紹介したいと思います。

大雑把な流れとしては、「 GitHub でインポート用のアクセストークンを生成 > GitLab でインポート設定」 といった流れです。

GitLab でインポート設定は GitHub で生成したアクセストークンを入力するだけなので、とくに難しい設定はありません。

目次

  • 目次
  • GitHub でインポート用のアクセストークンを生成する
  • GitLab でインポートの設定をする
  • まとめ
続きを読む

【VS Code】Remote Development テンプレートを作ってみました!

VS CodeのRemote Developmentテンプレートを作ってみました!

「Visual Studio Code」の「Remote Development」用のテンプレート を作ってみたので、簡単に紹介したいと思います。

主にテンプレートの使い方について解説していきます。

続きを読む

人気のディープラーニングフレームワーク3つを比較 / PyTorch, Keras, TensorFlow

人気のディープラーニングフレームワーク3つを比較 / PyTorch, Keras, TensorFlow

ディープラーニングフレームワークを使ってみようと思い、人気の3つのフレームワークを比較 してみました。

今回は、比較した内容を簡単にまとめてみたいと思います!

比較したフレームワークは以下の3つです。

  • PyTorch
  • Keras
  • TensorFlow

※ モバイルからだとグラフが表示されない事があります。上手く表示されない場合はPCからのアクセスを試してみたください。

続きを読む

PhpStorm(またはWebStorm)でESLint設定でリフォーマットしたい時の設定メモ

Image from Gyazo

ここのところ、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したい時の対処法です。

ESLintの設定

ESLintの設定をしていない場合は、ESLintの設定をする。

  1. 設定を開いて、Preferences > Language & Frameworks > JavaScript > Code Quality Tools > ESLintを開く。
  2. ESLintの設定がDisable ESLintの場合は、Automatic ESLint configurationに設定するか、Manual ESLint configurationで手動設定する 。

Image from Gyazo

ショートカットの設定

Reformat Codeに設定されているショートカットキー(Windowsの場合はCtrl+Alt+L)をFix ESLint Problemsに変更します。

  1. 設定を開いて、Preferences > Keymapを開く
  2. Keymap設定内の検索でeslintで検索
  3. Fix ESLint Problemsを右クリックしてAdd Keyboard Shortcutを選択
  4. Ctrl+Alt+Lを設定
  5. Reformat Codeのショートカットの削除確認メッセージが表示されるので、Removeを選択。

Image from Gyazo

まとめ

まだ、設定してからそれほど時間がたっていませんが、とりあえず、ショートカット1つであふれかえるエラーが一瞬で消えるのは気持ちがいいです(੭ु´・ω・`)੭ु⁾⁾

Next.js テンプレートを作ってみました | with TypeScript, Jest, Cypress, Sentry, GTM, ESLint, etc.

Next.js テンプレートを作ってみました / with TypeScript, Jest, Cypress, Sentry, GTM, ESLint, etc.

Next.js 用のテンプレート を作ってみたので、テンプレートの内容について、簡単に解説したいと思います。

2020/06/02 時点でテンプレートに含まれる内容は以下の通りです。

  • Next.js
  • TypeScript
  • Googleタグマネージャー
  • CI/CD (GitHub Actions + Netlify)
  • Jest (+ Enzyme)
  • Cypress
  • ESLint
  • Prettier
  • stylelint
  • EditorConfig
  • husky
  • Material-UI
  • styled-components
  • Sentry

※ 上記以外の項目については、テンプレート中の package.json などを参考にしてください。

続きを読む

Googleアナリティクスがうまく動かなかったときのメモ

Googleアナリティクスがうまく動かなかったときのメモ

「Google アナリティクス」を使おうと思ったら、うまく動かなかったので、その時の対応をメモとして残したいと思います。

続きを読む

はてなブログ記事のGitHub管理環境「push-to-hatenablog」のセットアップと使い方

はてなブログ記事のGitHub管理環境「push-to-hatenablog」のセットアップと使い方

しばらく、はてなブログから離れていましたが、絶賛、復帰検討中です!

復帰にあたり、GitHubではてなブログの記事を管理できないかと調べていた所、blogsyncというツールを使えばうまく行きそうだったので、試しに記事管理用の環境を作ってみました。

本記事では、作成した環境push-to-hatenablogのセットアップと使い方を解説したいと思います。

push-to-hatenablogの中身については、別記事で投稿予定です。

目次

簡単な流れ

まずは、push-to-hatenablogと、その中で使用しているblogsyncについて簡単に紹介したいと思います。

その後、push-to-hatenablogのセットアップ方法と使い方について解説していきたいと思います。

「blogsync」とは?

はてなの中の人が公開されている、はてなブログ用のCLIクライアントです。

はてなブログで提供されているAtomPub APIをラップして、はてなブログの記事を投稿、更新、取得をコマンドラインから行えるツールです。

詳細は以下のリポジトリを参照してください。

「push-to-hatenablog」について

今回紹介するpush-to-hatenablogでは、ローカル環境でDockerを使って、はてなブログ記事の取得と新規投稿を行います。

また、記事管理用のGitHubリポジトリを作成し、GitHubアクションを使って、編集・プッシュされた記事の更新を行います。

必要な環境

  • Docker
  • docker-compose

セットアップ

記事管理用のGitHubリポジトリを追加

それでは、早速、はてな記事の管理環境をセットアップしていきます。

まずは、記事管理用のGitHubリポジトリを追加してください。

push-to-hatenablog をクローン

以下のリポジトリをクローンして、リモートリポジトリを記事管理用に作成したリポジトリに変更するか、クローンしたファイルをローカルリポジトリに移動・設置してください。

blogsync.yamlの追加

blogsyncの設定ファイルblogsync.yamlを追加します。

ここで追加する設定ファイルは、ローカル環境から新規記事を投稿するときに使用します。

blogsync.example.yamlのファイル名をblogsync.yamlに変更してください。

blogsync.example.yamlの中身は以下の通りです。

[ブログのドメイン名]:
  username: [ユーザ名]
  password: [AtomPubのAPIキー]
default:
  local_root: entries

[ユーザ名]には、はてなアカウントのユーザ名を設定してください。

[AtomPubのAPIキー]には、はてなブログ管理ページの設定/詳細設定/AtomPubにあるAPIキーを設定してください。

blogsync.yamlのより詳しい内容は、以下のページを参照してください。

x-motemen/blogsync #Configuration

Secretの追加

記事の更新には、GitHubアクションを利用します。

ワークフロー中で必要になるSecretを設定していきます。

※ Secretsの設定は、追加したGitHubリポジトリページのSettings/Secretsから設定できます。詳細は以下のページを参考にしてください。

記事の更新時に以下の2つのSecretが必要となりますので、GitHubリポジトリに追加してください。

DOMAIN

DOMAINという名前のSecretを追加してください。値にはブログのドメイン名を設定してください。

BSY

BSYという名前で以下のような値のSecretを追加してください。

[ブログのドメイン名]:\n
  username: [ユーザ名]\n
  password: [AtomPubのAPIキー]\n
default:\n
  local_root: entries

ワークフロー中でblogsyncの設定ファイルを生成するために使用します。

ローカル用のblogsync.yamlとほぼ同じ内容ですが、各行の最後に改行コード\nを追加してあります。

ローカル用のblogsync.yamlと同様に、[ブログのドメイン][ユーザ名][AtomPubのAPIキー]を書き換えたものをSecretの値に設定してください。

「push-to-hatenablog」の使い方

記事の取得

既にはてなブログに投稿済みの記事をローカル環境にダウンロードするには、以下のコマンドを実行してください。

docker-compose run --rm blogsync pull ${domain}

${domain}にはブログのドメイン名を指定してください。

注意事項

記事取得はmasterブランチで行うようにしてください。

記事の取得前に使用中のブランチがmasterブランチであるか確認し、ブランチがmaster以外の場合はmasterブランチに切り替えてください。

はてなブログの更新はmasterブランチからの差分ファイルを対象としています。 masterブランチをプッシュした場合は、差分ファイルがないため更新処理が行われません。

逆に、masterブランチを利用する事で更新処理を回避することもできます。

記事数が多いと、はてなブログの更新に時間がかかります。 また、記事の取得処理で取得した記事については更新の必要がないので、記事の取得はmasterブランチで行い、記事の更新処理を回避するようにしてください。

特に初回の記事取得など、記事の取得数が多い場合はmasterブランチで取得するようにしてください。

新規記事の投稿

新規記事を投稿するには以下のコマンドを実行してください。 以下のコマンドにより、はてなブログとローカル環境に記事の下書きが追加されます。

docker-compose run --rm blogsync post --title=draft --draft --custom-path=${path} ${domain} < draft.md

${domain}にはブログのドメイン名を指定してください。

${path}には記事のパスを指定してください。
例: it/javascript/react-introduction

${path}に設定した記事のパスは、公開後の記事のパスに反映されます。
また、ローカル環境に追加される編集用ファイルのパスに対しても、${path}に設定した内容が反映されます。

記事の更新

編集した記事ファイルをGitHubへプッシュすると、GitHubアクションの更新ワークフローによって、はてなブログの記事が更新されます。

GitHubアクションのワークフロー設定の内容は以下を確認してください。

mm0202/push-to-hatenablog/.github/workflows/push.yml

注意事項

記事の編集前にブランチをmaster以外のブランチに切り替えてください。

その際、masterブランチからの差分ファイルが更新対象となりますので、記事の編集はmasterブランチ以外で行う必要があります。

まとめ

以上、push-to-hatenablogのセットアップと使い方について解説しました。

私自身も使い始めたばかりですが、そこそこいい感じに使えそうな気がします。
しばらく使ってみて投稿・更新フローが固まってきたら、使用例の紹介記事を書きたいと思います。

また、近いうちにpush-to-hatenablogの中身についての解説記事も投稿予定です。

動作不良や、問題点・疑問点など有りましたら、コメントより指摘していただけると助かります!

React + Cypress で「Timed out retrying: `cy.type()` failed because this element is detached from the DOM.」みたいなエラーが出たときの対処法

React + Cypress で「Timed out retrying: `cy.type()` failed because this element is detached from the DOM.」みたいなエラーが出たときの対処法

React + Cypress で、テキストエリアへの入力チェックを使用としたところ、以下のようなエラーが発生しました

Timed out retrying: `cy.type()` failed because this element is detached from the DOM.

今回は上記のようのエラーが発生した場合の対処方について解説したいと思います。

続きを読む