【Netlify+ReactApp】create-react-appで作ったWebアプリでNetlifyのForm機能を使う

こんにちは、れいじです。

NetlifyというHerokuみたいなPaaSサービスがあるのですけれども、これが中々よろしいサービスでして最近色々と弄ってみてます。

www.netlify.com

無料枠でも

• 月300デプロイまで可能
• カスタムドメイン設定可能
• 簡易CI/CD

などなど。アクセス数に関しても(大バズする程でなければ)全然大丈夫。確か12万アクセスまで大丈夫だった気がする

その中でも目立つのがFormという機能でして、例えばショップページを運営している場合だとお問い合わせフォームや商品に関する感想を受け付けるフォームが簡単に実装できます。

qiita.com

私はWebページを作る時は専らReactなりVueなりを使っているので、今回作ろうとしたページもReactで作るつもりでした。皆おなじみcreate-react-appです。

…………Form動かねえ～～～～～～～～！！！

滅茶苦茶悩んでなんとか実装出来たのでサンプルコードと共に置いておきます。

利用技術＋αは

• React(create-react-app)
• Material-UI

です。

第1の躓き：補助用formタグはpublic/index.htmlに書く

も～～～～～これですこいつが全ての元凶。いや私の頭が悪いだけかもしれん

そもそもNetlifyのForm機能を使うためにライブラリを導入しなければならないとかそういうのは一切なく、form要素にnetlify属性を付与してやればNetlifyのBotがその値を読み取ってFormと連携してくれるよっていうのが強力なポイントなのですけれども、JSXを使っている場合だと上手く動かないらしいです。(Botが検出できるのはHTML要素だけであって、JSによって生成されたHTML要素はクロールできない)

この問題を解決するために以下の公式のドキュメントには、任意のhtmlファイルにnetlify属性を付与したformタグを書いておく必要があるらしいです。

www.netlify.com

上で述べたように、JSで生成されるHTML要素(コンポーネント)はbotがクロールできないので、こいつをReact,Component内だったりfunction Componentの中に書いても動作しないんですよね。

で、create-react-appコマンドで作ったWebアプリでこいつが書けそうなhtmlファイルはindex.htmlしかありません

つまりこんなかんじ

これでNeilifyのBotが「オッこのページにはNetlifyのFormと連携する要素があるっぽいぞ！」と把握することができます

第2の躓き：補助用formタグの中で仕える要素はinputかtextarea

Material-UIとかいい感じのコンポーネントライブラリを使っていると色々と忘れがちだと思うんですけど、コンポーネント側でどんなFormやInputを使っていようと、index.htmlに追記する補助タグの中身はinputタグかtextareaタグじゃないと動作しないようです。

例えば連携するフォームが以下のようなものでも、index.html側に書くものは基本的なフォーム系タグで構成されていなければNetlify側で掴む事ができません。いや当然といえば当然なんですが本当HTML5のタグ忘れるよ……Reactとか使ってるとさ……

gist.github.com

第3の躓き：inputタグを忘れない

<input type="hidden" name="form-name" value="message" />

これ！！これね！！

index.htmlを読み込んだ時に見つけたフォームと紐付けるための大事なやつだから忘れちゃだめなやつです！公式フォーラムで「Form動かねえ～」って質問してる人のうち9割くらいがこのinputタグ書いてないとかそんな感じだったと思います

Netlify form not submitting, or showing page not found error - Support - Netlify Support Forums

[Support Guide] Form problems, form debugging, 404 when submitting - Support Guides - Netlify Support Forums

これを書かないとそもそもNetlifyのForm機能に値が送信されないので気を付けてください。

まとめ

というわけでなんとか実装できました

Formikとか使ってたらもっとややこしそう(こなみかん)

github.com

全然関係ないけどNetlifyのフォーラムには運営側の人が結構常駐していて、こういうTipsの共有をかなり嬉しがるっぽいです。英訳してフォーラムに投稿しちゃおうかな～(英語力皆無)

ではでは！！

