takedajs ログ

備考録

アウトプットする文化作りを1年間取り組んだ

f:id:takedajs:20211208082855p:plain

この記事は Engineering Manager Advent Calendar 2021 の8日目の記事です。

現在育休中ですが、育休前はEMとして同じチームのエンジニアはもちろん、デザイナーのマネジメントも担当していました。

エンジニアとデザイナーのチームメンバーと一緒にアウトプットする文化作りを1年間取り組んできたので、始めた理由、やってみた感想、続けるために工夫したことを書いてみました。

取り組んだこと

弊社では四半期ごとに個人の定量定性目標を設定しています。 チームメンバーと話し合い、以下の共通目標をメンバー毎の個人目標に設定して実施してきました。

・四半期ごとに1人1記事会社のテックブログを書く

文化作りと大それたことを書きましたが、やったのはこれだけです。
テックブログを書いたことがないメンバーや、僕も年に1記事書くかどうかだったので、無理のない範囲の目標を設定しました。 以下は、実際に僕がこの一年間で書いた記事です。最初の方は書く習慣がなかったので大変だったな・・・

チームメンバー全員で実施している回帰テストの紹介 | Wedding Park CREATORS Blog

エンジニアリングマネージャーが9ヶ月リモートワークして思ったこと | Wedding Park CREATORS Blog

エンジニアの悩みを解決する雑談を促す仕組み | Wedding Park CREATORS Blog

技術と仕様を、切磋琢磨しながら学ぶ取り組み | Wedding Park CREATORS Blog

始めた理由

EMの方やエンジニア採用に携わられている方なら分かると思いますが、エンジニア採用が年々厳しくなっています。
僕自身も常にその危機感を抱えており、施策を始める前の会社のテックブログは正直あまり更新されておらず、会社の魅力を伝えられていないなと感じました。
もし自分が転職する際は気になった企業のテックブログを必ず見るので、このままだと採用に悪い影響が出てしまうなとぼんやり考えてました。
全社のエンジニアを巻き込んで実施するのも良いですが、調整したりとかめっちゃパワーかかりますよね・・・ なので、まずスモールスタートということでチームメンバーに事情を話して始めたのがきっかけです。

やってみた感想

・楽しみながら続けられた

四半期ごとに1記事ブログを書くという共通の目標を設定することで、「何の記事書く?」、「やばい書かないと!」などチームのSlackで盛り上がりながらテックブログを書いてました。 書いたブログをみんなでレビューしあい、指摘は誤字程度で、基本みんなで記事の内容を褒めあってました笑
折角書いたんだから褒められたいですよね!

・書くハードルが下がった

施策を実施した半年後くらいに、会社のテックブログを書くのがハードルがあると感じ(分かります)、今まで書いたことがないメンバーが別チームから移動してきました。 ただ、ハードルがあると言ってたんですが、周りのメンバーが当たり前のように書いていたので、僕の予想に反してサクッとブログを書いてくれました。
周りの人が当たり前にやってると、自分がやるハードル下がりますよね!

・採用に効果が出た

一番嬉しかったのはこれです。最近本当に言われることが増えてきました。 採用に携わっていないメンバーにも面接や面談が終わったあとに、「ブログ見て良いなと思い!」って言われたよ!と伝えてました。
書くモチベーションが上がるやつです!

続けるために工夫したこと

・自分が責任を持つ

僕もブログを書く目標を設定しましたが、それとは別で「チームメンバーが全員ブログを書く」という目標を設定しました。 この目標を持つことで「みんなが書いてくれるにはどうしたらいいか?」、「どうすれば書くハードルを下げることができるか?」、 「みんながどうすればモチベーション高く取り組むことができるか?」などをより真剣に考えて実行することができました。

・書くハードルを徹底的に下げる

これが一番重要です!前提として、内容も大事ですがまず続けることがなによりも大事だと考えていました。 なので、みんなに「まず書くことが大事なので、書く内容は何でもいいですよー!」を連呼してました。 メンバーから「〜についてブログ書くどう思いますか?」と聞かれることがあったのですが、一切否定せず「いいですね!!それ書きましょう!!」と前のめりで連呼してました。 普段近くからEMとして成果を見てるので、1on1のときに「先日実施した〜の取り組みブログ書けますね!」などこちらからもネタをふったりしてました。

