01

目次
P.3 ……SLP の活動
P.6 ……学生の製作物
P.19 ……アドベントカレンダー

2

3

4

5

OS を製作している話
香川大学 創造工学部 2 年 横山ひなた
お初にお目にかかります。SLP 所属 2 回生の横山と申します。過去の作品について記事にしている方が多いかと思うのですが、私は現在開発中のものについて文章にしていきたいと思います。初記事のため拙い部分も多いかと思いますが、最後までお読みいただければ幸いです。
まず、そもそも何を作っているのかという話なのですが、『ゼロからの OS 自作入門』(内田公太著,マイナビ出版, 2021)を参考に自作 OS に取り組んでおります。「なぜ OS を作ろうと思ったのか?」ということに対しては、OS を題材とした授業を受けて興味を持ったため、調べていた結果自作 OS というものを知って取り組んでみようと思い立ったからです。参考にした本が最近出版されていたこともあります。
ともあれ、いざやってみようとしたときに開発環境が整っていなかったため、いろいろダウンロード＆設定を行いました。今回開発に利用している OS は windows10 です。WSL2 上の Linux を用いています。
また、試験用パソコンを準備できなかったため、VcXsrv を用いて試験を行っています。
開発手順は本の通りといっても過言ではないため、個人的に印象に残ったところでも書こうかと思います。今までテキストエディタしか触ったことがなかったため、バイナリエディタを用いて書くということが凄く新鮮でした。用いたエディタは「Binary Editor Bz」です。機械語は説明のみでしか見たことがなかったため、実際に体感することは、今後とても役立つように思えました。
(Binary Editor Bz を用いて「Hello, world!」と表示する→)
今後の展望としては、まずは完成。そして、アドベントカレンダーの時に作った色が虹色に変わるペイント機能の実装を考えています。また、制作した OS を基本 OS としたパソコンでいろいろ動かしてみたいと思っています。
まとめとしては、OS を作っていること。今後の抱負として、完成後もさらなる機能を追加していきたいです。
ここまで長々とお付き合いありがとうございました。

6Kawa-Rhythm
香川大学 創造工学部 3 年 石上椋一

1.

導入
今回は、Kawa-Rhythm という Web アプリを制作しました。この Web アプリは Twitter、Youtube、Amazon、Pixiv の４つのメディアを取り扱えるものとなっています。この Web アプリを制作しようと思ったきっかけは 2 つ存在します。
1 つ目は、ブラウザの操作に興味を持ったからです。私は、この制作物とは別で画像解析の勉強を行っています。画像解析を行う上でスクレイピング技術を使用し、画像収集を行っていました。そこで、ブラウザの操作に興味を持ち、それに関する制作物を制作したいと感じたのが１つ目のきっかけです。
2 つ目のきっかけは、使用するメディアを 1 つにまとめたいと感じたからです。私はよく夜までTwitter をしたり(ツイ廃)、Pixiv で画像をよく漁ったりしています。しかし、メディアを変えるたびにブラウザのタブを切り替えて、一回一回ログインや検索をし直すのがめんどくさいと感じていました。よって、このような Web アプリを制作すれば解決できると考えました。
以上、２つの理由からこの Web アプリを制作しようと思いました。

2.

3.

使用言語、技術➢

Ruby

➢

Rails

➢

Watir

➢

Chrome driver➢

Twitter API仕様
現段階では、ローカル環境でのみ使用することができます。各メディア用にログインボタンと検索ボタンを作成し、Twitter 用にはツイートボタンを実装しています。ログインボタンを押した場合、Google Chrome が自動で開かれ、選択したメディアの画面に移動し、ID とパスワードが自動で入力されます。検索ボタンを押した場合は、上記と同じくログイン処理が行われ、テキストボックスに入力された単語で検索を行います。ツイートボタンを押した場合、テキストボックスに入力されたメッセージがツイートされます。

7

図 1 入力画面

図 2 ログイン画面

図 3 検索画面
84.

今後
現在は、各メディアに対して別々に操作を行っていますが、複数のメディアを組み合わせていきた
いと思っています。例えば、Pixiv にある画像をツイートしたい場合、自動保存、作者や URL の取得、Twitter の自動ログイン、自動ツイートといった流れを行えるようにしたいと考えています。さらに、難しいかもしれませんが、Amazon で商品をカートに入れる作業も行えたら良いなと思っています。また、現在は４つのメディアしか取り扱っていませんが、Facebook や Instagram など取り扱うメディアを増やしていきたいです。

