• ベストアンサー

JS エクスプローラーからのＤ＆Ｄで作表したい

前回はiframeからの情報で親ページに作表するように 検討しました。（https://okwave.jp/qa/q10136205.html） しかし、セキュリティ上の制限でできないようだと判断して 諦めました。（できる方は是非ご教示願います） 今回は、エクスプローラーで ファイルＡＰＩ（Drag&Drop）を用いて作表することを 検討しています。 できるだけシンプルなコードでは、どうなりますか？ スキルをお持ちの方のお力添えをお願い申し上げます。 （HTML素材は、前回のものをお使いいただけます）

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

＃１です。訂正です。 １行目が <!DOCTYPE html> でした。 -- 追記 <!DOCTYPE html> <meta charset="utf-8"> <title></title> <style> #AREA { border:2px red solid; width: 400px; height: 100px; text-align: center; } td.num { text-align: right; color: blue;} th { background: gray; color: white; padding: 0 3ex;} </style> <body> <p id="AREA"> この領域にファイルをドラッグ&ドロップ </p> <table id="RESULT" border="1"></table> <script> class DD { #init(target) { target.addEventListener ('dragover', this, false); target.addEventListener ('drop', this, false); } constructor (target, callBackFunc) { this.target = target; this.callBackFunc = callBackFunc; this.#init (target); } handleEvent (event) { event.preventDefault (); switch (event.type) { case 'dragover' : event.dataTransfer.dropEffect = 'copy'; break; case 'drop' : let [file] = event.dataTransfer.files; if (file) { this.callBackFunc (file); } break; } } } //__________________ class FileLoader { constructor (file, callBackFunc) { this.callBackFunc = callBackFunc; let reader = new FileReader (); reader.readAsText (file); reader.addEventListener ('load', this, false); } handleEvent (event) { this.callBackFunc (event.target.result); } } //__________________ function demo () { function textToAry (text) { let lines = text.trim ().split (/\r\n|\r|\n/g), ary = lines.map (row => row.split (/\t/g)); return ary; } function ary2table (ary = [], tbody = document.createElement ('tbody)')) { const th = document.createElement ('th'); for (let row of ary) { let tr = tbody.insertRow (); for (let cell of row) { cell = cell.trim (); if (0 === cell.indexOf ('#')) { td = tr.appendChild (th.cloneNode (false)); cell = cell.slice (1); } else { td = tr.insertCell (); if (/^[+-]?\d{1,3}(,\d{3})*(.\d+)?$/.test (cell)) { td.classList.add ('num'); } } td.textContent = cell; } } return tbody; } function cbFunc0 (file) { new FileLoader (file, cbFunc1); } function cbFunc1 (data) { ary2table (textToAry (data), RESULT); } new DD (AREA, cbFunc0); } demo (); </script>

retorofan
質問者

お礼

ご回答ありがとうございます。 勉強させていただきます。

その他の回答 (1)

回答No.1

シンプルなのか？ <!DOCTYPE hrml> <meta charset="utf-8"> <title></title> <style> #A { border:2px red solid; width: 400px; height: 100px; text-align: center; } </style> <body> <p id="A"> この領域にファイルをドラッグ&ドロップ </p> <table id="B" border="1"></table> <script> const C=(_,__=new FileReader())=>(__.addEventListener('load',D),__.readAsText(_)), D=({target:{result:_}})=>E(_.split(/\r\n|\r|\n/g).map(_=>_.split(/\t/g)),B), E=(a,b)=>a.reduce((b,a)=>(a.reduce((c,d)=>(c.insertCell().append(d),c),b.insertRow()),b),b); A.addEventListener('dragover',_=>(_.preventDefault(),_.dataTransfer.dropEffect = 'copy')); A.addEventListener('drop',(_,__=_.dataTransfer.files)=>((_.preventDefault(),__&&C(__[0])))); A.dropzone='copy'; </script>

retorofan
質問者

お礼

