はじめに こんにちは、高校一年のAkimasa_Lです！ 世間は自粛自粛っと言ってばかりで最近では緊急事態宣言の発出範囲が増えたようですが、僕のようなパソコンオタクは緊急事態宣言が出ていようがなかろうが何も変わらずこの夏休み中は家に引きこもり続けてずっとパソコンの画面とにらめっこしています。 最近はコロナの影響もありうちの学校でも様々な学校行事が中止になったようですが、どうやらうちの校長は行事やる気まんまんらしく、今年度は文化祭と体育祭はやることになっているようです(ほんとに大丈夫なのか？)。 そんなこともあって、今回は僕らの学校がやっていた文化祭・体育祭関連のことについてお話したいと思います。 今までやっていたこと どうやら僕たちの学校の文化祭・体育祭ではTシャツを着るという文化があるらしく、所属している団体部門やクラス、学年等によってそれぞれ独自の色・デザインのTシャツを着ているようです。 そこで重要になってくるのがTシャツのサイズの問題らしく、今までは各クラスごとでそのようなSとかMとかを一人づつ名簿に書いていって超アナログにやっていました。 最近ではうちの学校で契約しているGoogleのG Suiteというサービスを用いてGoogleフォームを使ってTシャツのサイズを集める部門も出てきましたが、それぞれバラバラのフォームで、多くの団体・部門に参加している人ほどたくさんのTシャツフォームに回答しなければいけなくなり、とてもめんどくさいシステムだったようです。 今年度になって 今年度になってからちょ～名前かっけ～～～な†技術部門†が設立され、その部門長にOrangeat(お誕生日おめでとうございます！！)が就任しました。 かっけ～～～ 技術部門長はこの問題の解決に尽力され、このように統一Tシャツフォームを作成され 、技術部門長が統一したTシャツフォームは、道筋を照らすだけでなく強い力で聖光学院を次の次元へ押し上げ ました。 これのいいところ Tシャツのサイズを何回も違うフォームに入力しなくていい！！一つでいいから楽！！ クラス番号名前を入力しなくていい！！ログインしているアカウントで自動で判別してくれるから楽！！ Tシャツを受け取るときにお金を渡さなくていい！！学費から落としてくれるから楽！！ どのサイズにしたか忘れても大丈夫！！メールの履歴から見れるから楽！！ あとからサイズが変更できていい！！やっぱデカめのほうが良かったな～～ってなったときに楽！！ ...など、色々なメリットが有りました。さすがはうちの技術部門長や！ でもなぁ～ 僕はこの中で少し気になるものがありました。 Tシャツのサイズがあっても、どのTシャツ(例えば技術部門の白のTシャツが1枚、展示団体の水色のTシャツが1枚... 合計で何枚で何円だ～～)とかの情報がフォーム上になく、これで保護者の承諾もらいました！！！って言っちゃっていいの？って思いました。(個人の感想です) この、どのTシャツがもらえるか、の情報が教室の後ろに掲載するという形になって、超アナログ～～～(個人の感想です) Googleフォームは、仕様上、ログインした人のアカウントに合わせて動的にフォームの要素を変更できる仕様にはなっていないので、しょうがないなぁ......って思いました。 作りたいもの もし、このGoogleフォームがログインした人に合わせて要素を変えられるようになったらなぁ～～ 作ったもの ということで、作りました。 ちゃんと学校の保護者アカウント以外入れません！！！ https://seikoonlinejudge.web.app/t-shirt/ (Seiko Online Judgeって聖光独自の競プロサービス作りたいなぁ～～って前々から思って、ドメインだけとってありました。) 実装したもの いろんな画面配置して Firebase Hostingであげて Firebase Authenticationで学校アカウント専用ログイン方式にして Google API Client Library for JavaScriptでログインさせて Sheets APIを使って スプレッドシートからデータを取りました！ 学籍番号で二分探索しました(競技プログラミング最高！！) 結局firebase authは使ってないです(かっこいいボタンを作るために犠牲になりました。) だいたいは体育祭のページからデザインをパクりました。 隠し要素 実はここを押すとログアウトできます！ ログイン中：なんとかってとこ押すとメールが送れます(なんでここをログアウトにしないんですか？) レスポンシブデザインに対応しすぎてズーム率上げてもヘッダーしかデザインが変わらなくなってます 生徒会アカウントで入るとちゃんと生徒会アカウントでログインしてますよ！！って出ます！！ つまづいたところ FirebaseのGoogle Auth、どう考えてもgapi使ってるやろ！って思ったんですけどfirebase authの方でログインしたあとgapi.auth2.getAuthInstance().isSignedIn.get()するとfalseになっちゃいます(cookieとかが違うんですかね) firebase authのuser.getIdTokenResult().then()使って得られるaccesstoken、全然accesstokenじゃない(これなんなんですか？)。Authorization:Bearer ${accesstoken}ってrequests headerに打ち込んでGoogle APIを叩いてもHTTP status codeが401(Unauthorized)になりました(これほんとになんのtokenなんですか？？？？)。 二分探索でバグらせた(もっと競プロをしよう！) 実装できていないもの ほんとは下のような表を作りたかったんですが、誰がどこの部門に所属していて、っていう情報が学籍番号順にsortされているスプレッドシートが見つからなかったので、今のところはこのスプレッドシートからログインした人の学籍番号の上下5人の名簿を表示させてます。 所属 色 金額 枚数 初期化部門 無色 1000円 1枚 展示団体 水色 1000円 1枚 体育祭 虹色 1000円 1枚 青ネク 青色 500円 1枚 送信ボタンのデザイン決まってなくてまだつけてないです。いい感じの送信ボタンのデザインあったら教えて下さい。 もしこの記事を技術部門長とか管理局員が見ていたらできればこんなかんじのスプレッドシートを作って欲しいな！！って思ってます。そしたらこのTシャツ申し込みフォームは今のところは何に所属しててなんのTシャツがもらえるかわかるやつのデジタル版みたいなものになれると思います！ 1個目はこんなの 所属 色 金額 なんとか部門 なんとか色 なんとか円 ... ... ... ってすべての所属について書かれているスプレッドシートと 2個目はこんなの 学籍番号 所属 6xxxx 初期化部門,展示団体,応援団なんとか組.... ... ... もし超かっけ～～みたいにやりたかったら整数にして、1bit目はなんとか部門、2bit目はなんとか部門...みたいになんとかbit目が0だったらなんとか部門に所属していない、1だったら所属してる、みたいにbitで管理するってやり方でもいいですよ！！ これから実装したいもの 送信ボタンを押して、入力内容の確認、みたいな画面を作りたいです！！ Firebase Realtime Datebaseとかを使って、入力内容の確認画面で、2回目の送信のときに1回目の送信内容と今回の送信内容、みたいなこともやりたいです！！！ 次やってみたいもの 今後はfirebaseの他の機能とかnuxt.jsとかのWeb開発フレームワーク？みたいなのに手を出してみたいです！ あとAdobe XDとかいうのもやってみたいです！！！ あともしこの記事を博ノ助が読んでいたら、この記事土下座しながら書いているので僕をHP局に入れてくださいお願いします！！ あと生徒会室にあるパソコンのパスワード教えて下さい！！！ おわりに 今日は、gapiとfirebaseを使ってスプレッドシートにアクセスする！という記事を書かせていただきました。 この夏休み、せっかく夏休みだしなにか新しいことをやりたいなぁ～と思って前々からやりたかったHTMLに挑戦してみました。 HTMLに挑戦するきっかけを作ってくださった葉酸くん、そしてこのwebページを作る際にお世話になった方、ほんとにありがとうございました！ これからも精進を積み重ねていくので宜しくおねがいします！！ またこの記事を読んでるそこのあなたも！折角の夏休みなのでなにか始めてみてはいかがでしょうか！ 今回はこの拙い記事をお読みくださってありがとうございます。 いかがでしたでしょうか？ もしよければLGTMボタンよろしくおねがいします！！！ それでは！

