Posts

1.この記事で達成したいこと 以下 4 点の内容を書き留め、次年度の履修登録の参考にしたい 単位取得状況 授業を受講してから自分に起きた変化 今年度の履修戦略と次年度に向けて 授業のひとこと感想 また、学割ネタも箇条書き程度だけど書いておきたい 公開後に出てきたネタ 2.前提 2021 年 4 月に大学 2 年生に編入学 今年度はコロナ情勢を踏まえて　リモート環境での受講 となっている。次年度以降もこの体制が続くか不透明。 そもそも通信制といえども全ての授業をフルリモート、オンラインで完結できるわけではない。スクーリングというキャンパスに足を運んで受講する授業もある。 cf. スクーリング - Wikipedia 働き方もほぼフルリモート、在宅勤務とスキマ時間を大学の勉強に充てることができている。これは仕事と学業の両立にかなり大きく貢献しているはず。 また授業ではどんなことを扱うのか？教科書は何を使っているのか？といったことは以下のページにシラバスとしてあがっている Web Syllabus（講義概要） 2021 年度 理工学部 情報科学科（通信課程） | 帝京大学 宇都宮キャンパス なぜ大学で勉強しようと思ったか？ なぜ大学で勉強しようと思ったか？それは以下の 2 点が大きい。 腰を据えて体系的に学びたい 好きな「学ぶこと」で名をあげたい cf. いろいろ悩んで帝京大学理工学部(通信教育課程)の社会人大学生になった もちろん、勉強しようと思った理由として、「CS の学位を取ることで求職活動においてグッと選択肢が広がるから」というのもあるが、これは卒業してしまえば誰にでも言えることであり、僕個人に限った話ではなかったので省いた。僕にとって進学するという決断をするうえで決定的な要因となったのは上記の 2 点だと思っている。 また、外資への転職が進学のモチベーションだということもいらっしゃると思うので参考文献だけ紹介しておきたい。 エンジニアとして世界の最前線で働く選択肢 ~渡米・面接・転職・キャリアアップ・レイオフ対策までの実践ガイド | 竜 盛博 |本 | 通販 | Amazon 3.単位取得状況 サマリー 総取得単位数は62 内、2022 年度の編入時に認定された単位数は 32 授業と試験やレポートを突破して取得した単位数は 30 なお、落とした単位は 4 であり、履修単位数は 30+4=34 科目別(受講した時期) 単位取得確定 物理学 1(1Q) 基礎数学(1Q) 幾何学(1Q) プログラミング 1(1Q) プログラミング 2(1Q) Web 技術基礎(2Q) 技術者倫理(2Q) プログラミング 3(2Q) プログラミング 4(2Q) 情報技術基礎(3Q) コンピュータネットワーク(3Q) データ構造とアルゴリズム(3Q) グラフ理論(3Q) 離散数学(4Q) データベース論(4Q) 落単 論理数学(2Q) 数理統計学(4Q) 補足 僕が今年度履修している授業の数は 17 個であり、また今回履修した授業は全て取得できる単位は 2 単位 1Qあたりに履修している授業の数は4個程度 また試験は 1Q は 7 月頭、2Q は 9 月頭、3Q は 12 月頭、4Q は 2 月頭となっており、試験のおよそひと月前程度までに授業ごとに課せられているレポートや中間試験、ミニテスト（以後、事前課題とする）などをこなす必要がある。そのため、1Qだけ他の期より時間に余裕があることになる。 4.授業を受講してから自分に起きた変化 「あ！それ、授業で習ったやつだ！」という進◯ゼミ現象 に業務やプライベートでの技術調査、読書などあらゆる場面で遭遇するようになった 自分の引き出しが増えた気がする 「知識がモノになった」とは言えない 少なくとも受講する前は全く興味を持っていなかった学問領域に対して、「単位を取る」という目的の下、時間を区切って踏み込むようになった 多少なりとも自分の関心対象は広がっているように感じる 5.今年度の履修戦略と次年度に向けて 今年度の履修戦略 1Q だけ時間に余裕がある点を踏まえて授業で課せられている事前課題を早々と終えるようにハイペースで進めた 一方で物理学は高校すら履修していないレベルなので以下の N 予備校の授業を受講したり、市販の参考書や問題集を浴びるように解いたりした 物理 ベーシック | N 予備校 次年度に向けて 単位をとれるだけとる！ 履修した授業のうち時間をかけないといけない授業とそうではない授業を早期に見極める 今年度の物理学 1 のような無限に時間がとられるような授業は学期が始まる前に時間がとられると判断できれば、勉強をはじめてしまってもいいかもしれない 授業には事前履修推奨授業を掲げているものがあるので、履修選択の際には要注意 前述したシラバスに記載あり 教科書や参考書は絶版となっているものがあり、そういったものは「早いもの勝ち」となっている 見つけたら即買いもいいけど先生に相談もアリ 先生に相談したら代替書籍をご紹介いただいた 6.授業のひとこと感想や使った参考書など 物理学 1(1Q) 入学前に高校レベルの知識をおさえておくべきだった N 予備校の物理学の授業を倍速で 2-3 回ほど見てなんとかキャッチアップしようとした（できたというより、無理やりなんとかした） 物理 ベーシック | N 予備校 勉強メモ 基礎数学(1Q) 高校数学レベルの知識をおさえておくべき 授業動画と教科書をこなしながら、「Z 会のチェック＆リピート」と「大学への数学 1 対 1 シリーズ」で補強した 勉強メモ 幾何学(1Q) 授業動画と教科書、教科書と大学で推奨されている参考書を使った 幾何学的なキホン用語をさらっていく プログラミング 1(1Q) Processing という Java っぽい言語を使って基本的なプログラミングの考え方、書き方を学んでいく 実際にコーディングもするのでローカル PC や EC2 などの開発環境は必要 Processing メモ プログラミング 2(1Q) 前述したプログラミング 1(1Q)の Java 版 Web 技術基礎(2Q) Web の歴史、思想から HTML, CSS, JavaScript といった Web 周りを広く扱っている 技術者倫理(2Q) 理論とケーススタディがミックスされている 技術の担い手としての立ち振る舞いを考えさせられる プログラミング 3(2Q) 前述したプログラミング 1(1Q)の応用編という位置づけ プログラミング 1(1Q)と内容が被るところも プログラミング 4(2Q) 前述したプログラミング 2(1Q)の応用編という位置づけ 論理数学(2Q) 単位を落としてしまったので勉強メモだけ置いてノーコメント 勉強メモ 情報技術基礎(3Q) とくになし。 コンピュータネットワーク(3Q) 大学指定の教科書やマスタリング TCP/IP―入門編―(第 6 版) やネットワークはなぜつながるのか 第 2 版 など著名な本もいいけど以下の本から入門するのがよかった。なにより絵本となっているところがとっつきにくさを取っ払う要因となった。 TCP/IP の絵本 ネットワークっておもしろい! データ構造とアルゴリズム(3Q) 大学指定の教科書とレジュメの他に 離散数学入門#5: 最短経路問題：ダイクストラ法とワーシャル–フロイド法 などググりながら勉強していた グラフ理論(3Q) データ構造とアルゴリズムの勉強中にグラフ理論の授業で出てくる分野がが出てくることがちょくちょくあり、両者の勉強は並行しておこなっていた記憶がある レジュメも使った 離散数学(4Q) レジュメと教科書、やさしく学べる離散数学 、ガロア理論特別講義シリーズ 、合同式と RSA 暗号シリーズを使って勉強していた これがイチバン今年度で時間を要した授業かも（改めてガロア理論について端的に答えられる自信はない、、。雲を掴むような感覚が続いた） 数理統計学(4Q) 離散数学に時間がかかり、試験を受けるための事前課題の提出を見送り、落単を受け入れた データベース論(4Q)データベース論 教科書の他に、達人に学ぶ DB 設計 徹底指南書 初級者で終わりたくないあなたへ を軸に据えて勉強した b+木の理解に苦戦したので、B 木（最強 DB 講義「いまどきのデータベース索引技術」by 石川佳治 教授 PART2） も見た 7.学割が使えるもの一覧 Amazon プライム年会費 Amazon Prime Student YouTube プレミアム月額会員費 Get a YouTube student membership - Computer - YouTube Help 学割 Max4 年通達がきたので、休学や留年される方は要注意！！ Github Student Developer Pack JetBrains や Azure、Datadog などから学割プランを適用する際に必要 JetBrains IDEライセンス（無料！） Free Educational Licenses - Community Support Azure Azure for Students – Free Account Credit | Microsoft Azure Datadog（10 サーバー分、2 年間無料！） Free Datadog accounts for students オライリーメディア ACM(The Association for Computing Machinery)に所属する必要がある https://myacm.acm.org/ cf. ACM 会員になってオライリーの本が読み放題 | たむたむの日記 DELL や HP など PC メーカーの通販 Dell の学割キャンペーン | Dell 日本 HP の学割！ | 日本 HP 8.ぼやき 9.公開後に出てきたネタ 10.参考 いろいろ悩んで帝京大学理工学部(通信教育課程)の社会人大学生になった 入学を決め、手続きをしている頃に書いた、決意表明的なもの Web Syllabus（講義概要） 2021 年度 理工学部 情報科学科（通信課程） | 帝京大学 宇都宮キャンパス ACM 会員になってオライリーの本が読み放題 | たむたむの日記 エンジニアとして世界の最前線で働く選択肢 ~渡米・面接・転職・キャリアアップ・レイオフ対策までの実践ガイド | 竜 盛博 |本 | 通販 | Amazon

