Baby steps to migratory bird

元半導体系エンジニア、今Webエンジニアの雑記

【LTしてきた】WEBエンジニア勉強会 #08

タイトルどおりLTしてきたのでそのまとめ

8回目のWEBエンジニア勉強会に参加してきた。会場はアクアミーティングスペース渋谷

今回もテーマを決める前に勢いで5分枠に申し込んだ。LT駆動開発

web-engineer-meetup.connpass.com

発表について

www.slideshare.net

今回のテーマはGoogle Apps Script(GAS)とSlackの連携アプリ

最近仕事で業務知識について答えてくれるBotが欲しいな、ともんやり思っていたので、 週末にまず遊びで作ってみたものをまとめて発表した。

デモ

今回のLTでは初めてデモに挑戦してみた。 著作権的なアレがあるためアップロードスライドからは抜いたけど、 ポケモンのイーブイネタでSlackbotの動きをみせた。

今回はあらかじめ下のようなスプレッドシートを用意した。

f:id:roo_oregon:20180728151759p:plain

デモした画面をそのまんまキャプチャ

f:id:roo_oregon:20180728153823p:plain

デモではSlackの投稿を利用した「一覧表示」「説明取得」だけみせたけど、実は「登録」もできたりする。

f:id:roo_oregon:20180728154320p:plain

GASのソースコード

後で載せる予定

実装中あるある

  • トリガーワードを登録し忘れて反応がなく焦る
  • Slackへの投稿にトリガーワードを入れてしまい無限ループ
  • リンクを含めた投稿にサムネイルが表示されない→参考

みなさんの発表

ハッシュタグがメモ代わり #webエンジニア勉強会08 hashtag on Twitter

あとはいつも通りOSCAさんブログの勉強会レポートで!

すでにレポート書かれた方がいて、今回の感想を書いていただいてた。ありがとうございます!

blessed-rain.com

まとめ

発表やると打ち上げのビールがうまい(・∀・)

参考

@zuckey_17さんのブログ

これを読めば速攻で最初のアプリ作成までいけるので、まずは作ってあとで自分色に染めましょう

Google Apps Scriptを利用したSlack Bot作成の" Hello, World!! " Google Spreadsheet + Google Apps Script で Slack KPT Botを作ってみた

初心者がGASでSlack Botをつくってみた

おまけ

はてなブログのアイキャッチ設定とTwitterへの更新反映

アイキャッチ画像(記事のサムネイル) - はてなブログ ヘルプ

https://cards-dev.twitter.com/validator

PHPer目線のRailsチュートリアル学習メモ#2

#1はコチラ

続けて雑に書いていく

ソースコードはチュートリアルから引用

DBまわり

ORMについて
  • RailsではActive Recordを採用している。
  • Active RecordのオーナーはPostgreSQLに対するメンテは熱心だが、MySQLに対して冷たい(kamipoさんがMySQLのために日夜コミットされている。感謝)

  • CakePHPではEntityがあったがRailsではどうか?

  • LaravelのORMはEloquent
ほか
  • Controller名は複数形、Model名は単数形になるのはCakePHPと同じ
  • 同じくマイグレーションもある (そもそもRails->CakePHPだけど)
  • グヮッ https://youtu.be/2Ag8l-wq5qk
7.1.2 Userリソース

https://railstutorial.jp/chapters/sign_up?version=5.1#sec-a_users_resource

例えばUserモデルを作成済の場合、routes.rbにresourcesを記述するだけで、RESTfulなリソースに必要なアクションを利用できるようなる。

config/routes.rb

.
.
.
resources :users

Railsのルーティングについてはコチラ

7.1.3 debuggerメソッド

https://railstutorial.jp/chapters/sign_up?version=5.1#sec-debugger

byebug gemを入れるとdebuggerメソッドを使い直接的なデバッグを遂行できる。

例えば下記のように書いて/users/show/:idにアクセスすると、debuggerが差し込まれた時点での状態を確認することができる。

class UsersController < ApplicationController

  def show
    @user = User.find(params[:id])
    debugger // ココ
  end

  def new
  end
end

例えば下記のようにdebugger時点でのuserが持つ属性を確認することができる。

@Railsサーバを立ち上げたターミナルのbyebugプロンプト上

