GitHubにssh接続する手順 (Windows10)
前提・準備 ＝＝＝ git config --global user.name [任意のユーザ名] git config --global user.email [任意のメールアドレス]
設定手順 ＝＝＝ ※秘密鍵ファイルの作成 ssh-keygen -t rsa -b 4096 -C "hoge@sample.com"
※作成したファイルを確認する。 $ ls -l ~/.ssh
※作成した公開鍵をコピーする $ clip < ~/.ssh/id_rsa.pub
※Configファイルの作成
Host github HostName github.com IdentityFile ~/.ssh/id_rsa
User git
git remote は http ではなく sshに変更する。 git remote set-url origin git@github.com:<ユーザID>/＜リポジトリ名＞.git
参考 ＝＝＝＝＝
https://yu-report.com/entry/githubssh/
GoogleFormカスタマイズ方法を記載した記事のリンクまとめ
カスタマイズ基本
自動返信
ThanksPage
Vue＆Ajaxとの組み合わせ
（*429エラーがでた）
気になる点
- Thanks の前に確認画面はほしい。(vueとの組み合わせがやはり必要か?）
- フリーのプロキシを使うリスク
- GoogleFormでRecaptchaは標準対応していない。
Strapi(HeadlessCMS)に関する情報をあつめてみた
Strapi + NextJS
Strapi Ninjaのコース https://www.youtube.com/playlist?list=PL4cUxeGkcC9h6OY8_8Oq6JerWqsKdAPxn https://netninja.dev/p/strapi-crash-course-tutorial
Strapi v4 Crash Course https://www.youtube.com/watch?v=vcopLqUq594 StrapiPreview https://blog.ravgeet.in/handling-previews-in-a-headless-architecture-strapi-and-nextjs
認証をMagic,課金はStripeとの連携を解説した、2時間半のコース。
Build a FullStack Ecommerce with Nextjs, Strapi, Magic and Stripe - YouTube
21本の動画チュートリアルコース。Nextの基本（SSG,ISR,動的ルーティング,Pagination）に加えて、多言語対応、認証まで解説してくれる。DeployはDigitalOcean。
Making Websites With Next.js And Strapi - YouTube
React系のUdemyコース。
www.udemy.com
Strapi Deployについて
Herokuの無料プラン、あるいは5ドル/月 プランで対応できるはず
strapiホスティング:OneClickDeploy render.com Services7$/month + renderDisks
Deploy Strapi and NextJS to Heroku and Vercel Deploy Strapi and NextJS to Heroku and Vercel - YouTube
その他情報
Strapi + NuxtJS
Chrisさんのポートフォリオサイト
StrapiとNuxtの組み合わせでの情報が少ないので貴重。
dev.to
GitHubレポジトリはFrontとBackに分かれている。
https://github.com/cwray-tech/portfolio-frontend
https://github.com/cwray-tech/portfolio-backend
Personal Portfolio Progress: Nuxt Layout and Strapi Setup - YouTube
nuxt/strapi @nuxtjs/strapi
Nuxt＆Strapiブログ記事
海外フォーム自動化サービスを調べてみた
実際に試したフォーム自動化サービス
basin
Basin8ドル/月から。14日無料トライアルあり。customDomain の為には、24ドル/月が必要。 8ドルのコースに課金して使用してみた、自動返信機能までは、8ドル/月で対応できる。 VueJsで確認画面付きのフォームから送信して動作が確認できた。 確認画面上のinputタグから情報を取得している。 zapierを使用して、basinに入力されたデータをAirtableに自動格納することも確認できた。
Connect your Basin to Airtable integration in 2 minutes | Zapier
参考日本語記事：
たった一行のHTMLコード追加でreCAPTCHAも導入できる、Webフォーム作成サービス「Basin」を使ってみた！ - paiza開発日誌
Shifterで問い合わせフォームを作る | Life Retrospective
kwes
多機能で有望感あったがうまくうごかせなかった、サインアップには電話番号登録必須。 無料版があるが、自動返信やカスタムブランディング対応（業者のロゴを外す）の為には、 29ドル/月必要。
その他のフォーム自動化サービス（海外）
formstack
50$/月・1userから。値段は高いけど、機能が多い。お客様側で多機能フォームのデザイン、実装が可能。 zapier経由でのairtable連携も問題ない。
Connect your Formstack to Airtable integration in 2 minutes | Zapier
Airtable Integration | Formstack Documents
formstack（document）はairtableのデータを引き抜いて表示ができる。（110ドル/月）
パートナープログラムがある。
Partners Community | Join Now | Formstack
formkeep
フリープランあり、1フォーム5ドル/月～、zappier、aritable連携あり。 カスタムドメイン対応や、自動返信機能とサービスプランの関係が不明。
formspree
10ドル/月では、カスタムドメイン、返信メールカスタマイズ不可（対応の為には40ドル/月）トライアル期間なし。 Reactで使える（stateを保持してマルチステップフォーム対応等の拡張性あり）。
zapier無しで、Airtableに連携できる(beta)。zapier との連携は、wehookをつかって設定する、そうするとzapierは有料版必要。
Shifterで問い合わせフォームを作る（FormSpree連携） | Life Retrospective
VueJSへの対応についての記事
Vue + Axios AJAX/POST + Formspree + Github Page | by SC Kim | Medium
getform
自動返信の為には、32ドル/月必要。
cognitoforms
独自ドメイン、自動返信対応の為には35ドル/月・TeamPlan。 （たぶんテンプレ埋め込み型） WordPressPluginがある。zapier連携も可能。
Cognito Forms Integrations | Connect Your Apps with Zapier
123formbuilder
有料版24ドル/月ドルから44ドル/月。テンプレ埋め込み型のよう。
gravityforms
wordpress設置、zappier連携可能。
価格は、年59ドルから。
Pricing | WordPress Form Builder Plugin | Gravity Forms
jotform
ホームページが日本語化されている。 JotForm=>Airtable直接連携あり。ロゴ外しは、29ドル/月。 テンプレ埋め込み型。 pdf入力フォームがある。レポート機能がある。 バーコードスキャンがある。
Tally
ベルギーの会社、有料版は24ドル/月。zapier->Airtable連携可。 GUIで簡単にフォームフィールドを定義できる。
Zapier: connect Tally to 2000+ apps
Paperform
月間12ドルから、Direct Integrationsでzapier等と連携可能。（当面のあいだ、こちらは追加費用はなしで対応とのこと 2021/07現在）
Paperform: Online Form Builder And Form Creator
フォーム自動化サービス各種調査記事
tailwindの既成のブロックをつかって、コーディングの効率を上げる
Tailblocks
実際につかってみた。Nuxtのサイトに適用した。ほぼコードのコピペと組み合わせで対応できるが、 一部修正が必要、幅とかz-indexとか調整する必要あり。
TailwindUI
本家、コンポーネント一覧で鍵のかかっているものは有料。149ドルから（買い切り？）
shuffle
これもよさそうだけど一部有料（買い切り149ドル、月額24ドル）
tails
左側のペインから、ブロックを選択し、右側のペインからスタイルの設定を細かくカスタマイズできる。 （リンク先の動画参照） devdojo.com
Tail-Kit
Tailwind CSS 2.0に対応した、250種類以上のUIコンポーネントを備えたオープンソースのライブラリ。 www.tailwind-kit.com
VueTailwind
Vueコンポーネントのセット。 www.vue-tailwind.com
Treact
Reactに対応。LandingPage作成用のコンポーネントがある。
Tailwind CSS PageCreator
ドラッグ＆ドロップでページを簡単に生成できる。
Tailwind CSS IntelliSense (VS-Code用）
その他、一覧での紹介記事
https://www.nxworld.net/tailwind-css-resources.htmlwww.nxworld.net
Webサイト制作系便利ツールセレクション
サイト企画、設計支援
ワイヤーフレーム作成 2バイト文字入力時にかなりバグる。テキストエディタで文字をあらかじめ入力して、それをコピペしていけば動く。 UIは好印象。 whimsical.com
Free PSD Website Design Templates
デザインシステム ant.design
SVG系
Blobmaker Blobmaker は柔らかな曲線で構成された形状をSVGで生成するツールです。
www.blobmaker.app
Get Waves SVGで描画された「波」を生成するためのツール
Clippy CSSの clip-path プロパティを使用したクリッピング領域を編集、定義することができるツール
波型やジグザグ、矢印などさまざまなシェイプを使い、ウェブサイトのコンテンツわけに便利な境界線デザインを作成するWebアプリ。
CSSコーディング支援系
CSSの複雑な@keyframeアニメーションを、タイムライン付エディタで確認しながら調整、作成できるビジュアルツール。animationとかshadowとかいろいろある。
コピペで簡単！box-shadow（ボックスシャドウ）生成（ジェネレーター）ツール！(Youtube使い方解説あり)
ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。
HP-CODE コピペで簡単！Webパーツ屋
画像素材関連
※商用利用可の画像検索可能
※基本有料、月10点6000円から。
その他ツール
Cross Browser Testing, Selenium Testing, Mobile Testing | Sauce Labs
画像圧縮サービス
サイト制作物フィードバックツール
アカウント作成は無料。asana、chatworkと連携可能（Wrikeは連携予定）、連携内容はHPではわからない。
無料アカウントプランあり、サービス連携は、slack、chatowork等、プロジェクト管理ツールとの連携はなし。 iPadアプリがある。
レスポンシブサイト制作の生産性を向上させるCSSテクニック集(+JavaScript)
レスポンシブ対応に便利なCSSプロパティ等
The magic of auto-fit and auto-fill (and the difference between them) The magic of auto-fit and auto-fill (and the difference between them) - YouTube
最強に便利なCSSの比較関数 min, max, clamp を紹介！これからのレスポンシブ対応に必須！ 最強に便利なCSSの比較関数 min, max, clamp を紹介！これからのレスポンシブ対応に必須！ - YouTube
360px 未満は JS で viewport を固定する（生産性向上の為）等
レスポンシブ基本
メディアクエリは必ず順番に書かなくてはいけません。 モバイル向け、タブレット向け、PC向けの順番をめちゃくちゃに記述することはできません。 必ず、「大きい→小さい」か「小さい→大きい」の順番通りに指定するようにしましょう。
