読者です 読者をやめる 読者になる 読者になる

めるノート

へっぽこWebエンジニアが地団駄を踏んでいる日誌

Apple Watchを買ってみた

自分が買ったのはこれです。

f:id:c5meg1012:20170526133121p:plain

Apple Watch series 2 (38 mm)

www.apple.com

アルミニウムのスポーツタイプ、一番安いタイプです。

よかったこと

動いた量に気を使うようになった

「アクティビティ」という機能で「ムーブ」「エクササイズ」「スタンド」の量を毎日計測してくれます。
座り仕事なので、よく「そろそろスタンドの時間です!」と、一旦立つように通知が来ます。

ねこあつめ再開した

くっそかわええ。それだけ。

f:id:c5meg1012:20170526133125p:plain

操作はほとんどできないぽい?

駅locky

利用駅を登録しておくと、次の電車が来るまでの時間が分かるようになります。
せっかちなのでありがたい機能ですw

防水

いままで防水の時計にまったく興味なかったのですが、手を洗ったり、家事をするときに外さなくていいのが便利です。料理しながらsiriでタイマーできるのがとてもよいです。

macのロック自動解除

そんなに変わらないだろうと思ったんですが、仕事上、毎日何回もやることだからとてもラクになりました。

通知やタイマーが無音でリアルタイムに受け取れる

iPhoneにしてもガラケーにしても、着信音ありでもバイブにしても、まわりに音が聞こえちゃうのがすごく嫌なので無音バイブなしにしているのですが、それだと電話取れなかったり、メッセージに気づかなかったり、ということがあります。
Apple Watch は軽いバイブで通知してくれるのですが、腕につけているので基本音がしないんです。これが一番うれしい!

ビミョウなこと

おしゃれなベルトが高い

と思ったらメルカリに結構あったw

ゴツい

つけてる違和感というか、重みみたいなものはずっとありますね。。

それでも、損したな、と思ったことは今のところないです。
むしろ生き物みたいでかわいい。そんな感じです。
6月末まで、分割払い24回までは金利ゼロなので、みんな買えばいいと思うよ。

「情熱プログラマー ーソフトウェア開発者の幸せな生き方ー」を読んだ

f:id:c5meg1012:20170524001520j:plain

自分にとって目新しいことはそんなに書いてなかったのですが、2つほど印象に残った章があったので、メモがてら書きます。

「一番の下手くそでいよう」

ここに書いてあったこと、まるで自分のクラリネットのようでした。

作者の方もサックスプレイヤーだったそうで、上手い人に誘われて、上手い団体にどんどん入れてもらったら、自分も上手くなっていった、、というようなことが書いてありました。わたしもそうだったな。 なぜかお声がけをいただいて、うっかり参加したらみんな上手すぎて、ついていくぞー!と練習して…を繰り返していたら、ここまできました。 この辺の経歴はそのうちどこかで演奏動画と一緒にまとめて見られるようにしたいな、と考えています。

