次世代Headless CMS「contentful」事始め - Qiita
この記事は ハンズラボ Advent Calendar 2017 2日目の記事です。 ハンズラボのアドベントカレンダーがみるみる埋まっていくのを見て、一人ニヤニヤしていた@daikiojmです。 7月にハンズラボに入社して以来、Angluarでフロントエンド開発をしています。 今回は、個人的に気になっていた、contentfulの概要と、ハンズオンの手順をまとめてみます。 概要 contentfulはAPIファーストなCMSで、ドイツのスタートアップによって開発されており、WordPressやDrupalなどの従来のCMSとは異なり、ディスクトップやモバイルだけでなく、デジタルサイネージや、スマートウォッチなどのプラットフォームへのコンテンツ配信が可能なAPIが用意されていることが特徴です。 WordPressなどと同様に、記事(コンテンツ)の投稿、管理画面のUIは用意されていますが、ユー
Angularで同じ絵文字をクリックするだけのクソゲーを作りました - Qiita
この記事は Angular Advent Calendar 2018 の 9 日目の記事です。 クソアプリ Advent Calendarでやってくれとツッコミの入りそうなネタですが、Angular関連なのでこちらで書かせてもらいます。 作ったもの Firebase Hostingにデプロイしてあるので、「 same-emoji 」から遊べます。 (PCのブラウザから遊ぶ際はビューポートをSPサイズにすることを推奨です...) 2つ1組でランダムに表示される絵文字をタップして消し続け、タイムを競うという単純なゲーム(クソゲー)です。 画面構成もシンプルで、次の画面で構成されています。 スタート画面 レベル選択画面 ゲームプレイ画面 ゲーム結果画面 リポジトリ https://github.com/daikiojm/same-emoji モチベーション Angular MokuMoku Ni
RxJSのretryWhen Operatorで複数回の遅延リトライ - Qiita
はじめに 次のようなユースケースを想定してタイトルの通り RxJSのretryWhen Operatorsで複数回の遅延リトライ を試してみたいと思います。 rateLimitがあるWebAPIの呼び出し AWS SDKなどの呼び出し時にリトライ処理に遅延時間を設定したい場合 今回この記事を書こうと思ったきっかけも AWS Cognito SDKのrateLimit制限を避けるためでした... たまに失敗して、連続で呼ぶとrateLimitで弾かれるソースを作成 リトライ処理の例を示す前に、リトライ対象となるモックのソースを作成します。 rateLimitがあるWebAPIをイメージするとわかりやすいかと思います。 以下の例では、次のようなエラーが発生するようにしています。 たまに andom error が発生 1sの間に5回以上の呼び出して、ate limit error が発生 co
Angular Materialでファイル選択ボタン - Qiita
小ネタです。 Angular Materialを使ったプロジェクトで、ファイル選択input <input type="file" /> を使うときにボタンをmat-buttonにする方法を紹介します。 HTML <input type="file" style="display: none" #fileInput accept="image/*" (change)="onChangeFileInput()" /> <button mat-raised-button color="primary" class="file-select-button" (click)="onClickFileInputButton()"> <mat-icon>attach_file</mat-icon> ファイルを選択 </button> <p class="file-name" *ngIf="!file;
i18n対応Angularアプリケーションの開発環境 - Qiita
初めに この記事では以下のような構成のAngularアプリケーションを開発する際のローカル開発環境の構築を解説します。 Angular公式のi18n機能を使ってi18nを実現する 最終的なビルド生成物はAOTビルド後にサーバーまたはS3などの静的ファイルホスティングサービスから配信する **/en/ **/ja/ などのアクセス先のパスを変化させることによって言語切替が可能 アプリケーションのUI上から言語選択を行う機能の動作確認をローカルで行う必要がある $ ng -v Angular CLI: 6.1.5 Node: 9.11.1 OS: darwin x64 Angular: 6.1.4 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-br
i18n対応AngularアプリケーションをFirebase Hostingで公開するときの設定 - Qiita
{ "hosting": { "public": "dist", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "redirects": [ { "source" : "/", "destination" : "/en", "type" : 301 } ], "rewrites": [ { "source": "/ja/**", "destination": "/ja/index.html" }, { "source": "/en/**", "destination": "/en/index.html" } ] } } public ここに設定したパス以下のファイルがデプロイされるので、今回の場合en/jaどちらのディレクトリもデプロイされる - redirects デフォルトの言語をenにしたいので/にアクセ
Nest CLIで始めるnestjs - Qiita
Nest CLIとは nestjsアプリケーションの開発を支援するCLIツール。 アプリケーションのスキャフォールディングが行える。 Angular DevKit(angular-cli)の設計をもとに開発されている。 Nest CLIでできること アプリケーションの新規作成 アプリケーションの各種構成要素(controller, service, ...)の作成 依存パッケージ(@nestjs)のアップデート ※ 2018/07/19 現在 それぞれのコマンド紹介 アプリケーションの新規作成 nest new app-name (alias: n) アプリケーションの各種構成要素(controller, service, ...)の作成 nest generate element-name (alias: g) 依存パッケージ(@nestjs)のアップデート nest update pa
Serverless FrameworkでExpressを動かす(serverless-httpを使用) - Qiita
Serverless Frameworkの公式ブログで Deploy a REST API using Serverless, Express and Node.jsという記事を見つけたので、この記事で紹介されているserverless-httpとういミドルウェアを使って、Serverless上でExpressを動かしてみました。 環境 $ sw_vers ProductName: Mac OS X ProductVersion: 10.12.6 BuildVersion: 16G29 $ node -v && npm -v v8.8.1 5.4.2 手順 AWS CLIの事前設定とserverlessのインストール AWS CLIをインストールし、認証情報を登録しておきます。 AWS - Credentials を参考に、使用するAWSアカウントの情報をDefaultプロファイルに設定し
18f718df07c28965b7b3
これまで、サーバーレスなSPA on AWSを実現しようとした場合、Cognitoによる認証部分の実装には、amazon-cognito-identity-jsというAWS製のJavaScriptライブラリを使うのが主流でした。 ただ、amazon-cognito-identity-jsを使う場合、このライブラリ本体の他にAWS SDKなどを含めた複数のライブラリを読み込む必要があったり、用意されているAPIの使い勝手が良くなかったりと、多少の辛みを感じる部分がありました。 今回は、AWSより新しくリリースされたAWS Amplifyというライブラリを使ってAngularアプリケーションにCognitoによる認証機能の実装を行ってみたいと思います。 AWS Amplifyの概要は、本アドベントカレンダー4日目の nakayama_cwさんがAWS AmplifyでサーバレスWebアプリの構
Angular CDK Layoutを触ってみる - Qiita
Angular Materialを使っているプロジェクトでは、CDKはインストール済みのはずなので、インストールの必要はありません。 CDKモジュールのインポート app.moduleにLayoutModuleをインポートし、AppModuleのimportsに追加します。 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { LayoutModule } from '@angular/cdk/layout'; // 追加 import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [
SPA開発未経験者がAngularを半年間やってみてわかったポイントとハマりどころ - Qiita
これは Angular Advent Calendar 2017 8日目の記事です。 この記事では、「SPA開発未経験者がAngularを半年間やってみてわかったポイントとハマりどころ」というテーマで、この半年間Angularを学ぶ上でポイントになった機能やキーワード、ハマりどころなどを紹介します。 初心者目線で、これからAngularを始めたい方や初心者の方向けに項目ごとに参考リンクなどを交えながら紹介していこうと思います。 Angularのググラビリティ Angularに関する情報を得る手段として、Webが一番手軽で有効な手段かと思います。 これに関しては、Angularを正しく学習するためのガイドラインというAngluar User Groupのブログ記事で紹介されていますが、Angularを始めた頃の自分にとってこの内容は、知っておいてよかったと思える内容でした。 また、前バージョ
Angular+Cognitoのユーザー認証付きSPAのサンプル - Qiita
はじめに Angularで作るSPAにCognito認証を組み込むサンプルを作りました。 ログイン・ログアウトだけではつまらないので、ログイン時に使えるS3ファイルアップロード機能も追加しています。 awslabsから公開されているaws-cognito-angular2-quickstartというサンプルが大変参考になりました。 作っていく AWS側の準備 S3バケットの作成 Cognito Identity Pool に設定するロールの設定に、アクセス許可をするS3の情報を記載する必要があるので、事前にS3バケットを作成しておきます。 今回は、 angular-cognito-s3-file-uploader という名前のバケットを作成しました。 バケットポリシーと、CORSの設定は以下のとおりです。 { "Version": "2008-10-17", "Id": "PolicyFo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
