作ってみたいプログラムについて書いておく

##記事の目的
個人で作りたいプログラムを言葉にしてアウトプットしておき管理すること。

####記載する内容

* 個人で作りたいプログラムの案
* プログラムを作る目的
* 実現方法の検討
* 技術キーワード
* 進捗状況
* 取り組む中での学び
* 今後の展望

##運用
進捗したら都度更新していく。
優先度はここでは定義しない。

##作りたいプログラムリスト

1. 海外の日本人サッカー選手情報まとめ
2. LINEで動くコンテンツ
3. Google Map APIで旅気分を味わうプログラム
4. AWSを使用するプログラム
 
##各プログラムについて詳細

###海外の日本人サッカー選手情報まとめ
#####目的
僕はフットボールが大好きで海外で活躍するサッカー選手の情報を仕入れるのが大好きなんですが、スポーツナビなど一般にみることができる情報だけでは満足できなくなってしまったのです。なので、自分で満足できるような情報まとめを作ってしまおうと考えました。

####技術キーワード

* ウェブスクレイピング
* PowerShell(5.1)

####実現方法の検討

* 選手の情報は、ドイツの情報まとめサイトのtransfermarktから収集します。
* 選手を掲載するウェブページ全体に対してスクレイピングを行います。
* スクレイピングによって取得したデータの中に"日本国籍"を表すデータがあるので、"日本国籍"を持つウェブページだけを手元に記録していきます。
* WindowsのPCから簡単に実行できる仕組みを採用したいので、Windows10に標準搭載されているPowerShellを採用しました。

####状況

* 情報を取得することはできており、かつ、"日本国籍"を判定することもできている。
* いつも決まった回数のアクセスで「500 Internal Error」が返ってきてしまう。
* transfermarktの選手情報ページは動的コンテンツのようで、URLの指定が難しい。
* まずは「500 Internal Error」がなぜ発生するのか理解しないといけない。

####このプログラムでの学び

* PowerShellでできることや使い方
* ウェブスクレイピング(初めて取り組んでいる)
* ウェブプログラミングのいろは(仕事ではC言語とSQLがメイン)
* htmlの中のscriptタグの中にソースが埋め込まれてるのを知った。

####今後の展望
* まずは「500 Internal Error」がなぜ発生するのか理解しないといけない。
* "動的コンテンツ"を作っているところがカギになりそう。
* htmlのscriptタグに埋め込まれているJQueryやJavaScriptのソースを追っていく。
* その過程で、HTMLやjQuery、JavaScriptを学んでいく。

---

###LINEで動くコンテンツ
#####目的
先日、大学時代の友人とZoom飲みをやった時に、「暇つぶしになるコンテンツ作ってほしい」みたいな話を聞いて、何か作ってみたいと思った。

####技術キーワード

* LINE bot
* Heroku
* Node.js(v12.14.1)
* LINE Developers

####実現方法の検討

* 皆が使っているプラットフォーム上で動くものが良いな、ということでLINE botを使ってコンテンツを作ってみることにしました。
* コンテンツをデプロイする方法として、Herokuを採用しました。
* Herokuで使えるプログラミング言語としては、少しだけ勉強しているNode.jsを採用しました。
* コンテンツとしてはクイズ的なものが面白いかと思いつつ、まずはbotとして動かせることを最優先。

####状況

* LINE Developersでアカウントを作った。
* Herokuのアカウントを作った。
* LINE bot初号機として、「ラテン語ひとこと格言bot」を作って公開した。
<img width="271" alt="ラテン語ひとこと格言bot.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580452/e437cf5c-9987-6421-223f-ab97f6e96f63.png">
<img width="319" alt="QRコード.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580452/59032c8b-ebe5-aec0-49e8-334122af26c5.png">


* クイズ的なコンテンツはどうやったら実現できるか検討してみる。

####このプログラムでの学び

* LINE botってこうやって作るんだ、という知見を得た。
* Herokuって、デプロイってこういうものなのか！という知見を得た。
* 作って公開してみてなんだけど、ただのbotだと正直あんまりコンテンツとしておもしろくないと感じる経験を得た。

####今後の展望

* Herokuってどういう仕組みで動いているのか知りたい。
* より安心安全なデプロイするためには？を考えるきっかけにしたい。
* 日々botコンテンツの拡張を行っていく予定。
* ユーザとの相互のやり取りができるようなコンテンツはどうやって作るのか調べてみる。

---

###Google Map APIで旅気分を味わうプログラム
#####目的
最近旅してないなーと思っていたところにコロナ禍も重なり、自宅にいながら旅気分を味わいたいと思ったことが最初のきっかけ。プログラマとしてはGoogle Map APIを使ってみたいと思っていたので、使ってみることにした。

####技術キーワード

* Google Map API(GeocodingAPI)
* Google Cloud Platform
* PowerShell(5.1)

####実現方法の検討

* 緯度・経度を自動生成する。
* その情報をGeocodingAPIに渡して位置情報を得る。
* WindowsのPCから簡単に実行できる仕組みを採用したいので、Windows10に標準搭載されているPowerShellを採用した。

####状況

* 緯度・経度を自動生成する仕組みを作った。
* 位置情報を持ったJSON形式のデータを取得することができた。
* 緯度・経度だけ指定すれば、ブラウザ上にGoogleMapを表示できることも分かった。
* できたのが↓。

[ランダムに緯度と経度を生成し、Google Mapを表示させるスクリプト]

PowerShell script that display and indicate site randomly on Google Map.
[https://github.com/Massas/PowerShells/tree/master/randomGoogleMapDisplay:embed:cite]

####このプログラムでの学び

* 緯度・経度がどういう値を持っているか知った。
* Google Map APIの導入の仕方を知った。
* 海があまりに多く、広いことを思い知った。(太平洋、大西洋、インド海、北極海…)
* ロシアやアルゼンチンなど国土の広い国があまりに広いことを思い知った。
* ヨーロッパの各都市とか、日本とか、本当に地球のごくごく一部。世界は広い！

####今後の展望

* Googleストリートビューを絡めたい。
* Twitterのbotも運営しているので、絡めたらちょっと面白いコンテンツにできそうな気がしている。

---

###AWSを使用するプログラム
#####目的
単純にAWSとウェブプログラミングを学びたいと思って。

####技術キーワード

* AWS(Amazon S3)
* Node.js
* HTML
* CSS
* パブリック・ドメイン

####実現方法の検討

* Node.jsでローカルホスト上にサーバを立てて、HTMLを読み込ませる
* ホームページの自作をしてみる。
* 静的コンテンツはAmazon S3に配置する
* 画像はパブリックドメインのものを使ってみる。

####状況

* ホームページのコンテンツ作りはストップしている。
* AWSの仕組み、難しい。
* そもそもウェブプログラミングの知見を増やす必要ありと思慮している。

####このプログラムでの学び

* ホームページを作るのは大変と知った。HTMLやCSSの実装大変と知った。

####今後の展望

* ウェブプログラミングの勉強、実装の経験を積むことが先決。
* HTMLやCSSの勉強(ページのデザイン的な要素)は今やることじゃないなー、と思っている。

---