(byebug) @user.name
"Example User"
(byebug) @user.email
"example@railstutorial.org"
(byebug) params[:id]
"1"
  • CakePHPだとDebug Kit - 3.6はあったけど、debuggerは用意されてないはず(IDE使えばできるけど。PhpStorm + Xdebugとか)

PHPer目線のRailsチュートリアル学習メモ#1

雑に書き残す。

下記、コードはRailsチュートリアルから引用

自分のバックグラウンド

プログラミング歴約1年、フレームワーク歴はCakePHP半年ほど

Rubyはすべてオブジェクト

って書いてあるけどメソッドは違うらしい。

言語の歴史的経緯として下記の違いがある。

  • Rubyは端から純粋なオブジェクト指向を目指して作られている
  • PHPは後からオブジェクト指向に対応

記述を短縮できるところはガンガンやっていき

4.3.2 ブロック

https://railstutorial.jp/chapters/rails_flavored_ruby?version=5.1#sec-blocks

symbol-to-proc記法

>> %w[A B C].map { |char| char.downcase }
=> ["a", "b", "c"]
>> %w[A B C].map(&:downcase)
=> ["a", "b", "c"]
4.3.3 ハッシュとシンボル

https://railstutorial.jp/chapters/rails_flavored_ruby?version=5.1#sec-hashes_and_symbols

  • ハッシュはPHPでいうと連想配列のこと
  • ハッシュのキーを次のような形式でかける(シンボルという)
  • Rubyではハッシュのキーは文字列よりシンボルを使うのが一般的

例えばuserというハッシュを作る場合、

これが

user = { "name" => "Taro Yamada", "email" => "aaa@aaa.com" }

こうなって、

user = { :name => "Taro Yamada", :email => "aaa@aaa.com" }

こうなる。

user = { name: "Taro Yamada", email: "aaa@aaa.com" }
4.4.5 ユーザークラス

https://railstutorial.jp/chapters/rails_flavored_ruby?version=5.1#sec-a_user_class

attr_accessorでシンボル指定しおくと、自動でgetter/setterが定義される。

各々定義したい場合はattr_reader/attr_writerを使う

  • attr_reader -> getterを定義
  • attr_writer -> setterを定義
class User
  attr_accessor :name, :email

  def initialize(attributes = {})
    @name  = attributes[:name]
    @email = attributes[:email]
  end

  def formatted_email
    "#{@name} <#{@email}>"
  end
end

bryankawa.hatenablog.com

【参加レポート】#しがないラジオmeetup 1 とTwitterライブ

参加者の皆さんのレポートがはやすぎて完全出遅れだけど、せっかくなので書きます。

昨日いつも聴いているPodcast「しがないラジオ」のミートアップがあり、ちょこっと運営お手伝いもしつつ参加してきました。

shiganai.org

shiganai.connpass.com

レポート的なあれこれ

この記事を書いてる今も続々と参加レポートがあがってきているので、当日の雰囲気はそちらを見て頂ければと思います。

とりあえずハッシュタグ貼っときます。

#しがないラジオmeetup

ハッシュタグのTLを追いきれんwという方もいると思うので、 そんな人はVTRyoさんの素晴らしすぎるまとめ記事と、 てぃーびーさんのブログにレポート記事リストがあるのでそちらを御覧ください。

愛されがつよい

今回参加しててすごく感じたのですが、パーソナリティの2人の愛され感がすごいなと感じました。

会場にいないてぃーびーさんからの遠隔LTがあったり

OSCAさんのLT中、パーソナリティ2人とのやりとりがあったり、

また、LTの発表内容がしがないラジオの影響を受けて行動を起こしたら環境が変わって感謝いっぱいの内容だったり。

あと、今回地味にすごかった点として登録者の出席率が9割超えしてたのもすごかったです。

Twitterライブで得たTips

あまり表立って告知されてなかった気がしますが、 今回は当日参加できない遠隔地のゲストさん&リスナーさん向けにTwitterライブをやっていました。

普段から写真や動画を積極的に撮る方ではないのでiPhoneあれば何とかなるだろ〜とほぼ準備ゼロでやった結果、 色々つらみと発見があったので今後はじめてやる方向けに書き残しておきます。

ポジション大事

ライブ撮影する上であらかじめ見通しの良さを考えておいた方が良いなと感じました。

