kasuのブログ

勉強していく

Vue3でFirabaseログイン

zenn.dev

2年前に書いたVue vuexでfirebaseのログイン保持を、Vue3+Composition APIで書き直したものです。

未だにちょくちょく読まれているようなのですが、流石に2年前のバージョンのチュートリアルは申し訳ないと感じたので書き直すことにしました。 需要があるかはさておき。

1年ぶりくらいにVueを書きましたが、やっぱり書きやすいですね。 TypeScriptから逃げられないのでReactを選んでいますが、Vueが完全に対応したらVueを選んでもいいかもしれない。

引越しました 2020

引越し 2020

諸事情により引っ越すことになり、大学の近くへ引っ越しました。

あと1~2年だけだけど。

f:id:ergofriend:20200112010618j:plain

手続き

初めての引越しだったのでめっちゃ調べた。あんまやることは無い。

  1. 旧役所で転出届を出す
  2. 新役所で転入届を出す
  3. 新役所に年金手帳持ってく
  4. 警察署で免許の住所変更

So-net、12/29に申し込んだら開通1/14って言われた。おっそ〜い。 (工事なし)

無派遣工事で24,000円とるのぴえん。

費用

初期費用は¥208,367

  • 敷金礼金なし、クリーニング・仲介手数料などで10万した
  • 家賃は木造 7帖の1Kで¥68,000 
家具

小物とか合わせて¥25,000

家電

冷蔵庫・洗濯機・電子レンジ・PCデスクの合計¥55,000

その他

趣味的なもの。合計¥35,000

引越し祝い🙇‍♂️

プロジェクターを買ったので、高さのあるラックが欲しいな!

欲しいものリスト

かす-引越し2020

Kyash

http://kyash://qr/u/439682059211829935

f:id:ergofriend:20191230225446j:plain

開発時にSNSシェアの内容を確かめる君

github.com

ローカルとかで開発してる時に、Twitterなどでシェアした際の情報を視覚的に確認できる君

サマーインターンで、OGP用の画像を自動生成する機能を作りました。生成された画像は、開発者ツールからmetaタグ内のリンクを開いて確認していましたがとても面倒でした

その際に必要だった画像とメタタグの確認を簡単に出来るツールです。

OGP画像の表示ツールはいくつかありますが、サーバがインターネット上にあります。その場合、画像などのリソースが外からアクセス出来ない場所にあると確認が出来ません。なので、ローカルから使えるツールを作りました。

モチベが消えてしまったので、issueなどで要望をお待ちしております!

 

Apple Clangでgcc -fopenmp

以下の記事を参考にして、-fopenmpを使えるようにします。

qiita.com

エイリアス

上記の記事のままだとgcc -Xpreprocessor -fopenmp -lomp -o huga hoge.cのように長くなってしまいます。

.bashrcに以下のコードを追加することでgcc -fopenmp -o huga hoge.cOpenMPを使えるようになります。

gcc() { 
    if [[ $1 == "-fopenmp" ]]; then
        command gcc -Xpreprocessor -fopenmp -lomp "${@:2:($#-1)}"
    else
        command gcc "$@"
    fi
}

わざわざgcc -fopenmpをやりたかったのは、学校の教材に合わせるためです。(一応)

gcc -fopenmpも十分長いので、gcc -fopenmp用にエイリアスを登録すれば良さそう。

はてなサマーインターン 皇紀2679年の夏

はてなサマーインターン2019 

株式会社はてなさんで、4週間に渡るインターンに参加させていただきました。

 週5x8時間の活動が1年ぶりくらいだったのでとても疲れました。

京都へ来る前、毎日走って自分を変えよう!などとイキってましたが4日しか走れませんでした。走りませんでした。今これを書いているのがインターン終了して1日目ですが、今日も今日とて運動不足。

developer.hatenastaff.com

インターン

*この物語はフィクションです。

まだ蝉の声が耳に突き刺さる暑い夏の日だった。そんな日の夜、僕ははてなサマーインターンへの参加を決めた。

プロローグ -京都感-

