Goobike のお気に入りを保存するアプリを作った

プロトタイピングくらいなら、コードを書かずにいけるんじゃないかな・・・。出来上がったものがこちら。

github.com

やったこと

Goobike で見つけたバイクをスプレッドシートに保存し、リストで表示するやつを作った。

モチベーション

バイクを売って１年も経っていない今日このごろ、謎のフラストレーションが溜まってきてバイクに乗りたくなってきた。やっぱり一人でお出かけをするのが好きだし、車にはない身軽さや冒険がバイクにはある。でも今は駐車場とか移住計画とかがあって買うべきじゃない。それならばせめて、Goobike でお気に入りの登録だけでもやっておいて買うべき時が来たときにスムーズに買い物ができるようにしたいと考えました。ただ、 Goobike のお気に入り登録機能はちょっと残念。具体的には次の点。

• お気に入りに登録できるのは10件まで
• アプリで同期ができない
• お気に入りに登録した商品が売れても気が付かない

登録上限はなぞの仕様ですが、それ以外については普段から複数の端末を利用するのがデフォなので結構困る。せっかくAndroid/iOS向けにアプリを出しているのだからしっかりして欲しいところ。と、文句を言っても仕方がないので自分でなんとかすることにしました。

技術スタック

これくらいのことならコーディング不要では？と思ったけれど、結局 Google Apps Script を使いました。

Google Forms

お気に入りに登録したい商品の URL を入力するフォーム

スプレッドシート

Google Forms の入力結果を保存する。Google Apps Script をトリガーして結果を保存する

Google Apps Script

Goobike からデータをスクレイピングしてスプレッドシートに書き込む。Claps を使って Typescript で記述。

github.com

Glide

スプレッドシートのデータをいい感じにアプリっぽく表示するやつ。

go.glideapps.com

感想

Glide は時々話題に上がっていたので使ってみようと思っていたところ。今回のやりたい事的にマッチしてたのでチャレンジしました。アカウントを作ってダッシュボードを開くとチュートリアル動画が見れました。1個3分くらいの短いやつ * 10個くらいだったので子どもをあやしつつ字幕を表示して閲覧。スプレッドシートの表示だけじゃなく、データの入力や編集、編集をトリガーにした条件分岐など思ったよりもいろいろなことができるっぽいです。今回はほとんど表示だけだけど。

Glide を使うならスプレッドシートだな、スプレッドシートを使うなら IMPORTXML 関数を使えばいいな〜 と軽く考えていたのですが、実際には GAS を使いました。理由はまず Goobike のページが euc-jp でエンコードされていて IMPORTXML 関数が使えなかったから。そして IMPORTXML 関数はスプレッドシートを開く度に HTTP 通信が実行されて現実的じゃないと考えたからです。主に最初の理由が大きい。Clasp のお陰で GAS を Typescript で書けるのはいいのですが、いい感じの XML パーサーが無いのがつらいところ。GAS デフォルトのやつはちょっとしんどい。今回は手を抜いてパーサーライブラリを使いました。

https://script.google.com/d/1Mc8BthYthXx6CoIz90-JiSzSafVnT6U3t0z_W3hLTAX5ek4w0G_EIrNw/edit?usp=drive_web

抜き出したい文字列の前後の文字列を指定して抜き出す、なんだか不思議なやつですがまあ良いでしょう。これ使わないなら正規表現芸かなって思っていたし。

これらの構成が決まってから実装が完了するまでは2時間くらいで終わりました。ツールが揃っているのは良いことだ。ただ構成を考えるのにやや時間を使ってたぶん3時間くらいは考えていたかと思います。できることなら GAS を使わないでやりたかったなぁ。

課題

同じURLを除去するとかスマホ版のページに対応をするとかある気がするけど、まあぼちぼちやったりやらなかったり。

子どもを連れて湯村温泉に行きました

先日、3ヶ月になる子どもを連れて兵庫県北部にある湯村温泉に家族旅行をしに行きました。

www.yumura.gr.jp

