メモを共有するWebアプリを作りました。 kollecton.hi1280.com ほぼWikiみたいなものです。 ここでは、どのように作ったのかの概要、製作の感想を紹介したいと思います。 Webアプリのコンセプト決め まずはWebアプリのコンセプトを決めました。 個人的に知識…
AWS AmplifyとはAWSのリソースをクライアントアプリから直接操作することができるライブラリ群です。 これによって、サーバレスなバックエンドにすることができます。 aws-amplify.github.io 似たものではFirebaseがあります。 今回はAngular製のWebアプリで…
エンジニアのキャリアを語るMeetUp【しがないラジオ×kiitok】に参加しました。 trackrecords.connpass.com SIerからWeb系に転職したパーソナリティの二人がキャリアの話やTechの話をするポッドキャスト「しがないラジオ」と、転職を前提とせずに現役エンジニ…
以前にChrome拡張機能を作りました。UI部分はReactで実装しました。 hi1280.hatenablog.com 今回はこのChrome拡張機能を作る際にどのようにReactを使ったのかを紹介します。 Option Page Chrome拡張機能の設定画面です。 Material-UI 今回は以下のReact用の…
作ったもの Chrome拡張機能を開発するのに辛い点 コールバック前提 DOMの操作 開発環境整備 React+TypeScript React(Webフロントエンド向けライブラリ)の良い点 Webpack デモ まとめ 参考 作ったもの WebページをOCRしてコピペできるChrome拡張機能を作りま…
Storybookが気になったので、Angularを使って試しました。 以下の内容をそのまま試していきましたが、Angularの場合、うまく動作しないところがありました。 修正しながら一通り試したので、その内容を残しておきます。 ページに掲載されているコードに記載…
今まで雰囲気でAWSを使ってきました。 基本的なことの理解が危ういと感じたので、基本からの理解のために以下のUdemyレクチャーを実施しました。 手を動かしながら2週間で学ぶ AWS 基本から応用まで 感想を書きます。 良かったこと VPCの説明が充実していま…
TypeScriptで作ってみるシリーズの作業ログです。 今回はGraphQLを試してみます。 前回まではこちらです。Backendの処理のWeb化まで行なっています。 hi1280.hatenablog.com とりあえずGraphQLを試す まずはGraphQLに慣れるため、簡易なGraphQL serverをNode…
今年を振り返る的な投稿です。 今年も色々学べました。ただ技術の進歩が早すぎて学んでも学んでもより良いものが出てきてしまいますね。それを楽しめるようになってこそのエンジニアなのかもしれません。 パブリッククラウド AWS Amazon Rekognitionで人物の…
モチベーション Vue.jsのドキュメントにある使用例(https://jp.vuejs.org/v2/examples/)の内容が魅力的だったので、Angularにもそういうものがないかを探してみました。 実際に動くものを見ると、どんなことができるのかイメージできるので良いと思ってい…
2018年にやったこととしてPythonによる画像処理に取り組みました。 顔検出、顔認識、人物検出、人物追跡といった「人」が画像処理の対象でした。 そこで得られた知識をまとめたいと思います。 筆者は主にWeb領域のソフトウェアエンジニアで画像処理を専門に…
TypeScriptで作ってみるシリーズの作業ログです。 今回はDockerおよびでDocker ComposeでTypeScriptの開発環境を作ります。 TypeScriptによるNode.jsアプリの他にRedis、Elasticsearchを使います。 前回はこちらです。 hi1280.hatenablog.com Node.jsアプリ…
Prettierとは コードフォーマッターです。Webフロントエンド向けに対応言語が豊富です。 Webフロントエンドの開発環境ではデファクトスタンダードになっているツールのようです。 GitHubのスター数は29,000を超えています。※2018年12月9日現在 github.com 今…
TypeScriptで作ってみるシリーズの作業ログです。 今回はユニットテストを書きます。 前回はこちらです。 hi1280.hatenablog.com 使用モジュール sinon @types/sinon https://sinonjs.org/ テストダブルを用意するためのツールと型定義です。 インストール方…
TypeScriptの開発環境ができたので、とりあえずWebAPIを実行するプログラムを作ってみました。 hi1280.hatenablog.com 今回はQiitaのAPIを使いました。 https://qiita.com/api/v2/docs 使用モジュール axios https://www.npmjs.com/package/axios コード mai…
VSCodeでTypeScriptのCLIツール作成環境を作りました。 npmモジュールを作るのにも応用できると思います。 github.com 以下のような考えで作りました。 ローカル環境での実行・デバッグ・単体テスト実行はts-nodeで行う VSCodeのタスク機能は使わない想定 コ…
NgRxはAngularにおける状態管理のためのライブラリです。 ng-conf 2018でも状態管理関連のセッションはNgRxを前提とした内容が多く、デファクトスタンダードなのではと思います。 今回は、Tour of Heroesに対してNgRxを適用してみました。 こちらがコードで…
Vue+Vuexを勉強したアウトプットとしてアプリを作りました。 hi1280.hatenablog.com 作ったもの Tour of HeroesはAngular公式のチュートリアルです。 複数画面があって、WebAPIを呼び出すサンプルになっています。 今回はこのTour of Heroesを題材にして、Vu…
www.udemy.com こちらを利用して、Vue.jsを基礎から学びました。 例によって、レビューの評価が高いので、このコースを選びました。コースの内容を見てもかなり網羅されている感じで良いと思います。 このコースはレクチャーの数がかなり多かったです。 良い…
最近React+Reduxを勉強したアウトプットとして簡単なアプリを作りました。 hi1280.hatenablog.com 作ったもの Tour of HeroesはAngular公式のチュートリアルです。 複数画面があって、WebAPIを呼び出すサンプルになっています。 今回はこのTour of Heroesを…
www.udemy.com なぜこのコースを選んだのかですが、Reduxを学びたいと思い、Udemyのコースを探してました。 評価の高さとレビュー件数の多さから間違いなさそうだと思い、このコースを選びました。 結果的にはこのコースを選んで満足しています。 以下、感想…
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…
状態管理はフロントエンドで必要な機能としてよく取り上げられています。 ReactにおけるReduxが有名で、Reduxライクな状態管理のライブラリが各種フレームワークで用意されていて、それらを使うのが主流なようです。 AngularでもReduxライクなngrxというライ…
最近Twitter等でOGPによるシェアを前提としたWebサービスが注目されています。 ちょっと前だと、Peing(質問箱)が有名で、質問がOGPでシェアされてます。 peing.net 最近だと、ためしがき、bosyuといったサービスですね。リクエスト毎にOGPでコンテンツをシェ…
前回はHTTPでアクセスするところまでを行いました。 hi1280.hatenablog.com 今回はHTTPS対応を行います。 MEAN Stackのプログラム一式はこちら github.com 実運用に耐えうることを想定して、以下の内容を含めています。 MongoDBの内容が前回までで、今回はHT…
前回はMEAN StackをDocker Composeで動かしてみました。 hi1280.hatenablog.com 今回はMEAN StackをKubernetesで動かします。 Dockerに対応したので、Kubernetesでも動くようになっているはずです。試してみます。 なお、今回のKubernetesの環境はGKE(Google…
前回はMEAN StackをHeroku上で動かしてみました。 hi1280.hatenablog.com 今回はMEAN Stackアプリに手を加えて、Dockerに対応させます。 Dockerにすれば、他の環境への移行も楽になるのではと思います。 Docker Composeを使って、nginx+Node.js+MongoDBの環…
MEAN Stackを運用するサービスを検討していましたが、Herokuが良いだろうという結論になり、実際に使ってみました。 Herokuを選んだ決め手は以下のとおりです。 Node.jsに対応している MongoDBがアドオンで簡単に使える Herokuのドキュメントを参考にして、…
PWA BuilderというPWA化するためのToolを試してみた記録です。 ざっくりとPWAとは何なのかが分かる内容になっていると思います。 今回は以下のサンプルを利用しています。 Freelancer - One Page Theme - Start Bootstrap PWA化したデモサイトはこちらです。…
過去に記事にしたWebアプリを公開しました。 bookshelf-share.hi1280.com 技術的なことは下記記事を見てください。 hi1280.hatenablog.com この記事では、アプリの開発以外で実際に公開するために実施したことを紹介します。 目次 テスト環境の作成 独自ドメ…