【AIアプリ開発 Day3】Swiper.js と 無料テンプレートで見栄えを整える

画像アップロード→変換→結果の表示 という最低限の機能を、前回 Flask で実装することができました。

【AIアプリ開発 Day2】Flask でミニマムに機能を実装する

現時点では本当に最低限のものしか実装していないため、見栄えは全然だめ。とはいえ一から素敵なデザインをコーディングしていく技術も自分にはないので、今回は無料のテンプレートを利用してアプリの見栄えを整えていこうと思います。

 

おしながき

・無料テンプレートを入手し加工

・アップロード画像のプレビュー表示

・Swiper.js で画像スライダーの追加

 

無料テンプレートの入手と加工

 

こちらのサイトからいい感じのテンプレートを探しました。

https://ferret-plus.com/8517

たくさんどれも素敵で迷ったのですが、今回は Air というテンプレートを使わせていただくことに決定。

Preview

Portfolio 向けのテンプレートのため、不要なページが沢山含まれています。HTMLを読み解いて、不要な部分をばっさばっさと削除します。

最終的には、TOPページと、contact ページを残しました。また、contact ページに関してはレイアウトは保持して内容を大きく変更しました。

▼TOPページ

Flaskで上手く表示させるには、ページ遷移の箇所の書き方や、ファイルの配置を気をつけないといけないのですがこちらはまた次の記事でメモしておこうと思います。

 

アップロードした画像のプレビュー表示

画像アップロードのページでは、前回の最低限の機能に加えて以下のようにしたいと思っていました。

・アップロードした画像のプレビュー表示

・スタイル画像は横にスライドして見られる&選択できる

画像のプレビュー表示については、こちらの記事を参考、というよりかは丸パクリさせていただき実装しました。ほんとに助かりましたありがとうございます。

[jQuery] 画像アップロード時にプレビュー表示する(imageタグ版)

<head>タグの閉じタグの真上にまずはこちらを貼り付け。

そして、<body>内の Upload 領域はこのように記載します。

<script>でかく内容と、<body>タグ内の Upload 領域で、きちんと id が一致するようにする点だけ注意です。

今回で言えば、id = img_file id = "img0" が一致するように。

これで、このように 300 x 300 の四角枠が表示され、画像をアップロードするとここにプレビューが表示されるようになりました。

Swiper.js で画像スライダーの追加

人物を除去したスペースを埋めるスタイル画像に関しても、いくつか用意した中から選べるようにします。

最終的にはこのようになりました。

Fill Pattern の箇所は、横スライドでスタイル画像をパラパラ見られるようにして、それぞれはラジオボタンで選択してもらうようにしました。

この画像スライドの箇所は、 Swiper.js というとっても便利なパーツで実装しています。

 

使い方とても簡単で、まずは<head>内にこちらを記載

<body>タグの要素の箇所にはこれ。文言変更したり、<img src> といれて任意の画像に変更しました。

最後に <body> タグの閉じタグの直前に、こちらを記載。ここも色々とオプションでいじくることができて、見栄えを調整できます。下記のようにそこそこデフォルトから変更しました。

 

細かいもろもろはこちらを参考にしました。このサイト抜群にわかりやすかったです。

https://garigaricode.com/swiper/

 

長くなったので、Style 画像の受け渡しについての Flaskコードの変更と、result ページ等はまた次の記事にしよう。

(続く)