CodePenでギャラリー＋投票アプリを作ってみて、苦戦したポイントを解説（Webアプリ初心者）

CodePenを使って、Webアプリのフロント部分をプロト作成しました。CodePenはリアルタイムプレビューでとても便利なのですが、初心者として沢山のつまづきポイントもありましたので記事にします。完成したギャラリー投票アプリは**Netlifyで公開**しています('ω')

https://jolly-aryabhata-1e17cb.netlify.app

アンケート画面はこんな構成で、ギャラリー部分と投票部分になっていまして、
<img width="800" alt="アンケート画面" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264253/03645871-8b48-7ce7-0c07-7723695e2f03.png">

写真をクリックすると、ギャラリー表示されます！PCでもスマホでも良い感じに表示してくれます('ω')
<img width="800" alt="ギャラリー表示" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264253/184ca2a5-51c3-ee8b-f407-0bb51a5fd2b6.png">

##この記事の概要

CodePenというモノを知ったので、Webアプリのフロント部分を作成してみよう！という記事です。使用したJavaScriptライブラリやCSSフレームワーク、苦戦した実装部分を中心に紹介していきます。アンケート的に投票できるアプリを作れば、「どのロゴが良いですか？」とか「どのアイデアが良いでしょう？」など、**使った人からフィードバックが得られて良いな～**と思い題材にしてみました('ω')

- CodePenでフロント部分を作成
- NetlifyにデプロイしてWeb公開

##CodePenでフロント部分を作成

今回のアプリでCodePenに追加で使用したJSライブラリ・CSSフレームワークを最初に紹介しておきます。

|Type|Library|
|----|------|
|JS|[lightgallery-js](https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/js/lightgallery.min.js)|
|JS|[jQuery](https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js)|
|JS|[Vue.js](https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js)|
|JS|[Bootstarp](https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js)|
|CSS|[lightgallery](https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/css/lightgallery.css)|
|CSS|[Bootstarp](https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css)|

###lightgalleryを使ってみる