もともと旅行が好きな性分なので子どもができても旅行をしたいと思い行き先を色々と考えていました。大阪から車で行くことができて温泉に入ることができて、と言った条件を満たそうと思うと有馬温泉や城崎温泉が有名ですが、じゃらんで旅館を見てもいまいちピンとくる旅館がありませんでした。そんな中ある日気になるレビューを発見しました。

今回が多分１０回以上の宿泊です こじんまりとした部屋や露天風呂、部屋など家庭を感じる宿です 女将さんも大変若く見えて素敵です。露天酒があるのは私が泊まったなかでは、ここだけでした。 今後も何度も利用しようと思ってます。

露天酒！！これは行くしか無い！！と一気にテンションがあがってその場で予約をしました。ちょっと家から遠いのが気になりましたが、なんとかなるやろう・・・.

12/11 10時くらい出発

初めての泊まり旅行のため荷物多め。実は泊まり旅行の予行演習としてすでに淡路島や琵琶湖を眺める日帰りドライブにでかけていて、荷物の雰囲気を掴んでいました。荷物の内訳はだいたい次のとおりです。

• 子供の着替えありったけ
  • 吐いたりおむつからうんこがあふれるため、1日2着以上は持っておきたい
• 缶ミルク * 4
  • うちは母乳とミルク混合なので
• 哺乳瓶 * 1
• 使い捨ての哺乳瓶: たくさん
  • 哺乳瓶の中に入れて使う使い捨てのアイテム。瓶が汚れないため持ち物の数を減らせます
• 哺乳瓶のニップル * 4個くらい
  • 瓶そのものは汚れなくてもニップルは汚れるため
• ありったけのおむつ
• おむつ交換シート
• おしりふき
• おむつを捨てる袋
  • まだ匂いがないので普通のビニール袋です
• お湯

これらを登山用の40Lのリュックに入れています。このリュック、登山のために買ったのに登山で使ったのは1回だけであとは子供のためにしか使ってないやw

これらに加えて布団、夫婦の着替えを入れて荷物が完了です。ただ、着替えは抱っこ中に子どもが吐いたり、おむつ替え中にひっかけられたりするため多めに持っていきました。結果、1泊の旅行とは思えない大荷物に・・・。次回以降最適化をして減らしたいところです。

12時過ぎに氷上PAで休憩

本当はもうちょっと手前にある西紀SAで休憩予定だったのですがちょうどお昼時で車を止められず、B案の氷上ICでトイレ休憩。出発前に授乳を済ませていたためここでの休憩は私がトイレに行くだけでした。ただ駐車場に立っていた「鹿肉コロッケ」の文字が気になったので1つ購入。

鹿肉の風味もありましたが、それ以上にゴロゴロのじゃがいも食感が楽しいコロッケで満足した気持ちになりました。

14時くらい 道の駅但馬のまほろば

氷上ICのフードコートは狭かったので、先に進んで道の駅但馬のまほろばでお昼をしました。ここは新大阪駅発のスキーバスツアーでよく利用する休憩スポットなので、ある程度勝手が分かっていました。授乳室があることも調査済み。ちょうど授乳タイミングだったのでここでお昼。

兵庫県北部と言えばコウノトリが有名ですね。

私はチキン南蛮を食べました。

白雲邸

休憩後宿泊予定の旅館、白雲邸に到着したのは15時半くらいでした。

www.jalan.net

どうやら我々の他に宿泊客は居ないようでとても静かでした。

温泉街散策

利用した白雲邸は湯村温泉の温泉街からは少しだけ離れていて、徒歩で移動する必要があります。と言っても1キロ無いくらいで大した距離ではありませんでした。夕暮れに沈む温泉街はそれはそれで風情がありました。ただ、意外と車の通りが多くて徒歩での散策には気を使いました。

吉永小百合のドラマ、夢千代日記を観光の売りにしているようですが流石に世代ではないのでそんなに響きません。ただこのあたりのエリアは「但馬杜氏」で日本酒造りの有名な地域。そのため「杜氏館」という施設では実際に酒造りに使っていた道具が展示されていて興味深かったです。ただ、とくに案内はなく簡単な看板が並べられていただけ。

蟹さん

晩ごはんはカニさん。カニさん美味しい。カニさんうめえ。ありがとう、カニさん。

カニ味噌って良いですよね。日本酒と最高に合います。

