インターン
ブログ

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

今日は会社に来てみると机に新しい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に慣れて何個かバナーを作っていきたいと思っています！！

こんにちは！国分です。


インターン8日目もコーディングの続きをしました。

調べながらJavaScriptで『続きを読むボタン』を完成させることができました！

each を使うと繰り返しができることや addClass を使うと新しいクラス属性を作ることができるということなどを学びました。


ボタンを作った後は、XDを見ながら幅やフォントの大きさ、色などを細かく設定していきました。

XDはフォントサイズや色などがすぐわかるのでとても使いやすいなと思いました！


今回一番苦戦したのは、ボタンの配置でした。

画像の下に謎の空白があったり幅が揃っていなかったりで、無料で読むボタンと画像の下を揃えるということがなかなかできませんでした。

クラス名を１つずつ確認しながら重なってるところがないか、何か抜けてないかを見ていきました。

その結果、imgにdisplay:blockがついていなかったことと余分なpaddingがあったということがわかり、なんとか揃えることができました！！


次回は、モバイル表示の方も揃え、もう少しXDで作ったデザイン案に近づけるために調整していきたいと思います！

こんにちは。国分です。


インターン7日目は何をしたかというと、
前回の続きでデザイン案を基にコーディングをしました。



今回はBEMの書き方を教わりました。

それまでは、クラス名をバラバラに書いてしまっていたため、わかりづらかったり直すときに探すのが大変だったりしていました。


教わった直後はうまく書けなかったんですが、意識して書いていると自分で見たときにわかりやすくなっていることに気づきました。

SCSSもネストして書きやすくなり、直すときもすぐ見つけられるのでとても便利だなと思いました！


また、勉強のためにもBootstrapをやめてflexやmargin、paddingを使いながらコーディングしていきました。

flex-basisでカラムと同じようなことができるということも知りました！



やっていくうちにPCとモバイルでのレイアウトはデザイン案に近付いたのですが、時間内にJavaScriptを使った『つづきを読む』ボタンを実装することができませんでした。


JavaScriptについて大学ではほとんどやっておらず、独学で少しやった程度なのでもう少し勉強しないといけないと思いました。


また、明日もこの続きをやって、できれば終わらせたいと思っています！

こんにちは。

長期インターンシップに参加させていただいている、国分です！


インターン6日目は、デザイン案を基にコーディングをしました。


とりあえず、今回は、PCの方のコーディングをメインでやっていたのですが、全然終わりませんでした…😭



主にやったこと
・『Sukima comics』の作品一覧のカラム数を３カラムから１カラムにした
・左に作品の表紙、右に文章を配置した
・ボタンを作品の詳細の下に置いた
・ハートと星（レビュー評価）と更新日を横一列に並べた
・連載中か完結かわかるように角に色をつけた

大きく変わったことはこのくらいで、これらをやりながら幅や大きさなどを変更していきました。


やっていてやはりわからないことが多く、調べたり聞いたりしながらでなかなか進まなかったので、今回はあまり書くことがありませんでした…


DjangoやBootstrap、CSS設計思想、オブジェクト指向などまだまだ学ぶことがたくさんありますが、１つずつ確実に知識を身につけていきたいと思います！

こんにちは。
長期インターンシップに参加させていただいている、国分です。

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


今日は、まず、先週変更したページについてGoogle Analyticsで結果を見てみました。

全部無料で読める漫画を一番上に持ってきた結果、トップページの離脱率がモバイルとPC両方減っていました！

また、ランキングページでは、ソートを右側にまとめたので検索しやすくなったのかなと思ったのですが、離脱率はほとんど変わっていませんでした。
ヒートマップで見たところ押されていなかったのでランキングのソートの配置変更はあまり意味がなかったのかなと思いました。

今後はこの結果を基に全て左側に表示されるように変更しようと思います！

次に、この間から言っていたSlickの部分にやっと手をつけました。

1200px以上だと矢印ボタンが外に表示されるようにしました。

こうすることで、矢印が目立ち、押されやすくなったのではないかと思います。


そして、4日目に考えたデザイン案にレビューをしていただきました。

フォントサイズや間隔、配置などたくさんレビューをいただき、それを基にブラッシュアップをしていきました。

デザインを基にコーディングしていくことになるのでしっかり調整して作っていかないといけないんだと思いました。

一通り終わったところで、今のスキマオリジナルのページにはない『完結か連載中かわかる機能』のデザインを考えました。

見てすぐわかるように、かつ、少し遊びゴコロがあるデザインということを意識しながらデザインを考え、2通りほどデザインをしてまたレビューをしていただきました。

実際にコーディングした時に作れるかどうかや色々な場合を想定しながら作らなければならないということを学びました。

また、レビューをしていただくことで、自分では思いつかないようなことや気づかなかったところなどを指摘してもらえるので、とても勉強になるなぁと思いました😌

明日以降はこのデザイン案を基にコーディングしていければと思います！