どんな内容？ こんにちは！ Rails開発六ヶ月の卵エンジニアです！ ちょっと前にアイコン画像を非同期でプレビューさせるときにこちらを参考にして実装したので、 今回はその備忘録を兼ねて、理屈を解説しつつ、ここに保存しておこうと思います。 (結局MDNのFileReaderを読み込めば実装できるので、正確な学習をするならこっち見た方がいいかも) 私と同じような駆け出しの仲間へ、何かしらの助けになれば幸いです。 ソースコード コードは参照したサイトのものをほぼそのまま。 JSFiddleにも記述しておきましたので、 よろしければ挙動確認はこちらをお使いください。 preview.js function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#imgPre').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#imgInp").change(function() { readURL(this); }); preview.html <!-- jQueryの読み込み すでに導入してあれば不要 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type='file' id="imgInp" /> <img id="imgPre" src="#" alt="your image" /> </form> 処理の流れ 要するに １ inputタグで選択した画像のパスを、 ２ プレビューしたいimgタグのsrcに代入し、 ３ ブラウザ側からsrcを元に画像を読み込ませる。 という流れになります。 記述の解説 ① inputタグを用意・イベント発火 ファイルアップロードのため、inputタグを用意します。 preview.html <input type='file' id="imgInp" /> 今回は画像を選択した際にプレビューを表示させたいので、 inputタグの中身が変更されたタイミングで処理が発火されるようにします。 preview.js $("#imgInp").change(function() { readURL(this); }); ➁ ③ プレビューしたいimgタグ用意・プレビューさせる プレビューしたい場所にimgタグを置いておきます preview.html <img id="imgPre" src="#" alt="your image" /> ①のpreview.jsで発火するreadURL関数の中身、 プレビュー処理を記述します。 preview.js function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#imgPre').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } FileReaderオブジェクトについてはこちらを。 FileReaderはFileオブジェクトを使用してユーザーのコンピュータから非同期でファイルを読み込みます。 Fileオブジェクトはinput要素でファイルを選択した際に得られるFileListオブジェクト(input.files)内に。 今回はその先頭の(input.file[0])を指定して、プレビュー対象のFileオブジェクトを選択しています。 readAsDataURLメソッドを使い、ユーザーが入力したFileオブジェクト(input.file[0])を読み込みます。 preview.js reader.readAsDataURL(input.files[0]) reader.onloadプロパティに処理を記述します。 そうすることでreadAsDataURLメソッドが完了すると発火するloadイベント時にここが実行されます。 プレビューしたいimgタグのsrcにURLを代入 preview.js reader.onload = function(e) { $('#imgPre').attr('src', e.target.result); } これで完了です。 まとめ いかがでしたでしょうか。 FileReaderオブシェクトの使い方さえわかっていれば特に難しく考えずに実装できるのかなと思います。 基本的にコピペすればそのまま動くと思いますが、 機能を拡張したくなった時や、応用する時に理屈を知ってないと難しいですね。 技術解説は初めてなので、至らぬ点や、間違った表現・解説をしていた場合は、ぜひお知らせください。
こんにちは！ Rails開発六ヶ月の卵エンジニアです！
ちょっと前にアイコン画像を非同期でプレビューさせるときにこちらを参考にして実装したので、 今回はその備忘録を兼ねて、理屈を解説しつつ、ここに保存しておこうと思います。
(結局MDNのFileReaderを読み込めば実装できるので、正確な学習をするならこっち見た方がいいかも)
私と同じような駆け出しの仲間へ、何かしらの助けになれば幸いです。
コードは参照したサイトのものをほぼそのまま。 JSFiddleにも記述しておきましたので、 よろしければ挙動確認はこちらをお使いください。
function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#imgPre').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#imgInp").change(function() { readURL(this); });
<!-- jQueryの読み込み すでに導入してあれば不要 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type='file' id="imgInp" /> <img id="imgPre" src="#" alt="your image" /> </form>
要するに １ inputタグで選択した画像のパスを、 ２ プレビューしたいimgタグのsrcに代入し、 ３ ブラウザ側からsrcを元に画像を読み込ませる。
という流れになります。
ファイルアップロードのため、inputタグを用意します。
<input type='file' id="imgInp" />
今回は画像を選択した際にプレビューを表示させたいので、 inputタグの中身が変更されたタイミングで処理が発火されるようにします。
$("#imgInp").change(function() { readURL(this); });
プレビューしたい場所にimgタグを置いておきます
<img id="imgPre" src="#" alt="your image" />
①のpreview.jsで発火するreadURL関数の中身、 プレビュー処理を記述します。
function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#imgPre').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } }
FileReaderオブジェクトについてはこちらを。 FileReaderはFileオブジェクトを使用してユーザーのコンピュータから非同期でファイルを読み込みます。 Fileオブジェクトはinput要素でファイルを選択した際に得られるFileListオブジェクト(input.files)内に。 今回はその先頭の(input.file[0])を指定して、プレビュー対象のFileオブジェクトを選択しています。
readAsDataURLメソッドを使い、ユーザーが入力したFileオブジェクト(input.file[0])を読み込みます。
reader.readAsDataURL(input.files[0])
reader.onloadプロパティに処理を記述します。 そうすることでreadAsDataURLメソッドが完了すると発火するloadイベント時にここが実行されます。
プレビューしたいimgタグのsrcにURLを代入
reader.onload = function(e) { $('#imgPre').attr('src', e.target.result); }
これで完了です。
いかがでしたでしょうか。
FileReaderオブシェクトの使い方さえわかっていれば特に難しく考えずに実装できるのかなと思います。
基本的にコピペすればそのまま動くと思いますが、 機能を拡張したくなった時や、応用する時に理屈を知ってないと難しいですね。
技術解説は初めてなので、至らぬ点や、間違った表現・解説をしていた場合は、ぜひお知らせください。
TECH::EXPERTの応用カリキュラムを進めていて最初につまづいたポイントです。 「問題はHTMLファイルに適当なフォームを追加して入力した文字数を表示しましょう！！」というもの この記事ではjQueryでの記述で イベントがなんなのか $(this)が何を示しているのか を理解できると思います。 書いたコードはこちら sample.html <form> フォーム：<input type="text" name="name" id="input-text"> </form> <div id="char-count"> 0文字 </div> sample.js $(function() { $("#input-text").on("keyup", function(){ var charNum = String($(this).val().length); $("#char-count").text(charNum + "文字"); }); }); 解説： $("#input-text").on("keyup", function(){ 処理 }); ここではHTMLファイル内のid="input_text"に対して.onメソッドで"keyup"というイベントが発生した時にする処理を記述しています。 ここでのfunction()は無名関数と呼ばれ、１回しか呼び出す必要がないため特に関数名を指定していません。 関数の中 String($(this).val().length); メソッド 処理 String() 処理した後、文字列を返す $(this) $("#input-text")と同値、イベント発火元の要素 .val() メソッドを適用している要素のバリューを返す .length 要素の数を返す input_text要素のバリューの数を文字列として返しています。 例えば、フォームに「おはよう」と記述すれば変数charNumには「４」が代入される訳です。 最後に $("#char-count").text(charNum + "文字"); メソッド 処理 .text 要素内のテキストを置き換える イベントが発生するたびに、フォームの下に「〇〇文字」と表示しています。 以上で処理の解説は終了です！！ ここまで読んでいただきありがとうございました。 こういった基本動作をたくさん使って動的なページを作れるようにこれからも学習を続けて行きます。
TECH::EXPERTの応用カリキュラムを進めていて最初につまづいたポイントです。
「問題はHTMLファイルに適当なフォームを追加して入力した文字数を表示しましょう！！」というもの
この記事ではjQueryでの記述で イベントがなんなのか $(this)が何を示しているのか を理解できると思います。
書いたコードはこちら
<form> フォーム：<input type="text" name="name" id="input-text"> </form> <div id="char-count"> 0文字 </div>
$(function() { $("#input-text").on("keyup", function(){ var charNum = String($(this).val().length); $("#char-count").text(charNum + "文字"); }); });
解説：
$("#input-text").on("keyup", function(){ 処理 });
ここではHTMLファイル内のid="input_text"に対して.onメソッドで"keyup"というイベントが発生した時にする処理を記述しています。
ここでのfunction()は無名関数と呼ばれ、１回しか呼び出す必要がないため特に関数名を指定していません。
関数の中
String($(this).val().length);
input_text要素のバリューの数を文字列として返しています。
例えば、フォームに「おはよう」と記述すれば変数charNumには「４」が代入される訳です。
最後に
$("#char-count").text(charNum + "文字");
イベントが発生するたびに、フォームの下に「〇〇文字」と表示しています。
以上で処理の解説は終了です！！
ここまで読んでいただきありがとうございました。 こういった基本動作をたくさん使って動的なページを作れるようにこれからも学習を続けて行きます。
画像を動的に切り替えたい時がある。 例えばこちらのサイトのように。 https://www.street-academy.com/myclass/14616?sessiondetailid=506634&trigger=browse-history_top つまり、サムネイル画像？をクリックするとその拡大画像が表示されるというもの 参考にした記事はこちらである。 https://www.sejuku.net/blog/63834 上記の記事を参考にして 作成したテンプレートはこちら。 基本は一つ目のサイトと同じ機能 pic_change.html <html> <body> <img id="mypic" src="pics/1.jpg" width="400" height="300"> <img class = "pic" onclick="slideshow('0')" src="pics/1.jpg" width="10%"> <img class = "pic" onclick="slideshow('1')" src="pics/2.jpg" width="10%"> <img class = "pic" onclick="slideshow('2')" src="pics/3.jpg" width="10%"> <script> var pics_src = new Array("pics/1.jpg","pics/2.jpg","pics/3.jpg"); function slideshow(num){ document.getElementById("mypic").src=pics_src[num]; } </script> </body> </html> <style> body .pic:hover{ opacity: 0.6; filter: brightness(110%);/*リンクにマウスが乗ったら背景色を変更する*/ background-color:brown; } </style>
画像を動的に切り替えたい時がある。 例えばこちらのサイトのように。 https://www.street-academy.com/myclass/14616?sessiondetailid=506634&trigger=browse-history_top つまり、サムネイル画像？をクリックするとその拡大画像が表示されるというもの
参考にした記事はこちらである。 https://www.sejuku.net/blog/63834
上記の記事を参考にして 作成したテンプレートはこちら。 基本は一つ目のサイトと同じ機能
<html> <body> <img id="mypic" src="pics/1.jpg" width="400" height="300"> <img class = "pic" onclick="slideshow('0')" src="pics/1.jpg" width="10%"> <img class = "pic" onclick="slideshow('1')" src="pics/2.jpg" width="10%"> <img class = "pic" onclick="slideshow('2')" src="pics/3.jpg" width="10%"> <script> var pics_src = new Array("pics/1.jpg","pics/2.jpg","pics/3.jpg"); function slideshow(num){ document.getElementById("mypic").src=pics_src[num]; } </script> </body> </html> <style> body .pic:hover{ opacity: 0.6; filter: brightness(110%);/*リンクにマウスが乗ったら背景色を変更する*/ background-color:brown; } </style>
前回の記事（これ）書いてから満足して一向に学習意欲が湧かないのでWordPressでお小遣い稼ごうと思った話です。 こんな感じでWordPressのサイト作るんや～程度の備忘録的なやつです。この記事だけで網羅できてないんでその辺は適当にググりながらやるといいと思います。 一応できたやつ→なかむらのブログです この記事について そもそも勉強するのもお金稼げるようになりたいからだしアフィブログ作るのもええんでないかって安直な考えで手を出しました。 結論だけ先に書いておくとなんとなくWordPressってやつが簡単らしい程度の知識でブログ作ったらお金も時間も思ったよりかかってビビったのでアフィやる人は普通にブログサービスを使えばいいと思います。 まあWordPressってこんなものなのか～って勉強にはなったと思います。まったく触ったことないです＞＜ってよりは多少経験があるほうがまあいいんじゃないでしょうか。 認識が間違ってなければMVCモデル"風"のサイトが簡単にできるパッケージがWordPress。。。なんですよね？どうも完全にMVCモデルっては言えないみたいなことがインターネットに書いてありました。難しい話はよくわかりません。 まだアフィ貼ってないですけどアフィとか嫌いな人とかはスルーしてください。 やったこと レンタルサーバー借りるの巻 おすすめ 安い レンタルサーバーみたいな感じでググったら出てきたのでスターサーバー（りんく）にしました。 Netowlって会社のアカウント作って決済情報登録して利用申し込みしたら一瞬で借りられました。 確か月額250円のプランにしたんですけど最初は無料プランでもいい気がします。スターサーバーの無料プランがいいのかは知りません。ググってください。 ドメイン取得するの巻 いきなり順番ミスってたみたいでドメインを先に取得したほうがいいみたいです。 ドメイン申請してから実際に取得できるまで時間がかかるみたいでよくわかんない画面が出てきて心が折れかけます。ぼーっと待ってても解決しそうになかったのでググったらおとなしく待てって書いてあったのでその日は寝ました。 たぶんドメインは前もって準備しておくべきだと思います。結構お金もかかるし。。。（1年で1000円ちょっとだったような気がします。） 聞いたことはあったのでお名前ドットコム（りんく）でドメイン取得しました。 whois情報公開代行でググっておくと幸せになれると思います。難しいことはよくわかりません。 ドメインを設定するの巻 ドメインを取得しただけではなんの意味もないらしく、そのドメインでどのサーバーを見に行くのか的な設定が必要みたいです。 最初にお名前ドットコム側で設定してそのあとスターサーバー側で設定したらよくわからないうちにできました。XXサーバー ドメイン設定 とかでググると先人の知恵がたくさん出てくると思います。 WordPress入れるの巻 ここまでやってやっとWordPressが出てきます。メールアドレスとパスワード入力したら勝手にブログできておしまい！だと思っててごめんなさい。 最初スターサーバーから適当なアドレスもらえたんでそこにWordPress入れて満足してたんですけどどうもドメインくっつけたらそっちに入れなきゃダメみたいですね。 あとググるとホームディレクトリ/wpにインストールやで～って書いてるサイトもあるんですけど罠です。それやると後々めんどいと思います。やめましょう。（オンプレの社内サーバとかに入れるならそれでもいいと思います） 眠いのでWordPressをインストールしてからの話はこの土日のどこかで書こうと思います。 では。
前回の記事（これ）書いてから満足して一向に学習意欲が湧かないのでWordPressでお小遣い稼ごうと思った話です。 こんな感じでWordPressのサイト作るんや～程度の備忘録的なやつです。この記事だけで網羅できてないんでその辺は適当にググりながらやるといいと思います。
一応できたやつ→なかむらのブログです
そもそも勉強するのもお金稼げるようになりたいからだしアフィブログ作るのもええんでないかって安直な考えで手を出しました。
結論だけ先に書いておくとなんとなくWordPressってやつが簡単らしい程度の知識でブログ作ったらお金も時間も思ったよりかかってビビったのでアフィやる人は普通にブログサービスを使えばいいと思います。
まあWordPressってこんなものなのか～って勉強にはなったと思います。まったく触ったことないです＞＜ってよりは多少経験があるほうがまあいいんじゃないでしょうか。 認識が間違ってなければMVCモデル"風"のサイトが簡単にできるパッケージがWordPress。。。なんですよね？どうも完全にMVCモデルっては言えないみたいなことがインターネットに書いてありました。難しい話はよくわかりません。
まだアフィ貼ってないですけどアフィとか嫌いな人とかはスルーしてください。
おすすめ 安い レンタルサーバーみたいな感じでググったら出てきたのでスターサーバー（りんく）にしました。 Netowlって会社のアカウント作って決済情報登録して利用申し込みしたら一瞬で借りられました。 確か月額250円のプランにしたんですけど最初は無料プランでもいい気がします。スターサーバーの無料プランがいいのかは知りません。ググってください。
いきなり順番ミスってたみたいでドメインを先に取得したほうがいいみたいです。 ドメイン申請してから実際に取得できるまで時間がかかるみたいでよくわかんない画面が出てきて心が折れかけます。ぼーっと待ってても解決しそうになかったのでググったらおとなしく待てって書いてあったのでその日は寝ました。
たぶんドメインは前もって準備しておくべきだと思います。結構お金もかかるし。。。（1年で1000円ちょっとだったような気がします。） 聞いたことはあったのでお名前ドットコム（りんく）でドメイン取得しました。 whois情報公開代行でググっておくと幸せになれると思います。難しいことはよくわかりません。
ドメインを取得しただけではなんの意味もないらしく、そのドメインでどのサーバーを見に行くのか的な設定が必要みたいです。 最初にお名前ドットコム側で設定してそのあとスターサーバー側で設定したらよくわからないうちにできました。XXサーバー ドメイン設定 とかでググると先人の知恵がたくさん出てくると思います。
ここまでやってやっとWordPressが出てきます。メールアドレスとパスワード入力したら勝手にブログできておしまい！だと思っててごめんなさい。
最初スターサーバーから適当なアドレスもらえたんでそこにWordPress入れて満足してたんですけどどうもドメインくっつけたらそっちに入れなきゃダメみたいですね。 あとググるとホームディレクトリ/wpにインストールやで～って書いてるサイトもあるんですけど罠です。それやると後々めんどいと思います。やめましょう。（オンプレの社内サーバとかに入れるならそれでもいいと思います） 眠いのでWordPressをインストールしてからの話はこの土日のどこかで書こうと思います。 では。