なんであれ、一緒にやる人のレベルってきっとすごく大事で、わたしはひとりではダメダメなやつなので、すごい人達に引っ張られていくのが一番成長への近道なんだと思います。他力本願だと言われることもありますが…。そう思って、今の会社にきました。まだまだエンジニアとしては「一番の下手くそ」です(´・ω・`)

「リーダーが自分の名前を知っているからといって自分の能力も理解されていると思っちゃいけない」

リーダーだけではなくて、周りの人に自分の能力をちゃんと伝えよう、ということでした。 たしかにそうで、優秀であることとそれが相手に伝わっていることは全く別の問題だし、相手が優秀であるからといって自分の力がどれくらいか分かるのかというと、そうでもないんだと思います。

アウトプットというのは、自分の能力を伝えるという意味もあるんだなぁ、と思いました。 よくよく考えれば当たり前のことなんですが、なんだか刺さりました。

Slackでちょっとだけたのしくなった話

五反田でお世話になっている@MiryGoAroundさんが、社内でSlack博士になっているというお話を以前に聞いたり、こういうエントリを書かれていたりしました。

mirygoaround.hatenablog.com

そのときは、
「まあ、弊社はみんなSlack詳しいから不要なんだろうな〜」
と思っていたのですが、その後、

「あの小さい絵文字のやつ(Reaction)、どうやってやるんですか?」

「途中で改行ってどうやってやるんですか? Enter押したら送信されちゃって…」

「アイコンってどうやって変えるんですか?」

と、言う声がちらほら。

わたしが参加していないchannel(営業さんやライターさんのchannel)を見ると、
ひたすら文字だけだったり、改行が全く無かったり…ちょ、怖いっす…

と、いうことで、
esaにSlackのちょっとしたことをまとめてみました。

  • Reactionのしかた
  • 絵文字のつかいかた
  • 途中で改行する方法
  • アイコンの変更方法

などなど。

f:id:c5meg1012:20170520004212p:plain:w400

f:id:c5meg1012:20170520004222p:plain:w400

こんな感じ。

基本的だけど非エンジニアにはちょっとハードルがあるらしい使い方を、
画像を使いながら簡単に書いておきました。

すると、不思議とSlackでの会話量が増えたり

f:id:c5meg1012:20170520004754p:plain:w150

Reactionも増えたり

f:id:c5meg1012:20170520004803p:plainf:id:c5meg1012:20170520004809p:plain

感謝されたり(笑)しましたw

f:id:c5meg1012:20170520004816p:plain:w400

なんというか、
「自分の知っていることはみんな知ってるんじゃないか」
と、いつも思っていたのですが(おそらく旦那さんがそうだからなんですが…)
意外とそうでもなくて、自分の知っていることを求めている人もいるんだな〜と思えてきて、 最近やっとアウトプットする意味や楽しさを、徐々に理解してきたところです。

LINE Bot や Amazon Dash Button で遊んでいた

ちょっと前に流行ったけど、余裕がなくて手を出せなかったので、今ごろになって遊びました。
だいぶ参考記事が出揃っていたので、やりやすかったです。

LINE Bot

f:id:c5meg1012:20170516221309p:plain

ゴールデンウィークに山手線沿いを内回りで、五反田から高田馬場まで歩いたのですが、そのときに@polidogがLINE Botで、2割の確率で電車が出るくじ引きを作りました。
コードも一通り見せてもらったのですが、なんか面白そうだったので、わたしもサーバルちゃんBotを作りたいと思ったのがきっかけです。

で、共有してもらったコードを参考にNode.jsで作ってたのですが、わたしNode.js使ったことなくて、そりゃ当たり前なんですが全然動きませんでした。
何回herokuにデプロイしても、herokuのlogを見た時点で503エラー。もうどうしたらいいかわからーん! と、ガチで凹みました。

翌日、普段から使っているRailsに切り替えることに。
メインで参考にしたのは

qiita.com

バグ修正で参考にしたのは

qiita.com

です。

基本、前者の記事のとおりに進めれば大丈夫なのですが、時々コメントアウト// コメントアウトになっているので、注意して適宜# コメントアウトに置き換えるか、消してしまうかしてください。

前者の記事のとおりに進めたら、$ git push heroku masterでデプロイに失敗すると思います。
Gemfilegem 'sqlite3'を削除して、

group :development do
  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0'
  gem 'sqlite3', '1.3.13'  # ココに追記

また、同じくGemfile

group :production do
  gem 'rails_12factor'
  gem 'pg'  # ココに追記
end

あとは$ bundle installした後に再度$ git push heroku masterします。 heroku logs -tで問題なくrailsが動いているようであれば、LINEの管理画面でwebhookのテストをした後、botを友だち登録して、声をかけてみましょう。
オウム返ししてくれると思います。

さくっと動かしたかったので、そのまま動かしてしまいましたが、いろんなSDKがあるので、こっちの方がコード見やすくなりそうだなーと思いました。
Node.jsちゃんと使えるようになったら、公式のSDKでもっかいやってみよ。

github.com

もちろんRubyもあった。

github.com

Amazon Dash Button

f:id:c5meg1012:20170516221337j:plain

こちらは比較的簡単でした。

Amazon Dash Button を購入し、以下を参考にしてセットアップをします。

qiita.com

あとは以下の通りです。

qiita.com

どちらも同じwifiの中でやらないとたぶんダメだと思います。

旦那が基本、玄関と違うフロアでヘッドホン付けながら仕事しているので、『ただいまボタン』にできるかなーと思ったのですが、サーバー置かないといけないし、だいぶタイムラグやブレがあったので、実用はきつそうだな、という所感でした。

kindleでJavaScriptを勉強した

f:id:c5meg1012:20170508193743j:plain

モダンでプレーンなJavaScriptを勉強した〜い!

ということで、kindleで2冊読みました。

どこでおすすめされたのか忘れてしまいましたが、思い出すためにググッてみると、やはり評判がよい感じですね。かゆいところに手が届くという感じです。

いままで分からなかったことがとてもわかりやすく書かれていたので、プレーンでなくてもモダンなJavaScriptを勉強/コードリーディングするときに、大いに知識が役立っています。

「何となくJavaScriptを書いていた人が一歩先に進むための本」では、半分近くが基礎的な文法のおさらいになってしまうのですが、その後にしっかり

の説明がされて、

  • プロトタイプ
  • ES6

についても、比較的サクッと説明されます。

「JavaScriptの理解を深めた人がさらにもう一歩先に進むための本」では、

  • “use strict” で変わること
  • いろんなthis
  • ES6におけるネイティブオブジェクト
  • イテレータ
  • 関数(巻き上げ、コンストラクタ、オーバーロード、getter/setter)
  • プロパティと属性
  • オブジェクトの制御
  • JavaScriptにおけるクラス

が書かれていました。

電子書籍でそんなにボリュームのある本でもないですし、こうやって挙げてみると軽そうに見えるのですが、いきなりオライリーとか読んだら挫折しそうな予感しかしなかったので、気軽に読めてレベル感の合う技術書があってよかったな、と思いました〜。

hamlで、シンボル(&:hoge)使ってねっていうエラーでハマった - Class: RuboCop::Cop::Style::SymbolProc

初歩的なことでちょっとだけハマったのでメモ。

Rails + haml の開発中

- cats.each do |cat|
    = cat.name

がrubocopでこけた。

Class: RuboCop::Cop::Style::SymbolProc — Documentation for rubocop (0.47.1)

(&:name)←こういうのがまだちょっと使いこなせてないので調べる。

qiita.com

なるほど。

まあとりあえず言われた通り直してみるか。

= cats.each(&:name)

f:id:c5meg1012:20170501172349p:plain:w300

オブジェクトになっちゃって想定通り出力できない。

= cats.map(&:name)

f:id:c5meg1012:20170501172358p:plain:w150

うーんちょっとちがう。

とりあえず、

- cats.each do |cat|
    %span= cat.name

で逃げてみた。

うーん、ゼッタイもっときれいになるよなぁ、と思ったんだけど、

= cats.map(&:name).join(" ")

joinすればよかったのでした。反省。

「はじめてのCSS設計 - フロントエンドエンジニアが教えるメンテナブルなCSS設計手法」を読み終えた

 

このツイートを見かけて、本屋に行って速攻お買い上げしました。

今月14日に出たばっかりだったんですね。

 

以前読んだ「Web制作者のためのCSS設計の教科書」よりも良かったなあと思ったのは、設計を活用する場面のイメージが具体的に書かれていたことです。逆に、手法とその名前・定義を明確に知りたいなら「Web制作者のためのCSS設計の教科書」の方がいいかなと思いました。

 

part1の、継承やカスケードについての説明は、今まで読んだ本の中で一番分かりやすかったです。
実践編であるpart4は、結構長い上にプラスアルファの応用もそこそこあったので、結構読むのがしんどかった印象。自分がまだ理解しきれていないだけかもしれないけれど。
SVGアイコンとグリッドシステムについてが難しくて、、、誰か詳しい人、教えてください。。

 

flexboxについては一番最後に詳しく説明がありました。flexbox使うときに引きながらやったら捗りそうな感じでした。
流れの早いフロントエンド界隈なので、タイムリーな本が出版されるのは、非常に貴重でありがたいです。

 

f:id:c5meg1012:20170320182557j:plain

 

せっかくなので、同シリーズの「HTML5/CSS3 モダンコーディング」もAmazonでポチりました。今の会社に入ったときに借りれるチャンスはあったのですが、そのときはRubyRailsのお作法を覚えるほうが急務だったのでお断りしてしまっていたのでした。早く届かないかな〜。

 

初心者がUI・UXまわりのデザインについて勉強するのに役立ちそうなものまとめ

めるです。

f:id:c5meg1012:20170310194856j:plain

最近、コード書いてばっかりもいられないので、UI・UXまわりのデザインについて勉強しています。

 

こちらでも、UI担当と紹介されています。汗

blog.rista.jp

 

まず、もくもく寺さんのSlack(参加自由)で紹介があったのがこちら。

f:id:c5meg1012:20170310191924p:plain

Amazonはこちら。

デザイン入門教室[ 特別講義 ]

 

また、五反田ともだちの@ymrlさんにも聞いてみました。

f:id:c5meg1012:20170310192823p:plain

ということで、早速お買い上げしました。

誰のためのデザイン? 増補・改訂版 ―認知科学者のデザイン原論 

ノンデザイナーズ・デザインブック [第4版] 

それから、

Googleのガイドライン(マテリアルデザイン)

Appleのガイドライン

のほうは、いま読んでる途中です。

 

そして、お買い上げした翌日に会社で@mikedaさんから「あげる」と渡されたのが

デザイニング・インターフェース

ですが、こちらは古いので、4章のページレイアウト、5章のリスト、10章のモバイルのところだけ読みました。他に読むべきところがあったら教えてください。

 

同じタイミングで「◯◯◯◯◯◯社のときに読めって言われた」と渡されたのが

スマートフォンサイト設計入門
こちらはスマートフォンに絞った話なので、とても実践的でした。

そして、今日会社で@dim0627さんから貸していただいたのが

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉

こちらは読むのがとても楽しくて、お昼休みに一気読みしちゃいました。

今月お財布がピンチなので、お給料が入ったら自分用に買おうと思います。

 

ノンデザイナーズ・デザインブック [第4版] に関しては、会社のエンジニアみんなでそれぞれ買って、勉強会をすることになりました(`・ω・´)

 