5.

参考文献
http://watir.com/
https://github.com/watir/watir-rails
https://www.seleniumqref.com/
http://kakedashi-xx.com:25214/index.php/2021/05/27/post-2533/

9

Linux コマンド学習基盤 Web アプリケーション
香川大学 創造工学部 3 年 三枝泰士

導入

開発者にとって、Linux コマンドを扱う機会はなきにしもあらずだと思うが、どのコマンドをどのように使えば何ができるのかを学ぶ機会は、実際に触ってみる他にはほとんど無いだろう。 そこで、誰でも手軽にシェル芸 Linux コマンドを学習できるようにするため、Web インタフェースを通したコマンドの実行を可能にした。
悪意のあるコマンドを防止するため、gVisor を利用したサンドボックス環境を利用している。

使用技術•Docker•gVisor•

Python概説

問題とそれに使用するファイルが用意されており、問題の解答が算出されるコマンドを入力し送信することで、正誤と実行結果が表示されるものとなっている。
実装は、Docker コンテナとして、ASGI Web サーバー(FastAPI)、Nginx、postgresql が構成されている。
Web サーバーに、コマンドを実行するリクエストが届くと、新たに Alpine Linux のコンテナが gVisor を使って作成され、コマンドを実際に実行する。実行結果は Web サーバーに返却され、ブラウザに反映される。

10

工夫点

gVisor を利用している。gVisor とは、Google が提供しているコンテナランタイムで、ユーザー空間にカーネルを用意することで、ホストマシンのカーネルを不正なシステムコールから保護することができる。
これを使うことによって、コンテナを利用しつつ、他のコンテナに影響を与えないようにしている。また、リソースを消費させないように、プロセス数やメモリ、実行時間等の制限をかけている。

11

問題点

上記の通り、リソース制限を設けてはいるが、ストレージの制限はできていない。実行後のコンテナは即座に消去されるものの、大量のファイルを作成された場合、多くのストレージが浪費されてしまうだろう。 対策としては、ホストマシンでの quota の設定や、docker の--storage-opt オプションを使用することがある。しかし、ホストマシンの設定の変更はホストマシンを汚すことになるため、やりたくない。また、docker のオプションを使うにも、docker のストレージドライバを変更する必要があり、変更先のdevicemapper は非推奨で、将来的に削除される予定である。さらに、dm.basesize(最小コンテナサイズ)が 1GB より小さくできない。 もっといいやり方が欲しいところである。

今後について今後の機能追加として、問題に点数を設け、ユーザーごとの進捗やランキング機能があれば、競技のような使い方ができ、面白い学習ができると考えている。
そのため、問題への点数設定、ユーザーの作成とログイン機能、ランキング集計とそのグラフィカルな表示機能の追加ができればいいだろう。 また、現在は問題数が 3 問しかないため、問題の充実も必要である。
最終的にはサークルで使用できる品質にできればいいなと思っている。

12

クリーンアーキテクチャと JWT を用いてアプリケーションを作ってみた
香川大学 創造工学部 3 年 樋口史弥

目次-

アプリケーションの仕様

-

使用技術

-

クリーンアーキテクチャって？
--JWT って？
--実際に使ってみたメリット・デメリット

JWT が生成される流れ