1.この記事で達成したいこと Mariadb Galera ClusterをDocker Composeで構築したい 複数DBコンテナを立ち上げたい ※ Docker HubにあがっているDocker ComposeのサンプルコードではDB1台構成となっている。。。 bitnami/mariadb-galera - Docker Image | Docker Hub 無事立ち上げることができました〜 gkzz/mariadb-galera-cluster: MariaDB Galera Cluster on docker-compose 2.前提 Maria DBコンテナ4台構成とする $ make ps docker-compose ps Name Command State Ports -------------------------------------------------------------------------------------------------------------------------------------------------- db00 docker-entrypoint.sh --wsr ... Up 0.0.0.0:3306->3306/tcp, 0.0.0.0:4444->4444/tcp, 0.0.0.0:4567->4567/tcp, 0.0.0.0:4568->4568/tcp db01 docker-entrypoint.sh mysqld Up 0.0.0.0:13306->3306/tcp, 0.0.0.0:14444->4444/tcp, 0.0.0.0:14567->4567/tcp, 0.0.0.0:14568->4568/tcp db02 docker-entrypoint.sh mysqld Up 0.0.0.0:23306->3306/tcp, 0.0.0.0:24444->4444/tcp, 0.0.0.0:24567->4567/tcp, 0.0.0.0:24568->4568/tcp db03 docker-entrypoint.sh mysqld Up 0.0.0.0:33306->3306/tcp, 0.0.0.0:34444->4444/tcp, 0.0.0.0:34567->4567/tcp, 0.0.0.0:34568->4568/tcp $ 3.環境情報 $ grep VERSION /etc/os-release VERSION="20.04.3 LTS (Focal Fossa)" VERSION_ID="20.04" VERSION_CODENAME=focal $ docker --version Docker version 19.03.3, build a872fc2f86 $ docker-compose --version docker-compose version 1.24.1, build 4667896b $ grep image docker-compose.yml image: mariadb:10.6.4 image: mariadb:10.6.4 image: mariadb:10.6.4 image: mariadb:10.6.4 $ Docker Composeで扱うファイル、ディレクトリ構成 $ tree -L 3 . ├── db00 │ ├── conf.d │ │ └── galera.cnf │ ├── docker-entrypoint-initdb.d │ │ └── seed.sql │ └── scripts │ └── my-wsrep-notify.sh ├── db01 │ ├── conf.d │ │ └── galera.cnf │ └── scripts │ └── my-wsrep-notify.sh ├── db02 │ ├── conf.d │ │ └── galera.cnf │ ├── docker-entrypoint-initdb.d │ └── scripts │ └── my-wsrep-notify.sh ├── db03 │ ├── conf.d │ │ └── galera.cnf │ ├── docker-entrypoint-initdb.d │ └── scripts │ └── my-wsrep-notify.sh ├── docker-compose.yml ├── LICENCE ├── Makefile 略 4.設定 4-1.docker-compose.ymlを作成 $ vi docker-compose.yml version: "3.7" services: db00: image: mariadb:10.6.4 container_name: db00 hostname: db00 ports: # https://mariadb.com/kb/en/configuring-mariadb-galera-cluster/#network-ports # Standard MariaDB Port (default: 3306) - 3306:3306 # Galera Replication Port (default: 4567) - 4567:4567 # IST Port (default: 4568) - 4568:4568 # SST Port (default: 4444) - 4444:4444 volumes: - type: volume source: ./db00_data target: /var/lib/mysql - type: bind source: ./db00/conf.d/galera.cnf target: /etc/mysql/conf.d/galera.cnf - type: bind source: ./db00/docker-entrypoint-initdb.d/seed.sql target: /docker-entrypoint-initdb.d/seed.sql environment: # ALLOW_EMPTY_PASSWORD is recommended only for development. - MARIADB_ALLOW_EMPTY_ROOT_PASSWORD=yes #- MARIADB_ROOT_HOST=% #- MARIADB_ROOT_PASSWORD=yourpassword - MARIADB_DATABASE=demo - MARIADB_INITDB_SKIP_TZINFO=true - TZ=Asia/Tokyo restart: on-failure networks: node_network: command: ["--wsrep-new-cluster"] db01: image: mariadb:10.6.4 container_name: db01 hostname: db01 ports: - 13306:3306 - 14567:4567 - 14568:4568 - 14444:4444 volumes: - type: volume source: ./db01_data target: /var/lib/mysql - type: bind source: ./db01/conf.d/galera.cnf target: /etc/mysql/conf.d/galera.cnf environment: # ALLOW_EMPTY_PASSWORD is recommended only for development. - MARIADB_ALLOW_EMPTY_ROOT_PASSWORD=yes #- MARIADB_ROOT_HOST=% #- MARIADB_ROOT_PASSWORD=yourpassword - MARIADB_DATABASE=demo - MARIADB_INITDB_SKIP_TZINFO=true - TZ=Asia/Tokyo restart: on-failure networks: node_network: db02: image: mariadb:10.6.4 container_name: db02 hostname: db02 ports: - 23306:3306 - 24567:4567 - 24568:4568 - 24444:4444 volumes: - type: volume source: ./db02_data target: /var/lib/mysql - type: bind source: ./db02/conf.d/galera.cnf target: /etc/mysql/conf.d/galera.cnf environment: # ALLOW_EMPTY_PASSWORD is recommended only for development. - MARIADB_ALLOW_EMPTY_ROOT_PASSWORD=yes #- MARIADB_ROOT_HOST=% #- MARIADB_ROOT_PASSWORD=yourpassword - MARIADB_DATABASE=demo - MARIADB_INITDB_SKIP_TZINFO=true - TZ=Asia/Tokyo restart: on-failure networks: node_network: db03: image: mariadb:10.6.4 container_name: db03 hostname: db03 ports: - 33306:3306 - 34567:4567 - 34568:4568 - 34444:4444 volumes: - type: volume source: ./db03_data target: /var/lib/mysql - type: bind source: ./db03/conf.d/galera.cnf target: /etc/mysql/conf.d/galera.cnf environment: # ALLOW_EMPTY_PASSWORD is recommended only for development. - MARIADB_ALLOW_EMPTY_ROOT_PASSWORD=yes #- MARIADB_ROOT_HOST=% #- MARIADB_ROOT_PASSWORD=yourpassword - MARIADB_DATABASE=demo - MARIADB_INITDB_SKIP_TZINFO=true - TZ=Asia/Tokyo restart: on-failure networks: db_network: volumes: db00_data: db01_data: db02_data: db03_data: networks: db_network: driver: bridge 4-2.cnfファイルを作成 コンテナひとつにつきひとつ用意するので4つ作成 名前は任意だが、コンテナ側のパスは/etc/mysql/conf.d/配下に置くこと ※ここでは/etc/mysql/conf.d/galera.cnfとして配置 ※なおホスト側では、DBコンテナ4台分以下のパスにcnfファイルを置いている $ find ./ -type f -regex ".*galera.cnf" ./db01/conf.d/galera.cnf ./db02/conf.d/galera.cnf ./db03/conf.d/galera.cnf ./db00/conf.d/galera.cnf galera.cnfを作成 例としてdb00に配置するgalera.cnf ホスト側のパスはdb00/conf.d/galera.cnf 残り3台、db01, db02, db03のgalera.cnfについては後述 $ vi db00/conf.d/galera.cnf [mysqld] # バイナリログの出力場所を指定 # /var/log/mysql/mariadb-bin.[0-9]+という形で、数字のついたファイルが作成 # サンプルは少しスクロールしたところに記載 # https://mariadb.com/kb/en/replication-and-binary-log-system-variables/#log_bin log_bin ='/var/log/mysql/mariadb-bin' # Galera Clusterを使う場合、'row'とすること # https://mariadb.com/kb/en/replication-and-binary-log-system-variables/#binlog_format # c.f. https://mariadb.com/kb/en/mariadb-galera-cluster-known-limitations/ binlog_format='row' # バイナリログを自動的に削除するまでの日数 # https://mariadb.com/kb/en/replication-and-binary-log-system-variables/#expire_logs_days expire_logs_days=1 # Galera Clusterを使う場合、'InnoDB'とすること # https://galeracluster.com/library/training/tutorials/configuration.html # InnoDB is enabled by default with a 10MB datafile in /var/lib/mysql/. # Read the manual for more InnoDB related options. There are many! default_storage_engine='InnoDB' # Galera Clusterを使う場合、'READ-COMMITTED'とすること # https://galeracluster.com/library/documentation/isolation-levels.html # c.f. https://mariadb.com/kb/en/set-transaction/ # c.f. https://gihyo.jp/dev/serial/01/mysql-road-construction-news/0050?page=2 transaction-isolation='READ-COMMITTED' # 「5-1.innodb-flush-log-at-trx-commitは0〜3のうちどれを指定すればよいか？」 # https://mariadb.com/docs/reference/mdb/cli/mariadbd/innodb-flush-log-at-trx-commit/#mdb-cli-mysqld-innodb-flush-log-at-trx-commit innodb-flush-log-at-trx-commit=1 # https://galeracluster.com/library/training/tutorials/configuration.html#system-configuration # https://qiita.com/chaspy/items/baad6947ae0f8b169868 innodb_autoinc_lock_mode=2 # データとソケットのパスを指定 # https://www.digitalocean.com/community/tutorials/how-to-change-a-mariadb-data-directory-to-a-new-location-on-centos-7 datadir='/var/lib/mysql' socket='/run/mysqld/mysqld.sock' # このあたりの書き方の参考資料 # 特にwsrep_cluster_addressで全台ホストやIPを指定するということは重要そう # https://dba.stackexchange.com/questions/130922/error-wsrep-gcs-src-gcs-cppgcs-open1379-failed-to-open-channel-test-clu/131487 [galera] wsrep_on='ON' wsrep_provider='/usr/lib/galera/libgalera_smm.so' wsrep_cluster_address='gcomm://db00,db01,db02,db03' wsrep_cluster_name='my_galera' wsrep_sst_method='rsync' wsrep_slave_threads=2 wsrep_node_address='db00' # このあたりの書き方の参考資料 # wsrep_drupal_282555_workaroundは今ではいらないかも # https://qiita.com/chaspy/items/baad6947ae0f8b169868 wsrep_auto_increment_control='ON' wsrep_drupal_282555_workaround='ON' wsrep_retry_autocommit=10 # Can't connect to MySQL server on '127.0.0.1' # https://takapi86.hatenablog.com/entry/2018/12/16/140314 # https://kamatimaru.hatenablog.com/entry/2020/05/30/023739 [client] protocol='TCP' log_bin =’/var/log/mysql/mariadb-bin’のサンプル $ docker-compose exec db00 ls -la /var/log/mysql/ total 60 drwxr-s--- 1 mysql adm 4096 Sep 15 00:35 . drwxr-xr-x 1 root root 4096 Aug 31 12:44 .. -rw-rw---- 1 mysql adm 27616 Sep 15 00:35 mariadb-bin.000001 -rw-rw---- 1 mysql adm 1453 Sep 15 00:35 mariadb-bin.000002 -rw-rw---- 1 mysql adm 393 Sep 15 00:35 mariadb-bin.000003 -rw-rw---- 1 mysql adm 438 Sep 15 00:35 mariadb-bin.000004 -rw-rw---- 1 mysql adm 389 Sep 15 00:35 mariadb-bin.000005 -rw-rw---- 1 mysql adm 170 Sep 15 00:35 mariadb-bin.index $ db01, db02, db03はdb00/conf.d/galera.cnfをコピーし、以下2点だけ書き換えればok wsrep_node_address=‘db00’ ※wsrep_node_addressとはコンテナのサービス名のこと $ find ./ -type f -regex ".*galera.cnf" | xargs grep "wsrep_node_address=" ./db01/conf.d/galera.cnf:wsrep_node_address='db01' ./db02/conf.d/galera.cnf:wsrep_node_address='db02' ./db03/conf.d/galera.cnf:wsrep_node_address='db03' ./db00/conf.d/galera.cnf:wsrep_node_address='db00' $ ※似たようなものとして、wsrep_cluster_addressがあるが、これはクラスターを構成するDBコンテナ全台を指す ここではdb00, db01, db02, db03の4台 $ find ./ -type f -regex ".*galera.cnf" | xargs grep "wsrep_cluster_address" ./db01/conf.d/galera.cnf:wsrep_cluster_address='gcomm://db00,db01,db02,db03' ./db02/conf.d/galera.cnf:wsrep_cluster_address='gcomm://db00,db01,db02,db03' ./db03/conf.d/galera.cnf:wsrep_cluster_address='gcomm://db00,db01,db02,db03' ./db00/conf.d/galera.cnf:wsrep_cluster_address='gcomm://db00,db01,db02,db03' $ 5.調べていること 5-1.innodb-flush-log-at-trx-commitは0〜3のうちどれを指定すればよいか？ Controls the durability/speed trade-off for commits. Set to 0 (write and flush redo log to disk only once per second), 1 (flush to disk at each commit), 2 (write to log at commit but flush to disk only once per second) or 3 (flush to disk at prepare and at commit, slower and usually redundant). 1 and 3 guarantees that after a crash, committed transactions will not be lost and will be consistent with the binlog and other transactional engines. 2 can get inconsistent and lose transactions if there is a power failure or kernel crash but not if mysqld crashes. 0 has no guarantees in case of crash. 0 and 2 can be faster than 1 or 3. ...