・成果をアピール

モチベーションにつながるのでブログを公開して終わりではなく、成果を意識してチーム外にアピールしました。 共通の目標を全員が達成できたら、全社員が見れるチャット上に「ブログ執筆目標、チーム全員達成しました!!」と積極的にアピールしたり、 ここぞとばかりに、自分の上司や社長に「面接や面談に来てくれた方から会社のテックブログについて言われることが増えました!」と伝えてました。 周りの方からも「アウトプット積極的にして良いね!」と言われることが増え、別チームのエンジニアもテックブログを書く人が少しずつ増えてきてます。

最後

チームメンバーのみんなと共通の目標を立てて、会社のテックブログを書くということをやり続けることができましたが、 自分ひとりでは絶対に続けることができなかったと思います。

やり始めようと考えチームメンバーに相談したときに、「ぜひやりましょう!」とみなさん言ってくれて嬉しかったのを今でも覚えてます。 のっていき!の方が多くて本当に恵まれたチームの中で働かさせて頂いてるなと感じます。

採用目的で始めましたが、みんなでワイワイしながらやれたのが楽しかったです。

最近では同じメンバーで外部向けのLT会を定期的にやってます。こちらも楽しみにながらやってます!

weddingpark.connpass.com

半年間の育休を取得した理由と取得までの流れ

f:id:takedajs:20211021095942j:plain

2021年8月に第一子の女の子が生まれ、現在2021年10月~2022年3月末まで育児休業(以下、育休)を取得中です。

男性で育休に関するアウトプットをしている人が徐々に増えてきているので、 僕も取得理由、取得前に調べたことや考えたこと、取得するまでの流れを子供が眠ってるスキマ時間で簡単に書いてみました。

それぞれの家庭で前提が違うので、絶対に男性も育休を取得しないといけないということではないです。 ただ、男性の取得者が一人でも増えてくれたら嬉しいです。

取得理由

育休は男性も利用できるので、以下の理由から取得を決めました。

・子供がもともと好きだったのもあり、学生の頃からもし自分に子供ができたら子育てに積極的に関わりたかった。

・社会人になり子供がいる人が周りに増え、自分が思ってた以上に子育てが大変だと知った。

・産後1年未満に死亡した女性の死因(2015年と2016年)で最も多いのが「自殺」だと知り、産後うつについて学んだ。

知ってほしい“産後のうつ”~92人自殺の衝撃~|サイカルジャーナル|NHK NEWS WEB

TwitterのTLに流れてきたこの画像を見て。回復グループに入りたいという気持ち。

大変な乳幼児期に「夫と二人で子育てした」と回答した女性たちの夫への愛情は回復し、「私一人で子育てした」と回答した女性たちの愛情は低迷します(下図)。

f:id:takedajs:20211021182951p:plain

パパの育児と愛情曲線!?|東京ウィメンズプラザ|みらい手帳

取得前に調べたことや考えたこと

育休に関して分からないことが多かったので、 男性エンジニアで育休を取得された方の記事や本などを読んで疑問点を潰していきました。 以下一例です。

・育休中のお金大丈夫か?

育休中は会社から給料が出ないので調べる前はお金の心配がありました。
調べてみると育児休業給付金や社会保険料免除などがあり、働いてたときの8割ほどのお金がもらえるとのこと。育休取得を周りに伝えてから「お金は大丈夫?」と聞かれることが何度かあったのですが、僕と同じように知らない方は多そうです。ただし、給付の上限額があるので、8割も貰えない方も多くいらっしゃると思います。

・育休をどのくらいの期間取得するか?

1年近く取得することができるらしく、どのくらいの期間にするか悩みました。 1~3ヶ月は短いなと思い、保育園に入れるまでは取得しようと考え半年にしました。

・読んだ記事や本の一例

リードエンジニアが育休を6ヶ月取ることにした話 - 八発白中

仕事大好きエンジニアが半年間パパだけの育休をとった話 - ikuo’s blog

「迷ったら読みたい 育休はじめてガイド」を発売します!|ころちゃん|note

