ツール・サービス | Change Of Pace

情報整理から記録まで、Notionを活用してみる

Fri, 27 Nov 2020 00:00:00 GMT

会社を辞めて、現在療養中のよしです。療養する最中、身辺整理といいますか、いろんな情報を整理・集約したいなという思いが出てきました。そこで、以前から存在を知っていたものの、全然活用できていなかった Notion を活用してみました。

import ImageWrapper from "@/components/ImageWrapper.astro" import OG from "@/components/OG.astro"

Notion とは？

「All-in-one workspace」とあるように、実に幅広い機能を備えているサービスです。例として、メモ・ノート機能、タスク管理、データベース管理など。

従来これらの機能は、それぞれに特化したサービスやアプリを組み合わせて使われてきたのではないでしょうか。 Notion を使えば、それを Notion ひとつに集約させることができます。

Web アプリだけでなく、デスクトップアプリ、iOS/Android アプリも用意されており、それぞれのプラットフォームで行われた編集は同期されます。

Notion の基本

ワークスペース

Notion の基本構造としては、まずワークスペースを作成し、その中にページを作成していくようになっています。

ページ

ページは新規作成すると、まっさらなページが作られます。メモ書きするもよし、ドキュメントを書くもよし。豊富に用意されているテンプレートを使用するもよし。

マークダウンが使えるので、多くのエンジニアの方にとってはとっつきやすいのではないかと（一部使えない記法や、違う使い方になっているものもあります。）

/からショートカットを呼び出して、マークダウン要素をはじめとした、後述するブロック要素の挿入もできます。

ページに他のページを紐づけたり、階層構造にしたり。よく使うページはサイドバーに追加もできます。

自分のワークスペースのサイドバー <ImageWrapper className="w-[30%]" src="screenshots/2020/notion-introduction/notion-sidebar.png" alt="Notion 自分のワークスペースのサイドバー表示" />

ブロック

h1～h3 をはじめとしたマークダウン要素、画像など、ページ内を構成する要素はブロックとなります。

このブロック単位で、ドラッグ & ドロップで移動させられたり、文字色や背景色を変えたり、削除したりということが可能です。

簡単な例 <ImageWrapper className="w-[80%]" src="screenshots/2020/notion-introduction/notion-page-block.png" alt="Notion ページとブロックの図" />

基本的には上から下への流れですが、ブロックをブロックの右隣に移動させて横並びになんかもできたりします。

それと、ブロックの一種としてデータベースの存在があります。これはページ情報を集約してデータとして扱い一覧表示するようなもので、表示方法の種類は執筆時現在、以下の6つです。

（スクショは Notion Template Gallery より） <OG url="https://www.notion.so/ja-jp/templates" />

Table <ImageWrapper className="w-[80%]" src="screenshots/2020/notion-introduction/notion-table.png" alt="Notion Table表示の例" />

Board <ImageWrapper className="w-[80%]" src="screenshots/2020/notion-introduction/notion-board.png" alt="Notion Board表示の例" />

List <ImageWrapper className="w-[80%]" src="screenshots/2020/notion-introduction/notion-list.png" alt="Notion List表示の例" />

Calendar <ImageWrapper className="w-[80%]" src="screenshots/2020/notion-introduction/notion-calendar.png" alt="Notion Calendar表示の例" />

Gallery <ImageWrapper className="w-[80%]" src="screenshots/2020/notion-introduction/notion-gallery.png" alt="Notion Gallery表示の例" />

Timeline <ImageWrapper className="w-[80%]" src="screenshots/2020/notion-introduction/notion-timeline.png" alt="Notion Timeline表示の例" />

ちなみにこの表示方法は、どれか1つのみだけ使用ということでなく、同じデータをもとに複数の表示方法を併用して切り替えるということができます。

また、同じ表示方法であっても、検索条件のフィルターの有無などで使い分けることも可能です。

Notion の基本概念はこんな感じで、使ってみるとわかるのですが、割と自由にいろんなことができます。

自由ゆえに使い方を悩む場合は、用意されている公式のテンプレートや他のユーザの方が公開しているテンプレートを参考にすると、面白いアイデアが浮かぶやもしれません。

料金プランはありますが、フリー（Personal）プランでも出来ることは多いので、まずは使ってみてはいかがでしょう？（以前のフリープランではブロック数の制限がありましたが、2020年5月にその制限がなくなりました）

自分の活用方法

日々の記録

※フルページキャプチャの都合で、日記のテーブル上部に集計行がかぶってますが、本来はテーブル下部に追従する形であります。 <ImageWrapper className="w-[80%]" src="screenshots/2020/notion-introduction/dashboard.png" alt="Notion 日々の記録ページ" />

毎日開く自分用のダッシュボード的なページで、月ごとに作成する想定です。

Twitter でこちらの方の記事を見かけて、すごくいいなーと思い、思いっきり真似させていただきました。ありがとうございます🙇

他にもいろんな Notion の使い方を紹介されていて、とても参考にさせていただきました。 <OG url="https://blog.35d.jp/2020-06-30-notion-matome" />

ちなみにこの記事の作者様から、リアクションをいただいて嬉しかったです！

<blockquote class="twitter-tweet"> <p lang="ja" dir="ltr">素敵です！👏 <a href="https://t.co/4PGnRF02qJ">https://t.co/4PGnRF02qJ</a> </p>— Yuji Tsuburaya (@___35d) <a href="https://twitter.com/___35d/status/1323579665269678082?ref_src=twsrc%5Etfw">November 3, 2020</a> </blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

さらっと中身を説明すると、こんな感じです。

テーマ：今年のテーマと今月テーマをいつでも見られるように
生活ルーティン：日々行うことのメモ
運勢：某占いの開運3か条（これを気にかけて、何かいいことあればラッキー）
今月やること：ふわっとやること管理
天気予報：参考記事そのままのお天気ウィジェット
日記：
- Date：日付
- Highlight：その日あったことのハイライト
- Weather：天気
- Condition：朝昼夜の体調
- Stepper：ステッパーで運動したか
- EMS：EMS（低周波電流）でマッサージしたか
- Sunbath：外で陽にあたったか
- Medicine：常用薬以外に服用した薬
- diary：簡単な日記

現在は会社を退職して療養中の身であるため、体調に関連する事項が多めですね。

日々の体調を記録して、体調の傾向を分析しようかなぁとか。精神疾患に対して、運動や陽に当たることが効果的と聞くけどどうなのか？とか。

あとは単純に日々の振り返りができるというのもありますね。これまで iPhone のメモ帳アプリに簡単な日記はつけてましたが、Notion に移行してより振り返りやすくなりました。こうして日記部分見ると、病んでますねぇ（苦笑）

このページの内容に関しては、特に試行錯誤をして日々アップデートしていこうと思っています。（今月色々試すつもりが、気力の落ちた期間が続き、あまりできてないのはここだけの話...）

ドキュメント下書き・メモ

技術記事・ドキュメントの下書きやメモを集約したページです。特に変わったことはしていません。

これまで記事執筆は VSCode でやっていましたが、これからは Notion でざっと下書きをして、VSCode で手直しをしようかなと思っています。

参考書一覧

持っている本のページ <ImageWrapper className="w-[80%]" src="screenshots/2020/notion-introduction/books.png" alt="Notion 持っている本ページ" />

主に技術本のギャラリーページです。現在持っている本と、気になっている本の情報を整理しておきたかったので作りました。

本のページに画像をいれておくと、ギャラリー表示へ切り替えた時に表示してくれるので、表紙の画像をいれてあります。画像のどの部分を表示するかも決められるので、調整しておくと見栄えよくできていいですね。

表示している日付は、出版日です。出版されてから日が経ってるのにまだ読んでないの？という、積読へのちょっとした圧です(笑)

リンク集

リンク集の一部抜粋 <ImageWrapper className="w-[80%]" src="screenshots/2020/notion-introduction/links-example.png" alt="Notion リンク集ページ一部抜粋" />

元々、各種ブラウザや Twitter のブックマークを集約するべく作ったページです。 Notion に集めておけば、PC・スマホどちらからもアクセスできますからね。

技術やサービスの公式サイトから、ちょっとした Tips 記事やツイートまで、いろんな情報のリンク集です。

１つのテーブルに全てを集約するのはさすがに大変なので、ざっくりとしたジャンル分けをしています。設計とかデザイン、言語ごととか、割とテキトーですが...。それぞれでテーブルを作って整理してます。

開発フロー

このページはまだ構想程度なので、スクショはなしで。個人開発をする上での、自分なりの開発フローテンプレートのようなものを作れたらいいなと思っています。

一言で開発と言っても実際にサービスやアプリケーションを作るとするなら、企画～要件定義～設計～実装～テスト～運用と、やることはたくさんあります。（ちょっと作ってみた程度なら、必ずしもかっちりとやる必要はないとでしょうが...）

やることたくさんありすぎて、どこから手を付けたらいいかわからないを防ぐとか。最低限気をつけるべきことを忘れないようにするとか。

あとは、開発の流れをちゃんと身につけたいとか。自分は Web プログラマーとして、約3年ほどの経験ですが、上流工程は正直あまり経験がありません。それってどうなの？やばくない？という危機感みたいなものもあり。

そういった思いから、構想中です。

とはいえ、ずっと構想していてもしょうがないので、実際に何か個人開発しながら試していきつつ、組み立てていった方がいいかなぁと思い始めているところです。

その他の活用例など

Web サービスの Q & A ページ

Notion で作成したページは、基本的にはアクセス権限がある方しかアクセスできませんが、一般公開させることも可能です。公開にあたって参照のみなどの、権限設定も行えるので安心ですね。

この公開設定を使って、Q & A ページを運用しているサービスを見かけたことがあります。

Notion で作成したページがそのまま公開されるわけなので、すぐに追記・編集ができますし、非エンジニアの方にとっても扱いやすいかと。

Fast Notion

日々の記録ページで参考にさせていただいたブログの作者様である、Yuji Tsuburaya さん作の iOS / Android アプリです。 <OG url="https://apps.apple.com/jp/app/fast-notion/id1505194382" /> <OG url="https://play.google.com/store/apps/details?id=jp.fastNotion&hl=ja" />

自分の Notion ページに素早くメモを取ることができるアプリだそうです。すぐにパパっとメモを書きたい方にとっては、重宝しそうですね。

<blockquote class="twitter-tweet"> <p lang="ja" dir="ltr">🚀 Fast Notion というアプリを作ってリリースしました！<br /><br />4/1 にこっそりとβリリースして色々な方に触っていただいていたのですが、<br />・2ヶ月間大きなバグもなく安定して動いている<br />・Android 版も昨日リリースした<br />ということで、ようやくリリースブログ書きました🙌<a href="https://t.co/oVYm4bQxQ0">https://t.co/oVYm4bQxQ0</a> </p>— Yuji Tsuburaya (@___35d) <a href="https://twitter.com/___35d/status/1266503600890675214?ref_src=twsrc%5Etfw">May 29, 2020</a> </blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Notion Blog