そういえばIT業界にきた当初は、デザイナーになりたかったんだってことを思い出しました。UI / UX頑張ります〜。

Wordpressのおもひで

今日は久しぶりにWordpressのオリジナルテーマ構築作業をしていました。

Wordpressには前職でお世話になったのですが、当時、受託開発のコーダー・デザイナーとしてある程度こなしたあたり(半年くらい)で、ふと感じたことがありました。

わたしが静的な状態で作ったWordpressのテーマは、エンジニアに引き渡され、動的な部分の開発に入ります。
その開発が終わると、かなりの確率で表示崩れを起こして、ディレクターがわたしのもとへ差し戻しにくるのでした。
エンジニアとの引き継ぎを一生懸命したり、コメントをたくさん書いたりしても、改善される様子がなかったのです。

「(クソコードであれ)曲がりなりにもピクセル単位で厳密にコーディングしたHTML/CSSが、いったいどうして、エンジニアによってぶっ壊されてしまうのだろうか」

それがエンジニアに対しての最初の疑問、そして関心でした。

もちろん、この現象にはエンジニアだけでなく、ディレクターや、動的出力に対して想像力が足りなかったうえにクソコードを書いた自分にも原因があったのですが。

要するに、このへんの確認ができていなかったんですね。

qiita.com

