2016年1月23日土曜日

iTunes MP3 取り込み設定

・「可変ビットレートのエンコードを使う」のチェックを外す。
・「スマートエンコード調整」のチェックを外す。
・「10Hz未満の周波数帯域をフィルタリング」のチェックを外す。
・その他はデフォルトのままです。(サンプルレート、チャンネルは自動のまま、ステレオモードも通常のままです)

2016年1月21日木曜日

ElectronアプリのWindowsインストーラ作成

MdNote - ElectronアプリのWindowsインストーラ作成する - Qiita
http://qiita.com/shwld/items/170ba4ca0e5e89bba6d2

gulp インストール~基本設定の備忘録(windows) - Qiita
http://qiita.com/yokoh9/items/0a69dd5f8753c1ea54f5

ElectronとHTML/CSS/JavaScriptでデスクトップアプリを作ろう【入門編】 | 株式会社LIG

ElectronとHTML/CSS/JavaScriptでデスクトップアプリを作ろう【入門編】 | 株式会社LIG
http://liginc.co.jp/web/html-css/177611

JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット

JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット | dwango creators'
blog(ドワンゴクリエイターズブログ)
http://creator.dwango.co.jp/3413.html

Electronアプリをプロダクトとして「正しく」リリースするために必要な3つのこと

Electronアプリをプロダクトとして「正しく」リリースするために必要な3つのこと - ヌーラボ [Nulab Inc.]
https://nulab-inc.com/ja/blog/typetalk/3-points-for-releasing-production-electron-app/

2016年1月20日水曜日

JavaScript で画像本来のサイズ(幅, 高さ)を取得する | dogmap.jp

https://dogmap.jp/2009/06/17/javascript-image-natural-size-2/

Node.jsにおける非同期コードデザイン - HogeFugaHogera

http://issasn.hatenablog.com/entry/2015/02/14/144313

Node.js フォルダを作成

Node.js ファイルを書き込みする際にフォルダを作成する - Qiita
http://qiita.com/PianoScoreJP/items/c973e0e67c163d2e3fdc

Node.js/Electronで使えそうなライブラリ

Electronでメディアファイル用のファイルブラウザ「BlackAlbum」を作った - joker1007の日記
http://d.hatena.ne.jp/joker1007/20151019/1445272666


使った主要なライブラリ

dexie.js
IndexedDBを操作するために使ってます。大体何でもPromiseで帰ってくるのでasync/awaitが使えると綺麗に書き易い。

immutable.js
不変データ構造定番のやつ。

material-ui
Material DesignなReact Componentを簡単に使えるライブラリ。見た目がそれっぽくなるw

react-infinite
React用の無限スクロールライブラリ。リングバッファっぽくなっていて、何件表示しようが一定範囲しかDOMを描画しないので項目が大量になっても動作が軽い。
同種のライブラリが他にもいくつかあった。
ファイル数が数万の単位になると、この手のライブラリが無いと重過ぎてまともに描画できなくなる。

mousetrap
キーボード操作によるホットキーの定義に利用。

redux-thunk/redux-promise
Reduxで非同期処理のアクションを扱うためのミドルウェア。

sweetalert
Material Designっぽいアラートダイアログ。

jszip
Pure JSなzipの圧縮・解凍用ライブラリ。adm-zipという同種のライブラリがあるが、こっちの方が大分早い。

pica
Pure JSな画像リサイズライブラリ。lanczosでリサイズできて、触ってみた中ではPureJSでは結構早い方だと思う。

humanize
ファイルサイズとか日付を読み易く整形する。

ビルド環境
gulpとbrowserifyでビルドし、パッケージ化にelectron-packagerを使っています。
一部、browserifyをバイパスしなければならないライブラリがいくつかあるので、その用途で使うものだけどdependenciesに追加し、後は全てdevDependenciesにしてます。
最終的にパッケージ化する時にelectron-packagerのignore設定でdevDependenciesのライブラリを全てignoreすることで、無駄なパッケージでファイルサイズが肥大化しないようにしています。

参考にしたのは以下の記事です。
Real World Electron Development - Qiita
ぼくのかんがえたさいきょうのElectron - Qiita

また、実験的にReactのホットリロードにlivereactloadを使っていますが、SourceMapがおかしくなったりしてちょっと微妙感があります。後、バージョン上げたらビルド壊れたりするし……。

苦労した点
別に大したことはしてないのですが、いくつかハマりました。
まず、無限スクロールはreact-infiniteと同種のライブラリを見つけるまでは、初期描画のパフォーマンスに大きな問題があった。
後、リストする対象が多いのでshouldComponentUpdateをちゃんとやらないとクソ重くなりました。

zip展開と画像縮小のパフォーマンス問題の解決に少し手間取りました。
最初に選択したライブラリが割と遅くて、動作はするけど使い物にならなかった。

picaは高速だったけどbitmap化された画像しか扱えなかったので、BufferをBlobに変換してからCanvasに取り込んでpicaで縮小してからCanvasをElectronのnative-imageモジュールで画像に戻す、というやり方でそこそこ実用的なスピードでzip展開とサムネイル作成ができました。

picaの画像縮小はWebWorkerを使って並列で動作できるようになっているが、そのために利用しているwebworkifyというnpmパッケージが作成したobjectURLをrevokeせずに放置するため、いくつも処理するとobjectURLが溜まり続ける問題があった。そのせいか300件程処理した時点でWebWorkerにアクセスできなくなる謎のエラーが発生。適切にrevokeするようにライブラリをforkして修正して解決しました。

