<h2 id="hdbf98b940f">前提条件</h2><ul><li>Next.jsとmicroCMSでブログサイトを開発している</li><li>SSGに対応している<p></p></li></ul><h2 id="h30cf53aef1">プレビュー用関数の作成</h2><p>まず最初に<code>/pages/api/</code>配下にpreview.tsを用意します。 このファイルではAPIリクエスト時のdraftKeyとcontentIdを処理するコードが書かれています。 microCMSで言うところの編集画面上部の「画面プレビュー」リンク押下時の処理ですね。 ここでは受け取ったクエリパラメータ（draftKey + contentId）をセッションにセットし、対象のブログ記事ページにリダイレクトするようにします。 <code>Location: </code>以降のパスには各自ブログページに紐づくrouteを設定してください。</p><div data-filename="preview.ts"><pre><code>import type { MicroCMSQueries } from &apos;microcms-js-sdk&apos;;
import type { NextApiRequest, NextApiResponse } from &apos;next&apos;;
import { microcms } from &apos;lib/client&apos;;

type QueryType = {
  id: string;
  draftKey: string;
};

const preview = async (req: NextApiRequest, res: NextApiResponse) =&gt; {
  const query = req.query as QueryType;
  if (!query.id || !query.draftKey) {
    return res?.status(404).end();
  }
  const queries: MicroCMSQueries = {
    draftKey: query.draftKey,
  };
  const content = await microcms.get({
    endpoint: &apos;blogs&apos;,
    contentId: query.id,
    queries: queries,
  });

  if (!content) {
    return res?.status(401).json({ message: &apos;Invalid ID&apos; });
  }

  res.setPreviewData(queries);
  res.writeHead(307, {
	Location: `/blog/${content.category ? content.category[0] + &apos;/&apos; : &apos;&apos;}${content.id}`,
	  });
	  res.end(&apos;Preview mode enabled&apos;);
	};
	
	export default preview;
</code></pre></div><p></p><h2 id="h38c8766536">microCMSの設定</h2><figure><img src="https://images.microcms-assets.io/assets/ed092f4fb32144088ce7689743fe3a8f/8f43c3b0b3154bbc8c621298936cd42f/microcms-preview-setting.png" alt="" width="1000" height="533"></figure><p>「API設定→画面プレビュー」を開き、遷移先URLを設定します。 パスは先ほど作成したpreview.tsのルートを指定します。 そしてクエリパラメータにコンテンツIDとdraftKeyを含めます、それぞれの識別IDは編集画面に説明がありますのでそれに沿った形で。</p><h3 id="h7ca5f744a9">画面プレビュー</h3><figure><img src="https://images.microcms-assets.io/assets/ed092f4fb32144088ce7689743fe3a8f/5ed0ca5c450244e4a75fe8b6f24a54d5/Group%2010.png" alt="" width="1000" height="142"></figure><p>記事編集画面にて「画面プレビュー」ボタンを押下します。 ブラウザで指定したURLが表示され、該当の記事ページに遷移されれば成功です。</p><p>例）</p><p>http://localhost:3000/api/preview/?id=n6wizxle-fr&amp;draftKey=JvkJgUnYs2</p><p>↓ redirect</p><p>http://localhost:3000/blog/tech/n6wizxle-fr</p><p></p><h2 id="h3c7222fefe">動作確認</h2><p>下書き保存した変更が反映されているか確認してみましょう。 microCMSの記事を編集し、「下書き保存」を押下します。 あとは「画面プレビュー」から記事ページを表示し、内容が変更されていれば成功です！</p><p></p><p></p><h2 id="h44c64d8ca2">参考ページ</h2><div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://blog.microcms.io/nextjs-preview-mode/" data-iframely-url="//cdn.iframe.ly/api/iframe?card=small&amp;url=https%3A%2F%2Fblog.microcms.io%2Fnextjs-preview-mode&amp;key=c271a3ec77ff4aa44d5948170dd74161"></a></div></div><script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>

microCMS×Next.jsを使ったプレビューモードの実装方法を解説します。

【microCMS×Next.js】SSG対応のプレビューモードを実装する