1.この記事で達成したいこと アコーディオンメニューをHugoで作ったこのブログ(gkzz.dev)で使いたい アコーディオンとは、長い説明やサンプルコードを折りたたむようにすることで、見たいときだけクリックして見ることができるナビゲーションメニューのひとつ 参考：アコーディオンメニュー（accordion menu）とは - IT用語辞典 e-Words アコーディオンの一例 青空文庫から「こころ」の冒頭を抜粋します。 私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚はばかる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執とっても心持は同じ事である。よそよそしい頭文字かしらもじなどはとても使う気にならない。 私が先生と知り合いになったのは鎌倉かまくらである。その時私はまだ若々しい書生であった。暑中休暇を利用して海水浴に行った友達からぜひ来いという端書はがきを受け取ったので、私は多少の金を工面くめんして、出掛ける事にした。私は金の工面に二に、三日さんちを費やした。 出所：https://www.aozora.gr.jp/cards/000148/files/773_14560.html 2.方針 アコーディオン（アコーディオンメニュー）をHTMLのdetailsタグとsummaryタグを使って実装する c.f. https://developer.mozilla.org/ja/docs/Web/HTML/Element/details 3.環境情報 $ grep VERSION /etc/os-release VERSION="20.04.3 LTS (Focal Fossa)" VERSION_ID="20.04" VERSION_CODENAME=focal ※ アコーディオンをHugoで使う上で求められる技術はHTML/CSSです。Hugoの推奨バージョンはドキュメントを読むかぎり、記載されていおりませんでした。私の環境では以下の2つのバージョンで動作確認をしております。ご参考までに。 $ hugo version hugo v0.88.1-5BC54738+extended linux/amd64 BuildDate=2021-09-04T09:39:19Z VendorInfo=gohugoio $ $ hugo version hugo v0.88.1-5BC54738 linux/amd64 BuildDate=2021-09-04T09:39:19Z VendorInfo=gohugoio $ 4.アコーディオンの設定方法 Hugoのテーマを使っていない場合、layouts/shortcodes/accordion.htmlを作成 e.g.：layouts/shortcodes/accordion.html `※ Markdownでアコーディオンを使う場合、layouts/shortcodes/配下に作ったアコーディオンの設定ファイル名(accordion.html)をMarkdownで指定する Hugoのテーマを使っている場合、themes//layouts/shortcodes/accordion.htmlを作成 Hugoのテーマはsubmoduleとして扱っていれば、themes/*/layouts/shortcodes配下にファイルを置いてもHugoプロジェクト（自分のブログ）のリポジトリにpushすることが難しいです。 $ vi layouts/shortcodes/accordion.html <details> <summary>{{ .Get "title" | default "e.g." }}</summary> {{ .Inner | markdownify }} </details> 設定は完了したので、Markdownから使ってみる アコーディオンの中括弧( { } )は二重で囲ってください！ 下記はMarkdownで書いてもアコーディオンが有効とならないように、あえて中括弧をひとつで囲っています。 {< accordion title="ここをクリックしてみて" >} 青空文庫から「こころ」の冒頭を抜粋します。 > 私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚はばかる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執とっても心持は同じ事である。よそよそしい頭文字かしらもじなどはとても使う気にならない。 >　私が先生と知り合いになったのは鎌倉かまくらである。その時私はまだ若々しい書生であった。暑中休暇を利用して海水浴に行った友達からぜひ来いという端書はがきを受け取ったので、私は多少の金を工面くめんして、出掛ける事にした。私は金の工面に二に、三日さんちを費やした。 出所：https://www.aozora.gr.jp/cards/000148/files/773_14560.html {< /accordion >} ※ こちらで書かれているやりかたはうまくいかなかった。cssを用意する必要があるように思うけど、cssのサンプルコードが見当たらなかった。そこで上記のとおり、detailsタグとsummaryタグを使ってアコーディオンを実装することとした。 ...

