Tech

これまでこのブログはTwitterなどにリンクを貼った際にサムネイル画像を表示できていなかったので、Twitterカードで画像を表示できるようにしました。また、Twitterだけではなく、Slack（コミュニケーションツール）などでも画像が表示できるにしています。 Twitterカードとは サルワカくんの記事が分かりやすかったので、詳しく知りたい人は以下記事を読んでみてください。 【2020年版】Twitterカードとは？使い方と設定方法まとめ 簡単に説明すると、Twitterでよく見かけるURLを貼ったときに表示されるやつです。 Twitterカード表示対応 僕が現在使っているHugoのテンプレートはBeautiful Hugoなので、このテンプレートでの対応方法を書きます。 今回重要なファイルは2つです。 themes/beautifulhugo/layouts/partials/seo/twitter.html themes/beautifulhugo/layouts/partials/seo/opengraph.html ファイルの中身を以下に書きます。 // themes/beautifulhugo/layouts/partials/seo/twitter.html {{- with .Title | default .Site.Title }} <meta name="twitter:title" content="{{ . | truncate 70 }}" /> {{- end }} {{- with .Description | default .Params.subtitle | default .Summary }} <meta name="twitter:description" content="{{ . | truncate 200 }}"> {{- end }} {{- with .Params.share_img | default .Params.image | default .Site.Params.logo }} <meta name="twitter:image" content="{{ . | absURL }}" /> {{- end }} <meta name="twitter:card" content="summary" /> {{- with .Site.Author.twitter }} <meta name="twitter:site" content="@{{ . }}" /> <meta name="twitter:creator" content="@{{ . }}" /> {{- end }} // themes/beautifulhugo/layouts/partials/seo/opengraph.html {{- with .Title | default .Site.Title }} <meta property="og:title" content="{{ . }}" /> {{- end }} {{- with .Description | default .Params.subtitle | default .Summary }} <meta property="og:description" content="{{ . }}"> {{- end }} {{- with .Params.share_img | default .Params.image | default .Site.Params.logo }} <meta property="og:image" content="{{ . | absURL }}" /> {{- end }} {{- with .Site.Params.fb_app_id }} <meta property="fb:app_id" content="{{ . }}" /> {{- end }} <meta property="og:url" content="{{ .Permalink | absLangURL }}" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="{{ .Site.Title }}" /> ここでみてほしいのは、.Params.share_imgです。 Beautiful Hugoでは各記事のFront Matter（mdファイル内の一番上にtitleとかdateが書いてあるところ）に、share_img: "表示させたい画像のパス"のように書いてあげればTwitterカードに画像を表示できます。 ...

Next.js(React)+Goで個人開発をしていて、FetchAPIを利用してGoでローカル環境にたてたAPIをNext.jsで呼び出す際に、値が取れずにはまりました。 今回はどうやって解消したのか記事にしました。 今回発生したエラー Next.jsでfetchを使ってPOSTした際に、以下のようなエラーが発生。 Error serializing `.postData` returned from `getServerSideProps` in "/posts/get-api". Reason: `object` ("[object Promise]") cannot be serialized as JSON. Please only return JSON serializable data types. ようわからんけど、APIから値が取れてないみたいでした。 Next.jsからfetchする際のコードは以下のようにしていました。 export const getServerSideProps: GetServerSideProps = async () => { const url = "http://localhost:8080/login";　←　APIはローカルの8080番ポートにたてていました。 let postData = {}; await fetch(url, { method: "POST", cache: "no-cache", headers: { "Content-Type": "application/json charset=utf-8", }, body: JSON.stringify({ username: "yagiyu", password: "miran" }), }).then(function (response) { console.log(response); postData = response.json(); }); return { props: { postData, }, }; }; また、上記を実行した時のレスポンスが以下で、APIと通信はできたが、値を取れませんでした。 Response { size: 0, timeout: 0, [Symbol(Body internals)]: { body: PassThrough { _readableState: [ReadableState], readable: true, _events: [Object: null prototype], _eventsCount: 2, _maxListeners: undefined, _writableState: [WritableState], writable: false, allowHalfOpen: true, _transformState: [Object], [Symbol(kCapture)]: false }, disturbed: false, error: null }, [Symbol(Response internals)]: { url: 'http://localhost:8080/login', status: 200, statusText: 'OK', headers: Headers { [Symbol(map)]: [Object: null prototype] }, counter: 0 } } ターミナルからcurlを実行すると、以下のように成功していました。 ...