<OG url="https://notion-blog.now.sh" /> Notion Blog というオープンソースプロジェクトで、 Notion を使ってブログを作れます。

フロントエンドが Next.js、バックエンドが Notion という形になり、Next.js から Notion 上の記事を読み取りレンダリングするという構成になっているそうです。ちなみに、デザイン等のカスタマイズや独自ドメインをあてることも出来るとのこと。

Yuji Tsuburaya さんのブログに、Notion Blog について解説されている連載記事がありました。詳しく解説されているので、とても参考になります。 <OG url="https://blog.35d.jp/2020-05-23-notion-blog-1" />

Wraptas（※旧：Anotion）

※2021/09/11 に名称とドメインが新しくなりました。

<OG url="https://wraptas.com" /> Wraptas というサービスでも、Notion を使ったブログ、Web サイトが作れます。

こちらは国内産で、nabettu さんという方が作られています。 2020/10 にリリースされてから、日々アップデートが行われています。

<blockquote class="twitter-tweet"> <p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/Anotion?src=hash&ref_src=twsrc%5Etfw">#Anotion</a> のサービス名を <a href="https://twitter.com/hashtag/Wraptas?src=hash&ref_src=twsrc%5Etfw">#Wraptas</a> へ変更しました！同時にドメインも変更し、.comへ移行しました💪<br />サービス内容は変わっていませんが、引き続き"Wraptas"をよろしくお願いします！<br /><br />移行作業で疲れたので今日はアイス食べて休憩します😪笑<a href="https://t.co/evoNfR7uJZ">https://t.co/evoNfR7uJZ</a> </p>— nabettu🍲NotionでWebサイトが作れるサービス (@nabettu) <a href="https://twitter.com/nabettu/status/1436543962852986886?ref_src=twsrc%5Etfw">September 11, 2021</a> </blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

なお Notion Blog と違い、こちらは有料のサービスになります。ただ、無料トライアル期間があるので、気になる方は一度試してみてはいかがでしょうか。

Notion の基本概念説明から、実際の活用例の紹介までしてみました。 Notion は本当にいろんなことができるなぁと。

元々、自分は Notion の存在を以前から知ってはいたのですが、結局あまり使えていませんでした。

現在こうして療養中の身となり、時間があるので Notion を改めて使用して良さに触れて、積極的に活用していこうと思った次第です。少なくとも年内は療養することになりそうなので、そのなかで試行錯誤してみて、来年から本格的に活用していきたいですね。

この記事が Notion 活用の参考になれば幸いです。

参考リンクまとめ

Windows TerminalでWSLとGit Bashのターミナルを統合してみた（+ 設定項目簡易まとめ）

Sun, 08 Nov 2020 00:00:00 GMT

Windows で複数のターミナルを立ち上げていると、散らかったり、切り替えが手間だったりしますよね。これらを統合するべく、Windows Terminal を使ってみました。

import ImageWrapper from "@/components/ImageWrapper.astro" import OG from "@/components/OG.astro"

Windows Terminal とは？

Microsoft が提供している Windows 向けのターミナルアプリケーションです。コマンドラインインターフェイスを持つ任意のアプリケーションを、この Windows Terminal 内で実行できます。

つまり、これまではターミナルごとに別々で立ち上げていたのが、Windows Terminal で一元管理できるようになります。それぞれのターミナルウィンドウを探す手間も省けて楽です。

ターミナルそれぞれでテーマや配色、フォント、背景などの設定が可能です。そのほか、タブの中でさらにウィンドウ分割したり、ショートカットのキーバインディング設定も行うことができるようになっています。

自分の場合は、主に WSL と Git Bash を使用していたので、今回統合することにしました。以下、導入・設定手順の備忘録と、おおよそどんな設定ができるのかを書いています。

Windows Terminal をより詳細に知りたい場合は、こちらの Zenn 本で詳しく解説されています。 <OG url="https://zenn.dev/koron/books/b8bd70271541c102c0b8" />

導入

ダウンロード

Microsft Store で Windows Terminal で検索。

正式リリース版とプレビュー版とあるのでお好みで。今回、自分は正式リリース版を使用することにしました。（プレビュー版でしか使えない設定もありますが、プレビュー版はあくまで開発中のものであるため、予期しない動作をする可能性があることに注意です）

「入手」でダウンロード。 <ImageWrapper className="w-[80%]" src="screenshots/2020/windows-terminal/ms-shop-windows-terminal.png" alt="Microsoft StoreのWindows Terminal画面" />

起動

起動すると Windows PowerShell タブがデフォルトとして立ち上がります。

他の各種ターミナルを立ち上げるには、タブ右の ∨ から選択します。 <ImageWrapper className="w-[80%]" src="screenshots/2020/windows-terminal/windows-terminal-tab.png" alt="Windows Terminalのターミナル（プロファイル）一覧を表示した状態の画面" />

Git Bash の追加

Windows Terminal の初期設定では、以下のものしかありません。

Windows PowerShell
コマンドプロンプト
Ubuntu
Azore Cloud Shell

ここに Git Bash を追加します。

タブ右の ∨から「設定」を選択すると、設定ファイルを開くことができ、初期では以下のような内容になっています。

// This file was initially generated by Windows Terminal 1.3.2651.0
// It should still be usable in newer versions, but newer versions might have additional
// settings, help text, or changes that you will not see unless you clear this file
// and let us generate a new one for you.

// To view the default settings, hold "alt" while clicking on the "Settings" button.
// For documentation on these settings, see: https://aka.ms/terminal-documentation
{
  "$schema": "https://aka.ms/terminal-profiles-schema",

  "defaultProfile": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}",

  // You can add more global application settings here.
  // To learn more about global settings, visit https://aka.ms/terminal-global-settings

  // If enabled, selections are automatically copied to your clipboard.
  "copyOnSelect": false,

  // If enabled, formatted data is also copied to your clipboard
  "copyFormatting": false,

  // A profile specifies a command to execute paired with information about how it should look and feel.
  // Each one of them will appear in the 'New Tab' dropdown,
  //   and can be invoked from the commandline with `wt.exe -p xxx`
  // To learn more about profiles, visit https://aka.ms/terminal-profile-settings
  "profiles":
  {
    "defaults":
    {
        // Put settings here that you want to apply to all profiles.
    },
    "list":
    [
      {
        // Make changes here to the powershell.exe profile.
        "guid": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}",
        "name": "Windows PowerShell",
        "commandline": "powershell.exe",
        "hidden": false
      },
      {
        // Make changes here to the cmd.exe profile.
        "guid": "{0caa0dad-35be-5f56-a8ff-afceeeaa6101}",
        "name": "コマンド プロンプト",
        "commandline": "cmd.exe",
        "hidden": false
      },
      {
        "guid": "{2c4de342-38b7-51cf-b940-2309a097f518}",
        "hidden": false,
        "name": "Ubuntu",
        "source": "Windows.Terminal.Wsl"
      },
      {
        "guid": "{b453ae62-4e3d-5e58-b989-0a998ec441b8}",
        "hidden": false,
        "name": "Azure Cloud Shell",
        "source": "Windows.Terminal.Azure"
      }
    ]
  },

  // Add custom color schemes to this array.
  // To learn more about color schemes, visit https://aka.ms/terminal-color-schemes
  "schemes": [],

  // Add custom actions and keybindings to this array.
  // To unbind a key combination from your defaults.json, set the command to "unbound".
  // To learn more about actions and keybindings, visit https://aka.ms/terminal-keybindings
  "actions":
  [
    // Copy and paste are bound to Ctrl+Shift+C and Ctrl+Shift+V in your defaults.json.
    // These two lines additionally bind them to Ctrl+C and Ctrl+V.
    // To learn more about selection, visit https://aka.ms/terminal-selection
    { "command": {"action": "copy", "singleLine": false }, "keys": "ctrl+c" },
    { "command": "paste", "keys": "ctrl+v" },

    // Press Ctrl+Shift+F to open the search box
    { "command": "find", "keys": "ctrl+shift+f" },

    // Press Alt+Shift+D to open a new pane.
    // - "split": "auto" makes this pane open in the direction that provides the most surface area.
    // - "splitMode": "duplicate" makes the new pane use the focused pane's profile.
    // To learn more about panes, visit https://aka.ms/terminal-panes
    { "command": { "action": "splitPane", "split": "auto", "splitMode": "duplicate" }, "keys": "alt+shift+d" }
  ]
}

ここに Git Bash の設定を追加することで、Git Bash も使えるようにしていきます。

guid の取得

Windows PowerShell 上で以下のコマンドを実行して guid を取得します。表示された guid は設定の追記で使用するので控えておきましょう。

[guid]::NewGuid()

設定の追記

profiles.list の配列に以下を追記（設定値はあくまで例です） guid は先ほど取得したものに置き換えてください。

{
  "guid" : "{XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX}",
  "acrylicOpacity" : 0.7,
  "commandline" : "C:\\Program Files\\Git\\bin\\bash.exe --login -i",
  "cursorColor" : "#FFFFFF",
  "fontFace" : "consolas",
  "fontSize" : 14,
  "icon" : "C:\\Program Files\\Git\\mingw64\\share\\git\\git-for-windows.ico",
  "name" : "Git Bash",
  "padding" : "0, 0, 0, 0",
  "startingDirectory" : "%USERPROFILE%",
  "useAcrylic" : true
}

それぞれの設定項目の意味としては、こういったものになっています。（設定については下記も参照）

guid：プロファイルを特定するための一意の識別子
acrylicOpacity：アクリル背景の不透明度（useAcrylic と合わせて設定）
commandline：このプロファイルで使用される実行ファイル（ちなみに今回の場合は、--login -i までつけないと、ファイル・ディレクトリの色がつかない）
cursorColor：カーソルの色
fontFace：フォントの種類
fontSize：フォントの大きさ
icon：タブとドロップダウンメニュー表示のアイコン
name：ドロップダウンメニューに表示されるプロファイル名
padding：ウィンドウ内のテキストの周囲の余白
startingDirectory：シェルが読み込まれるときに開始されるディレクトリ位置
useAcrylic：ウィンドウ背景に透過性のあるアクリル背景を表示するか

これでターミナルの一覧に Git Bash が追加されていれば OK です。

日本語化

上記の設定追加で Git Bash が使えるようになりましたが、そのままでは日本語文字が文字化けしてしまうため、ロケールの設定を追加します。

~/.bash_profile に以下を追記.

export LANG=ja_JP.UTF-8

再読み込みして設定を反映.

source ~/.bash_profile

これで日本語文字のファイル・ディレクトリ名など、文字化けしていなければOK。

