モノクロタイム

I'm from the future!

【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 Community

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

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

まとめ

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

f:id:yomoyamareiji:20200823120603p:plain

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

github.com

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

ではでは!!

診断から半年経って漸くADHDを受け入れられるようになった話

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

多分会社の人も見ているだろうしブログにするのはいかがなものかというところはあるんですが、知ってる人は知ってればいいし知らない人は知らないでいいんじゃないかなあということで書くことにしました。一文が長え!

昨年の初め頃より人生生きづらいなあ~みたいな状況が続いていまして、すったもんだしながら昨年10月にメンタルクリニック行ったら見事ADHD(注意欠陥・多動性障害)という結果が出ました。ついでに双極性障害のオマケも付いてきました。ハッピーセットかよ。

reiji1020.hatenablog.com

直近だと大学院でも生きづらそうなこと書いてました。生きづらさの周期がオリンピックか?

カウンセラーにも「20数年間お辛かったですね…」(鼻スンスン…)みたいな事言われたので多分同じ診断をされた人は基本生きづらいんだと思います。

ただ私の場合は通年生きづらいというよりは直近だけが生きづらかったので「はぁ、そうなんすか、」っていう感想でした。

自分より大変そうな人、例えば大学を留年してしまったり、仕事をするのが困難だったりする人はたくさんいると思っていたからです。自分の場合はそこまででもなかったんですね。

授業中に寝ることは大学院を出るまで一切ないし、忘れ物も遅刻も人並みで、勉強も人並みにできました。授業中に立つとかお喋りが止まらないということもなく。

なので脳波検査(光トポグラフィー検査)を実施したところ、「あー見事双極性障害の脳波に一致してるね、脳波の揺らぎもある(神経可塑性に異常が見られる)からADHDだねー」と言われてマジか…と落ち込みました。

そういうのもあって中々ADHDを受け入れられずにいたんですが、ちゃんと向き合う時間をとることで何とか立ち直れそうなところまできました。ある意味節目なんで、ちゃんと残しておこうと思います。

まぁでも思い返せばそれっぽいムーブしてたね

確かにできないことやわからない(理解できない)ことは人生においてたくさんあったのですが、出来なければ困ることは両親にできるようになるまで徹底的に叩きこまれましたし、他の子と同じようになるまで努力もしました。でも人と話が合わなかったり言ってる意味が瞬時に推測できないことはあります。咄嗟の文章構築も苦手です。

例えば、幼少期の私は絵本と同じくらい家電の説明書を読み、NHKの教育番組よりもニュース番組やトークショーなどの大人同士が喋っているテレビ番組が好きだったのですが、いろんな文字や単語を認識して大人に説明することができる一方で、同じ年の子どもが話す言葉がよくわからなくて、受け答えが出来ないことがありました。そんなもんだから当然友達は少ないし、追い打ちをかけるように我が家にWindows98がやってきたのでさらに孤独ライフをエンジョイすることになります。

一方、絵を描けば一時期町中を走る乗り物のラッピングに採用され、ソフトウェア・書道作品・工作品を出せば賞を獲り、授業の一環で論評を書けば新聞に載り、とにかく創作をすればした分だけ相応の評価が貰えました。これは成人した今でも続いています。こと創作に関しては生まれてからずっとスーパースター状態だったわけですね。

スーパースター状態の終わり

そんなわけで場に応じた努力とセンスだけで20数年間なんとか生きてきたんですが、今年の3月で限界が来ました。

自分が培ってきたスキルがどんどん他人の評価にも関わるようになってきて、非常にしんどくなってきました。「れいじさんなら余裕でしょ」「今回もついていくぜ!」と言われる度に重荷に感じるようになりました。同時にハッカソンイベントや対外的な活動では相当目立つのに業務で中々自分の思うような結果が出せないことも非常に重荷に感じるようになりました(上長はその辺全然気にしてないし十分やってくれていると言ってくれましたが、自分が納得できませんでした)。

「自分がどうにかしなければ自分だけでなく組織の評価も巻き添えになるんだ」とも思うようになりました。それからはもうボロボロとミスをするようになって、さらに自己嫌悪が捗るようになりました。そういう時に限って「まだ仕事終わってないの?」「いつ終わるの?」と毎時間急かされたりするんですよね~~~しんどいね。

さらに「なんであんなやつがいい給料貰ってるんだ」「へらへらふらふらしているくせに」といった、妬み嫉みの言葉でさえ適当に流すことができなくなり、遂に夜も眠れなくなり、食欲も安定しなくなりました。

元々が低血圧体質なのですが、ちょうど飲み始めた薬の副作用でさらに血圧が下がって会社のお手洗いの個室で失神直前までいくこともありました。この時は何で頭を正常にする薬で頭バグってんだってヘラヘラしてました……この時期は本当に色んな人に迷惑をかけました。

