2013 年 8 月 のアーカイブ

HTML5 でローカルファイルの取り込みを試してみたよ!

2013 年 8 月 17 日 土曜日 by Koh(3,387 views)
  addEventListener  

HTML5では、パソコンに保存してあるファイルをJavaScriptのブログラムから扱えるようになりました。今までもファイルのアップロードは可能でしたが、取り込んだファイルのチェック等は、サーバー側で行う事しかできませんでした。HTML5になりファイルの扱いが容易になり、ファイルの種類やサイズ等をJavaScript上で判断することが可能となりました。まあ、サーバー側でチェックした方がセキュリティ的に安全という意見もありますが、とりあえず実験!

 

今回のファイル取り込み仕様は以下の通り。

 
仕様
画像ファイルを所定の場所にドラッグ&ドラッグすることで、画像ファイルを当ページにプレビュー表示する。また、ドラッグしたファイルが画像ファイル以外の場合はエラーとする。
 

では、以下にパソコンに保存してある画像ファイルをドラッグ&ドロップしてみてください。

 
ここにプレビューする画像ファイルをドラッグ&ドロップしてください。
画像プレビュー欄
   

ドロップした画像が、当サイトに表示されましたでしょうか?表示されない場合は、ブラウザーにChrome、または、FireFox、Safariを使用して再度お試しください。

 

ちなみに、プレビュー表示された画像は、サーバーにアップロード(ネット公開)された訳ではなく、パソコンにある画像ファイルをブラウザーで表示しているだけです。ご心配なく。

 

では、ソースを以下に添付しておきます。今回もスタイルシート部分は省いています。

 
<div id="dropSpace">ここにプレビューする画像ファイルをドラッグ&ドロップしてください。</div>
<image id="uploadPreview" src="">
<script>
var fileReader = new FileReader();

function DRP(evt) {
evt.preventDefault();

var files = evt.dataTransfer.files;
if (files[0].type.indexOf("image") == -1) {
alert("画像ファイルをドロップしてください。");
} else {
fileReader.readAsDataURL(files[0]);
}
}

function DRO(evt) {
evt.preventDefault();
}

fileReader.onerror = function(evt) {
alert("ファイルの読み込みに失敗しました。");
}

fileReader.onload = function(evt) {
document.getElementById("uploadPreview").src = evt.target.result;
}

var dropSpace = document.getElementById("dropSpace");
dropSpace.addEventListener("dragover", DRO, false);
dropSpace.addEventListener("drop", DRP, false);

</script>
   
 
コメントは受け付けていません。


HTML5 オブジェクトのドラック&ドロップを試してみたよ

2013 年 8 月 14 日 水曜日 by Koh(928 views)
  HTML5 Drag&Drop  

今回はWeb上でのドラッグ&ドロップ機能の実装を試してみました。まずは、以下サンプルをご覧ください。オブジェクト(商品1〜5)を白抜きの場所に、ドラッグ&ドロップすることができます。

 

※ご使用のブラウザーにより、うまく動かない可能性もあるかも〜

 
ドラッグ&ドロップ機能サンプル
 
商品1
商品2
商品3
商品4
商品5
 

ちゃんとドラッグ&ドロップすることができたかな?

 

記載コードは以下の通り、スタイルシート部分は省いています。

 
<script>
function dStart(event) {
event.dataTransfer.setData("text/plain", event.target.id);
}
function dOver(event) {
event.preventDefault();
}
function dEnd(event) {
var id= event.dataTransfer.getData("text/plain");
if (event.currentTarget.innerText != "") {
Alert("そこは置けないよ〜");
event.preventDefault();
return;
}
var element =document.getElementById(id);
event.currentTarget.appendChild(element);
event.preventDefault();
}
</script>
<div>
<div id="box01" ondragover="dOver(event)" ondrop="dEnd(event)">
<div id="item1" draggable="true" ondragstart="dStart(event)">商品1</div>
</div>
<div id="box02" ondragover="dOver(event)" ondrop="dEnd(event)">
<div id="item2" draggable="true" ondragstart="dStart(event)">商品2</div>
</div>
<div id="box03" ondragover="dOver(event)" ondrop="dEnd(event)">
<div id="item3" draggable="true" ondragstart="dStart(event)">商品3</div>
</div>
<div id="box04" ondragover="dOver(event)" ondrop="dEnd(event)">
<div id="item4" draggable="true" ondragstart="dStart(event)">商品4</div>
</div>
<div id="box05" ondragover="dOver(event)" ondrop="dEnd(event)">
<div id="item5" draggable="true" ondragstart="dStart(event)">商品5</div>
</div>
</div>
<div>
<div id="box11" ondragover="dOver(event)" ondrop="dEnd(event)"></div>
<div id="box12" ondragover="dOver(event)" ondrop="dEnd(event)"></div>
<div id="box13" ondragover="dOver(event)" ondrop="dEnd(event)"></div>
<div id="box14" ondragover="dOver(event)" ondrop="dEnd(event)"></div>
<div id="box15" ondragover="dOver(event)" ondrop="dEnd(event)"></div>
</div>
 

これもHTML5の恩恵ですね。

 
 
コメントは受け付けていません。


HTML5 detailsタグで簡単に隠し詳細表示欄ができる

2013 年 8 月 13 日 火曜日 by Koh(819 views)
  tige  

HTML5には「details」タグというのがあるらしい、どういうことが出来るかというと、以下のようなサンプルのようなことができる。

 

選抜高校野球出場校一覧(detailsタグのサンプル)

北海道
  1. 北海道
    1. 北照(2年連続5度目)
東北
  1. 岩手
    1. 盛岡大付(3年ぶり3度目)
    宮城
    1. 仙台育英(6年ぶり10度目)
    福島
    1. 聖光学院(2年連続4度目)
    山形
    1. 山形中央(3年ぶり2度目)
関東
  1. 茨木
    1. 宇都宮商(34年ぶり3度目)
 

今までだと、このような動きをさせようとすると、JavaScript等を使ってタグ制御を行っていましたが、detailsタグを使用することで、HTMLのみで実現することができるようになりました。

 

記載したHTMLは以下の通り。

 
<h4>選抜高校野球出場校一覧</h4> <details> <summary>北海道</summary> <ul> <li> <details> <summary>北海道</summary> <ul> <li>北照(2年連続5度目)</li> </ul> </details> </li> </ul> </details>
 

たったこれだけのHTMLで動きのあるページを作成することができます。

商品詳細や、主だって表に出す必要のない、ちょっとした説明文の記載欄には便利なタグとなりそうです。

   
 
コメントは受け付けていません。



Mobile Site Link