HTMLの＜nav＞まとめ html触ってて、＜nav＞? ん？＜nav＞ってなんぞや！！！ってなったので、備忘録ついでにまとめました。 nav要素、navタグってよばれているこれ＜nav＞.....＜nav＞は、ナビゲーションメニューを設定するときに用います。 ナビゲーションメニューってなんぞやって思うかもしれませんので、実際に書いてみました。コレです↓ コードの書き方 navとかulとかli要素の説明 まとめ "コードの書き方"とか"まとめ"とか押すと、ビュンって下行って、その（"コードの書き方"とか"まとめ"の）場所へ飛んでってくれます。 押してみましたか？　これがナビゲーションメニュー（リンク先指定付きバージョン）です！ めっちゃ便利ですよね。私もこの便利機能使いこなしたいので、navについて私が知ってる情報を洗いざらいまとめました。 ぜひ、皆さんも使いこなしてサイトに訪れた者共をその人が欲している情報のもとへ飛ばしてやりましょう！ コードの書き方 では、早速コードの書き方へ突入します！ html <nav> <ul> <!-- <ol>でもいいよ! --> <li>じゃがいも</li> <li>にんじん</li> <li>たまねぎ</li> <ul> <!-- ol使ったんだったら</ol>で閉じてね --> <nav> ...って書くとこう表示されます。↓ じゃがいも にんじん たまねぎ このコードが基盤となります。 URLつけたらその場所までビュンって行くし、classタグで名付けたらCSSでいじり放題になります。 htmlリンク付けて名前もつけた場合 <nav> <ul class="makings"> <!-- classタグで好きな名前つけなされ --> <li class="make-stuff"> <!-- 必要なところに必要な名前をつけなされ --> <a href="https://www.zyagaimo-hokuhoku">じゃがいも</a> <!-- ""の中にリンク先を指定しなされ。これは絶対パスと呼ばれる書き方。（このリンク先は存在しないぞ）　--> </li> <li class="make-stuff"> 　　　　　　　　　　　　　<a href="">にんじん</a> <!-- ""のままだと、ページがリロードされるし、"#!"って書くと遷移しないリンクになるし、hrefは奥深いから暇なとき調べてみてね　--> 　　　　　　　　</li> <li class="make-stuff"> <a href="#たまねぎ">たまねぎ</a>　<!--「#+設定id」でidで名付けたところの言葉へ飛んでいくぜ！一番最初に書いたやつがこれ。同ページ内のリンク先へってときに使えるさ　--> </li> <ul> <nav> <!-- ほんとマジでhrefの書き方は色々あるからさ、自分に合った書き方を調べて書くことをお勧めする。　--> なんかコメントアウトコメントが凄いことになってしまった。 ＜nav＞とか＜ul＞とかの説明できてないから次の章で書くからちょっとこの先まで付き合ってください。 navとかulとかli要素の説明 nav ここにナビゲーションメニューを設定するぜ！って領域を作成するためのnav要素 ここがナビゲーションメニューだ！！！ ul 箇条書きリストを表示するぜ！ （リストの先頭に・が付きます） ol 番号付きリストを表示するぜ！！ （1からリストの先頭に番号が振られます） li リストの内容を指定。じゃがいもとか、Homeとかまとめとか、その記事のメニューや見出し内容を書くところ。 まとめ ナビゲーションメニューとはその名の通り目的地を示す項目のこと nav + ul + li か、 nav + ol + li のセットメニューとなる おまけ ちなみに、一番最初に例として書いたナビゲーションメニューのコードはこんな感じ。 ナビゲーションメニュー <nav> <ul> <li><a href="#コードの書き方">コードの書き方</a></li> <li><a href="#navとかulとかli要素の説明">navとかulとかli要素の説明</a></li> <li><a href="#まとめ">まとめ</a></li> <ul> <nav> 遷移先の見出し <h2 id="コードの書き方">コードの書き方</h2> <h2 id="navとかulとかli要素の説明">navとかulとかli要素の説明</h2> <h2 id="まとめ">まとめ</h2> 以上。終わり！！！