気合で子どもをお風呂に入れる

他に宿泊者が居なかったためなのかお風呂をほぼ貸切にして頂くことができました。そのため夫婦で子どもをお風呂に入れます。と言っても、温泉は流石に熱かったようで、湯船に入った瞬間に号泣してしまいました。シャワーを使ってどうにかお風呂を完了しました。なんとかできるものです。

で、個人的にめちゃくちゃ楽しみにしていた露天酒。

お風呂でお酒を飲む！背徳的な行為！！体には確実に悪いぞ！！気をつけような！！

半身浴をしながら長湯をして酔いを覚ましつつ飲みつつ・・・。

Pixel 4 で夜景を撮影

先日発売された Pixel 4 の星空撮影モードを試してみました。この日は月が明るくてほとんど月に持っていかれてしまいましたがそれでもオリオン座っぽいやつが写っています。すごいね、これ。ただ山の夜に浴衣でやることではなかった・・・普通に寒い。

温泉でゆで卵を作る

翌日は温泉でゆで卵を作りました。こういう温泉街だと恒例のやつ。地元の人が野菜なんかを湯がいているエリアを横目に見つつゆで卵を作ります。荒湯は温度が高くて温泉卵にはならないのだそう。

餘部橋梁を見に行く

湯村温泉から20分ほどの距離の場所に余部橋梁があります。今は新しい橋になりましたが古いものが残っていて道の駅になっているのだそう。とりあえず見に行ってきました。

偶然列車も来ていい感じ。ここでは子供の授乳を済ませました。授乳室は無いのですが座敷スペースを締め切って授乳エリアを作って頂けました。非常にありがたい。

コウノトリ但馬空港で YS-11 を見る

帰り道、授乳のタイミングで寄ったコウノトリ但馬空港にYS-11が展示されていてめっちゃテンションがあがりました。現物を見たのは初めてかもしれない。

非常に良いですね。

終わり

子どもを連れて行った初めての旅行でした。今後実家への帰省など子供連れで出かけることは何度もあると思うので、そのための予行演習ができたと思います。旅行へ行く前に授乳やおむつ交換ができる場所をいっぱい調べていきましたが、それでも漏れと言うか想定外の場所で授乳をすることもありました。その度に道の駅や旅館の方の配慮で対応をして頂くことができて非常に有り難かったです。

育休取り出して2ヶ月くらい経過しました

気がつけば子どもも無事に月齢2ヶ月を過ぎ、すくすくと育っています。早産だったため NICU 生活が長く、家に来てからはまだ半月くらいですが。毎日病院に通っていたあの頃が懐かしい。

育児休業も子どもが生まれるのとほぼ同時に取得したため、ほぼ2ヶ月経過します。誰かの参考になるかもしれないし、ここまでのことをちょっと振り返ってみようかと思います。

育児休業取得前

振り返るといろいろなことをやってた。

会社に育休、育休明けの働き方についての意思を伝える

家族間で子どもについての意識合わせを最初に行って、その後で会社に「こういう働き方をしたい」という意思を伝えました。弊社の場合 esa を使っていたのでそこに書きました。今見たら最初に文章を書いたのは2017年だったので、割と早い段階で初動をやっていた様子。

共有をした文章はこちら。

esa-pages.io

ここで共有した思いをベースにして育休取得に関しての意識合わせを会社と行いました。

引っ越し

numa08.hateblo.jp

このときの記事には書かなかったのだけれど、妊娠後の生活や出産後の生活を考えると東京はしんどいと思ったため。具体的には満員電車とか待機児童とか。大阪もそういった問題はあるけれど東京と比較するとマシだと考えました。

家事の効率化

大きく導入をしたアイテムは食洗機と衣類乾燥機です。

車を買った

大阪も大阪で満員電車だし、電車の妊婦や子連れに良い顔しない人がいる。結局、そういったものと戦うには車を購入して完全にプライベートなスペースを作るしかないと結論づけました。

振り返り

会社に意思を伝えておいたことは非常に良かったです。弊社の場合小さい会社だし（大企業でも同じと思うけど）メンバーがひとり抜けるとできないことがわりと増えます。そういった事柄に対し事前準備をできるだけ整える体制ができていたと思います。あと、国や自治体から助成金をもらうこともできました。