1.この記事で達成したいこと Google Analytics 4から採用された　Measurement ID(e.g. G-00000XXXXX) の設定をHugoでしたい Tracking ID(e.g. UA-000000-2)を使ってGoogle Analyticsの設定をする方法は多く紹介されている Measurement IDの解説記事はあっても修正するファイルのパスが間違っていたりしていたので書こうと思った ※Google Analytics v4を使っている場合でも、Measurement IDとTracking ID(e.g. UA-000000-2)を併用することはできる。 ※詳細は「おまけ.Google Search Consoleを使うためにTracking IDも設定する」で書いているので最後まで読んでほしい。 2.前提 Measurement IDの取得方法については解説せず、以下の記事に譲りたい What happened to my Tracking ID? - Analytics Help　3.設定方法 以下を参考に進める Installation · adityatelange/hugo-PaperMod Wiki Google Analytics 4 Implementation in Hugo config.ymlを修正 パスは/path/to/${BLOG_DIR}/config.yml params: # Hugoにおける"production"の意味合いは、Hugoで立ち上げているウェブサイトがググって見つけることができるぐらいのニュアンス # 余談だが、ローカルで"Hugo server -D"を実行した場合のenvは"development" env: production googleAnalyticsID: <G-00000XXXXX> analytics-gtag.htmlを以下のパスに新たに作成 /path/to/${BLOG_DIR}/layouts/partials/analytics-gtag.html $ mkdir -p layouts/partials $ touch layouts/partials/analytics-gtag.html <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id={{ .Site.Params.GoogleAnalyticsID }}"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '{{ .Site.Params.GoogleAnalyticsID }}'); </script> PaperModが用意しているbaseof.htmlを以下のパスにコピーして修正 /path/to/${BLOG_DIR}/layouts/_default/baseof.html $ mkdir -p layouts/_default $ cp themes/PaperMod/layouts/_default/baseof.html layouts/_default/ $ find ./ -type f -name 'baseof.html' ./themes/PaperMod/layouts/_default/baseof.html ./layouts/_default/baseof.html <head> <!-- ここから追記 --> {{ if .Site.Params.GoogleAnalyticsID }} {{ partial "analytics-gtag.html" . }} {{ end }} <!-- ここまで追記 --> {{- partial "head.html" . }} </head> 4.設定ができたか確認する デプロイしてからGoogle Analyticsでアクセスがとれているか確認する以外の方法を考えてみたので書き残しておく。 ...

