円安が加速して150円台になった頃、今ってドルを稼ぐべきでは？と思うようになりました。 調べてみると海外のクラウドサービスって色々ありますね。 最初Telusのプロジェクトに応募してみましたが、最終テストがなかなか通過できません。 次にオーストラリアのAppenに登録してみました。こちらは書類の選考だけで単発のプロジェクトにすぐに参加できました。 システムに慣れずに面食らったり、放置していると「こりゃ〜！週最低＄5ドル分は作業せんかい〜！！」とチケットが発行されます。 これはまずいとガチ勉強始めることひと月、2022年11月は（たった）64ドル達成。しかしこの時はすでに円安が落ち着いていました。Appenの支払いは <a style="color:#1995b7" href="https://www.payoneer.com/ja/" target="_blank" rel="noopener noreferrer">Payoneer</a> と言うサービスを利用して受け取ります。ここで手数料が取られて、さらに為替レートもだいぶ割高なレート（-2円くらいな印象）。そしてその翌月がほぼ同じ時間投下で12月が130ドル。学習時間は全く収入にならないので、時給換算したら多分500円を下回るでしょう。 故に、ここでのモチベーションはただ、英語で試験を受けて合格し、何か問題があれば英語でレポートするという実務経験を重ねること、これにつきます。ただ今年に入ってからは学習なしですぐに作業に入れるプロジェクトが徐々に増えてきたのと（1月はまだ終わっていませんが、好きに時間を使って家事の合間で既に100ドル超）、業務の詳細は、守秘義務がどの範囲あたりまでなのか把握していないので、控えますが、これは面白いなと思えるタスクがあったりして、趣味の延長線上でお小遣いが稼げるなんてありがたいと言うところです。 しかし、英語なしで収入を狙いたいなら、AppenにはChinaプラットフォームというものがあります。こちらのプラットフォームの単発ものは英語がほぼ必要ないものがちらほらあります。問い合わせ関連は英語でしなくてはいけないケースがあるものの、作業は日本語オンリーで完結して時給30ドル越えのものに出会えます。 技術力を備えて転職、副業ということでなければ、クラウドワーカーという選択肢もあるのではないかと思います。私みたいなシニアに完璧片足突っ込んでいる層には、実力評価っていうのは魅力的ですし、自分の好きな時間に自宅からパソコン一つでこのようなサービスに貢献して、主婦とか今の社会でなかなかチャンスが貰えない人たちに広がっていったらいいのではないかなー、と思っています。 生活が不規則な娘に、起きてきたら「おもち食べる〜？」とか言って焼いてあげたりできる生活を大事にしてるので、小さいこと言っています。 <a style="color:#1995b7" href="https://connect.appen.com/qrp/public/jobs?uref=22c4793471dd89ec02062a409613d307" target="_blank" rel="noopener noreferrer">Appen アカウントこちら</a>から作成できます。

海外クラウドワーカー

ひとりGitを卒業してそろそろgit rebaseなどを使ってブランチ間差分をマージするようになりましたが、特定のコミットだけを取り込みたい時ってありますよね。そんなときに使い得るのが「git cherry-pick」です。 こんなふうに使います。<pre><code>$ git checkout［コードを取り込みたいどこかのブランチ］ 
$ git log //コミットIDを確認
$ git cherry-pick [取り込みたいコミットID]</code></pre> 上記コマンドでは取り込んでコミットが完了しますが、取り込みだけを実行したいときは「-n」をIDの前につけます <pre><code>$ git cherry-pick -n [取り込みたいコミットID]</code></pre> gitの階段登る〜♪

git cherry-pick

IT KINGDOM共同開発でTwitterのフィードをTwitter APIを使用して取得するというお題がありました。 Twitter APIの情報ってあまりネット上にないのですよね。Twitterの公式ドキュメントは鬼難しい。 サロンのつよつよエンジニアさまのコードを丸パクって実装しましたが、大変勉強になったものの、不完全燃焼感しかありません。 よくよく考え、そうだTwitter社は簡単にフィードを読み込める機能を提供してくれているではないか！ライブラリーを使って実装しよう。 方向が決まれば簡単です。react-twitter-widgetsというライブラリを見つけました。 👉　<a href="https://www.npmjs.com/package/react-twitter-widgets" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/react-twitter-widgets</a> 次のコマンドでライブラリーをインストールして <pre><code>yarn add -D react-twitter-widgets</code></pre> 次のように記載して必要な場所から呼び出すだけです。 <pre><code>//src/components/twitter/twitterFeed.tsx

