殿堂入りメニュー第2弾！ 我が家の定番ランチ、キムチチャーハンです。 <img src="https://images.microcms-assets.io/assets/d5eb4af8cbbf4b8aa1e80f6ea64e8f1d/6bd28d52a50345a5b8ed59af2353c972/19DC4056-C0EF-480A-8C68-4FA2420DEA18.jpeg" alt=""> ちなみに使っているキムチは「こくうまキムチ」です。 <a href="http://www.kyuchan.co.jp/item/detail/detail.php?nid=15&amp;ts=1630329567" target="_blank" rel="noopener noreferrer">http://www.kyuchan.co.jp/item/detail/detail.php?nid=15&amp;ts=1630329567</a> <h3 id="h27f157adaa">作り方</h3> <ol><li>長ネギはみじん切りに、豚バラ肉もなるべく細かく切る</li><li>ごま油を多めに入れたフライパンをよく熱しておく</li><li>豚バラ肉を炒める（豚肉の香りを油につけるようなイメージ）</li><li>卵とご飯を加えて素早く炒め、ご飯をほぐす</li><li>ご飯がほぐれたら、長ネギを加えてさっと炒める</li><li>塩コショウ、ニンニクチューブ、創味シャンタンで味付け（キムチの味が濃いので、この時点では味控えめくらいがいいかも）</li><li>キムチを投入。鍋肌でキムチの汁気を少し飛ばすと、いい感じの食感になると思います。</li><li>全体に味が馴染んだら完成！</li></ol> ほぼほぼ普通のチャーハンのレシピですね。 チャーハンって作るの難しいですよね。シンプルゆえに。 味を整える上で、創味シャンタンは神。

定番のキムチチャーハン

自粛期間中に料理スキルが爆上がりな件。 とあるお昼に、とってもおいしい海老のトマトクリームパスタができました。 <img src="https://images.microcms-assets.io/assets/d5eb4af8cbbf4b8aa1e80f6ea64e8f1d/ab4406f7890140c88377ec911abfaaa3/153F2A52-E2DC-43C7-B115-EA2EF587562E.jpeg" alt=""> 本当はトマトクリームスープパスタを作っていたのですが、汁気がなくなったので、これはもうクリームパスタです。 <a href="https://delishkitchen.tv/recipes/171809466587546003" target="_blank" rel="noopener noreferrer">https://delishkitchen.tv/recipes/171809466587546003</a> トマトソースですが、 トマト缶1つ(400ml)に対し、ガーリックオリーブオイル大さじ2強、コンソメ小さじ2、塩小さじ1が最近の私の中の黄金比です。 それをクリームソースにしたければ、生クリームを味を見ながら入れればいいし、 輪切り唐辛子を入れればピリ辛トマトソースになるし、 自由度高しです。 自由度の高い料理が美味しくできると、自分自身の料理の基礎レベルが上がっている感じがするので、作っていて楽しいです。オイルパスタなんかもそう。 基礎って大事。

海老のトマトクリームパスタ

今日はバグ潰しもたくさん消化できて、充実したお仕事ができました。 そろそろ技術アウトプットのブログも書きたい今日この頃。（下書きまでは書いている） そんな夜ご飯は、初挑戦のフィッシュアンドチップス。 <img src="https://images.microcms-assets.io/assets/d5eb4af8cbbf4b8aa1e80f6ea64e8f1d/74ebb4c70cff4a9eae4298c122bdcce5/9EC39E38-532E-4AF8-A129-80431E9210A3.jpeg" alt=""> レシピはこちら。クラシルさんです。 <a href="https://www.kurashiru.com/recipes/e3debd3b-d250-44b6-9c8d-4e1f33daafbe" target="_blank" rel="noopener noreferrer">https://www.kurashiru.com/recipes/e3debd3b-d250-44b6-9c8d-4e1f33daafbe</a> 衣がザックザクで、本当に美味しかったです。 ASMRとして配信したくなるほど、いい音していました。 写真のバルサミコとレモン汁をかけて、、、 ビールが止まらぬ夜でした。

ザックザクなフィッシュアンドチップス

