2015-07-28

npm自体のアップデートしようとしたらなぜかコマンドが消えた...

アップデートしようとしたら怒られた...

テンパりすぎて当時のメモはとれてないけど、npmが古い事に気づいてアップデートかけようとした。
[code] $ npm update -g npm [/code]

そしたらなんかエラーが出て怒られた...
ごにょごにょ言ってたしもう一度試そうとしたら

[code] $ npm update -g npm -bash: npm: command not found [/code] 一瞬私自身がフリーズして、凄ーく焦った。
なぜ消えているのか。
どうにも他の人も遭遇してるみたいで、やっぱアップデートかけようとしたりすると出会う事があるみたい。
ただ大抵の人はnode.jsごとアンインストールして、再インストールしたりとか過去のバージョンのnpmとかnodeが邪魔になっているとかで [code] $ sudo rm -rf /usr/local/lib/node_modules [/code] こんなのしてから再インストールしてみたりとか、してる様子だけど私はこれをしたら今まで入れたモジュール達も消えるかも...
とか不安もあったので別の方法でなんとかnpmのみ再インストールしたい。

解決法 ~npmだけ再インストール~

先に書いちゃうとこう
[code] $ curl -0 -L http://npmjs.org/install.sh | sudo sh [/code] 私はこのコマンドを実行するだけでとりあえずは再インストールが出来て、npmコマンド達が使えるようになった。

参考にしたサイトはこちらhttp://blog.clock-up.jp/entry/2015/01/03/npm-update-problem
まぁどうにも遭遇するタイミングがみんな違うからなんともいえないけど、めっちゃ焦るしまた調べておこうと思う。

終わり

最近node.jsの Electron に興味が湧いてインストールしようとしたらこれですよ... nodeはアップデートが早いしちゃんとやらなきゃなー

2015-07-27

~使い方編~ html5+createjsでのアニメーション処理とか

createjs canvas create.js easel.js flash HTML5 Javascript preload.js tween.js

今回は使い方編。
完全に理解する時間と余裕も無く、現状(2015/07/27)は断片的な使い方を記述していく。
次回はなににしよう..

createjsを呼び出す

これは最初にやっておくとこ。
使う以上当然だし忘れないよね？ [code language="html"] <head> <script src="">https://code.createjs.com/createjs-2015.05.21.min.js"> </head> <body> ... [/code] 公式ドキュメントだとこんな感じでよびだしておく事になってる。

canvasをオブジェクトとして呼び出す

createjsを読み込んだらアニメーションさせる前にcanvasをcreatejsで扱うようにオブジェクトとして呼び出す必要がある。
勘違いしないでほしいのがあくまでcreatejsで扱うのではなく、createjsに内包されてるライブラリを使うのでそこは意識してほしい。
[code language="javascript"] var stage = new createjs.Stage('canvas_id'); [/code] canvasをオブジェクトにする時に大抵はお決まりとしてstageと命名するらしい。

オブジェクトを生成する

canvasに配置するモノたちをオブジェクトとして区切って設定していく必要がある。
オブジェクトは [code language="js"] var container = new createjs.Container(); container.rotation = 158;//向きの設定 container.x = 30;//横方向の位置の設定 container.y = 40;//縦方向の位置の設定 container.alpha = 0.5;//透過度の設定 1 で最高値(完全に透けない)０で透明になる [/code]

こんな感じ。
他にもアルファと言って透過度を指定するものや色々あるのでここで設定する
この段階ではまだcanvasに描画はされていない。

オブジェクトを子要素として連結する

別のオブジェクトに対してオブジェクトを子要素として連結する的な。
例えば背景のオブジェクトがあってそこに何かを重ねる時とかに使う、と思う。ちょっとまだ曖昧。
[code language="js"] var container = new createjs.Container(); container.rotation = 158; container.x = 30; container.y = 40; container.alpha = 0.5;

