2022-10-02

アルダグラム Tech Blog で「React Native の Native Module に props を追加する方法(iOS編)」という記事を書きました

業務委託としてお世話になっている株式会社アルダグラムさんのテックブログで記事を書きました！
ご興味がある方は是非ご覧ください。 zenn.dev

2021-04-03

Markdown でスライドを書いて PDF 出力する

はじめに

先日、社内勉強会の発表のためにスライドを書くことになりました。

最初は Google スライドで作っていたのですが、私は面倒臭がりなので GUI 操作でポチポチスライドを作るのが面倒になってしまいました。

そこで、なんとか Markdown を書いてそこからスライドを生成できないものかと思い試行錯誤した結果うまくいったので、備忘録も兼ねて方法を残そうと思います。

Markdown でスライドを書く

marp を使えば、 Markdown でいい感じにスライドを書くことができます。
詳しい書き方については README.md を読めば大体分かると思うので割愛します。

書いた Markdown をスタンドアローンな HTML として出力する

monolith を使えば、スライド内に埋め込んだ画像などが全て Base64 エンコードされたスタンドアローンな HTML を出力することができます。
以下は、slide.html を slide-standalone.html として出力する例です。

$ monolith slide.html -o slide-standalone.html

HTML を PDF に変換する

Web ブラウザで先程の手順で出力したスタンドアローンな HTML を表示し、 pdf 出力します。
例えば Google Chrome の場合、印刷の際に送信先を「PDF に保存」にすることで、HTML を PDF ファイルとして出力することができます。

ここまでの手順により、Markdown で書いたスライドを PDF 出力することができました。

おわりに

スライドを書くこと自体に今までは結構抵抗があったのですが、Markdown で書けば楽なことが分かったので、今後はもう少し気軽に書けそうです。

2020-12-24

好きな音楽の要素について語りたい

こんにちは！
株式会社フィードフォースで EC Booster のエンジニアとしてプロダクトの開発に携わっている id:len_progです。

ecbooster.jp

この記事は feedforce Advent Calendar 2020 の 24 日目の記事です。

adventar.org

昨日はいがたさんの「ITベンチャー新卒5年目、中小企業診断士試験の勉強をした理由と得たもの」でした。
いがたさんとは仕事上で関わりがあるのですが、とにかく頭の良い人かつ人柄も非常に優しく話しやすいので、日々、凄いなこの人…と思っています。
日々お忙しそうな中、中小企業診断士の勉強までこなしてしまうそのバイタリティは果たしてどこから来るのでしょうか…？

さて、いがたさんが非常に良い話をしてくださった直後かつ明日は最終日という大事なタイミングに申し訳ありませんが、
本日私からは「好きな音楽の要素」について語ろうと思っています。

まず、何故こんな話を所属企業のアドベントカレンダーでやろうと思ったかを語らせてください。

現在、弊社フィードフォースでは新型コロナウイルスなどの影響もあり、チーム内での合意が取れればフルリモートで働くという選択肢も取れる状況が続いています。
そして、自宅で働くとなると、人に話しかけられることがほぼなくなるので、オフィスで働いていた頃と比べて音楽を聴く機会がとても増えました。 (ちなみに元々フィードフォースではオフィスで音楽を聴いて良いのですが、気質の問題で周りに人が居るところでイヤホンで音楽を聴きながら仕事することに若干気が引けていました)
そして、色々な音楽を聴いているうちに、自分が好きになる音楽にはいくつか共通の要素があるということに気づきました。

このことをどこかで思いっきり語れないかな…と思っていたところに、ちょうどアドベントカレンダーの時期がやってきました。
せっかく枠もギリギリ空いているし、書く内容は趣味のことでも良いとのことだったので、思い切ってここで語ってみようと思った次第です。

というわけで、ここからは私の好きな音楽の要素の中から2つほどお話します。
どうかお付き合いください。

キャッチーな曲に入ってくるテクニカルな転調

私は、一見キャッチーでそこまでテクニカルさを全面に押し出していない音楽に、しれっとテクニカルな転調が入ってくるのがとても好きです。
それも、「ドヤ感」を感じない自然な転調が特に好きです。

これについては、最近のヒット曲に非常に分かりやすい実例があるのでご紹介します。

YOASOBI - 夜に駆ける

最近話題の YOASOBI の代表曲です。ちなみに、MV が YouTube で1億回以上再生されてます。(凄すぎてどのくらい凄いのか分からないですね)