私が保有している料理レパートリーの中に、「殿堂入りメニュー」というものがあります。 殿堂入りするかしないかは、妻基準です。 美味しいのはもちろんなのですが、その味を安定して再現できるようになれば、めでたく殿堂入りメニュー認定を得ることができます。（と、勝手に思っています） その中でも、安定したリピート率を誇るのが、この「梅しそしらすパスタ」。 梅の酸味が効いていて、サッパリとしたいときにピッタリです。 我が家はお昼ごはんに超ヘビロテです。 <img src="https://images.microcms-assets.io/assets/d5eb4af8cbbf4b8aa1e80f6ea64e8f1d/8b4772b841214270b62446698cc9cd77/FACB2872-B846-42A1-866A-837052EF76C5.jpeg" alt=""> （サラダのドレッシングも自作なのですが、これも美味しかったです。） 参考にしたレシピのサイトを見失ってしまったので、今回は作り方をきちんと書きます。 <h2 id="h27f157adaa">作り方</h2>とても簡単です。分量はいつも計ってないので適当です笑 お好みで調整してください。 <h3 id="h5416a6bf3a">材料（1人分）</h3><ul><li>パスタ</li><li>大葉（好きなだけ）</li><li>梅干し（2個）</li><li>しらす（好きなだけ）</li><li>オリーブオイル（大さじ2ぐらい）</li><li>白だし（大さじ2.5ぐらい）</li><li>白ごま（好きなだけ）</li><li>チューブのにんにく（好きなだけ）</li><li>鶏がらスープ（少しだけ）</li></ul> <h3 id="h046876a126">手順</h3><ol><li>大葉は千切り、梅干しはよく叩いておく</li><li>パスタは指定の茹で時間よりも少し長めに茹でる。茹で終わったら流水で冷やす</li><li>ボウルにパスタを入れて、1の梅干し、しらす、白ごま、オリーブオイル、白だし、チューブのにんにく、鶏がらスープを入れて、よく混ぜる</li><li>盛り付けて、大葉を乗せれば完成！</li></ol> 私も参考にしたサイトの作り方からめちゃくちゃアレンジしているので、 色々と変えてみるのもいいと思います^ ^ これからも、殿堂入りメニューを少しずつ記事にしていきたいです。乞うご期待（？）

殿堂入りの梅しそしらすパスタ

先日、妻の実家で焼肉したときに、作ったねぎ塩だれ。 <img src="https://images.microcms-assets.io/assets/d5eb4af8cbbf4b8aa1e80f6ea64e8f1d/1ec5fcfd04a84798b9ec53f223501c8b/D5BC7BCE-4997-4DDE-B373-3F1F49ABBB91.jpeg?w=2048&amp;h=2048" alt=""> 焼肉につけて食べたら美味しいのなんの。 レシピはここを使いました。コウ ケンテツさんです。 <a href="https://www.kyounoryouri.jp/recipe/6922_%E3%81%AD%E3%81%8E%E5%A1%A9%E3%81%A0%E3%82%8C.html" target="_blank" rel="noopener noreferrer">https://www.kyounoryouri.jp/recipe/6922_%E3%81%AD%E3%81%8E%E5%A1%A9%E3%81%A0%E3%82%8C.html</a> アレンジは、白ごまをすりごまにしたことと、にんにくチューブを少しだけ入れたことですね。 ビールが止まらない。 <img src="https://images.microcms-assets.io/assets/d5eb4af8cbbf4b8aa1e80f6ea64e8f1d/9c3ce4a3dc8b4b40a06987a00727a6fb/6B18FA97-93F4-4048-BCF8-CA50DA6F1DF4.jpeg" alt=""> ダイヤモンド麦芽の香るエールも、スキッとした味わいでとても美味しかったです。 ヘビロテの予感、ねぎ塩だれ。

ねぎ塩だれで焼肉を食べる

