mofmofでは毎日オンライン朝会をしていて、２チームに別れてzoomの部屋に入りそれぞれの部屋で１人ずつ最近の出来事をしゃべるってことを15分程やっています。 ちょっと雑談しましょう的なノリです。 以前からgas(google app script)で朝会を管理していたのですが、 - コード管理とデプロイが面倒 - 環境変数にすべき値（スプレッドシートIDとかslackのhookURLなど）をハードコーディングする必要がある - gs≒はjsなので型が無い claspを使うとtypescriptで開発できたり、githubと連携してデプロイできそうだったり（※未検証）するので良さそうだなと思ってclaspで作り直しました。 ## やること - スプレッドシートからメンバーリストを取得 - メンバーをシャッフルする - シャッフルしたメンバーを２チームに分ける - スプレッドシートからランダムでお題（話すことが思いつかない人用にお題を出す）を１つ取得 - 特別コンテンツ（おしゃべりじゃないことをする日、オンラインゲーム・瞑想・ヨガとか）をやるかどうか抽選する - ↑情報をテキスト化する - テキストをslackに通知する ## セットアップ セットアップ等はこちらの記事を参考にしました。 https://dev.classmethod.jp/articles/ts2gas/ clasp自身がtypescriptを変換してくれるので特に何も考えることもなくtsがgsに変換された上でgasにデプロイされます。 ## ファイル分割 typescriptが使えるので、てっきりモジュール化(ESM)・ファイル分割もいけるんだろうと思っていたのですができませんでした。 デプロイしたら単純にimport文がコメントアウトされてるだけでした。 ### webpack サードパーティのプラグイン等を使えばモジュール化もできそうな感じではあったのですが、webpackでローカルビルドしてjsに変換した上でアップする方式にしました。 こちらの記事を参考にしました。 https://zenn.dev/tacck/articles/20211218_gas#webpack-%E8%A8%AD%E5%AE%9A やってることは - webpackにgas-webpack-pluginを追加している 	- gasが呼び出す関数をトップレベルに設定する 	- globalに設定した関数がgas上で選択可能になる 	- https://github.com/fossamagna/gas-webpack-plugin 	- 例： 	 ``` $index.ts 	 import { main, timerMain } from "./modules/main"; declare const global: { &nbsp;[x: string]: unknown; }; global.main = main; // 処理の本体。本来はトップレベルにする必要ない（timeMainの中で呼び出される）が、デバッグ用に直接叩くこともあるので追加 global.timerMain = timerMain; // gasのタイマーから呼び出す関数 ``` ビルドしてclasp deployするとglobalに設定した関数がgas上で実行可能関数として選択できます。 <img src="https://images.microcms-assets.io/assets/dd1ea25cf0d84f9591a440404eb96b35/6d45469a7f1d4bd49b10e2996bc9842a/sc-gas-global.png" alt=""> 参考記事のように、package.jsonで以下のようにしとくと便利でした ``` &nbsp;"scripts": { &nbsp;&nbsp;"build": "webpack", &nbsp;&nbsp;"push": "npm run build &amp;&amp; clasp push"&nbsp; &nbsp;}, ``` ## テスト ここまででアプリ自体はできました。 ついでなのでテストもしておこうと思いました。 と言っても最低限のところだけ、作成したメッセージが期待された文言が入っているかをテストしてみました。 ### gas特有の関数 spread操作とか環境変数操作等、gas特有の関数に依存しているのでテストするにあたってはスタブを作成する必要があります。 自前で作ると面倒で何かいい感じのものは無いかと調べたらありました。 https://github.com/dan-kushnaryov/gas-mock-globals 一通りのスタブが揃ってるっぽいのでこれをテストコードでimportしてあげればOK ## 完成 こんな感じでslackに通知されます。 <img src="https://images.microcms-assets.io/assets/dd1ea25cf0d84f9591a440404eb96b35/c56b90ed6dc54b7f8f3613d6d61e921a/sc-slack-hook-img.png" alt=""> - Around: zoomみたいなオンライン会議用チャットツールです。ゲームなどもできます。リアクション機能多め。 - `アンゴラ`・`ウール` はオンライン会議室の名前です。羊からの連想です。 - マスクしている箇所にメンバーの名前がリスト表示されます。 リポジトリはこちらです。 https://github.com/sugiii8/asakai-clasp

claspでgas(google app script)アプリをいい感じに改修した