晴天による暑さが脳裏に焼き付いている8月19日、僕は約10年振りとなる京都へ向かった。

「まもなく京都です。東海道線、山陰線...」東京を出て2時間後、京都へ到着する旨のアナウンスが静かな車内に響く。乗客の多くが、ひとつ前の名古屋で降りてしまった。人の少なくなった車内で、僕はパソコンを仕舞い降車する準備に取り掛かる。 

無事到着し、京都駅を拝めるためにホームを出て外へ向う。夏休みのせいもあってか、観光客が視界にちらつく。「大学生の貴重な夏季休暇、1カ月間オフィスで勉学に励むのではなく遊び倒すべきではないだろうか。」そんな思いが僕の心を支配する。

しかし、すぐに一昨年の夏を思い出す。あの夏僕は外出した日を数えるのが簡単なくらい家に篭ってPCゲームをしていた。一カ月もの時間をゲームに費したのだ。PCゲームは偉大だ。モニターに映る映像はまるで本物のようだ。映画やドラマ、本と同じくらいその世界にいると錯覚させてくれる。それでも僕は、たまには人生を有意義なものにしようと思ながらはてなオフィスへと続く烏丸線に乗った。

電車内、今日の予定表を確認する。時計を見ると集合時間よりも早く着きそうで、どうのようにして時間を潰そうかと早々に悩むことに。地図を見るとオフィスの方向には目ぼしいものがなく、悩みは募るばかりだった。

そうこうしてるうちにはてなオフィスのある烏丸御池駅へと到着したようで、僕は京の中心である京都駅では見られなくなったであろう京都感を期待して電車を降りた。しかしそこには京都感など微塵も感じられない。まるで東西線から降りる高田馬場のようだった。悲しさに悩んでいたことも何処かへ行き、僕はオフィスへと足を向けた。

オフィスに近づいてくると、オフィスビル一階のコンビニが目に入る。僕はすぐにイートインで時間を潰そうと決めた。レジで軽食を買い、イートインへと歩みを進める。レジの前を通り陳列棚に遮られていた視界が開けると、キャリーケースを持つ青年が目に入った。その瞬間、

インターン生じゃん」

思わず声に出してしまった。

気まずくなるイートインの空間。

スマホから目を離し、ゆっくりと振り向く彼。

それがインターン生との、最初の邂逅だった... 

       終

       制作・著作

       ━━━━━

       Ⓗⓐⓣⓔⓝⓐ

実際、イートインにはid:jj1hgpが最初に座っていた記憶があります。特に何もなく互いにスマホいじってました。インターン生なら話しかけようと思い探ってましたが、何も分かりませんでした。いかがでしたか?

応募と面接

id:wtatsuruに面接していただきました。そこでは、ユーザーの多いtoCのサービスに携わる経験がしてみたいのでインターンを探してる等とお話した記憶があります。

応募課題で出されたrot13の実装を間違えていましたのを2週目くらいに気付きました :lol:

前半:講義パート

前半のゴールは、オリジナルのブログアプリを作ること。

 前半は午前中に講義を受け、て午後に講義と被っている分野の部分を実装していくという流れでした。実装するものは虫食いのテンプレートがあり、それを埋めていきつつオリジナリティを出していくことが求められます。

今回のアプリは初めての構成で、バックエンドからspaを配信してspaからgraphqlを叩くといった構成でした。普段はJWTばかり使っていて、サーバごと分けていたで最初は戸惑いました。spaの配信は、リソースも半分で済むし同一ドメインで済むの安全性も担保しやすいのかなと思いました。

EchoとReactは触ったことがあったので構成は把握しやすかったのですが、DataLoaderやapollo-chacheは初めてだったので結構ドキュメントを呼んでいました。

インターン生はペアになって、そこにメンターさんが付いてくれるという感じでした。ペアの相方はid:utgwkkで、メンターは id:side_tanaでした👏 飲んでる時のid:side_tanaのノリが好きでした。

