こんにちは、AWS担当のwakです。 弊社では全社的にG Suiteを導入しています。そこで社内向けWebサイトをS3+Lambda+API Gatewayで構築し、G Suiteのアカウント+AWS Cognitoで弊社社員のみ利用できるような認証をかけようとしたところ、何点かハマるポイントがあったので手順を書いておきます。 実現したこと 前置き: AWS Cognitoって Google側の準備 プロジェクト作成 プロジェクト初期化用コード取得 Google認証をONに 承認済みドメインを追加 OAuthクライアントID確認 AWS側の準備 IDプール作成 ロール作成 IDプールID(Identity pool ID)をメモする ドメイン制限をかける ロールに権限を追加する Web側の準備 ポップアップまたはリダイレクトで認証を行うパターン サインインボタンを表示するパターン OAut
Nuxt.jsでもVue.jsで同様にaxiosを利用することで外部からデータを取得することができます。外部からのデータ取得はアプリケーションを構築する上で表示に重要な部分なので本文書ではNuxt.jsにおけるaxiosの使い方とasyncDataの使い方について説明を行っています。 Nuxt.jsではサーバサイドでデータを取得する際はasyncData Hookまたはfetch Hookの中にデータを取得する処理を記述します。クライアントサイドでデータを取得する際にはmounted Hookの中にデータを取得する処理を記述します。 fetch HookはJavaScriptのfetch関数とは異なります。また本文書ではfetch Hookについての説明は行っておりません。
本文書ではVue.jsのフレームワークであるNuxt.jsを使ってアプリケーションの開発を効率的に行いたいという人を対象にNuxt.jsのインストールを行った実環境を利用して動作確認を行いながら基本機能の説明を行っています。 Vue.jsのシンプルなコードで記述していますがVue.jsの知識があることを前提に説明を行なっているためVue.jsを知らない人には少し難しい内容になっています。Nuxt.jsを使いこなためにはvue.jsを理解する必要があるのでNuxt.jsを学習する前にVue.jsを先に学習することをお勧めします。 動作確認を行っているNuxt.jsのバージョンはv2.15.7です。現在はNuxt 3のRelease Candidateを利用することができます。最新バージョンのNuxt 3のチュートリアルではないので注意してください。Nuxt 3がリリースされたのでNuxt 3
ID: FN1905001 Technique: HTML5 / ECMAScript 2015 Library: Vue.js 2.6.10 Vue.jsは、ユーザーインタフェースをつくるためのプログレッシブフレームワークです(図001)。画面の表示(View)に絞った操作を扱います。jQueryでつくると手間がかかるようなインタフェースも、簡単にわかりやすく組み立てられます。本稿では、Vue.jsのインストールおよび設定を行い、とりあえずごく簡単に画面のインタラクティブな操作をしてみます。なお、JavaScriptコードの構文は、ECMAScript 2015(ECMAScript 6)準拠です。 図001■Vue.jsのサイト 01 Vue.jsのインストールと設定 Vue.jsサイトのトップページにある[はじめる]ボタン(前掲図001)で「はじめに」のページに移ります。そして、左カ
The Progressive JavaScript Framework Web ユーザーインターフェース構築のための、親しみやすく、パフォーマンスと汎用性の高いフレームワーク。 Vue を使う理由 はじめる インストール Vue 2 のセキュリティー・アップデート 親しみやすい 直感的な API とワールドクラスのドキュメントを使用して、標準的な HTML、CSS、JavaScript をもとに構築します。
vue.js は typescript を公式にサポートしています。 つい先日 vue-cli のバージョン 3.0 にてついに、初めから typescript が導入された vue.js のプロジェクトテンプレートが追加されました。 いよいよ vue.js ならぬ vue.ts に追い風が吹いてきたのを感じます。 そこでその追い風を更に強くするべく vue.js + typescript でコンポーネントを作るための基礎知識というかチュートリアルっぽいものを書いてみました。 この記事の概要 vue.js を typescript で書く vue-class-component を利用する vue-property-decolator を利用する ドキュメントにない細かい機能や tips でお送りします。 目標はコンポーネントを自由に作れるようになることです。 プロジェクトテンプレート 何
Golang + Echo + Vue.js でSPA 作ります。本当に導入の導入部分だけ実装します。 cotch-io/go-echo-vue-single-page-app このリポジトリをみて参考にしたのですが、ajaxに推奨されていないvue-resourceを使用している + バージョンが古い ので、 フォークしてaxiosを使用するように書き換え + めちゃくちゃ簡素化 したものを解説します。 めんどくさいのでDBはつなぎません。バックエンドとフロントエンドのつなぎ込みだけです フォークしたリポジトリに修正分をコミットして、それをベースに解説していきます。 リポジトリ -> https://github.com/ShingoYadomoto/go-echo-vue-single-page-app 簡素化 コミットはこれ↓ https://github.com/ShingoYad
2018年8月11日に新しいメジャーバージョンとなるVue CLI 3.0がリリースされました。Vue CLI 3では、公式にTypeScriptをサポートし、 TypeScriptを利用するプロジェクトの生成に対応しました。これにより、TypeScriptでVueを気軽に試せるようになったということで、今回ちょっとどんなものか試してみることにしました。試した中でポイントとなりそうな部分をまとめてみたので紹介します。なお、私は普段はAngularでTypeScriptを書いているため、TypeScriptのクラス構文を使った説明になっています(クラス構文を使わなくても、TypeScriptでvue.jsを書くことはできます)。 目次 はじめに – Vue CLI + TypeScript TypeScript + Vue サンプル Vue CLIでTypeScriptプロジェクトを生成する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く