初めてOSSにContributeしました。typoの修正ですが。

僕は最近、隙間時間にTypesScript Deep Diveの日本語訳を読んでいます。同時に「OSSにcontributeしたいなあ。まずはtypoの修正とかから始めようかなあ。」なんてことを思っていました。そんなある日、Deep Diveを読んでいると、Deep Diveに一文字のtypoを見つけました。僕は「お！これだ！」と思い、すぐにcontributeのための作業に取り掛かりました。

修正の準備

　僕はまだcontribute未経験です。という訳でまず、contributeのやり方(具体的に何をすれば良いのかや、作業の流れ)を調べました。こちらの記事を参考にして進めました。
　まず、TypesScript Deep Diveの日本語訳のリポジトリ、https://github.com/yohamta/typescript-book-jp をforkします。
　次に、forkしたリポジトリを自分のPCにcloneします。
　自分のPCにcloneしたら、自分の開発用のbranchを切って、CONTRIBUTING.md に書いてある通りに開発環境を作ります。手順に従って、 npm install gitbook-cli -g を実行した後に gitbook serve . を実行しました。しかし、ここでこんなエラーが発生しました。

Error: ENOENT: no such file or directory, stat '[ここまでのフォルダパス]/typescript-book-jp/_book/gitbook/gitbook-plugin-edit-link/plugin.js'

環境構築にエラーは付きものなので怯まずに調べました。
　すると、 こちらの記事 に解決方法が書いてありました。この記事の通りに修正して gitbook serve . を実行すると今度は、こんなエラーが発生しました。

Error: Couldn't locate plugins "edit-link, github, adsense, header", Run 'gitbook install' to install plugins from registry.

エラー文の通りに gitbook install を実行してから、gitbook serve . を実行すると無事に動作しました。 これで準備完了です。次は修正に取り掛かります。

修正

修正対象のファイル、docs/javascript/number.md を開き、「少数演算」を「小数演算」に修正して、add、commitをし、自分のリモートリポジトリにpushします。
　次に、remote リポジトリにfork元のリポジトリを追加します。

git remote add upstream https://github.com/yohamta/typescript-book-jp.git

参考にした記事の通りに、ローカルのmasterにfork元のリポジトリ upstream をpullし、ローカルのmasterを修正用branchにrebaseします。 そして、修正用branchをoriginにpushします。参考記事では -f オプションをつけていますが、僕は -f はつけずにpushしました。

プルリク

いよいよプルリクです。 GitHubの自分のリモートリポジトリのページを開き、New pull request ボタンをクリックし、プルリク作成画面に行きます。 プルリク作成画面に左のbase repositoryが yohamta/typescript-book-jp であることを確認し、プルリクのコメントを書いて、プルリクを作成します。 あとは結果を待ちます。

プルリクの結果

次の日の朝、メールを見ると、プルリクへのコメントの通知が来ていました。承認されてマージされたようです！Deep Diveの該当箇所を開くと、僕が修正した箇所が反映されていました！そして、リポジトリのREADME.mdのContributorsの欄を見ると、僕のアカウントが表示されていました。とても簡単なtypoの修正でしたが、何かに貢献できた感じがして達成感がありました。

おわりに

今回、とても簡単なtypoの修正という形でOSSにcontributeしました。こんな簡単な修正でも自分が修正した部分が実際に反映されていたり、contributorsの欄に自分のアカウントが載っていたりすると貢献した感や達成感がありました。OSSへのcontributeを楽しんでいる人の気持ちの一端を垣間見た気がします。これを第一歩として、今後はよりOSSにcontributeしていけるように励みます。

Github って package-lock.json に書いたバージョンの脆弱性を指摘してくれるんやね。

先日、ng new を実行して angular プロジェクトを作って、github に push しました。 すると、github 上に 'We found a potential security vulnerability in one of your dependencies' という見慣れないアラートが...(・・;)

'see security alert' のボタンをクリックすると詳細の画面に飛びました。

この tar の文字列をクリックすると、さらに詳細な内容が表示されました。

