らいむぎばたけ

つかまえなくてだいじょうぶ

はじめての Web サービスを作って公開しました

はじめに

FJORD BOOT CAMPの最終課題で自作の Web アプリ をはじめて作り、「メディレコ」という名前で本日公開しました。本記事は Web アプリの紹介と作成経緯等についてのまとめです。

github.com

自己紹介

@lime1024と言います。非プログラマです。職業は一応エンジニアリングの会社ですが、(毎日、紙の書類とにらめっこして判子を押して PDF 化してファイリングして鍵のついたロッカーに閉まっていたので)プログラミングには全く関係有りません。 2018年5月23日にプログラミングの勉強を開始、2018年8月21日から Rails の勉強を開始 、2019年1月22日に本アプリを rails new しました。

作った Web アプリ

「メディレコ」

f:id:lime1024:20190327131354p:plain

メディレコ」という、医療費控除申請書類をかんたんに作れるアプリを作りました。医療費をメディレコに記録すると、国税庁指定の「医療費集計フォーム」に記入された状態でダウンロードができるので、確定申告のときに読み込みを行うことで簡単に医療費控除の申請ができます。

アプリについての詳細は GitHubREADME.md を見てください。

作った経緯

今年の確定申告(なので去年分)で、はじめて医療費が 10 万円を超えそうだったので、確定申告するぞ〜〜〜と意気込み Google スプレッドシートに自分と旦那の分の医療費を書き溜めていました。が、後から領収書が出てきたときにセルの行を入れ替えたり、病院名を他の行からコピペしたりするのが面倒だったので、折角なのでこれを最終課題の Web アプリの開発の題材にしようと思いました。

やったこと

進め方

構想からデザインを含め実装、デプロイまで、丸二ヶ月で完成しました。タスク管理は GitHubProjects を使って進めました。issue と PR を紐づけて管理できるので使いやすかったです。自分でやりたいことをどんどん issue に書き出していき、バグ、指摘事項やアドバイスも issue に起こし、一つずつ潰していく、を一週間周期で繰り返して進めていきました。

大変だった issue

元々、コントローラに書いていた処理をモデルに切り出しました。コピペくらいでさくっと終わると思っていたのですが、current_userparams がモデルで使えないので、コントローラから渡さないといけなかったり、 respond_to はコントローラに書かないといけなかったりで、結構ハマりました。

楽しかった issue

進めていくのはずっと楽しかったですが、強いていうと...

医療費登録画面から遷移して家族と支払先を登録したときのみ、登録完了後に医療費登録画面に戻るようにしたかったのですが、どのページから遷移したのかの情報を取得する方法がよくわからず難しかったです。

医療費登録画面から家族と支払先に遷移するときのみ URL に from=medical_bill を追加して params[:from] で取得できるようにしました。そこから hidden_field を使って、家族と支払先を登録するときは params[:from] を渡すようにして、家族と支払先を登録するときに params[:family_member][:from]params[:payee][:from]medical_bill が含まれているときは、医療費登録画面に戻る、というようにして、なんとか完成しました(文章化したけど解読難しいですね😇)。

ナンモワカランゼッタイムリという状態から始まったので、この issue はやりきったぜ...という気持ちが強かったです。旦那にヒントとなるキーワードを教えて貰いながら進めました。

さいごに

アドバイスを頂いてから未だ修正できていないところや、これから @machida さんのデザインレビューもあるので、今後もメンテして、大事に育てていきたいなあと思っています🐤。 医療費控除したいな〜でも確定申告ってなんだか面倒くさそ〜〜と思っている人にぜひ使ってほしいなー!と思います。自分が一人目のユーザなので、誰も使わないということは無いので安心ですが...😅

アプリを作るにあたって、せっせこバグを見つけてくれた @kirikiriyamama 、毎週相談に乗って頂いた @komagataさん, @machidaさん、テストかけ〜と念を送ってくれた @yu_suke1994 と、アプリの完成をずっと見守ってくれた @beta_chelsea, @hnmx4, Zenshin.web のみんなには感謝しています🙏

このアプリの完成度で、どこまで評価してもらえるかは分からないですが、転職の足がかりになればいいなと思います。ですので、転職先とバグ報告をお待ちしています!w

