はてなブックマーク

Bearer トークンを使用して WebAPI 呼び出しをする場合、OpenAPI (Swagger) 3.0 ではどのように記述するのでしょうか。 OpenAPI (Swagger) で WebAPI の仕様を記述する際、HTTP 認証・認可を行うための手段として Basic 認証・Bearer スキーム・API キー等の使用を定義することができます。この記事ではアクセストークン等による Bearer スキームの記述方法について紹介します。 ※ OpenAPI (Swagger) については以下の記事で取り上げていますので、合わせてご確認ください。 Bearer スキームとはHTTP 認証スキームの一つで、WebAPI へアクセスするためのセキュリティトークン（アクセストークン等）をAuthorization: Bearer {トークン}という形で HTTP ヘッダーにセットし、トークン

「JAWS DAYS 2019」にて発表した際のスライドです。

「Serverless Meetup Japan Virtual #14」にて発表した際のスライドです。

ブラウザと API サーバーの繋ぎこみや画面遷移を伴う他サービスとの連携をする時、予期せぬエラーが起きたり想定外の挙動をしてデバッグに苦労したという経験をお持ちの方は多いのではないでしょうか。 多くの Web アプリ開発で、API サーバーとの通信がどのように行われているかを把握することは不可欠です。上手く行かない場合、どのようなリクエストが送られたか、どのようなレスポンスが返されたかを確認するために、ブラウザのデベロッパーツール（開発者ツール）を利用したり、Fiddler などのツールを利用してデバックすることが多いと思います。 この記事では、こういった時に役立つ手法として、ブラウザのデベロッパーツールで HTTP 通信をキャプチャしてその内容をアーカイブとして保存する方法と、保存したアーカイブファイル（HARファイル）を閲覧するツールについて紹介します。 HAR ファイルとは？HTTP

システム構成図を書く時、ツール選びに悩むことってありませんか？ システム構成図に限らずとも、情報を分かりやすく表現する手段として、いわゆる「お絵かきツール」はとても需要があるのではないでしょうか。例えば Nulab の Cacoo だったり、MS Visio・Excel・PowerPoint だったりと、人によって・現場によって多種多様だと思いますが、今回はその中でも個人的によく使っている draw.io について紹介し、その使い方について共有したいと思います。 draw.io とは？システム構成図や図面等の作成に便利なお絵かきツールで、ブラウザ上で動くウェブアプリケーションです。オープンソース化（Apache License 2.0）されており、提供元 JGraph の GitHub リポジトリにてソースコードが公開されています。 公式サイトがあるので、合わせてチェックしてみてください。

Git を使って開発しているプロジェクトで、トラブル対応や機能のテストのために一時的に変更を加えた状態で作業をしたい、ただし一時的な変更なのでコミットしたくないといったことがあります。このような場合に skip-worktree を使うと、変更の追跡を一時的に無視できます。 特定のオプションを有効にしている場合に発生する問題への対応のために設定ファイルを変更している、しかしオプションはコミットしない。そうそうあることでもないですが、このようなパターンで一部変更しながらもコミットしたくないというケースがあります。そして慎重に作業を進めつつも、うっかりコミットして面倒なことに。。。 最初からコミットするつもりがない変更については明示的に外してしまうのも手です。 環境 本記事の開発環境は以下となります。 Windows 10 64bit + WSL Ubuntu 18.04.1 LTSGit 2

ここ最近、SPA（シングルページアプリケーション）や SSG（静的サイトジェネレーター）を利用してウェブサイトやアプリケーションを構築するケースが増えており、静的サイトを配信する仕組みについても興味を持つようになりました。便利なサービスとしては Netlify や Firebase Hosting, GitHub Pages など色々ありますが、ウェブサービスやシステム開発を行う上で、AWS を使っているならば AWS で完結したいということもあるかと思います。 この場合、Web サーバーを立てて実現することもできますが、AWS が提供するサービスをうまく活用することで、より簡単に実現でき、費用を抑え、運用の手間を減らすことができます。定番のやり方としては、例えば以下の AWS サービスが挙げられます。 AWS Amplify コンソールS3 の静的ウェブサイトホスティング（Static

前回の記事では AWS 上に静的サイトをホスティングする構成について紹介しました。この記事では、CloudFront のディストリビューションに AWS WAF で作成した Web ACL を関連付け、IP ホワイトリストによるアクセス制限を行う方法についてお伝えしたいと思います。 例えば以下のようなコンテンツで、サイトを外部に公開したくない場合において有効です。 WebAPIの仕様、開発ドキュメント ※ Swagger UI など社内向けサイト開発中のウェブアプリこの記事で紹介する構成 CloudFront のディストリビューションに AWS WAF を使用してアクセス制限をかけます。クライアントによる S3 バケットへの直アクセスはできません。AWS WAF は Origin の種類に関係なく関連付けることができます。設定の手順以下の一連の作業を行う必要があります。 まず、AWS WA

TypeScript を使って Node.js のアプリを開発していると、だんだんモジュールの数が増えていき、export, import 文が長くなったり冗長な感じになったりします。また、プロジェクト全体の共通機能をまとめてモジュール化する仕組みを考えたりと、モジュールの構成をどうするかについては常々悩ましいところがあります。 この記事では、モジュール構成のリファクタリングに使えるre-exportsとそれを import する方法について紹介します。元々は ES Modules の仕様なので、Interface など TypeScript の機能を除き JS でも同じく使える仕組みになります。 ※ただし、ES Modules の構文（JS）をそのまま Node.js 上で実行する場合は mjs 拡張子の使用・実験フラグ付きの起動が必要になり、詳細については割愛させていただきます。 ex