取得するまでの流れ

ざっと以下の流れだったと思います。

・2020年12月:妊娠したことが分かった

育休取得について興味があったので調査し、育休について妻に共有。 二人で話し合い、半年間の育休を決定。

・2021年3月:上司に育休取得を相談

上司にいつ相談するか悩みましたが、他の方の記事を読むと「できるだけ早く共有した方が良い」とあったので、育休取得を決めてからすぐに相談しました。
会社で男性かつマネージャーで育休を取得した人がいなかったので、どんな反応されるか少し心配していましたが、「いいね!」ととても前向きな言葉を頂いたので安心しました。 人事の方にも共有して引き継ぎの手順などを話し合いました。色々と調整していただき感謝しかないです。

・2021年6月:チームメンバーに育休取得を共有

担当しているサービスは立ち上げから携わっていたため、エンジニアリングマネージャーとしてマネジメント、エンジニア採用、開発など幅広く携わっていました。
引き継ぐことが多く大変だったのですが、優秀なチームメンバーの助けもありなんとか引き継げました。
(チームの皆様へ:漏れてるやつあったら遠慮せず連絡ください!)

・2021年8月:子供が生まれる

コロナ渦でしたが出産に立ち会うことができました。
同僚の方から子供が生まれることについて多くのお祝いの言葉を頂いていたのですが、正直子供が生まれるまで 「無事に母子ともに健康で生まれてくるのか?」など毎日不安だったので、ホッとしました。

・2021年10月 育休スタート

最後に

育休初月ということもあり、悪戦苦闘しながら夫婦で育児を頑張ってます。
大変なことも多いですが、生まれたばかりの子供に100%の時間を割けるのは幸せだなと日々実感します。今後も自分の備忘録として、育休関連の記事をあと何個か書きたいと思います。(できたら・・・)

タイトル候補
・育休取得して1ヶ月が経った感想
・育休取得して6ヶ月が経った感想
・育休から復職して1ヶ月が経った感想

郵便が来たらLINE BOTに通知される仕組みを作成

自宅の郵便ポストに届いたものを確認するために、外出して帰ってくる度にポストを開けて確認するのが習慣になっていました。
毎回確認が面倒だったので、郵便がポストに届いたらLINE BOTに通知される仕組みを作成しました。

AWS Lambdaのコードを書く必要があり少しハードルはありますが、エンジニアの方でなくても作成できると思うので、ぜひチャレンジしてみてください!

作成したもの

・郵便ポストに設置前の状態で動画を撮影しています。
・実際は郵便ポストの投函口に動画にある磁気センサーを取り付けています。
・投函口が開いたら磁気センサーが反応し、LINE BOTに通知されます。

通知までの流れ

f:id:takedajs:20210808155907p:plain

準備

① IoT機器購入 (約1万円)

IoT 体験キット 〜磁気センサー〜 - IoTデバイス通販 - SORACOM (ソラコム) IoTストア

※ 通信料として月約100円ほどかかります。

② ポストに「チラシの無断投函お断りステッカー」を貼る

これをポストに貼っておくと不必要なチラシの数がほぼ0になります。
貼らないと投稿される度に通知が来るのでマストでやっておいた方がいいです。
以下のようなステッカーを買うでも良いですが、僕は同じようなものをパワポでさくっと作成して、ポストにマスキングテープで貼り付けてます。

Amazon.co.jp : チラシの無断投函お断りステッカー

実装方法

以下、参考にした記事や実際に実装したコードです。
ここに記述しているページを見れば、実装のイメージがつきます。

SORACOM側設定で参考にした記事

IoTでドアの開閉モニタリング - SORACOM (ソラコム) IoT DIY レシピ

Getting Started: AWS Lambda を実行し Slack へ通知する | SORACOM Funk | SORACOM Users

LINE BOT作成で参考にした記事

Messaging APIを始めよう | LINE Developers

AWS Lambdaで実装したコード

https://github.com/takedajs/postbox_line_bot/blob/main/index.js

感想

初めてIoT機器を使ってBOTを作成しましたが、SORACOMのサイトにかなり丁寧に手順などが書いてあるので、 大きく詰まるところはありませんでした。IoT機器を使って何かを作るのは、予想通り楽しかったです!

