Reactでスクリプトタグを含んだHTMLを挿入する(SSG/SSR対応)

いわゆるJAMstackを用いたWebメディアなどでは、コンテンツの構成が記事ごとに少しずつ違うけれどもマークダウンでは表現力が制限されるため、本文などコンテンツの一部をHTMLで記述して表示したいという状況はそれなりにあると思います。 そのような状況で…

Auth0のauth0-spa-jsを使っていい感じにアクセストークンを取得する

背景 auth0/auth0-spa-jsはAuth0が提供するSPA用のライブラリです。 このライブラリを用いることで、複雑なOpenID Connect、OAuth 2.0の処理を簡易かつ安全にSPAに組み込むことができます。 しかし、最近は3rd Party Cookieに対する制約が強くなり、特にSafa…

AWSで開発するサーバレスAPIバックエンド

Serverless Meetup Tokyo #14で発表しました。 AWSで開発するサーバレスAPIバックエンド from 暁 三宅 www.slideshare.net AWSで開発するサーバレスAPIバックエンド Serverless Meetup Tokyo #14 2019.09.19. 三宅 暁 自己紹介 三宅 暁 (ミヤケ アキラ) フリ…

react-scriptsはwebpackで何をしているのか

create-react-appが利用しているreact-scriptは、webpackで何をしているのか eject コマンドで挿入される設定ファイル群はreact-scriptのものなので、設定を変更するときの参考に 対象 create-react-app/packages/react-scripts/ の config/webpack.config.j…

PIXI.jsでのWebGLRendererでsubtractする

プロジェクトで利用しているPIXI.jsで必要になったので。 PIXI.jsはHTMLのcanvasを操作するライブラリ。 利用可能な環境であればWebGLで動作し、利用できない環境であればCanvasにフォールバックしてくれる。 グラフィックの操作やマウスイベントをハンドリ…

Cognito User PoolのJWTトークンを検証する