この記事で達成したいこと 購入した独自ドメインのサブドメインをFirebase Hostingで使いたい 前提 カスタムドメインはgkzz.devとし、購入先はGoogle Domains Firebase Hostingではgkzz.devのサブドメインであるblogs.gkzz.devを指定する 設定がうまくできず、Firebase Hostingではgkzz.devを指定するように変更 blog.gkzz.devにアクセスが飛んできた場合はgkzz.devへリダイレクトするようにした 以下のFirebaseのドキュメントを参考に進める。 Connect a custom domain | Firebase Firebase Hostingの画面でカスタムドメインを登録 https://console.firebase.google.com からFirebaseのコンソール画面へログイン Firebase Hostingで使うプロジェクトを選択するか、新規に作成 ここでは既存のプロジェクトを選択している 画面左の Hosting をクリック Add custom domain をクリックするとポップアップ画面が表示される ポップアップ画面から Qucik setup 、 Aレコード を選択したら、デプロイ先となるカスタムドメイン名を入力し、IPアドレス をコピーしておく https://domains.google.com の画面左側の DNS をクリック Custom recordsにて左からデプロイしたい カスタムドメイン名 、A 、先ほどコピーした IPアドレス を入力していく 以上で、Firebase HostingとGoogle Domainで購入したカスタムドメインとの設定は完了した。 ※接続が確認できた画面は、自分のブログの画面しか確認できていない。Firebase HostingとGoogle Domainで購入したカスタムドメインとの設定のみした場合、どういう画面になるのかサンプルの資料はない。。 P.S. TXTレコードはGoogle Domainsで登録することなく終わったけど。。 TXTレコードはGoogle Domainsで登録することなく、Firebase HostingとGoogle Domainsで購入したカスタムドメインとの設定が終わってしまった。 ...