今後としては、LINE BOTに「郵便取ったー!」と返信すると、LINE BOTを友だち登録してる人に 「〜さんが取ってくれました!」とメッセージを送ってくれる機能を作成する予定です。

参考文献

家のポストに荷物が投函されたらSlackに通知が来るIoTやってみた - Qiita

郵便がポストに届いたらメールで通知がくるようにした - Qiita

Karabiner-Elementsでcontrol+j/i/k/mを矢印キーに変更した

デフォルトの配列だと、矢印キーを打つ度にキーボードのホームポジションから手を移動させないといけない。
毎回移動が面倒なので、Karabiner-Elementsを利用してcontrol+j/i/k/mを矢印キーと同じ挙動に変更した。

スペック

・macOS:Catalina
・Karabiner-Elements:12.9.0

変更内容

以下のようにcontrolとJ/I/K/Mのキーを組み合わせで、矢印キーと同じ挙動になるようにした。

・control + j => 左(←)
・control + i => 上(↑)
・control + k => 右(→)
・control + m => 下(↓)

f:id:takedajs:20200223182446p:plain

Karabiner-Elementsの設定

・Karabiner-Elementsをインストール

Karabiner-Elements - Software for macOS
https://pqrs.org/osx/karabiner/

・Complex modificationsの独自ルール作成

control + j/i/k/mで矢印キーになるようにindex.jsonを作成して、以下に置く。

$ cd ~/.config/karabiner/assets/complex_modifications

index.json

{
    "title": "left_control + j/i/k/m to arrow keys",
    "rules": [
        {
            "description": "left_control + j/i/k/m to arrow keys",
            "manipulators": [
                {
                    "type": "basic",
                    "from": {
                        "key_code": "j",
                        "modifiers": {
                            "mandatory": [
                                "left_control"
                            ],
                            "optional": [
                                "any"
                            ]
                        }
                    },
                    "to": [
                        {
                            "key_code": "left_arrow"
                        }
                    ]
                },
                {
                    "type": "basic",
                    "from": {
                        "key_code": "i",
                        "modifiers": {
                            "mandatory": [
                                "left_control"
                            ],
                            "optional": [
                                "any"
                            ]
                        }
                    },
                    "to": [
                        {
                            "key_code": "up_arrow"
                        }
                    ]
                },
                {
                    "type": "basic",
                    "from": {
                        "key_code": "k",
                        "modifiers": {
                            "mandatory": [
                                "left_control"
                            ],
                            "optional": [
                                "any"
                            ]
                        }
                    },
                    "to": [
                        {
                            "key_code": "right_arrow"
                        }
                    ]
                },
                {
                    "type": "basic",
                    "from": {
                        "key_code": "m",
                        "modifiers": {
                            "mandatory": [
                                "left_control"
                            ],
                            "optional": [
                                "any"
                            ]
                        }
                    },
                    "to": [
                        {
                            "key_code": "down_arrow"
                        }
                    ]
                }
            ]
        }
    ]
}

以下ページに独自ルールのサンプルが載っています。より複雑な指定がしたい場合は、参考にしてみてください。

karabiner-elements-complex_modifications
https://pqrs.org/osx/karabiner/complex_modifications/

・Complex modificationsに独自ルールを設定

Karabiner-Elements->Complex modification->RulesにあるAdd Ruleボタンを押すと以下が表示される。

f:id:takedajs:20200223182630p:plain

先程作成した独自ルールが追加されてるので「left_control + j/i/k/m to arrow keys」のEnableボタンを押すと設定が完了し、これで矢印キーと同じ挙動をするようになります。

HHKB(日本語配列)の左Fnキーをcommandキーに変更する

このツイートをしてすぐに対応方法が分かったのでメモ。

スペック

・キーボード
Happy Hacking Keyboard Professional HYBRID Type-S 日本語配列/墨|PFUダイレクト
https://www.pfu.fujitsu.com/direct/hhkb/detail_pd-kb820bs.html

・PC
MacBook Air (macOS Catalina)

変更方法

「HHKBの背面スイッチ」と「Macのキーボードの修飾キー」をいじる。