さて話を転調に持っていきますが、この曲は後半でBメロの後に1小節の無音(ブレイク)を挟んだ後、3:12 で突然半音下に転調します。
この転調の仕方はポップス音楽だとあまり聴かない(fripSide の only my railgun のギターソロ開けくらいしか思いつかないです)ものなので、最初聴いたときにはその大胆さにびっくりしました。

しかも、驚いたことにそれだけではなく、ラスサビに突入する際に更に1音半上に転調します。 (転調とは関係ないですが、このときに鳴っているピアノの駆け上がるフレーズがクライマックスに向かっている感じを出していて物凄く良いですね)
ただ転調してキーを上げるのではなく、一度下げてから上げることによって上がる転調のインパクトを出すことに成功しており、実に上手いやり方だなぁと最初に聴いたときに思ったのを今でも覚えています。

また、この楽曲のもうひとつ凄いところは、この転調に恐らく物語的意味が込められていることです。

この楽曲は、タナトスの誘惑という小説が題材になっています。(こちらから無料で読むことができます)
詳しく語ってしまうとネタバレになるので語りませんが、この小説を読んでから夜に駆けるを聴けば、転調するたびにハッとすることができることうけあいです。
最初から凄い転調だなぁと思ってはいましたが、小説を読んでから更に何倍も心に響いてくるようになって、やられたなぁと思いました。

ボーカル並にメロディアスなベースライン

私は、ベースは実はリード楽器なのではないか？と思っているほどメロディアスなベースラインが好きです。
基本的には曲のボトムを支えるベースが突然高音でメロディを奏で始める瞬間が、音楽を聴いていて一番テンションが上がる瞬間だと言っても過言ではないです。

とはいっても、突然語られても実際にどんなベースラインが好きかをお聴かせしないと意味が分からないと思うので、先程と同じく実例を交えながら語っていきます。

L'Arc〜en〜Ciel - HONEY

L'Arc〜en〜Ciel の有名曲です。
特に 2:16~2:37 ぐらいまでベースが俺がボーカルだ！と言わんばかりの勢いで動いており、聴いていて、こんなにベースがメロディアスで怒られない？と謎の心配をしてしまいますが、非常にかっこいいです。

何故こんなにベースが際立っているのかを考えてみたのですが、ボーカルやコーラスはあまり細かく音程が動かず、ギターはシンプルなコードストローク、ドラムもトリッキーさのない8ビートで叩かれている中でベースだけ動き続けているからなんだろうなぁ、という結論に至りました。

また、サビに戻る直前のフレーズが激しい上下のグリッサンドで終わっているのも、非常に感情に訴えかけてきて良いですね。

LiSA - confidence driver

最近では紅蓮華が鬼滅の刃のアニメ OP になり大ヒットしたことで有名な、LiSA さんの楽曲です。
全体的にベースが歌い続けてる楽曲だと私は思っていますが、特に 2:48~3:00 あたりはもはやベースの方がボーカル(?)なのではないかと思うほどメロディアスなフレーズを奏でています。
なお、この曲は UNISON SQUARE GARDEN のベーシストである田淵智也さんが作曲しており、恐らくベースラインもご本人が考えていると思われます。
この方は UNISON SQUARE GARDEN の楽曲でも非常に良いベースラインを連発しているので、confidence driver のベースラインが良いと思った方は、そちらも是非チェックしてみてください。

おわりに

さて、物凄い勢いで語ってしまいましたがいかがでしたでしょうか。
私自身が作曲や編曲を趣味でやっているのもあり、ちょっと視点がずれてしまっているのではないかと心配していますが、少しでも面白いと思っていただけたなら幸いです。

明日はいよいよ弊社代表取締役、塚田さんの記事です！

それでは皆様、良いお年を。

2020-08-29

近況報告

そういえば最近ブログ書いてないし久々に書くか！と思って最後に記事を投稿した日時を見たら、2年前でビックリしました。時の流れは早いですね・・・。

滅茶苦茶久しぶりなので、軽い近況報告をさせてください。

仕事について

このブログを始めた当初は、とても小さなソフトウェアハウスで働いていました。
その後、Google Clout Platform 専門の SIer などを経由して、現在は B2B 向け SaaS を作っているベンチャー企業で Web エンジニアとして働いています。
東証マザーズに上場している企業で、ベンチャーにしては落ち着いた雰囲気なので非常に働きやすいと感じています。

正直今までいた会社で一番エンジニアのレベルが高く、劣等感を若干感じながら働いているのが正直なところですが、かの有名な達人プログラマーに書いてあった「一番の下手くそでいよう」という言葉を心の中で唱えながら、日々精進しています。

使用してきた技術について

ブログを書いていない間で使用してきた技術は、大体以下のような感じです。