あとは、ご自分が扱いやすいように設定をカスタマイズして、快適な環境にしましょう。

設定について

最後に、おおよそどんな設定項目があるかを書いておきます。より詳細に知りたい方は、ぜひ公式ドキュメントを読んでみてください。 <OG url="https://docs.microsoft.com/ja-jp/windows/terminal/customize-settings/global-settings" />

補足として、公式ドキュメントには「プレビュー版のみしか使用できない」と記述がある設定のなかには、正式リリース版でも一部使用できるものがありました。

グローバル設定

※少々見づらいですが、横に長いテーブルなのでスクロールしてご覧ください🙇

<div class="scroll-table-block"> <table> <thead> <tr> <th>プロパティ名</th> <th>内容</th> <th>必須どうか</th> <th>値</th> <th>デフォルト値</th> </tr> </thead> <tbody> <tr> <td>defaultProfile</td> <td>起動時や、プロファイルを指定せずにタブ追加した場合に開かれるプロファイル</td> <td>必須</td> <td>GUID またはプロファイル名を表す文字列</td> <td>PowerShell の GUID</td> </tr> <tr> <td>disabledProfileSources</td> <td>動的プロファイルを無効にする<br />ここに指定したプロファイルはリストに追加されない</td> <td>オプション</td> <td>"Windows.Terminal.Wsl"、<br />"Windows.Terminal.Azure"、<br />"Windows.Terminal.PowershellCore"<br />（配列内）</td> <td>[]</td> </tr> <tr> <td>theme</td> <td>アプリケーションのテーマ<br />system は Windows と同じテーマ</td> <td>オプション</td> <td>"system"、"dark"、"light"</td> <td>"system"</td> </tr> <tr> <td>alwaysShowTabs</td> <td>常にタブを表示するかどうか<br />※1</td> <td>オプション</td> <td>true、false</td> <td>true</td> </tr> <tr> <td>tabWidthMode</td> <td>タブ幅設定<br />equal...均等<br />titleLength...タイトルの長さ<br />compact...非アクティブタブをアイコン幅、アクティブタブをタイトル幅</td> <td>オプション</td> <td>"equal"、"titleLength"、"compact"</td> <td>"equal"</td> </tr> <tr> <td>confirmCloseAllTabs</td> <td>複数のタブを開いているウィンドウを閉じようとする時に、確認ポップアップを表示するか</td> <td>オプション</td> <td>true、false</td> <td>true</td> </tr> <tr> <td>startOnUserLogin</td> <td>スタートアップ時に Windows Terminal を起動するかどうか</td> <td>オプション</td> <td>true、false</td> <td>false</td> </tr> <tr> <td>launchMode</td> <td>起動時にターミナルを最大化して全画面表示するか、ウィンドウ内に表示するか</td> <td>オプション</td> <td>"default"、"maximized"、"fullscreen"</td> <td>"default"</td> </tr> <tr> <td>initialPosition</td> <td>起動時の、ウィンドウの左上隅のピクセル位置</td> <td>オプション</td> <td>","、"#,#"、"#,"、",#"</td> <td>","</td> </tr> <tr> <td>initialCols</td> <td>起動時にウィンドウに表示される列数<br /><code>launchMode</code>が maximized に設定されていると、このプロパティは無視される</td> <td>オプション</td> <td>整数</td> <td>120</td> </tr> <tr> <td>initialRows</td> <td>起動時にウィンドウに表示される行数<br /><code>launchMode</code>が maximized に設定されていると、このプロパティは無視される</td> <td>オプション</td> <td>整数</td> <td>30</td> </tr> <tr> <td>showTabsInTitlebar</td> <td>タブをタイトルバー内に移動するかどうか<br />※1</td> <td>オプション</td> <td>true、false</td> <td>true</td> </tr> <tr> <td>showTerminalTitleInTitlebar</td> <td>選択されているタブのタイトルをタイトルバーに表示するかどうか<br />※1</td> <td>オプション</td> <td>true、false</td> <td>true</td> </tr> <tr> <td>copyOnSelect</td> <td>テキスト範囲選択と同時にコピーするかどうか</td> <td>オプション</td> <td>true、false</td> <td>false</td> </tr> <tr> <td>copyFormatting</td> <td>テキストコピー時に書式設定もコピーするかどうか</td> <td>オプション</td> <td>true、false</td> <td>false</td> </tr> <tr> <td>wordDelimiters</td> <td>ダブルクリックの選択で使用される単語の区切り記号</td> <td>オプション</td> <td>文字列としての文字</td> <td>/\()"'-:|.;<>~!@#$%^&*|+=[]{}?│</td> </tr> <tr> <td>rowsToScroll</td> <td>マウスホイールで一度にスクロールする行の数</td> <td>オプション</td> <td>整数</td> <td>"system"</td> </tr> <tr> <td>snapToGridOnResize</td> <td>ウィンドウサイズ変更時に、最も近い文字境界にスナップするかどうか</td> <td>オプション</td> <td>true、false</td> <td>true</td> </tr> <tr> <td>experimental.rendering.forceFullRepaint</td> <td>画面の再描画<br />true の場合、ターミナルでは各フレームの画面全体を再描画<br />false の場合、フレーム間の画面の更新のみが表示</td> <td>オプション</td> <td>true、false</td> <td>false</td> </tr> <tr> <td>experimental.rendering.software</td> <td>ソフトウェアレンダリング<br />true の場合、ターミナルでは、ハードウェアレンダラーの代わりにソフトウェアレンダラー (WARP) を使用</td> <td>オプション</td> <td>true、false</td> <td>false</td> </tr> </tbody> </table> </div>

※1...この設定を変更すると、新しいターミナルインスタンスを開始する必要があることに注意。

プロファイルの設定

defaultsとlistに分かれる。

defaults：プロファイル共通の設定
list：プロファイルそれぞれの設定

※少々見づらいですが、横に長いテーブルなのでスクロールしてご覧ください🙇

<div class="scroll-table-block"> <table> <thead> <tr> <th>プロパティ名</th> <th>内容</th> <th>必須かどうか</th> <th>値</th> <th>デフォルト値</th> </tr> </thead> <tbody> <tr> <td>guid</td> <td>プロファイルを特定するための一意の識別子</td> <td>必須</td> <td>レジストリ形式の GUID を表す文字列:<br />"{00000000-0000-0000-0000-000000000000}"</td> <td></td> </tr> <tr> <td>commandline</td> <td>プロファイルで使用される実行可能ファイル</td> <td>オプション</td> <td>実行可能ファイル名を表す文字列</td> <td>"cmd.exe"</td> </tr> <tr> <td>source</td> <td>プロファイルを生成したプロファイルジェネレーターの名前</td> <td>オプション</td> <td>文字列</td> <td></td> </tr> <tr> <td>startingDirectory</td> <td>シェルが読み込まれるときに開始されるディレクトリ位置</td> <td>オプション</td> <td>フォルダーの場所を表す文字列</td> <td>"%USERPROFILE%"</td> </tr> <tr> <td>name</td> <td>ドロップダウンメニューに表示されるプロファイル名</td> <td>必須</td> <td>文字列</td> <td></td> </tr> <tr> <td>icon</td> <td>タブとドロップダウンメニュー内に表示されるアイコン</td> <td>オプション</td> <td>ファイルの場所を表す文字列</td> <td></td> </tr> <tr> <td>hidden</td> <td>ドロップダウンメニューからプロファイルを非表示にするかどうか</td> <td>オプション</td> <td>true、false</td> <td>false</td> </tr> <tr> <td>tabTitle</td> <td>カスタムタブのタイトル<br />起動時にシェルに渡すタイトルとして<code>name</code>が置き換えられる</td> <td>オプション</td> <td>文字列</td> <td></td> </tr> <tr> <td>suppressApplicationTitle</td> <td>シェルからのタイトルの変更を抑制<br />true の場合、<code>tabTitle</code>によってタブの既定のタイトルがオーバーライドされ、<br />アプリケーションからのタイトルの変更メッセージはすべて抑制される</td> <td>オプション</td> <td>true、false</td> <td></td> </tr> <tr> <td>fontFace</td> <td>フォントの種類<br />指定値が見つからないか無効である場合は、Consolas へのフォールバックが施行される</td> <td>オプション</td> <td>フォント名を表す文字列</td> <td>"Cascadia Mono"</td> </tr> <tr> <td>fontSize</td> <td>フォントの大きさ</td> <td>オプション</td> <td>整数</td> <td>12</td> </tr> <tr> <td>fontWeight</td> <td>フォントの太さ</td> <td>オプション</td> <td>"normal"、"thin"、"extra-light"、"light"、<br />"semi-light"、"medium"、<br />"semi-bold"、"bold"、<br />"extra-bold"、"black"、"extra-black"、<br />OpenType フォントの太さの数値表記に対応する整数</td> <td>"normal"</td> </tr> <tr> <td>padding</td> <td>ウィンドウ内のテキストの周囲の余白</td> <td>オプション</td> <td>次の形式の値を表す文字列: <br />"#"、"#, #"、"#, #, #, #"</td> <td>"8, 8, 8, 8"</td> </tr> <tr> <td>antialiasingMode</td> <td>レンダラーでテキストをアンチエイリアシングする方法を制御<br />※1</td> <td>オプション</td> <td>"grayscale"、"cleartype"、"aliased"</td> <td>"grayscale"</td> </tr> <tr> <td>cursorShape</td> <td>カーソルの種類<br />"bar" ( ┃ )<br />"vintage" ( ▃ )<br />"underscore" ( ▁ )、<br />"filledBox" ( █ )、<br />"emptyBox" ( ▯ )</td> <td>オプション</td> <td>"bar"、"vintage"、"underscore"、<br />"filledBox"、"emptyBox"</td> <td>"bar"</td> </tr> <tr> <td>cursorColor</td> <td>カーソルの色</td> <td>オプション</td> <td>色を表す 16 進形式の文字列: "#rgb" または "#rrggbb"</td> <td></td> </tr> <tr> <td>cursorHeight</td> <td>下部からのカーソルの高さの割合<br /><code>cursorShape</code> が "vintage" に設定されている場合にのみ機能</td> <td>オプション</td> <td>25 から 100 までの整数</td> <td></td> </tr> <tr> <td>altGrAliasing</td> <td>AltGr エイリアシング<br />ctrl+alt を AltGr のエイリアスとして扱うかどうか</td> <td>オプション</td> <td>true、false</td> <td>true</td> </tr> <tr> <td>colorScheme</td> <td>プロファイルで使用される配色の指定<br />既定の配色だけでなく、独自の配色も指定可能</td> <td>オプション</td> <td>配色の名前を表す文字列</td> <td>"Campbell"</td> </tr> <tr> <td>foreground</td> <td>プロファイルの前景色<br />（配色で設定された <code>foreground</code> がオーバーライドされる）</td> <td>オプション</td> <td>色を表す 16 進形式の文字列: "#rgb" または "#rrggbb"</td> <td></td> </tr> <tr> <td>background</td> <td>プロファイルの背景色<br />（配色で設定された<code>background</code>がオーバーライドされる）</td> <td>オプション</td> <td>色を表す 16 進形式の文字列: "#rgb" または "#rrggbb"</td> <td></td> </tr> <tr> <td>selectionBackground</td> <td>プロファイル内の選択範囲の背景色<br />（配色で設定された<code>selectionBackground</code>がオーバーライドされる）</td> <td>オプション</td> <td>色を表す 16 進形式の文字列: "#rgb" または "#rrggbb"</td> <td></td> </tr> <tr> <td>useAcrylic</td> <td>ウィンドウ背景に透過性のあるアクリル背景を表示するかどうか（フォーカスしているウィンドウのみに適用）</td> <td>オプション</td> <td>true、false</td> <td>false</td> </tr> <tr> <td>acrylicOpacity</td> <td>アクリル背景の不透明度</td> <td>オプション</td> <td>0 - 1 の浮動小数点値の数値</td> <td>0.5</td> </tr> <tr> <td>backgroundImage</td> <td>ウィンドウの背景に描画する画像</td> <td>オプション</td> <td>ファイルの場所を表す文字列</td> <td></td> </tr> <tr> <td>backgroundImageStretchMode</td> <td>背景画像のストレッチモード</td> <td>オプション</td> <td>"none"、"fill"、<br />"uniform"、"uniformToFill"</td> <td>"uniformToFill"</td> </tr> <tr> <td>backgroundImageAlignment</td> <td>ウィンドウ境界への背景画像の配置方法</td> <td>オプション</td> <td>"center"、"left"、"top"、<br />"right"、"bottom"、"topLeft"、<br />"topRight"、"bottomLeft"、"bottomRight"</td> <td>"center"</td> </tr> <tr> <td>backgroundImageOpacity</td> <td>背景画像の透明度</td> <td>オプション</td> <td>0 - 1 の浮動小数点値の数値</td> <td>1.0</td> </tr> <tr> <td>scrollbarState</td> <td>スクロールバーを表示するかどうか</td> <td>オプション</td> <td>"visible"、"hidden"</td> <td></td> </tr> <tr> <td>snapOnInput</td> <td>入力時に入力行まで自動スクロールするかどうか</td> <td>オプション</td> <td>true、false</td> <td>true</td> </tr> <tr> <td>historySize</td> <td>ウィンドウに表示されているよりも上の行にスクロールして戻すことができる行の数</td> <td>オプション</td> <td>整数</td> <td>9001</td> </tr> <tr> <td>closeOnExit</td> <td>終了時のプロファイルの閉じ方<br />"graceful" or true...exit が入力されたとき、またはプロセスが正常に終了したときに、プロファイルを閉じる<br />"always"...常にプロファイルを閉じる<br />"never" or false...プロファイルを閉じない</td> <td>オプション</td> <td>"graceful"、"always"、"never"、<br />true、false</td> <td>"graceful"</td> </tr> <tr> <td>experimental.retroTerminalEffect</td> <td>レトロターミナル効果<br />古い CRT ディスプレイ形式でするかどうか（試験的な機能で存続保証なし）</td> <td>オプション</td> <td>true、false</td> <td>false</td> </tr> </tbody> </table> </div>

