画像アップロード→変換→結果の表示 という最低限の機能を、前回 Flask で実装することができました。
現時点では本当に最低限のものしか実装していないため、見栄えは全然だめ。とはいえ一から素敵なデザインをコーディングしていく技術も自分にはないので、今回は無料のテンプレートを利用してアプリの見栄えを整えていこうと思います。
・無料テンプレートを入手し加工
・アップロード画像のプレビュー表示
・Swiper.js で画像スライダーの追加
無料テンプレートの入手と加工
こちらのサイトからいい感じのテンプレートを探しました。
たくさんどれも素敵で迷ったのですが、今回は Air というテンプレートを使わせていただくことに決定。
Portfolio 向けのテンプレートのため、不要なページが沢山含まれています。HTMLを読み解いて、不要な部分をばっさばっさと削除します。
最終的には、TOPページと、contact ページを残しました。また、contact ページに関してはレイアウトは保持して内容を大きく変更しました。
▼TOPページ
Flaskで上手く表示させるには、ページ遷移の箇所の書き方や、ファイルの配置を気をつけないといけないのですがこちらはまた次の記事でメモしておこうと思います。
アップロードした画像のプレビュー表示
画像アップロードのページでは、前回の最低限の機能に加えて以下のようにしたいと思っていました。
・アップロードした画像のプレビュー表示
・スタイル画像は横にスライドして見られる＆選択できる
画像のプレビュー表示については、こちらの記事を参考、というよりかは丸パクリさせていただき実装しました。ほんとに助かりましたありがとうございます。
<head>タグの閉じタグの真上にまずはこちらを貼り付け。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(function(){ $('#img_file').change(function(e){ //ファイルオブジェクトを取得する var file = e.target.files[0]; var reader = new FileReader(); //画像でない場合は処理終了 if(file.type.indexOf("image") < 0){ alert("upload your file"); return false; } //アップロードした画像を設定する reader.onload = (function(file){ return function(e){ $("#img0").attr("src", e.target.result); $("#img0").attr("title", file.name); }; })(file); reader.readAsDataURL(file); }); }); </script> |
そして、<body>内の Upload 領域はこのように記載します。
|
1 2 3 4 |
<div id="upload-photo"> <input type="file" id="img_file" name="img_file"><br> <img id="img0" style="width:300px;height:300px;" > </div> |
<script>でかく内容と、<body>タグ内の Upload 領域で、きちんと id が一致するようにする点だけ注意です。
今回で言えば、id = img_file id = "img0" が一致するように。
これで、このように 300 x 300 の四角枠が表示され、画像をアップロードするとここにプレビューが表示されるようになりました。
Swiper.js で画像スライダーの追加
人物を除去したスペースを埋めるスタイル画像に関しても、いくつか用意した中から選べるようにします。
最終的にはこのようになりました。
Fill Pattern の箇所は、横スライドでスタイル画像をパラパラ見られるようにして、それぞれはラジオボタンで選択してもらうようにしました。
この画像スライドの箇所は、 Swiper.js というとっても便利なパーツで実装しています。
使い方とても簡単で、まずは<head>内にこちらを記載
|
1 2 |
<!-- Swiper --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css"> |
<body>タグの要素の箇所にはこれ。文言変更したり、<img src> といれて任意の画像に変更しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- Swiper START --> <div class="swiper-container"> <!-- メイン表示部分 --> <div class="swiper-wrapper"> <!-- 各スライド --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> </div> </div> <!-- Swiper END --> |
最後に <body> タグの閉じタグの直前に、こちらを記載。ここも色々とオプションでいじくることができて、見栄えを調整できます。下記のようにそこそこデフォルトから変更しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script> var swiper = new Swiper('.swiper-container', { centeredSlides: true, slidesPerView: 2, spaceBetween: 50, pagination: { el: '.swiper-pagination', type: 'bullets', clickable: true }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, scrollbar: { el: '.swiper-scrollbar', hide: false, draggable: true } }); </script> |
細かいもろもろはこちらを参考にしました。このサイト抜群にわかりやすかったです。
https://garigaricode.com/swiper/
長くなったので、Style 画像の受け渡しについての Flaskコードの変更と、result ページ等はまた次の記事にしよう。
（続く）