プログラミング言語

Go
TypeScript
Java
PHP
Ruby
Flow

フレームワーク

TypeScript
- Angular
- Vue.js
- Nuxt.js
- React
PHP
- CakePHP
- Zend Framework
Ruby
- Ruby on Rails
Java
- Cloud Endpoints
Go
- Echo

パブリッククラウド

GCP
- App Engine
- Cloud Datastore
- Cloud Pub/Sub
- Cloud Functions
- Cloud Bigtable
- Cloud SQL
Firebase
- FIrebase Authentication
- Firestore
- Realtime Database
Heroku
AWS(ちょっとだけ)
- EC2
- RDS
- S3

コミュニケーションツール

Slack
Backlog
typetalk
Chatwork
GitHub

今後について

今まで、Notion や HackMD などに技術メモなどを書いてきたのですが、それをブログで書くのがメインになるかなと思っています。
あとはどうでもいい雑記や趣味の話も、自己満足で書いていこうかなと思っています。

それでは、引き続きよろしくお願いいたします。

2018-03-21

PyCharmでDockerコンテナに接続する

PyCharm Docker JetBrains

概要

最近ローカルの開発環境をVagrantからDocker+Docker Composeに変更しました。しかし、コンテナに入る際にいちいち

# docker exec -it コンテナ名 /bin/bash

を打つのが面倒臭くなってきたので、せっかくPyCharmを使っているのだからここからなんとかコンテナに入れないかと思い探してみたところ、できたのでメモを兼ねてブログに書いておきます。

環境

ホストOS	macOS Sierra バージョン 10.12.6
IDE	PyCharm 2017.3.4 Professional Edition
Docker	Version 17.09.1-ce-mac42 (21090)

手順

コンテナが起動している状態でPyCharmのDockerビューを開き、コンテナ名を右クリック→Execをクリック。 Createをクリックすると表示されるプロンプトに、

# /bin/bash

と入力すればExec: /bin/bashと表示され、コマンドを入力しなくても勝手にコンテナに入ってくれます。

色々なコンテナを立ち上げている状態で毎回コマンドを打つのは面倒だったので、便利な方法が見つかって良かったです。

2018-03-07

Python3 + Selenium + Headless Chromeでブラウザを自動操作する(超入門編)

スクレイピング Python

はじめに

最近、WebアプリケーションのE2Eテストやスクレイピングなどに興味があるので、
seleniumを使ってブラウザの自動操作をできるよう環境を作ってみました。
同じような記事はたくさんありますが、備忘録も兼ねて書いておきます。

環境は以下の通りです。 MacからVagrant上のCentOS7にSSHで接続し、そちらからコマンドを実行しています。

ホストOS	macOS Sierra バージョン 10.12.6
ゲストOS	CentOS Linux release 7.4.1708 (Core)
Python	3.6.2
Chrome	66.0.3355.0 dev
chromedriver	2.3.6
IDE	PyCharm 2017.3.1 Professional Edition

Seleniumインストール

# pip intall selenium

これでOKです。

Google ChromeをCentOS7にインストール

他の記事だとこれをやってなくてもできてるっぽかったのですが、自分の環境ではこれをやらないと動きませんでした。

# yum install google-chrome

# google-chrome --version
Google Chrome 66.0.3355.0 dev

ChromeDriverインストール

ChromeDriver - WebDriver for Chromeからダウンロードします。今回はGoogle Chrome 66なので、Supports Chrome v64-66と書いてあるChromeDriver 2.36をダウンロードしました。

# wget http://chromedriver.storage.googleapis.com/2.36/chromedriver_linux64.zip
# unzip chromedriver_linux64.zip 
# mv chromedriver /usr/local/bin

動かしてみる

Chromeを起動してGoogle検索し、検索結果を表示してついでにスクリーンショットを撮るプログラムを書いてみます。
検索してるもので趣味がダダ漏れになってるのは気にしないでください。
シロちゃんはいいぞ。

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.chrome.options import Options


options = Options()

# ヘッドレスモードを有効にする
options.add_argument('--headless')

# ChromeのWebDriverオブジェクトを作成する。
driver = webdriver.Chrome(chrome_options=options)

driver.get('https://www.google.co.jp/')

assert 'Google' in driver.title

input_element = driver.find_element_by_name('q')
input_element.send_keys('電脳少女シロ')
input_element.send_keys(Keys.RETURN)

driver.set_window_size(1280, 720)
driver.save_screenshot('search_screen_shot.png')

for a in driver.find_elements_by_css_selector('h3 > a'):
    print(a.text)
    print(a.get_attribute('href'))