なになれ

IT系のことを記録していきます。

GraphQL(Backend)を試した

TypeScriptで作ってみるシリーズの作業ログです。 今回はGraphQLを試してみます。 前回まではこちらです。Backendの処理のWeb化まで行なっています。 hi1280.hatenablog.com とりあえずGraphQLを試す まずはGraphQLに慣れるため、簡易なGraphQL serverをNode…

2018年で学んだ技術

AWS

今年を振り返る的な投稿です。 今年も色々学べました。ただ技術の進歩が早すぎて学んでも学んでもより良いものが出てきてしまいますね。それを楽しめるようになってこそのエンジニアなのかもしれません。 パブリッククラウド AWS Amazon Rekognitionで人物の…

コードが公開されているAngularの使用例をまとめてみた

モチベーション Vue.jsのドキュメントにある使用例(https://jp.vuejs.org/v2/examples/)の内容が魅力的だったので、Angularにもそういうものがないかを探してみました。 実際に動くものを見ると、どんなことができるのかイメージできるので良いと思ってい…

【初心者向け】Pythonによる画像処理について(人物認識)

2018年にやったこととしてPythonによる画像処理に取り組みました。 顔検出、顔認識、人物検出、人物追跡といった「人」が画像処理の対象でした。 そこで得られた知識をまとめたいと思います。 筆者は主にWeb領域のソフトウェアエンジニアで画像処理を専門に…

Docker Composeによる開発環境の構築(TypeScript,Node.js,Redis,Elasticsearch)

TypeScriptで作ってみるシリーズの作業ログです。 今回はDockerおよびでDocker ComposeでTypeScriptの開発環境を作ります。 TypeScriptによるNode.jsアプリの他にRedis、Elasticsearchを使います。 前回はこちらです。 hi1280.hatenablog.com Node.jsアプリ…

Prettierを導入する際に調べたことまとめ

Prettierとは コードフォーマッターです。Webフロントエンド向けに対応言語が豊富です。 Webフロントエンドの開発環境ではデファクトスタンダードになっているツールのようです。 GitHubのスター数は29,000を超えています。※2018年12月9日現在 github.com 今…

TypeScriptでユニットテストを書く

TypeScriptで作ってみるシリーズの作業ログです。 今回はユニットテストを書きます。 前回はこちらです。 hi1280.hatenablog.com 使用モジュール sinon @types/sinon https://sinonjs.org/ テストダブルを用意するためのツールと型定義です。 インストール方…

TypeScriptでWebAPIを実行する

TypeScriptの開発環境ができたので、とりあえずWebAPIを実行するプログラムを作ってみました。 hi1280.hatenablog.com 今回はQiitaのAPIを使いました。 https://qiita.com/api/v2/docs 使用モジュール axios https://www.npmjs.com/package/axios コード mai…

VSCodeでTypeScriptのCLIツール作成環境を作る

VSCodeでTypeScriptのCLIツール作成環境を作りました。 npmモジュールを作るのにも応用できると思います。 github.com 以下のような考えで作りました。 ローカル環境での実行・デバッグ・単体テスト実行はts-nodeで行う VSCodeのタスク機能は使わない想定 コ…

NgRxを試した所感

NgRxはAngularにおける状態管理のためのライブラリです。 ng-conf 2018でも状態管理関連のセッションはNgRxを前提とした内容が多く、デファクトスタンダードなのではと思います。 今回は、Tour of Heroesに対してNgRxを適用してみました。 こちらがコードで…

Tour of HeroesをVue+Vuexで再実装した

Vue+Vuexを勉強したアウトプットとしてアプリを作りました。 hi1280.hatenablog.com 作ったもの Tour of HeroesはAngular公式のチュートリアルです。 複数画面があって、WebAPIを呼び出すサンプルになっています。 今回はこのTour of Heroesを題材にして、Vu…

UdemyのVue.jsコース「Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)」を受講した感想

www.udemy.com こちらを利用して、Vue.jsを基礎から学びました。 例によって、レビューの評価が高いので、このコースを選びました。コースの内容を見てもかなり網羅されている感じで良いと思います。 このコースはレクチャーの数がかなり多かったです。 良い…

Tour of HeroesをReact+Reduxで再実装した

最近React+Reduxを勉強したアウトプットとして簡単なアプリを作りました。 hi1280.hatenablog.com 作ったもの Tour of HeroesはAngular公式のチュートリアルです。 複数画面があって、WebAPIを呼び出すサンプルになっています。 今回はこのTour of Heroesを…

UdemyのReactコース「Modern React with Redux」を受講した感想

www.udemy.com なぜこのコースを選んだのかですが、Reduxを学びたいと思い、Udemyのコースを探してました。 評価の高さとレビュー件数の多さから間違いなさそうだと思い、このコースを選びました。 結果的にはこのコースを選んで満足しています。 以下、感想…

XP祭り2018に参加しての気づき 〜品質とアーキテクチャの関係〜