id:side_tanaだけでなく様々な方々にデバッグを手伝っていただきました。みなさんデバッグがとても丁寧で、原因となるコードで呼ばれているものを順番に全部見ていくので、自分ではここは大丈夫だろうと思い確認しなかった部分が原因だったりして、自分の手抜きデバッグで煩わせてしまう申し訳なさでいっぱいでした!!!

原因っぽい部分だけじゃなく全てのコードを追っていくというデバッグは実際めんどくさいです。しかし同じコードを何十分も直しながらエラーと挌闘しがちな自分にとっては、とても大切だということを学ばせていただきました。

2週目に入ってくると成果発表会(ほたて)が話題になってきます。前半は意外とのんびり進みましたが、ほたては第2週目金曜日の午前からと当日に作業する時間がありません。のんびりやっていたら全然完成せず、午前5時くらいまでうとうとしながら作ってました。

発表に使った資料です。

https://speakerdeck.com/ergofriend/donya

『新しい法則ほしい!』『世界をみんなで作るというコンセプトが良いなと思いました』『最高の世界観』『いい世界!たくさん世界創造したい!』『神になりたい』『発想がすごい』『設定を考えるのが楽しいね』『きれい』『神になりたい!!!!!』『スコンブワールド作りたい』『神になる、発想がおもしろかった』『ハマると面白そうなツール。似たようなことはWikiに書き寄せてやっていたことがあります。』

以上のコメントを頂きました。ありがとうございます! 

ほたては2位でした!!人は神になりたい🎉🎉🎉 

追記

2週目にid:nmyカクヨムについて話をしてくださった講義がありました。自分がもともネット小説のへービーユーザーなのもあってカクヨムが出た当初も読みに行きましたが、興味を引く作品も数が少なくてすぐに訪れることもなくなってしまいました。最近は作品も増えてまた読むようになりました。そういった背景もあって、カクヨムの成長の裏側はとても面白かったです。

後半:チーム配属

ブログチームへ配属になりました。めでたい🎉🎉🎉

配属にあたって、Perlを使うであろうインターン生へ向けてPerlブートキャンプというのをid:motemenさんにやっていただきました。未だにコンテキストとはよく分かっておりません🙇‍♂️🙇‍♀️2週間雰囲気で書いてしまいました。反省しております。

ブログチームにはインターン生が2人配属され、相方はまたもid:utgwkkでした!メンターはid:hogashiが担当してくださり、コードの量がとても大きく全体像がなかなか掴めなかったのですが、その都度丁寧に教えていただきました。

 ブログチームでは、初日に2案からどちらを実装するかのmtgを行いました。そこでは、ブログの複数記事をまとめる機能が採用されましたが翌日、既存のもので代用可能なもの等との差別化などが難しい事から、此度リリースしたog:image自動生成の機能へ変更することに。

 普段、個人で作るときは作りたいものを作っていますがサービスを運営していると様々なことを考慮しなければならなく、大変だなとしみじみ思いました。 

開発はp-rを立ててやっつけていく感じでした。p-rがいくつも立つので、mergeの時はconflictが当たり前でした。隣でid:utgwkkがgitを使いこなしてて、つんよ〜と思いながら眺めてました。その後id:hogashiに丁寧に教えて頂きました!謝謝!

あと驚いたのが、commitの整理でした。コードを書く際、今までは多くても4人だったのでp-rのmerge単位くらいで戻せばよかったのですが、はてなブログくらい大きくなると整理されてると良いのだなと思いました。レビューとかも整理されてないと、大変なことになりそうなのでこれからは整理していくことにします!

無事リリースまで出来て、とても良い経験が出来ました。ありがとうございます!

staff.hatenablog.com

発表では、ユーザーさんの反応についてや実装した箇所についてお話させて頂きました。

ほたては1位でした!!貧相からリッチに🎉🎉🎉 

2位とも1票差くらいでアツアツでした🔥

日報

インターンでは、毎日終業後に日報を書くことなっている。講義があれば質問やその感想、後半では完了したタスクなども書いていた。最後の方は箇条書きで済ませてしまっていたこともあり、真剣に取り組めていなかった。そんな日報(雑)の最終回をブログに残します。