妻が仕事から帰ってくるのをお迎えに行ったら、 「血が足りない、、鉄分欲しい、、」 ということで、その足でスーパーに行き、鉄分の含有量が多い食品を買いに行くことに。 レバーは何となく鉄分多そうというのは知っていましたが、 赤身の魚も結構含まれているそうなので、 安売りされていたカツオの刺身を購入。 なめろうにしてみました。 <img src="https://images.microcms-assets.io/assets/d5eb4af8cbbf4b8aa1e80f6ea64e8f1d/7c979bb0fd674436ba584d629a498c95/04FBFDBE-1D86-4754-B525-6EC50C12464F.jpeg?w=2048&amp;h=2048" alt=""> レシピはこちらから拝借 <a href="https://www.kurashiru.com/recipes/2fa59e98-2436-44cf-a35b-ce7265702e11" target="_blank" rel="noopener noreferrer">https://www.kurashiru.com/recipes/2fa59e98-2436-44cf-a35b-ce7265702e11</a> 手元にミョウガがなかったので、使わずに作りましたが、まあ美味しい。 酒泥棒万歳。

カツオのなめろう

タイトルの通りなのですが、ポートフォリオサイトを作ってみました。 <h2 id="hb3998c599f">なぜ作ったか</h2>元々は別の技術ブログを運営していたのですが、以下の理由（言い訳）で運営していくモチベーションが低下していました。 <ul><li>放置されたWordpress。溜まっていく色んな更新物。カオス化。運営つらい。</li><li>技術ブログ以外のことも書きたいけど、そういう雰囲気のサイト設計にしなかったので、書きにくい。</li></ul> スマホで気楽に更新できること、かつWordpressのような重いCMSではなくて、もっと楽にブログ運営できる仕組みがないか、ずっと模索していました。 <h2 id="h80ff96ca56">JAMStackとの出会い</h2>そこでたどり着いたのがJAMStack。 構成はタイトルの通り、Next.js + microCMS + Vercelです。 クライアントは静的ファイルとのやり取りだけなので、サイト閲覧が爆速かつセキュアな形となり、 記事の管理や更新も、microCMSの管理画面で（やろうと思えばスマホでも）できちゃいます。 バックエンドの管理はmicroCMSにお任せで、サイト運営負担は格段に下がりました。 フロントエンドのメンテナンスと記事更新に集中できる環境、、、これぞ求めていたライトな仕組みでした。 しかもサイト運営費用は（ドメイン維持費を除けば）無料だなんて、、、すごい世の中ですね。 <h2 id="h94552949b2">どうやって作ったか</h2>microCMSの公式がJAMStackでのブログの作り方を公開していました。 <a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer">https://blog.microcms.io/microcms-next-jamstack-blog/</a> これが本当にわかりやすくて、もう完全にmicroCMSファンになりました。 このポートフォリオサイトは、このリンクに書いてある手順で、ほぼほぼできあがってしまいます。 <h2 id="h354ba15488">作成中のトピックス</h2>ここからは、上記リンクには書いてない部分について触れていきます。 <h3 id="h24347fff56">TypeScriptで書く</h3>Nextのプロジェクトを作るときに、TypeScriptのテンプレートを使いました。<pre><code>$ npx create-next-app --example with-typescript webird</code></pre>このサイトを参考にしました。 <a href="https://kakakakakku.hatenablog.com/entry/2020/04/14/100623" target="_blank" rel="noopener noreferrer">https://kakakakakku.hatenablog.com/entry/2020/04/14/100623</a> <h3 id="ha875b07b16">スタイルはMaterial UI</h3>見た目を整えていくのにMaterial UIを使いました。 <a href="https://material-ui.com/" target="_blank" rel="noopener noreferrer">https://material-ui.com/</a> いつもクライアントサイドだけで使っているときには遭遇しないエラーではまったりしました。 同じようにはまっていた人： <a href="https://blog.ryo.gift/entry/2020/12/12/162653" target="_blank" rel="noopener noreferrer">https://blog.ryo.gift/entry/2020/12/12/162653</a> <h3 id="hbdf3ca22fd">OGP設定</h3>TypeScriptテンプレートのLayoutコンポーネントを流用して、OGPの設定を以下のように行いました。 <pre><code>// Layout.tsx

