インターン
ブログ

TORICOインターン生のブログです。会社で起きたことについて情報発信していきます。

右記投稿者からの投稿を見る

1回目インターン最終日

こんにちは、塚原です。

今日は1回目のインターン最終日です。
作業では前回の続きで、ポップアップを消したら1日間表示しないように設定をする作業をしていました。
前回local storageに1日後の日付データを保存することができ、今日は表示、非表示の設定を行いました。
表示はTypeScriptで操作し、非表示はvue.jsで非表示にするという流れで、非表示にした際に1日後の日付データを保存していきます。

非表示では、前回である程度完成していたのもあり、すぐに終わらせることが出来ました。
元々のコードにあった@clickを活用し、クリックされた際、非表示にしながらlocal storageに1日後の日付データを保存というコードを作成し、実際に動作するかlocal storageを削除しながら進めました。

表示ではlocal storageにあるデータと現在の日付と時間を比較して、local storageにあるデータより前だったら表示しない、あとだったら場合とlocal storageにデータが無い場合は表示するという流れで作成しました。
作業が進み、大まかに完成したら動作確認をしていたら、表示されたり表示されなかったりというよくわからないエラーが発生しました。エラーの原因は表示設定の条件分岐前にapiを読み込んでいたからためだったようで、条件分岐の後にapiを読み込むコードを配置したら直りました。

作業が思いのほか早く終わったので、次回のインターンに向けて残り時間をPythonの勉強に当てていました。
vue.jsの方ではまだ知識不足があり、作業をする際時間が掛かってしまうものの、ある程度はできているのでPythonの方を勉強に注力しました。

Pythonの勉強の方では参考書を読んだり、Pythonのチュートリアルをやりながら、何ができて何ができないのか、どこが難しいのかを洗い出しました。今回洗い出した物とvue.js+TypeScript関連の勉強を次回インターンまでにしっかり勉強しようと思います。

次回も楽しんで作業をしていきたいです


local storageを使用

こんにちは、塚原です。

今日の作業では、ポップアップを消したら1日間表示しないようにする設定をメインにポイント残高ページのコードの修正を少し行っていました。
local storage上に消した時から1日後の値を保存して、ページを表示するたびにその値と現在の時間を比べて表示、非表示を判断するというやり方で作っていますが、vue + TypeScript というインターンを始める前までは使っていないものなので、難しかったです。

現状では、local storage上に1日後の値を保存するやり方は概ね理解できたので、明日では表示、非表示の方も取り組んで行きたいです。

次回も楽しんで作業していきたいです。

ページ改修とpythonを始める

こんにちは、塚原です。

今日はポイント残高ページの修正とPythonの作業を始めました。

ポイント残高ページの修正では、条件分岐で行っていたコードの修正の修正や新たなボタンをマイページに追加するなどの作業を行いました。

Pythonの作業では、ポップアップの表示をランダムで表示するといった内容をしていました。
Pythonのコードに慣れていないのでしっかり勉強をしようと感じた1日でした。

次回も楽しんで作業をしていきたいと思います。

pagenationの設置とmodalの一部変更

こんにちは、塚原です。

今日は、前回も行っていたポイント残高ページの改修作業と新たにモーダルウィンドウの一部修正をしていました。

ポイント残高ページの方では、pagenationの設置と設置した際のコードの調整をしていました。
とりあえずpagenationを設置するために、改修する前のデータを参考に設置してコードも調整したのですが、
なぜか、pagenationが表示されないという自体に陥りました。
apiの方を確認したところ、ページネーション用の部分がnullになっていて値を取得できていないので、非表示状態になっていたようです。その後、api自体を直してみたら問題なく表示されました。
ですが、元のコードのままでも問題なく動き、新規で作ったアカウントで試しても元のコードで問題なく動いたので、なぜnullになっていたのか再現できませんでした。

モーダルウィンドウの一部修正ではモーダルウィンドウのボタンをhoverした際、文字に下線が表示されてしまうので、その下線を消すのとhoverした際のボタンの背景を変更しました。
背景変更は問題なくできていたのですが、文字の下線の方では、text-decoration: noneで下線を消すのは知っていたので試していたのですが、なかなか消えないなと思っていたら、ボタンの方ではなくリンクの方で適応しなければいけないと気づきました。おかげでその部分だけで結構な時間を取られました。

次回も作業を楽しみながら、頑張っていきたいと思います。

vue.jsでマイページの改修

こんにちは、塚原です。

現在、マイページのポイント残高ページの改修を行なっています。

作業をしていく際、変更を保存したままエディターを閉じてしまい、command⌘+ z で戻せなくなってしまい、gitの方から変更を戻そうと頑張ったら、別フォルダーで戻そうとしてしまいました。
結局、間違えていたフォルダーでエラーが発生してしまいフォルダーをもう一度環境構築して、戻そうとしていたフォルダーも戻しました。

ポイント残高ページの改修の方では、Django REST frameworkで作成したapiのデータをvue.jsでレイアウトなどの調整をするという手順で進めていきました。
レイアウトの調整などは終わったのですが、1つのファイルでtemplateの中身やscript、styleなどを設定したのもあり、コードが長くなってしまったので、1部のコードをcomponent化して、
見やすくしました。

また、ポイントの有効期限などの表示の際、Moment.jsを使いました。
日付がYYYY-MM-DDのような形だったのをYYYY年MM月DD日のような形にフォーマットしたり、有効期限の設定の際に日付の差分を出すので diff を使い差分を出した後、ifで条件分岐させ、日時分の表示が出るようにしました。
ですが、残り日数の設定がしっかり設定していなかったので、いつの間にか if から外れていてすぐに修正しました。

次回も作業を楽しみながら、頑張っていきたいと思います。

インターンで開発環境の構築とVue.jsでサイトページ制作

はじめまして、インターンをしている塚原です。

インターンが始まり、環境構築と漫画全巻ドットコムのマイページの改修をしました。
環境構築は主に、PHP、Nuxt、Python(Django)の環境設定をしました。
環境構築は、何度か経験したことがあるのですが、たびたびエラーが発生してしまいうまくいかないことが多かったですが、
解決するまできちんと教えて頂けました。

環境構築ができ、操作もある程度できるようになった際、マイページの改修の方を行って行きました。
マイページの改修ではポイント残高ページの方を改修するということで、使ったことがない『Vue.js』でデザインや表示する内容を変更するので、しっかりできいるか不安でした。

改修作業を始めて、HTMLやCSS、JavaScriptなどを使った経験があったのですが、わからない部分が多々あり、作業の進捗自体は遅くなってしました。
ですが、わからない部分があれば教えてもらい、スムーズとは言えないものの作業は進められました。

作業を進めるにあたって、Vue.jsやGit関連、Bootstrapなど覚えることは沢山ありますが、次回も作業を楽しみながら、頑張っていきたいと思います。