最後にアプリケーションの仕様
今回作成したアプリケーションは、ユーザ名とパスワードを含んだリクエストを受けるとユーザ名とパスワードのペアが正しいか検証し、正しい場合はトークンを返すアプリケーションです。ソースコード
は以下のリンクにあります。
https://github.com/higuruchi/certification-app
以下は実行時のデモです。
$ curl -w '\n' 'http://<IP Address>:<Port>/' --data 'name=higuruchi&password=pass' -XPOST{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhZG1pbiI6dHJ1ZSwiZXhwIjoxNjMxNjgxODk
3fQ.YEWrN5T2rQyferN2kt2V3up3fW5N030jlDphkzXx7JU"}$ curl -w '\n' 'http://<IP Address>:<Port>/' --data 'name=higuruchi&password=faultpass' -XPOST{"message":"unauthorized"}13

処理の流れ s

使用技術--

Go 1.17-

Echo https://echo.labstack.com/-Wire https://github.com/google/wire

MySQL Ver 8.0.26

クリーンアーキテクチャって？
クリーンアーキテクチャとは下図の通り External Interface・Interface Adapter・Usecase・Entity の 4 層になっており、それぞれの層を分離し、依存の流れを外から中の一方向にすることを目的としたアーキテクチャです。

14それぞれの層の解説-

Enterprise Business Rules
アプリケーションのビジネスロジックを表現する Entity が所属するレイヤー-

Application Business Rules
Entity が持つ振る舞いを表現するためのレイヤー
Entity に所属するオブジェクトと協調しユースケースを達成する-

Interface Adapter
Frameworks & Drivers の層から来たデータを内側の層で扱えるデータの変換にする役割を果たす-

Frameworks & Drivers
データベースの操作などの外部との連携の役割を果たす

実際に使ってみたメリット・デメリット
実際にクリーンアーキテクチャを利用したアプリケーションを作ってみて感じたメリット、デメリット
は以下になります。
メリット-

内側の層は外側の層がどのような実装になっているかなどを気にしなくてよい実装になっているため、データベースなどのミドルウェアを変更した場合でも最小限の変更で済ますことができる-

どの層にどのような処理が書いてあるかがわかりやすいため、目的のコードを探す手間を省くことができる

デメリット
-

依存関係を解消するためのインターフェースを実装しなければならず、プログラム全体が複雑になり、ファイルやソースコードの行数も増加することがある

15

JWT って？
JWT とは JSON Web Token の略称で、属性情報を JSON データ構造で表現したトークンの仕様です。ヘッダ、ペイロード、署名の 3 つの要素から構成され、トークンを書き換えた場合、署名と照合することにより書き換えを検出することができます。

JWT が生成される流れ

最後に今回のアプリケーションはとても小さく、クリーンアーキテクチャのメリットよりもデメリットのほうが大きくなってしまうかもしれませんが、チーム開発をする際や、保守性などが大切になってくる場合、それぞれの層が分離され疎結合になっているためインターフェースさえ決まっていれば同時に進めることができ、外部との連携方法を変える際にも最小限の変更に抑えることができます。これを機会に皆さんもクリーンアーキテクチャを学んでみてはどうでしょうか。

16

VR で犬と遊んでみた
香川大学 創造工学部 4 年 重松亜夢
こんにちは！重松亜夢です。最近は実家にもあまり帰れていないため、実家の犬が恋しいです。そこで、犬と遊べる VR ゲームを作り始めました。ソースコードはこちら(https://github.com/Amakuchisan/DogPartyGame)です。
現在実装している機能は、ボールを投げると、犬がボールを追いかけるという、一般的な遊びです。まだまだ未完成ですが、作成途中のゲームの雰囲気を、ざっくりとお伝えできればと思います！

犬のモデルの Asset について
犬のモデルには、こちらの Asset を利用しています(https://assetstore.unity.com/packages/3d/characters/animals/lowpoly-dogs-pack-164065)。

このパックには、7 種類の犬と、65 個のアニメーションが含まれています。例えば、「座る、走る、ジャンプする、寝転がる」などの動きを設定することができます。

実装
Terrain の機能を使って、地面を作成し、草を生やし、木を植え、犬(レトリバー)を 1 匹配置しました。
そして、弾性のあるボールを作成し、犬の横に置きました。
また、犬の正面に、プレイヤーを配置します。この時点で既に犬をかわいく感じます。

17

アニメーションの設定は、下図のようになっています。通常の状態では、Entry から始まり、図の上側(待機状態: Crouch_idle)の遷移を行います。ボールをプレイヤーが持つと、Entry から、図の左下(状態状態:idle_1)へ遷移します。そして、その状態でプレイヤーがボールを投げると、ボールを追いかけて走る状態(Run_F)へと遷移します。

上記のアニメーションに遷移するように作成した結果、下の画像のようになりました。ボールを持つと、画像左のように、犬がボールを見つめてきます。その状態でボールを投げると、右のようにボールを追いかけてくれます。追いかけている様子がとてもかわいく、気に入っています。動くともっとかわいいです。

まとめと今後の予定
このように、犬がボールを追いかけ、その犬をプレイヤーが追いかけるだけの簡単な機能を実装しています。本当は、もう一つ、特技を習得させる予定だったのですが、原稿の締め切りに間に合いませんでした。読者の方は、ぜひ、今後実装されるであろう機能を予想してみてください。また、こんな機能あったら楽しそう！というアドバイスも頂けると嬉しいです！
最後に、現在、ボールを追いかけてはくれますが、まだ投げたボールをくわえて持ってくることはできないため、ボールをくわえて持ってきてくれるようにしたいです。これから、もっと遊びのバリエーションを増やしていくことを目指しています！

18

19

20

21

22

23

24

25

26

27

28