『週刊』オリジナルアプリ奮闘記④【第7号】
こんにちは！
テクノシップブログです！
今回が第7回目の記事になります！
私は現在ITエンジニア養成スクールの『TechCamp』の第109期生として
プログラミングを勉強しています。
その中で、学習の総仕上げとして
「オリジナルアプリの実装」
という課題があります。
その実装の過程を「奮闘記」として週刊でお送りしています！！
さて、今回は前回の記事から1週間ということで、
前回立てた目標の確認と、この1週間で学んだことのアウトプットです。
前回の目標の成果の確認
前回立てた目標は以下の通りでした。↓↓↓
結果はどうだったのか。
この目標は達成しました！！
現時点(2/27)での進捗状況は以下のようになっています。
見事全ての機能の実装を完了することができました！
黄色の枠で表示している2つの機能を追加し、
さらに目標だった「伝票出力機能の実装」が完了しました。
目標達成の要因
目標達成の要因を自分なりに分析してみると、
①ユーザー目線で実装の追加を考えたこと
②エラーでつまづくたびに分からない点を整理し解決していったこと
この2点が挙げられます。
①については、商品と取引先に関して、
登録済みのものを一覧で表示できるようにするという機能の実装に関する話ですが、
これは対象ユーザーとしていた母親に試作品を試してもらった時、
「登録できるのは良いけど、何が登録されたのか分からない、、、」
という何気ない一言が実装のきっかけでした。
考えてみれば当たり前になくてはならない機能ですが、
こうしてユーザーに見てもらわないと気づかないこともあるものだと
驚くと共に、非常に良い学びが得られたと考えています！！
【登録済みの商品・取引先の一覧表示画面】
次に②についてですが、「伝票出力機能」の実装に関して、
処理の流れを把握してコーディングするのが難しく、つまづきました。
しかし、焦ることなくいつも通り
「何がどのように分からないのか」を紙に書き出すことによって、
一つ一つ実装を進めていきました！！
ここまでのエラーとの向き合いを通じて、エラーを解決するために良い方法
だと感じたのは、
●実現したい処理の流れを紙に書き出し、その中でどの段階が分からないのかを
明確にして質問を組み立てる。
●エラーに出会うたびに自分でエラーを記録しておき、次にエラーが起きた時は、
同じことを繰り返していないかまず確認する。
以上の2つの手法が効果的だということです。
特に2番目の「エラー記録」は非常に役立ちました。
エラーを記録してみて気づくことは、
「意外にも初歩的なミスを繰り返している」
ことが多いということです。
こうして目に見える記録をつけて見返せるようにしておくだけで、
「簡単なミスほど気付きにくい」という状況を減らせると思います！！
おすすめはGoogleスプレッドシートに記録していくことですね👍
私はこんな感じで記録しています↓↓↓
よろしければ試してみて下さい！！
難しかった点のアウトプット
ここまでで難しかったのは、
「伝票出力機能の実装」です。
処理の流れとしては、
「伝票を作成する」
↓
「作成した伝票の詳細画面に移動する」
↓
「詳細画面に『PDF出力ボタン』がある」
↓
「出力ボタンを押すと、PDF出力ができ、印刷もできる」
という流れを想定して作り始めました。
せっかくなので、実装の流れをアウトプットします。
①「Thinreports Editor」の準備とgem「thinreports」の導入
今回の出力の流れには、
「Thinreports Editor」と「Rubyの『thinreports』というgem」
の2つが必要です。
この2つを用いたPDF出力の方法は以下の図のようになります。
このThinreportsを用いた実装の利点は、
Thinreports Editorでの雛形の作成を視覚的に行うことができるため、
微妙なデザインの調整が簡単にできるということです！
PDF出力の実装には、他に「Prawn」というRubyのgemを使う方法も
あるそうですが、こちらは雛形を作るときのやり方が視覚的ではなく、
非常に面倒臭いそうです💦💦
まず、「Thinreports Editor」をインストールします。
インストールはこちらからどうぞ！！
「クイックスタート」で練習もできますので、簡単ですよ！
次に、Rubyの「thinreports」をインストールします。
Gemfileに記述してbundle installすれば大丈夫です。
②Thinreports Editorにファイルを作成して、雛形を作る
値を埋め込むための雛形を作成します。ファイルを作成して、
所定のディレクトリに配置しましょう。
雛形は上の画像のように視覚的に作成することができるので、
非常に扱いやすいです。
「id名を決めて値を入れる箱を用意し、Text Editorから入れ込む値を指定する」
という基本的な流れに沿って行えば実装できます。
③Text EditorでPDF出力のための処理を書く
以下、私が記述したものになっています。参考程度に載せておきます。
私は、個別の伝票ごとに値を入れ込み、PDF出力ができるようにしたい
と思ったので、slipsコントローラーに「output」というアクションを定義し、
＠slipというインスタンス変数に入れた個別伝票情報を扱えるようにしました。
④PDF出力ができるかどうか確かめる
以下が実際に出力したPDF画面のサンプルです。
微妙なデザイン修正を繰り返し、望み通りのデザインを目指しましょう！
この1週間のまとめ
この1週間を一言でまとめると、
「粘り強さが大切」です。
前回と同じですが、
「分からない点を分解して明確にしていく」
ということを繰り返して行けば、自ずとエラーの解決はできると思います！！
オリジナルアプリの実装を終えて
オリジナルアプリを終えてみて、
カリキュラムのように決められた手順がないという状況は、
予想していたよりも難しいものでした。
次にどうすれば良いのかということを自分で決めなければいけない状況は
相当負担なものです。実際、途中で1週間くらい実装に手をつけなかった時も
ありました。
しかし、カリキュラムの復習という面に加えて、
新たな技術を自分で学んで形にするという目的もあったので、
そういう点では「学んだことがすぐ形になる喜び」が大きくありました。
非常に良い経験になりました。
テクノシップ第7号プチ編集後記
〜PDF出力機能はできない可能性も大きく考えていましたが、
思いのほか実装できてしまい、
「何事も諦めないこと」の大切さを実感しました。
〜
