もやぶろ

moyashidaisukeのブログだからもやぶろ。フリーランスのエンジニアのダイスケです。QOLあげて色々楽しくチャレンジして良く生きたい。プログラム関連とかギター関連とか旅行関連とか色々。

ブログのテーマ（見た目）を変えた

雑記 雑記-はてなブログ 雑記-ポエム/日記

デフォルトの真っ白のやつを使ってたんだけど、味気ないのに飽きてきたので変えました。 新学期ですしね。

使ったテーマはこちらです。

Material - テーマ ストア

公式の案内に従ってちょっとカスタマイズしています。 webgaku.hateblo.jp

  • もともとサイドバーに色々要素いれてたので、2カラムに
  • PCで余白ありすぎてメインの文章見にくかったので幅広げる
  • レスポンシブに（スマホでもそれっぽく）

できたCSSはこちら

/* <system section="theme" selected="8454420450093337097"> */
@import url("https://blog.hatena.ne.jp/-/theme/8454420450093337097.css");
/* </system> */


/* 2カラムレイアウト */
#container #content {
  width: 1160px;
}
#main {
  width: 800px;
  float: left;
}
#box2 {
  width: 300px;
  padding: 24px;
  float: right;
  margin-top: 0;
  margin-bottom: 60px;
  background-color: #fff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 2px;
  -webkit-animation-duration: 0.4s;
  -webkit-animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: slideRight;
  -webkit-animation-name: slideRight;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
@-webkit-keyframes slideRight {
  0% {
    -webkit-transform: translateX(6.25em);
    transform: translateX(6.25em);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slideRight {
  0% {
    -webkit-transform: translateX(6.25em);
    transform: translateX(6.25em);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
#box2-inner {
  width: auto;
}
.hatena-module {
  text-align: left;
  padding-right: 0;
  width: 300px;
  float: left;
}
@media (max-width: 1024px) {
  #container #content {
    width: 95%;
  }
  #main, #box2, .hatena-module {
    width: 100%;
    float: none;
  }
  #box2 {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    border-radius: initial;
    -webkit-animation-duration: initial;
    -webkit-animation-duration: initial;
    -webkit-animation-fill-mode: none;
    -webkit-animation-fill-mode: none;
    -webkit-animation-name: initial;
    -webkit-animation-name: initial;
    -webkit-animation-timing-function: initial;
    -webkit-animation-timing-function: initial;
  }
}

/* Responsive: yes */

【Laravel】【PHP】LaraLab vol.2に参加してきた

エンジニアリング エンジニアリング-勉強会 エンジニアリング-サーバサイド エンジニアリング-サーバサイド-Laravel エンジニアリング-サーバサイド-PHP

ちょっと前の話ですが、2018/03/15にLaravelの勉強会 LaraLab vol.2 に参加してきました。 https://laralab.connpass.com/event/81111/#feed

当日18時くらいに、早く仕事終わりそうだな〜、なんかないかな〜とconnpass眺めてたらLT枠が空いてたので、主催者さんに連絡してLT枠で急遽参加させてもらいました。

当日のスライドはこちら。

speakerdeck.com

懇親会で質問されたのですがうまく答えられなかったので、もっと深掘りして良い感じにまとめたいところ。

【書評】WEB+DB PRESS Vol.103 書評。テックリードについて＋＠

書評

テックリード

最近地味に流行ってきてるのを感じる。

テックリードとは的な

medium.com

d.hatena.ne.jp

テックリード＠日本

gunosiru.gunosy.co.jp

blog.kentarok.org

似てる言葉、隣の言葉

自分なりの解釈です。

CTO

最高技術責任者。会社の役員（CEOとかCFOとか）。 エンジニア部門という組織としてのトップ。ばりばりのエンジニア出身の人がなる場合もあるし、マネージメントが得意な人もいるし色々。ベンチャーだと、創業メンバーのエンジニアの人がやってる場合が多いイメージ。

エンジニアとしてのトップ的な意味合いもあるし、組織的なトップとしての意味が混ざっていて人によってイメージする仕事が違う、、、

VPoE

エンジニア部門トップの役割が広すぎるので、分割しようねという事で、ある程度組織が大きくなるとCTOとVPoEの2トップ体制にするのが最近の主流。

