一番カンタンにダウンロードを実装する方法 HTMLでファイルや画像をdownloadする為の単純な実装はこんな感じだとおもいます。
html 1
<a href="ダウンロードファイルのパス" download="ダウンロードした時のファイル名">click</a> ただ、この実装では画像がクロスドメインの場合はダウンロードできません。また、safariでは別タブが開き右クリックで画像を保存しないとダウンロードできなかったりします。
やりたかったこと HTMLのimgタグで表示している画像をクリックすると、画像をダウンロードさせる。という仕様を実装した時に色々苦労したのでメモしておきます。処理の順序としては以下の順番で説明します。またTypeScript用の型も指定しておきます。
画像URLからnew Image()する クロスドメインを回避する方法 canvasにdrawImageしてjpegに変換してbase64にする base64からBlobに変換してFileSaverを使ってダウンロードさせる safariでダウンロードフォルダーに保存させるために使用 画像URLからnew Image()する 画像URLからHTMLImageElementインスタンスを作成します。
js 1
2
3
4
5
6
7
8
9
10
11
12
13
14
async load(imageURL) { let imageSouce = await imageLoader(imageURL); } imageLoader(imageURL) { return new Promise((resolve, reject) => { let image= new Image(); image.
明けましておめでとうございます！2013年最初の投稿です^^; ちょっとだけサクッと近況報告で、年末年始は色々ありまして、2月に入ってから少し落ち着き、1月20日に入籍しました。
とまぁ、近況はこんなもんで。(´∀｀∩)
Underscore.jsとは 簡単に言いますと、Underscore.jsというのは、JavaScriptのライブラリです。簡単すぎますが、つべこべ言わずに何がどう便利なのか、Underscore.jsのドキュメンに書かれている最初のメソッド、eachのサンプルを見てみましょう。
underscore.js eachの使い方 underscore.js
ライブラリはこれで、読み込むと _ ←アンダースコアを定義します。これで連想配列をパースしてみましょう。
js 1
2
3
4
5
obj = {A: 'a', B: 'b'}; _.each(obj, function(v) { console.log(v); // a b と出力されます。 }); さて、もうお気づきかもしれませんが、連想配列などをパースする際には、for in やjQuery.eachなどを使っていました。キーとバリューを出力する際、必ずキーが必要でしたが、Underscore.jsのeachを使えば、最初にバリューが第一引数で戻ってきます。たったこれだけですが、わかりやすくていいですよね。
js 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
CoffeeScriptとは、JavaScriptをRubyライクに書くことができるプログラム言語です。何が良いって、プログラミングが速くなる！みたいです。僕はまだまだ慣れてません！ので、慣れるためにNode.jsをCoffeeScriptで書いてみようと思い、その手順と導入方法をメモします。
CoffeeScriptをインストールする。 必要に応じて-gオプションを付けます。
$ npm install -g coffee-script CoffeeSciptのcall optionは-hのヘルプで確認できます。
$ coffee -h http://codezine.jp/article/detail/6391
sublime http://memo.devjam.net/clip/909
tween.jsとは 四角いdiv要素をクリックしたら、びょんびょんびょーーーんっと、動いたと思います。早速これのサンプルコードはこちら。（jQueryで書いてます。）
js 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
(function(){ if(typeof jQuery == 'undefined')return; jQuery.
node.jsとjQueryを使ってスクレイピングできるとかできないとか。先人の知恵さまのブログを色々拝見させていただいてたら、jsdomというのを使ってDOMの操作ができ、スクレイピングができるみたいです。早速やってみましたら早速エラーが出ました笑
Error: Cannot find module 'jsdom/browser/domtohtml' どうやら、domtohtmlというライブラリのパスが違うみたいなので、しらべてみると、下記のパスで正しくつながるみたいです。
//これが間違い✕ domToHtml = require('jsdom/browser/domtohtml'); //これが正しいパス◯ domToHtml = require('jsdom/lib/jsdom/browser/domtohtml');
プログラマーさんにとっては、JavaScriptという言語の書き方は気持ち悪いみたいです。僕は難しいことはよくわかりませんが、CoffeeScriptというのができるくらい、慣れないものなんでしょうね。CoffeeScriptも、Haml、Sass同様にRuby on Railsとの親和性が高い記述ができるFrameWorkです。僕は生のJavaScriptかjQueryのほうがいいんですが、こんなんいっぱい覚えられへんわ・・・。
慣れれば早いかもしれませんが、まだ普通に書いた方が早くて練習用にjs2coffeeが便利だと思います。CoffeeScriptの公式サイトにも、CoffeeScriptからJavaScriptに正しく書かれているかの変換できる場所がありますが、このjs2coffeeは逆のJavaScriptからCoffeScriptへ変換ができます。jQueryみたいな括弧の中に関数の入れ子状態な記述では、CoffeeScriptでどう書くんやろう・・・。というのがなくなって勉強にも便利かもしれませんね。
http://js2coffee.org/
何かの判断をJSで行った後に、scriptタグで外部JSを読み込んだりする事がありました。jQueryをつかって、scriptタグを生成したときに変な挙動があったので回避するメモを残します。
JSのイメージは、
scriptタグの記述をStringで書いて、
それをjQueryの＄を使ってタグを生成、
bodyタグへappendする流れです。 NGソース javascript 1
$('body').append($('<script>alert("アラート");</script>')); 純粋に書くと上記のような記述になるとおもいます。ところがこれを実行すると、
')); } })();** ↑このようなscriptの途中の括弧だけが出てきてしまいます。これの原因は、「/」スラッシュが特殊な状態で認識してしまうみたいです。jQueryで普通に閉じタグを作るときに「/」をつかっても何も起きませんが、どうやらscriptの閉じタグだけ、うまく認識してくれないっぽい？です。調べてないのでたしかなことはわかりませんけどね。。
回避するOKソース javascript 1
2
$('body').append($('<script>alert("アラート");<\/script>')); //スラッシュの手前に、バックスラッシュ（￥でもOK）を置く。 「/script」という文字列がダメなら、「/」スラッシュの手前に、バックシュラッシュ（￥マーク）を置くと、変な挙動は回避され、上記のソースではちゃんとalert();が実行されます。正規表現の時と同じ、特殊文字に特殊な意味を持たせない。ということですね。
僕はこうします。 javascript 1
2
$('body').append($('<scr'+'ipt>alert("アラート");<\/scr'+'ipt>')); //「scr」と「ipt」という文字で連結 こうする必要はないかもしれませんが、scriptタグの記述が変な挙動を呼び起こしてしまうなら、いっそのこと「scr」と「ipt」という文字で連結させてしまおう！っておもいました。そもそもこんなことを書くこと自体マレかもしれませんが参考までに。
