Imomemo

色々とやっていきたい

Windowsで作ったzipをAWS Lambdaに使用するとエラーが出る

原因:Windowsでフォルダを選択してzipを作ると、一層深くなってしまう

Could not open file:/index.js
The file could not be found on the file system.

こんな感じのエラーになってしまっていた。
見出しの通り、フォルダを選択してzipを作ると一層深くなってしまい、Lambdaの想定しているzipファイルと構造が違ってしまうのが原因だった。

解決策: 必要なファイルを全選択しzipに圧縮しよう

少し面倒だがフォルダごと圧縮せずに、必要なファイルを全選択することで正常に動く。

Atcoderを始めて、過去問350問解いてみて茶色になった

年始から暇つぶしと生JS力の鍛錬のためAtcoderを始めて、
Atcoderのコンテストに出たり過去問を解いたりしていました。

その結果や得たもの、見つかった課題

・過去問を350問以上解いた 言語別AC数 第2位!
・レートは(2019年6月20日現在) 502で茶色コーダーになった
・このままコンテストに出てれば緑までは順調に上がれるような気がする
フレームワークに頼らずJavaScriptをある程度使いこなせるようになったと思う
・巨大な入力を考慮することを覚えた
・コーナーケースを意識することを覚えた
・それまで余り持っていなかったコンピュータサイエンス方面の知識への興味が出た
・有名なアルゴリズムやデータ構造、典型問題(累積和、しゃくとり、DP、深さ/幅優先探索など)について知れた
・文系上がりということもあって数学力がまったく足りない事を実感

Atcoder Begginers Contest の精進記録をまとめたリポジトリを作った

github.com

ここにABCの自分の提出をまとめたリポジトリを作りました。
調べるとJSでの解放をまとめている人はそんなに居なかった (いても問題数が少なかったり) ので、これからJSでAtcoderを始めるという変わり者が居たら参考になるかもしれません。

なるべくモダンな書き方で、読みやすく書いてるつもりだけど初期と現在では結構書き方が変わってしまってます。
ご勘弁。

JSと競プロについて

JavaScriptは好きだけど競プロをやるのは正直向いてないです。
主に整数の最大値(MAX_SAFE_INTERGER)が小さいことと実行速度の遅さがネック。
あと型がないのでたまに型を勘違いしてうっかりミスをやってしまう。

ほかにはAtcoderでは標準入力周りでたまに変な改行が入ってくることがあって、
trimをかけてやらないとsliceやlength周りで事故が起きることがありました。

これについてはまったく情報が出てこなかったので記事にするかもしれません。

まとめ

レートが下がると萎えるけど、何だかんだレベルアップしてる感が楽しいので今後も続けると思います。

とりあえず目標は2019年中に緑色 で!

「cert.pem does not exist or is empty」というエラーが出る【Let’s Encrypt + Apache】

Apache上でLet’s Encryptを使うために作業していたらタイトルのエラーが出た。

Syntax error on line XX of /path/to/ssl.conf:
SSLCertificateFile: file '/path/to/cert.pem' does not exist or is empty

適切にcert.pemを配置しているにも関わらず、無いことになっている。

原因:パーミッションの問題だった

パーミッションが許可されていないせいで、cert.pemのあるディレクトリにアクセス出来ず発見出来なかったらしい。

「/etc/letsencrypt/archive/」と「/etc/letsencrypt/live/」のパーミッションを755にしてやると解決した。

$ sudo chmod 755 /etc/letsencrypt/archive/
$ sudo chmod 755 /etc/letsencrypt/live/

React の公式ドキュメント翻訳プロジェクトに参加した

僕は今年の目標としてOSSコミュニティへの貢献を挙げています。

最近2つのOSSプロジェクトに無事コントリビュート(貢献)出来たので今回の記事ではそれについて。

まず初めてのOSS貢献をした

このあいだ初めて「33 Concepts Every JavaScript Developer Should Know 」というプロジェクトの日本語版リポジトリ作成という形でコントリビュートさせてもらいました。

これはほぼリンク集で翻訳箇所も少なく、レビューらしいものも無くすんなりマージされたので、今覚えば初挑戦としては最適だった。

これが初めてのOSS貢献だったので、ビクビクしながらも問題なくマージされた時は軽く感動しました。

その次に、React 公式ドキュメントの日本語化プロジェクトにも参加した

さらに立て続けにもう1つ翻訳でイカれたプロジェクトに貢献させて貰いました。
React の公式ドキュメントの日本語化です。

github.com

きっかけは @poteto4d さんの Twitter での呼びかけを見て、これはチャンスだなと思い飛び込んでみました。