【#StayAtHome🏠】【終了しました】4/26~5/6の間技術書典で発刊したvvvvの既刊を誰でも閲覧可能にしました(※一部制限付き)

こんにちは、れいじです。

コロナウイルス対策で全国的に外出自粛を行わざるを得ない状況で、「おうち時間」を過ごす人が圧倒的に増えています。

この機会に家で出来る新しい余暇活動を見つけて難局を乗り切ろうという兆候も見られます。

(外出自粛しなくてもGW前に一部のエンジニアは○○を勉強するぞ！と意気込んでたりするのですが)

クリエイター、というかビジュアルプログラミングに少しでも興味のある方の「おうち時間」を支援するべく、ビジュアルプログラミング言語「vvvv」に関する技術同人誌3冊をGW中の期間限定で閲覧できるようにしました。

GW期間中に無料で閲覧できる書籍

- vvvvでCGプログラミングやってみる本ービジュアルプログラミングことはじめー ： https://drive.google.com/file/d/1rWGELXTag4qIToujDJWfY_m-2I-AB6Bg/view?usp=sharing

• vvvvでCGプログラミングやってみる本2－Spreadをマスターしてステップアップ！－ ： https://drive.google.com/file/d/1J7dSFaMuCcPp72Ogo84u7y9LDZVxJqBl/view?usp=sharing

• vvvvでCGプログラミングやってみる本3－マイクやKinectを使ってみよう！－ ： https://drive.google.com/file/d/1S4XS0kzWXgBW8w_lxDY_T4OTRf1mKdhW/view?usp=sharing

制限事項

技術書典及び通販等でお金を払って購入いただいた方と差別化を行う為に以下の利用制限を設けています(Googleドライブの共有設定で縛っています)

• pdfファイルのダウンロード不可：Webブラウザでのみの閲覧に限定します

• pdfファイルの印刷不可：印刷→再度自分用にPDF化もしないでください

読んだ後にやってくれたらうれしいこと

• Twitterアカウントをお持ちの方は、是非「#vvvv」「#vvvv_jp」タグをつけて作業過程や作ったものをツイートしてください。当然私も見ますし、日本のvvvvユーザーたちも見ていますし、vvvv開発側の人たちも良く見ているハッシュタグです。励みになります！

正直マジで外出れなくてつらたにえんだけどウチらみんなで乗り切ってこ！って感じでよろしくおねがいします！

ではでは！

【yarn】Windowsでyarn createするとディレクトリ名の関係で詰んだのでなんとかした話【C:\Program】

こんにちは、れいじです。

Reactで新規アプリを作る場合は脳死でcreate-react-appをしていた私ですが、フロントエンド界隈の時代の流れははやいもので、所謂グローバルインストールされたcreate-react-appコマンドはいつの間にか利用非推奨になってました。いつから？

代わりにyarn createを使ってね、と書いてあります。

create-react-app.dev

yarnのバージョンは問題なかったので、コマンドをぽちー

PS D:\dev> yarn create react-app my-app --template typescript 
yarn create v1.12.3
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
      - create-react-app
'C:\Program' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
error Command failed.
Exit code: 1
Command: C:\Program Files (x86)\Nodist\bin\bin\create-react-app
Arguments: my-app --template typescript
Directory: D:\dev
Output:

ゆ　る　し　て

Program Fileの間に半角が入るので、そこでコマンドが途切れている(Files以降はオプション)とみなされるらしい。ほっほーん確かにC:\Programはコマンドじゃないしちかたないね

grum.hatenablog.com

上記の記事によると、「Program Files (x86)」という表記は「PROGRA~2」ってかけばいい感じに置き換えて見に行ってくれるらしい。

というわけでこんなかんじで置き換える。

PS D:\dev> c:\Progra~2\Nodist\bin\bin\create-react-app my-app --template typescript

絶対パスでコマンドを指定する＆問題のあったプログラム関連のディレクトリ名を置き換えることでどうにかできた。よかったー一生流行りに乗れないのかと思いました。

