はじめに 普段からWebアプリケーションにログイン機能を実装する際、バックエンドにAmazonCognitoを利用してきました。 Cognitoはログイン認証をサーバレスに実現してくれるマネージドなサービスです。開発者はログインユーザの情報を管理する必要が(ほとんど)ありません。 またAWSのリソースへのアクセス権限を一時的に発行することもできるので、ログイン後のトークンを利用して、アプリケーションからAWSの各リソースを利用することができます。 今回はそんなCognitoの外部IDプロバイダ認証を利用してログインし、トークンを取得するまでの流れをGoogleとFacebookでやっていこうと思います。 Cognitoの準備 Cognitoのデプロイ AmplifyCLIを利用してサクッと作っていきます。フロントはVue.jsを使っています。 この記事を参考にしていただければ、Cognit

React + Amplify + AppSync + DynamoDB でサーバレスなWebアプリを作成する公式チュートリアルをやってみた Amplifyを使って React + AppSync + DynamoDB でサーバレスなWebアプリを作成するチュートリアルをやってみました！ 大阪オフィスのYui(@MayForBlue)です。 最近プライベートでAWS Amplify(以下Amplify)を触っていて、良さげなチュートリアルを見つけたのでやってみました。 Amplifyを使って React + AppSync + DynamoDB でWebアプリを作成するものです。 デプロイについてはチュートリアルで紹介されているS3でのホスティングではなくAmplify Consoleを使ってCI/CDできるようにするなど少し工夫してやってみました。 Amplify JavaScript

このインターフェイスには固有のプロパティはありませんが、その親である Node から継承したプロパティがあります。 DocumentFragment.childElementCount 読取専用 この DocumentFragment が持つ子要素の数を表します。 DocumentFragment.children 読取専用 この DocumentFragment オブジェクトの子であるすべての Element 型のオブジェクトを含む、生きた HTMLCollection を返します。 DocumentFragment.firstElementChild 読取専用 この DocumentFragment オブジェクトの最初の子である Element を返します。なければ null を返します。 DocumentFragment.lastElementChild 読取専用 この Docume

八章第三回　Rangeの活用とSelectionこのページの最終更新日：2017年9月5日 Selectionとは前回でRangeの機能はだいたい解説しました。しかし、正直なところ、これをいつ使う機会があるのか分からないという人もいるかもしれません。しかし、Selectionというものを使うときにはRangeが大きく関わってきます。 それでは、このSelectionとは何なのでしょうか。 これは、ユーザーが選択した範囲を表すものです。皆さんもブラウザ上でテキストを選択するという操作をしたことがあると思います。これは範囲なので、ここでRangeが登場するわけです。 Selectionの取得Selectionは、Rangeとは違うオブジェクトです。Selectionを取得するには、window.getSelectionという関数を使います。引数はありません。 var selection = w

＊この記事は2020年3月頭に書かれている記事です どうも、Vueはいいぞおねーさん(自称)です。 Vue.jsは私に言わせるととてもよいフロントエンドフレームワークであり、その理由の一つにプログレッシブフレームワークである(段階的に利用する機能を増やしていくスタイルにマッチしている)ものとして、フロントエンド初学者の皆さんにもおすすめしたい代物です。 しかし、現在までに様々なプラクティスが考案されたがゆえに、「最初からベストな方法で始めたい」という思いから一度にたくさんのことに挑戦してしまいたくなりがちです。 そしてそれはプログレッシブという思想に反するもので、結果として挫折を生んでしまっているのではないかと思いました。 そこで今回は「知るのを後回ししてよいこと」として、Vue.jsへの入門する方へのアドバイスを独断と偏見で不要度という指標でまとめてみました。 不要度というネガティブな指

jQueryオブジェクト　⇒　HTML文字列 HTML文字列　⇒　jQueryオブジェクト このように互いに変換したい場合、いくつかのjQuery関数を組み合わせて使えば簡単に変換可能です。 ということでここではその変換テクニックについて詳解していきます。 jQueryオブジェクトをHTML文字列に変換する方法 まず初めはjQueryオブジェクトを文字列としてのHTMLに変換する方法 その変換は次のような手順で可能です。 変換したい要素を入れるダミーの要素を作る 要素をclone関数でコピーしてダミー要素に挿入 html関数でダミー要素内部のHTML取得 clone関数というのはあるjQueryオブジェクトのディープコピーを取得できる関数です。 それでこの関数と要素内部のhtmlを取得できるhtml関数をうまく組み合わせれば変換できます。 では具体的な例を使って説明しましょう。 例えば次が

Javascript で選択中の文字列を取得する window.getSelection – Web API インターフェイス | MDN ブラウザ上のコンテンツを選択状態にし、選択された文字列部分を取得するには、window.getSelection 関数を使います。 window.getSelection 関数は選択範囲を Selection オブジェクトとしてを取得します。Selection オブジェクトを toString で文字列にしてやると、選択範囲の文字列を取得できます。 const selectedText = window.getSelection().toString(); console.log(selectedText); 複数のDOMにまたがっていようと、選択された文字列のみを取得してくれます。 選択されているDOMを取得する selection – Web AP

Webサイトで右クリックをした時、独自のメニューを表示するにはどうすれば良いのかな。 使いやすい右クリックメニューを作りたいな。 こんにちは。HTMLやJavaScriptの開発歴8年の著者が、JavaScriptを使ったオリジナルの右クリックメニューの表示方法をご紹介します。 例えばWebアプリなどで右クリックした時、オリジナルのメニューが表示されてたくさんの便利な機能が使えたら、素晴らしいと思いませんか？そのような右クリックメニューがあると、ユーザーインターフェースは劇的に向上するでしょう。 JavaScriptを使えば、それが実現できるのです！では早速、簡単な例を交えて右クリックメニューの実装方法について解説していきたいと思います。 JavaScriptで右クリックメニューの要素を扱うには JavaScriptで右クリックメニューを作るために、まずはHTMLとスタイルシートを使って基

Scratch Reveal with <canvas>は、<canvas>タグとJSで実装する、画像のスクラッチ表現です。 カラフルな写真にマウスを載せて、ドラッグすると、スクラッチを削るようにグレースケースの写真が現れます。 もちろん、デフォルトをグレースケールの写真にして、スクラッチでカラフルな写真を表示させることも可能です。 例えば、キャンペーンサイトなどで、画像にシリアルコードや当たり、ハズレのマークを埋め込んでおいて、ユーザーが画像を削ると表示される、という使い方ができそうです。 実装方法 デフォルトに表示される画像と、スクラッチで削った後に表示される画像の2枚を用意しておきます。 HTML <canvas>を用意します。 <figure id="bridgeContainer"> <canvas id="bridge" width="750" height="465"></c

« 前のページ 次のページ » これまでの例ではすべて、図形は、常に 1 つずつ重ねて描かれていました。これはほとんどの状況において十分すぎるほど適切ですが、複合図形の構築順序が制限されます。しかし、 globalCompositeOperation プロパティを設定することで、この動作を変更することができます。さらに、 clip プロパティによって、シェイプの不要な部分を隠すことができます。 既存の図形の背後に新しい図形を描画できるだけでなく、特定の領域をマスクしたり、キャンバスの一部を消去したり（clearRect() メソッドのように矩形に限定しない）、その他にも使用することが可能です。 globalCompositeOperation = type これは、新しい図形を描くときに適用する合成処理の種類を設定します。 type は、 12 種類の合成処理から使用するものを特定する文字