主要なドキュメントは既に翻訳され始めていたが、「how-to-contribute(貢献の方法)」というページがまだ空いていて、自分はそこを担当することに。

こちらは初回のプロジェクトと異なり有名かつ大規模なプロジェクトが本家であることから、レビュープロセスや規約が凄くしっかりしていたなと思う。

途中つまづきもあったものの、2人のウルトラ親切なレビュアーの助けにより複数回の修正を経て...

無事マージされました!イェア!

ところで、Facebook はセキュリティ上のバグを発見した人には報奨金を払うっていう制度をやっているらしいです。
翻訳をしている中で、初めて知りました。

OSS活動はメリットばかりなのでやろう

自分の送ったプルリクがマージされるのは、一体感が得られるし認められた感覚がして、面白いです。

しかも、やってみると自分が想像していたより遥かにハードルは低かった。
やっぱり何事も最初の1回をやるまでがキツいんですよね。

別に強いエンジニアじゃなくても、参加先を選べば全然大丈夫だという事が分かったのが大きい収穫でした。
特に自分なんかは、超小規模なチームで働いているのでこういった大きなコミュニティでの一体感を得られる機会が少ないので尚更です。

これをやる前と後で、自分の実力が大きく変わったりはしていないはずですが、やっぱりOSS活動をしているとそれだけで強く見える気がします。 。

翻訳から入るのはオススメ

あと、OSS貢献の入門として翻訳は最適だと思いました。

既存のプログラムを破壊したりする心配もないし、その割には翻訳の人手が足りてないプロジェクトっていうのは結構あります。

あと今のとこやる予定はないですけど、技術系の翻訳とかやりたい人はこういった活動も実績になりそうで良いかもしれないです。

2018年振り返りと2019年の目標

2018年の振り返り

2018年は色々と成長は出来た年だったと思う。
ただし、2017年は結構サボってしまっていて反省した反動というのが大きい。

主なこと
・TOEIC820点をとった
・英語ドキュメントでの情報収集と英語教材での勉強に抵抗がなくなった
・Vue.jsをやり初めて、基本は理解した
・それまでほとんど無かったAWSやインフラ関係の知識を得た
AWS認定SAAを取得した
・Firebaseを使い始めて便利すぎて漏らした
・ブログを始めた
・開発環境だけだけどDockerを使い始めた
・生JSへの理解が深まった(と思う)
・Laravelを使い始めた(実務は生PHPだけだった)
・パフォーマンスを意識したフロントエンド開発の知見を得た
・プライベートでの勉強をGitHub上にあげる習慣が出来た
・週1回だけだけど筋トレの習慣が付いた
・個人開発を始めてアウトプットした

2019年 目標

Atcoderを始めたので緑色になる
・個人サービス 3つはリリースする
・なんらかの勉強会などで登壇してみる
OSS貢献する
・Vueだけでなく、Reactも触ってみる
・UI/UXデザインの勉強をする
コンピュータサイエンスの基礎の理解
・アウトプットする

おまけ:趣味編

・Drum cover動画 Youtubeに3つ以上投稿する
鉄拳7(ゲーム)で帝段になる
・貯金をする
・料理を覚える
スマートスピーカーを買う
・筋トレを今年も続ける

Vue.jsとFirebaseの本を読んで高速にWebサービスを開発してみた

まずVue.jsとFirebaseの本を読んでみた

ワタナベ(id:tatsuaki_w)さんの「Vue.jsとFirebaseで作るミニwebサービス」というイカした本を買ってみました、超絶わかりやすくオススメ出来ます。

Vue.jsもまだまだ分からない部分も多く勉強中ですが、Firebaseに関しては一切触ったことがなかったです。

しかし、使ってみるとこれがめっちゃ便利。
この本によって基礎知識を付け、サクッとマークダウンエディターをFirebase上で作ってみて要領を掴みました。

オンラインメモ帳を作ってみた

OimoNote | Simple Online TextEditor

f:id:oimo23:20181125124014g:plain
oimonote

今回作ったのがこのWebサービスです。
昔々、「notepad.cc」というオンラインメモ帳が好きで使ってました。

しかし!ある日突然サービス終了してしまったのでした。悲しみ。
というわけで、今回作ったものはそれにかなり近い形で自分なりに復刻というコンセプトで作ってみました。

・メモ帳(markdownなどはなし)
・Share用のURL発行
・鍵付けれる
・レスポンシブ対応

良さ

ログイン不要で、あとから場合によっては鍵を付けられるっていう手軽さが良いところだと思ってます。
あと自動保存も付けておきました。