大阪への引っ越しについては微妙なところだと思っています。東京に住んでいたときより床面積が広くなったので住みやすいってのはあるけれども。玉出的なスーパーもあって物価が安いことも事実。満員電車などの課題については東京と同じだと思います。

食洗機と衣類乾燥機の導入は大きいです。食器を洗う手間や衣服を干したり取り込む手間から一切開放されてその分別のことや休憩ができます。とくに乾燥機は洗濯機と別体なので、洗濯と乾燥が同時にできて良いです。

生活を変えた一番大きな要因が車の購入で、お金はかかったけれどこれは正解だと思います。電車に乗る機会も減ったし、そのお陰か変な人に絡まれるません。金はかかったけれど、自分たちの生活を守るために必要な出費だったと思います。

育休取得中

ここからは今の所の生活について、どんな感じなのかと振り返りをやっていきます。

育児

授乳以外全て奥さんと分担でやっています。分担と言っても、事細かく担当を決めるのではなくて手が空いている方がやる感じ。圧倒的当事者意識によって自分から仕事を取りに行きます。

家事

家事全般は食洗機や乾燥機を使って結構効率化を進めました。食事についても朝食と昼食はルーチン化できるようにして準備の手間を減らしています。具体的には朝食は玄米ブラン、作り置きしたヨーグルト、サラダ、サラダチキンで1セット。昼食はベースブレッド、サラダ、鶏ハムです。ベースブレッドは定期購入にしています。

BASE BREAD®shop.basefood.co.jp

鶏ハムは近所で胸肉を2kg買って一気に作ります。だいたい5日くらいで食べきるので、食べきったら外食をしています。晩ごはんについてはなんとなく奥さんが作る頻度が多いです。

仕事

育休中なので仕事はしていません。が、実は育休取得直後は育休制度の勘違いをしていて週2日で働いていました。「これが半育休ってやつか」と勘違いをしていました。インターネットの記事を見ると、わりと定期的に働いている人がいたようなので・・・。実際には「一時的・臨時の就労」を除いて働いてはいけないことになっています。そこで最近は、諸事情で俺がやらなければならない案件のタスク消化（記事の執筆とか引き継ぎとか）、会社の会議ログを読むといったタスクのみやっています。

振り返り

育児、家事についてはタスクが多く休むタイミングがあんまりない問題があります。とは言え、お互いにワンオペ可能なので交互に休憩とったりして上手いことやってるつもりですが。昼食を時々外に食べに行く活動は心の健康面でも結構大事。あと、年末はシンカリオン劇場版とかスター・ウォーズの公開があるので交互に見に行きたい。

仕事はときどきやると、これはこれでリフレッシュになります。でもときどきコード書きたい発作がでてくるのでどうやって折り合いをつけるかってところですかね。経済的な面だと働いていないので給料はほぼ無い。その分育休給付金があるのですが、初回の申請が11月下旬以降、振り込みが12月となるため収入の空白期間があります。これは制度の問題なのでは？幸い、数カ月分の生活費の蓄えはあるので問題ないですがもうちょっと早く振り込んで欲しい。

これからのこと

生活にについてはこれから変わっていくことも多いので、あまり手を加えないで流れに身を任せようと思います。その一方で、移住を検討しています。家の間取り的に子どもがつかまり立ちなんかをするようになると、ちょっと狭くて怖いので。あと、道路が結構危険で走り回ったり自転車を覚えたりが危険そうなためです。家賃据え置きでもっと広くて車通りの少ないところに移住をしたい。ついでに月に１〜２会くらいカジュアルに都心に出られると嬉しい。あと、午前中からスノボ行って午後から働ける場所。

リモートワークだと選択肢が多くていいですね。

子供ができました

2056g の男の子です。

去る2019年9月18日の午前7時くらい、無事に妻が出産を終えました。1日前の17日に前駆陣痛のような痛みがあるとのことで病院へ行きましたが特に何もなさそうとのことで帰宅。夜になっても痛みが続くということで、深夜まで様子を見ていたのですが、朝5時くらいに痛みの間隔が5分くらいに変わってきたとのこと。