ではでは～

手芸オタクエンジニアの2019年買ってよかったもの

こんにちは、れいじです。

2019年はまぁ色々あって色々あったんですが、話せなかったりする話題のほうがおおいので、2019年のまとめとしてざっくり「生きてました、2020年も生きます」とだけ言っておきます。

今年もかーなり買い物しました。

ので紹介します。

ガジェット編

Surface Arc Mouse

マイクロソフト Surface Arc Mouse CZV-00007

もう1年半前くらいから私用PCはWindowsに統一していて(仕事用PCはMac)、ハッカソンやイベント参加のときに持っていくPCはSurface Laptopを使っています。

Surface本体はバーガンディを使っているので、マウスもバーガンディにしました。グイッと曲げてマウス状にすると自動で電源が入るシステムになっていて、使わないときはグイッと伸ばして平面にすれば電源オフになるし、持ち運ぶ際も省スペースで済む仕組み。

やっぱマウスってバッグの中でかさばりがちなので、薄くなるのは嬉しいです。

Surface Pen

マイクロソフト 【純正】 Surface Pro 対応 Surfaceペン シルバー EYU-00015

ちょうど先日開発したEMBLEを改修するために買いました。普通にイラレとかでも使えて便利です。単6電池ってどこに売ってるの？

reiji1020.hatenablog.com

アニュドール・ブラン2　ユザワヤモデル

ブラザー コンピューターミシン アニュドール ブランII/CPE1501[初心者向け 本体 brother]

人生初自分用ミシンでした。実家のミシンは何度か使ったことがあるけど、下糸をセットしたり上糸をかけるのに必死だったり、そもそもフットコントローラーなくて手が4本欲しくなる手元の忙しさだったりで何となく苦手だったんですが、最近のミシンは手が2本しかなくても満足に縫えるので最高です。

このミシンは初心者向けということもあり、非常に使いやすいです。難しい刺しゅう機能とかは無いんですが、小物作ったり服作ったりするには十分な機能が揃ってます。

私はちょうどユザワヤ友の会のセールで「30000円弱でフッコン＆各種押さえ全部入ってるセット」を買ったので、オプション品盛り盛りでお得にミシンを自宅にデプロイしました。

エンジニア全員ミシンを買え

iNSPiC

Canon スマホプリンター iNSPiC PV-123-SP 写真用 ピンク

インクのいらないスマホプリンターです。

zinc(ジンク)という特殊なフォトペーパー(裏面がシールになってる)にスマホで撮った写真や画像を印刷できるプリンターで、主にハンドメイド品の発送時の梱包に使用したり、トラベラーズノート・販売用のジャンクジャーナルを作るときに使ったりしてます。

普通のプリンターも家にはあるんですが、小さい画像をサッと印刷したいときに便利ですし、最近はPCからの印刷ｰ>プリンター、スマホからの印刷ｰ>iNSPiCという感じで使い分けてます。

クロバー　パッチワークこて

Clover NEW パッチワークこて 57-903

ちっちゃいアイロンみたいなものだと思ってもらえればいいです。

よくヴィンテージショップでレースとかリボンとか買うんですが、折りたたんで保管してるとシワになりますよね。

そのたびにデカいアイロン温めてアイロン台用意して・・・っていうのがめんどくさすぎるので、これをシュッと温めてシュッとシワ伸ばしに使ってます。

普通にバイアステープ作るのにも使う。無くても困らないと言われればそれまでだけど、確実にQoL上がります

電気ケトル

ティファール パフォーマ レッド 電気ケトル0.8L コンパクト 空焚き防止 自動電源OFF フタ取り外し可 お手入れ簡単 KO1535JP

原始人なので今までの人生ではガスで湯を沸かしてコーヒーとか飲んでいたんですが、「いつまでガスで湯沸かしてんのｗｗｗ」と笑われたので電気ケトルを導入しました。

結果としてQoLがハチャメチャに上がりました。

ソフトウェア編

Adobe Creative Cloud コンプリート