以前に僕のブログを見たことがある人にはわかると思いますが、サムネイル画像がなかったり、文字のサイズ、余白などが違ったりとデザインをガラッと変えました！ デザインについて考えると、どんどん深みにはまって正解がまったくわからなかったです。（笑） CSSで@mediaを使ってデバイスの大きさごとに表示を調整したので、その記事を書きます。 @mediaとは @mediaを使うことで、各デバイスや画面サイズごとに適用するCSSを指定できます。 レスポンシブにする場合は必須みたいです。（CSSは本当によくわからない。。） 使い方 以下のような感じで使うことができます。 @media (max-width: 767px){ img { width: 100%; height: auto; } } @media (min-width: 768px){ img { width: 277px; height: 145px; } } (max-width: 767px)はデバイスの画面幅が767px以下だったら、{}のCSSを適用します。 (min-width: 768px)はデバイスの画面幅が768px以上だったら、{}のCSSを適用します。 これは例としてあげていて、レスポンシブ対応させるときは画像サイズを%やautoを使って指定することでいい感じにできます。 767pxを画面幅の境目にしている理由として、今のパソコンやスマホ、タブレットのサイズを考えると、767pxのサイズに合わせる見やすくできるそうです。 @media screen and (max-width: 767px)のような書き方をしているサイトが多数ありますが、screenとはスクリーン画面ではなく、プリンターまたは音声機器以外のデバイスすべてなので、わざわざscreenをつける必要はないです。 まとめ レスポンシブ対応させるときは@mediaを使って、デバイス毎にCSSを変更させましょう。

最近、MongoDBを使うことがあり、NoSQLをはじめて使いました。MongoDBを触ったことがない人のために書きます。 MongoDBインストール&起動 今回はDockerHubからMongoDBのコンテナイメージをインストールします。 $ docker pull mongo インストールができたら、以下コマンドでコンテナを起動します。 $ docker run --name mongo-sample -d mongo -dはバックグランドで起動することを意味してます。 起動したコンテナ内に以下コマンドで入ります。 $ docker exec -it mongo-sample bash MongoDBのシェル起動 MongoDBのコンテナ内で以下コマンドを実行します。 $ mongo シェルを起動したら、環境準備は完了です。 基礎的な用語解説 MongoDBをさわっていく上で、イメージしやすくするために、Oracleの用語と比較します。 MongoDB Oracle データベース データベース コレクション テーブル ドキュメント 行（レコード） フィールド 列（カラム） テストデータ作成 以下コマンドをシェルで入力して、テストデータを作成します。 > db.foods.insert({name:'apple', price:50, producer:['sato']}); > db.foods.insert({name:'meat', price:100, producer:['suzuki']}); > db.foods.insert({name:'fish', price:120, producer:['kaneko', 'kitamura']}); 以下コマンドでDBの情報をみることができます。 > db.stats() { "db" : "test", "collections" : 1, "views" : 0, "objects" : 3, "avgObjSize" : 86, "dataSize" : 258, "storageSize" : 20480, "numExtents" : 0, "indexes" : 1, "indexSize" : 20480, "scaleFactor" : 1, "fsUsedSize" : 28014751744, "fsTotalSize" : 62725623808, "ok" : 1 } testデータベースに"collections" : 1となっていて、foodsコレクションが作成されて、"objects" : 3からドキュメントが3つ作成されていることが分かります。 ...

個人開発していて、GitHubの自分のプライベートリポジトリをgo getしようとして、エラーに遭遇しました。 今後同じような目にあった時のために、備忘録として残します。 エラー内容 以下のようなエラーが発生しました。 $ go get github.com/<username>/<private-repository-name> go: downloading github.com/<username>/<private-repository-name> v0.0.0-20200426100620-259de4f4dd2c go get github.com/<username>/<private-repository-name>: github.com/<username>/<private-repository-name>@v0.0.0-20200426100620-259de4f4dd2c: verifying module: github.com/<username>/<private-repository-name>@v0.0.0-20200426100620-259de4f4dd2c: reading https://sum.golang.org/lookup/github.com/<username>/<private-repository-name>@v0.0.0-20200426100620-259de4f4dd2c: 410 Gone server response: not found: github.com/<username>/<private-repository-name>@v0.0.0-20200426100620-259de4f4dd2c: invalid version: git fetch -f origin refs/heads/*:refs/heads/* refs/tags/*:refs/tags/* in /tmp/gopath/pkg/mod/cache/vcs/d99582f38bf8799347c5c3580859733d5d5c417fd23feb23ec82dc0787605157: exit status 128: fatal: could not read Username for 'https://github.com': terminal prompts disabled 原因 go getでモジュールをダウンロードする際は通常、http通信をしているみたいです。 GitHubのプライベートリポジトリへは認証が通らず、エラーになっていました。 解決方法 以下手順で解決できます。 Personal access tokensを作成 git config設定 1. Personal access tokensを作成 GitHubのDeveloper settings画面でトークンを作成できます。 設定画面を開いたら、「Generate new token」を押すと、以下の画面が表示されます。 ...