写真やロゴ、アイデアスケッチなどの投票ができると良いなと思い、ギャラリー表示用のライブラリを探し、「[lightgallery](https://sachinchoolur.github.io/lightgallery.js/)」を使用してみることにしました。早速サンプルコードをコピペして、見た目は良い感じに表示されているものの、コンソールに以下エラーが表示されているのが気になります。

```
Uncaught ReferenceError: lightGallery is not defined 
```

少し調べてみると、似た名前の別ライブラリも存在しています。今回はjQuery用の軽量プラグインではなく、JS用の「lightgallery-js」を使用するのが正解だったようです。分かり難い･･。
<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264253/efb73f4b-846f-9542-839e-4018da1aac09.png">

###lightgalleryのCSSはどこに･･

この後、サムネイル表示までは順調に行きました。ただ画像をクリックしても良い感じのギャラリーモードで表示されません。**どう見てもスタイルが適用されていない原始的なビジュアルのまま**です。CodePenの`Pen Settings`から`CSS`で「lightgallery」で検索するも、何もヒットしない･･。CodePenだとダメなのかしら。そんなバカなと、Web検索で調査しつつ、CodePenで似たようなギャラリー構成のペンをとにかく探します。すると･･

https://codepen.io/KariJL/pen/YogORj

ありました！ありがとう見知らぬ人('ω')

ありがたく`Pen Settings`の`CSS`追加設定を見てみると、確かにlightgalleryのCSSが設定されています。これを設定すればいけるのか。
https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/css/lightgallery.css

CodePenの検索で引っ掛からないからと、諦めてはいけませんね。もう少しライブラリ公式ページとか読めるようになれば、あっさり設定できるのかもしれませんが、今回はKariJLさんに助けられました。これで、PCでもスマホでも、よく見るスタイリッシュな感じのギャラリー表示ができました！

###Bootstrapを使ってみる

続けて、Twitterが提供する人気のBootstrapを使って、UIを少し整えていきます。まずはタイトル部分をダークモードっぽい見た目に。

```html
<div class="col-bg-9 mx-auto bg-dark text-white">
```

お次はボタンをよく見るあのビジュアルにしていきます。

```html
<button id="button-js" class="btn btn-primary">
```

おぉ、格好良い('ω')
原始的なタイトル部分・ボタンが、あっと言う間に今風に。ホントに便利ですね。
<img width="300" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264253/3b39817b-9b0d-d6eb-7306-3151a999db56.png">

###背景をグラデーション表示にしてみる

もう一つやってみたかったのが、背景色をグラデーション表示させることです。以下記事がサンプルコード付きで分かり易かったのでこちらを参考に設定していきます。

https://saruwakakun.com/html-css/basic/linear-radial-gradient

今回は放射上にグラデーション設定です。こういうことしようとすると、[RGB確認ツール](https://www.lab-nemoto.jp/www/leaflet_edu/else/ColorMaker.html)が大活躍しますね。

```css
body {
  background: -moz-radial-gradient(#FFF, #FFC778 40%, #F13F79);
  background: -webkit-radial-gradient(#FFF, #FFC778 40%, #F13F79);
  background: radial-gradient(#FFF, #FFC778 40%, #D2EED5);
```

今回はこんな淡い感じで不思議な配色のグラデーションにしてみました。

##NetlifyにデプロイしてWeb公開

大分UIの見た目と動作が出来てきたので、いよいよNetlifyにデプロイしていきます。まずエクスポート前に`Pen Settings`の`HTML`から、ビューポートのmetaタグ設定を入れておきます。一番下の`↑ Insert the most common viewport meta tag`をクリックするとCodePenが定義を入れてくれます。
<img width="500" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264253/b21d6ec4-5c4f-7156-a4a7-91439001e436.png">

ビューポート自体の説明は[こちらの記事](https://web.havincoffee.com/design/2019/01/1901271.html)が分かり易いです。それではZIPのエクスポートをしていきます。
<img width="200" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264253/f3892b08-9b66-11df-dffe-edcb5ea7d5d9.png">

これで保存したZIPファイルを展開して、`dist`フォルダごとNetlifyにデプロイしても良いですが、少しだけ`index.html`を修正しておきます。CodePenで作成すると、タイトル部分が`CodePen - ペンの名前`になるので、これを任意の名前に変更しておきます。これで、下準備完了です。

<img width="500" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264253/9cf0cd08-bc89-b495-9ee8-eb48aa51c4e5.png">

それでは、Netlifyの`Deploys`の画面で、「ここにドラッグ＆ドロップしてね」の領域に、`dist`フォルダをググっと。
<img width="500" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264253/77c5dbce-0cbd-f1bc-e8fc-9f432b6cc9f2.png">

これで、無事に「**Published**」になればデプロイ完了です。もうWeb公開されており、PCからでもスマホからでも確認できます。蛍光ペンで色付けした部分がNetlifyの公開URLです。おかしくなってないか、ガンガンいじり倒しましょう('ω')
<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264253/87554d14-47ed-1c33-7d3d-5d124c3dd5f5.png">

独自ドメインにも手を出してみたく、以下サイトに行ってみましたが、Googleアカウントでうまくソーシャルアカウント連携でサインアップできず･･、今回は見送りにしました。残念。
[Freenom - 誰でも利用できる名前](https://www.freenom.com/ja/index.html)

##CodePenも公開します

QiitaでCodePenが埋め込めるようになっていますので、こちらも公開しておきます。Qiitaのエディタでもプレビュー表示できるのですね、便利。

<p class="codepen" data-height="500" data-theme-id="light" data-default-tab="html,result" data-user="ranchi1977" data-slug-hash="zYZogjq" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Voting Gallery">
  <span>See the Pen <a href="https://codepen.io/ranchi1977/pen/zYZogjq">
  Voting Gallery</a> by ranchi1977 (<a href="https://codepen.io/ranchi1977">@ranchi1977</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


##終わりに

今回はCodePenを使用して、Webアプリのフロント部分のプロトタイプを作成してみました！ホントに便利ですね。まだまだ基礎知識が足りていないので、色々なところで躓きまくりですが、こんなに簡単にWebアプリのUI部分を試せると、色々アイデアを形にするのが捗りそうです('ω')

現状はフロント部分の試作品なので、以下状態ですがご了承ください。

- バックエンドを実装していないので、投票結果を保持できていない（毎回ゼロクリア）
- 各写真に何票でも投票できる（ホントは押したら御礼メッセージでも出してボタン非活性化が王道でしょうが、触ってみて面白くないので、何度でも押せる状態にしてあります）

今度はバックエンドの実装と連携にもチャレンジしてみたいところです。