インターン
ブログ

今日も社内のタスク管理の改修をVue.jsでしていました。

しかし今回はどちらかというとvueのファイルをいじる部分が少なく、

TypeScriptをいじらなければなりませんでした。

TypeScriptはインターンに参加させて頂いてから、初めて触ったのですがJavascriptに型づけをさせる印象ぐらいしかありませんでした。

その型をつけるので、stringとかintegerなどの型をつけるのはわかるのですが、自分で作った名前の型も付けれるようで、独自で型なんて作れるのかという所がどうしても腑に落ちませんでした。

そこで今回はそこを重点的に教えていただきました。

そうするとJavaScriptのクラスを作るような基礎的な所がわかっていないこともわかり、

サンプルでクラスを作ってみて、それをTypeScriptに変換しながらすることで、今回わからなかった所が解消されました。

しばらくJS系を頑張っていきたいです。

今日も社内タスク管理の改修をVue.jsでおこなっていました。

みた目を変える改修が多いのですが、今日あたりから改修するべき部分にあたるコンポーネント名を覚えているようになってきまして、いち早く該当部分を見つけれるようになりました。

入力していないフィールドを色を変えるというタスクをやったのですが、僕は最初、if文を書いて直そうとしたのですが、そうではなくてタグ内にjsの変数を書いておいてtrueだったら色を付けるというやり方を教えていただきました。

真偽値については前から知っていたのですが、実際に使う機会がなく、使ってみると条件を考える上で頭が混乱してしまい、慣れが必要だと感じました。

あと、真だったらクラスを新しくつけるものでjQueryでは書いたことがありましたが、数行書く必要がありました。ところがVue.jsだと一行で簡単に行えたので物凄く楽で少し感動しました。

次回も頑張っていきます。

本日も引き続き、昨日と同じタスク、検索フィルターの作成をしていました。

今まではコンポーネントの中身をいじってみた目を変えるくらいの業務でしたが、

Typescript が絡んできたり、コピペではなく、自力で関数を作らないといけなくなったりしてきましてかなり難しくなってきました。

しかし、もし一人でこういう作業をしようとしたら、負荷がかかり過ぎるし、わかないところの解決もできないままで、ほぼ不可能だと思います。

少し前はチュートリをやったくらいのレベルで、今もやっていることに追いつくのに必至ですが、こういう壁を何回も乗り越えれば、かなりスキルアップできる予感しかしないので

次回も頑張っていきます。

本日の業務は引き続き

社内のタスク管理の不備の回収をしていました。

午前中はサクサク進みまして、ヘッダーのメニューを追加したり、あるところをコピーできるボタンを実装していました。

そこで、DRY原則やVuetifyの使い方を学びました。

午後からはあるタスクを検索フォームから探す機能の実装をしたのですが、そこに加えてタスクの種類、日付指定機能を付け加えなければなりませんでした。

今までのcssを書き加えたり、一部分コードを書きなおすだけのタスクに比べると今回のタスクはめちゃくちゃ難しくて、フレームワークの流れを押さえていなければできないものでした。

しかし、これのおかげで大分、for文やif文を書いたりするレベルから進歩できたと思います。

後日も引き続き、これをやっていきます！

最近は社内のタスク管理アプリの改修をやっています保坂です。

今日は会社に来てみると机に新しいMacBook Proが！！

自分のmacはUSキーボードなのですが、僕が働き始めた時はUSキーボードを搭載した

Macがなかったので、外付けキーボードを使っていたのですが、ついに新しいMacBook Proが入ってきました。一新されたキーボードやデザインを新鮮でいいですね。

午前中は再びMacの環境設定をしていまして、前回よりはキビキビと環境構築できるようになって無駄がなくなってきたので効率化した気がします。

最近は業務に入れるようになってきて、ただチュートリアルをやっている時よりは断然やり甲斐を感じます。

今回もテキストの文字の色を変えるだけの簡単よりのタスクだったのですが、ただCSSを変えるだけではなく、Vue.jsのVuetifyというライブラリを使って変えるもので、そのライブラリをまだ知らなかった僕はそれを使うべきだというのにかなり時間がかかってしまいました。

考えることは必要だと思いますが、時間配分をミスってしまった感があるので、次回はもっと効率化して作業を進めていけるようにしていきたいです。

本日のタスクは昨日の続きです。

出勤を管理しているシステムがあるのですが、今年は５月から令和が始まったことで、ゴールデンウィークの休日判定が例年とはズレてまして、それの改修をDjangoでやるというものです。

実務では扱うファイルが多すぎて、まず参照先を整理するのに頭がこんがります。（移動自体はCommand + clickなので簡単ですが。）

まずは今年のゴールデンウィークで休みなのに仕事になってしまっている日をループ文とjholidayというライブラリで洗い出します。