・HHKBの背面スイッチ

SW1とSW2をON。

・Macのキーボードの修飾キー

Macの「システム環境設定」->「キーボード」->「修飾キー」を選択して、以下の設定に変更。

f:id:takedajs:20200201011039p:plain

むっちゃ快適になった〜😁

追記

別のMac (macOS Sierra) でやろうとしたら、修飾キーの「キーボードを選択」にHHKBが出てこなかった。 その場合は、Karabiner-Elementsをインストールすると、Karabinerを選択できるようになる。 Karabinerを選択して先程表示した図のように各キーを選択すると問題なく動作する。

サンフランシスコとシリコンバレーに行ってきた

f:id:takedajs:20190727171943j:plain

エンジニアになってからサンフランシスコやシリコンバーの話を聞くことが多くなり(主にRebuild.fm)、 いつか行ってみたいと思っていました。 今年で30歳になり20代のうちにやっておきたいことの一つだったので、一人で6泊8日のスケジュールで行ってきました。

この記事が、同じようにいつか行ってみたいなと思っている人の参考になれば嬉しいです。

事前準備

サンフランシスコとシリコンバレーの位置を確認

そもそもアメリカのどこにあるか分からなかったので、 wikipediaやGoogleマップを使って調べるところからw

地球の歩き方購入

地球の歩き方は偉大。むっちゃ詳しく書いてある。

B04 地球の歩き方 サンフランシスコとシリコンバレー 2018~2019

ESTA申請

アメリカ行くときは申請必須。

ESTA(エスタ)申請 | 在日米国大使館・領事館

海外保険申し込み

クレジットカード付帯の保険でも良かったが、アメリカは医療費が高いので念のため申し込み。

新・海外旅行保険【off!(オフ)】 | 【公式】損保ジャパン日本興亜

モバイルWiFiレンタル

成田空港で受け渡しと返却ができたので楽。受け渡しのロッカー?の場所が分かりづらいので注意。

海外WiFi レンタル | 海外でWiFiを使うならグローバルWiFi

クレジットカード準備

キャッシング上限の確認。VISAとMastercardが1枚ずつあれば良いかも。 僕はVISAしかなかったので、VISAをとりあえず二枚持参。

ドル両替

日本で両替した方が手数料が安いので3万円分を両替。 アメリカではほぼクレジットカード支払いだったので、1万円分くらいしか使っていない。 渋谷のここで両替。

サクラエクスチェンジ

航空券購入

ANAの成田空港→サンフランシスコ空港の往復チケット購入。

ホテル予約

Airbnbと迷い、Booking.comを利用。 宿泊当日の一週間前くらいまでキャンセル無料のホテルが多く、評価が高いホテルを半年前に予約。立地を重視してユニオンスクエア近辺のホテルだったので、値段は少し高め。簡単な朝食がついて、1泊2万~2万5000円くらい。

Booking.comに掲載されるホテルの値段は常に変わるので、同じホテルの予約した部屋と同じレベルの部屋が安くなってないか当日まで定期的に見た方が良い。 値段が安くなってる場合は、安くなってる部屋を予約して、すでに予約していた部屋をキャンセルするのがオススメ。

以下の2つのホテルを予約して、どちらも良かった^^

メイフラワー ホテル(サンフランシスコ)– 2019年 最新料金

グラント ホテル(サンフランシスコ)– 2019年 最新料金

ITツアー予約

シリコンバレーの企業を効率良く回りたかったので、このツアーに参加。 日本語ガイドさんがシリコンバレーの歴史も含めて説明してくれるので大満足。

【サンフランシスコ】シリコンバレーで超有名ITベンチャー企業(Twitter/Apple/Facebook/Intelなど)+スタンフォード大学を見学!〈ランチ/ホテル送迎&日本語ガイド付き〉 - タビナカ

野球観戦チケット購入

アメリカに行ったらスポーツ観戦ということで、こちらで購入。 奮発して良い席を購入したが、問題が発生し見れなかった・・・

サンフランシスコ・ジャイアンツの観戦チケット購入・販売 | StubHub Japan (スタブハブ)

空港行きのバス乗車券購入