予定日まで3週間くらいはあるし、まさかなと思いながらも入院セットを持って病院へ妻を送りました。隣で痛がる妻を気にかけながら運転をするのはそれはそれで大変で、車の変速や道路の振動の衝撃がこんなにも強いものかと感じたことを覚えています。

病院では助産さんに診てもらって一言、「今から産まれますよ」。へ？産まれるって？子供が？マジか。

予定日が当てにはならないと聞いていたので、そうなんだろうとは思っていましたがさすがに3週間もずれるとは思いませんでした。妻は産休に入って三日目だったし。そんなわけで分娩台に上がって20分、産まれました。速い。twitter情報やHugプリ情報で、めちゃくちゃ時間がかかるものだと思っていたため、こんなこともあるのかと驚愕しました。速い速いと言っても妻の陣痛っぽいものは二日前には始まっていたことを思えば分娩台に上がってこそいないものの妻目線ではそれなりに長期戦だったのかもしれないです。お疲れ様。

現在は早生児で体重も少ないということでNICUに入っています。退院はしばらく先。このスキに家の片付けをしなければ・・・。今回、NICUがある病院を事前に選んでいたため特に不安を感じることもなくスムーズに事が運びました。病院選びは妻の情報収集がすごかったのでありがたさしかない。

というわけで欲しい物リストです。

www.amazon.co.jp

正直なところ、自分自身も何が必要なのか分かっていない部分も多いです。こういうのを持ってたら便利だった！みたいな情報を先輩諸兄にお伺いしたいところ。

ここから先は育休を取得するので、当事者意識で育児をやっていきます！がんばるぞい。

関係のない話だけれど、病院で必要な手続きを一通り終えた後で免許更新に行きました。講習の日程が偶然にも重なったんや・・・

講習室に入ったときに、「いっぱい人がいるけれど、今日子供が産まれた人は俺くらいやろうな」と謎の優越感に浸りました。

Mobile Act Osaka で MVVM について話をしてきました #MobileAct #Osaka

What/Why/How MVVM と題してiOS アプリで MVVM アーキテクチャとは何なのか、何故採用したのか、どうやって実装をしたのかを Mobile Act Osaka #10 で登壇してきました。

mobileact.connpass.com

久しぶりの登壇だったので気合が入った結果10分のLT枠にもかかわらず、20分くらいの資料を用意してしまいました。

大阪に来てからそろそろ3年目を迎えようとしていますが、勉強会での登壇はこっちに引っ越しをしてからは一切やっていなかったのでいい刺激になりました。懇親会でも何人かの方に声をかけていただくことができて、コミュニティの形成や参加という意味でも役に立ったイベントでした。

会場の Osaka Inovation Hub は大阪市から委託された企業で、こういった勉強会や起業家支援など様々な活動を行っている場所なんですね。2回くらいお邪魔をしたことがありましたが、初めて知りました。ぜひ活用をしていきたい。

OSAKA INNOVATION HUB – 世界につながる、 イノベーション・エコシステムのハブ

懇親会では MVVM アーキテクチャに関する質問に加えて、働き方やチーム編成についての質問もいくつかいただきました。その辺りについても、ノウハウや経験があるので、どっかのタイミングでアウトプットをしていきたいですね。特にいろいろなメンバーの集まった今のプロジェクトでは心理的安全性がかなり重要なキーワードになっていると思うので、その辺りについて発表をしてみたい。心理的安全性Night みたいなイベントが求められている？

flutter ポエム

https://flutter.dev/docs/get-started/install https://www.udacity.com/course/build-native-mobile-apps-with-flutter--ud905 https://felangel.github.io/bloc/#/

最近は flutter を触っている。

Dart について