<h2 id="hdba5a2e3b8">Warpって？</h2><p>「<a href="https://www.warp.dev/" target="_blank" rel="noopener noreferrer nofollow"><u>Warp</u></a>」とはRust言語で開発された高機能で高速なターミナルです。</p><p>開発者が「The terminal for the 21st century」と謳っているように、エンジニアの生産性を上げるため、ターミナルを一から再設計したそうです。</p><p>warpの主な特徴について、公式ページよりざっくり下記に挙げています。</p><ul><li>コマンドを<strong>ブロック単位</strong>での管理</li><li><strong>A.I Command Search</strong></li><li>豊富な<strong>コマンドパレット</strong></li><li><strong>Workflow</strong></li><li><strong>リッチなコマンド履歴の参照・検索</strong></li><li><strong>自動パーマリンクの作成</strong>（実行結果をWebで共有）</li><li><strong>Hotkey</strong></li></ul><p></p><h2 id="he4b21a21c7">インストール方法</h2><p>現在はMacOSのみ対応、今後Windows/Linux環境でも対応する予定だそうです。<br>また、使用する際にはアカウント登録が必要となります。</p><h3 id="ha55d65a7da">インストーラーを使う場合</h3><p><a href="https://app.warp.dev/referral/7DGGGV" target="_blank" rel="noopener noreferrer nofollow"><u>こちら</u></a>からdmgファイルをダウンロード。</p><figure><img src="https://images.microcms-assets.io/assets/ed092f4fb32144088ce7689743fe3a8f/b566b8c25e3d4d96b0a4638a6e70f4da/warp_download.png" alt="" width="807" height="451"></figure><h3 id="hcbe4d998b2">Homebrewを使う場合</h3><p>下記のコマンドをターミナルで実行</p><pre><code class="language-shell">brew install --cask warp</code></pre><figure><img src="https://images.microcms-assets.io/assets/ed092f4fb32144088ce7689743fe3a8f/7b319c63b6c34aa3a9ba913151e62657/%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%202022-12-14%2013.26.22.png" alt="" width="1702" height="708"></figure><blockquote><p>メモ：</p><p><code>--cask</code>オプションはhomebrewの標準オプションでGUIアプリをbrewインストールする際に使うみたい。<br>オプションになる前までは<code>brew cask</code> のようにcaskコマンドとして存在していた。<br>現在のhomebrewではアップデートでオプション不要となり、通常の<code>brew install</code>でGUIアプリのインストールが可能。</p></blockquote><p></p><p></p><h2 id="h556c3a338b">基本設定と使い方</h2><p>基本的には通常のターミナルと同じように使えます。</p><p>iTermのように画面分割もできます。（⌘ + Dで縦split、⌘ + shift + Dで横split）</p><figure><img src="https://images.microcms-assets.io/assets/ed092f4fb32144088ce7689743fe3a8f/66030e826f2040798b854452cbe4608a/%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%202022-12-15%2012.25.14.png" alt="" width="3024" height="1842"></figure><p>コマンドパレット（⌘ + P）は必要なショートカットを探す時に使えます。</p><figure><img src="https://images.microcms-assets.io/assets/ed092f4fb32144088ce7689743fe3a8f/7887508a5fbd4e04874e1ca767aec97e/%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%202022-12-16%2018.54.00.png" alt="" width="2068" height="1501"></figure><p>コマンドの入力はウィンドウの下部に固定、結果は下から上に向かって出力されていきます。<br></p><figure><img src="https://images.microcms-assets.io/assets/ed092f4fb32144088ce7689743fe3a8f/71619cc5a45348a1a99148ad73e02a1b/warp_excete_result.png" alt="" width="836" height="532"></figure><p>またマウスポインターで出力結果をブロック選択することができ、コピーや共有リンクの作成などが可能。</p><h2 id="h2e4855ede4">Warpの目的</h2><p>Warpは何を目的としているのか、今までのターミナルとどのように違うのか。</p><p><a href="https://www.warp.dev/blog/introducing-warp" target="_blank" rel="noopener noreferrer nofollow"><u>公式ページ</u></a>よりWarp CEOのZach Lloyd氏の記事の一部を簡単に要約しました。</p><blockquote><p>コードエディターとターミナルは開発者にとってどちらも欠かせないアプリケーションです。<br>しかし、過去40年間改善され続けてきたのはエディターだけであり、ターミナルに大きな変化は見られませんでした。<br>私たちは二つの大きな課題を解決します。</p><p>1．ターミナルの使いづらさ<br>2．チーム利用のための機能がない</p><p>Warpは、入力と出力を簡単にし、ほとんどの設定の必要性を無くしました。<br>よく使うツールのコマンドを提案したり、開発者の時間を節約する組み込みのワークフローを提供することで、コマンド入力を迅速かつ楽しくします。<br>また、「コラボレーション」機能によりチームメンバー間での知識の共有を容易にし、生産性をより強固なものにします。<br>DylanがFigmaで示したように。（Dylan：FigmaのCEO）</p></blockquote><p>まとめると、、、</p><p>エディターの進化は目まぐるしいのにターミナルって全然変わってなくね？</p><p>じゃあ微妙なところ改善してモダンなアプリを作ろう！</p><p>ついでにFigmaみたいにチーム開発で便利な機能もつけよう！</p><p></p><p>みたいな感じ？</p><p></p><h2 id="he3588b532b">あとがき</h2><p>今後もアップデートが期待されるWarp。</p><p>まだまだ始まったばかりのプロジェクトなので、今後のアップデートに期待しましょう。</p><p></p><p></p><h2 id="h335a87b5ef">参考サイト</h2><ul><li><a href="https://www.warp.dev/" target="_blank" rel="noopener noreferrer nofollow"><u>Warp公式サイト</u></a></li></ul>