base_container = new createjs.Container(); base_container.addChild(container); [/code]

オブジェクトにアニメーションを加える

オブジェクトにアニメーションを付けるにはtweenjsというライブラリが主だって使われる。
アニメーションは基本的には tween みたいな呼ばれ方をするしそんな記述をコードでもする。

オブジェクトへアニメーション用の宣言をする

まずオブジェクトのアニメーション設定を保持する変数を宣言し格納する。
この時に他にも複数のオブジェクトをアニメーションさせる場合は保存する変数を連想配列が入るように宣言するよい。
オプションもあり、第二引数の{}の」中で色々指定できる。
[code language="js"] var tween; tween = new createjs.Tween.get(mtr[key],{'useTicks':true}); [/code]

オブジェクトにアニメーションを設定する

アニメーションの設定を保存する領域を確保したらいよいよ動きを付けていく [code language="js"] var tween; tween = new createjs.Tween.get(mtr[key],{'useTicks':true}); tween.to({rotation: 30}, 24);//rotationの位置を現在値から30まで24フレームで移動する [/code] 第一引数はオブジェクトのアニメーションを付けたい要素名を指定してそこの数値を変更する。
だい二引数はそれにかかるフレーム数となっているちなみにこのtoとたくさん数珠つなぎでつなげると複雑に出来る [code language="js"] tween.to({rotation: 30, 24).to({rotation: 20}, 24).to({alpha: 0.4}, 24); //30に向きを変えて、20に向きを変えて、透過度を0.4に落とす [/code]

.toとは別に指定したフレーム数待機する命令もある [code language="js"] tween.wait(24).to({rotation: 50}, 24);//24フレーム待機してから向きを50に変更する [/code]

オブジェクトの大きさを倍率で指定して変更する

[2015/08/07追記] オブジェクトを生成して描画する前に元の大きさより小さくor大きくしたいときに使える。
でも倍率指定だからそこだけ留意する事。

[code language="js"] var container = new createjs.Container(); container.scaleX = 1.3;//1.3倍の横幅にする。 container.scaleY = 1.5;;//1.5倍の縦幅にする。 [/code]

終わり

とりあえず思いついたのを整理しつつ書いてみた。
とはいえまだまだ理解してない事が多いので書き足したい。

2015-07-27

~説明編~ html5+createjsでのアニメーション処理とか

createjs canvas create.js easel.js flash HTML5 html5 Javascript preload.js sound.js tween.js アニメーション

幾つかcreate.jsについて回数を分けて記事を書こうと思う。
今回はまず概念というかそんな感じの説明編。

flashからhtml5+jsへの変化

たしか2015年1月27日くらい、YouTubeがadobe社のflash playerからhtlm5で動画をデフォルトで再生出来るように変更したりと
だんだん世論的に、flashを利用する方針からhtml5で済ませるような方針になりつつあると最近感じるようになってきた。

どこかの記事で見た話だが、少し前まではwebで動画やアニメーションを使用する際には9割近くがflashを使用しているようでその影響でadobeのflash playerが世界の標準みたいな事になっていて確かに、YouTube見るのにもニコニコ動画見るにも大抵のアニメーションを再生するにもflashなので当然そのシェア率がアホみたいな事になるのは当然と言える。
しかし、flashはたくさんの問題点があり多くの事をやろうとすると動作がとても重くなったり、もっと目立つ問題と言えばモバイル対応についてである。

近年スマホの普及が世界的に急速になっているので当然flashもスマホ対応する必要が出てきた。
androidは機種によって違いはある物の対応できたが、appleはiphoneはflash対応しないと発表した事により事情が大きく変わった。
まぁ、こんな色々な動きによってだんだんflashを無理に使うよりもhtml+jsで出来るようにした方が扱えるユーザーも増えるし開発者もいじれる人が増えるのでhtnl5からcanvasでflashと同じ事ができるようになりそちらに移行してきているみたい。

html5のcanvasタグ

html5から実装されたモノでcanvasタグ上で様々なアニメーションをjavascriptで実装する事が出来るようになった。
ただし、今は先ほど書いた通りまだまだシェアが少ないので現状は最初から最後までcanvasで実装するよりflashとしてあらかじめ作りそれをツールを使用してhtml5+js用に変換するのが今の主流っぽい。
なので、記事を探しても数が少なく色々やろうとすると苦労する事が多いのかもと感じた。
ただし、公式のドキュメントは充実しているらしくて(英語がまだまだ読めないので私自身あまり感じないけど)そちらを読むと多少は理解が進むかも。

基本

html側にcanvasタグをid付きで記述して、jsにcanvasでアニメーションさせる事に特化したライブラリであるcreate.jsを呼び出して使用するのが現在のやり方だと思う。
flashをツールで変換してもこのスタイルだし、今後もcreate.jsは普及するだろうからきっと間違ってはいないと思う。

create.js

create.jsとは、canvasでアニメーションをするために特化したライブラリでその実体とはそれぞれ
描画処理、アニメーション処理、音声処理、ローディング処理に特化したライブラリを纏めて扱うのがcreate.jsらしい。
ちょっとこんがらがるが、canvasで色々やりたい時はこいつを読み込むようにしとけば良いと思う。

終わり

今回は事前知識というか、まあ背景についての説明なつもり。
ここらへんは話題になったから記事はたくさんあるので色々みて知っておくと良いと思う。
次回は私が知りうる断片的な使い方を書いていこうと思う

2015-07-03

テーブルのセルに幅をキチンと指定する

html css css height html HTML5 table td tr width

テーブルのセル自体に幅を指定する

最近htmlをいじる事が多くなってきて、テーブルを作成する際にセルの幅をあらかじめ固定しておきたいのに要素を指定しても全然上手く行かずにつぶれたテーブルが出来てしまっていたので調べた。

やり方

少し混乱するが、tableタグに"table-layout: fixed;"を設定して最初の列にあるtdタグ全てに任意の幅を"width"で指定する。
このtdタグに指定した幅がそれぞれのtdの幅になる。
この二つのタグに指定するのを私は知らなかったが為に、出来なかった...

[html]  <table> <tr> <td>imo</td> <td>susi</td> <td>kimo</td> </tr> <tr> <td>uma</td> <td>koma</td> <td>kuma</td> </tr> </table> [/html] [css] / css / table { table-layout: fixed; }

td { width: 20px; height: 20px; } [/css]

こうすると、横幅と縦幅が20pxの正方形のセルのテーブルが出来る。
こうやって指定しないとtdの中に何か入っていない場合はテーブルがつぶれてぐちゃぐちゃな状態で表示されるので注意。

終わり

プログラマなのに、htmlも満足にいじれないなんてにわかも良いところだなっと非常に思ったので反省。

2015-07-02

同じ文字列の同時編集

sublimetext 未分類

同じ文字列の同時編集

sublimetextでは、同じ文字列を同時に編集する事が出来る。
これが、コーディング中にはとても欲しい機能でもある。
ファイル内で使われてる変数を命名し直したいとかする時に、置換しても良いけどより手っ取り早く済むと思う。
いつも忘れて置換ばかりしてるので、文字通り忘れないようにメモする事に...

sublimetext3 でも 2 でも使える様子。

やり方

対象となる文字列を選択した状態でショートカットキーを押すだけ。

同じ文字列を全て選択して編集状態に
[code] Alt＋F3キー（Win）／Ctrl＋Command＋Gキー（Mac） [/code]

一個ずつ選択して編集状態にするなら
[code] Ctrl + D (Win)／Command + D (Mac) [/code]

一個飛ばしで選択して編集状態にするなら
[code] Ctrl + K (Win)／Command + K (Mac) [/code]

選択しすぎたり、戻したい時。
これは、所謂戻るショートカットである command + Z とかと似たような機能だが、そっちでは出来ないものまで戻れる。 [code] Ctrl + U (win) / Command + U (Mac) [/code]

使ってみた感想

ちょっと感動。リファクタリングする時めちゃ便利。特に変数の命名を変えるのがミス無く、さらに素早く済むからうれしい。
もう少し早く気づくべきだった。。。

2015-06-24

配列・連想配列の複製(コピー)で引っかかった

Javascript Javascript 参照渡し連想配列配列

連想配列を別の新しい変数に代入して操作したら元の連想配列が操作された

作業の中で連想配列を別の新しい変数に入れる必要があって、単純に初期化と同時にやってみると問題が起きた。

配列・連想配列の代入は参照渡しらしい

当初問題が起きたコードがこれ
[javascript] //最初の配列 var array_1 = { 'yasai':{'imo':1, 'nagaimo':2, 'imoimo':99}, 'niku':4, 'susi':0}; var array_2 = {}; //代入 array_2 = array_1;

//操作 array_2['yasai']['imo'] = 99;

//99が表示される console.log(array_2['yasai']['imo']);

// 1 ではなくて、99が表示される?!!?! console.log(array_1['yasai']['imo']); [/javascript] ちなみにこれも同じ事 [javascript] //最初の配列 var array_1 = { 'yasai':{'imo':1, 'nagaimo':2, 'imoimo':99}, 'niku':4, 'susi':0}; var array_2 = {};

//代入 array_2['yasai'] = array_1['yasai']; array_2['niku'] = array_1['niku']; array_2['susi'] = array_1['susi'];

//99が表示される console.log(array_2['yasai']['imo']);

// 1 ではなくて、99が表示される?!!?! console.log(array_1['yasai']['imo']); [/javascript]

この事からどうやらjavascriptでは連想配列を別の要素に代入すると参照渡しになるらしい。

参照渡しとは

参照渡しとはメモリのさしてる場所を代入するので、渡された側にあるのは元データの保存されてるメモリの場所があるだけ。
つまりその場所にたいして操作をしてしまうので元が変更されてしまう。
説明してて分かりづらいのでもう少し簡単に説明すると、 [javascript] var array_1 = {'imo':0, 'niku':1}; var array_2 = {}; var array_3 = {};

//参照渡し //これで array_2,array_3 はarray_1を"参照"しているだけ。 //参照しているだけなので、要素自体を保持してない。シンボリックリンクみたいなイメージ array_2 = array_1; array_3 = array_3;

//参照されているarray_1に要素を追加 array_1['susi'] = 99;

//参照しているので当然 array_2, array_3も影響を受ける //99が表示される console.log(array_2['susi']); console.log(array_3['susi']);

//同じくarray_1以外に操作を加えると、array_1に直接そうさするのと同義 array_3['mizu'] = 100; //100が表示される console.log(array_1['mizu']); console.log(array_2['mizu']); [/javascript] こんな感じになる。
ようは、参照しているだけなのでその変数自体には何も値を保持してない。
なので、その変数に操作を加える事は参照してる元に操作を加える事になる。
こう考えると、シンボリックリンクみたいなイメージが一番近いかも。

ちなみに配列も同じく参照渡しになる。
[javascript] var array_1 = ['imo','susi','mizu']; var array_2 = ; //代入してみる array_2 = array_1; //要素を追加してみると... array_2.push('niku'); //array_1にも追加されている... console.log(array_1[3]); [/javascript]

では、純粋に複製したい時はどうすれば良いのか。

$.extend() をつかう

jQueryライブラリを使用しているなら extend を使用する事で一発で出来る。
[javascript] var array_1 = { 'yasai':{'imo':1, 'nagaimo':2, 'imoimo':99}, 'niku':4, 'susi':0}; var array_2 = $.extend(true, {}, array_1);

//操作しても array_2['mizu'] = 99; //大元には影響しない //undifind console.log(array_1['mizu']); [/javascript]

ただの配列なら [javascript] var array_1 = ['imo','susi','mizu']; var array_2 = $.extend(true, , array_1); [/javascript] このように一行で解決するのでjQueryが使えるなら簡単。

ループを使って要素を一つずつ抜き出す

jQueryが使用できないなら要素を一つずつ抜き出すしかない。
どうやら、純粋に要素が文字列や数値なら参照渡しではなく普通の代入(複製)になるようなので配列や連想配列を、ループを使って要素一つ一つを代入していくしか無い。よって、コピーしたい配列・連想配列によって処理が異なるので注意。
多次元ならその分だけループを追加しなければならないのでちょっと大変。 [javascript] //一次元の連想配列・配列の場合 var array_1 = { 'yasai':0, 'niku':4, 'susi':0}; var array_2 = {} for(var key in array_1){ array_2[key] = array_1[key]; }

//新しく代入しても array_2['mizu'] = 99; //問題無し //undifind console.log(array_1['mizu']); [/javascript]

多次元な配列・連想配列ならばこの最初のループの中でさらにまた要素を判別してループさせる必要があるので注意が必要。

終わりに

言語によってここら辺の動きが違うので注意が必要かな。 phpとperlからjavascriptさわったからついね...

2015-06-19

jsonpとjsonを扱う時のエラー確認

Ajax・jQuery Ajax Javascript jQuery json jsonp 備忘録非同期通信

jsonpとjsonでやる非同期通信

GoogleMAPとかでも使用されている技術で、ようは自動的にデータをよみだしてわざわざページの移動を挟まなくても良いようにする技術。これが非常に今のフロントサイドで良く使われていると思う(偏見です)。かくいう私も使う事になったので今回はつまづいたところを。

非同期通信について　

ブラウザ上に動きを見せる事なく、こっそりと通信をおこなう技術の事。例えば天下のGoogleMAPで使用されており、マップをスクロールやズームで動かすとページを移動とかせずにヌルヌルと動かしていると思うがまさにそれこそが非同期通信である。特定の位置までくるとか、時間経過とかイベントを設定して非同期通信で必要なデータを取得しておく事でまるでロードの時間を感じさせないようにするのが主な使用法だと思う。

json と jsonp

この二つの違いは文字が一文字違うとかでは無くて別物です。 jsonは同じドメイン内でのデータのやり取りに使用するデータの形式？で jsonpは違うドメイン同士でのデータのやり取りに使用するデータの形式？ というのが今のところの私の解釈。イメージしづらいと思うので例を出すと、 この私のサイトであるhttp://39mamon.comのドメインの中にあるAPIと同じドメインの中にあるフィアルでやり取りする場合はjsonで http://39mamon.comのドメインの中にあるファイルとTwitterAPIとやり取りする場合はjsonpになる。

すこし簡単に説明するなら同じサーバー内でおこなわれるやり取りならjsonで、違うサーバー同士でおこなわれるやり取りならjsonpになる。

APIとは

色々定義があるので私の現在の解釈的にはそのurl(API)にアクセスする事で、何らかの処理をしたりして何かのデータのみを返り値として渡してくるプログラムの事だと思ってる。代表例というか、twitterAPIとか。

Ajaxとは

JQueryのライブラリにある非同期通信用の関数群？の事。 jsonを扱う時には必ずお世話になるし、とても便利で分かりやすい。 Ajaxを使う事で、apiのurlと数カ所設定するだけでデータをとって来れる優れもの。

使い方

ここで紹介するもの以外にも指定できる要素はあるので、それについては追々。とりあえず公式の日本語訳リファレンスを置いておく。 http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/

呼び出したいAPIやjsonなのかjsonpなのかによってurlや所々変化するのでそこは適宜変更する事。

[javascript] var json_data = {}; //APIに送りたいデータ。連想配列で作って、json形式に変換してから渡そう $.ajax({ type : 'get', //getかpostで送信出来る url : url, //対象APIのurlやパス。パスなら相対でも絶対でも可能。urlでならurlパラメータを付けてやる事も出来る data : JSON.stringify(jsondata), //先頭らへんで作った、送信したいデータが連想配列なのでjson形式に変換してやる contentType: 'application/json', //APIがjsonなのかjsonpのどちらかを指定する dataType : 'json', //APIがjsonなのかjsonpのどちらかを指定する //jsonpCallback: '', //jsonpの時のみ指定する。だが不要な場合もある。必要な場合はAPI側で指定されているコールバック関数名を記述する scriptCharset: 'utf-8', //文字コードの指定。大抵utf-8で安定 success : function(data) { //APIとの通信に成功してデーターが取得できた場合に実行される return; }, error : function(XMLHttpRequest, textStatus, errorThrown) { //APIとの通信に失敗した時に実行される。 alert("XMLHttpRequest : " + XMLHttpRequest.status + "\n" + "textStatus : " + textStatus + "\n" + "errorThrown : " + errorThrown.message); //この様な記述をする事で、APIとの通信に失敗した時にエラーレポートを表示してくれる。 } }); [/javascript]

type

単純にgetかpostかを指定する。送信するパラメータが見られたく無いときはpostを指定しよう。またgetの場合は url に直接urlパラメータを記述して、後述の data の指定を省略する事も出来る。

url

こちらも単純にAPIや非同期通信をおこないたいurlを指定する。また、urlパラメータを指定できそちらで引数を渡すことも可能。

data

APIに引数として渡したいデータを指定する。注意点として、json形式のデータではないと動作しないのでjavascript内でデータを生成した場合には必ずjsonに変換する処理を挟んで渡す事。

contentType

APIのtypeがjsonなのかjsonpのどちらなのか指定する。ココも正しく登録しないと動作しないので注意する事。

dataType

APIから帰ってくるデータ達がどちらの形式なのか指定する。 jsonならjsonだし、jsonpならjsonpなのでキチンと指定する事。さもないと正常に動作しない。

jsonpCallback

jsonpのみ出来る。 jsonpでは通常コールバック関数を利用して結果をクライアント(実行したファイル)に値を返してくるので、通常のjsonで不要。また、jsonpでコールバック関数を指定しなくても良い物もあるので、使用するapiからコールバック関数名を調べて記述する。

scriptCharset

文字コードの設定。大抵はutf-8でおっけい。

success

APIとの通信に成功した時に実行される処理達。ここは無名関数なので注意。さらに、引数でdataを指定してるけど、これは取得してきたデータの事を指しているのでこの関数内で利用して目的の処理を記述する。また、このdataはjsonのオブジェクトになっているので形式をjavascript基準の配列に直して操作する方が良いと思う。

error

APIとの通信に失敗した時に実行される処理達。ここも success と同じく無名関数。さらに引数に様々な値を渡す事でエラーの原因を調査したりなんて事も出来る。

エラーの原因を調べる

errorの中で特定の引数を使う事で、エラーの原因を調べる事が出来る。というか、この記事でこれが書きたかった。

[javascript] function(XMLHttpRequest, textStatus, errorThrown) { alert("XMLHttpRequest : " + XMLHttpRequest.status + "\n" + "textStatus : " + textStatus + "\n" + "errorThrown : " + errorThrown.message); } [/javascript]

さっきの例文のerror部分を切り抜いただけだが、この関数をerror時に実行すると、 httpのステータス、エラーの説明が取得できる。 Ajaxはそのまま使った場合非同期通信をおこなうので通常エラーが発生して通信に失敗しても何も言わないし見えないので、調べるにはこのように自分でキチンと処理を記述する必要がある。

おわりに

jsonとjsonpはややこしくて良くつまづいたのでまた機会があれば記事にしておこうと書いてて思った。