「WordCamp Tokyo 2019」にて発表した際のスライドです。

今回は Vuetify でシンプルな入力画面を実装するといった時に遭遇するかもしれない挙動の一つとその対応について紹介します。 v-form の中に一つの v-text-field を配置し、フォーカスを当てた状態で Enter キーを押すとページがリロードされることがあります。 投稿されて1年以上経過しているものですが、以下 Vuetify の GitHub Issue にも Bug Report がありました。 [Bug Report] v-form with single v-text-input submits on enter https://github.com/vuetifyjs/vuetify/issues/3032 [Bug Report] v-form reloads the page when user press enter while editing v-text

ウェブの技術を使い、またウェブサイトとしてホスティングしながらも、モバイルやデスクトップのアプリとして振る舞うことができる PWA。最近では Google Play Store でも配信できるようになったり、iOS での対応強化など話題に事欠きません。 そんな PWA を簡単に高速に開発することができる Nuxt.js を紹介するとともに、今後さまざまな機能を試すためのベースアプリを作ります。 シリーズの記事 Nuxt.js で PWA(Progressive Web Apps) のベースアプリを作る(本記事)Nuxt.js PWA(Progressive Web Apps) のベースアプリをTypeScript対応する環境 本記事の開発環境は以下となります。 Windows 10 64bit + WSL Ubuntu 18.04.1 LTSVisual Studio CodeNode.j

「CloudNative Days Tokyo 2019」にて発表した際のスライドです。

Web 開発の現場でよく耳にする言葉として Swagger というものがあります。アプリケーション開発においてサーバー（WebAPI）とデータの送受信を行う機能は不可欠なものとなっている現在、多くの現場ではそのための設計モデルとして REST (REpresentational State Transfer) という方式が使われています。この記事では、REST API の仕様ドキュメントを記述する手段として OpenAPI (Swagger) というものを紹介し、REST Client 機能を備えたインタラクティブな API 仕様ドキュメントを作成・共有する方法についてお伝えしたいと思います。 OpenAPI (Swagger) とは？OpenAPI Specification (OAS) といい、REST API の仕様を記述するためのフォーマットです。また Swagger とは、Ope

2019年2月28日に.devドメインの早期アクセスプログラムが終了し、追加費用なしで取得できるようになり多くの方がドメイン取得をされたのではないでしょうか。 .devドメインに限らないのですが、オリジナルのドメインでアプリやウェブサイトを公開するほかに、メールのアドレスとしても使うことができます。 Google Domains は管理しているドメインのメールを転送するサービスも提供しています。そして Gmail の送信元設定と組み合わせることで、取得したオリジナルのドメイン名でメールの送受信ができるようになります。その設定方法を紹介します。 .devドメインGoogle が取得している gTDL(generic Top-Level Domain) で、example.comのようにexample.devのようなドメインを作ることができます。 トップレベルのドメインは、.com,.netな

「Serverless Meetup Tokyo #12」にて発表した際のスライドです。

2019年5月27日に開催された「Serverless Meetup Tokyo #12」で『サーバーレスなウェブフロントを実現する JAMstack』と題して、ウェブフロントをサーバーレスで実現する世界について発表をしました。その発表サマリーです。 Serverless Meetup Tokyo 概要発表したイベントServerless Meetup Tokyo #12は、サーバーレス・アーキテクチャや周辺技術に関するコミュニティServerlessのイベントで「東京」「大阪」「札幌」「福岡」で定期的に、また「沖縄」でも開催されました。 会場はSpeeeさん。六本木一丁目駅近くのステキな場所＆素晴らしいオフィスです！ 発表資料『サーバーレスなウェブフロントを実現する JAMstack』の発表資料はこちらになります。(下記、スライド埋め込み) サマリー発表の主旨は「フロントも含めて、まるっ

“JAMStack” と呼ばれる新しいウェブの開発手法で「より良いパフォーマンス」「より高いセキュリティ」「より安価で簡単なスケーリング」「より良質な開発者エクスペリエンス」を提供するアーキテクチャが注目を集め始めています。 JAMStack とは何か、どのように使い、どのようなメリットがあるのか、公式サイトの情報をもとに読み解きます。 JAMStack の定義 オフィシャル・サイトhttps://jamstack.orgによると、以下の要素に基づく最新のウェブ開発アーキテクチャとされています。 クライアントサイドのJavaScript再利用可能なWeb API構築済みの Markup (HTML)HTML に JavaScript そして Web API なので、ウェブフロントの開発をする場合によく使うであろう技術と言えるでしょう。 ここでは動的な要素をサーバーサイドで組み込んだ HTM

この記事はServerless Advent Calendar 2018の 22日目になります。 AWS re:Invent で発表された API Gateway の WebSocket 対応、ついに利用できるようになりました！ WebSocket がサーバーレスで簡単に利用できるようになるとアプリの幅も広がり、いろいろなことができるようになります。 さっそく API Gateway の WebSocket を試してみます。 ※ 今回 Serverless Framework の serverless-websockets-plugin を使いますが 2018年12月現在、暫定の実装になるとのことです。API Gateway の WebSocket 対応が AWS CloudFormation で未サポートのため Serverless Framework 本体には含まれず Plugin に