2020-02-22

JavaScriptでオブジェクトのvalueでソートする方法

めっちゃ久々になりました...

お仕事落ち着いてきたので再開しようと思います笑

今回は「単純に見えてやってみると意外と難しい!」と友人から質問を受けたオブジェクトのソートです。

今回のソート条件としては単純で、下記のようなオブジェクトのvalueでソートをかけたいとのこと。

let obj = {
  kinmu_0: 500, 
  zangyo_0: 400, 
  zangyo_1: 300,
  shinyaZangyo_0: 200,
  endTIme: 100
}

「そんな難しいか...？」と思ったのですが、PHPとかJavaとかと違ってJavaScriptの配列、もといオブジェクトって意外と曖昧かつ複雑だったりするんですよね〜

てな訳でやってみたのがこちらです。

let obj = {
  kinmu_0: 500, 
  zangyo_0: 400, 
  zangyo_1: 300,
  shinyaZangyo_0: 200,
  endTIme: 100
}

let array = [];

for (let [key, value] of Object.entries(obj)) {
  array.push({[key]: value});  // 躓きポイント
}

function compare(a, b) {
  const numA = Object.values(a);
  const numB = Object.values(b);
  
  let comparison = 0;
  if (numA > numB) {
    comparison = 1;
  } else if (numA < numB) {
    comparison = -1;
  }
  return comparison;
}


array.sort(compare);

流れとしては一旦配列に変換してsort関数を適用する、といった流れになっています。

おそらく友人が今回の質問で躓いていたのはおそらくオブジェクト→配列への変換だったのではないかなーと思ってます。

躓きポイントとしてコメントアウトしている部分、実は最初私はこのように書いていたんです。

  array.push({key: value});

これだと、変数名を解決してくれずただkeyというキーが設定されてしまいます。ただ、変数を「[]」で囲んであげれば変数を解決してくれます。

これで配列への変換は完了しましたね。

あとはソートなのですが、配列にしてしまえばあとは簡単です。

普通の配列のソートと変わらずソートの関数を作ってコールバックでオブジェクトのvalueを比較してあげれば終了です。

なんだかんだ30分くらいかかってしまったのでもっとオブジェクトに対する理解を深めなければなーと感じました

2019-05-10

LaravelでFactoryとSeederを使ってダミーデータを追加する簡単な例

タイトルの通りです。

備忘録的に簡単なFactoryとSeederを使用したダミーデータの追加例を残しておきます。

FactoryとSeederとは

Factoryは追加するダミーデータの型みたいなものを定義するところです。
その名の通り、人形焼の鋳型を生産する工場的なものだと思っておきましょう。

Seederは実際にデータベースにダミーデータを追加するところです。
Factoryを使わなくてもSeederだけでダミーデータを追加することもできるみたいですね。

FactoryとSeederを使ったダミーデータ追加の簡単な例

全体的な流れ

Factoryでデータモデルの定義

Seederで実際にデータの追加処理を定義
Seederを実行

手順

1. SeederとFactoryのファイルを作る。

php artisan make:seeder OrdersTableSeeder
php artisan make:factory OrdersFatctory --model=Orders

Factoryを作る際は上記のようにmodelを指定することをおすすめします。

2. Factoryでデータのモデルを作る。

$factory->define(Orders::class, function (Faker $faker) {
    $drink = ['ビール','ハイボール','チューハイ'];

    return [
        'user_id' => $faker->numberBetween(3, 4),
        'drink' => $faker->randomElement($drink)
    ];
});

defineの第一引数がしっかり先頭が大文字になるモデル名の指定になっているか確認。
ちゃんとした指定になっていないと「Unable to locate factory with name [default]」のエラーが出る。
$fakerはダミーデータ作成をするために使うライブラリ。別に使わないでベタ書きでもいい。
$fakerで使えるデータ一覧↓
qiita.com

3. Seederでデータの作成

 public function run()
    {
        factory(App\Orders::class, 50)->create();
    }

factoryメソッドの第一引数にモデルクラス、第二引数にデータの数を入れるだけ。

4. DatabaseSeeder.phpにSeederの登録

public function run()
    {
         $this->call(OrdersTableSeeder::class);
    }

artisanのdb::seedコマンドで実行されるのがこのファイルのよう。
「--class=[seeder名]」で実行seederを指定できた時代もあったが現在はできなさそう。

5. Seederを実行

php artisan db::seed

簡単な例ではありましたが、なんとなく流れがわかってもらえたら嬉しいです。

2019-04-19

【CodeIgniter】dockerで構築したらform_openのurlがおかしくなった件

dockerでcodeigniterの環境を作っていて、公式チュートリアルをやっていたところform_openというメソッドを使うとURLがおかしくなってしまう、という現象に出くわしました。

form_openというのは、formを生成してくれるCodeIgniter独自の関数です。

どのようにおかしくなったかというと、formのactionのURLが想定していたURLと違ったんですね。