ご回答ありがとうございます。 勉強させていただきます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • txtファイルを読み込んでWeb上で自動作表したい

    本日２月２０日は、西郷輝彦さんの命日です。 当方は、彼の歌が好きで、歌のリストを作りました。 このテキストファイルをHTMLで読み込んで、 Web上で自動作表したいと思っています。 条件は、次のとおりです。 ・ローカル環境でできること ・OBJECTタグ、または、IFRAMEタグに読み込む ・JavaScriptでコーディングする ・読み込むファイルの例は次のとおり 曲名　　　　　　　　　発売日　　 チャペルに続く白い道　1964.04.15 星空のあいつ　　　　　1964.06.01 潮風が吹きぬける町　　1967.10.01 JavaScriptに詳しいかたにご教示願いたく、 よろしくお願いいたします。

  • JavaScriptで情報取得

    JavaScriptで<iframe>内に表示されているHTMLの<title>タグの情報を取得して<iframe>を設置しているHTML内の<h1>タグに記述させています。 前回、同じ内容で質問をして解決出来たと喜んでいたのですが、別ドメインの情報を取得する必要性が出てきました。 別ドメインの情報を取得する事は出来ないのでしょうか？ ［以前の質問内容］ http://pcsoft.okwave.jp/qa3058673.html

  • JavaScript 手作業から解放されたいのです

    今、インラインフレームにデータを読み込んで作表するサンプルを作成中です。 インラインフレームには select() メソッドが使えないために 手作業でテキストエリアに copy&pasteしている状態です。 この手作業から解放されたいのですが、どういうコードでできますか？ スキルある方のお力添えをお待ちしております。 【親ページ】parent.html <body> <div>parent.html 親ページです.</div> <style> body { background: lavender; } .wrap { list-style-type: none; display: flex; width: 640px; padding: 1.5em; background: lightgreen; border-radius: 10px; } form > div { margin-top: 1em; font-weight: bold; } label { display: block; } pre b { color: red; } #iframe3 { width: 300px; height: 160px; background: #eee; } #textArea { margin-left: 10px; width: 300px; height: 160px; } </style> <pre> 【テーマ】子ページ内のデータで作表する ＜条件＞ ・子ページの情報で親ページに作表する ・ローカル環境（当然 Ajax(XMLHttpRequest)は対象外、new FileReader不使用） ・ファイルは、親子とも同じ場所 ・現在は、<b>読込ファイル選択 ▶ IFRAMEをCTRL+C ▶ TEXTAREAでCTRL+V ▶ 作表ボタン押下 ▶ 作表</b> 　理想は、手作業を省略して、<b>読込ファイル選択 ▶ 作表</b> </pre> <ul class="wrap"> <li>(1)［IFRAME］（理想は非表示に） <iframe id="iframe3" src="./20230515-child.tsv" title="子ページ"> </iframe> </li> <li>　(2)［TEXTAREA］（理想は非表示に） <textarea id="textArea" placeholder="貼付場所"></textarea> </li> </ul> <form name="form1"> <div>読込データファイルの選択</div> <label><input name="cbox" type="radio" value="0" checked> １.TSVファイル (タブ区切り .tsv)</label> <label><input name="cbox" type="radio" value="1"> ２.HTMLファイル</label> </form> <p> <button id="button1">作表</button> <table id="listTable"></table> </p> <script> (function () { //エレメント const iframe = document.getElementById('iframe3'); const table = document.getElementById('listTable'); const textArea = document.getElementById('textArea'); const button1 = document.getElementById('button1'); //読み込みファイルの選択 document.form1.onchange = function(event) { let n = event.target.value; iframe.src = "./child." + ["tsv","html"][n]; } //作表処理 button1.onclick = function (){ // 値を全選択してコピー (※使用不可能) // iframe.select(); // var result = document.execCommand("copy"); //------------------------------------------------------------- // 整形 文字データの配列化 作表 // (略) //------------------------------------------------------------- }; })(); </script> </body> 【子ページ１】child.tsv 番号 名称 半径 衛星個数 1 水星 2,439 0 2 金星 6,051 0 3 地球 6,378 1 4 火星 3,396 2 5 木星 71,492 95 6 土星 60,268 104 7 天王星 25,559 27 8 海王星 24,764 14 9 冥王星 1,188 5 【子ページ２】child.html <pre> 番号 名称 半径 衛星個数 1 水星 2,439 0 2 金星 6,051 0 3 地球 6,378 1 4 火星 3,396 2 5 木星 71,492 95 6 土星 60,268 104 7 天王星 25,559 27 8 海王星 24,764 14 9 冥王星 1,188 5 </pre>

  • DVD-RAM（両面９．４GB）のフォーマット方法

    片面ずつ、Windows XPのExplorerの右クリックで、フォーマット〔FAT32のみ選択可能〕でしましたが、Drag&Dropでコピーすると、ハードウエアエラーが頻発します。 フォーマットはDVD-RAM専用のフォーマットソフト（DVDForm）を使用した方がいいのでしょうか？或いは他にいい方法がありますか？ PCはVAIOです。

  • JS 動的な作表コード：普通じゃ物足りない？

    JavaScript 動的な作表コード：普通じゃ物足りない？ 動的に作表するには、次のメソッドが使われています。 createElement, insertRow, insertCell さて、これらを用いずに 作表するにはどんなコードになりますか？ 下記のとおり、素材を用意しました。 <script> //表の名称 (caption) const title = "一般果物　エネルギー　上位１０"; //表の元データ (分割子は半角スペース) const data = ` 順位 果物名 含量 (Kcal) 1位 中国栗 207 2位 アボカド 178 3位 日本ゆで栗 152 4位 ドリアン 140 5位 バナナ 93 6位 あけび 89 7位 チェリモヤ 82 8位 アテモヤ 81 9位 ホワイトサポテ 73 10位 ぐみ 72`; </script>

  • ドラム　基礎練習　ジェルパッドについて

    こんにちわ。お世話になっています。 ここでのアドバイスを基に、日々基礎練習に励んでいる 初心者ドラマーです。 皆様のお力添えにより、ウレタン板でもそれなりの良い音を出して 叩けるようになりました。 しかしそれだとご近所さんにも聞こえてしまい、 特に何も言ってこないのですが中には快く思ってない方もいます。 そこで今よりもっと消音性のある練習台を使おうと思って、 前回質問した際に紹介してくださった 『ジェルパッド』なるものの購入を検討しているのですが、 どこに売ってるのでしょうか？ 実物を見たことが無いので、どういった店に行けば良いのかわかりません。 また、他にも消音性があって基礎練習にはもってこいの 素材がありましたら教えてください。

  • jQueryなどのライブラリを利用して、HTML要素をドラッグして移動

    jQueryなどのライブラリを利用して、HTML要素をドラッグして移動させることが 出来ることは分かりましたが、その状態を保持する方法が、調べても分かりません。 Cookieを利用して保存する方法は結構見つけたりするのですが、それでは Cookieが削除されたり、有効期限が切れた場合にリセットされてしまうことに なる為、サーバへ状態を保存するような形を取ると思うのですが、シンプルな サンプルなどはありませんでしょうか？ WordPressの管理画面がまさにそれだと思うのですが、どこで何やっているのか さっぱりでした・・・ ちょっとこんなのを見つけたので、時間があるときに試してみようと思うのですが、 教えて下さる方がいらっしゃれば、是非お願いしたいです。 http://webdeveloperplus.com/jquery/saving-state-for-collapsible-drag-drop-panels/

  • Amazon API、登録方法がよくわからない2

    前回Amazon APIについてお答えいただきましてありがとうございました。 http://okwave.jp/qa/q7752187.html なんとなくわかったのですが、本日さらによくわからない状況になりました。 「Product Advertising APIは廃止となりAmazon MWSに移行した（今年8月末）」ようです。 ではなぜ以下のように今でもProduct Advertising APIのアカウントは作れるのでしょうか？ https://affiliate.amazon.co.jp/gp/advertising/api/detail/main.html もしかして 「出品者用Product Advertising APIは廃止しMWSに移行」 「アフィリエイト用Product Advertising APIはこれまで通り使える」 ということでしょうか？ 私は出品者としてAPIを使いたいのですが（アフィリエイトする予定はない）、この場合はMWSに登録すればよいということでしょうか？ それともアフィリエイト用Product Advertising APIと組み合わせたほうが便利とかあるのでしょうか？ お手数ですがよろしくお願い致します。

  • DVD-RWが消去出来ません。

    早速ですが、富士通のFMVのT50Hを使っているのですが、いつもＤＶＤ を消去する時は、DRAG'N DROP と言うソフトを使って消去していたのですが、今日急にＲＷの消去をしようとした所「ＲＷディスクの消去に失敗しました。ご使用のディスクにドライブが対応していない可能性があります。コード３１１－０１－１０４３」と言うエラーメッセージが出てしまいます。いろいろなＲＷで試したのですが全部出来ませんでした。ちなみに前回は問題なく出来ているＲＷも今回は同じメッセージが出てしまいました。 どなたかわかる方いましたらお願いします。

  • Ｄｒａｇ’ｎ　Ｄｒｏｐ　ＣＤをはずしたい

    今回Ｂ'ｓＲｅｃｐｒｄｅｒ　と　Ｂ’ｓＣＬＩＰ　を使いたいのですが、以前に入れたDrag'n Drop CD2 forImoress JP体験版制限解除（ＣＰ）がアンインストールできません。体験版なのにそのまま約２年くらい使っています。会社の方はバージョンが古いので、メールも電話もサポートを打ち切ってしまっていて聞くことが出来ません。 これにはアンインストールするプログラムが付いていません。削除しても生きています。コントロールパネルから削除しようとすると、起動しているから止めてからと出ますが、常時起動しているこのソフトの起動を止める方法もわかりません。全く困り切っています。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する