東京駅→成田空港を1000円で行ける。 バスむっちゃ楽。

東京・銀座~成田空港 ラクラク安心1,000円高速バス THEアクセス成田

アルカトラズ島チケット購入

英語サイトだが、購入は簡単。 日本のツアーチケットは高いので、こちらで購入した方が良い。

Tour Options – Alcatraz Cruises

Uberアプリインストール

初Uber。 海外タクシー乗ってボッタクられた経験があるので、値段が事前に分かる&英語話さなくて良いので快適。

スケジュール

1日目

  • 成田空港からサンフランシスコ空港へ
  • 1つ目のホテル着
  • フィッシャーマンズ・ワーフ

f:id:takedajs:20190727172421j:plain

2日目

  • 野球観戦(球場前に行っただけ)
  • ジャパンタウン
  • チャイナタウン

f:id:takedajs:20190727172501j:plain

3日目

  • ITツアー

f:id:takedajs:20190727172515j:plain

4日目

  • ゴールデン・ゲート・ブリッジ(レンタサイクル)
  • カストロ
  • 2つ目のホテル着

f:id:takedajs:20190727172916j:plain

5日目

  • アルカトラズ島
  • お土産購入

f:id:takedajs:20190727172647j:plain

6日目

  • フルハウスのロケ地
  • ゴールデンゲートパーク

f:id:takedajs:20190727172702j:plain

7日目

  • サンフランシスコ空港から成田空港へ

費用

f:id:takedajs:20190727172720p:plain

感想

  • アメリカの入国審査で英語の質問あってビビった。なんとかいけた。
  • ITツアーはやはりテンション爆上げだった。効率良く多くの企業を回れたのでツアー良い。

  • ノーマークだったカストロ地区が良かった。

  • アルカトラズ島の日本語音声ガイドのクオリティが高くて行く価値あり。
  • 6日自由に使えたので、むっちゃ時間があり満喫できたけど、4日くらいで満喫できる。
  • サンフランシスコの街中に、ホームレスが多くて治安の悪さを感じた。日中でもこの通りはやばいなと思う場所があった。
  • 坂道多すぎ問題。徒歩で散策はキツく、ケーブルカー、バス、電車が充実してるので乗り放題パス買って利用するのがオススメ。
  • 午前中は温かいが、午後からむっちゃ寒くなる。
  • 立地重視でホテルを選んだので費用が思ったよりかかってしまった。電車一本でサクッといけるオークランドのホテルでも良かったかも。

最後に

お金がかなりかかったけど、憧れの場所だったので行ってよかったし、いつかまた行きたい!

Android Studioで無料版のGenymotionを利用する

f:id:takedajs:20190705171931p:plain

Android Studioに付属しているエミュレータが重くて実行できないので、AndroidエミュレータのGenymotionを利用してみました。Genymotionは個人利用だと無料なので、今回はそれを使います。

Genymotionインストール

無料版は公式サイトのHelp->Genymotion Desktop->Fun ZoneからDLし、インストールします。
このDLページが見つからなくて時間かかりました・・・

f:id:takedajs:20190705173436p:plain

VirtualBoxインストール

GenymotionをインストールしようとするとVirtualBoxをインストールしてーと言われるので、 公式サイトからDLしインストールします。

現時点の最新版のVirtualBox 6.0.8を導入しましたが、問題なく動作しました。

Geneymotionでエミュレータ起動

利用したいデバイスをインストールします。

f:id:takedajs:20190705174612p:plain

インストールしたデバイスを起動します。

f:id:takedajs:20190705174645p:plain

こんな感じで表示されます。

f:id:takedajs:20190705174706p:plain

Android Studioと連携

Android Studio->環境設定->プラグインにあるGeneymotionをインストールします。

f:id:takedajs:20190705174737p:plain

ツールバーに表示されているGeneymotionのアイコンをクリックし、パスを入力します。

 /Applications/Genymotion.app

Geneymotionでインストールしたデバイスが表示されていたら問題ないです。

f:id:takedajs:20190705174811p:plain

エミュレータ上でアプリを起動