たまたま運が良かったのですが、今回はプロジェクタに向かって椅子が並んでいて真ん中を通れるように通り道があったおかげで、 一番うしろからでもプロジェクタ全体を写しやすい状態でした。

雑に書くとこんな感じです↓

f:id:roo_oregon:20180524220323p:plain:w300

ぶっちゃけ撮り慣れてる人的にはポジション取り大事なのは常識なんだと思いますが、 特に発表の動画撮影は場所を固定することが多いと思うので会場レイアウトを考えるときに考慮しておいた方が良いなと感じました (小並感)

三脚あった方が良いよ

単純に手持ちで撮ると腕がプルプルになるよねという話だけではないです。 今回自分で撮影した動画を見返してみると、結構ゆらゆらして自分で見返して酔いそうになったので、 固定は大事なんだなと思いました (小並感)

Periscopeアプリ入れとこう

今回ハッシュタグ上で動画を流そうと思ってTwitterの公式アプリ上でライブ機能を使いました。

ツイートするときに表示されるライブってやつですね↓

f:id:roo_oregon:20180524222150p:plain:w300

実はこの表示、下記のようにテキストを入れてる状態だと表示されません。。 (当日はライブスタートと同時にずっきーさんにリツイートしてもらい対処してましたw)

f:id:roo_oregon:20180524222655p:plain:w300

当日は時間もなくテンパってたので見つけられなかったんですが、写真マーク押したら普通に出てきますw

f:id:roo_oregon:20180524223249p:plain:w500