これによると、package-lock.json に書いてある tar のバージョンが 4.4.2 より前のバージョンなので、脆弱性があるということでした。ちなみに脆弱性の内容は、既にシステムに存在するファイルと同じリンクのファイルを含む tar ファイルを解凍する時に、既に存在するファイルが tar ファイルの方のファイルで上書きされてしまうとのことでした。
　早速、画面の Remediation を参考にして、package-lock.jsonのtar のバージョンを全て 4.4.2 以降に書き換えて、再度pushしました。 すると、無事にアラートは消えました。
　パッケージの脆弱性と修正方法を示してくれるなんて github は親切ですね。

イベントレポート#1：PWA Night vol.4 ～PWAのミライや活用方法をみんなで考えよう～

はじめに

今回は PWA Night vol.4 ～PWAのミライや活用方法をみんなで考えよう～ というイベントに行ってきました。写真撮り忘れたので写真ないですが、許してください...。もし記事の内容に誤りがあったら指摘してください。
　このイベントは、登壇者がPWAの活用法や開発話について話すというものです。発表が終わった後には懇親会(会費1000円)もあります(僕は参加しませんでしたが)。 会場は株式会社ウフルさんのオフィスです。いい感じのおしゃれなオフィスでした。 PWA活用の事例や、PWA周りの技術の話、PWAの動向の話などがあり、PWAをこれから触る僕にとって、ますますPWAを触りたくなるような内容でした。早速、チュートリアルやってみます！

受付、イベント開始

connpassの参加票を見せて受付しました。受付時にPWA Nightのステッカーをいただきました。PWAの本の販売もありました。
　イベント開始後、最初はまさかの自己紹介からでした。「聞いてないよっ(　ﾟдﾟ)」って思いましたが、connpassのページを確認すると書いてありました...。一人10秒でしたが、結構緊張しました。内容は大体、名前と職種、参加した目的で、たまに会社名を言う人もいました。 全員の自己紹介が終わると、さて、いよいよ講演です。

こえのブログのPWAについて by Kazunari Hara さん

最初の発表は、「こえのブログのPWAについて」 というタイトルで、amebaのこえのブログの開発話です。 なぜPWAにしたのかという話の後、PWAを開発する中での技術的な話がありました。 実装に利用したAPIの話やコードを見せながらの話もありました。やっぱりコードを見せてくれるのはありがたいですね。 シェアにはWebShareAPI、コピペにはClipboardAPI、バイブレーションにはVibrationAPIといった様に、APIを利用しているようです。バイブレーションは、まさにスマホ特有のものなので「おー」と思いました。
　個人的には、開発をする中で、サービスの特性を考えた上での工夫が感じられる話が印象に残りました。 サービスの内容的にオフラインでのデータの保存が重要なので、記事データが変わるたびにIndexedDBに記事を保存する話、録音中の音声を圧縮するためにWebAssemblyのvmsg というライブラリを使っている話、CDNを使用する上でできるだけコンテンツをキャッシュするようにしたりキャッシュのTTL(TIme To Live)を長くしたりという話です。

やっていこう。PWA by @oliver_diary さん

2つ目の発表は「やっていこう。PWA」というタイトルです。 まずPWAの定義の話がありました。PWA初心者な僕にはありがたかったです。その後に、@oliver_diary さんがPWAを開発する上で気をつけていること、PWAにまつわる技術の話がありました。 どのようにユーザに通知を許可させるかという話は、考えたことがなかった視点だったので勉強になりました。 PWAを端末にインストールしてもらうためには、通知を出さなくてはなりません。 しかし、最初にwebページを開いた時にブラウザの「通知を許可しますか」だと、ほとんどの人が拒否にして、その後許可に変更する可能性は低いとのこと。 そこでアプリケーション独自のモーダルやポップアップを入れることによってこれを回避するという話でした。
　あと、APIの話がとてもわくわくしました。 聴いた中だと、Shape Detection API、カメラへのアクセスや位置情報の追加などが面白そうでした。 僕がAndroidアプリとして開発しようと思っていたものも作れそうでわくわくしました。

業務システムでこそPWA by @goofmint さん