結果な~~~~~~~~~んも手に着かないし創作意欲も沸かなくなりました!!!!!!!!!!スーパースター状態終わり!!!!!!!!!!!!!人生イヤイヤ期!!!!!!!!!!!!!!!!!!

それからどしたの

それから2ヵ月半休職をして、最近やっと職場復帰への目途がついたところです。

そんなわけで色々考える時間がとれた訳なんですが、結局全部自分の調子が悪かった時期に重なって起きた出来事な上に、それこそ神経可塑性による過剰思考のせいでしかないんですね。

しんどい場所から一旦離れて、夜も昼も好きなだけ寝て薬に体を慣らすことでかなり回復しました。ADHD双極性障害も服薬治療で概ね改善しましたし、日常生活でのストレス管理周りは認知行動療法で(もともとの考え方の癖も含めて)改善しました。

他人の評価に自信のセンスや努力が起因して重荷になるのだって、しんどい期は「人のスキルにフリーライドしてラクしてんじゃねえよ」ってガルガルやってましたが今はそう思わないし。つか思ってるほど人の評価背負ってないし。

この状況どう乗り切る問題だって別に自分が全部やらなきゃいけないことでもないし、そもそも自分一人の仕事で揺らぐような組織でもないし。

ヘラヘラふらふらしてたら良い給料貰っちゃいかんのか?嫉妬民うるせ~~~絶対このスタイル崩さないからな~~~

あ、でも副作用に関してはもう慣れるしかなかったです(流石に失神はしなくなった)。投薬開始して3ヵ月経ってやっと口渇感と眠気に慣れました。

ADHDの治療について

私が人生イヤイヤ期になってしまった全ての原因は神経可塑性なんですが、これを治療していくには大まかに投薬治療とTMS治療(磁気刺激治療)があって、私は前者を選択しました。プラスで認知行動療法を実施していますが、これは言葉で説明できる気がしないので割愛します。調べて…

投薬治療の場合はストラテラコンサータ・インチュニブの中から飲む薬を選べます(コンサータは出せない医院もあるらしい)。

私は最初ストラテラを飲んでいたのですが量が増える事に激しい頭痛に悩まされたためインチュニブに変更しました。こちらは眠気と血圧の急降下が怖い(特に食後低血圧とコンボ技がキマったときがヤバい)ですが、今は割と安定しています。慣れたともいう。

プラス仕事をしていた時は焦燥感と苛々が収まらなかったのでバルプロ酸も飲んでます。これはてんかん治療に使われる薬で、双極性障害による気分の上がり下がりの幅を抑える為に処方されています。

あ、なんか人格が変わるとかそういうのも言われていますが、確かにインチュニブを飲み始めた時にすごくイライラしたり、現実がクソ過ぎて死んでやろうと思ったことが一度だけあります。お手洗いで失神しだした時がそうですね。人間とは器用なもので、それだけ頭がバグってても素知らぬ顔で執務室に戻ってメンバーと話せるし、仕事にも取り組めるんですよ。やっぱり今年1月~3月頭は頭がおかしかった。

TMS治療は半永久的に効果のある自費治療の一種で分割で30回程度の施術が必要かつ50万円程度の費用がかかります。冷静に50万あったら普通に海外旅行してリフレッシュしたいのでやめました。あとこれで本当に治るのかが全く確証持てない。

私の通っている病院ではこのTMS治療を受けるために通院している人が多いのですが、カウンターで途中解約している人を何人も見ました。解約する理由もお金が払えないからではなくて、施術後に気分が悪くなったり効果が感じられないといった内容なのがちょっと…うん。

これから何か変わるのか

プライベートにおいてはこういう障害があるから何か配慮してほしいみたいなことは自分からは言いたくないなと思ってます。

「この人にはこういう接し方をしちゃいけないんだ」とか「放っておいた方がいい」とか善意で配慮されることもあったんですが、いろんな人から「この人は発達障害がある」と配慮をされること自体がもう負担でしかなかったです。

記事冒頭で説明した通り、別に薬を飲まなくても20数年間人生進められてたし。逆に今更態度変えられても自分が困るので普通に接してくれよな~!!頼むぜ!!

今はもう仕事に戻る決心もついていて(もう4月時点で休職生活も飽きが来ていた)、創作意欲も戻ってきました。今年はハッカソンあるのかな~~~スーパースター状態に戻りたいよ。

周辺の人たちにはご迷惑おかけしました。コロナ収束したらご飯でも行きましょう。

ではでは!!!

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

f:id:yomoyamareiji:20200426121703p:plain

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

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

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

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

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

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

- vvvvでCGプログラミングやってみる本ービジュアルプログラミングことはじめー : https://drive.google.com/file/d/1rWGELXTag4qIToujDJWfY_m-2I-AB6Bg/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

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

ではでは~