なになれ

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

GitHubを雰囲気で使っている(remote URL)

GitHubでcloneするときに公式的にはHTTPSが推奨なのを知りませんでした。 help.github.com 認証が毎回必要なのでは?と思いましたが、保存できるので1回済ませたら以降は不要なようです。 help.github.com HTTPSならプロキシ環境下でも問題ないのが推奨ポイ…

メモを共有するWebアプリを作った

メモを共有するWebアプリを作りました。 kollecton.hi1280.com ほぼWikiみたいなものです。 ここでは、どのように作ったのかの概要、製作の感想を紹介したいと思います。 Webアプリのコンセプト決め まずはWebアプリのコンセプトを決めました。 個人的に知識…

Angular+AWS Amplifyを試した

AWS AmplifyとはAWSのリソースをクライアントアプリから直接操作することができるライブラリ群です。 これによって、サーバレスなバックエンドにすることができます。 aws-amplify.github.io 似たものではFirebaseがあります。 今回はAngular製のWebアプリで…

エンジニアのキャリアを語るMeetUp【しがないラジオ×kiitok】に参加しました

エンジニアのキャリアを語るMeetUp【しがないラジオ×kiitok】に参加しました。 trackrecords.connpass.com SIerからWeb系に転職したパーソナリティの二人がキャリアの話やTechの話をするポッドキャスト「しがないラジオ」と、転職を前提とせずに現役エンジニ…

Chrome拡張機能を作る過程で学んだReactのこと

以前にChrome拡張機能を作りました。UI部分はReactで実装しました。 hi1280.hatenablog.com 今回はこのChrome拡張機能を作る際にどのようにReactを使ったのかを紹介します。 Option Page Chrome拡張機能の設定画面です。 Material-UI 今回は以下のReact用の…

React+TypeScriptでChrome拡張機能を作った

作ったもの Chrome拡張機能を開発するのに辛い点 コールバック前提 DOMの操作 開発環境整備 React+TypeScript React(Webフロントエンド向けライブラリ)の良い点 Webpack デモ まとめ 参考 作ったもの WebページをOCRしてコピペできるChrome拡張機能を作りま…

StorybookをAngularで試した

Storybookが気になったので、Angularを使って試しました。 以下の内容をそのまま試していきましたが、Angularの場合、うまく動作しないところがありました。 修正しながら一通り試したので、その内容を残しておきます。 ページに掲載されているコードに記載…

基本から理解したくてAWSを学習した

AWS

今まで雰囲気でAWSを使ってきました。 基本的なことの理解が危ういと感じたので、基本からの理解のために以下のUdemyレクチャーを実施しました。 手を動かしながら2週間で学ぶ AWS 基本から応用まで 感想を書きます。 良かったこと VPCの説明が充実していま…

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化したデモサイトはこちらです。…