※1...この設定を変更すると、新しいターミナルインスタンスを開始する必要があることに注意。

配色設定

元から用意されている配色については、公式ドキュメントをご参照ください。 <OG url="https://docs.microsoft.com/ja-jp/windows/terminal/customize-settings/color-schemes" />

独自の配色については、設定ファイルのschemes配列で定義でき、形式としては以下のようになっています。

ここで定義した配色のnameをプロファイル設定のcolorSchemeで指定する感じです。

{
  "name" : "Campbell",

  "cursorColor": "#FFFFFF",
  "selectionBackground": "#FFFFFF",

  "background" : "#0C0C0C",
  "foreground" : "#CCCCCC",

  "black" : "#0C0C0C",
  "blue" : "#0037DA",
  "cyan" : "#3A96DD",
  "green" : "#13A10E",
  "purple" : "#881798",
  "red" : "#C50F1F",
  "white" : "#CCCCCC",
  "yellow" : "#C19C00",
  "brightBlack" : "#767676",
  "brightBlue" : "#3B78FF",
  "brightCyan" : "#61D6D6",
  "brightGreen" : "#16C60C",
  "brightPurple" : "#B4009E",
  "brightRed" : "#E74856",
  "brightWhite" : "#F2F2F2",
  "brightYellow" : "#F9F1A5"
},

アクション設定

設定ファイルのactionsで、コマンドに対するショートカットのキーバインディング設定を行えます。

構文としては、引数があるかどうかで以下の2通りです。

{ "command": { "action": "commandName", "argument": "value" }, "keys": "modifiers+key" }
{ "command": "commandName", "keys": "modifiers+key" }

// 例
{ "command": {"action": "copy", "singleLine": false }, "keys": "ctrl+c" }
{ "command": "paste", "keys": "ctrl+v" }

コマンドの種類やデフォルトキー、設定できるキーの種類などに関しては、公式ドキュメントをご参照ください。 <OG url="https://docs.microsoft.com/ja-jp/windows/terminal/customize-settings/actions" />

ちなみにコマンドパレットを開く（Ctrl + Shift + P）ことで、コマンド一覧と割り当てられているキーの確認ができます。

冒頭に書いた通り、自分は元々 WSL と Git Bash くらいしかターミナルを使っておらず、実はそこまで不便を感じていたわけではありませんでした。なので Windows Terminal の存在を知りつつ別に導入しなくてもいいかなというので、だいぶ期間が過ぎ...。

{/*  */}

ただ、実際に導入してみると、素直に「あ、こっちの方がいいや」と思いました(笑) 一元管理できること、設定やキーバインディングをカスタマイズできることで、こんなに感覚変わるもんなんだなぁと。

{/*  */}

導入も簡単にできるので、ぜひ活用されてみてください。

参考リンクまとめ

Docusaurus(v2)製サイトにGoogle AnalyticsとGoogle Search Consoleを導入する

Sun, 03 May 2020 00:00:00 GMT

今年1月に勉強記録 & ポートフォリオサイトとして Docusaurus 製のサイトを作成しました。その後、Google Analytics と Google Search Console を導入したので、記事化しておきます。

import ImageWrapper from "@/components/ImageWrapper.astro" import OG from "@/components/OG.astro"

はじめに

今回使用するバージョンはこちら。

@docusaurus/core：2.0.0-alpha.54
@docusaurus/preset-classic：2.0.0-alpha.54

↓ ※2020/08/02追記.

@docusaurus/core：2.0.0-alpha.61
@docusaurus/preset-classic：2.0.0-alpha.61

に対応。

↓ ※2021/04/02修正.

@docusaurus/core：2.0.0-alpha.72
@docusaurus/preset-classic：2.0.0-alpha.72

に対応。

ここでは便宜上、ライブラリをプラグインと書いていきます（ Docusaurus のドキュメントもプラグインと書いてあるので）

@docusaurus/plugin-google-gtag

Google Analytics や Google 広告を導入する際に使用するプラグイン。

@docusaurus/plugin-google-analytics との違い

@docusaurus/plugin-google-analyticsの方は analytics.js。 <OG url="https://developers.google.com/analytics/devguides/collection/analyticsjs" />

@docusaurus/plugin-google-gtagの方は gtag.js になります。 <OG url="https://developers.google.com/analytics/devguides/collection/gtagjs?hl=ja" />

恥ずかしながら、自分は最初この違いがよくわかっていなかったのですが、どうも gtag.js の方が今の世代になるそうです。 Google Analytics の管理画面から確認できるトラッキングコードも、そういえば gtag の方でした。

gtag.js に対して、analytics.js では Google Analytics にしか対応していません。

公式ガイドと参考はこちら. <OG url="https://developers.google.com/analytics/devguides/collection/gtagjs/migration?hl=ja" /> ※2025/09/14...参考ページの方はリンクが変わっていたので削除しました。

Google Analytics 導入

※以前、ブログに導入したときの記事はこちら.

Jekyll製ブログにGoogle Analytics導入

サイトを Google Analytics に登録

※前提として Google アカウントが必要になります。

すでに他サイト等で導入したことがある場合管理画面の左サイドバーの「管理」→ プロパティの「プロパティの作成」から。 <ImageWrapper src="screenshots/2020/docusaurus-ver-2-gtag/add-google-analytics.png" alt="Google Analyticsの管理設定画面" />
新規登録の場合 Google Analyticsの「無料で利用する」から。

導入対象種別を選択した後、種別に応じた基本情報（サイト URL など）を入力していきます。

登録が終わると管理画面へ移行します。そこから「管理」 → プロパティの「トラッキング情報」 → 「トラッキングコード」へ行き、トラッキング ID を控えておきます。

プラグインのインストール

※@docusaurus/preset-classicプリセット使用時はすでに含まれているため、別途インストールは不要です。

yarn add @docusaurus/plugin-google-gtag

設定の追記

docusaurus.config.js に以下のように追記。 trackingIDに先ほど控えたトラッキング ID を設定します。

※2020/08/02追記 @docusaurus/preset-classicプリセットが有効の場合 plugins に記述は不要で、themeConfig に gtag 設定を追記のみです。

module.exports = {
  themeConfig: {
    gtag: {
      trackingID: 'UA-XXXXXXXXX-X',
      anonymizeIP: true,
    },
  },
};

@docusaurus/preset-classicプリセットが無効の場合 ※2.0.0-alpha.54においては、プリセットが有効でも、こちらの記述でも動作しました。

module.exports = {
  plugins: ['@docusaurus/plugin-google-gtag'],
  themeConfig: {
    gtag: {
      trackingID: 'UA-XXXXXXXXX-X',
      anonymizeIP: true,
    },
  },
};

なお、anonymizeIPに関しては任意です。有効化することで、収集する IP アドレスの末尾を0にして匿名化します。

公式サポートはこちら. <OG url="https://support.google.com/analytics/answer/2763052?hl=ja" />

匿名化すると、地域情報といった IP アドレスで判定しているようなデータの精度が落ちてしまいますが、GDPR （EU 一般データ保護規則）対応として必要になる場合もあるようです。

また、IP 末尾が0に変わるため、指定 IP 除外のフィルタを設定する際も注意が必要です。

プライバシーポリシーの用意

Google Analytics を利用する際は、プライバシーポリシーを記載したページの用意が必要です。

個人情報の保護や取り扱いについての方針を示す必要があり。

Cookie を使用していること
設定で Cookie は無効にできること
個人を特定する情報は収集しないこと
Google Analytics の利用規約

などの記述が必要になります。

