最近、家でのJavascriptの開発環境を全部クラウド上に移行しちゃいました。
Cacooで画像を作成して、Cloud9で開発。
Githubでソース管理をしてAWS上に設置したJenkinsでコンパイルしてDropboxにデプロイするような動きです。
サーバーサイドでの処理が必要な場合だとDropboxじゃダメですけど、JSで作るWebアプリケーションの場合だとDropboxで十分だったりします。
Jenkinsでコンパイルやテスト、静的解析するとこの設定はまだ出来てないので、設定ができたらその辺りの話でも書こうかと思います。
毎月恒例じゃないけど、本購入です。
ようやく買った本を書くぐらいの余力が出てきました。
本当はもっとデザイン系とかiOS系攻めてたと思うのですが、最後に書いた本購入の4月からの分とかもう思い出せないです。
Javascript関係は テスト駆動JavaScript が出てくれたおかげで一通り出揃った感がありますね。
入門：サイ本、パーフェクトJavascript
中級：パーツ、パターン、ハイパフォーマンス
テスト：テスト駆動Javascript
この辺りを読んで、あとはフレームワークを選んでnew、require、namespaceをどう作るか決めれば、ある程度の規模のウェブアプリケーション作れるようになれます。
コンパイルまで持っていくんだという人はClosureのリファレンスを読めって感じで。
ついでに、HTML5系のAPIを詳しく知りたいという人はW3CかMDNを読めって感じで。
あと、この辺の雑誌は購読中です。
気がつけばデザイン関係の雑誌が半分超えてた謎です。
ちょっと画像を一括ダウンロードする機能が欲しくなったのでJSで組んでみました。
var images = document.evaluate('//img', document.body, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); for (var i = 0, anchor = document.createElement('a'), event; i < images.snapshotLength; i++) { event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, true, false, false, 0, null); anchor.href = images.snapshotItem(i).src; anchor.dispatchEvent(event); delete event; }
動作確認はChromeのみ。
Aタグに対してAlt+クリックで「リンク先を保存」のショートカットを呼び出しているだけなので、ショートカットさえあっていればFxなどでもいけると思います。
ちなみにちょっと弄れば画像以外でもダウンロード可です。
var images = document.evaluate('//img', document.body, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); for (var i = 0;i < images.snapshotLength; i++) { location.href = images.snapshotItem(i).toDataUrl().replace(/^data:image\/(png|jpeg|gif)/, 'data:application/octet-stream'); }
別パターンとしてdata shemeを使用したパターン（toDataUrl内でCanvasを使用してdata shemeに変換してます）。
data shemeのmimeタイプを’application/octet-stream’に書き換えて強制的にダウンロードするやり方になります。
ただ、data schemeに変換するさいにクロスドメイン制約に引っかかったり、ファイル名がブラウザのデフォルト名になってしまったりで、あまり良いとこなしな方法ですが。
たまには技術ネタで。
HTML5のCanvasを使用して画像のサムネイル表示する方法がたくさん書かれていますが、createObjectURLを使えばもっと簡単にサムネイル表示が出来たりします。
HTML:
<input type="file" id="input" /> <img src="" id="thumb" />
JS:
document.getElementById('input').onchange = function() { var thumb = document.getElementById('thumb'); thumb.src = window.webkitURL.createObjectURL(this.files[0]); thumb.onload = function() { window.webkitURL.revokeObjectURL(this.src); }; };
※動作検証はChromeのみ
Fxとかならwindow.URLでいけるかと思います
たったこれだけです。
ドラッグドロップとかで大量の画像を表示させるのなら、Canvasを使用してリサイズして描画時の再計算をなくすべきですが、1つだけ表示とかならこれで十分だったりします。
毎月恒例、今月の本購入です。
ここのところ和書と洋書の割合が逆転し始めてきました。
今後買う予定の本が洋書のみとか何かが間違っている気がします。
あと、今後買う予定の本一覧です。
虎本とかも買って読みたいけど、腰据えて読む時間が正直ないです。
学生のうちに読んでおくべきでしたよ。
毎月恒例、今月の本購入です。
iOS関係は一通り読み終わりました。
英語ということを差し引いてもBegninngが入門書として優秀でしたよ。
もう少し慣れたらこれとかこれに手を出します。
Web Design Indexは結構おもしろかったのでまとめ買い。
サイ本第6版は3月発売だと勘違いしてました。PDFも出てるらしいですけど、本で読みたいので5月まで待ちです。
毎月恒例、今月の本購入です。
今月はiOS関係一色。ついでに本じゃないけどiOS開発に必要なものも一式揃えました。
今月は何も買わないつもりだったのに。
あと、これとこれとこれは来月にまとめて買う。
NinjaはPDFが出てるらしいですけど、本で読みたいので6月まで我慢です。
毎月恒例、今月の本購入です。
オライリー本なんて絶対買わないとか言ってごめんなさいというような内容でした。
Web Design Indexはおもしろかったらバックナンバーを買う予定。
それにしても、オライリー以外のJavascript本はしょっぱすぎて困ります。
