BLOG ブログ
コラボフロー Advent Calendar 2022 最終日の記事です！
タイトルを見て何となく察した方もいらっしゃると思いますが・・・。
そうです。
ネタ記事です。
途中でCSSを利用したカスタマイズについて書いているのですが、
大半はくだらないこと書いてます。
気軽にお読みください！
今年も聞きますよ？？？
最近「運動」できてますか？
私は、とあることを閃いた結果、
運動せざるを得なくなりました。
その理由はというと・・・
回想シーン🛌
時は遡り、今年の１１月１日。
Slackの雑談チャンネルにアドベントカレンダー開催のお知らせが投稿されました。
そこでまず考えたのは・・・
どんなくだらないことをやろうか・・・
でした。
私、くだらない企画を考えるのはとても得意なので、
すぐに決まりました。
くだらない企画が決まった経緯
くだらないことだし、アドベントカレンダーの最終日に書こう。
最終日の記事って何でも書いて良いんでしょ？（個人の意見です）
↓
最終日は２５日かー、なんかイベントあるかなー、
クリスマスネタは誰かやるだろうしなー
↓
有馬記念！！
競馬全く知らないけど、なんかネタ思いつきそうやん！
↓
んー、なんだろ、有馬記念をもじって、コラボ記念・・・？
競馬・・・、走る・・・・うーん・・・
↓
よし！競馬場を走るか！！！！🐎
「思い立ったが吉日」がモットーな私は人が走れる競馬場を調べました。
でも、そんな都合よく年末に競馬場で走れるわけ・・・
マジかよ。あるやんけ。
こんなのエントリーするしかないやん！
てなわけで、早速１１月１日にエントリーしました。
走る距離は５,５５５ｍです。
そして、一人だけだと自分が走ってる写真撮れないじゃんと気づき、
これも１日、友人に頼みました。
Miko「めっちゃくだらないお願いしてもいい？」
友人「おっ？」
Miko「競馬場走るんだけど、兵庫まで写真撮りに来てもらえる？？」
友人「OK！！！！」
即OKとか、最高かよ。
さて、アドベントカレンダーのネタは１日中に終わりました。
さすがわたし。
もうほぼ勝ったも同然やん・・・と思ったのですが、
友人「そういやさ、そもそも５ｋｍ走れんの？」
Miko「？？？？？？？？ 無理やな。」
友人・Miko「「えっ？？？？？」」
トレーニング開始
さぁ、途中棄権なんてことはしたくないので、
１ヶ月で可能な限りトレーニングするしかねぇ！！
というわけで、時間を有効に使い、
可能な限りジムや河川敷でランニングをすることにしました。
昨年の記事でも書いた気がしますが、
トレーニングを継続するには、やはりご褒美は重要・・・。
というわけで、この企画を達成したら欲しいもの（を購入しても良い権利）をもらおう！ってことにしました。
私が欲しいものは、
アドベントカレンダー１日目の記事で欲しいと叫んでいた「iPad mini 6」です！
iPad mini 6で技術書を表示しつつ、スタバでコーディング・・・。
などと陽キャなことはせずに、家でダラダラと漫画を読むために欲しいのです！！
※ここまで読んでお忘れの方もいるかと思いますが、
これはコラボフロー アドベントカレンダーの記事です。
私も忘れかけていたので、無理やりここからコラボフローと絡めていきます。
今回も、アドベントカレンダーのために実装したと言っても過言ではない、
フォームのCSSカスタマイズ機能を利用して、
見た目をカスタマイズしまくることにしました。
申請内容を読みやすくする
一旦、急に真面目な話になります。
「CSSファイルをアップロードできるようになって何ができるの？」と思う方がいるかと思います。
ざっくりと、どんなことができるかと説明すると
- フォントサイズやフォントの種類を変えられるようになる
- パーツの高さ、幅を調整できる
などなど、申請書の見た目をカスタマイズできるようになります。
申請書を読みやすくしたい方向けのカスタマイズ
一例としてパーツ内のフォントをデカくしてみました。
これでブラウザで拡大表示しなくても読みやすくなりますね！
パーツの高さも枠内にみっちり埋まるようにしています。
CSSは以下の通りです。
※この記事で紹介している内容については、コラボフローのサービスサポート対象外となります。
/* 入力項目のデザイン */
.fidText,
.fidTextArea {
height: 99% !important;
font-size: 20px !important;
line-height: inherit;
}
/* 表示項目のデザイン */
.fidSpanDisp,
.fidTextAreaDisp {
font-size: 20px !important;
}
あとはこれを「style.css」といった名前でファイルを保存して、
カスタマイズタブのCSSファイルの欄にアップロードするだけです！
Webフォントを利用してイケてる申請書にしたい方向けのカスタマイズ
フォントの種類も変えたい・・・
そんな要望も叶えられます！
実は先ほどのサンプル画像で、すでにフォントを変えていました！
利用したのはGoogle Fontsにて無料で公開されているフォントです。
何か真面目そうなフォントなら、
iPad mini 6の購入理由が微妙でも、良い感じに見えるやろ・・・
とのことでさわらび明朝を選択しました。
フォームに反映する方法も簡単にできます！
サイトに載っているHTMLの項目から
「https://fonts.googleapis.com/css?family=hogehoge」の部分をコピーしてきてURL指定で追加します。
あとは先ほど作成したCSSファイルに「font-family」の内容を追加して、
アップロードし直すだけです。
/* 入力項目のデザイン */
.fidText,
.fidTextArea {
height: 99% !important;
font-size: 20px !important;
line-height: inherit;
font-family: "Sawarabi Mincho";
}
/* 表示項目のデザイン */
.fidSpanDisp,
.fidTextAreaDisp {
font-size: 20px !important;
font-family: "Sawarabi Mincho";
}
これらのカスタマイズで見た目は以下のように変わりました！
変更前
変更後
変更後の方が読みやすいし、
フォントの力で何か真面目っぽく見えませんか？
これでiPad mini 6 へ一歩近づいたと言っても過言・・・
おまけ（ニクキュウフォント）
ニクキュウフォントを利用してみた例です。
流石にこれだとふざけすぎですね・・・やめておきましょう・・・。
トレーニングを数値化してみた
Stravaというアクティビティを記録するアプリを利用していたのですが、
これとコラボフローと連携しつつ、数値化してみることにしました。
ということで、昨年は「リン●フィットアドベンチャー」とコラボし、
今年は「ウ●娘」と勝手にコラボしてみました。
育成画面
何か育成ゲームっぽい画面を作ってみました。
見覚えがある気がする・・・って方は黙っておいてください。お願いします。
そしてStravaで記録したアクティビティ情報（ランニングなど）を基に、
以下のステータスを良い感じに増加させます！
- スピード
- スタミナ
- パワー
- 根性
- 賢さ
※「良い感じ」になので、ステータス値に何も根拠もありません。
トレーニング結果
日付の期間を指定して、トレーニングボタンを押すと、
ステータス値を更新します。
アクティビティ情報の取得は、Strava V3 APIを利用して実装したのですが、
めちゃくちゃ大変だったので割愛します。
（投稿のカテゴリーが「開発者ブログ」だった気がしますが気にしない）
取得した情報をJavaScriptを利用して、
何かそれっぽい計算式に放り込んでステータス値に反映させるだけの簡単なお仕事です。
大変やった・・・
以下が、１１月１日〜１２月１０日までのトレーニング結果をステータス値に反映させた結果です。
「ステータス、思ったより伸びてないやん。草。」
と思った方、理由があります。
ひざ故障
１１月末にランニングをしている最中に左膝に違和感を感じました。
なんかちょっぴり痛むな・・・と思いつつも、
もうあまりトレーニングをやる期間がないしなーと焦って
ランニングを続けたのが完全な間違いでした。
〜その日の夜〜
「めっちゃ左膝が痛くて歩けんのやけど？！」
はい、ひざやっちゃいました。(⸝⸝⸝´꒳`⸝⸝⸝)ﾃﾚｯ
自転車には乗れたので、翌日病院へ行くと
医者「１〜２週間は安静にねー」
Miko「先生・・・２週間後にあるマラソンイベントがあって・・・トレーニングしたいです・・・」
医者「安静にしろ」
Miko「ｳｯｽ」
リハビリの日々
なるべく左膝に負担をかけないようにしたり、
ストレッチを続けることで、日に日に良くなっていきました。
人生で初めて膝用のサポータを装着しましたが、
付けているのといないので全然違いますね・・・
本番当日
先生の言うことをしっかりと守ったおかげで、
少しだけ痛みを感じるものの、走れるまでには回復しました。
そして、人生初の競馬場へ・・・
場所は園田競馬場。
兵庫県尼崎市にある地方競馬場です。
数日前には雨予報でしたが、
当日はしっかりと晴れてくれました！！
走るには最高の日！！🌞
だったはずなのですが・・・
開催前の死刑宣告
準備運動前に競馬場の方からありがたいお言葉がありました。
「本日は晴れ、良馬場。」
※馬場・・・コースの含水量。良 ＜ 稍重 ＜ 重 ＜ 不良の順に含水量が多いらしい。
「走るには最悪のコンディションです。」
はい？？？
良い天気なんだし、走りやすいに決まっているでしょ？？？
何を言っているの？？？
実際にコース上に入った瞬間に、その言葉の意味を理解します。
足場、めっちゃフカフカやん・・・
日曜の夕方ごろにテレビのチャンネルを変えると、
たまーに見かける競馬番組。
そこで芝生のコースを馬が駆け抜ける姿しか見たことがなかったのですが、
今回走るのは「ダート」、「芝」じゃありません。
砂場です。
フカフカの砂の上を５ｋｍ走れってことです。
※ダートコースは少し水を含んでいた方が走りやすいそうです。
そして園田競馬場の砂は、オーストラリアから数千万円かけて輸入してきた砂らしいです。
つまり、実質オーストラリアの海岸を５ｋｍ走っているのと変わらないはずです。
レーススタート
スターティングゲートに入ってしまったからには逃げられません。
もう走るしかないです。
レース開始前にファンファーレも鳴り、気持ちも高揚している。
このまま勢いでなんとかなるやろ。
そんなに世の中甘くありませんでした。
走り始めて悟りました。
これ、あかんやつや・・・・
足が前へ進まないんです。
走っても辛い、歩いていても辛い。
どうせ大袈裟に言っているんだろと思ったそこのあなた。
来年走ってくださいね。🐎
みんなが走った後なら、ある程度砂も踏まれて固まっているはず！！
私天才！！などと考えていたのですが、
流石は「かしこさ：０」そんな変わらなかったです。
コース１週の距離は１０５０ｍ、これを５週しろってことです。
ハッキリと言うと、マジで地獄でした。
以下、レース中の私の走る様子を写真でお楽しみください。
左膝も痛みだしてきましたが、
それでも諦めたらそこで試合終了なので、
５０分を耐え切りました。
レース結果
最終週に入る前、制限時間５０分を過ぎていたため、
強制的にゴールということになりました。
完走はできませんでした・・・😭
以下がStravaでのアクティビティ詳細です。
この画面を見て改めて「本当に競馬場を走っていたんだ・・・」っと実感しましたｗ
最終判定
念のため、もう一度言っておくと、
これはコラボフロー アドベントカレンダーの記事です。
この企画を決めた後に話をしていた
ノンビン氏にこの「iPad mini 6を買っても良いですか？」の茶番に付き合ってもらいます。
最終判定は写真を見て判断してもらおうと思ったのですが、
どうやらYoutubeで全世界に晒されていたらしいので、
それを見てもらうことにしました。
レースボタンをクリックすることで、
そのYoutubeの動画が現れるというカスタマイズにしています。
Youtube動画
私の無様なラストランをご覧になりたい方は、以下の動画をご覧ください。
もう、バッチリ映っていました。
判定結果
気になる判定結果は・・・
昨年と違って、承認されている！！！
これでiPad mini 6 買ってもいい！！（自腹で！）
※承認されたことよりも
「●●で候。」ぐらいしか時代劇のセリフを知らなかった自分の茶番に
本気で付き合ってもらえたことに感動した私がいましたｗ
読んでいない技術関連の電子書籍がかなり積まれているので、
しっかりと読んでスキルアップします！
もちろん漫画も読むよ📘
おまけ（当日のやりとり）
この記事を公開するまでこの馬鹿げた企画のことは秘密にしておきたく、
社内でも数人しかこの企画の話をしていなかっため、
ダイレクトメッセージでノンビンとやりとりしていた内容です。
まとめ
さて、昨年に引き続き、今年もバカなことをやったわけですが、
お楽しみいただけたでしょうか？🐴🦌
まさか初めて行った競馬場で、
以下のような面白い経験をするとは思っていませんでした。
- コースに馬ではなく人間が走っている光景を目の当たりにする
- 自分もコースを走る
- 馬に乗っていない騎手が走っている光景を目の当たりにする
- 馬を１頭も見ずに競馬場を後にする（マキバオーはいた）
思いつきの企画でしたが、
相談に乗ってくれたノンビン氏、こにお氏、
そして会社関係ないのに協力してくれた友人氏には、
改めて感謝いたします🙇
来年も何か思いつけば、変な企画をやりたいと思います！
こんな企画思いついたんだけどやらね？
って方も是非是非お声がけください！馬鹿なこと大好きです。
それでは良いお年をー！👋