円安が加速して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メモ

座間市民混声合唱団ウェブサイト

パステル音楽教室さまウェブサイト

また一つ、楽しいサイトを作りました。 手作り作家さんや地域の事業者・ボランティア団体などを応援し、活躍できる場所を提供することで、お客様との交流と出会いの場として、 地元活性の一助となるように地域に根ざした活動をしているスマイルブリス（Smile Bliss）さんの活動を支援するイベントサイトです。ウェブサイトを作るのみならず、ギャラリーの写真の撮影、プロモーション動画も手掛けました。バックエンドはmicroCMSです。

Smile Marche様Webサイト

<h2 id="hd5138bd0e3">初めての企業さま案件 (Over 40 Web Club案件)</h2> プログラミングコミュニティ Over 40 Web Club からのご縁で、スタートアップ企業さまのWebサイトを制作させていただきました。Next.js / Tailwind css /&nbsp;<a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">MicroCMS</a>&nbsp;という技術選定。初めてデザインを提示されて実装したサイトでもあります。クライアントの希望を伺いつつ、効果的な配色などのデザインでもご提案させてitだきました。 PWAも実現し、Lighthouseスコアの、パフォーマンス99点、アクセシビリティ、ベストプラクティス、SEOでフルスコアを実現。 Google Analytics、Google Search Consoleなどの仕組みも取り入れ、大変勉強になりました。 公開：January 2022

玄川リサーチ（Gen-Scent Research Laboratory) 

なぜか「設立当初から」のキーワードと縁のある今日この頃。若かりし頃は歌を歌うのが好きでしたが、その機会はすっかり失われておりました。10年越しに声をかけてくださっていた友人の誘いに応じ本当に久しぶりに、歌を歌っています。 長い歴史のある合唱団ですが、仕切り直しとなり、今年第一回演奏会を開催すべく、猛練習中です。 第一回ですからね、早速作りました。合唱団のWebサイトとプロモーション動画。使用技術はGatsbyとiMovie。Netlifyにホスティングしています。 このシニア世代の合唱団のメンバーも、私の目には、情熱にあふれる魅力的な人々としか映りません。私たちは、姿は経年の変化に晒されても、心には、いつまでも変わらぬ情熱を秘めているものです。そんな気持ちをアニメーションアバターにしてみました。もちろん、このサイトと動画で、大変盛り上がりました。 何となくデザイン好きでありそうと気がつかれ、印刷物を一気に引き受けています。 招待状やプログラムのデザインも任せていただき、初めてのIllustrator制作で入稿も果たしました。制作物内容のやりとりにNotionを導入したり、地域の50++ともITの恩恵を享受したいと思っています。 <h2 style="text-align:center" id="h4eadc4c855">【女声合唱団ポレポーレ】</h2><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FGAhSsJVeUvc%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DGAhSsJVeUvc&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FGAhSsJVeUvc%2Fhqdefault.jpg&key=ef481becf9fd4c17aa243190ea33aa20&type=text%2Fhtml&schema=youtube" width="560" height="315" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe> <h2 style="text-align:center" id="hbb5415ca52">さあ、御伽の国へ一っ飛び</h2>✨ファーストコンサート プログラム✨ <img src="https://images.microcms-assets.io/assets/94b75565dab34b138a7391982f2cda60/ef449835a11440269a3f9480bbf6173c/pic_polepole_program1.jpg" alt=""><img src="https://images.microcms-assets.io/assets/94b75565dab34b138a7391982f2cda60/9b421c9aea0f41bcb273e0aa269d414b/pic_polepole_program2.jpg" alt=""> ✨ご招待状✨ <img src="https://images.microcms-assets.io/assets/94b75565dab34b138a7391982f2cda60/37193a2ec45c4c6ca86d8eb1c4feb730/pic_polepole.jpg" alt=""> <img src="https://images.microcms-assets.io/assets/94b75565dab34b138a7391982f2cda60/e3633df599e548b78b12db9cf21ba98f/pic_polepole_inside.jpg" alt=""> ILLUSTRATOR <h2 style="text-align:center" id="h43e9b21742"><a style="color:#a4c520" href="https://polepole.netlify.app/" target="_blank" rel="noopener noreferrer">女声合唱団ポレポーレ</a></h2> GATSBY.JSNETLIFY

女声合唱団ポレポーレ

<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

Portfolio