http://hrnabi.com/2017/06/29/14500/hrnabi.com

tech venture business » 役職の謎：CTO vs. VP of Engineering

developers.cyberagent.co.jp

CTOとVPoEで分担する場合、技術面を見るのがCTO、組織面を見るのがVPoE。

プロダクトマネージャー

CTO、VPoEが組織から見た役割なのに対し、以下はサービス開発における役割（テックリードもサービス開発における役割）。PMと言った時に、プロジェクトマネージャーを指している場合があるので、注意。及川卓也さん。 エンジニアじゃないんだけど、エンジニアに対する理解が必要。

「自らを実験台として新たなキャリアを切り拓け」 及川卓也氏が贈るアラサーエンジニア進化論 - エンジニアtype | 転職type

エンジニアマネージャー

これも人によって意味合いがすごく違う言葉。エンジニアのキャリアパスとして捉えられる事もあるし（エンジニアとして一人前になった人が次に目指す枠が会社としてこれしかない）、VPoEとCTOのように、テックリードとエンジニアマネージャーとして責任を分担する場合もある。 エンジニアがマネージャーになりたくない、という場合は前者が多いと思う。

リードエンジニア

テックリードという名称が無い場合、テックリード的な事をする人の事を指している事が多い。単純にチーム内のエンジニアに序列をつけて、エンジニアの中ですごい人を指すことも多い（特に具体的な役割があるわけではない）。

ITアーキテクト

SIer的文脈で語られる。技術的な立場で超上流からプロジェクトを推進する人。WEB系ではあまり使わない。技術の選定とか、テックリードとかぶる役割もあるけど、ビジネスモデルが全然違うので違う世界と考えといた方が良さそう。

所感もろもろ

最近の仕事はもっぱらテックリード。組織的にはマネージャーなんだけど部下はいないので、言語やFWの選定、CIやブランチ運用等の開発体制、レビュー、見積もりなどなど。 組織も大きくないのでコードを書く時間はまだあるけど、環境を整えれば整えるほど減っていく、、、

エンジニアマネージャーとかリードエンジニアと名乗るよりも、具体的な仕事内容が近しいので今後は「テックリードやってます」と言う事にします。

ちょっと前まではキャリアパスとして、マネージャーになるかギークになるかの2択みたいに語られていたのが、ちゃんと名前がついて（＝仕事内容が認知されている）、エンジニアが成長して評価される下地が整ってきたと思います。マネージャーと対等だよ、という扱いも正当だと思います。

脆弱性の見つけ方＆ふさぎ方

たいへん良い特集。ここまで実践的な内容は見たことないので、エンジニアの研修題材として良さそう。

事業を支えるPHP

PHPの配列で値渡しの件は間違ってると思うので後で確認（値が変更されるタイミングでコピーされたはず）。 tanakahisateru.hatenablog.jp

2018/03/21追記 書きました。

qiita.com

【書評】ソフトウェアデザイン 2018年3月号

書評

及川さんの連載が相変わらず面白かった。書籍化されないかな。

後で調べたメモ

4マス

https://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%B9%E3%82%B3%E3%83%9F%E5%9B%9B%E5%AA%92%E4%BD%93

マスコミ四媒体 - Wikipedia

web担当者なら知っておきたい！４マス広告の特徴とインターネット広告との違い | アクシス集客ブログ

ネットだけの世界にいるとあまり意識しないですが、マーケ的には一般用語っぽいですね。

ポランニーのパラドックス

blogs.itmedia.co.jp

https://www.rieti.go.jp/jp/papers/contribution/tsuru/29.html

books.google.co.jp

LIFE SHIFTで言及されてたり、最近ちょっと流行ってる言葉になりつつあるっぽい。

共感マップ（ビジネスモデルジェネレーション）

https://www.amazon.co.jp/%E3%83%93%E3%82%B8%E3%83%8D%E3%82%B9%E3%83%A2%E3%83%87%E3%83%AB%E3%83%BB%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3-%E3%83%93%E3%82%B8%E3%83%8D%E3%82%B9%E3%83%A2%E3%83%87%E3%83%AB%E8%A8%AD%E8%A8%88%E6%9B%B8-%E3%82%A2%E3%83%AC%E3%83%83%E3%82%AF%E3%82%B9%E3%83%BB%E3%82%AA%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%AF%E3%83%AB%E3%83%80%E3%83%BC/dp/4798122971