ここまで完了したら、サイトにアクセスしてみて、リアルタイムのアクティブユーザ数がカウントされていれば無事完了です。

自分のアクセスを除外した場合は Google Analytics オプトアウトアドオンを導入するとよいです。 <OG url="https://chrome.google.com/webstore/detail/google-analytics-opt-out/fllaojicojecljbmefodhfapmkghcbnh?hl=ja" />

Google Search Console 導入

※以前、ブログに導入したときの記事はこちら（より詳細に書いてます）

ブログでGoogle Search Consoleを導入する

今回は、Google Analytics を先に導入しているものとして進めていきます。

サイトを Google Search Console に登録

すでに他サイト等で導入したことがある場合管理画面の左上のプロパティ（URL など）を選択して「プロパティの追加」から。 <ImageWrapper className="w-[60%]" src="screenshots/2020/docusaurus-ver-2-gtag/add-google-search-console.png" alt="Google Search Consoleのプロパティ選択画面" />
新規登録の場合 Google Search Consoleにアクセスして、「今すぐ開始」から。

プロパティタイプをどちらか選択（自分は URL プレフィックスにしています）

URL プレフィックス：そのURLのみの集計
ドメイン：「www」のありなしや「http://」「https://」の違いに関わらず一括で登録し、それぞれを集計

所有権の確認では、Google Analytics を導入済みだと、そこから所有権を確認してくれますが、プロパティタイプがドメインの場合は DNS の確認が必要になるようです。

プライバシーポリシーの用意

Google Search Console に関しても、プライバシーポリシーに記述が必要になります。

Google Analytics 導入時に作成したページをベースにして、追記しましょう。

@docusaurus/plugin-sitemap

サイトマップを自動生成してくれるプラグイン。

プラグインのインストール

※@docusaurus/preset-classicプリセット使用時はすでに含まれているため、別途インストールは不要です。

yarn add @docusaurus/plugin-sitemap

設定の追記

docusaurus.config.js に以下のように追記。

{/*  */}

※2020/08/02追記 @docusaurus/preset-classicプリセットが有効の場合 plugins でなく、presets で使用プリセット設定を記述するところにサイトマップの設定を記述します。

{/*  */}

module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
        // 追記
        sitemap: {
          changefreq: 'weekly',
          priority: 0.5,
          trailingSlash: false,
        }
      },
    ],
  ],
}

@docusaurus/preset-classicプリセットが無効の場合 こちらでは、plugins に使用プラグイン定義とともに設定を記述します。

module.exports = {
  plugins: [
    [
      '@docusaurus/plugin-sitemap',
      {
        changefreq: 'weekly',
        priority: 0.5,
        trailingSlash: false,
      },
    ],
  ],
};

changefreq

ページの更新頻度。設定値はいかのいずれか。

always
hourly
daily
weekly
monthly
yearly
never

priority

サイト内の他のURLと比較したこのURLの優先度。 0.0から1.0までの値を指定。0.5がデフォルト。

これらの設定が全体のデフォルト設定になり、各ページで個別に changefreq と priority を設定できる？と思ったのですが、いまいちやり方がわからず...。

trailingSlash

サイトマップの各種 URL の末尾に/を付与するか。

これでサイトマップが自動生成されるようになり、(ドメイン)/sitemap.xmlから確認できます。

※2021/04/02追記以前は cacheTime の設定ができたのですが、v2.0.0-alpha.72 においては廃止になっていました。

サイトマップの読み込み

Google Search Console にサイトマップを読み込ませることで、サイトを認識させ検索結果に表示させやすくできます。

Google Search Console 管理画面の「サイトマップ」から、サイトマップの URL を指定して「送信」を選択。

2.0.0-alpha.60前後か、`@docusaurus/preset-classic`プリセットの有効無効で設定方法が違う理由（※2020/08/02追記）

バージョン2.0.0-alpha.60から、1つの Docusaurus 製サイトにおいて、同じプラグインを複数回使用できるという仕様が追加されたようです。 <OG url="https://v2.docusaurus.io/docs/using-plugins/#multi-instance-plugins-and-plugin-ids" />

ただ、この場合は以下のようにプラグインにそれぞれ ID を振るようにしなければならないとのこと。

module.exports = {
  plugins: [
    [
      '@docusaurus/plugin-xxx',
      {
        id: 'plugin-xxx-1',
        // other options
      },
    ],
    [
      '@docusaurus/plugin-xxx',
      {
        id: 'plugin-xxx-2',
        // other options
      },
    ],
  ],
};

もしこの ID を振っていなかった場合は、defaultがIDとなり、ID重複ということで以下のようなエラーになりました。

Error: Plugin docusaurus-plugin-google-gtag is used 2 times with id=default.
To use the same plugin multiple times on a Docusaurus site, you need to assign a unique id to each plugin instance.

自分の場合、Docusaurus のバージョンアップ対応をした際に、このエラーに遭遇しました。設定を重複して書いたりしてないのになんで？と思いましたが、@docusaurus/preset-classicが有効になっていると、このプリセットに含まれているプラグインも有効となる。 ↓ plugins に別途設定を書くと、2回使用しているとみなされるようです。

なので、plugins の方には書かないようにしたところ、無事にエラーが出なくなりました。

参考リンクまとめ

ドメインをお名前.comからGoogle Domainsに移管する

Sat, 11 Apr 2020 00:00:00 GMT

昨年、お名前.com でドメインを取得してブログに設定していたのですが、この度 Google Domains に移管しました。移管ってどうやるの？状態からでしたが、調べながら実際に行った手順をまとめましたので、よかったらご活用ください。

import ImageWrapper from "@/components/ImageWrapper.astro" import OG from "@/components/OG.astro"

Google Domains とは？

Google が提供しているドメインサービスです。 2015年にサービスができたばかりの頃は海外のみ対象で日本では利用できなかったようですが、現在は日本でも利用でき、2018年5月頃からサイトも日本語に対応しています。

お名前.com と比べるとドメイン取得料金が高いらしいのですが、個人的にはそこまで気にならなかったですし、比較的 UI がわかりすく好印象をうけました。また、Google ということで安心感もありましたし。別サイト用のドメインを取得する機会があったので、どうせなら Google Domains でやっちゃうかとなりました。

ちなみに Netlify でホスティングしているサイトに独自ドメインを設定する方法は、過去に記事を書いているのでよろしければそちらもどうぞ。

Netlifyでホスティングしているサイトに独自ドメインを設定する

移管手順

移管する上での注意事項

Google Domains へ移管申請時に ドメイン登録期間を1年延長する（1年分の登録延長料金を支払う） 必要があります
移管するドメインが JP ドメイン + 契約終了まで7日以内だと移管ができません（お名前.com の場合）

お名前.com 側での事前準備

お名前.com Navi ログインからログインします。

移管ロック確認

ドメインがロックされていると移管が行えないので、解除する必要があります。

トップ画面、ご利用状況の「ドメイン一覧」を選択 <ImageWrapper className="w-[80%]" src="screenshots/2020/domain-transfer/onamae-top.png" alt="お名前.com Navi トップ画面のドメイン一覧選択" />
ドメイン一覧の右上「ドメイン機能一覧」を選択 <ImageWrapper className="w-[80%]" src="screenshots/2020/domain-transfer/onamae-domain-list.png" alt="お名前.com Navi ドメイン一覧画面のドメイン機能一覧選択" />
ドメイン移管の「ドメイン移管ロック」を選択 <ImageWrapper className="w-[80%]" src="screenshots/2020/domain-transfer/onamae-domain-change.png" alt="お名前.com Navi ドメイン機能一覧画面のドメイン移管ロック選択" />
移管ロックが OFF なことを確認（ON の場合は OFF にする） <ImageWrapper className="w-[80%]" src="screenshots/2020/domain-transfer/onamae-domain-lock.png" alt="お名前.com Navi ドメイン移管ロック確認画面" />

AuthCode 確認

ドメイン移管をする際に使用するので、確認して控えておきます。

トップ画面、ご利用状況の「ドメイン一覧」を選択 <ImageWrapper className="w-[80%]" src="screenshots/2020/domain-transfer/onamae-top.png" alt="お名前.com Navi トップ画面のドメイン一覧選択" />
ドメイン一覧から、移管するドメインを選択
AuthCode を表示して控えておく <ImageWrapper className="w-[80%]" src="screenshots/2020/domain-transfer/onamae-domain-authcode.png" alt="お名前.com Navi ドメイン詳細画面のAuthCode表示" />

Whois 情報公開代行サービス無効化

通常 Whois でドメインに対しての問い合わせが行われたときに、管理者の情報として個人情報が公開されてしまいます。その情報をドメインサービス側の情報に差し替えてくれるものが Whois 情報公開代行です。

Whois 情報公開代行サービスを有効にしていると、移管先から移管リクエストを送った際に拒否されてしまうので解除する必要があります。 ※ドメインプロテクション機能で変更を制限している場合は、そちらを先に解除しておかないと無効化ができないので注意です。

トップ画面、ご利用状況の「ドメイン一覧」を選択 <ImageWrapper className="w-[80%]" src="screenshots/2020/domain-transfer/onamae-top.png" alt="お名前.com Navi トップ画面のドメイン一覧選択" />
ドメイン一覧の右上「ドメイン機能一覧」を選択 <ImageWrapper className="w-[80%]" src="screenshots/2020/domain-transfer/onamae-domain-list.png" alt="お名前.com Navi ドメイン一覧画面のドメイン機能一覧選択" />
登録情報の設定「Whois 情報公開代行」を選択 <ImageWrapper className="w-[80%]" src="screenshots/2020/domain-transfer/onamae-whois.png" alt="お名前.com Navi ドメイン機能一覧画面のWhois情報公開代行選択" />

{/*  */}

右下の「Whois 情報公開代行設定の解除はこちら」を選択 <ImageWrapper className="w-[80%]" src="screenshots/2020/domain-transfer/onamae-whois-setting.png" alt="お名前.com Navi Whois情報公開代行設定画面のWhois情報公開代行設定の解除はこちら選択" />

{/*  */}

ドメインを選択後、解除対象に「Whois 公開代行（メール転送付き）」を選択し「確認」を選択 <ImageWrapper className="w-[80%]" src="screenshots/2020/domain-transfer/onamae-whois-setting2.png" alt="お名前.com Navi Whois情報公開代行設定解除画面の解除対象と確認選択" />
「注意事項に同意」にチェックし、「確定」を選択

Google Domains 側で移管申請