というのも、私が立ち上げていたapacheのIPは「localhost:1111」。

つまり、actionのURLも「localhost:1111〜」となるのが望ましいです。

しかし、action属性を見てみると次のようなURLになっていました。

f:id:ma1129nm:20190419163021p:plain

このform_openという関数はconfig.phpのbase_urlを基準にURLを決定するらしく、確かにconfig.phpを見てみると何も記載してありませんでした。

$config['base_url'] = '';

そのため、下記のようにbase_urlを指定してあげたところ問題なくURLが指定したURLに置き換わりました。

$config['base_url'] = 'http://localhost:1111';

さて、「192.168.128.3ってなんぞ？」と思っていたのですがなんだか見覚えが…

とりあえず、apacheのコンテナに入って「hostname -i」でIPを調べたらまさにこの番号でした。

つまり、何も指定しないとdockerのコンテナのIPがbase_urlになってしまうということなんですね。

初めてCodeigniter触りましたが、今のところLaravelやCakePHPよりも自由度が高そうな感触。

とりあえず何か作ってみようかな…

2019-04-02

TweenMaxとScrollMagicを関数化してみたお話

連投です（笑）

今回はいたってシンプルなお話で、TweenMaxとScrollMagicを関数化したというお話です。

See the Pen
scrollMagicTweenFunction by nakajima masahiro (@nakajima333ta)
on CodePen.

なんとなく、TweenMaxとScrollMagicを使っている中で一々同じコード書くのめんどくさいなあ、と思ったことがきっかけで関数化に至りました。

あまりやっている方がいなかったので出来ないのか思っていたのですが関数化だけなら問題ありませんでしたね。

2019-04-01

【ScrollMagic】onメソッドとは？簡単な例を紹介します

しばらく暇らしいので連投します（笑）

前回に引き続き、webページのアニメーションをさせる際によく使うライブラリであるScrollMagicについてお話していこうと思います。

ScrollMagicはその名の通り、スクロールをして指定した要素に到達した際にイベントやらアニメーションを発火させるやらができるライブラリです。

簡単な例は以下の通り。

See the Pen
scrollMagicPinSample by nakajima masahiro (@nakajima333ta)
on CodePen.

こちらは、指定した要素に到達したらその要素を指定した時間（duration）分ピン留するという処理となっています。

このように、ScrollMagicの組み込みのメソッドで色々できる場合もありますし、組み込みのメソッドではないとできない処理などもあります。

例えば、上記の例のようなピン留やGSAPと連携したsetTweenメソッドなどがその例でしょう。

ただ、単にクラスを追加したい場合などもあるわけですよね。

そんな時によく使うのが「on」メソッドです！

onメソッドは、簡単に言ってしまえばコールバックを使うことができるメソッドです。

まず、例を見てみましょう。

See the Pen
scrollMagicPinSample by nakajima masahiro (@nakajima333ta)
on CodePen.

こちらは、「trigger」クラスに到達したら「changeColor」クラスを付与して、離れたらクラスを取り除くという処理になっています。

このように、onメソッドのイベントリスナとしてenterやleaveを利用することができ、そのコールバックとして第二引数の関数を実行することができるわけです。

tweenアニメーションのセットなどはsetTweenメソッドで組み込むしかありませんが、簡単なクラスの付与はonメソッドを使った方がいいでしょう。

ちなみに、使えるイベントハンドラはこんな感じ。

change
update
progress
start
end
enter
leave

それぞれの使い所は様々ですが、個人的にはenter、leave、center、progressくらいがよく使うイメージです。

今回の案件では、全てTweenアニメーションで実装したわけではなく一部CSSアニメーションを使った部分もあり、アニメーションをクラスで管理していたのでonメソッドはかなり重宝しました！

ScrollMagicは一見ややこしい部分もありますがなれたらかなり便利なライブラリなので、これからも積極的に使っていきたいですね。

2019-04-01

【GSAP】TweenMaxのcycleの使い方とは？

お久しぶりの更新です…

またもや忙殺されていました...

最近はシステム案件の仕事をすることも多いのですが、今回は久しぶりにwebページのコーディング案件に取り組むことに。

そして今回の案件は結構アニメーションが多かったんですよね。

以前の記事でTweenMaxとScrollMagicを連携させる、という内容を書いたのですが結構さわりの部分だけお話して終わってしまった感がありました...

以前の記事☟
hubarifront.hatenablog.com

今回取り組んだ案件でこんな使い方あったんか！的なことを見つけたこともあったので、TweenMaxのcycleの使い方についてまとめてみようと思います！

TweenMaxのcycleとは

cycleとは、TweenMaxをはじめとするGSAPの各種アニメーションタイプで利用することのできるプロパティの一つ。

今回の案件では以前の案件で使っていたアニメーション設定などを使いまわしていたのですが、今回は以前と違って少し凝ったアニメーションをかけてほしいという要望が...