次世代のビジネスを描く「ビジネスモデル・ジェネレーション」 【前編】考え方とツールの効用 (1/3)：EnterpriseZine（エンタープライズジン）

最近はビジネス寄りの勉強をしたいな〜と思ってるのだけど、昔気になって忘れてた本でした、、、今こそ読むべきか

JSFiddle

Create a new fiddle - JSFiddle

paiza.hatenablog.com

お好みでいいんじゃないでしょうか

WDF

WDF - Software : ブックマークレット作成スクリプト 地味に便利

AWSでKubernetes

qiita.com 全然わからない、、、 自分がすぐに実践で使える感じにはならなさそうなので、ちょいちょい勉強が必要な感じかな〜

Basis Point（五反田）に行ってみた

フリーランス/ノマド フリーランス/ノマド-コワーキングスペース

シェアオフィス、コワーキングスペースのBasis Point（五反田）に行ってきました。 気がついたら五反田のコワーキングスペース増えてるみたいです。

五反田店 | Basis Point（ベーシスポイント）

日曜日の昼〜夜までいましたが、けっこう空きがあって、過ごす側としては快適でした。

良い所

  • 写真の通り、落ち着いた雰囲気でカフェみたい
  • 綺麗
  • 食べ物持ち込みOK
  • コーヒーが豆から挽くコーヒーマシンで美味しい
  • 周りにお店が多い

微妙なところ

  • ドロップインで一日だと¥2000でちょっとお高め
  • フリードリンクが最低限
  • コーヒーが有料（¥50）
  • 椅子が硬いので長時間の作業には向かない

会議室もあるので、ちょっとした打ち合わせ使いにも良いかもです。

スマホのキャリアを乗り換えるために色々調べてOCNモバイルONEにした話

QOL向上 QOL向上-お買い物

けっこう時間かけて調べたので備忘録。同じように検討中の方にもご参考になれば。

まとめ

OCNモバイルONEでHUAWAY nova lite2 と同時購入しました。

現契約

  • ymobile
  • 月5000円くらい
    • 端末代の24回払い月1725円 - 1500円 = 225円
    • 通信料4980円 - 1000円 = 3980円
    • オプション 690円
    • データ通信量は6GBまで
  • 2018/03だとちょうど2年縛りが終わって解約手数料諸々が掛からない
  • 今使ってる端末はHuaway 503HW（P8liteと同じらしい）
    • p10liteが出てるので2世代前の格安端末
    • スペック的には限界、というか色々まともに動かない
    • ポケモンGOが動かなくて悲しい思いをした
    • ストレージ16GBは足りない

当初考えてた要件

  • 2年の分割払い終わったので機種変をしたい
    • Androidのそんなに高くないやつでまあまあのスペックのやつ
  • データ通信量は今と同じで十分
    • 仕事でゲームしなくなったので、そんなに使わない
    • SNSもあまりしなくなった
  • 電話はほとんどしないが、無くす事はできない
  • 通信料は最近の格安SIMと比べてると割高に感じる（大手キャリアよりはましだけど）
  • 2年縛りはけっこう長い
    • 格安SIMにしたかったけど解約料かかるから半年くらい待った
  • 計算面倒だから端末は一括で払いたい

色々調べた軌跡

格安SIMの比較サイトを眺める

mobareco.jp

結論：よくわからなかった

通信料

使い方的には現行6GBで、どのSIMも提供している。 差があっても数100円、200円の差なので誤差。

速度

使ってみないとわからないけど、リスクとして認識するべきと頭の隅にインプット。

縛り期間

速度のリスクもあるし、短い方が良さそう。

キャンペーンの比較サイトを眺める

【2020年1月】格安SIMのキャンペーン24社比較！乗り換え・端末セットがお得

www.simfree-kakuyasu.net

結論：端末に対するキャンペーンで選ぼう

各SIMで色々キャンペーンがありますが、 今回の要件だと端末の割引が割引額が大きそう。

さらに、以下の条件でさらに絞り込めそう。

  • 長期契約を前提としたものは除外
    • 楽天のキャッシュバックとか
    • UQMobileの分割割とか

欲しい端末を比較