マルチプラットフォームアプリを実装するために Dart 言語の利用を選択した Google や flutter チームの哲学にはもしかしたらスマホアプリエンジニアをスムーズに flutter へ移行させる目的があるのかもしれない。そう感じるほどには Dart 言語は java 言語を継承した言語であると思えた。 良くも悪くも Dart は java に近いため、行末のセミコロンやlet や ｀val｀ と言った変数宣言が ＊できない＊ など煩わしい点もあるのだが、学習コストは極めて低い。また java で冗長な表現になりがちな無名クラスや無名関数の表現方法についてはシンプルに纏まっていること、言語機能に async await yield と言った非同期/ストリーム用機能が備えられているためモダンなプログラミングを手詰まり無く実装できる。 総合的に見て Dartが選択されたことはスムーズな開発を行う上では適切な手段であったと感じられた。

flutter 本体について

React なんかの知識があればその概念を習得することはたやすい。だいたい同じ。State を持った Widget と State を持たない Widget を作って画面を構成していく。細かいところだけれど、React のように Widget を返す無名関数を作ることはできないっぽい。Widget のサブクラスを作って、インスタンスを生成する必要があるっぽい。 React と大きく違うところは Statefull な widget の State の管理方法。React では Widget の中に State としてプロパティを持たせたが、flutter の場合は StatefullWidget 自体は不変で、外部のコンポーネントからは不可視となる State インスタンスを可変なものとして扱う。この仕組で パフォーマンス上のメリット: Widget の生成や更新は State の変更があったときだけに限定できる プログラミング上の安全性: 外部から State が不用意に更新されることはない と言った恩恵が得られる。

bloc について

flutter と言えば bloc が最もポピュラーなアーキテクチャとして有名である。Business Logic Component パターンと呼ばれて、以下の制約のもと Redux っぽいアーキテクチャーを構成する BLoCの入出力インターフェースはすべてStream/Sinkである BLoCの依存は必ず注入可能でプラットフォームに依存しない BLoC内にプラットフォームによる分岐処理を書くことは許されない 以上のルールに従う限り、他の実装をどうするかは問わない 要は、Bloc という仕組みで Redux の Store に相当する部分からプラットフォーム依存のコードを排除しようという考え。Redux に慣れていればとくに違和感なく受け入れられるが、レビューの際にはビジネスロジックにプラットフォーム依存のコードが入らないように注意する必要がある。lint をいい感じにして import をチェックする仕組みを導入できると良いかもしれない。 懸念としては kotlin/scala の sealed class や swift の enum のようにパターンマッチに関する支援機能がDartに用意されていない点。Redux 的なアーキテクチャーなので Event -> State -> Widget の変換が発生するが、パターンマッチが提供されていないためコンパイラでは Event や State のパターン漏れが発生してしまう。また Dart はすべてのオブジェクトは nullable であり、また関数は暗黙的に null を返す仕様となっている。そのため、パターンの取りこぼしが発生した場合には実行時エラーのヌルポが出ることがある。これは Dart のアップデートに期待をしたいところ。

flutter の学習方法

公式のチュートリアルがしっかりしているので、一通りやるのが良い。Udacity でも flutter のコースが公開されているものの、リファレンスを見ながら進めていく必要もあってかなり大変だった。知識が無の状態でリファレンスを読むのは実質難しい。今は bloc を実現するためのライブラリであある、 ｀flutter_bloc｀ で公開されているチュートリアルを一通りやっている。実践的なアプリ開発を通していろいろなコンポーネントを一通り触ることができる。これをやった後で Udacity に手を出すのが良いかもしれない。

令和キャンプ

キャンプまとめは DayOut に書いてるのだけど、GW にやったことを残す意味で、こっちにも書いておこうかと。

高須町公園キャンプ場

GW 中はキャンプ日和の日もあったお陰で、多くの人がキャンプに行ったそう。後からニュースで見たけど、ふもとっぱらもすごかったみたい。

かくいう自分も、キャンプ場の目処だけ立てて予約せずに行ったら、行く予定のキャンプ場が全て満員だった。

色々と電話をした結果、どうにか開いていたのが三重県松坂市の高須町公園キャンプ場。

パームガーデン舞洲

奥さんの体調が万全じゃ無いため、屋外キャンプは避けてるけどキャンプしたいなー、ということでパームガーデン舞洲。

トレーラータイプのキャンピングカーに宿泊できるので、夜露に濡れることも無いし設営や撤収も無い。

用意された肉を焼くバーベキューも上手に焼けて、満足度の高い連休明けにできました。