XP祭り2018に参加しまして、QA to AQ – Being Agile at Quality: Values, Practices, and Patternsというワークショップを体験して思ったことを書きたいと思います。 XP祭り2018:QA to AQ – Being Agile at Quality: Values, Practices, and Patterns(Jose…

Angularにおける状態管理をRxJSで試した

状態管理はフロントエンドで必要な機能としてよく取り上げられています。 ReactにおけるReduxが有名で、Reduxライクな状態管理のライブラリが各種フレームワークで用意されていて、それらを使うのが主流なようです。 AngularでもReduxライクなngrxというライ…

OGPページ生成ツールというWebアプリをつくった

最近Twitter等でOGPによるシェアを前提としたWebサービスが注目されています。 ちょっと前だと、Peing(質問箱)が有名で、質問がOGPでシェアされてます。 peing.net 最近だと、ためしがき、bosyuといったサービスですね。リクエスト毎にOGPでコンテンツをシェ…

MEAN StackをKubernetesで動かす(その2)

前回はHTTPでアクセスするところまでを行いました。 hi1280.hatenablog.com 今回はHTTPS対応を行います。 MEAN Stackのプログラム一式はこちら github.com 実運用に耐えうることを想定して、以下の内容を含めています。 MongoDBの内容が前回までで、今回はHT…

MEAN StackをKubernetesで動かす(その1)

前回はMEAN StackをDocker Composeで動かしてみました。 hi1280.hatenablog.com 今回はMEAN StackをKubernetesで動かします。 Dockerに対応したので、Kubernetesでも動くようになっているはずです。試してみます。 なお、今回のKubernetesの環境はGKE(Google…

MEAN StackをDocker Composeで動かす

前回はMEAN StackをHeroku上で動かしてみました。 hi1280.hatenablog.com 今回はMEAN Stackアプリに手を加えて、Dockerに対応させます。 Dockerにすれば、他の環境への移行も楽になるのではと思います。 Docker Composeを使って、nginx+Node.js+MongoDBの環…

MEAN StackをHeroku上で動かす

MEAN Stackを運用するサービスを検討していましたが、Herokuが良いだろうという結論になり、実際に使ってみました。 Herokuを選んだ決め手は以下のとおりです。 Node.jsに対応している MongoDBがアドオンで簡単に使える Herokuのドキュメントを参考にして、…

PWA BuilderでPWA化してみてPWAを学ぶ

PWA

PWA BuilderというPWA化するためのToolを試してみた記録です。 ざっくりとPWAとは何なのかが分かる内容になっていると思います。 今回は以下のサンプルを利用しています。 Freelancer - One Page Theme - Start Bootstrap PWA化したデモサイトはこちらです。…

Angular+FirebaseのWebアプリを公開するために実施したこと

過去に記事にしたWebアプリを公開しました。 bookshelf-share.site 技術的なことは下記記事を見てください。 hi1280.hatenablog.com この記事では、アプリの開発以外で実際に公開するために実施したことを紹介します。 目次 テスト環境の作成 独自ドメインの…

AngularFireを使うと遭遇するRxJSでのハマりどころ

Angularを使うと漏れなくRxJSを使うことになります。 非同期処理を命令的に書くことがなくなるメリットがある反面、 宣言的プログラミングに慣れていない人にとってはRxJSを理解することが難しいです。 AngularFireを使ってWebアプリを作成する中で、遭遇し…

AngularとFirebaseでWebアプリを作った

AngularとFirebaseでWebアプリを作ったので、その記録です。 作ったものがこちらです。 友達同士で本を共有できるみんなの本棚というコンセプトで、本を登録し、持っている本を友達同士で共有できるサービスです。 bookshelf-share.site この記事では、この…

MEAN and Cosmos DBをVisual Studio Team ServicesでApp Service on Linuxにデプロイする

AzureのApp ServiceにはWindows版とLinux版があります。 OSSを使用するアプリケーションではLinux上で動作させる方がシンプルな形になりそうです。 Linux版のApp ServiceであるApp Service on Linuxを試してみます。 サンプルアプリの準備 MEAN構成のサンプ…

Amazon Echoとラズパイでスマートホーム化

Amazon Echoとラズパイでスマートホームを実現します。 Amazon Echoに対して音声で呼びかけて、Alexaスキルからラズパイを通して家電を操作します。 構成図 AWS IoTの準備 AWS IoTを使って、Alexaスキルとラズパイとを連携します。 デバイスの設定を案内通り…

Web画面経由でコマンドを操作する

Web画面経由でコマンドを操作してみました。 Node.jsでExpressを利用しています。 今回の実装時のポイントは以下の通りです。 Node.jsでコマンドを実行する Node.jsの標準APIであるchild_processを使用します。 以下のようにexecメソッドでコマンドを実行す…

ラズパイの赤外線リモコンを高性能にした

hi1280.hatenablog.com 以前に作成したラズパイの赤外線リモコンを高性能なものにするために改良しました。 遠距離でも赤外線が届くようにするのと複数のリモコンに対応しました。 配線を変更 赤外線LEDを高出力なものに変更しました。 akizukidenshi.com 赤…

Electronでデスクトップを録画するアプリが簡単に作れました

ElectronはAtomに使われていたり、VSCodeに使われていたりとPCネイティブなアプリを作るために最近よく使われているライブラリです。 今まで使ったことがなかったので使ってみました。今回作ったアプリのリポジトリはこちらです。 アプリ作成のポイントを紹…