Pythonの文法はかなりあやふやなままなのですが、コード自体はものすごくシンプルなので検索しながらやっていけば問題ないですが、そこに新しく知ったライブラリの機能を組み合わせたりすると難易度が上がります。

それでも、分からないところはちゃんと説明していただけるので、少しずつ理解が進んでいっているかと思います。

改修作業も済み、次回からもどんどん頑張っていきます。

本日はDockerについての講義を受けて、ついに実務に入りました。

Dockerは今、業務で今すぐに僕に必要なスキルではなかったのですが、いつも個人的な環境

構築に苦労してまして、Dockerを勉強しても分からないと事ばかりでしたので、

圧倒的丁寧に今日午前中の時間を取っていただき、教えて頂きました。

そして今までコピペでなんとなく動いていたものを理解しながら再び作ることができたので

かなり成長したかなと思います。

ランチを終えて、

いよいよ実務に初めて入りました。

最初はcssの崩れを直すだけだったので、楽でしたが、次にDjangoを扱うサイトの改修に入

り、チュートリをやっただけでは、やはりなかなか上手くいかずに苦戦中です。

次回はその続きをやります。

こんにちは！今日もVue.jsの学習を進めていました。

昨日は公式ドキュメントを読んで、知識はある状態でしたが実際にいじってみようとすると

全く流れがわかっていなく、タブの切り替え機能すらあたふたしてましたが、

一晩経ちましたら、特に昨日詰まったいたRouterの機能や、ViewsやComponentの違いが

わかってきまして、なんとかタブ切り替え機能を作れるようになりました。

次回はまたPythonをいじることになりそうです。　毎回新しい言葉が膨大にきて混乱しますが、

慣れればできると思ってやっていきます！

それではまた後日。

こんにちは！今日はゴールデンウィーク明け始めての出勤でした。

前回まではPythonを触っていましたが、今回はフロント側に移りましてVueです。

ゴールデンウィーク中にドキュメントを読んだりしていたのですが、やはり座学だとすぐ忘れますし、覚えるのも単調になってきて、ペースが落ちますね！

ということで実務に早く入れるように実際に自分でググりながら、タブの切り替え機能などを搭載を試みますが、

そもそも根本的にわかっていないところが多くて大苦戦・・・・

Component と　viewsの違いや仮想DOMとはなんぞや？？？など

せっかく良い機会を頂いているので、深くまで理解しながら進めていこうと思います。

それではまた次回に。

二、三回ブログを更新できなかった国分です。

今日でインターンシップ最終日でした。


最後はほとんどスキマコミックスのページのタブ切り替えの機能を作っていました。




結果こんな感じになりました！

スマホ表示のみ「続きを読む」ボタンがつくようにし、バナーとタブで漫画っぽい感じに仕上げられたかなと思います！






そして、今回初挑戦のVue.js😌


タブ機能をVue.jsで書いていたんですが、もっと読むボタンをjQueryで書いていたことにより挙動がおかしいことに・・・

このことをリリース後に気づき、もっと読むボタンもVue.jsで書くことにしました笑

教えていただきながらやったのでなんとなくはわかるようになったかなと思います！


少しずつ学んでいきたいなと思いました！


タブの改善を行った後は、9社の漫画アプリを比較してUI/UX上のメリット、デメリットを考えるということしました。

この機能はユーザーにとって使いやすいのかどうかということを考えながら比較しました。


9つもアプリを比較するのは結構体力が要りますね笑


でも、このような作業は好きなのでとても楽しかったし、漫画アプリでも色々な機能があるんだなと感じました。





この2ヶ月間、あっという間でしたが、色々なことを学ばせていただきました。

バナー制作についても教えていただきました。

どのような色や配置が見やすいか、余白はどのぐらいがいいのかなどとても参考になるレビューをたくさんいただくことができ、とても勉強になりました。

これから、もっとWebデザイナーとして勉強していきたいと思いました。


ありがとうございました。

こんにちは！

今日は午後からの出勤でした。

引き続きPythonのイケている？らしいDjangoというフレームワークの学習を続けていました。

Viewsのあたりから混乱してきましたが、とりあえず大まかな流れは把握し、アプリケーションが動くところまで行きました。

今は全てが新しく覚えることが多いですが、そのうち慣れてくることを期待しながらやっていこうかと思います。

次回はゴールデンウィークを挟み、Vue.jsに取り組んでいきます。

こんにちは！

今日のお昼は歩いて５分くらいのところにある焼き魚定食でした。

業務の方ですが、

環境構築は前回終わらせまして、本日から早速バリバリ、プロジェクトにコミットしようかと思いきや、

僕はPythonは触ったことがないので、勉強から始めます。

Pythonは今まで触ったことがあるPHPと書き方が異なるのですが、実際に見てみると確かにシンプルに書ける感じがしまして新鮮です。