最終日 (9/13)

出社時間

10:20

退社時間

21:00

今日やったこと
  • 成果発表会
  • アンケート
  • 偉い人達と面談

成果発表は、練習よりもうまく喋れて良かった。旧サムネを罵倒してしまった。

面談では4週間を通して僕のインターンへの慣れ度合いなどがどうだったか等について聞かされ見守られていたことに、インターンを大切にされているのを実感できた。

id:hogashi, id:masawada, id:aikaw ご確認よろしくお願いいたします

↑最後にメンションして読んでくれってことを通知させます

謝辞

ブログチーム並びにはてなスタッフの皆様、2週間ありがとうございました!

最大の謝辞

id:cockscomb最大の謝辞をお贈りさせていただきます。

本当にありがとうございました!

終わりに

4週間、本当にあっという間でした。

僕は普段、web系のベンチャーでバイトをしています。そこでは全てのコードにレビューが入り細かく指摘が入るなんてことはありませんでしたし、実際のサービスの運用を体感したりと新しいことばかりでした。

 

20年の人生の中でも、とても濃い4週間だったと感じています。

おつ!

 

他のインターン記事

全体的に言語愛の強い人が多かった...個人的にプログラミングがツールに感じてしまう人間なのであまりこだわりはないですが、型は欲しい!低レイヤー強くなりたい...

furutsuki.hatenablog.com

utgwkk.hateblo.jp

lunastera.hatenablog.com

blondenamazu.hatenablog.com

10-1.hatenablog.com

tomato3713.hatenablog.com

noy.hatenablog.jp

Building the Corne Chocolate at the hotel.

ホテルで作る自作キーボード

サマーインターン中に、オフィスで触らせてもらって欲しくなった。

Twitterでよく見かけていた自作キーボードをやっていく

TL;DR

Corne Chocolate

yushakobo.jp

購入したもの

キーボード周り

遊舎工房さんで買いました。京都まで3日程で届きました。

商品 合計
Kailhロープロファイルスイッチ(10個) - 茶 × 5 ¥2,400
Corne Chocolate × 1 ¥12,800
TRRSケーブル 1m × 1 ¥300
Kailhロープロ無刻印キーキャップ1U(10個) - 黒 × 5 ¥1,500
USBケーブル Micro B 1m - 黒 × 1 ¥500
小計: ¥17,500
送料: 10,000円以上購入もしくはクーポンで送料無料
税: ¥1,400
決済方法: PayPal
合計金額: ¥18,900

道具類

自作キーボード界隈を見てると、自作が1回で済みそうにないのでしっかり道具を揃えることにしました。

レシートを受け取ってなかったので大体の値段です。 Amazonで買えば4000円くらい安くなったかも?

商品 合計
白光 FX-600 02 ¥6,500
ミニチュアラジオペンチ PS-01 ¥1,600
マイクロニッパー NS-04 ¥1,500
ピンセット PT-06 ¥1,000
精密プリント基板用はんだ SD-62 ¥350
はんだ吸取り線 CP-3015 ¥250
合計金額: ¥12,000

白光 FX-600 02ENGINEER 工具類
はんだごてと工具類

製作

参考にしたもの

github.com

ビルドログ

裏面にダイオードを取り付けた状態

f:id:ergofriend:20190909001610j:plain

マイコンとPCBソケットを取り付けた状態

f:id:ergofriend:20190909001623j:plain

一気に付けるためにキースイッチを枠にはめた状態

f:id:ergofriend:20190909001619j:plain

キースイッチを付けた状態

f:id:ergofriend:20190909001628j:plain

おわった状態

f:id:ergofriend:20190909001549j:plain

やり残し

インターン中は忙しいので、東京に戻ったらやろうと思う。

  • OLEDディスプレイがつかないので直す
  • LEDを取り付ける
  • かっこいいケーブル、キーキャップを探す

まとめ

組み立て自体は、久しぶりにはんだをしたので楽しかった。