こんにちは！この度株式会社jig.jpサマーインターンシップ2024 2weekOnlineに参加させていただきました、電気通信大学のなっちこと、権田夏実です。2週間の全行程が終わりましたので、振り返っていこうと思います。
毎日のラジオ体操
1日目
ドキドキの初回はオリエンテーションから始まりました。
自己紹介やクイズ、あいうえお作文などをして、緊張が少しほぐれました！でもzoomということもあって、グループワーク以外の時間にマイクオンに切り替えるのに勇気がなかなか出なかったですね。。。ボタンやジェスチャーでリアクションをして乗り切りましたが、今後は雑談とかにも加わりたいです！
講習会ではGitHubの基本的な使い方を教えていただきました。チーム開発で使うのは初めてですが、なんとか慣れていきたいと思います。実際、VSCodeで編集したり、GitHubデスクトップでプッシュしたりしていると、気づいたら他の人の変更を上書きしていたり、ブランチじゃなくてフォークだったということもありそうなのですが、大抵は注意されるので安心ですね。
2日目
2日目は1日勉強会でした！今日はhtml/css、denoの使い方などを教えていただきました。
html/cssは大学でも取り扱っていたのですが、講習会では大学の講義では教わっていないことも多く、とても新鮮でした。特に、タグによって表示以外の機能、例えば音声出力やキーボード操作に違いがあるのはとても興味深かったです。大学の課題ではほぼビジュアルや特定の操作方法しか意識していなかったので、目が見えない人などにも広く使ってもらえるようにという、webアプリを開発している側ならではの視点で新鮮でした。
グリッドレイアウトを学べるゲームGrid Garden
3日目
今日の講習会ではサーバ通信やAPI、チーム開発の方法などを学びました。
APIは大学の講義でも出てきたので大枠は分かっていましたが、実際に触ってみると自分の知見が全く足りていなかったことに気づかされました。しかし、denoはこのようなサーバ側の処理を簡単にできて、今までサーバサイドのプログラムを学んだことのなかった私でも実装することができました。
後半はチーム開発の流れや振り返りの方法を説明していただきました。チーム開発の流れをTRPG的に体験して学べたので、イメージがつきやすかったです。今まで講習会が続いていたので、オリエンテーション以来のチーム作業ということもあり、私のチームは全員ガチガチでしたね。
API講習会
4日目
講習会最終日！いよいよ今日からチーム開発が始まりました！
最後の講習会はデザインのコツとデザイン作成に便利なfigmaというアプリの使い方を学びました。今まではデザインはセンスだと思っていたけど、対比や整列などのルールに従うことでセンスに関係なく使いやすいデザインを作れることがわかりました。また、figjamという、会議中のホワイトボードのような機能も紹介してもらいました。付箋やステッカーだけでなく、ハイタッチ機能やコードを書く機能などさまざまなミーティングに役立ちそうな機能が詰まっていました！特に、付箋には書いた人の名前が自動で表示されていて誰の意見かがわかりやすいところがとても好印象でした。
講習会最終日ということで、本日のお昼はカレー会を行いました。オフラインの方々はjigカレーという闇鍋のカレー版みたいなことを行なっていたらしく、意外と美味しいカレーができたそうです。私たちは誰が1番美味しくアレンジできるか、熾烈な戦いが繰り広げられ、同じボンカレーとは思えないほど個性豊かなカレーが並びました！カレーを持ちながらの写真撮影はとても難しかったです。。。。同じカレーを食べてアレンジを話題に少しずつ打ち解けてきました！
カレー会
午後からはいよいよアイディア出しが始まりました。今回作るアプリのテーマは「爽やか」です！私の班はみんなたくさんアイデアを出してくれたおかげでたくさんの付箋が貼られていました。話し合ってアプリの内容を決める時、最初は各々意見を言うのに緊張していましたが、ふじいメンターの誘導もあり、スムーズにアイデア出しが進んだと思います。
５日目
今日から本格的に開発が始まり、午前は前日に話し合ったアプリ案をまとめて、プロダクトバックログを作成しました。私は３日目に行なったスクラム開発TRPGに引き続き、プロダクトオーナーに任命されました。実際に開発を行うとなると、チームの意見をまとめて仕様や実装の優先順位を決めるのはとても大変でした。以下はこの日決まったアプリの内容をまとめたものです。
- メンバー：なっち、よーすけ、 みずうみ、ふじいメンター
- プロダクト名：かいがん清爽
- ターゲット：普段の生活でストレスを感じていて爽やかな気分になりたい人
- ビジョン：汚れていた海岸を自分の手で綺麗にすることで、さわやかな気分になり、綺麗な海岸でリラックスできる
- 推奨動作環境：スマホ
- PO：なっち
- SM：ふじいメンター
午後からはスプリントバックログを作成して各々作業に取り掛かりました。私たちが開発するアプリは爽やかさを感じる見た目にこだわり、背景の海岸のイラストや波の音など、チームで確認しながら作業を進めました。私は普段絵を描かないのですが、アプリの見た目を左右する背景画像の作成を担当することになり、いろんな海岸の写真を見ながらなんとか書き終わりました。チームの人に納得してもらえる仕上がりになってよかったです。
今日はお昼休みと終業後にほどたメンターがボドゲ会を開催してくれました！負けて悔しい気持ちはありますが、とても楽しかったです！このためにプレミア会員になってくださったほどたメンターには頭が上がりません。
6日目
土日を挟んだ今日は開発の続きを行いました。一日中開発を行ったので、終業後は疲労感が一気にきましたが、ずっと作業に集中していたこともあり、体感時間はとても短かったです。
今日私が行ったことは以下の通りです。
- 背景画像のレイヤー表示
- ゴミのランダム表示
- ゴミをタップして消せるようにした
特に苦労した点はゴミの表示です。ランダムに表示すると言っても背景画像の砂浜の位置に表示したかったので位置の調整が難しかったです。背景画像のレイヤー表示は各背景画像の位置をabsolute で同じ位置に指定し、その透明度を動的に変えることで実装しました。
もくもく開発中
7日目
開発3日目です！今日は中間レビューがあり、メンバーと改善点を話し合うと共に、やまじメンターからも直した方が良い部分やもっと工夫できそうな点などのアドバイスをいただきました。今後追加で取り組むことは以下の通りです。
- 虫網ボタン(ゴミを拾う)をわかりやすく
- よりさわやかに このアプリを使いたいと思うきっかけとなるような機能が必要
- 一部のスマホだけではなく全部できれいに見えるようにする(レスポンシブル対応)
- 海の画像周りのマージンをなくす
中間レビュー
今日私が行ったことは以下の通りです。
- 背景画像の海の画像を狭くして砂浜の割合を増やす
- どの画面サイズに対しても背景のサイズやゴミの配置が適切に行われるように改善する
特に苦労した点は画像サイズと画面サイズを合わせることです。汚い海の画像から綺麗な海の画像に遷移していく機能を残しつつ、画面サイズに画像を合わせるのに苦労しました。また、ゴミの配置も画面サイズによって画像が画面からはみ出てしまうこともあり、その解決が難しかったです。HTMLにはサイズ指定用の単位がたくさんあるので、いろいろ試せて楽しかったです。
8日目
早い起床時間や一日中開発をするのにも結構慣れてきました！行動を2週間ほど継続すると習慣化すると言いますが、本当なんですね！今日私が行ったことは以下の通りです。
- 掃除をした時にゴミがあった場所に「さわやか」エフェクトを表示する
- 掃除が全て完了した時にカニのアニメーションを流す
特に苦労した点は「さわやか」の周りに表示する泡が発生しているようなエフェクトを表示することです。CSSで要素の背景色と形を設定し、青緑色の丸を作りました。また、不透明度を下げながら上に移動するCSSアニメーションを作成しました。そしてJavaScript で、このオブジェクトを大きさと位置、アニメーションの遅延時間をランダムに設定して生成する関数を作成しました。文字とエフェクトの色や大きさの設定が難しく、チームメンバーに意見をもらいながら何度も修正しました。納得のいくエフェクトになってよかったです。
9日目
明日が最終日ということで今日は講習会のあとも日付を超える寸前まで粘りました！説明会に遅刻するわけにもいかないので残りを明日の自分に託して一旦1時には就寝しました。今日私が行ったことは以下の通りです。
- 動物のアニメーションにイルカとクジラを追加
- index.htmlがゲーム画面になっているので、アクセスが来たときにタイトル画面 /title.html を開くように設定
特に苦労した点はサーバ制御です。deno講習会から時間が経っていたこともあり、資料を見返しながらなんとか実装できました。
動物のイラスト制作では、輪郭に黒ではなく茶色を使い、彩度の高い色を使うよう心がけました。また、目の中に光を入れるなど、綺麗な海岸の爽やかさを表現できるように工夫しました。
9日目終了！！
10日目
今日はいよいよ最終日です！毎日行っていたラジオ体操も最後ということで、いつも以上に張り切って体を動かしました！
オフィスツアーの様子
今日はしゅんぴさんによる会社説明会とオフィスツアーから始まりました。部活動が盛んということで、インターンの初めから感じていた社員さん同士の仲の良さの理由はこの福利厚生にあるのだと思います。ボドゲが盛んということだったので、てっきり部活動だと思っていましたが、、、なんと非公式でした！もしも正式にボドゲ部ができた時は、ぜひともjig.jpの社員さん達が作ったボードゲームをゲムマで出店して欲しいですね！オフィスは建築歴が浅いこともあり、とても綺麗な内装で至る所にjig.jpの軌跡が散りばめられているところが面白かったです。特に、歴代IchigoJam の展示には、過去に購入した方から寄付されたものも多く、お客様に愛されているということが伝わりました。
説明会が終わるといよいよ発表会に向け、ギリギリまで実装しつつ、発表準備を行いました。最終的に決まったチーム名とアプリの概要はこちらです。
- チーム名：アカエイ<^-^>を流行らせ隊
- メンバー：なっち、よーすけ、mizuumi、ふじいメンター
- プロダクト名：かいがん清爽
- ターゲット：普段の生活でストレスを感じていてリラックスしたい人
- ビジョン：汚れていた海岸を自分の手で綺麗にすることで、さわやかな気分になり、綺麗な海岸でリラックスできる
- 推奨動作環境：スマートフォン
online-2024-f-67cvaqq0n3vc.deno.dev
チームの人とはそこそこ打ち解けられたこともあり、未定だったチーム名もすぐに決まりました！せっかくチーム名にアカエイを入れたので、掃除が進むにつれて出てくる動物にアカエイを取り入れればよかったですね。。。。発表練習をギリギリに始めたので本番は上手くいくか不安でしたが、大きな問題もなくいい具合にはっちゃけた発表になったように感じます。
続くFチームの発表はアプリの概要や実装のポイントがしっかりまとめられていて分かりやすかったです。データベースやサーバ制御など、私の班では取り扱わなかった技術がたくさん取り込まれていて刺激を受けました。また、テーマカラーやお酒のイメージカラーなども細かく設計されていて、見た目もとてもオシャレでお気に入りです！こちらがFチームの作品の概要になります。
- チーム名：blue fairy
- メンバー：ゆい、まさき、そうま、ほどたん
- プロダクト名：cocktail message
- ターゲット：気持ちを伝えたいけど、なかなか素直になれない人
- ビジョン：ユーザーが素直になれずに伝えられない気持ちを、相手に伝えれるようにする
- 推奨動作環境：chrome, [スマホ表示をおすすめ]
cocktail-message.deno.dev
社員さんから頂いたアドバイスやアイデアは、どれも面白く新鮮で、あの短時間で「もっとこうしたらおもしろい！」という意見が出てくることに驚きました！
発表の様子
両チームの発表が終わり、「さわやか」で乾杯して打ち上げ兼振り返りを行いました。反省点だけでなく、今回上手く実装できた点も次の開発に活かしていきたいと思います。また、今後も大学の課題でWebアプリを作ることがあると思いますが、課題の評価として求められていなくても今回学んだユーザビリティを意識した実装を心掛けていきたいです。
まとめ
打ち上げの様子
今回のインターンでは高専生、大学生、院生とさまざまなバックグラウンドを持つ人と一緒に参加できたことで、技術力・発想力ともに良い刺激を受けました。実際にアプリ開発を体験することで、講義の時に感じていた「結局この知識どう使うの？」という疑問に明確な答えが出せました。今後は資格の取得だけでなく、自分の技術力向上に向けて講義では扱わない技術にも積極的に触れていきたいです。
最後になりますが、チームの皆さん、およびメンターの皆さん、10日間ありがとうございました。