インターンの良いところは、いきなり即戦力を求められず、育ててくれるところから始められることにあると思います。

もちろん基本的に自力で考えながら進めるのですが、分からないところがあったらちゃんとした説明つきでアドバイスして頂けるので、自分一人でやっている時より、遥かに早く、より深く理解しながら学習が進んでいるな。と今日１日で感じました。

今日のやったことはまずは

Pythonのチュートリアル(公式)を１から全部目を通しまして、

次にそのまま、Djangoというフレームワークのチュートリアルを始めます。

チュートリアルのアプリを作っているのですが、今日はちょうど半分くらいまでしか完成できませんでしたので明日に続きます！

こんにちは！

インターンを申し込んだのが約２ヶ月前で、ついに今日から僕にとって初めてのエンジニアとしての実務が始まります。

今までスーツをきちんと着て働く人たちが多い環境で育ってきたので、私服で働いていることにまず少し感動を覚えます。

作業は支給されるMac book proで行われるため、本日は環境設定を主にしました。

まずはMac内に自分のアカウントを作り、普段自分が使っている環境設定に変更し、そのあとはPythonを扱うことになるので、その環境をマニュアルを読んで構築していきます。

途中、エラーを吐いて直らない時も度々ありましたが、質問するといつでも解決するまできちんと教えて頂けるので、なんとか本日中にプロダクトをgitで持ってきて作業できる状態までになりました。

初出勤ということでランチに寿司をご馳走していただきましたし、今日いい日です。

Pythonは触ったことがないですが、次から本格的に取り組んでいきますー！

こんにちは！

前回ブログを書く時間がなかったので、今回まとめて更新します！


現在、スキマオリジナルページに「全て」「連載」「完結」の３つのタブを作り、切り替えを行う機能を作っています。

前回は、Vue.jsでタブ切り替えができるようにしたところまで進みました！


連載中の作品のデータと完結の作品のデータを取ってきて、if文で条件分岐させるのがとても苦戦しました。

やっぱりVue.jsは難しい…😅



そして、今日は、タブのデザインを考えました！

調べてみたんですが、吹き出し風のタブやインデックス風のタブ、下線のみのタブなど色々あるんですね！


今回は、吹き出し風のデザインに挑戦してみました！

作るのは意外と簡単だったのですが、色や枠をどうするかでかなり悩みました笑

全てボーダーで囲ってみたり、下線だけつけてみたり・・・


いろいろやってみた結果、タブをリストで作っていたのでそれぞれをボーダーで囲んだデザインが一番しっくりきました！！！


吹き出しなので漫画っぽさも出て、可愛い感じにすることができました😊



今回、タブのデザインでもたくさん種類があることを知ったので、他の機能のデザインも調べてみようと思います！

こんにちは！

インターンシップも残り半分となりました！


『Sukima comics』のページは更新順で並んでいるので完結している作品が読まれないのではないかと思い、連載中の作品と完結している作品をタブで切り替えられるようにするのはどうでしょう？という提案をさせていただきました。

その結果、Vue.jsで書いてみようということになりました。


調べてみると、Vue.jsを使うとこんないいことがあるぞ！ということは理解できたのですが、書き方が難しすぎて…


普通のforじゃないのね、onclickも使わないのね、という感じでした笑


きっと慣れれば書きやすいんだと思うんですが、今日は調べたら調べていくほどわからなくなり気づいたら1日が過ぎていました笑


とりあえず、勉強してきます！！！

こんにちは！


今日も引き続きスキマコミックスページのバナーを作成していました！

昨日いただいたレビューを基にアメコミ風のバナーの手直しを行い、完成させることができました！！！


今回作ったバナーは計3作品。


まず、一番初めに作ったバナー


これは、遊びゴゴロがあるといいかも！というアドバイスをいただき、色々なバナーを参考にしながら作りました！
パステルで可愛い感じにしてみました！

次に、文字だけのバナー


これは、文字だけでも漫画サイトということがわかるように右下に本のシルエットを入れてみました。
一番最初と同様に黄色とスキマのカラーで作ってみたのですが、これは少し見辛いですね。。


そして、最後にアメコミ風のバナー



コマの間隔の調整や、キャラクターを切り取る作業、文字のバランスなどにとても苦戦しました。

個人的に頑張った点は、実際の表紙絵では真ん中の女の子は体が雲に隠れていたため、ペンツールで描き足した点です。

Photoshopに慣れていない私は、1pxごとに色をスポイトで取ってブラシで描いて…を繰り返しました😂


また、キャラクターの切り取りもマスクの存在を知らなかったので、選択ツールで足したり消したりして編集の時にまた選択ツールでまたやり直しをしていました…
なので、マスクの存在を知って感動しました笑