Google Domains にログイン後、サイドバーの「移管」を選択 ※トップの「すでにお持ちのドメインを移管しましょう」からでもいけます。
移管するドメインを入力
ドメインの準備ステップ2：先ほど控えた AuthCode を認証コードとして入力して「続行」を選択 ※ステップ1はドメインロックを解除している時点で済になります。 <ImageWrapper className="w-[80%]" src="screenshots/2020/domain-transfer/google-domain-authcode.png" alt="Google Domains ドメインの準備ステップ2 認証コード入力" />
ウェブ設定のインポート：お好みで DNS 設定を移行するか選択して「続行」を選択（自分は「DNS 設定をコピーして Google に任せる」の方にしました）ちなみに「リソースレコードを表示」を選択すると、移行する DNS 設定の内容が確認できます。 <ImageWrapper className="w-[80%]" src="screenshots/2020/domain-transfer/google-domain-setting-import.png" alt="Google Domains ウェブ設定のインポート続行選択" />
登録の設定：設定を確認して「購入手続きに進む」を選択デフォルトでプライバシー保護が有効になっているのは頼もしいですね。 <ImageWrapper className="w-[80%]" src="screenshots/2020/domain-transfer/google-domain-purchase.png" alt="Google Domains 登録の設定購入手続きに進む選択" />
住所など個人情報の入力をして「保存して続行」
入力した内容と支払情報を確認して「購入」 ※GCP などで支払い情報を登録したことがある場合は、自動で情報がセットされるみたいです

ここまでで一旦移管申請は終わりです。あとは双方のドメインサービス間でやり取りが行われて、その最終確認が行われます。

最終確認

この時点の、Google Domains の「マイドメイン」では以下のような状態になります。 <ImageWrapper className="w-[80%]" src="screenshots/2020/domain-transfer/google-domain-mydomain.png" alt="Google Domains マイドメイン移管ステータス確認" />

Google Domains での移管申請後、お名前.comから「【重要】トランスファー申請に関する確認ご連絡」という件名のメールが届きます。自分の場合は15分くらいして届きましたが、場合によっては時間がかかるようです。

このメールに移管承認手続きのためのURLが記載されているのでアクセスし、移管手続きに関する注意事項を確認したら「承認する」「決定」と進み、移管承認が完了します。（移管承認完了に関するメールも届きます）

この後、再度 Google Domains の「マイドメイン」を確認し、保留中のドメインからマイドメインの方に移っていれば移管完了になります（自分の場合、移管承認から15分くらいかかりました）

お疲れさまでした。

思っていたよりは簡単に移管ができてよかったです。気になったところとしては、作業していてお名前.com の UI が何度かコロコロ変わっていたのがよくわからなかったです...。複数パターンの UI が混在しているんでしょうかね？

まぁ、今後は Google Domains でドメインを管理していきますー。

参考リンクまとめ

自分が業務をする上でのSlackの使い方を公開してみる

Sat, 14 Mar 2020 00:00:00 GMT

{/*  */}

エンジニア業界では、業務を行うにあたって Slack を活用している方が多いのではないでしょうか。以前、自分の Slack の使い方を展開したところ好評をいただけたので、今回思い切って記事にしてみました。

import ImageWrapper from "@/components/ImageWrapper.astro" import OG from "@/components/OG.astro"

Slack とは？

Slack（スラック）は、スチュワート・バターフィールド（英語版）によって開発されたチームコミュニケーションツール。 Slackという名称は"Searchable Log of All Conversation and Knowledge"のアクロニムである。

Slackはグループチャット、1対1のメッセージング（Direct Message）、音声通話をWebサービスとして提供している。

引用 <OG url="https://ja.wikipedia.org/wiki/Slack_(%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2)" />

Slack を知らない方だと、これを言われたところでイメージしにくそうなので実際のワークスペースの画像を貼っておきます。このブログを公開するにあたって、先輩に加勢していただいていた時期のやり取りなので、だいぶ前ですね(笑) <ImageWrapper src="screenshots/2020/slack-my-manner/slack-sample.png" alt="Slackワークスペースのサンプル画像" />

Slack を使うためにはまずワークスペースを作ります。そしてそのワークスペースに参加したい人がアカウントを作成して参加する感じです。なお、複数のワークスペースに参加もできます。

ワークスペースでは上の画像のようにチャンネルがあり、チャンネルごとにグループチャットができるようになっています。例えば、この案件についてはこのチャンネル、雑談はこのチャンネルとかですね。その他、ユーザ間で直接 DM を送ってやり取りしたり、音声通話をしたりできます。

自分はこの業界入ってから Slack を使うようになりました。これまでいちいち電話とかメールでやり取りしていたのをチャットでパパっと済ませられるので、時間も節約できますし何より楽だなと思ったのを覚えています。

自分の使い方・気を付けていること

※一応、最初に書いておきますが、あくまで自分の使い方・気を付けていることなので、これが正解だとか言うつもりは全くありません。

概要

大まかに書くとこんな感じです。

以下の内容を積極的に書き込む
- 進めているタスクで困ったことや懸念点
- 進捗や状況
- 確認事項
なるべくパブリックチャンネルでやりとりする
素早く返信もしくはリアクションをする
リマインダーを活用する

積極的に書き込む・進めているタスクで困ったことや懸念点

詰まったこと・困ったこと

進めているタスクで詰まったり困ることは往々にしてあります。技術的な内容であれば自分で調べて解決できることもありますが、自分で解決できない問題であったり調べてもわからない問題の場合は、一人でずっと悩むのでなく早めに共有するよう心がけています。時間がもったいないので。

書き込む際は、ただ「困ってます」とだけ書いてもしょうがないので、こんな感じのことを一緒に書きます。長くなりそうなときはスレッドにして付け加えていくこともあります。

どこで詰まったり困ったりしてるのか
結局、何ができれば OK なのか
自分が試したことと、試してどうなったか
問題の再現方法
自分の考え（あれば）
エラーの場合はスタックトレース

ちなみに自分は、よっぽどこの人に聞きたい！って時以外はメンションつけずに書いてます（ここら辺はその案件の環境にもよるかなと）

もし問題の解決方法をわかる人がいれば助けてもらえるかもしれませんし、Slack に上記のことを書くにあたって自分の頭の中でまとめる必要があるので、そこで整理されて自然と答えが出ることもあります。人によっては相手の時間を奪ってしまうと考える方もいるかもしれませんが、一人で悩み続けた結果遅れが出て加勢をお願いするとかの方が、よっぽど時間を奪うと思います。

無事問題解決に至った場合は、その解決方法も書いておきます。そうすることで、もし同じ問題に直面したメンバーがいたとき参考にできるからです。

懸念点・心配事

懸念点や心配事に関しても、一人で考え続けてもしょうがないので早めに共有します。もし自分でこうした方がいいかな？というものがあったとして、それが必ずしも正しいとは限らないので、ちゃんと共有して確認しておいた方が無難です。

書く内容としてはこんな感じ。

どういう懸念点や心配事なのか（～すると、こういう問題が生じそうなど）
問題に対する代替案（あれば）

積極的に書き込む・進捗や状況

特別この時間に書くと厳密に決めてやっているわけではないですが、作業開始時にまずやることをリスト化して書きだしておいて、そのスレッドに進捗を書いたりしています。書いた時点で完了しているもの、残っているものがわかるように書きます。

あまり進めてないならないで、正直に書いた方がいいです。見栄張って嘘ついても何の意味もないですし、余計迷惑かけるだけなので。

あと、途中経過の成果物の共有もなるべくやるようにしています。フロントエンドの内容だったらスクショや動画（重たくなりがちなので GIF がいいかも）を「こんな感じで作っていってます」とアップして確認してもらったり。

ちょっとした改修程度ならやらなくていいかもしれませんが、新しい機能であったり、やることが多いタスクだったりすると認識違いが発生することもあります。

はじめから100％のものを作るのは無理だと思ってますし、自分の中で100%であっても他の人やお客さんからはそうじゃないというのもざらにあります。もし認識違いをしていた場合に下手すると最初から全部やり直しとか、余計なところまでやってたとかになると目も当てられません...。途中経過を共有することでこういったことを防ぎやすいです。

また、こまめに進捗や状況を書いておくと、プロジェクト管理する側にとってもいくらかやりやすくなるのではないかと思っています。遅れが出ているなら出ているで、早めにリカバリーできるからです。期限ギリギリで遅れが...と言われたところで、カバーのしようがないです。

また、リモートで仕事をしている場合、より状況が見えにくくなるので積極的に共有した方がいいと思います。

とはいえ自分も、作業見積もりが下手くそなので、前に参加していた案件ではよく迷惑をかけていました...。今はいくらかマシになったかと思いたいです。

積極的に書き込む・確認事項

確認する相手が近くにいると対面で確認しがちですが、対面で確認したとしても記録が残るように確認事項とその回答をなるべく書くようにしています。

もしその確認事項について忘れてしまっても後からさかのぼって確認できますし、仮に認識違いがあったら早めに気付けるからです。それと、あまりないかもしれませんが、後から言った言ってないという無用のトラブルになるのを避けられます。

メリットをまとめるとこんな感じですかね。

自分の状況や思考を他のメンバーと共有できる
Slack で書くにあたって頭の中が整理できる
認識違いがあった時、早めに気付けるかも
遅れが出た時などに早めにリカバリーしやすくなる（プロジェクト管理しやすい）
もし問題の解決方法をわかる人がいれば助けてもらえるかも
他の人が同じ問題に遭遇した時、参考にできる
記録が残るので後から振り返ることができる（当人だけでなく、他のメンバーも）

なるべくパブリックチャンネルでやりとりする

質問をする時などに直接その相手に DM をする方がいるのですが、内容によっては自分と相手だけでなく、いろんな人にとって有益な情報になりえますし、パブリックなところでやり取りした方がいいと思っています。

詰まったこと・困ったことのところでも書きましたが、同じことを聞きたい人がいた場合、パブリックなところでやり取りしていればその人も一緒に解決できるからです。（決して DM を使うなということを言いたいわけではないです）

素早く返信もしくはリアクションをする

自分宛てのメンションがついた書き込みには、なるべくすぐに回答するようにしています。返信に書く内容が多いなどして時間かかりそうなときは、とりあえず読んでいることがわかるようにリアクションつけたり、「ちょっと待ってください」とかをまず返したり。

ただ、会議に参加していたりしてすぐ返せないときもあると思いますので、そういう時は無理にやらなくていいかなと思っています。（もちろん会議に参加するといった旨はちゃんと共有しておくこと）

全体宛てのメンションだった場合は、必ずしも回答書き込みまでは必要ないと思いますが、同様に読んでることがわかるようにリアクションをつけます。

リマインダーを活用する

リマインダーを設定することで、設定しておいた時間に設定した内容を通知してくれます。自分は忘れやすい予定やタスクがある時などにリマインダーを活用しています。コマンド例としては/remind 宛先通知内容 to 日付 at 時間みたいな感じ。

ちなみに小ネタとして、宛先にチャンネルを指定+全体にメンション飛ばしたい時は、通知内容に@hereなどの全体メンションをいれるとよいです。

※2025/09/14...以前はコマンド生成のツールサービスがあったのですが、今はアクセスできなくなっていました。