で、あとはさっきと同じくライブボタンを押すだけでしょ?ってなると思うんですが、 なぜかこの場合「Periscopeアプリをインストールしますか?」とメッセージが出てきて中々撮らせてくれません(怒

というわけで、事前にインストールしておきましよう(`・ω・´)

アプリインストール済だとまずストリーミングの初期化が始まり、

f:id:roo_oregon:20180524223920p:plain:w300

完了すると撮影開始できるようになります。

下の例だとハッシュタグのみですが、もちろんコメントやリプライを入れることもできます。 ちなみにライブを止めると自動的にツイート投下されてしまうため、コメントは先に入れておきましょう。

f:id:roo_oregon:20180524223932p:plain:w300

撮り終わったら右上のバツボタンを押してライブを止めましょう。

VTRyoさんも書いてますが、ライブ撮影以外も遠くから参加できない方向けに他にも色々できることありそうだな〜と思いました。

というわけで、、

楽しかったよ!

f:id:roo_oregon:20180524211544j:plain

【LTしてきた】WEBエンジニア勉強会 #07

タイトルどおりLTしてきたのでそのまとめ

今回は7回目のWEBエンジニア勉強会に参加してきた。会場はYahoo! LODGE

前回の参加がきっかけで運営をお手伝いすることになり、そのまま勢いで発表申込みしたのが背景。

web-engineer-meetup.connpass.com

自分の発表

イベントが公開されたのはだいたい一か月前。その時はまだ発表内容も決まっていなかったため、とりあえず「初心者Webエンジニアを支える技術」といういくらでもピボットできそうなタイトルで申し込んだ。GWも挟むし何とかなるだろう、とわりとお気楽な感じでに申込みボタンを押した。

じつのところ発表テーマが固まったのは勉強会の3日前くらいだったんだけど。。

というのも、最初はわりとエモめな内容を考えていてストーリーラインも何度か推敲して形にはなっていた。だけど自分の中で「せっかく勉強会で発表するんだからお気持ちだけで発表するのはもったいない」「ちゃんと技術寄りなことで発表したい」「せっかくだから新しくインプットしたことを整理したい」という悶々が続き、直前になりSQLじゃね?っと腹が決まりそこから内容を考え直した。

テーマが決まったら次はどんな流れにするか?

基本的には業務中に自分がハマったことベースで、その時には時間優先で終わらせたことに対してちょっと原理的なところを深堀してみたり、多言語・フレームワークに視野を広げてみたりと厚みをつける方向で情報を整理していった。

お勉強方向に深堀りしすぎると眠くなるので、ある程度のところで参考文献の紹介に留めて具体例も盛り込んでいった。 Webの世界はオープンですばらしい参考文献が転がっていて、感謝感謝と念じながらふんだんに引用させていただいた。

スライドの基本ができたら何回か見直して、説明が飛びすぎな部分にページを追加したり、プレゼンを楽しんでもらうためのお気持ちページを入れた。 あとは細々したところを調整したつもりだったんだけど、発表後に見返してみると色々粗がみえてきたので次に活かすということにしてそっとブラウザを閉じた。

というわけで出来上がりがコチラ↓

www.slideshare.net

発表を振り返ってみると、ゆるさを意識しすぎて説明が雑だったなと思う。あとは端折るつもりのところを全部しゃべりきったのでたぶん時間すぎちゃってた。もうしわけない

SQL改善例のおねだりしたら #WEBエンジニア勉強会の方でいくつかコメント頂いてて、ありがとうございます。

みなさんの発表

色々テンパっててまとめきれてないので、詳しくはOSCAさんブログの勉強会レポートで!

techblog.oscasierra.net

運営お手伝い

事前にslackでやりとりしてたけど、実働は当日のみなのでサクッと書く。

詳しくはOSCAさんブログに書いてあるけど、今回は会場がYahoo! LODGEでのリベンジ開催ということでOSCAさんの熱を感じる仕事ぶりを間近(リモートだけど)で見ることができた。職業柄ってのもあるかもしれないけれど、すごく周到な準備をされていてとても勉強になった。

そんな姿を見ていたので、当日は気づいたことがあれば何でもやるぞ!ということでちょろちょろと動き回っていた。

まとめ

運営&発表やると打ち上げのビールがうまい(・∀・)

おまけ

今回Slideshareに資料をアップロードをするときハマったので、下記リンクも貼っておく。

KeynoteのスライドをSlideShareにアップロードすると日本語が表示されない問題

基本的に日本語サポートをしてないらしい。。

プログラマーになりたいと思った人がやるべき7つのこと、を読んで自分の勉強体験を思い返す

自分がIT業界で転職活動する上でとても参考にしたAXIAの社長ブログがある。

そのブログで最近下記のような記事が書かれていて、このところ自分の経験の棚卸中だったので記事の流れに沿って勢いで書いてみる。

axia.co.jp

1. とりあえずプログラミングしてみる

まだ前職にいた頃、転職を視野にいれてプログラミングを勉強しようと考えていた。

元々メーカーで開発職だったこともあり、個人的に関心がある分析系のライブラリが多く初心者がとっつきやすいと聞いたPythonで勉強すること決め, 色々と本も買ってみた。

しかし元々プログラミングに抵抗がある(大学でC言語で挫折した)初心者が最初から本で勉強するのはハードルが高く悶々していたところ、 たまたま見かけたSchooというサービスでPython入門の授業があると知り藁にもすがる思いで受講してみた。

schoo.jp

大げさかもしれないけど、この授業が今自分がWebエンジニアになる大きなきっかけとなる。

下記の理由で、Schooを利用した勉強が初心者の自分にとっては本で独学するよりも合っていた。

  • 動画は情報量が多く本より飽きにくい
  • 現役のエンジニアが何を考えながらプログラミングしているかを話してくれる
  • Schooの特徴でもある対話型のスタイルだと、詰まりやすいところの補足説明が多い

のちのち存在を知ったProgateも素晴らしいサービスで自分も大変お世話になったが、自分にとっての原点はSchooだった。

最初のプログラミングへの心理的ハードルを乗り越え、これならよりガッツリ勉強に取り組んでも大丈夫だなと考えIT留学を決めた。

そんなこんなでプログラミングの最初のハードルを越えた自分だったが、すぐに次のハードルにぶつかった。

授業や本のコードをなめるだけではプログラミングに手慣れるまではいかない

そこで何か問題をひたすら解いて、コードを書くという感覚を手に馴染ませたいと思った。

ググってみると下記のようなサイトに問題がたくさん置いてあるのを知る。

paiza.jp

AIZU ONLINE JUDGE: Programming Challenge

手始めとしてPaizaで初級ランク(C, D)の問題を全部解くことにした。C, Dランクだけでも合わせて100問以上あり、修行のごとく解きまくった。

Dランクは単純計算が多いのだけど、Cランクはちょっとしたストーリーに乗せて出題されるため楽しみながら続けられた。

毎度反省点を見直しながらCランクを解くうちに、コードを書き始める前にどんなロジックで書くかプランを組み立てるべきということが分かってきた。

Bランクの問題も解けるようになった段階で留学期間が始まり、Paizaでの学習には一区切りつけた。

2.何をやりたいのかを明確にする

これに関してはかなりふわっとしてたが、自分の生き方の選択肢を増やしたいなと考えていた。

前職がメーカーで、製品があるところに自分がいなければならないという縛りにつらみを感じていた経験がベースにあり、 住む場所や働く時間を人生のフェーズに合わせて変化させていけるようにしたかった。

他にも理由はあるけど、ここではさらっと流す。

3.自分が目指す業界のことを知る

この点については、主に2方向から調べた。

  • 現役のエンジニア
  • 積極的に発信してる方のブログ
  • テック系Podcast

1つ目のに関しては、留学先のメンターさんが経験豊富なエンジニアだったため、授業に限らず休憩やご飯の時間に色々お話を聞いた。 あとはよく遊びに行っていたシェアオフィスで現地のエンジニアやマネージャーと出会う機会があり、積極的に情報収集をしていた。

2つ目はブログで、IT業界は他と比べて個人で情報発信してる人が多いため調べようと思えばいくらでも出てくる。厳しい話と夢のある話、バランスよい感じでリンクを貼っておく。

axia.co.jp

kuranuki.sonicgarden.jp

www.hassy-blog.com

最後はテック系Podcast。最近Webエンジニアを中心にテック系Podcastが増えている。自分は留学仲間からRebuild.fmの存在を教えてもらったのがきっかけで、今でも色々なチャンネルを発掘しては聴いている。

ぶっちゃけるとRebuild.fmは前提知識がないときついので、しがないラジオが聴きやすくておススメ

rebuild.fm

shiganai.org

4.本格的にスキルを習得する

ここはスクールに通う人はそのカリキュラムにも寄ると思う。 自分の場合はHTML/CSSからJavaScript(jQuery)/PHP(Laravelのさわり)までを一通りやった。

個人的に良かったのは下記の点

  • 初日から「わからないことはまずググれるようになれ」スタイルで教わった
  • フレームワークを触る前に生PHPでMVCモデルを採用したアプリを作った
  • Vagrantを用いた環境構築も体験した
  • Gitを使って小チームで開発をした

教わったメンターさんがフリーランス経験者だったこともあり、実践投入を意識した形で勉強できたように思う。

実は案件を受注してみるカリキュラムもあったが、欲しいスキルが得られなさそうだったので自分はやらなかった。 (自分はサーバサイドを目指したが、クラウドソーシング案件はフロント寄りが多かったため)

5.何でも良いので何か一つ作ってみる

2-3人でチームを組んでいくつか作った。作品と機能はこんな感じ↓

  • ECサイト:商品一覧/詳細表示、おススメ商品表示、カテゴリ分け機能、カートに保存、購入
  • Twitterもどき:ログイン/ログアウト、タイムライン、プロフィール画面、フォロー/アンフォロー

あと上述した受託案件をやらない時間で、Raspberry Piを触っていた。

OSのインストールからちょっとした環境構築まで自分でやるため、正直ハゲそうになりながら下記のようなことをやっていた。(Raspberry Piは初心者が独学でやるのは危険なのでArduinoから始めるのがおススメ)

  • Juliusというエンジンを使った音声認識
  • Siriに話しかけたら8x8のLED上をインベーダーゲームのキャラが走る

2つ目の構成イメージ↓

f:id:roo_oregon:20180408153329p:plain

実は自分のやったことを発表するためにIoTイベントを企画したのだけど、それはまた別の機会に。

6.ソースコードはGitHubで公開する

しょぼくて恥ずかしいと思いつつも、先述のTwitterもどきのソースコードを載せていた。フレームワークも使えていない頃のやつなのでそろそろ隠したい。

7.取り組んだことはブログで公開する

これは転職後にやり始めたので、これから継続しておきたい項目。

最近は勉強会の参加メモばかりなので、もうちょっと自分のことをアウトプットしていきたい。

まとめ

今回書いたことはだいたい8か月間でやった内容

IT業界に入ったら入ったでこの100倍くらいやることが見え、やっていかねばと思う今日この頃。。