M.I.のプログラミング・メモ

最近知ったのですが、  TailwindCSS と Alpine.js の組み合わせがなかなか使いやすかったので紹介します。 ソースコード https://codesandbox.io/s/fancy-bush-22qyf?file=/ind...

Parcel  を使ってJavaScriptアプリケーションを書いているときに、async/awaitを使おうとすると下のエラーが出ました。 Uncaught ReferenceError: regeneratorRuntime is not defined 調べたところ、次のサ...

前回 はReactアプリにGoogle認証を組み込む方法を試しました。 今回はそのコードを使いながら、さらに Google Drive API を使って任意のデータをログインしているユーザーのGoogle Driveに保存することに挑戦してみました。 完全にブラウザのみで動作する...

ReactのSPAアプリケーションにおいて、ContextとHooksを使うことでGoogle認証の処理をラップして利用するというサンプルを作成しました。 Google Cloud Consoleでアプリケーションを登録する https://console.cloud.googl...

まずは公式のドキュメントにしたがってNext.jsのアプリケーションを作成しましょう。 Create a Next.js App | Learn Next.js     https://nextjs.org/learn/basics/create-nextjs-app packa...

egghead.io のレッスンを観ていて良さそうなものがあったので、メモしておきます。 Add SVGs as React Components with Create React App 2.0 https://egghead.io/lessons/react-add...

前回 はユーザー認証機能を付けましたが、まだデータの永続化が出来ていないのでTodoアプリとしては未完成です。   1)  Next.jsでスタティック・エクスポートしたサイトをAWS Amplify Consoleでホスティングする   2)  AWS Amplif...

前回 はNext.jsでエクスポートしたWebアプリをAmplify Consoleでホスティングするところまで行いました。 今回はこのアプリに AWS Cognito によるユーザー認証を追加したいと思います。 まず amplify status で現在の状態を確...

今回は、Next.jsから（SSR無しの）スタティックなSPAとしてエクスポートしたサイトを、Amplify Consoleでホスティングしてみます。 サンプルReactアプリの作成 npm init -y npm i -S react react-dom next...

時間があったので前から気になっていた AWS Amplify を試してみることにしました。 とりあえず作ったのは、Todoリスト。React (Next.js) によるWebアプリです。 username / password でログインすると、DynamoDB...

最近子どもが学校の図書館かどこかで暗号に関する本を読んだらしく、 　「お友達のAちゃんと秘密のメッセージを交換したいの。 エニグマ みたいなので。」 とせがまれました。 いきなりエニグマ暗号機の名前が出てきたのでびっくりしましたが、 　「よし、エニグマ（風）暗号機...

前回 でようやくそれなりに強い思考ルーチンを実装することが出来たので、今回は仕上げとして石を裏返すときのアニメーションと、画面遷移時のアニメーションを実装します。 こちら を開くと実際に遊べます。 https://reversi-d1kqojbar.now.sh/ ...