5.7が公開されたということで、ここのところLaravel関連の記事が続きましたが、今回はLaravelと同様に、生産性が高いJSフレームワーク「Vue」の話題をお届けします。ちなみにVueは、wordpressが権利問題の関係からReact.jsの利用をやめようとしたとき白羽の矢が立ったJSフレームワークで、学習コストがより少なく済む(つまり、誰でも保守しやすい)ので私はこちらを進んで利用するようにしています。自動的に選択ボックスの下にプレビューを表示するもちろん、プレビュー画像がなくても問題はないでしょうが、視覚的に何を選んだかが分かればユーザーとしては安心してデータ送信できますので、一番の目的はユーザビリティの向上ということになります。表示部分をつくるbootstrapを読み込む見栄えを良くしたいので、<head>〜</head>内でbootstrap(CSSフレームワーク)をcdn経由で読み込みます。class="card-title">画像を選んでください。type="file">部分だけです。画像だけ選択できるように、accept="image/*"を追加しておきましょう。Vue部分をつくる基本コードを作るでは、ここからVueを使ってJavaScript部分を作成していきます。</div></body>まずは、Vueが利用できるようにidを必要部分に作成。});</script>そして、Vue.jsをcdn経由で読み込んだら基本コードをつくり、変数imageDataを登録。ここに選択された画像データを格納することになります。type="file">に画像が選択されたら起動するchangeイベントを登録しましょう。@change="onFileChange($event)">ここで重要なのは、$eventです。することで、イベント内容をonFileChange()へ送信することができるんですね。}}先ほど指定した$eventがeとして使えるように変数を追加します。画像データを読み込むでは、onFileChange()内で画像データを読み込むコードをつくります。e.target.result;};reader.readAsDataURL(file);もしファイルが存在していたら、FileReader()を使って画像を読み込み、データをimageDataに格納するようにしています。ちなみにES6で書いているのでthis.imageDataで問題ありませんが、IE対応したい場合は以下のようにselfを使って画像データを格納してください。^^;)画像の表示プレビューをつくるでは、最後の項目です。<img>タグを追加して、もしimageDataに画像データがある場合だけ表示するようにしてみましょう。v-if="imageData">やっぱりVueだとコードがシンプルですね!実際にやってみるでは、実際にプレビューされるかみてみましょう。type="file">をクリックして、Vueのロゴ画像を選択すると・・・・・・うまく画像を表示することができました!もちろんこの状態から違う画像を選択すると、以下のように内容が自動で切り替わります。おまけ選択をリセットするボタンをつけるせっかくなので、選択された画像をリセットする機能もつけましょう。type="file">へVueからアクセスできるようrefを追加します。@change="onFileChange($event)">これでthis.$refs.fileとして要素にアクセスできるようになりました。@click="resetFile()">リセット</button>そして、リセットボタンを作成。画像があるときだけボタンを表示するようにして、クリックしたらresetFile()を実行するようにします。'';}resetFile()の中では、インプット要素のtypeを一旦textへ変更して元に戻すことでリセットを実装しています。imageDataも元に戻すのを忘れないようにしましょう。これで、画像を選択したらリセットボタンが表示され、リセットボタンをクリックすると、初期状態にもどるようになりました。お疲れ様でした!実際のコード(ダウンロード)実際のソースコードをダウンロードできます。cdnでCSS、JSを読み込んでいるので、展開してブラウザで開くだけでサンプルを試すことができますよ!Vueで画像をプレビューするサンプルおわりにということで今回はVueJSを使って選択画像をリアルタイムにプレビュー表示する方法を紹介しました。Vueを使えばコードをシンプルに書けますし、描画スピードも高速(最近はjQueryでも十分高速ですが)なので、嬉しい限りです。ちなみに今回からですが、実験的にソースコードをダウンロードできるようにしてみました。いうのも、このブログはプログラム関連の話題ということで、訪問ユーザーさんの大多数にはPCブラウザを使って閲覧していただいています。そこで、ファイルダウンロードがあると嬉しいかな?と考えました。使われなかったら、ダウンロード機能はなくすかもしれませんが少しの間はテスト期間ということで設置します。良かったらぜひ活用してくださいね。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。