Rails Girls Tokyo 11th に再びスタッフとして参加した話

はじめに

前回Rails Girls Tokyo 10th にスタッフとして参加したときのアフターアフターパーティで、@rllllhoちゃんが次回のオーガナイザーをやりたい!!!と話していたので、自分ももう一回、ガールズの喜んだ顔がみたい!と思い、再びスタッフに立候補しました。

スタッフの裏話(?)なので、本編は他の方々のブログを参照してください🙇‍♀️

やったこと

飲み物の手配

コーヒー編

f:id:lime1024:20190225163020j:plain

@emorimaさんの案で、コーヒーをどこかに頼めないかな?ということで、スタバのコーヒーを用意しました!!大好評完飲御礼(?)でした🎉🎉🎉

10th のときは事前に購入したペットボトルコーヒーが 3.8L だったので、今回は人数比を考えて 6L をスタバで事前予約し、当日に臨みました。が!開始一時間で 6L が全て無くなるというwwww(なくなった瞬間は笑うしかできなかった)

急遽 12L を追加で用意して頂き、取りに行ったのですが、運搬の道中で腕が引きちぎれそうになりました🤯ちぎれなくてよかった。 しかしながら、15 時の休憩時間の序盤にはまた無くなってしまい、コーヒーを飲めなかった人が沢山出てしまって申し訳なかった...

桜のカップを用意して頂いたり、当日の急なお願いにも柔軟に対応して頂いたスターバックス 有楽町ビル1階店さんには感謝しかないです...本当にありがとうございました。

牛乳編

当日朝にカフェオレ用の牛乳を買うことを忘れないために、家の Slack にリマインダをセットしたと思ったら railsgirlsjp の Slack で設定してて恥ずかしかった...

f:id:lime1024:20190225170904p:plain

名札の作成

f:id:lime1024:20190225171611p:plain f:id:lime1024:20190225171549p:plain

上が参加者用で、下がコーチ・スタッフ用です。

ロゴデザイナー兼コーチの @risacanさんに作って頂いたロゴの雰囲気が壊れないように...と考えながら作りました。フォントも書いて頂いたので、統一感は出たんじゃないかなー!と思っています🙌

他にも、ステッカーの入稿や T シャツの入稿を担当しました。T シャツの入稿では、はじめて SUZURI を使ったのですが、使いやすかった...!

さいごに

ガールズの楽しかった顔も勿論嬉しかったのですが、なによりオーガナイザーの楽しそうな顔が見れて、それがとても嬉しかったです。大変なこともたくさんあったけど、楽しい会でした!

おまけ

いつか渡せるその日まで、らいむの Rails Girls Tokyo 11th は続く...

「ゼロからわかる Ruby 超入門」を終えて

チェリー本の6章までやったあたりで、自分の勉強方法や知識に関して不安にかられていたところにちょうど発売されたので、@igaiga555 さんの Ruby 超入門をやってみました。

勉強時間は、休憩やこのブロク書きつつで合計41時間でした。

ゼロからわかる Ruby 超入門 (かんたんIT基礎講座)

ゼロからわかる Ruby 超入門 (かんたんIT基礎講座)

すすめかた

とりあえず手を動かすのが一番かなと思い、コードは全て写経しました。 本の chapter 毎に branch を切り、練習問題を終えたらプルリクを出して旦那にレビュー依頼をして OK が出たらマージしていました。 いま、このブログを書いている時点では、 OK が出ていない chapter があるので、実際には超入門を終わっていないとも言えるけど。

lime1024/rubybook: igaiga超入門

よかったこと

解答集が分離できる

自分の昔からの悪いところで、解答があるとちょっと分からなくて詰まっただけで、ついつい解答を見て自分を甘やかしてしまうので、解答は外して旦那に預けていました。 それに伴い、演習問題の採点(?)もしてもらいました。ありがとう🙏

かわいいは飽きない

カフェやコーヒーに例えられていることで身近な言葉で表現されているのでわかりやすいこと、なんといってもイラストがかわいいこと、この2つのおかげで読み進めていく中で飽きることが無いので、途中で積み本になることなく終わらせることができました。

本当に超入門だった

初心者向けとか、入門書って実際開いてみるとそうでもないときがあるのですが、本当に超入門でした。