書き出すと意外と長くなってしまいましたが、これ全部ちゃんとやれてるの？って言われると、正直完全に定着出来ているとまではいかないです（苦笑）ただ、このやり方自体は好評をいただけたので、これからより洗練して業務に取り組んでいきます。

今回の内容が他の方に何かの参考になれば幸いです。

{/*  */}

参考リンクまとめ

ブログにGoogle AdSenseを導入する

Sun, 13 Oct 2019 00:00:00 GMT

先日から、Google AdSense を導入して広告を表示しています。ややうろ覚えの部分もありますが、導入から広告を表示するまでの手順をメモしておきます。

import ImageWrapper from "@/components/ImageWrapper.astro" import OG from '@/components/OG.astro'

Google AdSense とは？

Google が提供する、サイト運営者向けの広告配信サービス。無料で使用できます。よくサイトのヘッダーやフッター、記事中などに広告が貼ってあることがありますが、まさにそのような広告を貼ることで収益を得ることができます。なお、事前に Google AdSense の審査を受け、通過した場合に広告を掲載できるようになります。

事前準備

後に審査を受ける際に、ブログの内容を確認されます。その際に必要と思われる項目を書いてみました。

コンテンツの用意

特別、必要記事数が決まっているわけではないようなのですが、最低でも5記事くらいは必要な可能性があります。自分の場合は20記事ほどある状態で申請しました。

プライバシーポリシーの用意

ブログの内容に応じたポリシーを記述したページを用意しておきます。もし Google Analytics などの解析ツールを導入している場合は、Cookie の使用に関する記述など、必要な記述をしておきます。

独自ドメインの設定

必須ではないようですが、設定しておいた方がいいみたいです。自分はブログを Netlify で配信していますが、お名前.com で取得した独自ドメインを設定していました。

お問い合わせフォームの用意

これも必須ではないようです。自分の場合は用意するのを忘れたまま申請しましたが、無事通過しました。 Twitter へのリンクを作成していたので、それが連絡先として認識された説。

Google AdSense アカウント作成

Google AdSense にアクセスし、「お申し込みはこちら」を選択
申し込みフォームに必要な情報を入力 <ImageWrapper className="w-[70%]" src="screenshots/2019/google-adsense/adsense-form.png" alt="Google Adsense 申し込みフォーム" />
Google アカウントでログイン
「国または地域を選択」で「日本」を選択
利用規約を読んで同意して、「アカウントを作成」 (この利用規約に禁止事項なども記述があるので、よく読んでおいた方がいいです)

審査申し込み

Google AdSense アカウントを作成すると案内メールが送信されるので、その案内の通りに進めます。（申し込みフォームでメールを受け取る設定にしてないと届かないかも？） <ImageWrapper className="w-[80%]" src="screenshots/2019/google-adsense/adsense-start.png" alt="Google Adsense 有効化案内" />

サイトをリンク案内されているコードをブログの head タグの中に追記します。
AdSense のマイページで、支払先住所の確認案内に沿って入力していきます。なお、他の Google サービスで入力したことがあると、その住所が自動で入力されるようです（自分は GCP で入力していたためか、すでに住所が入力されていました）
案内に沿って進み「送信」を選択

これでブログの審査が行われます。通常は1日で終わりますが、場合によっては長くかかることもあるようです。

広告の設置

審査を無事通過すると、再度案内メールが届きます。 <ImageWrapper className="w-[80%]" src="screenshots/2019/google-adsense/adsense-complete.png" alt="Google Adsense 審査通過メール" />

これで広告を配置できるようになります。 AdSense のマイページの「広告」→「サマリー」から設定でき、各広告のコードをブログに埋め込むことで利用できます。（自分は Jekyll でブログを作っていて、本番環境でのみ広告表示をするように広告コードをjekyll.environment == 'production'と if で囲ってます）

自動広告

1つのコードを head タグに追記して有効にすると、ブログページの内容に応じて広告が自動で複数設置されます。プレビューでどんなふうに設置されるか確認可能です。設置される数も多く、記事の中にも設置されますが、自分はキリが悪い個所に設置されるのが嫌だったので後述の広告ユニットにしました。

広告ユニット

以下の3種類があります。こちらは各広告のコードを自分の好きな箇所に埋め込むことで、自由に設置できます。

ディスプレイ広告...どこにでも表示できるよう設計された万能な広告
インフィード広告...サイトのデザインに合わせてカスタマイズでき、投稿とリスティングの間に表示できる広告
記事内広告...サイトに合わせてカスタマイズでき、記事やコンテンツのページに表示される広告

ちなみに自分はディスプレイ広告を使用しています。

広告の微調整

広告のコードをそのまま付け加えるとdata-full-width-responsiveの値がtrueになっています。これがtrueになっていると、横幅いっぱいに広告が表示されるようになります。横幅いっぱいにしていた方がクリック率は高いらしいのですが、自分の場合は見栄えが気になったのでfalseにしています。

それと広告が記事内の文字にかかってしまっていたり、余白がなかったりして見栄えが悪かったので、広告コードの個所を div タグで囲って margin で調整しました。

その他必要なこと

ads.txt の設置

<OG url="https://support.google.com/adsense/answer/7532444?hl=ja" /> このファイルを作成しておくことで、自サイトの広告枠の販売者を厳密に管理し、偽の広告枠が広告主に提供されるのを防ぐことができ、作成することが推奨されています。

なんだか小難しいですが、なぜ必要かは以下のサイトが参考になります。 <OG url="https://webtan.impress.co.jp/e/2018/02/08/28001" />

ads.txt に問題があると AdSense のマイページで以下のような警告が表示されるので「今すぐ修正」を選択 <ImageWrapper src="screenshots/2019/google-adsense/adsense-warn.png" alt="ads.txtに問題がある場合の警告" />
「ダウンロード」を選択してファイルをダウンロード
ファイルをブログのルートに設置する（changeofpace.site/ads.txt のようにアクセスできる状態にしておく）

設置して反映されるまでは数日かかることがあります。警告が消えればOKです。

プライバシーポリシー

Google AdSense でも、Cookie の情報をもとに広告を配信することなどをプライバシーポリシーに記述が必要です。記述内容に関しては公式ヘルプを参考にしてください。

また以下のリンクも記述しておくとよさそうです。 <OG url="https://policies.google.com/technologies/ads?hl=ja" /> <OG url="https://policies.google.com/technologies/partner-sites" />

広告のブロック

AdSense のマイページの「ブロックのコントロール」から。カテゴリに応じて、配信したくない広告をブロックできます。また「広告のレビューセンター」を申請すると、数日後から広告の審査が可能です。

Google Analytics との連携

リンクすることで両者間にてデータ共有を有効にできます。

Google Analytics 側の「管理」→プロパティのサービス間のリンク設定の「AdSense のリンク設定」を選択
AdSense プロパティの選択リンクさせたい AdSense プロパティを選択。
リンクの設定リンクするアナリティクスビューを選択。
「リンクを有効化」を選択して、案内を確認して「完了」

Google Analytics 側で「行動」→「サイト運営者」以下で Google AdSense の情報が確認できます。

自分は広告が多いサイトはあまり好きじゃないのですが、広告を設置してみたかったので、今回導入してみました。まだアクセス数が少ないブログなので、すぐには収益は期待できませんが、今度アクセス数が増えていって収益がでればいいなーと。のんびり気長に待ちます。

参考リンクまとめ

ブログでGoogle Search Consoleを導入する

Mon, 30 Sep 2019 00:00:00 GMT

先日、Google Analytics に続いて、もう1つの解析ツールである、Google Search Console を導入してみました。少し記憶が曖昧なのですが、手順をメモしておきます。

import ImageWrapper from "@/components/ImageWrapper.astro" import OG from '@/components/OG.astro'

Google Search Console とは？

Google 検索での掲載順位を見たり、どんなクエリでユーザがサイトにアクセスしているかなどを確認できる解析ツールです。また、サイトマップを認識させることで Google のインデックスに登録し、サイト内のクローラー巡回を促進させるなど、SEO 対策を効率よく進めることができます。

導入手順

Google Search Console にアクセスして、「今すぐ開始」を選択

Google アカウントにログイン
プロパティタイプの選択（今回は「URL プレフィックス」を選択して、サイト URL を入力して進めます） <ImageWrapper className="w-[80%]" src="screenshots/2019/google-search-console/select-type.png" alt="プロパティタイプの選択画面" />

ちなみにドメインを選択した場合は、「www」のありなしや「http://」「https://」の違いに関わらず、一括での登録・集計が可能となります。複数の URL でそれぞれ集計したい時はこちらがいいようです。

所有権の確認もしログインした Google アカウントで Google Analytics を導入していると、そのアカウントから所有権を確認してくれます。 <ImageWrapper className="w-[80%]" src="screenshots/2019/google-search-console/check-domain.png" alt="所有権をGoogle Analyticsから確認した画面" />

導入していなかった場合は、既定の HTML ファイルをアップロードする、HTML の meta タグをサイトに追加するなど、他の確認方法が選択できます。

所有権の確認方法の追加ここまでで Google Search Console が使用できるようになりますが、所有権の確認方法は複数あった方がいいようなので、追加します。

メニューの「設定」へ行き、「所有権の確認」を選択。その他の確認方法の中から、いずれかを選択して表示される手順を行えば追加できます。

サイトマップの読み込み

サイトマップを登録して Google にサイトを認識させることで、検索結果に表示させやすくできます。

Jekyll の場合は、jekyll-sitemapというプラグインを導入することで、自動でsitemap.xmlを作成してくれます。 <OG url="https://github.com/jekyll/jekyll-sitemap" />

サイトだと sitemap xml generator というのが有名みたいです。 <OG url="https://www.xml-sitemaps.com" />

Google Analytics との連携

Google Analytics と連携することで、Google Analytics 側から Google Search Console の機能を使用できます。

所有権の確認の際に、Google Analytics と連携してくれましたが、機能を連携させるところは手動で設定する必要があるようです。

Google Analytics 側で「管理」へ
プロパティの中の「プロパティ設定」を選択
「Search Console を調整」を選択してビューにサイトの URL を登録する

登録後にプロパティの中のサービス間のリンク設定の中の「すべての商品」を選択して、リンク済みのサービスの中に Search Console があればOK。 <ImageWrapper className="w-[80%]" src="screenshots/2019/google-search-console/analytics-link.png" alt="Google Analyticsと他サービスとのリンク状況" />

これで Google Analytics 側から、Google Search Console の機能が使えるようになりました。 <ImageWrapper className="w-[80%]" src="screenshots/2019/google-search-console/analytics-search-console.png" alt="Google Analytics側からGoogle Search Consoleの機能を使用" />

プライバシーポリシー

