あるSEのつぶやき・改

ITやシステム開発などの技術に関する話題を、取り上げたりしています。

2019-01-01から1年間の記事一覧

ReactのSPA解説本『ネコミミでもわかるシングルページアプリケーション』の感想

技術書典6で入手した、React の SPA (Single Page Application)の解説本である『ネコミミでもわかるシングルページアプリケーション』(60ページ)を読み終わりました。 この本は BOOTH での再販がないので、技術書典でしか入手できない貴重な本になります。 …

メモ帳のデフォルト保存がUTF-8 BOMなしになった(Windows 10 May 2019 Update 1903)

Windows 10 の May 2019 Update (1903) で、メモ帳のデフォルトの保存形式が UTF-8 BOMなしになりました。 これはうれしいアップデートですね。 BOM というのは、Byte Order Mark の略で、UTF-8 の BOM ならの3バイトがファイルの先頭に付きます。主にプロ…

React入門書の決定版『りあクト!第2版』を読んだ感想を書いてみる

React 入門書の決定版として技術者の間で話題の同人誌『りあクト!第2版』を読み終わったので、感想などを書いてみたいと思います。実は2周しているのですが、難しいところの理解が及んでないので書くのに躊躇したのですが、それはそれで感想だと思い書く…

Windows10の.NET Frameworkのバージョンを取得するPowerShellスクリプト

Windows 10にインストールされている .NET Framework のバージョンを調べるのはなかなか難しいですよね。 以前は .NET Framework のバージョンを調べられるフリーウェアがあったのに、今はなくなってしまいました。 それで調べてみたところ、レジストリの値…

課題管理表のExcelテンプレート

プロジェクトを行っていると課題管理をする必要がでてきますが、課題管理表の Excel テンプレートを作成してみました。 特徴は以下のようになります。結構使えるのではないでしょうか? 完了に「○」を設定すると行全体がグレーアウトする 「重要度」をリスト…

我が家にMacbook Proがやってきた

先日、Macbook Pro 13インチの2017年モデルを購入しました。 本当は最新バージョンが欲しいところでしたが、オプションでメモリ16GB, SSD512GBにするので流石に手が出せませんでした。30万円オーバーするんじゃないですかね? それで、2017年モデルを購入…

Excel VBAのgit diffを簡単に取れるgit-xltrailがすばらしい

Excel といえばバージョン履歴管理ができない困ったちゃんとして有名ですが、gitでバージョン管理したいものですよね。 そこで、git-xltrail の出番です。 git-xltrail はオープンソースでフリーウェアである git の拡張なのですが、なんと Excel VBA の git…

技術書典でしか会えなかった「実践React Native」は開発の指針になるよい本だった

10000人もの参加者を集めた技術書典6から、早くも1ヶ月が過ぎました。 技術書典については、以下の記事をご覧ください。 www.aruse.net さて1ヶ月を過ぎましたが、積読が捗っていてなかなか技術書を消化できていません。 欲しい本は多いのですが、消化する…

WEB+DB PRESS VOL.110「名前付け大全」はプログラマなら読んでおきたい特集だった

WEB+DB PRESS VOL.110 の特集は「設計も、実装も、ここから始まる!名前付け大全」です。 設計、実装(プログラミング)で名前付けが重要であることは、いまさら言うまでもないことでしょう。 その名前付けについて、哲学チックにアプローチしているのがこの…

『React Native+Expoではじめるスマホアプリ開発』はよい本だったのでその感想など

React を学び始めて、iOSやAndroidといったネイティブ開発もやりたいと思ったら、まず最初に候補になるのが React Native ですよね。 React のノウハウをいかしつつ、ネイティブ開発ができるなんてまさに夢のような開発環境です。まあ、実際はそこまで甘くは…

『「Auth0」で作る!認証付きシングルページアプリケーション』を読んだ感想など

Auth0(オースゼロ)は、Webサービスやモバイルアプリなどに認証・認可の仕組みを提供する、IDaaS(Identity as as Service)と呼ばれるサービスです。 聞き慣れないサービスかもしれませんが、Auth0は世界で6000社以上の稼働実績を持っています。 最近では、技…

技術書典で出会ったOAuth本がすばらしかった件 #技術書典

10000人以上の技術者が熱狂した?技術書典6が終わってから、早2週間が経ちました。 時間が経つのは早いですね。 技術書典6の感想については、以下の記事をご参照ください。 www.aruse.net さて、戦利品が早速積読状態になっていますが、読んだ技術書の感想…

技術書典6へ行ってきた。技術書典はいいぞ! #技術書典

何ヶ月も前から心待ちにしていた技術書典6が本日(4/14)開催されたので行ってきました。 techbookfest.org 技術書典はなにかというと、技術書に特化した同人誌即売会で、今回は第6回目の開催となります。 毎回多くのサークルの方々が非常にユニークな同人誌を…

Excelでチェックボックスを指定セルで高さのセンタリングに配置する方法

Excel でチェックボックスを配置したはいいものの、セルの高さを変えると、折角高さのセンタリングをしていたのに位置がずれてしまいますね。 一応は、セル内の上位置は維持しているものの、やりたいのはチェックボックスを配置したセル内での高さセンタリン…

Fix: Auth0 'Invalid response code from the auth0-sandbox' Error happend.