async/awaitのエラー処理をサボると、何の情報も無いままいきなり処理が止まるのでデバッグに苦労した。当たり前ですが、失敗しそうな処理はちゃんとtry/catch書くようにした方が良さそうです。

ElectronはNode.jsのネイティブモジュールが呼べるので、一部のモジュールがbrowserifyと衝突します。何が大丈夫で何が引っかかるのか手探りだったので、動いたり動かなかったり調べてglobal.requireしていくのが面倒だった。

でもbrowserify使わないとnode_modulesでファイルサイズが無駄に膨れ上がるし、それはそれで困る。

後、これ→→ Electronを使ってMac向けのアプリを開発する時のファイル名の扱いについて (所謂UTF-8-MAC問題) - Qiita

Node.js デスクトップのパス取得

process.envから環境変数が得られるので、ホームディレクトリのパスを取得してから
pathモジュールの.joinで結合

CODE
------------------------------------------------
// OSがWindowsなら"USERPROFILE", Mac, Linuxは"HOME"を参照
var dir_home = process.env[process.platform == "win32" ? "USERPROFILE"
: "HOME"];
var dir_desktop = require("path").join(dir_home, "Desktop");
------------------------------------------------

node.jsからデスクトップのパスを取得できますか?(8350)|teratail
https://teratail.com/questions/8350

テキストエディターを作ってElectronの基礎を学ぼう! HTML5でPCアプリ開発入門 - ICS MEDIA

テキストエディターを作ってElectronの基礎を学ぼう! HTML5でPCアプリ開発入門 - ICS MEDIA
https://ics.media/entry/8401

Electronでファイルやフォルダの選択

Electronでファイルやフォルダの選択 - Qiita
http://qiita.com/khirose/items/6544342fd4141345bb19

Electronで簡単なFacebookアプリ

Electronで簡単なFacebookアプリを作ってみた - 人生リアルタイムアタック
http://shinespark.hatenablog.com/entry/2015/09/02/154753

Electron パッケージ化

30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで - Qiita
http://qiita.com/nyanchu/items/15d514d9b9f87e5c0a29

パッケージ化↓
Electronでアプリケーションを作ってみよう - Qiita
http://qiita.com/Quramy/items/a4be32769366cfe55778

2016年1月19日火曜日

[JavaScript] 画像変換 img要素 ⇔ Base64(相互変換) - Qiita

[JavaScript] 画像変換 img要素 ⇔ Base64(相互変換) - Qiita
http://qiita.com/yasumodev/items/e1708f01ff87692185cd

jQuery⇔DOMオブジェクト変換

標準のDOM ElementオブジェクトをjQueryオブジェクトに変換するには?

 DOM→jQueryは$()をつける

 例:$(document.body)

 jQuery→DOMの場合は、jQueryオブジェクトの0番目の要素にアクセスする
 例:var obj = $("select[name='hoge']");
 var val = obj[0].options[obj[0].selectedIndex].text;


参考

jQuery⇔DOMオブジェクト変換 | nasec blog
http://nasec.jugem.jp/?eid=43

カスタム レポートのユーザー数がセッション数より多くなる理由 - アナリティクス ヘルプ

フラットデザインのアイコン

Free vector icons - SVG, PSD, PNG, EPS & Icon Font - Thousands of Free Icons
http://www.flaticon.com/

2016年1月16日土曜日

jQuery の ajax 処理で Now Loading の画像を表示する方法

jQuery の ajax 処理で Now Loading の画像を表示する方法
http://jquery.nj-clucker.com/now-loading/

// Loadingイメージ表示関数
function dispLoading(msg){
// 画面表示メッセージ
var dispMsg = "";

// 引数が空の場合は画像のみ
if( msg != "" ){
dispMsg = "<div class='loadingMsg'>" + msg + "</div>";
}
// ローディング画像が表示されていない場合のみ表示
if($("#loading").size() == 0){
$("body").append("<div id='loading'>" + dispMsg + "</div>");
}
}

// Loadingイメージ削除関数
function removeLoading(){
$("#loading").remove();
}
http://jquery.nj-clucker.com/now-loading/


#loading{
border:1px dashed #999;
padding:15px;
position: fixed;
top:50%;
left:50%;
background-color:#FFF;
filter: alpha(opacity=85);
-moz-opacity:0.85;
opacity:0.85;
}

#loading .loadingMsg{
text-align:center;
padding-top:100px;
width:100px;
background-image:url("(LoadingイメージのURL)");
background-position: center top;
background-repeat: no-repeat;
font-family: "メイリオ"!important;
}

Web コンテンツを開発するための Node.js 簡易 Web サーバー

Web コンテンツを開発するための Node.js 簡易 Web サーバー - monoe's blog - Site Home - MSDN Blogs
http://blogs.msdn.com/b/osamum/archive/2015/05/29/web-node-js-web.aspx

種類豊富に揃うフリーアイコンセットがまとめられた「1100+ Free UI Icons for Web, iOS and Android UX Design」 | DesignDevelop

種類豊富に揃うフリーアイコンセットがまとめられた「1100+ Free UI Icons for Web, iOS and Android UX Design」 | DesignDevelop
http://design-develop.net/design/1100-free-ui-icons-for-web-ios-and-android-ux-design.html