メモを共有するWebアプリを作った
メモを共有するWebアプリを作りました。
ほぼWikiみたいなものです。
ここでは、どのように作ったのかの概要、製作の感想を紹介したいと思います。
Webアプリのコンセプト決め
まずはWebアプリのコンセプトを決めました。
個人的に知識は共有することに価値があると思っているので、その発想を中心に考えていきました。
その発想から世の中に知識を共有するサービスが色々あることに気づき、最終的には以下を実現することにしました。
- Markdown記法
- 匿名
- 誰でも編集
- 個人用途でも可
似たサービスのコンセプト、機能、UIデザインを参考にしました。
使用技術の選定
個人活動として何かを作る際には、新しい技術を最低1つ採用することを個人的に決めています。
今回は、今後のWebフロントエンド界隈でさらに注目されそうなAWS Amplifyを採用することにしました。
UI部分は使い慣れているAngularを採用しました。
具体的には以下の内容になりました。
- Angular
- AWS Amplify
- AWSのリソースをWebクライアントから直接操作可能なライブラリ
- 各種Angular向けモジュール(
ng add
で追加可能なもの)- PWA(
@angular/pwa
) - Angular Material(
@angular/material
)
- PWA(
- 各種npmモジュール
製作中に学んだこと
AWS Amplifyの基本的な使い方
AWS AmplifyはS3やAppSyncといったAWSのリソースをクライアントから扱えるようにする仕組みが整っています。その仕組みに応じた使い方をするとAWSリソースが簡単に扱えるので便利です。
AWSのリソースを最初から作ろうとすると様々な設定が出てきて迷いますが、そのあたりをサポートしてくれます。
Angularのルーティング機能
公式ドキュメントを参照するとルーティング機能の詳しい内容が書かれています。
多層のコンポーネントを設定する方法が役立ちました。
https://angular.jp/guide/router#milestone-4-crisis-center-feature
コンポーネント設計を途中で見直したことで、ルーティングの設定が大きく変わる場面がありました。
最初の段階でコンポーネント設計を検討しておくことも重要だと感じました。
複数のコンポーネントが存在する場合にそれぞれのコンポーネントに対してルーティングの際にどのようにデータが受け渡されるのかを理解しました。
https://angular.jp/guide/router#resolve-pre-fetching-component-data
ルーティング時のデータはObservableなデータなので、ルーティング時に複数コンポーネントが存在してもそれぞれのコンポーネントでSubscribeすることで同じデータを受け取れるというのはよくできているなぁと思いました。
製作中に苦労したこと
画面のデザイン
codemirrorは内部でCSSの設定を変えながらエディタの動作を作っているので、そのあたりを考慮しつつ画面のデザインを意図した通りにするのは大変でした。
Flexboxを活用して相対的な位置指定で違和感がないデザインを意識しました。
今回はAngular Materialを活用して、UI部品に対してのデザイン部分を省力化できたと思います。
まとめ
今回のような具体的なアプリを作ると、これはAngularやAmplifyでどうやるのだろうという課題が色々出てきました。
何か自分で考えたアプリを作るのは特定の技術を勉強するという意味でも役立ちます。
本サービスを作った際の具体的なノウハウをこちらにも載せていますのでご覧ください。
Angular+AWS Amplifyを試した
AWS AmplifyとはAWSのリソースをクライアントアプリから直接操作することができるライブラリ群です。
これによって、サーバレスなバックエンドにすることができます。
似たものではFirebaseがあります。
今回はAngular製のWebアプリでAmplifyを試した内容と所感です。
Amplify CLIをインストール
Amplifyを操作するためのCLIをインストールします。
$ npm install -g @aws-amplify/cli $ amplify configure
指示にしたがって設定していけば、CLIの設定は完了します。
AngularでのAmplifyの使い方
新規作成
Angular CLIでアプリを新規に作成するところまで実施します。
作成したアプリに下記のnpmモジュールをインストールします。
$ npm install --save aws-amplify aws-amplify-angular
globalオブジェクトを扱えるようにします。
polyfills.ts
に(window as any).global = window;
を追記
設定
アプリにAmplifyを設定します。
$ amplify init
環境の名前を入力する必要があります。環境名はAmplifyの環境を分けるための識別子になります。
開発環境や本番環境といった形で環境を分けたい場合に活用します。
distribution directoryはAngularのビルド後のディレクトリを指定します。
例えば、dist/myAmplifyProject
AWSのサービスを追加
AWSのサービスは以下のようなものが用意されています。
| Category | | ------------- | | analytics | | api | | auth | | function | | hosting | | interactions | | notifications | | storage |
api、auth、hosting、storageあたりがよく利用するものだと思います。
サービスの追加は以下のコマンドで実行します。このコマンドではローカルにサービス用のファイルが作られるだけです。
$ amplify add <category-name>
以下のコマンドで実際にAWS上にリソースが作られます。内部的な動作としてはCloud Formationが使われます。
$ amplify push
認証を試す
ここでは、auth
のCategoryを試します。
$ amplify add auth $ amplify push
aws-exports.js
というファイルが作られます。
Amplifyを扱うために必要なファイルです。
以下のようにソースを修正します。
TypeScriptのオプションでJavaScriptファイルを読み込めるようにします。
aws-exports.js
をTypeScriptで読み込むために必要な設定です。
tsconfig.json
"compilerOptions": { "allowJs": true // <-追加 }
Amplifyのモジュールの内部で使われるaws-js-sdk
のための対応をします。
tsconfig.app.json
"compilerOptions": { "types": ["node"] // <-追加 },
AngularアプリでAmplifyを使えるようにします。
main.ts
// 省略 import Amplify from 'aws-amplify'; import amplify from './aws-exports'; Amplify.configure(amplify); // 省略
app.module.ts
// 省略 import { AmplifyAngularModule, AmplifyService } from 'aws-amplify-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AmplifyAngularModule ], providers: [ AmplifyService ], bootstrap: [AppComponent] }) export class AppModule { }
認証情報の有無で動作を変えるコードを記述します。
app.component.ts
import { Component } from '@angular/core'; import { AmplifyService } from 'aws-amplify-angular'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { signedIn: boolean; user: any; greeting: string; constructor( private amplifyService: AmplifyService ) { this.amplifyService.authStateChange$ .subscribe(authState => { this.signedIn = authState.state === 'signedIn'; if (!authState.user) { this.user = null; } else { this.user = authState.user; this.greeting = 'Hello ' + this.user.username; } }); } }
Amplifyで認証向けのコンポーネントが用意されているので利用します。
app.component.html
<amplify-authenticator></amplify-authenticator>
ユーザ登録からユーザのログインができるコンポーネントが表示されます。
デザインが何もないので分かりづらいですが、Create accountの部分などがクリックできるようになっています。
Webアプリをホスティングする
Webアプリの場合、Hostingする必要があります。
Amplifyではこれが簡単にできます。
$ amplify add hosting $ amplify publish
開発向けにはS3でホスティング、本番向けにはCloudFront+S3のホスティングをコマンド操作だけで完結してくれるのは便利です。
まとめ
Cloud Formationを介しているためかAWSリソースの作成に時間がかかるのが気になります。
ただAWSのリソースが簡単に使えるのが魅力で、まだまだ発展途上な様子なのでこれから期待したいサービスです。
まだ東京リージョンには対応していませんが、Amplify ConsoleというCDのサービスもあるので使ってみたいです。
参考資料
エンジニアのキャリアを語るMeetUp【しがないラジオ×kiitok】に参加しました
エンジニアのキャリアを語るMeetUp【しがないラジオ×kiitok】に参加しました。
trackrecords.connpass.com
SIerからWeb系に転職したパーソナリティの二人がキャリアの話やTechの話をするポッドキャスト「しがないラジオ」と、転職を前提とせずに現役エンジニアにキャリアの相談ができる「kiitok(キイトク)」のコラボイベントです。
kiitokのメンターでもある、Gunosy加藤さん、エス・エム・エス田辺さん、リブセンス竹馬さんの3名から、ご自身のこれまでのキャリアに関するLTと登壇者によるパネルディスカッションが行われました。
イベントの内容と個人的な感想を書きます。
自分のポジションについて
SIerのSEです。大企業成分が含まれています。
登壇される方々はエンジニア組織のマネージャのポジションで活動されていることが興味を惹かれました。
SIerにおけるマネージャとは何が違うのか気になります。
はじまり
参加者がほぼしがないラジオリスナーでした。
しがないラジオの影響力すごい!
これまでのキャリアに関するLT(竹馬 力さん | 株式会社リブセンス不動産ユニットIESHILディベロップメントグループ グループリーダー)
内容
自己紹介
- 2013年から現職で、サービスの立ち上げなどを経験してきた
これまでのキャリア
- 大学卒業後、非エンジニアで働き始めたが理屈が通らない環境ですぐやめた
- 働き始めてからいろいろ経験したが、自分を見つめ直したときに最終的にはエンジニアになると決めた
SES時代
ウォーターフォールからの脱却
- 仕事量が多すぎた
苦労の乗り越え方
SES時代
- 転職活動の中で今の現場の良さに気づいた
ウォーターフォールからの脱却
- エンジニアリングの説明責任を果たした
現職でエンジニアリング文化を作る
- 相手を認める心が大事
- 副業を通して新しい技術に関わった
キャリアからの学び
SES時代
- 人を変えるのは難しい、自分から変わった方が健全である
ウォーターフォールからの脱却
- rubyのコミュニティなど外の世界から学んだことが役立った
成長のマインドセット
- エンジニアは説明責任が求められるので悲観的になりがち
- やってみようといった前向きな気持ちが大事
個人的な感想
人が好きであるということが端々の発言であり、人と接するマネージャという役割にやりがいを持っていることが感じられました。
副業で書籍を執筆したりと技術のキャッチアップも行なっていて自分の必要と周りからの必要をバランスをとりながらキャリアを積んでいるのが参考になりました。
これまでのキャリアに関するLT(たなべすなおさん | 株式会社エス・エム・エス プロダクト開発部 部長)
内容
自己紹介
どういうことを考えてキャリアを積んできたか
- キャリアのはじめはSI系で、中盤でWeb系で働くようになった。合計で6社ほど経験した
- グローバルに展開する大手企業から数十人規模の会社
- 2社目から楽しく仕事してきて、転職周期は2年〜4年くらい
- 少し先を見て、リスクを取りながら転職をしてきた
- 大企業から小さい企業への転職は年収が下がってリスクがあった
- 会社の立ち上げフェーズで転職したが、自分のやりたいこととはアンマッチ感があった
- 自分の能力に不安があり、優秀なエンジニアや企画の人と働けそうな会社を選んだ。そこでは契約社員になったが能力が理由ではなかったので許容した
- 開発組織の見直しのフェーズで経験を積める会社を選んだ
思い
- 楽しく働きたいのがベースにある
個人的な感想
働き始めた当初から自分の現状を見て、先々この場所にいて大丈夫かという姿勢を一貫して続けられているというのが参考になりました。
2年〜4年ほどで必要性を感じたタイミングで転職を繰り返していることもその思いが現れている行動なのだと感じました。
これまでのキャリアに関するLT(加藤 慶一さん | 株式会社Gunosy技術戦略室VPoE)
内容
自己紹介
- VPoE、採用担当をしている
これまでのキャリア
グリー時代
- 主にソーシャルゲームのタイトルを担当した
- ガンダムのゲームを担当してガンダムを覚えさせられた
- ゲームの運営会社移管作業をして、孤独に作業をした
- 濃密に作業をしていて時間の概念を感じていなかった
- 障害対応を度々実施していたが良い経験になっている
株式会社フリークアウト時代
- 周りの能力が高かったので、不安を感じた
- Hadoopを触り続けた
- 自作サーバでデータパイプラインを構築する作業を続けていた
- 自作サーバで管理していたのが辛くなってきた
株式会社Gunosy時代
- ニュースアプリの開発初期に関わった
- 開発チームのマネージャをやっていくようになってきた
- サマーインターンシップのイベント企画を実施するようになった
- CTOやエンジニアマネージャの人がたまたまいなくなったタイミングで自分がその役割を担当するようになった
- エンジニアの採用や育成、全社の採用担当をしている
キャリアパスについて
- あまり仕事を選んでいなかった
- 社内での要望に応じて仕事を続けていたら希少な存在になっていた
- こだわらずに仕事をしていくのも良いかもしれない
- 今ではコードをあまり書かなくなっているが、マネージャも面白いと感じている
感想
こういうキャリアの積み方もあるのかと驚きました。
人との繋がりから自然とキャリアが作られていくというのは良い話です。
信頼貯金ってあるんだなーと思いました。
スポンサーLT
エンジニアが喜ぶ制度がある企業はいいなーと思います。
いい椅子が買えたりするとか。
パネルディスカッション
転職活動をどのようにしたか
加藤 慶一さん
- 人の紹介で転職をしてきた
たなべすなおさん
- リクナビNEXTでのエージェントの紹介
竹馬 力さん
- リクナビNEXTで知り合ったエージェント経由
- エージェントの人とは個人的に交遊するようになった
転職活動を気軽にしていいのか
竹馬 力さん
- 出会いは運の要素が強い
- 先入観を持たずにカジュアルに活動して良い
たなべすなおさん
- 転職する気がなくても転職することもある
- 採用側としても転職意欲が3割くらいの人でも選考に進んでくれる感覚がある
- あまり気にせず活動して良い
加藤 慶一さん
- カジュアルに人の紹介で転職が決まった
カジュアルに話を聞きに行ったら選考が始まる問題
- 転職活動ということで会社にいきなり訪問するのはハードルが高い
- kiitokのようなサービスを使うと良い
社会人3年目でのキャリアの考え方について
竹馬 力さん
- 3年目くらいになると1人で仕事をこなせるようになってきている時期
- 仕事に飽きていて、周りに期待をしなくなる時期
たなべすなおさん
- 2年くらいで転職した
- SIで下請けで働いていた
- 会社の将来性が不安だった
加藤 慶一さん
- 3年目で転職している
- 自然と転職することを考えるようになった
ポジティブな理由での転職はあるか
加藤 慶一さん
- フリークアウト、Gunosyでの人の繋がりで恩返しのつもりで転職をした
たなべすなおさん
- 自分が楽しみながら働き続けるという意味でポジティブに転職をしている
竹馬 力さん
- 今のところでは自分が希望していることができない点を感じて転職をしている
- 自分視点ではポジティブに転職をしている
マネージャ職の立場で今でも技術を追っているか
加藤 慶一さん
たなべすなおさん
- 技術のできないエンジニアリングマネージャと働くのは辛い
- マネージャはプログラマの立場にたった支援をしてもらえるとありがたい
- JavaScript界隈は追いきれない
- ベースとなりそうな技術は原典となる技術書を読んでキャッチアップしている
- 旬の技術はその都度必要になったら学んでいる
竹馬 力さん
- 書籍を執筆している関係で最新のRubyとRailsのバージョンは追っている
- 個人でやっているWebサービスの中で新しい技術を使っている
- 本業では組織が成熟してきて、技術よりも組織づくりに力を入れている
- コードを書くよりも組織づくりの方が本業に貢献しそうだと感じている
マネージャのスタンス
- エンジニアのマネージャはコードを書くだけではなく、組織のパフォーマンスをより良くすることを考える必要がある
マネージャは楽しいのか
たなべすなおさん
- プログラムを書いている方が楽しい
- マネージャは開発組織が目的に向かって働けるようにする役割
- 半年ごとぐらいにやりがいを感じる
- 毎日が楽しいという感覚はない
竹馬 力さん
- エンジニアはヒューマンスキルも大事
- メンバー同士でのコミュニケーションの場が楽しい
- メンバー間のコミュニケーションの問題を解決しながら、組織がより良くなっていくのが見える
- 新卒で育ててきたメンバーが会社のMVPを選ばれたのは嬉しかった
- 人が成長する姿を見れるのが楽しい
加藤 慶一さん
- 自分が採用した子が活躍しているのを見れるのは楽しい
エンジニアのキャリアを考える人に一言
加藤 慶一さん
- 心の持ちようで変わる
- 生活のリズムを変えることで感じ方も変えられる
たなべすなおさん
- 人が経験できる会社の数には限界がある
- 楽しくなければ転職すればいいと思う
- 楽しくないのは何か先に閉塞感を感じているからだと思う
竹馬 力さん
- マインドセットが大事である
- 自分のいる場所で楽しさを見つけ出すのもスキルである
感想
お三方とも歩んできたキャリアは全然違うのにそれぞれの場所でマネージャとして活躍されているのが面白いです。
自分の興味に応じた行動力とエンジニアとしての考え方が大事なのかなと思います。
まとめ
エンジニア組織のマネージメントには何が大事なのかということが個人的な興味としてあります。
その1つの気づきとして、エンジニアとしてのキャリアを積んでいくとそれがマネージメントにも役に立つことが分かりました。
Web系のような自分たちで考えて行動する人たちに対しては、その人たちの気持ちを分かったマネージメントが大事なのだろうということを感じました。
エンジニアとしてのキャリアがある人がエンジニア組織をまとめた方がそこに所属する人たちも話が通じやすくて満足度が高いはずです。