フィットネス系Youtubeまとめ
年末年始におすすめのスイングが良くなるお手軽トレーニングを紹介します （片山晋呉選手） https://youtu.be/yOstwDy4SQk
※腹筋：仰向けになり、足を90度上に向ける、腹圧を高めて、足の裏を上に動かす。 ※お尻の筋肉：仰向け、足裏を床につけ、膝は約90度、お尻を浮かす。 （片足ずつならさらに負荷があがる） ※バランス：片足でバランスをとる。両手前、足を後ろ。 ※ふくらはぎのトレーニング、かかとを浮かす。（内また、外またもやる） ※四股ふみのトレーニング
アバターが超飛距離アップエクササイズ教えます！！【ゴルフ】 https://youtu.be/zm-X3FBy-3c
※耳の後ろで、手を伸ばしていく、伸ばした時は手のひら前 （伸ばした時、手の甲を前にするパタンもある） ※体の正面で、手のひらを上にして両腕を伸ばす。 次に、手のひらを外に向ける（肘を９０度曲げる）。平泳ぎ的な動き。 シーズン中、キャッチボール前に欠かさずやっていたルーティーン。 https://youtu.be/u-e_Cpllyb8
※背骨コンディショニング ※仙骨枕 ※自律神経を整える効果。
長座前屈の正しい練習法 https://youtu.be/vPwoF23mbmU
※体育すわりから、お尻を少しづつ後ろにずらす。 骨盤を立てるのがポイント、膝がまがっても、太もも裏がのばされる。
【可動域を広げる】肩甲骨の動きはほぐすだけでは改善しない【胸鎖関節の重要性】 https://youtu.be/38-P5JBOZo4
※胸鎖関節を抑えて、肩を回したりする。
昼休みにやると良いかも！肩こり、首の怠さに効くかもしれない３つの簡単エクササイズ。 （ダルビッシュ選手） https://youtu.be/H3aY4oq7XfY
※首と肩の連動のストレッチ運動。
肩甲骨はがしは筋トレで解決！肩甲骨が柔らかくなり、肩こりも改善されるエクササイズ 背中のトレーニング https://youtu.be/CvmBPEfkHtg
※肩甲骨についている筋肉。僧帽筋、肩甲挙筋、菱形筋。 ※ストレッチよりも筋トレで解決する。 ※ダンベルのベントオーバーローイング。
アゴや頭が前に突き出ている人が行うべき「首安定化エクササイズ」 https://youtu.be/6UUq2Gey5Hw
※後頭下筋群が短く硬くなる ※胸鎖乳突筋が短く硬くなる
＊椎前筋を正しく動かす。
=> おでこを壁につけて、姿勢を正しく、1分ぐらいキープする。
【肩の痛み】柔道整復師が教えるインナーマッスルの鍛え方【野球肩】 https://youtu.be/FPhaqDg8e1o
※肩関節のインピンジメントを起こしている可能性。 ※インナーマッスルを強化する。（棘上筋、棘下筋、小円筋） ・逆側の胸に手を当てて、肘を45度程度（少し外側に）上げ下げする。 ・ゴムバンドを手首に引っ掛けて、４５度外側に手を開いていく。 ・ゴムバンドを手首に引っ掛けて前に倣え、そして片側の腕を９０度外側に動かす。 ・肘を水平に固定、肘角度９０度で、肩を外旋する。 ・おもりをもって、ゼロポジション付近で、少し動かす。
40-50代でも肩甲骨ちゃんと動く？肩甲骨の動きが良くなれば広背筋はもっと良くなる！背中のトレーニングの可動範囲を広げる！ https://youtu.be/DIjo168Av34
※ダンベルをもって、肘を９０度に固定して、前にかがんで、肩甲骨をよせる。 ※ダンベルをもって、まっすぐ立って、肩を上から後ろに回す。
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アプリがある。