で、エンジニアになってしみじみ思うのは、よく言われているとおり、隣の技術を知ることがとても大事だということです。

だって、上記のエンジニアがCSS書ければ差し戻しは必要なかったわけですから!(根に持っているだけ)

いま自分が何のエンジニアなのかはよくわかりませんが、仮にフロントエンドだとすると、デザインやサーバーサイドの勉強をしておくことが非常に大事です。というか、今の会社はまだ規模が小さいので、そのへんのことは普通に境目なくやります

専門性が大事なのもわかりますが、ひとりでフルスタックなときに限らず、チームでやるときこそ、視野を広く持つことが大事だよなあ、と思う今日このごろでした。

 

写真は小田原のフラワーガーデンの建物内に販売していた「モスボールくん」

f:id:c5meg1012:20170302002341j:plain

Web制作会社から自社サービス会社に転職して4ヶ月くらい経った話

こんばんは。めるです。

転職したてホヤホヤでもない中途半端な時期ではありますが、ようやく慣れてきたなぁという感覚が持てたので、ここらで表題の件について書いてみようと思います。

Web制作会社でやっていたこと

HTML/CSSマークアップjQueryの実装

数ページ〜300ページまで手広くやっていました。
自分が実装するマークアップに関しては、ページ数に関係なく、ほぼ協業なしでした。

