Hiroto
自己紹介
klis20
漢字難しいです。蒐場広翔(Hiroto Nuaba)
開発経験→ナシ
大学の暮らしにデジタル化を組み込みたい!!!
↑これ技術的だけじゃなくて導入までやりたいので、パイプある人つないでください!!
Scrapox使いやすいんですが、最近Notionつかいはじめたので、詳しくはそちらに書きます~
大学生向けのアプリ作りたいなと思いながら
作りたいアプリあるんで調べながらやるぞ
・webデザイン
・コミュニケーションツール
・えりたんbotに勝つ
・来週までに自分のHPをHTMLで作る
・食堂利用
・Ringと提携
・権力を使う
・公的組織関係(制度的な奴)
→モバイルで生活に密接に絡みつく物
システムが組みたい
なんかいろいろ
生きてて楽しいと想えるもの
4/29
↑この書き方を見つけたので使います
ソロ活動
・Progate触ってみました
・今週講義と課題に追われてしまって何もできなかった。
・GW頑張ります。
5/13
ソロ活動
・Google MapsのAPIを調べてみた
・djangoをインストール
・SNSの要素を拡張できる機能は便利かも
次回に向けて
・Googleのオープンソースをいろいろ触る
・djangoに触れてみる。
・Googleの拡張機能作ってみる
・next.js気になる!
5/20
ソロ活動進捗
・Google maps API
導入できず。。。htmlで見れるようにはしましたが、、設定が難しくAPIの導入までには行けず断念
大学サーバにhtmlをおいてみました。見れるのか?
筑波大学版のgeoguesser的な物を作りたい。。
・progate
phase4以降(5/28~)体が空くのでそれからやる
・django
初期画面はつくれたぽい?いまだにわからん
・拡張機能の作成にはjavascript触ることからか?
・講義で学んだコード等をnotionにプログラミング日誌で掲載
学類的にhtml,xml,Xpath式が多い
それぞれの講義で横断的に同じ事を学習しているので、訳が分からなくならないように備忘録も兼ねてます。
次回に向けて
あんまり5/13と変わってません
フィードバック
GoogleAPIは難しいよ・・・!もし分からなければ、聞いてもらえれば少しは手助けできそう!!(日高)
たくさん聞いてね!! by 日高
↑のURL見れた!すごい!!ちゃんと動いてる!!
確かに並行で授業受けていると分からなくなるよね〜
klisのプログラミング日誌!!気になる・・・!
google maps APIはいいところに目を付ける(割と毎年夏秋の開発で使ってたりする)
djangoで今頑張っていますが、django全然わかりません
Notion、いいですよね 自分も使っています
API触れてないから、めっちゃ参考になる
javascriptやnotionやっててすごい
6/17
知識のシステム実習で、apiを用いたwebサービスを開発しているので、それを自己学習とします。
サービス概要:google maps javascript apiを用いて、筑波大学周辺のストリートビューをランダムに表示→地図でポイントを選択。もともとgeoguesserというサイトがあり、それを参考に開発しました。
htmlで記述し、それをapiを用いたjavascriptで動かし、cssで描画しています。
大本の形は完成し、サーバー上でオンラインで動くことを確認しました。
後は、回答に応じたポイント、時間設定、ランキング等を付随してつけたいと考えています。
実習は来週で終わるので、enPitの自己学習発表までにクオリティを挙げてみたいと思います。
フィードバック
アプリが動いてる時点ですごい
正解緯度軽度と,回答…… というのはどういう意味でしょうか?
素人感想ですがめっちゃちゃんと動いてて凄いです!
ストリートビューと地図が表示されててすごい、距離計算などがちゃんと動いてて良い...
ランダム性あるの良いですね!
一からここまではだいぶすごい。あとはデザインとか?
6/24
システム実習でゲームを組みました。大学サーバにおいてます。前回のまとめをした感じです。進捗は特になしです。
発想とかミスした流れ完成までnotionに書き込みました。めちゃくちゃどうでもいいことが沢山書いてあるので、全部は移せないんですが、抜粋します。
↓参考にしたサイト一覧です。
https://scrapbox.io/files/62b56faf850e26002329d343.png
google map apiの利用
環境構築が難しかったです。google cloud platformの登録から始まり、apiキーの取得までで一週間くらいかかりました。キーの制限でサーバーを指定しています。google maps javascript apiを使用しました。
htmlの学習
さらっと触れただけだったので、progateの無料版を終わらせました。後はサンプルコードを参考に手書きしました。
javascript
本当に初めて触りました。progateの無料版を終わらせ(同上)サンプルコードの読解で自分でコードを書きました。
css
画面の修正に使ったくらいです。デザイン性が低いので、cssの学習をして巧いwebデザインを作りたい。
画面遷移
①topページ:画像ファイルを読み込み、formタグで次のhtmlに遷移するようにしています。
https://scrapbox.io/files/62b570a6dd333e001d9c7b7f.png
②問題ページ:javascriptのコマンドMath.random()でランダムに数字を表示させ、緯度:36.0710~36.121408、経度:140.0736281665~140.12031の範囲で数値を決定しています。この値を元に左側にストリートビューの画像を表示しています。この数値を地図で表示すると下図の赤枠線になります。(見づらくてごめんなさい)
それとは別に、マップをクリックすることで、緯度と経度を取得システムをおいています。これが解答欄になります。
緯度経度をポイントして「決定」を押すと、formタグで、緯度と経度が次のhtmlに渡されるように設定しています。
https://scrapbox.io/files/62b57121503db200225a6387.png
https://scrapbox.io/files/62b571cf35f6ce001dbdf5a6.png
③結果画面
先ほどの画面からもらった緯度経度と、②でランダム発生させた緯度経度を、同一マップ内にポイントしています。
その2点を線でつなぐことで、視覚的に距離が分かりやすくしています。更に、緯度経度から距離を計算し、inputのtextボックス内に表示させ、回答としています。
https://scrapbox.io/files/62b57223ac18630020012551.png
④リザルト画面
ここに結果を表示したい。。topページに戻ります。
https://scrapbox.io/files/62b57355da0eb2002333d826.png
改善点
・デザイン:cssの取得
・データベースの利用:ランドマークのみのモードを作って、(つくば駅やイーアスなど)そこのヒントをデータベースに格納しておき、場面ごとに呼び出す仕組みを作りたい。csvファイル?
・djangoの導入、ログイン画面、ランキング作成をしたい。
・制限時間の導入:htmlに時間要素を入れるにはどうすればいいのだろうか…?そういうタグがある?
・範囲の設定:Math.randomの範囲を変更できるようにする。
・たまにバグ(Math.randomで呼び出した緯度経度にストリートビューが存在しない)が起きるので、ifを使ってどうにかしたい。
~来週以降やりたいこと~
SQLを学びなおす
cssの学習
(djangoの導入)
react
google拡張機能の作成