エミュレータを起動した状態でAndroid Studio上で実行ボタンを押下したら、起動中のエミュレータが表示されます。 エミュレータを選択してOKボタンを押下すると、エミュレータ上でアプリが起動されます。

f:id:takedajs:20190705174847p:plain

最後に

Android Studioのエミュレータより起動スピードは早いですが、やはり起動時はPCに負荷かかりますね。 PCのメモリが4GBなので、8GBにスペック上げたい・・・

Firefoxアドオン開発でポップアップをデバッグする方法

アドオン開発でポップアップをデバッグするときに、Firefoxのデフォルトの開発ツールだとデバッグできないので、デバッグ方法を記述します。

デバッグ方法

開発中のアドオンのデバッグボタン押下する。

f:id:takedajs:20181209170755p:plain

リモートデバッグ接続要求を許可する。

f:id:takedajs:20181209170759p:plain

表示された開発ツールで右上にある「・・・」を押下する。

表示される「ポップアップを自動で隠さない」を選択する。

f:id:takedajs:20181209170756p:plain

開発中のアドオンのポップアップを表示する。

(例として開発中のアドオンのポップアップを表示しています。)

f:id:takedajs:20181209170758p:plain

ポップアップを表示させると、開発ツールの「・・・」の左に先程は表示されていなかったアイコンが表示されるので押下する。表示された項目の中から、ポップアップを選択する。

f:id:takedajs:20181209170757p:plain

これでポップアップのデバッグができるようなりました。

f:id:takedajs:20181209170800p:plain

参考

デバッグ | MDN

LambdaでS3のJSONファイルをローカルから取得する

Lambdaの開発をローカルで行うために、S3の情報をローカルから取得する必要がありました。 取得に少し手こずったので記録用として書きます。実装コードはNode.jsです。

S3にJsonファイルをアップロード

S3でバケットを作成し、ローカルで取得したいJsonファイルをアップロードします。

今回はテスト用に以下ファイルを作成してアップロードしました。

test.json

{
    "name": "takedajs"
}

アクセスキーIDとシークレットアクセスキーを取得

ローカルからS3の情報を取得するために、IAMユーザのアクセスキーIDとシークレットアクセスキーを取得します。

IAMユーザ作成画面で、S3情報取得を許可するためにAmazonS3ReadOnlyAccessポリシーを付与したIAMユーザを作成します。

ユーザー追加の完了画面にある「.csvファイルのダウンロード」ボタンを押下し、「Access key ID」と「Secret access key」が記述してあるCSVファイルをダウンロードします。

Lambdaのローカル開発環境構築

以下、ローカルの作業ディレクトリ配下で行います。

Lambdaコードの雛形を作成

index.js

'use strict';

exports.handler = (event, context, callback) => {
  console.log('test');
};

Lambdaコードを実行する処理を作成

test.js

'use strict';

const lambda = require('./index.js');

const event = {};
const context = null;
const callback = {};

lambda.handler(event, context, callback);

Lambdaコードの実行

作業ディレクトリはこのようになります。

$ tree -L 1
.
├── index.js
└── test.js

nodeコマンドでtest.jsを実行すると、Lambdaコードのindex.jsが呼ばれ、console.logが吐き出されます。

$ node test.js
test

これでLambdaのローカル開発環境構築が完成です。

ローカルからS3の情報取得

AWS SDK for JavaScript導入

作業ディレクトリ配下で以下コマンドを実行し、aws-sdkを導入します。

$ npm init
$ npm install --save aws-sdk

作業ディレクトリはこのようになります。

$ tree -L 1
.
├── node_modules
├── package-lock.json
├── package.json
├── index.js
└── test.js

S3のJsonファイル取得処理実装

先程作成したindex.jsに処理を追加します。

'use strict';

const AWS = require('aws-sdk');

AWS.config.update({
  accessKeyId: "xxxxxxxxxxxxxxxxxxxx", // 先程取得したアクセスキーID
  secretAccessKey: "xxxxxxxxxxxxxxxxxx", // 先程取得したシークレットアクセスキー
});

const S3 = new AWS.S3();
const BUCKET = 'xxxxxxxxx'; // S3のバケット名