Google Analytics と同様に、情報を収集する解析ツールであるため、プライバシーポリシーの記述が必要になります。自分の場合は Google Analytics 導入の際に記述した箇所にて付け加える形で書きました。

SEO に関してはまだまだ素人です。なので機能が全然使いこなせてませんが、Search Console の検索クエリとか見ると、こんな感じで検索されてるんだなーってちょっと楽しいですね。地道にこつこつ記事を書いてアクセス数を伸ばしていけたらいいなー。

参考リンクまとめ

Netlifyでホスティングしているサイトに独自ドメインを設定する

Tue, 09 Jul 2019 00:00:00 GMT

当ブログも独自ドメインを設定しましたー。設定方法をメモしておきます。

※2020/4/11 Google Domains のパターンも追記しました。

import ImageWrapper from "@/components/ImageWrapper.astro"

前提

すでにドメインを取得済み（今回はお名前.com or Google Domains）
Netlify でホスティング

設定

Netlify 側

Overview 画面で Domain Settings を選択
Domain Management → Domains → Custom Domains へ
Add domain alias を選択して、取得したドメインを設定

すると、ドメイン一覧で設定したドメインが灰色で表示されます。（サブドメイン無しのドメインを指定した場合は、サブドメインに www が指定されたドメインも自動的に追加されるそうです）

一緒に表示されているCheck DNS Configrationを選択すると、DNS レコードの設定の仕方が確認できます。

こんな感じ。

changeofpace.site ALIAS changeofpace.netlify.com.

changeofpace.site A 104.198.14.52

上記2つの設定方法があるので、このどちらかを設定すれば OK です。あとで DNS 設定をする際に使用します。

※2020/4/11追記 2020/4/14より、Netlifyドメインが〇〇.netlify.comから〇〇.netlify.appに移行されます。そのため、これ以降の場合は確認できる情報も.appの方になっているかと思われますので、適宜置き換えてください。（.comの方にアクセスした場合でも、.appの方にリダイレクトするようなので使えなくなるというわけではないようです）

また、サブドメインに関しても同様に確認可能です。こちらも後で一緒に設定します。

一例。

www CNAME changeofpace.netlify.com.

DNS 側

お名前.com の場合

ログインして、トップ画面から DNS タブへ
ドメインの DNS 関連機能設定を選択して次へ
ドメイン一覧から、設定するドメインを選択して次へ <ImageWrapper className="w-[80%]" src="screenshots/2019/custom-domain/domain-list.png" alt="お名前.comでのドメイン一覧" />
DNS レコード設定を利用するの設定するを選択 <ImageWrapper className="w-[80%]" src="screenshots/2019/custom-domain/domain-setting.png" alt="お名前.comのドメイン設定画面" />

DNS レコードを設定できる画面になります。ここで先ほど Netlify 側で確認したレコードを追加していきます。

自分の場合、A レコードと CNAME レコードを追加しました。 <ImageWrapper className="w-[80%]" src="screenshots/2019/custom-domain/setting-domain-list.png" alt="お名前.comで設定したレコード一覧" />

※2020/4/11追記 2020/4/14以降に設定する場合は、必要に応じて.appの Netlify ドメインの方に置き換えて設定してください。

Google Domains の場合

ログインして、サイドバーのマイドメインへ
ドメイン一覧から、設定するドメインを選択
サイトバーの DNS を選択
一番下のカスタムリソースレコードへ

ここで DNS レコードを設定できます。画像は以下の内容で A レコードと CNAME レコードを追加した例です。

changeofpace.site A 3600 104.198.14.52

www.changeofpace.site CNAME 3600 changeofpace.netlify.com

※2020/4/14以降に設定する場合は、必要に応じて.appの Netlify ドメインの方に置き換えて設定してください。

設定後

設定した DNS 設定が反映されるまで少し時間がかかります。反映されると Netlify 側で灰色表示だったドメインが、青緑色になってCheck DNS Configration表示が消えます。 <ImageWrapper className="w-[80%]" src="screenshots/2019/custom-domain/netlify-setting-domain.png" alt="Netlifyで設定したドメイン" />

DNS 設定が反映されると HTTPS 対応も自動で行ってくれます。こちらもしばらく時間がかかりますが、設定が終わると以下のような画面になります。 (Domain Management → Domains → HTTPS) <ImageWrapper className="w-[80%]" src="screenshots/2019/custom-domain/netlify-https.png" alt="NetlifyのHTTPS対応画面" />

これで設定は終了です。ブラウザで設定したドメインにてちゃんとページが表示されるか確認してみましょう。

元々、独自ドメイン設定は後回しにしようかなと思っていたのですが、思い付きで設定してしまいました。そんなに難しいこともなく、Netlify 側で案内が表示されるのは親切ですね。 HTTPS 対応も自動で行ってくれて楽ちんでした。

独自ドメイン設定したら検索にも引っかかるようになるのかな...？ SEO に関しては全然よくわからないので、これから勉強です。

参考リンクまとめ

Jekyll製ブログにGoogle Analytics導入

Sat, 06 Jul 2019 00:00:00 GMT

先日、当ブログに Google Analytics を導入したので、その流れをメモしておきます。

import ImageWrapper from "@/components/ImageWrapper.astro" import OG from '@/components/OG.astro'

Google Analytics とは

Google が提供するアクセス解析ツール。有料版もありますが、無料版でも多くのデータが得られます。

サイトへのアクセス数
サイトページごとの閲覧数
アクセスしたデバイスの種類
どこの国からアクセスがあったか

などなど。

導入

Google Analytics 側

まずは Google Analytics のページから登録します。すでに Google アカウントがあれば、そのアカウントで利用可能です。どのサイトで利用するか等、入力していきます。

登録すると、すべてのウェブサイトのデータの画面になります。

管理 → トラッキング情報 → トラッキングコードに移動すると、Google Analytics を利用するために必要なトラッキングコードが確認できます。ブログ側で埋め込みに使用するのでコピーしておきます。 <ImageWrapper src="screenshots/2019/google-analytics/analytics.png" alt="トラッキングコード表示画面" /> ※黒で塗りつぶしている箇所は、トラッキング ID が記載してあります。

ブログ側

トラッキングコード埋め込み

先ほどのトラッキングコードを、全てのウェブページの<head>タグに埋め込む必要があります。

使用しているテーマによっても異なると思われますが、自分が使用している jekyll-theme-hydeout では、元々このためのファイルが存在していました。ただ、Google Analytics で確認したトラッキングコードと異なっていた（古くなっていた？）ため、新しく同名のファイルを作成して上書き。

また、トラッキング ID の箇所は、config.ymlに切り出したかったので以下のように変数にしました。

{% if jekyll.environment == 'production' and site.google_analytics %}
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', '{{ site.google_analytics }}');
  </script>
{% endif %}

ここで、if jekyll.environment == 'production'としているのは、本番環境のみ、Google Analyticsを動作させるようにしたいからです。開発環境ではjekyll.environmentの値はdevelopmentになっています。

そして、本番環境では値がproductionになるように環境変数を設定しておく必要があります。

自分の場合、ホスティングには Netlify を使用しているため、こちらで設定しました。 netlify.tomlというファイルを使用しても設定できるそうなのですが、今回は手動で設定。 Setting → Build&Deploy → Environment から設定画面に行けます。 <ImageWrapper className="w-[70%]" src="screenshots/2019/google-analytics/netlify-environment.png" alt="Netlify環境変数設定画面" />

プライバシーポリシー

Google Analytics を利用する際は、プライバシーポリシーを記載したページの用意が必要になります。

ここでは、個人情報の保護や取り扱いについての方針を示す必要があり。

Cookie を使用していること
設定で Cookie は無効にできること
個人を特定する情報は収集しないこと
Google Analytics の利用規約

などの記述が必要になります。

いろんな方が書式を公開されているので、それを参考にして書いてみるといいでしょう。自分もいろんな方の書式を参考にさせていただきました。多分、大丈夫...のはず。

自分自身からのアクセスを除外(2020/05/03追記)

自分自身からのアクセスを除外した場合は Google アナリティクスオプトアウトアドオンを導入するとよいです。 <OG url="https://chrome.google.com/webstore/detail/google-analytics-opt-out/fllaojicojecljbmefodhfapmkghcbnh?hl=ja" />

Google Analytics の使い方はまだよくわかってないのですが、ブログへのアクセスが少ない段階でも入れておいた方がいいとか見かけたので、今回導入してみました。まずはのんびりアクセス数を見ておくのに使ってみますー。

ツール・サービス | Change Of Pace

情報整理から記録まで、Notionを活用してみる

Notion とは？

Notion の基本

ワークスペース

ページ

ブロック

自分の活用方法

日々の記録

ドキュメント下書き・メモ

参考書一覧

リンク集

開発フロー

その他の活用例など

Web サービスの Q & A ページ

Fast Notion

Notion Blog

Wraptas（※旧：Anotion）

参考リンクまとめ

Windows TerminalでWSLとGit Bashのターミナルを統合してみた（+ 設定項目簡易まとめ）

Windows Terminal とは？

導入

ダウンロード

起動

Git Bash の追加

guid の取得

設定の追記

日本語化

設定について

グローバル設定

プロファイルの設定

配色設定

アクション設定

参考リンクまとめ

Docusaurus(v2)製サイトにGoogle AnalyticsとGoogle Search Consoleを導入する

はじめに

@docusaurus/plugin-google-gtag

@docusaurus/plugin-google-analytics との違い

Google Analytics 導入

サイトを Google Analytics に登録

プラグインのインストール

設定の追記

プライバシーポリシーの用意

Google Search Console 導入

サイトを Google Search Console に登録

プライバシーポリシーの用意

@docusaurus/plugin-sitemap

プラグインのインストール

設定の追記

changefreq

priority

trailingSlash

サイトマップの読み込み

2.0.0-alpha.60前後か、@docusaurus/preset-classicプリセットの有効無効で設定方法が違う理由（※2020/08/02追記）

参考リンクまとめ

ドメインをお名前.comからGoogle Domainsに移管する

Google Domains とは？

移管手順

移管する上での注意事項

お名前.com 側での事前準備

移管ロック確認

AuthCode 確認

Whois 情報公開代行サービス無効化

Google Domains 側で移管申請

最終確認

参考リンクまとめ

自分が業務をする上でのSlackの使い方を公開してみる

Slack とは？

自分の使い方・気を付けていること

概要

積極的に書き込む・進めているタスクで困ったことや懸念点

詰まったこと・困ったこと

懸念点・心配事

積極的に書き込む・進捗や状況

積極的に書き込む・確認事項

なるべくパブリックチャンネルでやりとりする

素早く返信もしくはリアクションをする

リマインダーを活用する

参考リンクまとめ

ブログにGoogle AdSenseを導入する

2.0.0-alpha.60前後か、`@docusaurus/preset-classic`プリセットの有効無効で設定方法が違う理由（※2020/08/02追記）