はじめに 私は、現在Nuxt.jsとamplifyのフレームワークを使って、WEBサイトを絶賛製作中のエンジニアです。 amplifyのフレームワークは、WEBサイト開発の初心者に私とって、非常に便利と感じる一方で、amplify自体が絶賛開発中であるため、新しい仕様が次々に追加され、なかなか日本語での解説された情報が少なく、情報収集にとても苦戦しています。 結局は、公式リファレンスが一番ベストな情報源だったりしますが、その内容を読み解くにも一苦労でしたので、自身の備忘録も兼ねてアウトプットとできればと思います。 対象 この記事は以下のような方におすすめしたいです。 amplifyで認証の実装はしてみたが、デフォルトのままで細かい設定は何も行えていない 公式リファレンスを見たが、イマイチよくわからない amplifyのフレームワークを最大限に活用したい GUIから各サービスの設定をしたこと

この記事について Webアプリのアクセス制御を行いたい！となったときに学ぶべきなのは認証・認可の仕組みです。 AWSにはAmazon Cognitoというユーザー管理を行うための仕組みが存在し、これを利用すれば「実装するだけなら」簡単にアプリのアクセス制御を行うことができます。 この記事では「Cognitoが実際に何をやってくれているのか？」というところまで掘り下げながら、簡単なReactアプリを作っていきます。 アジェンダ Cognitoのユーザープールを作って触ってみる Reactアプリに認証の仕組みを入れてみる Cognitoで認証済みの人だけが叩けるAPIをLambda + API Gatewayで作る CognitoのIDプールを作り、AWSでの認可の仕組みを学ぶ Cognito IDプールで認可された人だけが叩けるAPIをLambda + API Gatewayで作る 使用する