Rust製の次世代ターミナル「Warp」のインストール方法とその特徴について解説します。

【Warp】次世代ターミナルWarpのインストール方法

<p>こんにちは！WebエンジニアのTomoyaです。</p><p>自分も勤めているSES企業、よく混在されやすい派遣企業との違いについて自分なりに整理してみました。</p><p>同じような疑問を抱いていた方の一助になりますと幸いです。</p><p></p><h2 id="h3f6fef4832">そもそもSESって？</h2><p>SESとは<strong>System Engineering Service</strong>の略語で、</p><p>システムやソフトウェアの開発・保守・運用などの特定の業務に対して<u>技術者を派遣するサービス</u>のこと。</p><p>システム開発における業務委託契約の1種で、法的には<strong>準委任契約</strong>にあたる。</p><p></p><h2 id="h492895a317">準委任契約（SES契約）とは？</h2><p>クライアント企業とSES企業との間で結ばれる業務委託契約の一つ。</p><p>業務委託契約には以下の3種類が存在する。</p><p></p><ul><li><strong>委任契約　</strong>・・・受注した業務の『行為の遂行』を約束する契約</li><li><strong>準委任契約</strong>・・・委任契約の中で法律行為※を含まないもの</li><li><strong>請負契約　</strong>・・・受注した業務の『成果物の納品』を約束する契約</li></ul><blockquote><p>※ 法律行為・・・当事者の意思表示により何らかの法的な効果を生み出す行為（モノの売買、税理士への業務委任など）</p></blockquote><p>委任契約と請負契約の大きな違いは<u>納品義務の有無</u>です。</p><p>委任契約の内容は決められた期間業務を行う事（技術を提供する事）であり、成果物の納品に関して責任を負いません。</p><p>SESもこれに含まれます。</p><p>またSES企業で勤務するエンジニアは、雇用主であるSES企業と雇用契約・労働契約を結びます。</p><p>そのため、クライアント企業はSESエンジニアに対して指揮命令権がなく、直接指示を出すことは禁止されています。</p><p>クライアント企業が業務を依頼する場合は、SES企業に対して行われ、依頼を受けたSES企業がエンジニアに指示を出す形となります。</p><figure><img src="https://images.microcms-assets.io/assets/ed092f4fb32144088ce7689743fe3a8f/9028d91bb77149cc8d7ebc8b3b90047e/ses.jpg" alt="" width="402" height="297"></figure><p></p><h2 id="hd9882e0f4a">派遣契約とは？</h2><p>クライアント企業と派遣企業との間で結ばれる契約。</p><p>派遣企業で勤務するエンジニアは、雇用主である<strong>派遣企業と雇用契約を結び</strong>、派遣先である<strong>クライアント企業と労働契約</strong>を結ぶ形となります。</p><p>そのため、<strong>クライアント企業に指揮命令権があり</strong>、クライアント企業から派遣エンジニアに対して直接業務を依頼することができます。</p><p>また派遣契約に関しての取り決めは、労働者派遣法により制定されています。</p><p>派遣契約には<strong>３年ルール</strong>という決まりがあり、<strong>派遣期間は最大３年まで</strong>とされています。また、最大３年をを経過した段階で、労働者を引き上げなければなりません。</p><blockquote><p>2015年以前： 26の業種が3年ルールを例外的に免除されていた<br>2015年以降： 労働者派遣法改正により、例外なくすべての業種について3年ルールが適用されるようになった。</p></blockquote><figure><img src="https://images.microcms-assets.io/assets/ed092f4fb32144088ce7689743fe3a8f/3c7a2182334444988778fe7e6202112b/%E6%B4%BE%E9%81%A3%E5%A5%91%E7%B4%84%E6%B4%BE%E9%81%A3.jpg" alt="" width="812" height="600"></figure>

SESと派遣の違いは？ エンジニアにとってのメリット・デメリットについて自分なりに調べてみた。

BLOG

POSTS LIST