他にも背景にそのままパターンを貼らずに、シェイプでパターンを貼る方法なども教えていただきました！

こうすることで、はみ出ないので綺麗にパターンを貼ることができるんですね！


今回のバナー作りでPhotoshopの使い方やバナーを作る際の注意点やアドバイスなど色々と学ぶことができました！


一度は何がいいデザインなのかわからなくなって何も思い浮かばなかったりしたのですが、無事完成させることができてよかったです！


そして、アメコミ風のバナーを実際の『Sukima comics』モバイル版のページのヘッドラインに貼り反映してもらいました！

本番のページを更新して自分のレイアウトになった時は感動しました！！！


これからももっと学んでいきたいと思います！

こんにちは！

引き続き『Sukima comics』用のバナーパターンを増やしています。
今日は、アメコミ風のバナーを作っていました。

ある程度できた段階でレビューしていただき、文字の間隔やキャラクターの配置など色々アドバイスをいただきました。


今まで、枠内にキャラクターを収めようとちまちま移動したり消しゴムで消したりしていたのですが、レイヤーマスクのやり方を教えてもらったことでちゃんと枠内に収まってとても感動しました！笑

また、レビューで「きっちり枠内に収めずに外に出してもいいんじゃないかな」と意見をいただき、そんな方法もアリなんだ！と驚きました。

他にも、アメコミ風なので背景にパターンをつけるといいのではという意見もいただき、パターンの付け方も教わりました。



今回一番苦労したことは、キャラクターの腕や頭が切れていたりしていたので、それをブラシやスタンプツールを使って描いたことです。

影の付け方や色の濃さなどに注意しながら描いたので、とても大変でした。

お陰で、最後の方は違和感なく描けるようになりました笑


明日は、いただいたレビューを基にもう少し直していきたいと思います！！

こんにちは！

今日でインターン11日目でした。


今日は、昨日と変わらずバナーを作っていました。

昨日作った２つとスキマの「はじめての方へ」のページのヘッドラインを真似したものと、アメコミ風にしてみたものの合計4作品を作りました！！



漫画っぽいデザインも作ってみたいなぁと思った時に浮かんできた漫画が『僕のヒーローアカデミア』だったので、アメコミ風のデザインのバナーも作ってみました。


漫画のコマ割りを背景に使いたかったので、簡単にIllustratorで枠を作ってその中身をスキマのカラーにしました。

そして、「全話無料で読めること」と「毎日更新していること」を一目でわかりやすくするために吹き出しを使い、枠の中にスキマオリジナル作品のキャラクターを配置しました。


一日中バナー作りをしていたので最初に比べてだいぶPhotoshopが使えるようになってきました！笑


明日は、PCサイズの時にはどのようなデザインにするのか、配置なども考えながらデザインしていきたいと思います！！

こんにちは！
インターン10日目の国分です。


今日は、まず、iPadの表示をPCと同じにするためにメディアクエリの値を今までPCの大きさにしていたのをiPadの大きさに変更しました。


そして、それが終わってからバナー作りに取り掛かりました。


先週イメージしていたデザインを基に作ってみたのですが、なかなか思っていたようにはならず、自分のセンスのなさに落ち込みました…笑

とりあえず、色の相性などを調べたりしていろいろなバナーを真似てみることから始めました。


苦戦しながらも「スキマオリジナル作品の表紙絵を取り入れたもの」と「文字だけのもの」の2種類を作り、レビューしていただきました。


レビューでは、表紙絵をそのまま切り取って並べていたので、バナーは区切らずキャラクターのみを切り取って配置した方がいいということや色の合わせ方などのアドバイスをいただきました。


なので、明日はこれらのレビューを意識しながらデザインしたいと思います！

こんにちは！
インターン9日目です！

もうすぐ3月が終わるのにまだ9日しか来ていないんだと驚いている国分です笑



今日は、やっと『Sukima comics』のページのコーディングがほぼ終わりました！！！


XDのデザイン案を忠実に再現することができました！

ただ、iPadでの表示がモバイルでの表示と同じになっていて、あらすじが短い場合だと「続きを読むボタン」を押さなくても見えてしまうので、iPadもPCと同じようなレイアウトにしようと思いました。

これはメディアクエリで調整しながら、という感じなので来週の課題にしたいと思います！



そして、『Sukima comics』のページのヘッドラインに『Sukima comics』のロゴがあるんですが、その部分をバナーにしようということで、午後からPhotoshopでバナーを作る作業に取り掛かりました。

スキマオリジナル作品の表紙絵を入れるデザインや文字だけのデザインなどいくつか考えてみました。

初めてPhotoshopを使ったので表紙絵からキャラクターを切り取る作業ができるようになったぐらいですが、来週はもっとPhotoshopに慣れて何個かバナーを作っていきたいと思っています！！