tailwindcssを途中から導入しはじめたプロジェクトで、contentsクラスを使用している箇所がデザイン崩れを起こしていたので、tailwindcssにおけるcontentsクラスが持っているプロパティdisplay: contents;について調べた。 まとめ記事あるけど、長いのでみんなきっと理解できてない coliss が[CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニックと「すごい便利！」まで言って2018年に解説した記事作ってくれているけど、なかなかボリューミーな記事。 会社の同僚たちが「わからん」言ってたのと、Twitterみても「あとぜ読むぜ」くらいのリアクションしかわかんなかったので、「結局いつ使うねん」だけは、わかるようにまとめてみる。 display: contents; is 何 結論「displ

CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およびSafari on iOS 14.6からFlexboxでもgapプロパティーが使えるようになりました。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウ

レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指

はじめに 本稿は以下の二部構成となります。 【Amplify】APIのAuthorization方式「AWS_IAM」を理解する#1　～解説編～【AWS】　←いまココ 【Amplify】APIのAuthorization方式「AWS_IAM」を理解する#2　～実践編～【AWS】　※作成中 昨今、新たなサービスの提供の際には、SPAやモバイルアプリで実現することが当たり前の状況になってきているかと思います。 AWSであればAmplifyというフレームワークを使うことで、基本的な構成をすぐに作ることができますが、そのベースとなる仕組みについての解説が少なく、少しでも想定構成を外れたものを作ろうとすると、途端に苦労します。 Amplifyで利用可能な（というより、AppSync・API Gatewayで利用可能な）Authorizationには以下の4つの方式がありますが、主に利用する方式は A

はじめに Amplifyを利用してアプリケーションを作る場合、Cognito User Pool／Cognito Identity Pool（Cognito Federated Identities）を利用してAPI GatewayでAuthorizationする方法が暗黙裡にデフォルトになっているように見えます。 よく使われるであろうと思われる割には、その仕組みについての説明があまり見当たらなかったので解説記事を書こうとしましたが、前提となる事項があまりにも多いことが分かったので、個別の記事として分離しました。 本稿では、AccessKeyIdやSecretAccessKeyの使われ方、AWS APIにおけるSignature V4の仕組みなどについて解説します。 API GatewayのAuthorization方式として「AWS_IAM」という項目を選択できますが、本稿の内容を理解す

AWS Amplify での Cognito アクセスは React Context.Provider を使って認証処理を Hooks 化しようJavaScriptNode.jscognitoReactamplify AWS Cognito は認証・認可を提供している AWS のサービスです。Amplify と統合することで、超高速に構築できます。Cognito を使用することで、API Gateway や S3 など他の AWS サービスとの統合がより簡単にできるようになります。 本記事では、Cognito を使用した React アプリケーションの実装例を紹介します。Cognito へのアクセスには amplify-js というライブラリを使用します。さらに React の Context.Provider という機能を使うことで認証に関連する処理をカスタムフックに集約する方法を考察し

どうも、コンサル部のもこ@札幌オフィスです。 当エントリは弊社コンサルティング部による『AWS 再入門ブログリレー 2020』の 10日目のエントリです。 このブログリレーの企画は、普段 AWS サービスについて最新のネタ・深い/細かいテーマを主に書き連ねてきたメンバーの手によって、 今一度初心に返って、基本的な部分を見つめ直してみよう、解説してみようというコンセプトが含まれています。 AWS をこれから学ぼう！という方にとっては文字通りの入門記事として、またすでに AWS を活用されている方にとっても AWS サービスの再発見や2020年のサービスアップデートのキャッチアップの場となればと考えておりますので、ぜひ最後までお付合い頂ければ幸いです。 では、さっそくいってみましょう。10日目のテーマはAWS Amplifyです。 AWS Amplifyとは？ AWS Amplify(以下Am

2022/05/13 追記 記事の下の方で実現している解決方法について、最近うまく動いていないことを確認しました。サポートに連絡したところ、UpdateUserAttributesの完了のタイミングによってはこちらのコードはうまく動作しないことがわかりました。もしこちらの問題を現時点で解決したい場合はこちらの記事のように、独自でメールアドレス検証機構を作成するのが安定してよさそうです。 ユーザーロックされる こんにちはハトです。cognitoで詰まったので共有。 cognitoでメールアドレス変更機能を実装していた。すると以下のことに気づく。 新しいメールアドレスを申請して、メールで検証をする前にその新しいメールでログインできてしまう 逆に検証が成功していないのに古いメールアドレスでログインできない つまり間違ったメールアドレスをリクエストするとその時点で詰む(ユーザーロックというらしい)

Authまわり知見貯まるまでは結構むずいので僕のわかる範囲で解説していきます。 公式リファレンス Authライブラリはamazon-cognito-identity-jsのラッパーライブラリ Authライブラリはamazon-cognito-identity-jsのラッパーライブラリです。こちらの機能をamplify向けにインターフェース変えたものです。と解説しようと思ったのですが、GitHubのレポジトリはamplify-jsに統合したみたいですね... フロントエンド用のAPIとバックエンド用のAPI amplifyの他にAWS SDKにはCognitoライブラリが提供されています。以下のドキュメントと先ほどあげた公式リファレンスを比べてみてください。 同じ内容が書いてあることに気づきましたでしょうか？違いといえばAWS SDKのCognitoライブラリのほうには、admin???とい

こんにちはハトです。業務でcognitoを利用していたのですがかなり躓いたので共有します。 つまづきポイント多すぎ まずAWSを利用している方でSPAで認証を実現しようとしてネットをあさるといろいろ情報があることに気づく cognitoの利用 Amplify の auth の利用 わけわかめとなる。次にAmplifyを調べる cliがあるよ cliでコマンド打てばGraphQLとか使えるよ Amplify Consoleあるよ。静的ホスティングが自動化できるよ ん？認証だけ使いたいのになんでGraphQLいれるの？みたいになる。 とりあえず、僕がつまずいたポイントや知見を共有しようと思います。 前提 すでにcreate-react-appなどで、何かしらのreactプロジェクトを作ってある。 AWSでconigtoを使うだけならamplifyはいらないけど、amplifyライブラリは便利だ

こんにちは、CX事業本部の若槻です。 Git環境での開発作業で、本来はFeatureブランチで作業するべきところを誤ってMasterブランチで作業してしまったということが時々あります。そのような時に誤ったブランチから本来の正しいブランチに変更を移動する方法を確認してみました。 正しいブランチに変更を移動する方法 移動したい変更がどういう状態なのかによって対処方法が変わってきます。今回は以下の方法について確認してみます。 移動したい変更が誤ったブランチ（master）の作業ツリーにある場合 移動したい変更が誤ったブランチ（master）のステージにある場合 移動したい変更が誤ったブランチ（master）でコミット済みの場合 正しいブランチ（feature）を作成済みの場合 正しいブランチ（feature）を未作成の場合 移動したい変更が誤ったブランチ（master）の作業ツリーにある場合 誤

ウェブがますます進化することで、表現の可能性がぐんと広がっており、CSSはその代表と言えます。 ほんの数年前までJavaScriptなどで実装していた複雑な仕様も、CSSのみで実現できるようになってきています。 この記事では、ほんのわずかなCSSで実装できる小技テクニック12個をまとめてご紹介します。 Web制作で活用できる、実用性の高いテクニックを中心に揃えています。ソースコードは、「HTML」と「CSS」タブを切り替えることで確認できます。 CSSで実装できる小技テクニック目次 1. テキストグラデーション 2. 左線グラデーション付きの見出しタイトル 3. アニメーション付ボーダーライン 4. テキストリンクがすーっと通過するホバーエフェクト 5. リンク用CSSラインホバーアニメーション 6. SVGで画像の周りをデコレーション 7. 文字テキストを回転させる方法 8. 長い文章を

モダンなCSSレイアウトでは、ほんのわずかなコードを書くだけで、実用的なスタイリングを実現できます。 この記事では、たった1行でよく見かけるWebレイアウトを表現できるテクニック10個をご紹介します。 上下中央揃え: place-items: center まずCSSでもっとも頭を悩ませる、上下中央揃えを詳しくみてみましょう。ここでは、plae-items: centerを使えば、思ったよりに簡単に実現できます。 まず、display: gridを記述したら、一緒にplace-items: centerを同じ要素に追加します。place-itemsは、align-itemsとjustify-itemsを同時にスタイリングできる簡略化表記、ショートハンドです。centerに設定することで、align-itemsとjustify-itemsの両方がcenterとして設定されます。 .paren

PDF版の書籍です。 内容についてはの詳細は以下です。 http://pospome.hatenablog.com/entry/2018/09/30/213509

このページは、全くLinuxの知識がない初心者の方でも、ステップバイステップで学べるLinux入門講座だ。Linuxの基礎的な使い方についてステップバイステップで学ぶことができるようになっている。 Linuxをはじめて学ぶ際に、有効にご活用いただければと思う。 Linuxについての入門的知識 Linuxについての基礎の基礎 まずは次のページを確認して、Linuxについて大雑把に知るのがいいだろう。操作をする前に、何ができるかのイメージができるようにした方が、習得しやすくなる。 3分でわかるLinuxでできることまとめ 10選 【初心者でもわかりやすい！】Linuxの用途まとめ 14選 Linuxの歴史解説！ OS誕生からLINUXへ 最速理解Linuxの7つの特徴！Windowsとの違いとは？ ３分間で人に説明できるようになるUnixとLinuxの違い Linuxのディストリビューション

インスタンスタイプを変更するスケールアウトは、簡単に実施できます。ただし、インスタンスタイプには上限があります。 参照のスケールアウトにおいては、アプリケーションを巻き込めるかによって、選択肢が大きく変わります。 順に確認します。 1. 読み込みパフォーマンスのスケーリング Web系システムでは、相対的に参照の割合が多くを占めるケースが多々あります。 リードスループットが足りない場合は以下を検討しましょう。 スケールアップ 参照系クエリの負荷分散をするために リードレプリカの利用 キャッシュレイヤの利用 1-a. スケールアップ インスタンスタイプをスケールアップ フェイルオーバー時に備え、プライマリ・レプリカでインスタンスタイプを揃えましょう 1-ｂ. リードレプリカの利用 リードレプリカへの参照系クエリのオフロード Amazon Aurora Auto Scaling 負荷に応じてレプ