はじめに UniWebView4とはアプリ内でWEBサイトを表示したい場面で役に立つアセットです。 初めて使用する際にいろいろとわからないことが多かったので メモを残しておきます。 バージョン情報 諸々名前 バージョン Unity 2020.3.4f1 UniWebView4 4.9.0 UniRx 7.1.0 デモ フルスクリーンで半透明のWebViewを表示し、WebView上のボタン押下でCubeを動かすサンプルです。 コード まずはHTMLです。 デモなので超簡易です。作成したらStreamingAssetsに保存します。 <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" /> <head> <title>Sample</title> </head> <head> <a href="web-view-demo://close"> <button style="position: fixed; top: 10px; right: 10px; padding: 6px 40px;">閉じる</button> </a> </body> <li> <a href="web-view-demo://up"> <button>↑</button> </a> </li> <li> <a href="web-view-demo://down"> <button>↓</button> </a> </li> <li> <a href="web-view-demo://right"> <button>→</button> </a> </li> <li> <a href="web-view-demo://left"> <button>←</button> </a> </li> フルスクリーン表示する際はHTML側でレスポンシブ対応しておかないとios端末で正しく表示されませんでした。 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" /> 次にC#側のWebView生成コードです。 using UniRx; using UniRx.Triggers; using UnityEngine; /// <summary> /// WebViewクラス /// </summary> public class WebViewDemo { /// <summary> /// UniWebView /// </summary> private UniWebView _uniWebView; /// <summary> /// WebViewを生成 /// </summary> /// <param name="player">動かすオブジェクト</param> /// <param name="backGroundColor">背景色</param> /// <param name="url">開きたいURL</param> public void ShowWebViewPlayerController(string url, Transform player, Color? backGroundColor = null) { //既に存在している場合は開くだけ if (_uniWebView != null) { _uniWebView.Show(); return; } var webViewObject = new GameObject("WebViewObject"); //キャッシュのクリア webViewObject.OnDestroyAsObservable().Subscribe(_ => _uniWebView.CleanCache()).AddTo(webViewObject); _uniWebView = webViewObject.AddComponent<UniWebView>(); //スキームを追加 _uniWebView.AddUrlScheme("web-view-demo"); //メッセージ受け取りイベント _uniWebView.OnMessageReceived += (view, message) => { switch (message.Path) { //閉じるボタン押下 case "close": //WebViewを非表示にする if (_uniWebView != null) _uniWebView.Hide(true); break; //↑ボタン押下 case "up": player.Translate(Vector3.forward); break; //↓ボタン押下 case "down": player.Translate(Vector3.down); break; //→ボタン押下 case "right": player.Translate(Vector3.right); break; //←ボタン押下 case "left": player.Translate(Vector3.left); break; } }; //画面の向きが変わるたびに解像度を変更 _uniWebView.OnOrientationChanged += (view, orientation) => { _uniWebView.Frame = new Rect(0, 0, Screen.width, Screen.height); }; //画面サイズを設定 _uniWebView.Frame = new Rect(0, 0, Screen.width, Screen.height); //背景色 var color = Color.white; color.a = 0.5f; _uniWebView.BackgroundColor = backGroundColor ?? color; //ツールバー非表示 _uniWebView.SetShowToolbar(false); //横スクロールバー非表示 _uniWebView.SetHorizontalScrollBarEnabled(false); //インジケータ _uniWebView.SetShowSpinnerWhileLoading(true); _uniWebView.SetSpinnerText("ロード中"); //内部保持してるサイトを読み込み var exchangeUrl = UniWebViewHelper.StreamingAssetURLForPath(url); _uniWebView.Load(exchangeUrl); //画面表示 _uniWebView.Show(); } } OnMessageReceivedで受け取ったメッセージに応じた処理を行っています。 当然ながら、HTML側のスキーム等、C#側と合わせないと動きません。 構造体をデフォルト引数に 小ネタですが、Colorをデフォルト引数として設定するのは構造体の都合上難しいようでした。 【参考リンク】：Unity3d c# - Vector3 as default parameter ですので、下記のようにNull許容型として定義し、関数内で値の有無を見てデフォルト値を設定しています。 public void Hoge(Color? c = null) { var defaultColor = Color.white; hogehoge.Color = c ?? defaultColor ; } ??はNull合体演算子と呼ばれるもので、??の左側が評価されてnullを返した場合、??の右側を評価するという書き方です。 【参考リンク】：??（null合体演算子） 最後に使う側のサンプルです。 ボタン押下で指定したHTMLのWebViewを開きます。 using UnityEngine; using UnityEngine.UI; public class Test : MonoBehaviour { [SerializeField] private Button _testButton; [SerializeField] private Transform _player; void Start() { _testButton.onClick.AddListener(ShowWebView); } private void OnDestroy() { _testButton.onClick.RemoveListener(ShowWebView); } private void ShowWebView() { var webView = new WebViewDemo(); webView.ShowWebViewPlayerController("SampleHTML.html",_player); } } 最後に 超簡単かつドキュメントがしっかりしていて、有料の価値のある非常に良いアセットだと個人的には思いました。 一点だけ下記直せずです。 iosだと問題なく動いたのですが、手元のAndroid端末(ver11)だと Hideの呼び出し時に一瞬カクついてWebViewが閉じるバグがありました。 何か知ってる人いたら助けてください。 参考リンク UniWebView もう逃げない。HTMLのviewportをちゃんと理解する