GoogleFormカスタマイズ方法を記載した記事のリンクまとめ

カスタマイズ基本

www.gorilla-web.net

qiita.com

bit-media.space

自動返信

shogo-log.com

qiita.com

valmore.work

ThanksPage

tekito-style.me

Vue&Ajaxとの組み合わせ

webabc.hatenablog.jp

(*429エラーがでた)

medium.com

気になる点

  • Thanks の前に確認画面はほしい。(vueとの組み合わせがやはり必要か?)
  • フリーのプロキシを使うリスク
  • GoogleFormでRecaptchaは標準対応していない。

Strapi(HeadlessCMS)に関する情報をあつめてみた

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

https://chriswray.dev/

nuxt/strapi @nuxtjs/strapi

strapi.nuxtjs.org

Nuxt&Strapiブログ記事

jun-app.com

blog.logrocket.com

explorers.netlify.com

Strapi Deployについて

Herokuの無料プラン、あるいは5ドル/月 プランで対応できるはず

strapiホスティング:OneClickDeploy render.com Services7$/month + renderDisks

render.com

Deploy Strapi and NextJS to Heroku and Vercel Deploy Strapi and NextJS to Heroku and Vercel - YouTube

Strapi + NextJS

認証をMagic,課金はStraipeとの連携を解説した、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.io

海外フォーム自動化サービスを調べてみた

実際に試したフォーム自動化サービス

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

formkeep

フリープランあり、1フォーム5ドル/月~、zappier、aritable連携あり。 カスタムドメイン対応や、自動返信機能とサービスプランの関係が不明。

formspree

10ドル/月では、カスタムドメイン、返信メールカスタマイズ不可(対応の為には40ドル/月)トライアル期間なし。 Reactで使える(stateを保持してマルチステップフォーム対応等の拡張性あり)。

zapier無しで、Airtableに連携できる(beta)。zapier との連携は、wehookをつかって設定する、そうするとzapierは有料版必要。

Formspree

Shifterで問い合わせフォームを作る(FormSpree連携) | Life Retrospective

VueJSへの対応についての記事

Vue + Axios AJAX/POST + Formspree + Github Page | by SC Kim | Medium

getform

自動返信の為には、32ドル/月必要。

cognitoforms

独自ドメイン、自動返信対応の為には35ドル/月・TeamPlan。 (たぶんテンプレ埋め込み型) WordPressPluginがある。zapier連携も可能。

Pricing for Cognito Forms

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で簡単にフォームフィールドを定義できる。

tally.so

🔗 Connect Tally to 2000+ apps with Zapier

フォーム自動化サービス各種調査記事

ShifterとはWordpressをサーバーレス、静的サイトホスティングするサービス。

tailwindの既成のブロックをつかって、コーディングの効率を上げる

Tailblocks

実際につかってみた。Nuxtのサイトに適用した。ほぼコードのコピペと組み合わせで対応できるが、 一部修正が必要、幅とかz-indexとか調整する必要あり。

tailblocks.cc

TailwindUI

本家、コンポーネント一覧で鍵のかかっているものは有料。149ドルから(買い切り?)

tailwindui.com

shuffle

これもよさそうだけど一部有料(買い切り149ドル、月額24ドル)

shuffle.dev

tails

左側のペインから、ブロックを選択し、右側のペインからスタイルの設定を細かくカスタマイズできる。 (リンク先の動画参照) devdojo.com

その他、一覧での紹介記事

https://www.nxworld.net/tailwind-css-resources.htmlwww.nxworld.net

Webサイト制作系便利ツールセレクション

サイト企画、設計支援

ワイヤーフレーム作成 2バイト文字入力時にかなりバグる。テキストエディタで文字をあらかじめ入力して、それをコピペしていけば動く。 UIは好印象。 whimsical.com

web-kanji.com

Free PSD Website Design Templates

freebiesbug.com

baigie.me

デザインシステム ant.design

SVG

Blobmaker Blobmaker は柔らかな曲線で構成された形状をSVGで生成するツールです。
www.blobmaker.app

Get Waves SVGで描画された「波」を生成するためのツール

getwaves.io

Clippy CSSの clip-path プロパティを使用したクリッピング領域を編集、定義することができるツール

bennettfeely.com

波型やジグザグ、矢印などさまざまなシェイプを使い、ウェブサイトのコンテンツわけに便利な境界線デザインを作成するWebアプリ。

www.shapedivider.app

CSSコーディング支援系

CSSの複雑な@keyframeアニメーションを、タイムライン付エディタで確認しながら調整、作成できるビジュアルツール。animationとかshadowとかいろいろある。

keyframes.app

コピペで簡単!box-shadow(ボックスシャドウ)生成(ジェネレーター)ツール!(Youtube使い方解説あり)

front-end-tools.com

ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。

hero-generator.netlify.app

HP-CODE コピペで簡単!Webパーツ屋

haniwaman.com

画像素材関連

※商用利用可の画像検索可能

o-dan.net

※基本有料、月10点6000円から。

www.shutterstock.com

stock.adobe.com

heroicons.com

tyoudoii-illust.com

tech-pic.com

その他ツール

ogp.buta3.net

www.freelogodesign.org

coliss.com

qiita.com

Cross Browser Testing, Selenium Testing, Mobile Testing | Sauce Labs

front-end.ai

tech-pic.com

redketchup.io

画像圧縮サービス

squoosh.app

サイト制作物フィードバックツール

アカウント作成は無料。asana、chatworkと連携可能(Wrikeは連携予定)、連携内容はHPではわからない。

monji.tech

無料アカウントプランあり、サービス連携は、slack、chatowork等、プロジェクト管理ツールとの連携はなし。 iPadアプリがある。

www.brushup.net

レスポンシブサイト制作の生産性を向上させるCSSテクニック集(+JavaScript)

レスポンシブ対応に便利なCSSプロパティ等

leap-in.com

coliss.com

coliss.com

kia-king.com

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

coliss.com

360px 未満は JS で viewport を固定する(生産性向上の為)等

レスポンシブ基本

zenn.dev

メディアクエリは必ず順番に書かなくてはいけません。 モバイル向け、タブレット向け、PC向けの順番をめちゃくちゃに記述することはできません。 必ず、「大きい→小さい」か「小さい→大きい」の順番通りに指定するようにしましょう。

sole-color-blog.com

レスポンシブWebデザイン

responsive-jp.com

レスポンシブ JavaScript

zenn.dev

Python学習ロードマップ情報をYoutubeで収集してみた

学習ロードマップ情報

【NG例】間違ったPythonの勉強方法3パターン

【初心者向け】Pythonの独学完全ロードマップ【3ステップで解説】

学習コンテンツ

Python自動集約】PythonExcel業務を自動化!(第1弾)複数の請求書Excelファイルを集約

Pythonで面倒なExcelの仕事を自動化しよう 合併版|2時間で学べます【Pandas入門講座の次におすすめ】

おすすめ書籍

その他Python情報

youtu.be