drinks = ["カフェラテ", "コーヒー"]
drinks.each do |drink|
  hoge
end

例えば以上のようなコードがあったときに Ruby の勉強をはじめた当初は、 drinks という複数形で書かれた配列があって each で取り出すときは、単数形の |drink| じゃないと絶対駄目なんだ!と思っていたので、(超入門以外の)勉強をしている中で突然 |d| や、 |n| , |x| なんかが出てきたときには「なんで、単数形で書かれていないのに動くの??どういうことなの?!???」ってなっていました。

そんな中、超入門のコラムの一文で・・・

drink は変数なので、名前は x でもなんでもいいのですが

なんでもいいんだ〜〜〜〜〜!!!! この、きっとみんなが当たり前のようにわかっていることなんだけど「なんでもいい」と一言書かれているだけで救われる人間がいるんだよ〜〜〜〜という気持ちになって凄い嬉しかったです🙏

リファレンスマニュアルの読み方が書かれている

「分からないときは公式ドキュメントを読もう」は分かるけど、公式ドキュメント見てもよくわかんない...と、はじめの頃はなることが多かったので、リファレンスマニュアルの読み方が書いてあるのは嬉しい!

なによりたのしい

やっている間、終始楽しかったです。この本に巡り会えてよかったと思える本でした。これからも勉強がんばるゾ〜〜

非プログラマ嫁がプログラマの旦那に一泡吹かせてやろうと奮闘した話

※この記事は苫小牧高専アドベントカレンダー2018 18日目の記事です。

はじめに

2011 年度 電気電子工学科卒業のらいむです。 電電卒で、いまはどちらかというと土木・建設寄りの会社で管理系のお仕事をしていて、趣味でプログラミングの勉強をしています。今年の春に結婚して、いまは Ruby プログラマの旦那と一緒に暮らしています。

後輩のえむけーくんに、このアドベントカレンダーを声かけてもらった(?)ので、プログラミングの勉強をはじめるきっかけとなった話を書こうと思います。

きっかけ

Slack との出会い

我が家では、旦那との主なコミュニケーションに Slack を利用しているのですが、使い始めるまでは「Slack?あー、名前は聞いたことあるかな」程度でした。 Slack を使い始めて少したったある時に bot なるものの存在を知り、非プログラマの自分が作ったら、旦那は驚くかな?喜ぶかな?と思い、タイトルの通りへへへ、一泡吹かせてやるぜと思い、旦那に秘密で bot を作る事を決めました。

プログラムをかく

いざ!プログラムを書こうと思っても、何の言語を使ってどうやって書けばいいのかさっぱりわからん!と思い、まずはググる。ひたすらググる。 サーバが必要だということがわかるが、お金がかかる!うまくできるかわからないし、使い方?もよくわからないことにお金をかけるのは...と思い、お金をかけない方法で bot を作る方法を模索しました。

そして見つけた Google Apps Script!!!

初心者がGASでSlack Botをつくってみた - CAMPHOR- Tech Blog を参考にしてコードを書きました。基本はここのサイトを参考にしつつ、色々なサイトを見ながら切り貼りしていってコードを完成させました。

大変だったこと

どの言語で書くか

プログラミング!と言ってもたくさん言語がある、ことまでは分かっていましたが、この言語で書きたい!みたいなものが無かったので、言語選定を悩みました(そもそも bot 作成時点では C 言語くらいしか知らなかった)。最終的には GAS を使う事になったので必然的に JavaScript になりました。

Google Drive 上のデータの表示方法

bot のアイコン画像や、 bot の発言内容をまとめたスプレッドシートを指定する時に、表示された URL をそのまま直リンクしたところ、表示ができなかったのでググる。ただただひたすらググる。参考にしたサイトをメモしていなかったので、残念ながら詳細を忘れてしまったが、 URL の書き方を変更することで、無事に解決することができた。

テスト投稿でバレる

プログラムを一通り書ききったので、さあどんなもんだ!と思ってテストを実行!だがしかし!!テスト環境(?)なんてものは用意していない上に、 Slack のチャンネルは #general しか知らない(そもそもチャンネルの作り方を知らなかった)ので #general に投稿されました。これにより、この時点で旦那に bot が見つかるという・・・・・