Rails6, Ruby3.0で作ったアプリケーションをRuby3.1にアップグレードした際に詰まった点をメモしておく。 ちなみにこの作業は後々Rails7にアップグレードするための前準備として行っていました。 <h2 id="h3a6fbf414b">事前にやったこと</h2><ul><li>bundle update</li><li>yarn upgrade</li><li>一応Rspec通るか確認しておく</li></ul>このあたりは個人で開発してるものなので雑に全部アップグレードした<h3 id="hcf83e1357e"> </h3><h2 id="hb16a6459da">作業</h2><h3 id="h7e1c4e25f7">Ruby3.1に上げる</h3><ul><li>.ruby-version</li><li>Gemfile</li></ul> <h3 id="h9964b2ee26">bundlerのバージョン違い問題</h3>上記でbundle installを行うと成功はするが、bundlerのバージョンが異なる旨の警告が出た そのためGemfile.lockを削除した上でbundle installした <h3 id="h57104237fa">Unknown alias: default</h3>上記エラーがでた YAMLパーサーのバージョンが上がったことが原因のよう。 回避策としてGemfileでバージョンをしてインストールする。<pre><code>gem "psych", "~&gt; 3.1"</code></pre> <h3 id="hac5fd499e7">LoadError: cannot load such file</h3>なにやらメール周りのライブラリが外されている模様？<ul><li>LoadError: cannot load such file -- net/smtp</li><li>LoadError: cannot load such file -- net/pop</li><li>LoadError: cannot load such file -- net/imap</li></ul> https://github.com/mikel/mail/pull/1439 https://github.com/rails/rails/pull/42366 とりあえず素直に追加していく。 <pre><code>gem "net-smtp", require: false
gem "net-pop", require: false
gem "net-imap", require: false</code></pre> <h3 id="h93d01af5b3">herokuにpushした際のエラー</h3> <pre><code>&nbsp; &nbsp;Your bundle only supports platforms ["x86_64-darwin-20"] but your local platform
&nbsp; &nbsp; &nbsp; &nbsp;is x86_64-linux. Add the current platform to the lockfile with `bundle lock
&nbsp; &nbsp; &nbsp; &nbsp;--add-platform x86_64-linux` and try again.
&nbsp; &nbsp; &nbsp; &nbsp;Bundler Output: Your bundle only supports platforms ["x86_64-darwin-20"] but your local platform
&nbsp; &nbsp; &nbsp; &nbsp;is x86_64-linux. Add the current platform to the lockfile with `bundle lock
&nbsp; &nbsp; &nbsp; &nbsp;--add-platform x86_64-linux` and try again.</code></pre> これはbundlerを上げたことによる影響らしい。 <a href="https://www.autovice.jp/articles/150" target="_blank" rel="noopener noreferrer">【Rails】Bundler 2.2.x以降は開発者が適切なプラットフォームを追加する必要がある</a> 現状だとローカルのapple用のプラットフォームしか指定していなかった。 heorkuに出てるエラーの通りにプラットフォームを追加する。 <pre><code>bundle lock --add-platform x86_64-linux</code></pre> Gemfile.lockに下記が追加される <pre><code>PLATFORMS
&nbsp; x86_64-darwin-20
&nbsp; x86_64-linux # これ</code></pre> これで完了！

Ruby3.0のRailsアプリケーションをを3.1にアップグレードにした際に出たエラーの対応

本サイトをNext.js x microcmsで作ったが、そのあとmicrocmsからSDKが公開されたとのことで、そちらに対応してみた。 基本的には<a href="https://dev.classmethod.jp/articles/vercel-microcms-nextjs-blog-sdk/" target="_blank" rel="noopener noreferrer">こちらの記事</a>を参考に進めていった。 <h2 id="h4388330ebc">Next.jsのアップデート</h2>各パッケージをアップデートする際以下のようにした。<ul><li>最新のNext.js12系でnext appを作成</li><li>作成したpackage.jsonを元のプロジェクトに移し、必要なものだけ再度追加</li></ul> 既存のpackage.jsonを変更したも良かったのだが、以下の理由から一度まっさらにしてから追加しようと思った。 まあ個人のプロジェクトなので。<ul><li><a href="https://zenn.dev/thiragi/articles/555a644b35ebc1" target="_blank" rel="noopener noreferrer">Next11系からEslintがESLint設定がデフォルトでサポートされた</a></li><li>初期構築時にで試しで色々追加したものを整理したい</li><li>aspida廃止してsdkのclientを使う</li></ul> <h2 id="h27500470b6">microCMS API Clientの変更</h2>aspidaを使ってmicocmsにアクセスしていたのをsdkが提供しているclientに変更する。 API部分を置き換えていく作業。 <pre><code># before
const blogListPromise = client.v1.blogs.$get()