import { Timeline } from "react-twitter-widgets";
 
 &lt;Timeline
 dataSource={{ screenName: "yokoiwasaki6", sourceType: "profile" }}
 options={{
 height: "1200", //お好みの高さ
 lang: "en", //お好みの言語
 width: "400", //お好みの幅
 }}
 /&gt;</code></pre> 次のように表示されます。レスポンシブ対応はこれだけが頼りのCSSで仕上げます💪 自分で調べて実装できたのでハッピー✨、しかも1時間で (๑&gt;◡&lt;๑) <img src="https://images.microcms-assets.io/assets/2a658bd3cab7402abf367e5d63b702b5/c3e6833801d3421cb48f8c9310fa51f7/%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-09-27%2010.31.54.png?w=500&amp;h=658" alt="twitter feed">

Twitterのフィードを読み込むのに、react-twitter-widgetsが最高だった

Tailwind cssは便利ですが、独自のCSSを当てたい時やより表現豊かな装飾を施したい時、セレクタで一括指定できるといいなと考えることはありませんか？ 例えば<a href="https://textgradients.com/" target="_blank" rel="noopener noreferrer">css gradient generator</a>などで生成した複雑なCSSをそのまま使えたら便利ですよね。そんな時はTailwind CSSを定義しているファイルに、次のように指定すればOK! <pre><code>/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.text-gradient{
background: #121FCF;
background: linear-gradient(to right, #121FCF 0%, #CF1512 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nm-container {
border-radius: 50px;
background: #e6ebf4;
box-shadow: inset 20px 20px 67px #c4c8cf,inset -20px -20px 67px #ffffff;
}

</code></pre> 呼び出し側 <pre><code> return (
 &lt;div className="text-gradient ...."&gt;
 ....
 &lt;/div&gt;

とか

 &lt;div className="nm-container　..."&gt;
 &lt;Title&gt;GitHub&lt;/Title&gt;
 &lt;ul className="..."&gt;

</code></pre>はい、こんなふうに表示できます。 【テキストのグラデーション】 <img src="https://images.microcms-assets.io/assets/2a658bd3cab7402abf367e5d63b702b5/cd429cd80d554748bf9e317a78952865/%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-09-17%2019.55.38.png" alt=""> とか 【neumorphismの背景】 <img src="https://images.microcms-assets.io/assets/2a658bd3cab7402abf367e5d63b702b5/9ba83c15538b4cef99e8a378b874f5b3/container.png?w=451&amp;h=800" alt=""> あまり多用するとTailwind cssの利点を相殺してしまいますので、ご利用は最小限かつ計画的に！

Tailwind cssと自分のCSS クラスのセレクタを併用する

microCMSにお問い合わせをPostして、Slackに通知を送ることができます。 <h2 id="h685501ae7e">microCMS側の設定</h2><h3 id="h7e605794c8">APIの作成</h3> <ol><li>お問い合わせを受け取るための新しいAPIを作成を作成します。エンドポイントは任意の文字列です。ここでは 「contact」としています。<img src="https://images.microcms-assets.io/assets/2a658bd3cab7402abf367e5d63b702b5/7b53fc2381f04f4db1a7132b2d958909/image.png?w=500&amp;h=316" alt="microcms api setting"></li><li>APIに［リスト形式］を選択します。<img src="https://images.microcms-assets.io/assets/2a658bd3cab7402abf367e5d63b702b5/a677fc0688aa4d3bb133b8d66b770437/%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-09-12%2017.41.38.png?w=500&amp;h=243" alt="microcms api setting"></li><li>APIスキーマを設定します。<img src="https://images.microcms-assets.io/assets/2a658bd3cab7402abf367e5d63b702b5/98b16781a5904cd0a6a9540e7511f523/%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-09-12%2017.42.19.png?w=500&amp;h=337" alt="microcms api setting"></li></ol><h3 id="h7b29856e39"> APIキーの作成</h3><ol><li>歯車マーク &gt; APIキーから［APIキー管理］に移動します。必要に応じて［＋追加］からAPIを作成してください。対象APIをタップして、次の個別設定画面に進みます。<img src="https://images.microcms-assets.io/assets/2a658bd3cab7402abf367e5d63b702b5/ce0fb51be2d94e55bb81cb31dd9388bb/%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-09-12%2019.19.34.png?w=500&amp;h=197" alt="microcms api setting"></li><li> 個別権限の［お問い合わせ］に、POSTを設定します。<img src="https://images.microcms-assets.io/assets/2a658bd3cab7402abf367e5d63b702b5/e697c1d6b95c4d00814b0cfc5fa12ab6/contact.png?w=500&amp;h=212" alt="microcms api setting"></li><li>右上の［変更］ボタンを押してAPIの設定を完了します。</li></ol> <h2 id="h6e1927878f">Next.jsでフォームを作成する</h2><h3 id="ha3fa6a9ca9">お問合せフォームの作成</h3> 1.「src/pages/api/contact/index.ts」を作成します。次のように記述します。<pre><code>import type { NextApiRequest, NextApiResponse } from "next";
import { createClient } from "microcms-js-sdk";

export const client = createClient({
 apiKey: process.env.PORTFOLIO_API_KEY!,
 serviceDomain: "yoko-portfolio",
});

export default async function handler(
 req: NextApiRequest,
 res: NextApiResponse
) {
 try {
 console.log(req.body);
 await client.create({
 content: req.body,
 endpoint: "contact",
 });
 res.status(200).json("OK");
 } catch (err) {
 console.error(err);
 res.statusCode = 500;
 }
}

</code></pre>2. 「src/pages/contact.tsx」を作成します。<pre><code>import { NextPage } from "next";
import { AppTitle } from "src/components/atom/appTitle";
import { ContactForm } from "src/components/form";
import { Layout } from "src/layout";

const ContactPage: NextPage = () =&gt; {
 return (
 &lt;Layout&gt;
 &lt;AppTitle title="contact" description="お問合せページ" /&gt;
 &lt;ContactForm /&gt;
 &lt;/Layout&gt;
 );
};

export default ContactPage;</code></pre>3. 「src/components/form.tsx」を作成します。<pre><code>import { Button, Group, Textarea, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import { FC, useState } from "react";
import { Title } from "src/components/atom/title";

export const ContactForm: FC = () =&gt; {
 const [sendMessage, setSendMessage] = useState&lt;string&gt;("Need help?");
 const form = useForm({
 initialValues: {
 name: "",
 email: "",
 message: "",
 },

 validate: {
 email: (value) =&gt; (/^\S+@\S+$/.test(value) ? null : "Invalid email"),
 },
 });

 const onSubmit = async (values: typeof form.values) =&gt; {
 try {
 // microCMSに送信
 await fetch("/api/contact", {
 body: JSON.stringify(values),
 headers: {
 Accept: "application/json, text/plain, */*",
 "Content-Type": "application/json",
 },
 method: "POST",
 });
 form.reset();
 setSendMessage("Thank you! We'll be in touch.");
 } catch (error) {
 console.error("Fetch error: ", error);
 alert(JSON.stringify(error));
 }
 };

 return (
 &lt;div className="container mx-auto w-screen py-20 px-3 md:max-w-5xl"&gt;
 &lt;Title&gt;Contact&lt;/Title&gt;
 &lt;div className="mx-auto max-w-2xl"&gt;
 &lt;div className="mb-3 font-bold"&gt;{sendMessage}&lt;/div&gt;
 &lt;form onSubmit={form.onSubmit((values) =&gt; onSubmit(values))}&gt;
 &lt;TextInput
 required
 label="Email"
 placeholder="your@email.com"
 {...form.getInputProps("email")}
 className="mb-3"
 /&gt;

 &lt;TextInput
 required
 label="Name"
 placeholder="Taro Yamada"
 {...form.getInputProps("name")}
 className="mb-3"
 /&gt;

 &lt;Textarea
 required
 label="Your message"
 placeholder="I want to order your goods"
 {...form.getInputProps("message")}
 className="mb-3"
 /&gt;

 &lt;Group position="center" mt="md"&gt;
 &lt;Button
 type="submit"
 &gt;
 Send message
 &lt;/Button&gt;
 &lt;/Group&gt;
 &lt;/form&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 );
};</code></pre> <h2 id="h09888f3683">Slackと連携して通知を受け取る</h2>microCMSにはコンテンツの公開時にSlackのWebhookを使って通知できる機能があります。この機能を使って、お問合せえPOST時に通知を飛ばせます。 👉　<a style="color:#0186ab" href="https://slack.com/intl/ja-jp/help/articles/115005265063-Slack-での-Incoming-Webhook-の利用#incoming-webhook-u12398u35373u23450" target="_blank" rel="noopener noreferrer">Slackに詳しい説明がありますので参照してください。</a>

microCMSとSlackでお問合せ機能を実装する

このポートフォリオ作成で使用した、便利なESLintプラグインのメモです。 <pre><code>//package.json 

 "eslint-config-prettier": "8.5.0",
 "eslint-plugin-import": "^2.26.0",
 "eslint-plugin-simple-import-sort": "^8.0.0",
 "eslint-plugin-sort-keys-custom-order": "^1.0.3",
 "eslint-plugin-unused-imports": "^2.0.0",
 "prettier-plugin-tailwindcss": "0.1.11",

</code></pre> <h1 id="h72f434d105">eslint-config-prettier</h1>👉　<a href="https://www.npmjs.com/package/eslint-config-prettier" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/eslint-config-prettier</a> Turns off all rules that are unnecessary or might conflict with [Prettier]. Prettierとコンフリクトの起きる不要なルールをすべてOFFしてくれます。 <h1 id="h4b2bc1873a">eslint-plugin-import</h1>👉　<a href="https://www.npmjs.com/package/eslint-plugin-import" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/eslint-plugin-import</a> This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names. import / export シンタックスの整合性をチェックします（スペルミスなど警告が出ます）。 <h1 id="hc7d24f83fc">eslint-plugin-simple-import-sort</h1>👉　<a href="https://www.npmjs.com/package/eslint-plugin-simple-import-sort" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/eslint-plugin-simple-import-sort</a> This is for those who use&nbsp;<code>eslint --fix</code>&nbsp;(autofix) a lot and want to completely forget about sorting imports! importsをアルファベット順に自動で並び替えます（on saveをで実行されるよう設定する必要あり）。便利！ <h1 id="h6765ec22d6">eslint-plugin-sort-keys-custom-order</h1>👉　<a href="https://www.npmjs.com/package/eslint-plugin-sort-keys-custom-order" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/eslint-plugin-sort-keys-custom-order</a> This plugin enforces alphabetically sorting keys in objects and typescript types with auto-fix. You can add a list of priority sorted keys for custom sorting (ex: if you want "id" to be the first property). オブジェクトや型定義のキーを自動でアルファベット順に並び替えます。並び順を指定することもできます（指定方法は下記.eslintrc.json参照）。<h2 id="hcf83e1357e"> </h2><pre><code>eslint-plugin-unused-imports</code></pre>👉　<a href="https://www.npmjs.com/package/eslint-plugin-unused-imports" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/eslint-plugin-unused-imports</a> Find and remove unused es6 module imports.&nbsp; 使わなくなったモジュールのimportを特定して自動で削除します。 これらのプラグインをインストールしたら.eslintrc.jsonでプラグインの追加とルールを設定します。細かな設定は必要に応じて調整してください。<pre><code>//.eslintrc.json
{
"plugins": ["sort-keys-custom-order","simple-import-sort","import","unused-imports"],
"extends": ["next/core-web-vitals", "prettier"],
 "rules": {
 // For JS objects sorting
 "sort-keys-custom-order/object-keys": ["warn", { "orderedKeys": [
 "id",
 "name",
 "title"
 ] }],
 // For TS types sorting
 "sort-keys-custom-order/type-keys": ["warn", { "orderedKeys": [
 "id",
 "name",
 "title"
 ] }],
 "simple-import-sort/imports": "warn",
 "simple-import-sort/exports": "warn",
 "import/first": "warn",
 "import/newline-after-import": "warn",
 "import/no-duplicates": "error",
 "unused-imports/no-unused-imports": "error"
 }
}</code></pre> その他<h1 id="hf81b30e57a">prettier-plugin-tailwindcss</h1>👉　<a href="https://www.npmjs.com/package/prettier-plugin-tailwindcss" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/prettier-plugin-tailwindcss</a> A&nbsp;<a style="background-color:#ffffff" href="https://prettier.io/" target="_blank" rel="noopener noreferrer">Prettier</a>&nbsp;plugin for Tailwind CSS v3.0+ that automatically sorts classes based on&nbsp;<a style="background-color:#ffffff" href="https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted" target="_blank" rel="noopener noreferrer">our recommended class order</a>. <code>yarn add -D prettier prettier-plugin-tailwindcss</code> Tailwind cssのクラス名を推奨する順番に並び替えてくれます。地味に便利✨

eslint prettierメモ

<h2 id="hebc06ffa10">APIを取得してデータが表示✨</h2>Tailwindならレスポンシブも驚くほど簡単。メディアクエリでかなりレスポンシブ対応ができるようになりましたが、ライブラリーを使用すれば、開発時間をグッと短縮できます。<a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">MicroCMS</a>って本当によくできているのです。すっかりファン。学んだことをフルに生かし、可愛らしいメインクーンの写真に癒されながら、とうとう公開まで漕ぎ着けました。 <a href="https://www.sakuraipiano.com" target="_blank" rel="noopener noreferrer">Cattery Canon</a>&nbsp;制作：October 2021

Canon Cat（メインクーンブリーダ）

<h1 id="h18af7c8bdc"><a href="https://sakuraipiano.com/" target="_blank" rel="noopener noreferrer">落ち込んでる場合じゃないねん！と言って生まれたサイト</a></h1> 音楽家受難の時代を生きる <a href="https://sakuraipiano.com/" target="_blank" rel="noopener noreferrer">櫻井ピアノスクール</a>&nbsp;·&nbsp;June 1st, 2020 時はコロナ。長年の友人がコロナになって次々と活動の場所が失われ、すっかり落ち込んでしまったのを見て、落ち込んでいる場合ではない！私がWebサイトを作ってあげる！！と言って最初に作ったのがこちらのピアノスクールのWebサイトでした。 作ってあげると言ったものの、Webサイトなんて実際に公開したことなどなかったのでドキドキでした。生まれた当初はBootstrapを使ったテンプレートからサイトを作りました。jQueryもコピペでスムーズスクロールなども実装してみました。デプロイはAWS S3。とにかくお金のかからない方法を模索した結果でした。 10年間新しい生徒さんがなかったそうですが、このサイトを通して次々と新しい生徒さんがいらっしゃるようになったそうです。 今ではNext.js製のパフォーマンス重視のサイトに置き換えたので、表示速度もサクサクになりました。サーバーもVercelに移動しました。Google様の評価もよろしいようで、検索上位に登ってきてくれます。 学んだことが活かせるのは嬉しいですね。

Sakurai Piano School

<h2 id="h634b0ba292">お題投稿アプリ</h2> IT KINGDOM イベントのために作ったお題投稿アプリ。 <ul><li>✓　Firebaseへの登録がわからなくて、締め切りの差し迫る中、現役エンジニアと初のコラボ。</li><li>✓　DB設計の大切さを痛感。</li><li>✓　エンジニア脳じゃないので、独創的なアプリ。</li></ul>

お題投稿アプリ

<h2 id="h22fe1858df">チャットアプリ</h2> LT会イベントでヤジを飛ばしたり、質問したり。<ul><li>✓ イベントごとに模様替え。</li><li>✓ みんなのコメントが愛しい。</li><li>✓ 少しづつ進化。</li></ul>

チャットアプリ

<h2 id="h496275de90">Ring the Bells</h2>IT KINGDOM LT会登壇のために作ったアプリ。アプリに行って、ひつじさんをタップしてみて。素敵な1日になること間違いなし！<ul><li>✓　かなり学習の集大成。</li><li>✓　Webで独特な境地に立つ。</li><li>✓　ベルを鳴らそう。</li></ul>

Ring the Bells

<h2 id="hf077cf861e">イベントを盛り上げるために作るアプリは楽しい</h2> 幹事をランダムに選出。<ul><li>✓　ピカピカアニメーションが炸裂。</li><li>✓　選出中は、作者としては変な挙動がないか、ドキドキ。</li><li>✓　みんな使ってくれてありがとう。人々のやさしさに泣く。</li></ul>

Blog

Portfolio