bot がひとりで喋り続ける事件

Outgoing WebHooks で bot が反応するトリガーワードを、bot 自身が発言するワードと同じワードにしてしまい、 botbot にレスをするようになってしまいました。ここからは無限ループです。止まらない。終わらない。bot の発言に bot が返信をして、その bot の発言に bot が返信をして・・・・・そして Mac に入っている Slack アプリがフリーズしてしまうという。

急いで Outgoing WebHooks でトリガーワードを変更して、なんとか無限ループから脱出。この時は本当に怖かったのを今でも鮮明に思い出します。

bot の完成とお披露目

テスト投稿という名の無限ループ bot のお披露目になってしまいましたが、旦那が驚きつつも喜んでくれて、無事に一泡吹かせてやることができて本当に良かったです。

今後の頑張りどころ

当時はどの言語を選択したら良いのかわからなかった & GAS を使用したので JavaScript で書いた bot でしたが、旦那から Ruby の勉強を兼ねて、Ruby で書き直したらいんじゃないかな〜あとは Slack で部屋の電気を off/on できるようにしたいな〜〜と言われているので、頑張っているところです。7割くらいはできていて、いまは Google スプレッドシートにある bot の発言内容のリストがうまく拾ってこれなくて苦戦中...

最後に

プログラミングに興味がなかった(なんなら学生時代は大嫌いだった)私がこの Slack での bot 作成をきっかけにプログラミングの勉強を始めた話でした。今年はプログラミングとの出会いのおかげで、様々な道が拓けた一年になりました。今後も勉強頑張りたいと思います💪

明日は、学生時代に廊下で遭遇すると毎回タックルをしてきたない子ちゃんです。

Rails Girls Tokyo 10th にスタッフで参加した話

はじめに

オーガナイザーの@neko314とご縁があって、Rails Girls Tokyo 10th に参加してきました。 友人達にちょっと勘違いされていたのですが、実はガールズじゃなくてスタッフでした。

イベントのスタッフは高専カンファレンス in 関西 以来だったので、実に6年振りでした。

表のイベント自体の話はきっと他の人がたくさん書いてくれると思うので、今回は裏側のスタッフとしてやったことの話を書こうと思います。 イベント本編とイベントへの思いはこちらのねこさんのブログへ!

やったこと

飲み物の準備

スタッフの特権!!! ということで、自分の好きなお酒を揃えました。自分の趣味を全開にしつつ、みなさんの好みを網羅出来たら良いなあと思いながら選びました。 お酒の選定に関して、@tdakak@yotii23から「良かった!」と、直接声をかけて頂けて嬉しかったです。

好きなものを揃えるにしても「参加者数に対してビールはどのくらい?チューハイ、ソフトドリンクはどのくらいにしよう??みんな何が好きかなあ、残して廃棄するようなことは極力したくないなあ」という気持ちはあっても、結局そこから数をどのくらい用意すればいいのか、の結論を出すに至るまでが大変でした。「hoge 人のときはこのくらい準備した、これが余った」みたいな情報を蓄積していければ、同じような悩みを持つスタッフがいなくなるかな?と思うので、今回得た経験をまた次に活かせるようにしたいです。

名札の作成

ロゴ以外のデザインから、Kinko'sに入稿するところまでやりました。

f:id:lime1024:20181015200543p:plainf:id:lime1024:20181015200546p:plain

上が参加者用、下がコーチ・スタッフ用で、コーチ・スタッフ用には各々のアイコンが入っています。

イラレ

一番始めにぶち当たった壁(というより衝撃⚡)は、イラレを「電気屋さんで買って CD-ROM でインストール」しないところでした...😅ここで「サブスクリプション」という知見を得ました。

イラレを初めて扱ったので、使い方がわからなくてインストール以降、何度も壁にぶち当たりましたが、旦那のやままが使い方を教えてくれたり、一緒に調べてくれたり、とても助かりました、本当にありがとう🙏 「そもそもイラレとフォトショの違いとは」から教えてくれた旦那には圧倒的感謝しかないです。

デザイン

ロゴの雰囲気を壊さないようにしつつ、秋感をもっと出したいなーと思ってこのデザインにしました。