smappy-if.com www.simfree-kakuyasu.net

結論：Huawayのnova lite2 にした

各SIMで割引の対象となっている端末に差がありそうなので、まずは端末を決めて、絞り込んでいく作戦に。 コスパと、最新である事でnova lite2に。p10 liteでも十分そうだったけど。

端末から改めてキャンペーンを比較

simseller.goo.ne.jp

結論：OCN モバイル ONEが圧倒的安さ。 8800円 - 3000円 = 5800円（税抜き）で端末が買える。 決定！

料金まとめ

移行にかかった額

内容 料金 備考
転出料金 3000円（税抜き） ocnに払うやつ
事務手数料 3000円（税抜き） ocnに払うやつ
3月分のymobile 3980円 日割できないので
合計 10000円くらい 消費税は適当

月毎の使用量

3980円->2000円くらい。 月毎に2000円お得。

まとめ

5ヶ月使うと、移行にかかった額の元がとれて、以降は月2000円浮く計算。 5800円で最新端末もゲットできた。

思ったこと

各サービスの料金体系、キャンペーンが複雑すぎて、全然わからない。 総務省が大手キャリアに「わかりにくいからなんとかしろ」と言って是正しようとしてるみたいですが、格安SIMの方が戦国時代すぎて、自分なりに調べて基準を決められる人じゃないと全く選べません、、、

価格競争だけじゃなくて、わかりやすさを出してかないと、一部のリテラシー高いユーザー以外からは選ばれないんじゃないかなぁ、、、

まあ、それでもどの会社を選んでも大手キャリアよりは絶対安くなると思います。（満足するとは言っていない）

Meguro.es #13 @ ラクスル に参加した

エンジニアリング エンジニアリング-勉強会 エンジニアリング-クライアントサイド エンジニアリング-クライアントサイド-JavaScript

なんとか時間が取れたので参加してきました。

meguroes.connpass.com

当日の18:00に確認したら発表枠が1個だけあいていたので、慌てて管理者に直接連絡したら（commpassからの参加は締め切られていた）、速攻でOKの連絡いただいて、1時間で資料作って発表してきました。（勤務地は五反田なので移動は15分くらい）

speakerdeck.com

Meguro.es というかjs界隈の勉強会は何気に初でした。

感想

  • 参加者が若かった
  • ラクスルさんのオフィス綺麗すぎ、広すぎすごい
  • 参加費無料なのに🍺と🍕がついてきてラクスルさん神
  • typescriptってけっこう使ってる人多いんだなぁ

また参加させていただきます。ありがとうございました。

会社の忘年会兼クリスマス会

雑記 雑記-ポエム/日記

クイズの賞品でもらった。

f:id:moyashidaisuke:20171223133529j:plain

今働いているみんれびは3社目で、1社目2社目に比べるとエンジニアはけっこう少なくて、マーケとか営業の割合が多い。 エンジニアと営業って、やっぱり雰囲気が全然違うな～、すごいなーといつも思う。自分は知らない人と話すのはすごく精神力を使うので絶対無理と思いつつ、社外と調整するのは一般的なビジネススキルの一つでもあるので、避けては通れない、、、

ゼス崩壊オープニング ギター 弾いてみた の所感

雑記 雑記-音楽

www.youtube.com

先日のライブで弾いた曲を1曲動画にした。

  • BPM170は速い
  • アップピッキングが弱いのでリズムが不安定になっている、、、
  • ライトハンドも普段やらないのでリズムが不安定になっている、、、

疾走感のあるかっちょいい曲でした。

wordpressのビジュアルエディタを本物に見た目あわせる

エンジニアリング エンジニアリング-wordpress エンジニアリング-クライアントサイド エンジニアリング-クライアントサイド-css

bge.jp

ぐぐるといくつか記事が出てくるのだけど、この方法が一番良いと思う。

基本、どれも専用のcssを用意して、functions.phpで読み込ませよう、なんだけど、 次の工程が元のcssをコピペしよう、となっているのがwordpress界隈の闇。

元のcss変える度にコピペしないといけないじゃん、、、、

本番（実際にユーザーに見える画面）で@import使うと悪影響があるけど、これは管理画面用途なので気にせずOK。

dev.classmethod.jp