onkeydownでclearTimer→setTimeout(3秒待機後保存)

という超単純な仕組み。 これで最後のkeydownから3秒入力がないと保存される。
もっと良い方法がありそうだけどとりあえずこういう時はまず完成を優先させます。

しかし、「OimoNote」って名前の付け方はどこか「秀丸エディタ」っぽいですね。

ロゴ、デザイン等

ロゴはshopifyの提供しているロゴジェネレーターを使用してみました。

hatchful.shopify.com

○etlifyに似ている気がしますが、出てきたものの中では気に入ったのでこれにしました。

類似するサービスは他にもありそうなので出来るだけ使っていて気持ち良かったりテンションが上がるものにしたいですよね。

こういった個人サービスは無骨なデザインのままだったりすることが多いので出来るだけデザインはまともにしました。
ちなみにcssフレームワークにはUIKitを使っています。

改善したいところ

URLを自分の好きなものに変更出来る機能が欲しい

今はランダムなURLが発行されるようになっていますが、お気に入りに入れるなりしないと忘れてしまいそうです。
自分の好きなURLに変更出来る機能があれば良いな~と思います。

複数人による整合性を保った同時編集が出来るようにしたい

今は複数人が同じメモ帳を開いて編集すると最後に更新した人の方の内容で全面的に書き換えられます。
リアルタイムに複数人での編集が出来ると良いなと思います。このあたりFirebaseは割と得意分野っぽいので。

まとめ

Vue.jsもFirebaseも本当に良いもの。イカしてますよこいつら! 途中で色々ハマったりもしましたが開発日数は5日間でした。Firebaseのおかげで自分としては速い方です。

とりあえず完成させることを目標にやったのでこれからリファクタリングです。
コンポーネント指向のはずが一つのコンポーネントが既に巨大化してきてます。

追伸

福岡かリモートで絶賛職探し中やで!

S3+CloudFront+ACM(Certificate Manager)で静的サイトのSSL(https)化&高速配信

概要

S3で静的サイトをホスティングし、一般に公開しているところまでは前提とします。 CloudFront+ACM(Certificate Manager)を利用してキャッシュでの配信+SSL化をしたのでメモ。

今回はムームードメインドメインを取得していて、ACMの認証方法は「DNS検証」を使った場合についてです。

流れ

1.ACMで証明書の発行/DNS検証 2.ムームードメインでCNAMEの設定
3.CloudFrontでNew Distributionの作成
4.Route53でAレコードのAliasを書き換える

ACM(Certificate Manager)で証明書発行/DNS検証

Certificate Manageに入り、まず重要なのはリージョンを「バージニア北部」にする必要があることです。

f:id:oimo23:20181108224759p:plain

デフォルトの「東京」のままだと出来ません。
今回適用したドメインを入力し、進んでいくとEメール検証とDNS検証がありますが、メールサーバーが無い場合は面倒なのでDNS検証にします。

すると、CNAMEが発行されるのでそれを取得したドメイン業者(自分はムームードメインでした)にてDNS設定を書き換えます。

CNAMEの設定

ムームードメインの場合

ログイン

ドメイン操作

ムームDNS

注意点ですが、ACM側から指定された内容そのままでは上手くいきません。
下のような形式で入力すると正常に発行されました、少し時間が掛かる場合もあります。

サブドメイン 種別 内容
_77362ffc9dfad530eb678dd039f37ecd CNAME _487bc18e4b360e7ccf6bc3f2008bb5af.tljzshvwok.acm-validations.aws

要するに、サブドメインの部分はサブドメインそのものだけでOK。
内容の方は末尾の「.」が必要ありません。

CloudFront

CloudFrontに入り New Distribution→WebのGet Started選択 f:id:oimo23:20181108224125p:plain こんな感じの画面になります。 「Origin Domain Name」のところをクリックすると自動的に候補が出てくるのでバケットを選択します。

・「Default Cache Behavior Setting」の「Viewer Protocol Policy」を「Redirect HTTP to HTTPS」にする

・「Distribution Settings」の、「Alternate Domain Names [CNAMEs]」を今回適用するドメインにする

・「SSL Certificate」の、Custom SSL Certificateを選択してACMで発行した証明書を選択

そしてDistributionを作成します。

Route53でAレコードのAliasを書き換える

今回SSL化したいドメインの設定画面を開き、Aレコードの部分も既存のものからCloudfrontのDistribution(*******.cloudfront.net)へ書き換えます。

完了

確認してみるとhttps化に成功しています。
注意点としては、少し時間が掛かる場合があるのでその時は一度寝てから見てみましょう。