3つ目の発表は、「業務システムでこそ使えるPWA」というタイトルの発表でした。 僕はSIer勤務なので、一番身近な発表だったと思います。また、PWAはBtoCのイメージがあったので、タイトルを見た時に意外性がありました。 主に業務アプリでPWAを導入することのメリットの話でした。 登壇者が経験されたSIerならではの難しい点をPWAなら解決できるという話でした。 よくお客さんがなかなかアプリを更新してくれないということがあるが、PWAだと自動更新なので、そのような心配がないという話や、iOSエンジニアやAndroidエンジニアを集めるのは大変だが、PWAを採用すると、普段webアプリを開発しているメンバーで開発できるので人を集めやすい、といった話がありました。 SIerでPWAを採用することのメリットが分かりました。

LT

次はLTです。

最初のLTは、gatchan0807 さんによる「PWACompatを本番導入してみた話」という発表です。 PWA compatは聞いたことがなかったのですが、PWA compatは、manifest.jsonの情報をもとに対応していないブラウザでタグを追加してくれるというものらしいです。

2つ目のLTは、iret_oyamatsu さんによる「PWA作って満足していませんか」という発表です。 このLTでは、PWAの運用にフォーカスして話をしていました。 PWAを開発して終わりではなく、運用をしていこうという話です。 PWAの本質はUXの向上なので、PWAをリリースした後の効果測定、改善が大事という話でした。

最後は、kindback さんによる「PWAをもっと手軽に」という発表です。 これは、PWAを手軽に作成できるツールを作成したという発表でした。 OneSignalの無料プラン使用している関係上、商用のPWAには利用できないとのことでしたが、社内の人を説得するためのプレゼン用に使えるとのことです。 改修中でイベント時は残念ながらアクセスできませんでしたが、発表を聴く限り凄そうでした。

イベントレポートは以上です。 これからもイベントレポートを書いていこうと思うので良かったら読んでください。

はじめまして。自己紹介。(・・)

プロフィール

僕はSIerで働くエンジニア(2年目)です。主に詳細設計〜単体テストまでを行なっています。今はtypescript (Angular)とjava (Spring)を使用しています。学生の時は情報系の研究をしていて、そこではc++でシミュレータのコードを書いたりpythonでグラフ書いたりしてました。ちなみに使ったことのある言語は、java、javascript、typescript、python、c++、c、pl/sql、vb.netです。
　趣味はアニメ鑑賞と外食で、暇な時はdアニメストアやAmazon primeでアニメ見たり、外にご飯食べに行ったりしてます。

私生活での活動

プライベートでは、自己学習をしたり技術系のイベントに行ったりしてます。今まで行ったイベントでは、developers summitとmicrosoft connect japanが印象に残ってます。まだ技術系のイベントで登壇したことはありませんが、もっと経験を積んだら、自分もどこかのイベントで登壇したいと思っています。話を聞く系のイベントだけでなく、もくもく会にも結構参加してます。
　自己学習では、最近はAngularやspring bootを使ってwebアプリケーションを開発したり、AWSとかVue.jsとか興味あるものを触ってみたりしてます。

なぜ記事を書くのか

僕がこのブログを開設したのは、自分が得た知識や経験を気軽にアウトプットしたかったです。僕は日々の自己学習の中で学んだこととか経験したこと（こんなバグ出て大変だった！とか、最近勉強したこれに感動した！とか）をすぐに誰かに言いたくなります。ただ、普段の会話で聞かれてもない知識を勝手に話すと多分大抵の人は嫌がるので話せません...(--;)。Qiitaにも何度か投稿したことがありますが、僕の中ではQiitaには難しいと感じたことや、ググってもすぐには出てこなかったことなどを書くものと捉えていて、学んだことや経験をあまり吐き出せません。そこで、自分が好き勝手に知識や経験を話せる場が欲しいと思い、このブログを開設しました。

このブログに書くこと

このブログには、自分が日々の学習で学んだことや技術イベントのレポートなどを何でも気軽に書いていこうと思います。もう少し具体的に言うと、自分が学習したことの中でみんなに聞いて欲しいことや、技術イベントの内容や凄かったところなどです。割と好き勝手に書いていきますが、その中で誰かのお役に立てる記事があれば幸いです。