実習内容

1日目の実習内容

インターンシップ初日は、参加者全員の自己紹介からスタートし、今回の実習で取り組む内容について全体の説明を受けました。その後は「アイディアソン」に入り、まずはAlexaでどういったスキルを開発できるかをチームに分かれてアイデアを出し合いました。 その後インターンシップ担当者様からアイデアに関して実現可能性や既存性についてフィードバックをしていただき、その後商品開発において重要となる視点や考え方についての講義を受けました。その講義を踏まえた上で、各自が考えたアイデアのうち、どれを作成するかを決めました。その後は、私たちが作成すると決まったごみ分別スキル「ゴミダス」の会話パターンを考えました。

お昼にはランチ会が開催され、担当者様や他のインターン生とリラックスした雰囲気で交流を深めることができました。全員が高専生ということもあり、共感できる話題で盛り上がったり、逆にその高専にしかない特色などを知ったりと、盛り上がりつつも互いのことを深く知ることのできた有意義な時間になりました。

午後からは、いよいよ実際の開発に向けた準備に入りました。午前のうちに考えた会話パターンを発表し、フィードバックをもらいました。その後「Web」と「Alexa」という2つのチームに分かれ、それぞれの担当を決めました。例年は2~3のチームに分かれて作業を行っているようですが、今年は6人で協力しつつ、それぞれの担当(Web2人、Alexa2人、サポート2人)を行うという体制にし、分からないところは相談しつつ開発を続けました。ちなみに、6人のチーム名は松江市の名物の一つ若草とアレクサをかけて、Wakaxaとしました。素晴らしいセンスです。

2日目の実習内容

ここからは、AlexaとWebに分かれて紹介します。

[Alexa]

[Web]

Webページ作成では、1日目にはあまり理解していなかったクラスやidの概念を学びました。
実習内容や成果、メンバーについてのページを同じhtmlファイル上に書くか、別のhtmlファイルに書くかは悩みましたが、一般的な学校や企業のWebサイトは別になっていることのほうが多かったため、実践的にと思い別のファイルにしました。そのため、各所にあるボタンを押した際にページが飛ぶ場合、すべて別のhtmlファイルにアクセスするようになりました。 また、メンバー紹介のページ、実習内容のページ(まさにココ！)を作成しました。並行作業でAlexa開発をやっているため、Alexaページは後回しにしました。

メンバー紹介にしても、実習内容にしてもデザインに統一感が出るようなるべく再利用できるところは再利用しつつ、ページの拡大縮小にも対応できるようにHTMLやCSSを書きました。 Webのタブ左上に表示されるアイコン(ファビコンというらしいです)も作成してくださった方がいたため(素晴らしきアイコン、素晴らしきお人。感謝御礼申し上げます。)そのロゴも表示させました。

3日目の実習内容

[Alexa]

3日目の作業にて実機でのテストも成功し、Alexaスキルの実装が完了しました。Alexaスキルの呼び出し名をAlexa側が認識してくれない等の問題もありましたが、修正することができ実装までこぎつけました。ゴミダスの実装がひと段落ついたので、他のAlexaスキルの実装に手を貸したりしていきます。

[Web]

3日目は、細かいUIの調整やスマホでWebサイトを開いたときに表示が崩れてしまう部分を修正しました。2日目までで基本的なWebサイトの形は作れていたのですが、開発していたパソコンではなく、スマホで開くと、上のメニューやこのページの1日目などのタブが崩れていました。(画像はメニューが二行になってしまっている様子) そのため、スマホで開いた場合にのみ幅を調節するようにパラメータを設定し、修正しました。また、上のタブを選択している際に下線のアニメーションが出るようにしました。ぬるぬる動きます。

4日目の実習内容

[Alexa]

ゴミダス:
4日目には、ゴミダスの機能をアップデートしました。今までは一回の対話につき一日しか登録できなかったのを、複数の曜日を同時に登録できるようにしました。また、今日の曜日を参照し、一番近いゴミを捨てれる日を教えてくれる機能も追加し、さらに使いやすくなりました。

島根県民診断:
ゴミダスの完成に伴い、診断ゲームの作成にも取り組みました。ゴミダスの開発で培った経験を活かし、一日で完成させることができました。診断の内容については、メンバーと協力して作成しました。

[Web]

3日目にスマホで表示した際のUI崩れを修正したため、4日目はAlexa(その前はゴミダスというページ名でしたが、4日目より島根県民診断が開発されたため変更)のページを作成しました。

ちなみに、4日目の朝に気が付いたことですが、作ったホームページがスマホで表示したときにどうなっているかを知りたいときは、GoogleChromeの右上の点が3つ縦に並んでいるやつ→その他のツール→ディベロッパーモードを選択して、右側の枠の左上からおそらく二番目にあるパソコンとスマホが表示されているアイコンをクリックすると、左のDimensionsというところにどのスマホ(タブレット)で表示するかを決めたのち、その画面で表示した場合のホームページが移るのでオススメです。来年度以降にWebを制作する人はぜひ使ってみてください！(2025/8/28時点です。それでも実機とは画像の表示など一部異なるところがある場合があります。ただ、基本的には同じかなと思うのでよければぜひ...)

さて、実習内容に戻ります。Alexaのページについてなのですが、動作を文章で説明されるよりも、動画で実際に動いているところを表示したほうがいいというAlexa製作者の鶴の一声により、動画を貼り付けることにしました。また、今自分がどこのページにいるのかわかるようにしてほしいという要望があったため、画像のように実習内容のページにいるときは上のタブの"実習内容"のデザインを変更し、現在地をわかりやすくしています。この部分はJavaScriptで作成しましたが、5行程度に収まったため未経験でも問題なく理解することができました。

5日目の実習内容

5日目は、Alexaは発表用資料の作成、Webページはその調整と、発表の準備を行いました。Webページのデザインを考えるところから実際に実装を行い、苦労した点や良かった点などを発表しました(この文章を書いているのは発表前なので、うまくいっていることを願います)。個人的には、スマートフォンなどで表示した際にUIが崩れないように何度も修正をすることが苦労した点でした。ただ、そのぶん結果として無事スマートフォンの画面にもレイアウトが対応してとても嬉しかったですし、インターンシップの中で達成できてよかったです。

以下は、スマートフォン表示時の画面です(実機:iPhoneSE 第3世代)