CloudFormationでRDS:DBParameterGroup で名前が指定できない

エンジニアリング エンジニアリング-インフラ エンジニアリング-インフラ-AWS

docs.aws.amazon.com

ありません。 Descriptionを駆使するしかない。GUIからは（コンソールで手動で作った場合）は指定できるのに、CloudFormationからだと指定できないの、何でだろう、、、

20171216社畜王ランスインスト事業部 ライブ

雑記 雑記-音楽

ライブでしたー。 このバンドのライブも確か4回目。今回はインスト縛り。

  1. ゼス崩壊 / RanceVI -ゼス崩壊-
  2. Diving into the dungeon / ぱすてるチャイムContinue
  3. 大メドレー
    • 自由と平等と正義と / 大帝国
    • 大悪司改 エデン / 大悪司
    • Take me to the another world / 大番長
  4. courageous survivor / ももいろガーディアン
  5. Carried Out / 妻しぼり
  6. 456メドレー
    • Atlach=Nacha ～going on～ / Atlach=Nacha
    • 人間狩り track8
    • 零式 track6 (通称:戦闘)
    • Type Zero / Alice Sound Collection III
  7. 久遠の果て / 超昂閃忍ハルカ
  8. My glorious days / Alice Sound Collection VII

いつものブラック会社採用写真風写真 f:id:moyashidaisuke:20171217233052j:plain

ギターの弦の遍歴

雑記 雑記-音楽

使っているギターの弦と過去の弦の話とか

今使ってるやつ

www.soundhouse.co.jp

後述のNANOWEBを前使っていたが、こちらの方がよりナチュラル（コーティングされてる感が少ない）で素直な印象。 コーティング弦で長持ちなのにギラギラ感がちゃんとある。その分、ヘタってきた時の音の違いがはっきりわかる。

太さはここ10年くらい10-46。太い方が音的に好きなんだけど、これ以上太いと弾けないのでこれくらいで。

過去の

www.soundhouse.co.jp

3年くらいこれだった。ギラギラ感が少なくて落ち着いた音になるけど、アンプとかの音作りでカバーできる範囲。 社会人になって、時間を有効に使う必要性が高まり、弦交換する時間をギター弾く時間にあてるために乗り換えた。最初は高く感じるが、弦交換にかける時間を考えればこちらの方が安い（社会人的発想）。社会人は時間をお金で買うのだ。 今剛さんとか、1曲で替えるみたいな話もあるけど、アマチュアにはそんなの無理なので、効率よく時間を使おう。

www.soundhouse.co.jp

5年くらいこれだった。張り替えた直後の音が好きだったけど、すぐへたる。比較的安かったのでずっとこれだった。

コードを書くのが速い人/遅い人 その1：ログの読み方

エンジニアリング 雑記 雑記-ポエム/日記

ペアプロっぽい感じで一緒にデバッグする機会で得た知見の話。
完全に個人的見解だし、まとまってないポエム的なものなのでQiitaじゃなくてこっちに書いておく。


ある程度の実力と経験値があるエンジニアなら、問題解決の型をもっていて、新しい言語なりFWなりに触る時に早くキャッチアップできる力になっていると思う。
そういった型に対する考察。

何か開発しててうまく動かないときの追い方

自分の場合、大体以下の通り。

  1. エラーが発生する
  2. ログを確認する
  3. 複数箇所、複数行にまたがっているログから本質的なものを探し出す
  4. ログを元に、コードを確認するなり、エラーコード、エラーメッセージを調べるなりして対応する（ケースバイケース）

この3が苦手な人が多い印象。

StackTraceとかだと長々としたログが出ているが、大体一番下か一番上にエラーの内容が書いてある。（複数行のパターン）
この勘所がないと、長いログを上から下まで読んで、よくわからない、という結論になってしまいがち。

また、ブラウザからAjaxを叩く系の処理だと、本当はサーバ側でエラーが出ているのに、ブラウザのエラーを永遠と解析しようしていたりする。（複数箇所のパターン）


で、普段からログを読んで問題解決していく癖が無い人が書いたコードは、エラー時の情報が少ない事がよくある。

try (
// 何か処理
} catch (Exception $e) {
   error_log("失敗しました");
}

みたいなコード。黙ってExceptionをそのまま投げてくれればいいのに、、、、