はじめのデザインが以下になります。最終版と大枠は変わりないのですが、ここからの細かい調整やフォント選びが一番大変でした。

f:id:lime1024:20181016152137p:plain

はじめは、ロゴの六角形を活かそうと思って、ロゴと枠線が交わっているデザインにしていましたが、デザイナーの@miwako_designから、交わっている角の部分が処理しきれない事を教えて貰い、最終デザインに至りました。

これ以外にもたくさんの事を教えて頂いて「正直デザインに興味無いけど頑張るぞ〜」から「楽しいぞ〜」までを経験することができました。

入稿

Kinko's がとても柔軟に対応してくれるので、名札の紙質選びが出来て良かったのですが、柔軟すぎて(選択肢の幅や、選択式ではなくて文字で打ち込む項目が多くて)入稿だけで結構ヒィヒィ言ってました。 はじめて利用するときは実際に店舗にデザイン持っていって相談したほうが良さそう。

さいごに

以上、スタッフの自分が何を頑張ったかの記録でした。

この楽しい会を作る一員になれて嬉しかったです。 参加したガールズの人たちにも、コーチの人たちにも、楽しい会になっていれば、スタッフとしては本望です。

(アフターアフターの最後のほうで、@emorimaと話していたら嬉しさのあまりちょっと泣いてしまった)

DokerでDebianはじめました

はじめに

Debian をインストールすることになったので、やままからよく聞くクジラさん(Docker)で環境を作ってみることにしました。

それではインストール!

brew で cask をインストール

  1. まず brewbrew tap caskroom/caskcask をインストール
  2. 参考 - Homebrew Caskで楽々インストール | 株式会社 エヴォワークス -EVOWORX-

Docker のインストール

  1. cask を使って Docker をインストール
  2. brew cask install docker でおわり。
  3. くじらのアイコンめっちゃかわいい!!!

Debian をインストール

  1. Docker を起動する。Docker is running になってホッ

  2. Debian イメージをダウンロード

  3. docker pull debianで簡単に Debian が入っていく...

Debian を起動する

はじめて

docker run -it debianで起動!

以降

はじめてで起動したコンテナと同じものを起動する前提で進めていきます。

コンテナの確認

docker ps -a で前回作成したコンテナIDを確認する - docker ps : いま起動しているコンテナを確認できる - docker ps -a : -aオプションをつけることで停止しているコンテナも確認できる

終了しているコンテナを起動する

docker start {CONTAINER ID}

指定したコンテナに入る

docker attach {CONTAINER ID}

コンテナを指定せずに始めると、新しいコンテナが作られるので、一般ユーザの情報やインストールした情報等、全て消えます。消えました。とりあえず勉強をすすめていく中ではひとつのコンテナを利用することが多いと思うので注意が必要、その為の忘備録としてこのブログを書きました。

コンテナから抜ける

^p^qこれで抜ける(dettachというらしいが、よだれ垂らしてる人にしか見えない)

dettachするとコンテナを起動したまま抜けることができる(exitとは意味が違う) docker stopexitはおなじ

おわり

自身の反省を生かした忘備録でした。

APTについて

はじめに

フィヨルドブートキャンプの課題です

APTについて

前提条件

まず、Docker をインストールし、Docker に Debian をインストールしました。 別途、さくらVPS 使って同じことやってみようかな〜と思いつつです。

APT とは

  • Debian における Macbrew のようなもの

コマンドを使う前に

apt コマンドで出来ること

  • まずは vim を入れてみる前に、apt にはどのようなコマンドがあるのか man で確認
    • bash: man: command not found
  • manの行方は別途調べる事とし、APT - Wikipedia で内容を確認。
    • 検索方法 : apt search 検索キーワード
    • インストール方法 : apt install パッケージ名
    • アップデート方法 : apt update
    • アンインストール方法 : apt remove パッケージ名

実際にやってみた

  • 以下の手順で vim をインストールとアンインストールの練習
    • インストール : apt install vim
    • アンインストール : apt remove vim

まとめ

  • 最後に再度インストールをしたので、Debianvim が使えるようになった
  • brew を使ったことがあれば考え方は頭にすっとはいってきた
  • apt-get moo かわいい

f:id:lime1024:20181011180949p:plain