exports.handler = (event, context, callback) => {
    let params = {
      Bucket: BUCKET,
      Key: 'test.json' // ファイル名
    };

    S3.getObject(params, function(err, data) {
        if (err) {
          console.log(err);
        } else {
          console.log(JSON.parse(data.Body.toString()));
        }
    });
};

S3のJsonファイル取得

nodeコマンドでtest.jsを実行します。 S3にアップロードしたtest.json中身が表示され、正常にJsonファイルが取得できたことが分かります。

$ node test.js
{ name: 'takedajs' }

参考

Node.js 内の AWS SDK for JavaScript | AWS

nodejs aws-sdkでs3ファイルアップロード - Qiita

新婚旅行でクロアチアに行ってきた

先週新婚旅行でクロアチアに行ってきたので、感想を備考録として書きました。

何かの参考になれば嬉しいです。

クロアチアってどこにあるの?

ざっくり言うとイタリアの右横らへんにあります。

クロアチアの場所

クロアチアに決めた理由

  • 馴染みの床屋さんに新婚旅行の話をしてたらクロアチアが良いと勧められた

  • 「魔女の宅急便」や「紅の豚」のモデルのきれいな街がある

  • 海外旅行に沢山行ってる奥さんが行ったことない国

行った場所

クロアチアのメイン所に行きました。

  • ザグレブ (首都)

広くないので1日で主要な場所をまわれる

ザグレブ

  • ドブロブニク (紅の豚のモデル)

一面がオレンジの屋根で感動する景色

ドブロブニク

  • プリトヴィツェ湖群国立公園 (ユネスコ世界遺産)

大自然の中で4時間ほどハイキング

プリトヴィツェ湖群国立公園

費用

6泊8日で航空券とホテルがついたプランを申し込みました。
全部で一人30万円くらいかなと思います。

以下、ざっくりとした内訳

  • 航空券: 10万
  • ホテル: 10万
  • 現地で使ったお金: 10万

良かったとこ

  • カタール航空でクロアチアに行ったが、料金が安い、キレイ、サービスが良く、全体的に満足度が高い。

  • ザグレブの人気店「プルゲル」のコスパがかなり良い。美味しい。

  • ドブロブニクがスターウォーズのロケ地。スターウォーズファンなのでテンション上がった。
  • プリトヴィツェ湖群国立公園のガイドツアーを申し込んだが、ガイドさんむっちゃ親切だった。

  • いたるところにアイス屋さんがあって、日本だと500円くらい取られそうなアイスが200円くらいで食べれる。

  • ゴミ箱がかなり多くあるから、街中がキレイ。
  • 景色の良いところが多く、写真の撮りがいがある。
  • 日本人旅行者が少なく、圧倒的にヨーロッパからの旅行者が多い。海外に来てる感がある。
  • 夜に女性が一人で歩いても大丈夫なくらい治安が良い。空港から市内に向かうタクシーでぼったくられたけど。。。
  • カフェがむっちゃ多い。しかも、ほぼ全店フリーWifiを提供している。

悪かったとこ

  • ザグレブとドブロブニク間の移動で使ったクロアチア航空。行きで2時間、帰りで30分の遅延。
  • ドブロブニクがリゾート地なので物価が高い。ザグレブと比較すると1.5倍くらい違う感覚。
  • テラス席があるレストランが多くオシャレで良いが、むっちゃハエがいる。夏だし仕方ないけど。
  • パスタの麺がかなりやわらかい。クロアチアでは、長く茹でるのが一般的みたい。

感想

悪かったことを何個か書きましたが、全体的に見ると良かったことが多く、新婚旅行でクロアチアを選んで正解でした。

特に良かったのが、日本人観光客が少なかったことです。

初めてヨーロッパに行ったのですが、周りがヨーロッパの人ばかりだったので、ヨーロッパ来たな!感が凄かったです笑

忘れられない絶景や美味しい料理との出会いがあり、良い思い出になりました。

おすすめクロアチア情報サイト

以下2サイトには、クロアチアに行く前と滞在中にかなりお世話になりました。

クロアチア観光・旅行サイトCROTABIクロアチア観光・旅行サイトCROTABI

【完全保存版】クロアチア旅行・観光のすべてがわかる!【総論編】