# after
const blogListPromise = client.getList&lt;BlogListResponse&gt;({
 endpoint: "blogs",
})</code></pre> ぶっちゃけ、見た目としても安全性もaspidaのほうがいい気がする...<ul><li>aspida: clientに各API専用のフィールドが生える方式</li><li>sdk: get, getList, getDetail, getObjectに対して各APIのレスポンス型をパラメータとして渡す方式</li></ul> <h2 id="hde49fc18ac">ついでにプレビュー機能も実装</h2><a href="https://dev.classmethod.jp/articles/vercel-microcms-nextjs-blog/#toc-14" target="_blank" rel="noopener noreferrer">[Next.js+Vercel+microCMS] microCMS と Next.js でブログを作る - プレビューの作成</a> <a href="https://nextjs-ja-translation-docs.vercel.app/docs/advanced-features/preview-mode" target="_blank" rel="noopener noreferrer">Next.js 日本語翻訳プロジェクト - プレビューモード</a> やったこと<ul><li>page/api配下にプレビュー用API配置して、microcmsからプレビューデータを取得できるようにする</li><li>取得したpreviewデータをblogsページで表示できるようにする</li><li>setPreviewDataで表示する方式はCookieのサイズ制限(2KB)があったのでやめた<ul><li><a style="background-color:#ffffff" href="https://nextjs-ja-translation-docs.vercel.app/docs/advanced-features/preview-mode#previewdata-%E3%81%AE%E3%82%B5%E3%82%A4%E3%82%BA%E5%88%B6%E9%99%90" target="_blank" rel="noopener noreferrer">Next.js 日本語翻訳プロジェクト - プレビューモード</a><a href="https://nextjs-ja-translation-docs.vercel.app/docs/advanced-features/preview-mode#previewdata-%E3%81%AE%E3%82%B5%E3%82%A4%E3%82%BA%E5%88%B6%E9%99%90" target="_blank" rel="noopener noreferrer"> - previewData のサイズ制限</a></li></ul></li></ul> <h2 id="h7488fe3729">ハマリポイント</h2><h3 id="h02bf8e8b9a">コンパイラ変更webpack→swc</h3>Rust製のコンパイラがデフォルト？になった これについては設定ファイルを変更すると有効になった <ul><li>.<a style="background-color:#f6f8fa" href="https://github.com/sugiii8/sugiskill-next/pull/1/files#diff-379120de71991cfea15f15a1225d1ba83a7a50e55a356c831f5f5e0be305ce0b" target="_blank" rel="noopener noreferrer">babelrc</a>を削除</li><li>next.config.jsを追加し以下設定</li></ul><pre><code>// next.config.js

module.exports = {
 swcMinify: true
}</code></pre><h3 id="h3dfb9ba4b2"> PreviewDataの型変更</h3>今回新規でプレビュー機能を実装したので特に困ったわけではないが、<code>previewData</code>の型がanyから以下に変更になったとのこと。 <pre><code>export type PreviewData = string | false | object | undefined;</code></pre> <h3 id="h1fc4c7db76">LinterとVSCodeのPrettier</h3>微妙に困ったのは、プロジェクトで設定したeslint/prettierとVSCodeで元々設定していたimport順についての設定が競合して無限にエラーとなったこと。 <pre><code># .setting.json 
"editor.codeActionsOnSave": {
 "source.organizeImports": true, // &lt;-------------　これ
 "source.fixAll.eslint": true
 },</code></pre> ファイル更新 -&gt; プロジェクトのprettier実行 -&gt; VSCodeのprettier実行 -&gt; プロジェクトのeslintに怒られる という状況。prettierの方法が異なるので発生していると思われる。 はじめはVSCode側のprettierが動いてることに気が付かず、プロジェクトの設定を色々変更して時間を費やしてしまった。 最終的に<code>"source.organizeImports": true</code>はコメントアウトして解決した。 以上で作業完了！

microCMSとNext.jsでブログ作ってみた(SDK)

メインで使ってるわけでな無いがGoを使う機会があり、ある程度実装はできてるものの、既存コードの見様見真似で書いてる箇所も多く不安が残る状態でした。 であればテストを書いて安心したいと思ってテスト書く作業を進めました。<h2 id="hc684259255"> サンプルコード</h2>この記事ではサンプルとしてmainとmainから呼ばれる関数が1つあるコードを書きます。 関数についてはカバレッジの確認をしたいので分岐あるようにしておきます。 <pre><code>package main

import "fmt"

func main() {
 fmt.Println(Greet("hello"))
 fmt.Println(Greet("what's up"))
 fmt.Println(Greet("aaaaa"))
}