その要望というのが、「複数の要素に対するアニメーションをそれぞれ食い気味でかけてほしい」との要望でした。

TweenMaxで複数の要素にアニメーションをかけるメソッドとして、「stagger系」のメソッドがありますよね。

例えば、staggerFromやstaggerToなどがそうです。

例を出すとこのような感じでアニメーションをかけてくれます。

See the Pen
tweenSimple by nakajima masahiro (@nakajima333ta)
on CodePen.

複数の要素にアニメーションをかけるとき、上記のように書くことができるのですが、見て分かるように前のアニメーションが終わってから次のアニメーションがスタートしていますよね。

ただ、このアニメーションをそれぞれ食い気味のタイミングでかけてほしいという要望...

さて、どうしたものかと考えたのがまずfor文でそれぞれインデックス番号に応じてマイナスのdelayをかけるという方法。

サンプルを載せるとこのような感じですね。

See the Pen
tweenSimple by nakajima masahiro (@nakajima333ta)
on CodePen.

しかし、なんかもっといい方法ありそうだよな〜と思っていた矢先、どうやら「cycle」というメソッドがあるみたい！

ということで、cycleを使ったものに書き換えてみると...

See the Pen
tweenCycle by nakajima masahiro (@nakajima333ta)
on CodePen.

こんな感じになりました！

いやーかなりスッキリしたというか早くこの方法に出会いたかったですね...

さて、説明をするとcycleというのはstagger系でのみ利用することができるアニメーションプロパティです。

最大の特徴はこのcycleで使うことができるプロパティ「index」にあるでしょう。

実はcycleでは指定された要素（上記例では.box）を配列のように管理し、インデックス番号をアニメーションに利用することができます。

そして、このcycleの値としてdelayを設定する際に、インデックス番号を負の数で掛け算してやると、マイナスディレイが生まれるわけです。

関数でdelayの値を返しているのもポイントですね。

まあ考え方としてはfor文で回すのと変わらないのですが、せっかくcycleというプロパティがあるので使ったほうがお得ですよね（笑）

要素を時間差でかけるのは普通のdelayでできますが、マイナスの時間差をかけるのはcycleを使わないと実現できなそう。

割と調べるのに時間かかってしまったので、少しでも参考になれば嬉しいです^^

2019-02-26

Android標準ブラウザをエミュレータでデバッグする（with AndroidStudio）

今回、Android 4.4.2の標準ブラウザでレイアウト崩れがあったんですよね笑

というこで、デバッグをしなければということになったのですが、Chromeなら

1.「devtool」のオプションである「more tools」->「remote devices」

2. chrome inspect にアクセス

で、実機でのデバッグはできますよね。

ただ、標準ブラウザの場合はデバッグすることができません…

そのため、Android標準ブラウザをデバッグする場合はAndroid Studioが必要になります。

AndroidStudioは、本来Androidアプリ用のIDEですが、利用するのはアプリのエミュレート機能のみ。

AndroidStudioで標準ブラウザのデバッグをする手順は下記の通り。

1.　まず、適当にプロジェクトを作成。
2.　下記アイコンからエミュレートするデバイスを作る。

f:id:ma1129nm:20190226180306p:plain

3. create virtual device をクリック

f:id:ma1129nm:20190226180311p:plain

4. エミュレートしたいデバイス、OSバージョンを選択

f:id:ma1129nm:20190226180315p:plain

5. finishをクリックするとエミュレートするデバイスが完成し、下記の状態に。再生ボタンをクリックするとエミュレートが開始される。

f:id:ma1129nm:20190226180330p:plain

6.　エミュレートされたら、下のようなデバイスが出てくる。

f:id:ma1129nm:20190226180338p:plain

この状態でブラウザを立ち上げ、デバッグしたいURLを入れればページが表示される。
デバッグを有効にするには、エミュレートされたデバイスの「設定」からUSBデバッグをONにする必要がある。

f:id:ma1129nm:20190226180342p:plain

USBデバッグがONになったら、ブラウザで「chrome://inspect/#devices」を開きます。

そうすると、Remote Deviceの所に「Android SDK built for x86」と出てくるので、inspectを押せばChromeのデバッグと同じようにデバッグをすることができます。

ただ、Android4.4.2以前のインスペクタでは要素を選択できないので実質デバッグ不可能な様子…(出来た方いたら教えてほしい)

逆にそれ以降のバージョン、またChromeアプリで開いたブラウザの場合はふつうに要素の検証ができる、もしくは虫眼鏡マークを押してからエミュレーター上で要素をダブルクリックすることで検証することができます。

4.3以下はもうGoogleのサポートが切れている、ということで逃げられますけど4.4だとまだサポート対象なのがキツイところ…

標準ブラウザなど滅びればいいのに！！！！！

ふんばりフロントエンジニアのブログ

新米フロントエンジニアの備忘録です。ふんばり温泉タオル欲しい...