Wordpressテーマ作成

最初はテーマ化だけしていましたが、最終的にはカスタムフィールド周りも出力までやってました。

オフショアコーディング(ベトナム)のディレクション

ディレクションと言っても決まったルールができていたので、英語が必要だったのは補足説明程度でした。実際にベトナムにご挨拶へも行きました。

jQuery屋さん

CSS3と合わせ技でインタラクティブなツールを作ることもあったし、ちょっと入り組んだGAイベントの仕込みなどもしていました。

Laravel実装

フロントエンド〜Viewのサーバーサイドまで。システム部だけ一時的に会社として独立していたときのお仕事でした。

EC-CUBE実装

2も3もやりました。こちらもフロントエンド〜View。プライベートでSymfony本を読む機会があったので助かりました。

転職したきっかけ

おそろしいくらい優しい人たちに囲まれていたのですが、技術的に社内での天井が見えてしまったことが一番大きいです。
あとは受託制作だと納期がタイトだったり、自分が作ったサイトに関する最終決定権が自社にないので、ちゃんとサービスにコミットしたいなあ、と思ったのもありました。
当時、残業でつらくなることは半年に一回くらいでした。ああいう業界にしては少なかったと思います。

いまやっていること

CSS芸人

最初はSassさえも戦々恐々としていましたが、おそらく現在のサービスのCSSのうち90%くらいは触ってます。書くだけならたぶん早い/デザインに忠実なのですが、設計がまだ身についていないので、そのあたりはレビューされながら勉強中です。

CoffeeScript

いま?なんてヤジが飛んできそうですが。そもそもオブジェクトとして書くのに慣れてなかったので...(汗)いつかリプレースするのが夢です。

Ruby on Rails実装

基本的な部分であれば触ってます。ネストなどで構造上難易度高そうなところは都度相談しながら実装したり、おまかせしちゃったりしています。

UI改善ディレクション

最近はこちらに時間を使うことが増えてきました。
まだ技術的な部分に自信がないので歯切れの悪いことしか言えない傾向があるのですが、もうちょっとちゃんとしよう!と頑張っています。

変わったこと

エンジニアの基礎力が身についた

初期はRailsでがっつりペアプロをし、現在もしっかりコードレビューがあるので、めちゃくちゃ苦手意識のあったサーバーサイドも、そこそこマシになりました。
CSSの設計を通してWebコンポーネントの概念がだいぶ理解できたので、個人的に勉強しているJSフレームワークの勉強にもとても役立っています。

まとめ

そういうことで、ちょっとずつできることが増えてきました。
ただ、今のところはひとつのサービスだけを触っているので、感覚が鈍らないように個人的な勉強や個人プロジェクトもやったりしています。
めずらしいことにエンジニアが全員朝型で残業なしなので、助かっています。

 

↓よかったらぜひおいでください!

www.wantedly.com