func Greet(name string) string {
 if name == "hello" {
 return "こんにちは"
 } else if name == "what's up" {
 return "調子どう"
 } else {
 return "やあ"
 }
}

</code></pre>この関数についてテストを書いていきます。 <h2 id="h93b321bd0e">go testインストール</h2>まずはテストツールをインストールします。 goのテストツールはいくつかありますが今回は<code>go test</code>	を使います。<pre><code>go get -u github.com/cweill/gotests/...</code></pre> <h2 id="h7901114124">テストコード出力</h2>Greet関数についてのみ、ファイル出力します<pre><code>gotests -only Greet -w .&nbsp;&nbsp;</code></pre> 出力された雛形を確認します<pre><code>package main

import "testing"

func TestGreet(t *testing.T) {
	type args struct {
		name string
	}
	tests := []struct {
		name string
		args args
		want string
	}{
		// TODO: Add test cases.
	}
	for _, tt := range tests {
		t.Run(tt.name, func(t *testing.T) {
			if got := Greet(tt.args.name); got != tt.want {
				t.Errorf("Greet() = %v, want %v", got, tt.want)
			}
		})
	}
}</code></pre> <pre><code>// TODO: Add test cases.</code></pre> ここにテストケースを書いていきます。 テストデータの型も決まっているので楽です。 今回の場合はここ<pre><code> type args struct {
 name string
 }
 tests := []struct {
 name string
 args args
 want string
 }</code></pre> name: テストケース名を書く args: 実際にテストする関数に合わせて型が決まる。今回はname: string。 want: 期待値を書く 上記を踏まえると下記のようなテストケースを書きます。 <pre><code> {
 name: "hello",
 args: args{
 name: "hello",
 },
 want: "こんにちは",
 },
 {
 name: "what's up",
 args: args{
 name: "what's up",
 },
 want: "調子どう",
 },
 {
 name: "else",
 args: args{
 name: "aaaaaaaa",
 },
 want: "やあ",
 },</code></pre> <h2 id="hc794a31192">go test実行</h2><pre><code>go test ./sample.go ./sample_test.go</code></pre> 結果が下記の様に出力されます<pre><code>ok&nbsp; &nbsp; &nbsp; command-line-arguments&nbsp; 0.301s</code></pre> ちなみにテストケースが間違ってる場合は <pre><code> {
 name: "hello",
 args: args{
 name: "hello",
 },
 want: "グーテンモルゲン",
 },</code></pre> このように出力されます。まあまあわかりやすい。 <pre><code>--- FAIL: TestGreet (0.00s)
&nbsp; &nbsp; --- FAIL: TestGreet/hello (0.00s)
&nbsp; &nbsp; &nbsp; &nbsp; sample_test.go:40: Greet() = こんにちは, want グーテンモルゲン
FAIL
FAIL&nbsp; &nbsp; command-line-arguments&nbsp; 0.214s
FAIL</code></pre> <h2 id="h20bdbb41c0">カバレッジ</h2>カバレッジを取りたい場合はオプションをつけます <pre><code>go test -cover ./sample.go ./sample_test.go&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;✘ 1&nbsp;
ok&nbsp; &nbsp; &nbsp; command-line-arguments&nbsp; 0.244s&nbsp; coverage: 62.5% of statements</code></pre> <h2 id="h1fe29a9e99">カバレッジ見やすく</h2>具体的にコードのどのパスを通ったか確認したい場合 <pre><code>go test -cover -coverprofile=cover.out ./sample.go ./sample_test.go&nbsp;</code></pre> 出力されたcover.outからhtmlを出力 <pre><code>go tool cover -html=cover.out -o cover.html</code></pre> これを確認するとhtmlでグラフィカルにテストカバレッジ状況が分かります。 <h2 id="hb7aeae5e0f">終わり</h2>以上です。 シンプルで使いやすいです！

goでtest

