✨

推しを使ったwebサービス的なのを作りたかったのでhtmlとcss,Blazorでいじりまくった話

2021/12/19に公開

CSS

HTML

idea

この記事は、もなふわすい～とる～む Advent Calendar 2021の19日目の記事です。
https://adventar.org/calendars/6449

前回はhisaさんの「おつもなじゃんけん研究所」でした。

最近おつもなじゃんけんに勝てないのでこれを見て対戦よろしくおねがいしますをしようと思います。

概要とか諸々

最近、TwitterのTLを見てると「こんなwebサービス作ってます！」というツイートがよく流れてきて、なんかそういうサービスを作るのが面白そうだな～とぼんやり思っていて、推しを使った何かを作れたら楽しそうだなとぼんやり思いつきました。

最初はTwitterにある#もななーとタグがついている画像を収集して、ページ内に一覧表示して見やすくなるのが初めてやるにはちょうどよさそうだなと思って色々やっていたのですが、C#側で使っているライブラリが普段使う分には問題ないのですが、ブラウザから呼び出すとnull落ちしてしまい、バージョンアップまで待たないと行けない状況になったため間に合わない…！と思い一旦頓挫して、別のを考えだしたのが2日前でした。

2日間くらいで楽しそうなのがいいな～と考えたらふと、ガチャ引くの楽しいよな、推しのガチャ引きたいな～、推しのガチャの結果画面みたいなのweb上で作れたら面白そうだな～とふんわりやりたいことだけ決めて、普段のC#と比べると不慣れなhtmlとcssを触りながら作ってみた結果、ウマ娘的な感じで、動画が再生し終わったあとに推しの名前が出るアルファ版みたいなのだけできました。

本当は動画をアップロードして、推しの2つ名(動画でいうおつもなじゃんけん)と推しの名前(フリーフォントの関係上、巻乃の字がパットしなかったのでひらがなにしている…)を書いて、結果画面生成みたいなボタンを押したら結果動画みたいなのが作れるのが理想だな～～～～と思いながらやってましたが、時間の都合や実力もあってそこまで至らなかったので、裏でコツコツ作って行きたいな～と思います。

※これを作ったあとに、サポガチャのほうが動画なくても一枚絵だけあれば済むし簡単だったのでは？と思ったのは内緒です。

アルファ版で起きたこと解説

ここからは、今日触っていて起きた初歩的な問題に対してたすけて！もなふわすい～とる～むと叫びながらぐぐって切り抜けたところを抜粋して書いていこうと思います。
htmlやcssで何かしらやってみたい…!みたいな方がいれば参考になれば幸いです。

フェードアウトさせたい

cssでアニメーションをさせたいときはanimationを呼びましょう
keyframesでどういうアニメーションをさせるか指定できます。

今回はフェードアウトをさせたかったのでopacityだけいじりました。

    .fade-out{
	animation: fade-out 2s ease-in-out;
    }
    @-webkit-keyframes fade-out {
         from  {opacity:1;}
         to 　 {opacity:0;}
    }
     <div class="fade-sample fade-out"/>

動画が終わったら再生が終わったことを伝えてUIを表示したい

動画が終わったら自動でUI表示をさせたかったので、onendedというイベントを使ってC#の関数を呼ぶようにしました。

<video @onended="FinishMovie"  >
        <source src=mp4のパス>
</video>

public void FinishMovie()
{
	//何かしらの処理
}

web上にあるフォントを使いたい

内蔵のフォントでもよかったのですが、webにあるフォントの方がこうすれば使えますとか、cssで使うときはこうです～って載っていたので今回はwebフォントを採用しました。
使ったのはGoogleのフォントです。
https://fonts.google.com/

あとは記事を見ながら設定だけしました。

    <link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet">

.hoge{
        font-family:"Nico Moji";
    }
  <span class="hoge">こんもな～</span>

画像が表示されない

png画像を表示しようと思ったら、これだと行けないらしい(なんでぇ～？)

.hoge{
    background-image: url(画像パス);
}

おとなしくこうしました。(これだけ原因がわからず…)

 <img src=画像パス alt=""/>

画像が透過しない

pngなどの透過部分があるのに背景色が描画されていて、動画の上に推しの名前のUIが表示されなくてなんでぇ～？ってなりながらぐぐったら,transparentを入れましょう。

.hoge{
    background-color: transparent;
}

こっちでも行けるかなと思ったのですが、どうやら行けないらしい・・・。

.hoge{
    background-color:color(255,255,255,0)
}

アニメーションを終了したら戻ってほしくない

cssのアニメーションは再生し終わると元に戻るらしく、なんでぇ～？ってなっていたので、戻ってほしくないときはbothを使いましょう。

.hoge{
    animation: both;
}

親の位置から相対的に座標を移動させたい

全部を絶対座標で移動させるのは大変(左端から右端に移動させたい場合、絶対座標だと関係する値全部いじらないといけない)だったので、親から相対移動できるようにするには親のpositionをrelativeにし、子のpositionをabsoluteにすればできました。

.parent{
position:relative;
}
.child{
position:absolute;
}

<div class="parent">
    <div class="child"></div>
</div>

終わりに

実装時期もあまりなく、ほんとに記事に書いた簡易的な説明しかやってこなかったですが、やっている自分としては楽しかったです。

なんだかんだ去年もたすけて！もなふわすい～とる～むをGoogleSpreadシートに集計する機能を作ったときもそうだったんですが、普段自分がやっている技術的なことを推しのために活かせるのがめちゃくちゃ最高なので、これからもこういうことにチャレンジしていってまた進捗を上げたいと思います。

次回20日はサンマックスさんの「第１９回VR技術者認定試験（アプリケーションコース）」です。

強そう…！どんな記事なのか楽しみですね…！

謝辞

使わせていただいた素材

切りぬいた動画(見て…)

ウマ娘風素材

フォント
https://fonts.google.com/