When I created OpenID Connect client on Auth0, I faced to the error below: Invalid response code from the auth0-sandbox The error's message is ambiguous. The error's cause is 'Fetch User Profile Script''s syntax error. So you review 'Fetch…

Fix: Auth0 'profie is not defined' error happend

When I created OpenID Connect client on Auth0, I faced to the error below: { "error": "invalid_request", "error_description": "profie is not defined" } But I realize solution about it. This error's cause is 'default Fetch User Profile Scri…

URLの#以降をJavaScriptで簡単に取得する方法

URLがhttp://example.jp/#key=valueだったとして、#以降のkey=valueを JavaScript で取得するのは以下のようにします。簡単ですね。 window.location.hash.substr(1); また、上記サンプルのようなkeyに対するvalueを取得したい場合は以下のようにします。 co…

JSONを&つなぎのクエリー文字列形式に簡単に変換する方法

JSON は便利なのですが、JSON をクエリー文字列のようにkey1=value1&key2=value2といったように&つなぎの文字列に変換する必要が出てきました。 調べてみたところ、以下のように簡単に変換することができました。 const data = { key1: 'value1', key2: 'val…

JavaScriptでURLのクエリー文字列をキー指定で簡単に取得する方法

JavaScript で URL のクエリー文字列をキー指定で取得するのは、以前は面倒だったようです。 例えば、URL がhttps://example.jp/?key=valueとあったら、keyを指定してvalueを取得したいですよね。 今はURLSearchParamsというものがあるので、クエリー文字列…

ReactのWebサーバーでlocalhostをHTTPS化する方法

React の Webサーバーで、localhost を HTTPS でアクセスできるようにする方法ですが、実は簡単です。 特に自己証明書をインストールする必要もなく、以下のコマンドを実行するだけで OK です。 Windows: Powershell or VisualStudio Code > ($env:HTTPS = "…

Fix: Erorr occurred React + HTTPS in development environment

A below error occurred React + HTTPS in development environment. ts-loader: Using typescript@3.3.4000 and C:\Users\xxx\Projects\react-cognito\tsconfig.json internal/buffer.js:788 class FastBuffer extends Uint8Array {} ^ RangeError: Invalid…

React+Amplify+CognitoにGoogle認証を追加する

はじめに React + Amplify + Cognito でのユーザー認証も大分調査が進んできました。 www.aruse.net 今度は、Google の OAuth 認証を追加したいと思います。 調べてみたのですが、情報が英語圏を含めほとんどない。 断片情報を組み合わせて試行錯誤したらう…

React+Amplify+Cognitoでアプリケーションをユーザー認証でガードする

以下の記事で、React + Amplify + Cognito のユーザー認証を日本語化するところまできました。 www.aruse.net この記事では、React のアプリケーションをユーザー認証でガードする方法をご紹介します。 具体的に言うと、サインインしていないユーザーにはサ…

React+Amplify+Cognitoのサインイン画面を日本語化する

以下の記事で、React + Amplify + Cognito でユーザー認証を行うことができるようになりました。 www.aruse.net 一方で、Cognito でデフォルトで用意された画面は以下のように英語表記になっていて、このままでは使い物になりません。 ですが、Cognito のサ…

React+Amplify+Cognitoでユーザー認証を実装する

はじめに React + AWS Amplify + Cognito でユーザー認証を行うアプリを作ってみたいと思います。 Amplify は AWS のサービスを便利に使用できる JavaScript ライブラリで、Cognito は AWS でユーザー認証を行えるサービスになります。 この記事では、TypeSc…

TypeScriptのReactでAmplifyを使おうとしたらエラーでハマったのでその解決方法

はじめに React の TypeScript をベースとしたプロジェクトで、AWS Amplify + Cognito でユーザー認証のサンプルを動作させようとしたらエラーが頻発してハマってしまいましたので、解決方法のメモを残しておきます。 ちなみに TypeScript な React プロジェ…

Reactで画像ファイルをS3からAPI Gateway+Lambda(C#)経由でダウンロードする方法

はじめに 以下の記事で、React で画像や Excel ファイルを API Gateway + Lambda(C#) 経由で S3 にアップロードする方法をご紹介しました。 www.aruse.net せっかくですので、S3 から画像ファイルを API Gateway + Lambda(C#) 経由でダウンロードする方法も…

Reactで画像やExcelをAPI Gateway+Lambda(C#)でアップロードしてS3に保存する方法

はじめに React を使い画像ファイルや Excel ファイルなどのバイナリファイルを、AWS の API Gateway と Lambda (C#) を経由してアップロードし、S3に保存する方法を調べたので記事として残しておきます。 この方法ですが、ネット上に全くといっていいほど情…

JavaScriptコードから機密情報の設定値を外出しするdotenvという便利ツール

AWS

はじめに JavaScript でプログラムを書いていると機密情報を含んだ設定値を記述することがあります。 私の場合は、AWS のアクセスキーなどでした。 それでいろいろと調べていたところ、JavaScript のコードでprocess.env.XXXXXという記述を何度か見かけまし…

ReactのSPAをS3+CloudFront環境に自動デプロイする方法

はじめに 以下の記事で、Amazon S3 と CloudFront を使って HTTPS でサイトを独自ドメインで公開する方法が分かりました。 www.aruse.net では、React の SPA (Single Page Application)を S3 + CloudFront 環境にデプロイしてキャッシュをクリアするまで自…