Cognito User Poolへログインした際に返却されるAccessTokenやIdTokenを検証する方法。 API Gatewayの認証でCognitoを使いたいけど、いろいろ処理を入れたいときなどに。 const request = require('request-promise-native') const jwt = require('jsonwebto…

OpenID Provider(OP)をServerlessで提供する

OpenID ConnectのOpenID Provider(OP)をAWSを利用したサーバレスアーキテクチャで提供するためのserverless-oidc-providerを開発しました。 serverless-oidc-providerはnode-oidc-providerをAWS Lambdaで実行し、ユーザ管理・認証をCognito User Poolに移譲…

lamproxとlambda-utilities

AWS Lambdaのアプリケーション開発で利用している自作のフレームワークがそれなりにこなれてきたので、README.mdの日本語訳をのせて紹介します。 Lamprox AWS Lambdaのlambda-proxy機能を使った開発のためのフレームワークです。 セットアップ $ npm install…

serverless-import-swaggerの紹介

新規サービス開発のプロジェクトの中で、Serverless FrameworkにSwagger形式のAPI定義をインポートする、AKIRA-MIYAKE/serverless-import-swaggerを開発したので、その紹介を行います。 開発の動機 開発中のサービスは、Angular2のSPAをS3に配置してCloudFro…

AWSでサーバレスアーキテクチャで開発する際のいくつかの制約について

現在開発中の新規サービスは、AWSを利用したサーバレスアーキテクチャを採用しています。 Angular2のSPAをS3に配置してCloudFrontで配信、データ取得などのためのAPIをAWS Lambda + API Gatewayで実装する、教科書通りの構成をとっています。 そこまで大規模…

AWS re:Invent 2016 報告会に行ってきました

公式の情報はAWS re:Invent 2016 で発表された新サービスと機能 | AWSから。 気になった項目と感想を抜粋して書いていきます。 データベース関連サービス Athena 標準SQLを用いてS3に保存したファイルを対象にインタラクティブにクエリを実行できるサービス …

AWS LambdaをTypeScriptで開発する

今のプロジェクトでは、AWS LambdaをメインにすえたServerless Architectureを採用しています。 AWS LambdaはWebのコンソールからソースコードを編集したり、イベントソースを定義したりできるのですが、やはりリポジトリで管理したりデプロイの自動化を行い…

Vue.js: Revolutionary Front-endでLTしました

Blogに書くのを忘れていました…。 ABEJA主催のInnovation MeetupのVue.jsの勉強会でLTを依頼頂いたので、僭越ながら話をさせていただきました。 …Vue.jsをやったことがないにも関わらず。 そんなわけで、React + Redux + react-routerを実戦投入したさいの経…

転職したのでいろいろ書いてみる

転職して、10月より新しい会社で働くこととなりました。 退職エントリとかそーゆーものでもないですが、自分の備忘録や整理みたいな感じで取り留めなく書いてみます。 Why?? 前職の環境では自分の考えるスキルセットを身につけることが難しいと考えたから。 …

Dockerニュービーが開発環境をDocker対応してみた

Node.jsでアプリケーションを開発するときにベースにしているNodeyard、アップデートとあわせてDocker対応も行ってみました。 アップデート内容 Gulpでのタスク管理の廃止 これまでGulpでビルドタスクなどを定義していたのを、全てnpm run-scriptに移行しま…

Typescriptをいろいろ試してみた

ゴールデンウィークを利用して、Typescriptをいろいろ試してみました。 JavaScriptでWebアプリケーションを構築する際のベースとして使っている、Nodeyardと同じような感じで使える、Typeyardを作ってみました。 以下の方針で作っています。 クライアントサ…

SwiftyEventsのSwift 2.2への対応 +α

自作のSwiftのライブラリ、SwiftyEventsのSwift 2.2への対応を実施しました。 対応と言っても、 protocol内の"typealias"を"associatedtype"に置き換え 参考 テストコード内のインクリメント(++)を"+= 1"に置き換え 参考 に対応しただけでしたが。 Swift 2.2…

Raspberry Pi で iBeacon を発見するための調査メモ

近いうちに試してみることになるかもしれないのでメモ。 Raspberry Pi で Bluetoothを使えるようにするために Raspberry Pi を Bluetooth Low Energy (BLE) の Peripheral として動作させるで、BLE の Peripheral として動作させたことはあるので参考に。 RP…

Node.jsのあれこれ

今のプロジェクトで、Node.jsを使ったAPIサーバの開発を行っていて、その時のいろいろをメモ。 Node 5.0.0への対応 プロジェクトではv0.12.7で開発を進めているけど、自分で使っているBoilerplateはv5.0.0に対応を。 node_modulesのディレクトリ構成が変更に…

MacBook Pro (Retina, 13-inch, Late 2012)にEl Capitanをクリーンインストール

プライベートで使っているMacBook Proに、El Capitanをクリーンインストールしました。 Yosemiteの時から、OSのアップデートのタイミングでクリーンインストールするようにしています。 理由は、開発環境をリセットしたり、インストールするアプリケーション…

AWS上の Node.js アプリケーションに HTTPS でアクセス可能にする

9月からのプロジェクトでは AWS を使っています。 今までインフラを扱ったことがほとんどなくて、AWS も今回初めてアカウントを作って恐々触っているレベルですが、タイトルのことは割とすんなりと。 ただやっぱりある程度インフラのことは気にする必要があ…

社内勉強会での発表資料

Apple Watch アプリを開発した時に気をつけたほうがいいなと思ったことを発表しました。 Apple watchアプリを作ってみた from 暁 三宅

Apple Watch対応のiPhoneアプリ「Glancely」のリリース

プライベートで開発していたApple Watch対応のiPhoneアプリ、「Glancely」がApp Storeに公開されました。 Open Weather MapのAPIを利用した、今日の天気を素早く確認するためのアプリです。 Swiftでの開発、Carthageを用いた依存ライブラリの管理、Embedded …

Swift強化月間

5月は仕事、プライベートともSwiftをがっつり書いた月でした。 Xcode 6からフレームワーク用のテンプレートが用意され、独自フレームワークの開発や公開が簡単になりました。 そこで、他のアプリケーションで使いそうな機能とかをいくつかフレームワークとし…

MEAN を動かしてみる

MEAN は MongoDB、Express、AngularJS、Node.js で構成される Web アプリケーションを構築するための アーキテクチャであり、LAMP (Linux、Apatch、MySQL、PHP) に変わる技術として注目されています。 全て JavaScript で記述でき、データを JSON でやり取り…

nodebrew を使った node.js のバージョン管理

今まで homebrew で直接 node.js をインストールしていたのですが、nodebrew を使ってバージョン管理できるようにしました。 node.js のアンインストール 最初にすでにインストールされている node.js をアンインストールします。 npm をアンインストール。 …

Raspberry Pi を Bluetooth Low Energy (BLE) の Peripheral として動作させる

Raspberry Pi に Bluetooth ドングルを接続し、BLE の Peripheral として動作させてみました。 Raspberry Pi のモデルは、Model B+ V1.2 、Bluetooth ドングルは Planex の BT-Micro4 を利用しています。 BlueZ のインストール BlueZ はオープンソースの Blu…

Swiftのライブラリ管理ツール『Carthage』

転職してから少しiOSアプリ開発から遠ざかっていたのですが、その間にSwiftに対応した新しいライブラリ管理ツールCarthageが出ていました。 Objective-Cの時から有名なライブラリ管理ツールのCocoaPodsも昨年末にSwiftの対応が行われたようですが、一度Carth…

CSSフレームワーク『Rigging』を作ってみました。

WebアプリケーションのUI作成のためのCSSフレームワーク『Rigging』を作ってみました。 http://akira-miyake.github.io/Rigging/ フレームワークとはいっても、CSSリセットやタイポグラフィ、ボタン等の基本的なコンポーネントのスタイル定義とシンプルなグ…

色を扱うJavaScriptライブラリ「ColourJS」

新年明けましておめでとうございます。 転職して3ヶ月がすぎ試用期間が終了しました。 2015年もぼちぼち頑張っていきたいと思います。 年末年始はギリギリまで仕事だったり大阪の実家に帰ったりでけっこうドタバタだったのですが、ColourJSという色を扱うJav…