microCMSという国産ヘッドレスCMSとNext.jsを使ってブログサイトを構築してみようと思いました。 こちらを参考にしながら進めました。 <a href="https://dev.classmethod.jp/articles/vercel-microcms-nextjs-blog-sdk/" target="_blank" rel="noopener noreferrer">[Next.js+Vercel+microCMS] microCMS と Next.js でブログを作る</a> ※現在はSDKが提供されているとのことで再編集版が投稿されてました。 なので、今(2021/12時点)から始めるにはこちらのほうがいいかもしれません <a href="https://dev.classmethod.jp/articles/vercel-microcms-nextjs-blog-sdk/" target="_blank" rel="noopener noreferrer">microCMS と Next.js でブログを作る（SDK 版）</a> <h2 id="hae6947d5ce">microCMS</h2><h3 id="h7524f66ee2">登録</h3><a href="https://document.microcms.io/manual/getting-started" target="_blank" rel="noopener noreferrer">公式ページ</a>を参考にいい感じに登録します。<h3 id="h78df02fd38">API</h3>API登録する際にリスト形式かオブジェクト形式が選択できます。 とりあえず以下の様なAPIを生やしました。<h4 id="hfab6db4976">リスト形式</h4><ul><li>blogs: 記事一覧</li><li>portfolios: 何か作って公開したもの一覧</li><li>tags: 記事に付与するタグ一覧</li></ul><h4 id="ha3b9fbc8d9">オブジェクト形式</h4><ul><li>profile: プロフィール</li><li>sitedata: サイト情報、多分headに入れる</li></ul><h2 id="haab1fd6475">Next.js</h2><a href="https://dev.classmethod.jp/articles/vercel-microcms-nextjs-blog/" target="_blank" rel="noopener noreferrer">前述の記事</a>を参考にしてcliでnextアプリを生成します。 <a href="https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/data-fetching#getstaticprops%EF%BC%88%E9%9D%99%E7%9A%84%E7%94%9F%E6%88%90%EF%BC%89" target="_blank" rel="noopener noreferrer">公式ページのこの辺</a>を読んでおけば大体OK。 今回はブログなのでSSGのみ使います。 なので基本的な作業としては以下となります。<ul><li>各ページコンポーネントで<code>getStaticProps</code>関数を定義しexportする</li><li>必要なデータ、ここではmicroCMSのAPIで取得した結果をpropsにセットする</li><li>Pageコンポーネントに↑のpropsが渡されるのでそれらをいい感じにrenderする</li></ul><h3 id="h4ebc0439a6">aspida</h3>microCMS のデータを取得する際のAPIに型をつけるためにaspidaというHTTPクライアントを導入します。<h3 id="ha4bf0462ef">pathpida</h3>ついでにリンクについても型をつけられるpathpidaというaspidaの親戚みたいなものがあるのでそれを導入しました。 こちらについては先程のブログ記事には無いので<a href="https://github.com/aspida/pathpida" target="_blank" rel="noopener noreferrer">github上のpathpida</a>を参考に。 基本的に設定は不要でnext/nuxt両方に対応してくれているようです。 下記コマンドをpackage.jsonに追加し実行すると、pages配下の構造に応じたメソッドを定義したファイル(lib/$path.ts or utils/$path.ts)が生成されます。<pre><code> "dev:path": "pathpida --watch",</code></pre> 生成されたファイルを各ページコンポーネントにimportして使います。<pre><code>import { pagesPath } from '@/utils/$path'

pagesPath.profile.$url()</code></pre> <h2 id="h9dcc071ccd">デプロイ</h2><h3 id="had9f88b197">github x vercel連携</h3>github x vercelを連携しgithubにpushしたらビルドが走るようにしておきます <h3 id="h55c04bc843">microCMS x vercel連携</h3>同じくmicroCMSのコンテンツを追加・更新した時もビルドが走るようにしたい。 microCMSからvercelへwebhookする設定があるのでする。webhook飛ばすタイミングは色々と設定できる。 注意点としてはwebhookの設定はAPI単位なので、全てのコンテンツ追加・更新のタイミングでビルドしたい定義したい場合はそれぞれのAPIで設定しなければならなそう。 これで一旦作成完了しました。 プレビュー機能はスキップしたのと、OGPだとか細かい設定はできてないので後々やる予定です。 <h4 id="hce2b598e0e">レイアウト調整</h4>完了..と思ってビルド結果をみたらコンテンツ部分にスタイルがあたってなかったので修正。 <a href="https://zenn.dev/crea7/articles/5b2fde4be6b6f3" target="_blank" rel="noopener noreferrer">microCMS + TailwindCSSでのHTMLコンテンツに対するスタイル適用</a>を参考に対応していく。 <a href="https://github.com/tailwindlabs/tailwindcss-typography" target="_blank" rel="noopener noreferrer">tailwindlabs/tailwindcss-typography</a>を使う。 <blockquote>A plugin that provides a set of&nbsp;<code>prose</code>&nbsp;classes you can use to add beautiful typographic defaults to any vanilla HTML you don't control (like HTML rendered from Markdown, or pulled from a CMS).</blockquote> MarkdownとかCMSからレンダリングしたHTMLにスタイルを当ててくれますと。 コンテンツ流し込んでる要素のclassに<code>prose</code>を追記する。 直った。OK。