カテゴリーの投稿を見る
発注メールのテンプレート自動作成の実装に取り掛かり始めてからだいぶ時間が掛かってしまいましたがついに今日完成しました！
今思うと、これまでやってきたタスクは何か１つできるようになれば実装できましたが、今回は今までやってきたテクニックを総合的に使うことが必要でした。
扱っているのはVue + TypeScript ですが
コンポーネント間のデータの受け渡し方
（お恥ずかしいですが） filterやpushなど基本的なメソッドの使い方
Dateオブジェクトを操作
営業日などを入れての日程計算
Vuex
正規表現
クラスや関数を自作
Slotの使い方
Vuetifyの使い方
Gmail API
といったものを使えるようになりました。
といってもサポートもたくさんして頂いたので、もっと自力でできるようにならねばと思った１日でした。
ですが、今日はずっと苦戦してたタスクがひと段落してよかったです。
続く。
今日も相変わらず社内タスク管理ツールの開発をしていました。
前回の続きなのですが、gmailの署名をそのツールに持ってくるというものなのですが、
人によって書き方が違うのでただエンコードしただけでは、署名のスタイルに差が出てしまいますね。
そこで正規表現を使います。
あとはPromiseを何となくコピペで済ましていたのですが、限界が来たと感じましたので黙々勉強していました。
非同期処理は今いろんなやり方があって、どれも一長一短ですね。。。とりあえず全部使えるようになります。
続く。
相変わらずタスク管理ツールから自動的に発注メールを送る機能の実装と戦っています。
流石にそろそろ終わらせたいですね・・・。
gmailの方で、宛先、件名、本文をタスク管理ツールから送ることはついにできました！！
前回は贈りたい文章がslotに入っていたので、それをいかに変数に入れるか考えていたのですが、よくよく見たらお隣さんの.tsにdocument.getBy—系をいい感じに書いた関数があったのでそれを利用して解決しました。
Slotでできるかは不明のままですが、とりあえずまずは動けば良しと・・・特に時間がかかってしまっているとそう思います。
あと残っているのは署名をメール本文下部に貼り付けることです。
署名機能自体はgmailにありますが、直接gmailにアクセスはしないのでこれを使うのは難しそうです。
本文とかはapiで送れたので署名もapiで送れないかと考えた結果、それっぽい機能がありましたがなぜかapiからそれをコールできなくてなぜか困っています。
gapi.client.gmail.users.settings.sendAs.list({})
これで署名を入った配列が返ってくるはずなんですが・・・
戦いは続く。
昨日に引き続きまして、gmailのapiに苦戦しています。
苦戦している理由としては、参考になる情報は検索したら出てくるのですが、
当然ですが、素のjsで記述されています。
ところが今の管理タスクツールはtypescriptで開発していますので、そのままコピペというわけにはいきません。
Import のやり方で悩み、とりあえず、これで取り込めているだろうと仮定して、コードを書いてみてエディターに怒られるという繰り返しの１日でした。
最終的に読み込むのを手伝っていただき。。。index.htmlのwindowからapiを作ることで不要なモジュールもいらなくなりましたし、importを書く必要も無くなりました。
今度は出力したい内容をjs内でslotを変数に入れたいのですが、ここで今度は苦戦しているので、slotの勉強をしようと思います。
わからないところが毎回見つかるので、勉強のいい方針ができるのでインターンはありがたいです。
続く。
いつも通り、社内タスク管理ツールの開発を行なっていました。
今手こずっている改修タスクがありまして、
こちらが注文したいものの詳細をまとめたものを管理ツールの方で自動で作成するようにして、それをgmailで相手に送るというものです。
メールの文面を自動で作るところまではできました！
しかし、それをgmailの方にうまく移すことができません。
原因はget送信なので送れる文字数に制限があるせいだと思います。
改修に入る前はメールで１つのみの発注ができる仕様であったので、文字数に問題はなかったのですが、
チェックボックスをつけた数の発注ができるようになったので、文字数がオーバーしてしまうこともでてきました。
ということで方法を根本的に変える必要がありますので、今はgmailのAPIに挑戦してみることにしました。
明日に続く！
本日もタスク管理ツールの改修をやっていました。
今日のタスクはデータテーブル上のチェックをつけたキャンペーン情報の情報をメールテンプレートに自動表示するというものでしたが、
件名に作品の名前を書く部分があります。
もちろんチェックボックスにチェックをつけた数だけ、条件を分岐する必要があり。。。
ここら辺の仕様は第３者はわかりませんので割愛しますが、初めてほぼ自分の力で機能を実装できたと思います！
これからもっと自力でできる範囲を広げていきますー！
本日もタスク管理ツールの改修をやっていました。
今日のタスクはデータテーブル上のチェックをつけたキャンペーン情報の情報をメールテンプレートに自動表示するというものでし
たが、チェックをつけた行だけ新たな配列に格納することはできたのですが、それをメールテンプレート側に渡す方法がわかりませ
ん。
Vueのコンポーネントから直接渡すのはあまり良くないらしく、
最終的には新たにtypescriptのファイルを作りそこに処理をかくやり方でやるのですが、一度情報をvuexを使ってstoreから取ってきた
り、新しく作ったtypescriptのファイルから新しいクラスを生成して新たな型を作ったりなど、新しいやるべきことが盛りだくさんの
一日でした。
あとはエラーが起きた原因を調べる方法で,エディターが怒っているところをみる（webstorm使用）やchromeの検証のconsoleをみ
る、console.logをみるなどの方法を取っていたのですが、
今日は新しくdebuggerを使ってエラーを確かめられるようになりました。便利すぎたので今後がっつり使っていきます
こんにちは、今日も社内タスク管理ツールの改修です。
本日はバナーの発注するときに呼び出されるメールテンプレートの改修をしていました。
締切日を自動的に表示させるところで、当初は普通に締切日をそのまま表示させていたのですが、二日前かつ営業日に表示を変えて欲しいとの声をいただいたので、それについて考えていました。
二日前だけなら簡単なのですが、そこに休日ではないという条件が必要です。
そこでプラグインを探すわけですが、koyomi.jsという営業日を色々といい感じにしてくれるものがあったらので、それで実装することができました。
途中でつまずいたところでは,
このプラグインはjsで今はtypescriptで書いているので、importでの読み込み方がよく分からなかったことです。
最終的にrequireで読み込んでくれたので良かったですが、importを使った方法はないのでしょうか・・・笑
次の改修ではついにVuexと戦うことになりそうです。
続く。
本日もまたタスク管理の改修作業です。
ついにデプロイされたので、ユーザーのフィードバックが返ってきます。
やはり人に使ってもらえると自分では気付けなかった不具合などが見つかりますね。
自分で作っているときは結構自分好みで作れるところがありますが、フィードバックから生まれるタスクは相手の要望をより汲み取る必要があるので、
少し自分が逃げていたような開発に向き合わなければなりません。
本日は検索した言葉が含まれるタスクを編集しているとランダムでその編集画面が消えてしまうというものでした。
最初はそのエラーがいつ起きているかも分からなかったですが、実際にエラーが起きているところをヒアリングした結果、
編集している間に検索したワードに一致している部分を消してしまうと検索条件から外れてしまい、検索結果から消えてしまうというものでした。
解決自体はシンプルなコードでしたが、そもそも今回はどのようなエラーが起きているか自体が分からなかったので、最近はvueがちょっとできるようになって画面にのめり込みがちですが、コミュニケーションを忘れてはいけないと思った日でした。
続く。
ついにインターンも２１日目になりました。
最初は環境構築から始まって、初めて使うフレームワークも言語も意味がわかりませんでしたが、最近は少し慣れてきたようで、ただネットの記事を丸コピレベルから
自分で少しオリジナルのコードが書けるようになってきました。
こうなると自分好みの機能とかが作れるようになってくるのでプログラミングが楽しくなってきます。
最近はある条件の時、セレクトボックスとかを出すといった処理をよく書くのですが、
変数作って
真偽判定するコード書いて
その時にif文でその部分を出す。
みたいな自分の中で定番処理が出てきました。
持ちネタが増えることで迷う時間も減りました。そしてまた新しいことを覚えようとする余力も出てきますね。
今日はVue.jsでリアクティブなプロパティを動的に追加するとこでつまずきましたので$setとかそこらへんを調べていこうと思います。
次回に続きます！
本日は前回の続きをやっていました。
ある情報をまとめたデータリストがあってチェックボックスにチェックをつけると、それらのプロジェクトの進行状況を一括で変更できるというものなのですが、
<v-checkbox>でチェックボックスを作り,v-modelでチェックした複数のリストを取得し、
進行状況の初期値を変数に入れておいて、取得したリストがidと合致する時が、ループさせて状態を変化させているうちにあったら、v-selectのitemsに対応する値で進行状況を書き換えるということをやりました。
今までで一番書けたのですが,プロミス処理が分からなかったのでそこを補強しようと思います。
インターンも１９日目となりました。最初はまだ来て数回かとか思っていましたが、時間が過ぎるのは本当に早いですね！
それから先日、社内全体の飲み会に参加させて頂きました。
会場は池袋虜だったのですが、室内、出される飲み物、料理とも全部おしゃれで感動しました。
ゲームも楽しかったですし、幹事さんたちに感謝です。
業務の方ですが、最初は何がわからないかわからないぐらいのvueでしたが、最近少し慣れてきまして、関数も自分で組み立てられるようになってきましたし、コンポーネント間の情報の受け渡しもできるようになってきました。
しかし、それでも作るべき機能の実装は難しいです。
今までは言語自体に苦しまされてましが、最近はロジックで悩まされています。
あと、最近タイピング効率化を推奨されており、私はプラインドタッチは日本語打つところは問題なくできるのですが、記号とかはブラインドタッチができません。
今度は完全なブラインドタッチをしようと、今は手が拙い感じになっています笑
色々やるべきことが見えてきて、楽しいですね。
それではまた次回に続きます。
今日はタスク管理ツールにジャンルごとに検索できる機能の実装に取り組みました。
実はフィルタリング機能自体は前回も作ったのですが、関数の作成などは自分だけではなかなか難しく、手伝ってもらいながら、そのロジックに追いつくのに必死でした。
今回は他のページにもまた別の検索機能を実装するのですが、問題発生・・・
他のファイルから取ってきたいデータをなかなか読み込めません・・・
どうしてもエディターの方で怒られてしまいます。
取ってきたいデータは配列が入ってくる配列がありまして、その中の配列の要素の中にまた、配列が入っている配列がありまして、その配列に要素にfilter()機能でアクセスしたいのですが、混乱してきますね・・・
僕にはまだ時々、jsで配列とオブジェクトが混ざってしまうことがありまして、いい加減そこらへんに慣れていきたいと思った一日でした。
今日、オライリーのJavaScriptの本を借りることができましたので読み込もうと思います」・・・続く。
今日は今まで作っていた管理ツールの機能調整についてのミーティングから始まりました。
今まではひたすら、与えられたタスクに取り組む形が多かったのですが、そのツールを使う方達も含めて話した初めての機会です。
今までは機能実装以外に考えることはより綺麗なコードをどう書くかや、パフォーマンスなど画面と向き合って考えることがメインでしたが、
ミーティングをすることで実際のユーザーの使ってみての感想を聞けますし、チームでより良いものを作っていこうというモチベーションもシェアされますのでいい経験になりました。
そのミーティングで改修するべき新しいことが出てきましたので、それについて取り組んでいました。
僕はいつも条件を書く時、if文で書き始めてしまう癖があるのですが、冗長であることが多いです。
今回実装しようとしたのは、ある〇〇が真もしくは偽の時を判定するものでしたが、
今日の業務を通して、!!を前につけることで真偽型を返せるテクニックを身につけました。
あと悩んでいたところがあって調べていくと、どうやらVuexの知識が必要のようです。
state/mutations/commit/actions/dispatch/this.$store
わからないことばかりだったので、そこらへんを勉強していこうと思います。
本日は最近やっているタスク管理ツールの方がひと段落したので、レビューをしてもらっている間に久々に別のタスクが振られました。
巷でよく聞くAWS（アマゾンウェブサービス）のデータベースのバックアップをPythonによる自動化です。
Pythonで自動化というのは、いかにもpythonらしいことをやっている感じがしてやる気が出ます。
しかし、自動化のやり方が全く想像つきません。
コードでもあれば、それをひっぱて来れば良さそうですがAWSは当然ですがGUIです。
データベース自体の作成はコマンドラインを使うこともなく画面上でサクサク進みますが、実際にバックアップの動作をどのようにコードに落とし込むか迷います。
そうしたらpythonでAWSを操作するライブラリboto3というものがあることを知り、全部を自分で書き上げられたわけではないですが、そのAPIを使ったらあっと言う間に実装できました。
用意されている機能を書くだけで、実際にバックアップのボタンを画面上で押した時に〇〇するみたいなことを考える必要もなく、少し自動化についてわかった日でした。
あとはgit stashなどの操作も覚えてきました。
次回に続きます。
本日も社内タスク管理ツールの改修作業を引き続き行いました。
今日のタスクのいつもと違うところは、今までは表示する文字を変えたり、色を変えたり、する、もしくは機能を新しく付け加える等でしたが、今回は一からコンポーネントを作っています。
最近、タスクに取り組んでいて思うことは、色を変えるなどの単純な変更は、技術的にも簡単ですが、やるべきことを把握するのも容易です。
しかし、機能を新しく作ったり、新しいページを作ったりする際には、作って欲しい相手の要望をしっかり把握することが必要です。
そうしないと条件文なども書けません。
エンジニアは黙々と作業しているイメージがありますが、ちゃんとコミュニケーションも求められる仕事だと肌で感じました。
コンポーネントを作る上で、一番苦しんだのが、やはり元あるデータの受け渡しです。
表示したいものを作っているファイルに取り込む上でimportやexport、またはtypescriptを使っているので＠propの登録などがあります。これが自分の中ではきちんと書いているつもりなのですが、なかなか認識してくれないことがあります。
コンポーネントを作るのは今までの総合復習みたいな形で取り組んでいますが、しっかり内容を噛み砕いていこうと思います。
社内タスク管理ツールの改修を始めてからしばらく経ちます。
最初は少し既存のコードを書き換えるだけのもので簡単でしたが、最近は自分で関数を作って処理をしないといけないので自力でコードを書く力が求められます。
特にJS, TypeScript, Vue.jsどれも書き方が同じわけではないので、いまだに混乱している自分がいます。
今回はある質問があって埋まってないと、そこの色を変えるというものだったのですが、
関数を作る上で、メソッドの使い方がわかっていない、しかもその原因が、オブジェクトと配列が同じものに見えてしまい、うまく使うところを指定できない。
次に埋まっていないところをあぶり出す条件。
これらに苦労していましいました。
そしてこの関数が出来上がったら、見た目に反映すためにこの条件が真の時、新しいクラスをSCSSに付け加える作業をするのですが、１つのタスクにかなり頭を使ったので、またしても混乱してしまいます。
やはりここら辺は定番の処理のようなので、ここら辺で体力を消耗しないようにして、テキパキと進めていくのが今日の反省でした。
今日もいつも通り改修作業と思いきや、サプライズがありまして
突然、PCを組んでみないかと言っていただき、PCを組むことになりました。
目的は社内Kubernetesを運用するためだそうです！
初めて聞く言葉ですが、やたらにカッコいい響きです。
どうやらこれは、インフラツールのようです。
初めてPCを組むわけですが、デスクトップの中身は意外とスカスカですね。ものすごい大きなイメージの割にです。
まずは基盤のマザーボードに繋いであるやたらに多いコードを外していきます。
そして基盤を取り除いた後は、
新しく購入された
マザーボード
CPU
メモリ
SSD
を繋いでいきました。
精密機械なので慎重に扱います。
一番難しかったのはマザーボードとパソコンの外見の電源コードをつなげる作業です。
非常に細くぱっと見ではどこに挿せばいいか全くわかりません。
しかし、他の皆さんはケーブルを見ただけで、どれを繋ぐか分かっていて、なんで知ってるんだ・・・ってなりました。
やっと起動して、画面にwindowsでもMacでもlinuxでもない画面を見て感動しました。
次回からは改修作業に続きます。
今日も社内のタスク管理の改修をVue.jsでしていました。
しかし今回はどちらかというとvueのファイルをいじる部分が少なく、
TypeScriptをいじらなければなりませんでした。
TypeScriptはインターンに参加させて頂いてから、初めて触ったのですがJavascriptに型づけをさせる印象ぐらいしかありませんでした。
その型をつけるので、stringとかintegerなどの型をつけるのはわかるのですが、自分で作った名前の型も付けれるようで、独自で型なんて作れるのかという所がどうしても腑に落ちませんでした。
そこで今回はそこを重点的に教えていただきました。
そうするとJavaScriptのクラスを作るような基礎的な所がわかっていないこともわかり、
サンプルでクラスを作ってみて、それをTypeScriptに変換しながらすることで、今回わからなかった所が解消されました。
しばらくJS系を頑張っていきたいです。
今日も社内タスク管理の改修をVue.jsでおこなっていました。
みた目を変える改修が多いのですが、今日あたりから改修するべき部分にあたるコンポーネント名を覚えているようになってきまして、いち早く該当部分を見つけれるようになりました。
入力していないフィールドを色を変えるというタスクをやったのですが、僕は最初、if文を書いて直そうとしたのですが、そうではなくてタグ内にjsの変数を書いておいてtrueだったら色を付けるというやり方を教えていただきました。
真偽値については前から知っていたのですが、実際に使う機会がなく、使ってみると条件を考える上で頭が混乱してしまい、慣れが必要だと感じました。
あと、真だったらクラスを新しくつけるものでjQueryでは書いたことがありましたが、数行書く必要がありました。ところがVue.jsだと一行で簡単に行えたので物凄く楽で少し感動しました。
次回も頑張っていきます。