Adobe Creative Cloud コンプリート|12か月版|Windows/Mac対応|パッケージコード版

もともとイラレだけ持ってたんですが、クリスマスの夜にプランをアップグレードしました。

AfterEffectほしいしPremire Rushもほしいなーと思っていたところ、単体プラン3つ契約よりコンプリートプラン契約のほうが安く済みそうだったので思い切ってコンプリートプランに変えました。色々遊べて便利ですね。

Canva

https://www.canva.com/ja_jp/www.canva.com

プレミアプラン(1万/年)に課金しました。主にインスタのショップアカウントに投稿するストーリーズ作りに使っています。

Overと悩んだんですが、Canvaのほうがテンプレートも充実していたのでこっちに。

コスメ編

MISSHA　クッションファンデーション(モイスチャータイプ)

ミシャ Мクッションファンデーション（モイスチャー） No.21 明るい肌色 15g

ファンデーションに悩む女全員買って一回試してください

これになるまでマジョマジョのクリームファンデ使ってたんですが、カバー力が段違いにすごい。

ANNASUI　リップスティック　S

【アナスイ】リップ スティック S #400 3g [並行輸入品]

いい女の匂いがするのと唇がズルズルにならないのと色落ちしにくいです。

ケースもかわいいのでテンアゲ

CANMAKE パーフェクトスタイリストアイズ 14　アンティークルビー

キャンメイク パーフェクトスタイリストアイズ14 アンティークルビー 3g

会社に化粧していくの死ぬほどめんどくさいので、基本私の会社用化粧は「アイメイクだけちゃんとしとけば他手抜いててもなんとか見れる顔になるじゃろうがメイク」です(大悟風)

まぶたに左上をサー塗ってまぶたのキワに左下をガシガシして、目尻に右下をビャっとやればアイメイク完成するのでめっちゃ簡単に済む

Flora Notis JILL STUART フローラルグリーン オードパルファン

www.jillstuart-floranotisjillstuart.com

秒でいい女の匂いになれる

女の服を着たり男の服を着たり忙しい人生なんですが、フローラルグリーンは服のタイプ選ばずに使える香りなのでおすすめ

女の服にはホワイトローズもおすすめです

www.jillstuart-floranotisjillstuart.com

手芸道具編

裁ちばさみ

Clover 布切はさみ ブラック 24cm

裁ちばさみだけはいいヤツ買おう！

布裁つときのストレスが全然違います。ハサミにだけは課金しましょう

ニッパー・ペンチ・丸ヤットコ

www.kiwaseisakujo.jp

中学生ぶりに工具を新調しました。古い工具も家の手芸テーブルの据え置き工具として現役活躍しています

古い工具より少しサイズが大きめなので、個人的に使いやすいです

ファッション編

Atelier Pierrot 各種ドレス・ヘッドドレス

https://atelier-pierrot.shop-pro.jp/?pid=143953545atelier-pierrot.shop-pro.jp

https://atelier-pierrot.shop-pro.jp/?pid=139523283atelier-pierrot.shop-pro.jp

デザフェスとかHackDayとかで着てました。

令和なので好きな服着て生きていこうと思います

漫画編

ゴールデンカムイ

[asin:B082SFJ8RS:detail]

プライムにきてたのでアニメ一気観して一気に沼に入りました

推しは杉元佐一です

ギャルと恐竜

ギャルと恐竜 コミック 1-2巻セット [－]

ギャルと恐竜が一緒に生活する漫画です

ゆるふわな感じが最高

ふしぎねこのきゅーちゃん

[asin:4065126614:detail]

ネコチャン派全員読んで(号泣)

まとめ

HackDayのイメージが強すぎるんだとは思うんですが、「それ(服、ドレス、アクセサリー…)も手作りですか？」と聞かれることがめちゃめちゃ増えました。

流石にまだすべてのファッションアイテムを手作りできないので、2020年はすべて自作できるようにしたいです。

来年はベルニナのミシンを紹介できるようになれればいいな。。。