import React, { ReactNode } from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { NavBar } from './Navbar';
import { Header } from './Header';
import { createStyles, makeStyles, Theme, Toolbar } from '@material-ui/core';
import { Footer } from './Footer';


const useStyles = makeStyles((theme: Theme) =&gt;
 createStyles({
 main: {
 marginLeft: theme.spacing(2),
 marginRight: theme.spacing(2),
 },
 }),
);


type Props = {
 children?: ReactNode;
 title: string;
 header?: string;
 eyeCatch?: string;
 description: string
};

const Layout = ({ children, title = 'default title', header = title, eyeCatch, description }: Props) =&gt; {
 const classes = useStyles();
 const router = useRouter();

 return (
 &lt;&gt;
 &lt;Head&gt;
 &lt;title&gt;{title} | Webird&lt;/title&gt;
 &lt;meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" /&gt;
 {/* OGP */}
 &lt;meta property="og:url" content={`https://www.webird.work${router.pathname}`} /&gt;
 &lt;meta property="og:type" content={title === 'Home' ? 'website' : 'article'} /&gt;
 &lt;meta property="og:title" content={`${title} | Webird`} /&gt;
 &lt;meta property="og:description" content={description} /&gt;
 &lt;meta property="og:site_name" content="Webird" /&gt;
 &lt;meta property="og:image" content={eyeCatch || 'https://images.microcms-assets.io/assets/d5eb4af8cbbf4b8aa1e80f6ea64e8f1d/cd97b6ee591a4834878d1ed3677c6533/logo.png'} /&gt;

 &lt;meta name="twitter:card" content="summary" /&gt;
 &lt;meta name="twitter:site" content="@torihon62" /&gt;
 &lt;/Head&gt;
 &lt;NavBar /&gt;
 &lt;Toolbar variant="dense" /&gt;
 &lt;div className={classes.main}&gt;
 &lt;Header text={header} /&gt;
 {children}
 &lt;/div&gt;
 &lt;Footer /&gt;
 &lt;/&gt;
 );
};

export default Layout;

</code></pre> <h3 id="h9b52537ce4">スキルページのスキーマ設計</h3>カテゴリーと同じように、「コンテンツ参照機能」を使って設計しています。 こんな感じで、「スキル」を登録して、、、 <img src="https://images.microcms-assets.io/assets/d5eb4af8cbbf4b8aa1e80f6ea64e8f1d/f215c9e853af43c9babdac18e19f0f4a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-06-06%2015.33.38.jpg" alt=""> それらを「スキルセット」のAPIスキーマで参照してやるような設計にしています。 <img src="https://images.microcms-assets.io/assets/d5eb4af8cbbf4b8aa1e80f6ea64e8f1d/e8f1a9bb39ad4f9a988fe061cacd7ed0/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-06-06%2015.34.39.jpg" alt=""> <h2 id="he3588b532b">あとがき</h2>JAMStackはいいぞ！ microCMSはいいぞ！

流行りのJAMStack（Next.js + microCMS + Vercel）でポートフォリオサイトを作ってみた

こんにちは！とりほんと申します。 今までは <a href="https://webird-programming.tech/" target="_blank" rel="noopener noreferrer">https://webird-programming.tech/</a> というところで、技術ブログを書いておりました。 <img src="https://images.microcms-assets.io/assets/d5eb4af8cbbf4b8aa1e80f6ea64e8f1d/e001c296b2d74f8881aef151862ebd46/2020_02_%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2020-01-27-16.14.02.png" alt=""> 昔はプログラミングにばかり没頭していた私ですが、ブログを立ち上げてから、環境の変化が色々とありました。 結婚、戸建て新築、長男誕生、趣味の変化などなど、、、プログラミングに没頭していた私の人生に様々な彩りが出てきたのです。 そうなってくると、今後は技術ブログだけにとどまらず、もっと自分というものを発信したいという衝動に駆られ、このサイトを立ち上げました。 私自身を知ってもらうためのポートフォリオと、ブログの2本柱でコンテンツを充実させていきたいと思います。 宜しくお願いします。