1日1%成長するブログ

毎日成長するために仕事/プライベートで得た学びをアウトプットするブログです

Tinder風のUIをJavaScriptで実装する

JavaScript アニメーション 実装

https://codepen.io/developingidea/pen/meAIncodepen.io

こちらのコードを参考に学んでみた。

$(".buddy").on("swiperight",function(){
      $(this).addClass('rotate-left').delay(700).fadeOut(1);
      $('.buddy').find('.status').remove();

      $(this).append('<div class="status like">Like!</div>');      
      if ( $(this).is(':last-child') ) {
        $('.buddy:nth-child(1)').removeClass ('rotate-left rotate-right').fadeIn(300);
       } else {
          $(this).next().removeClass('rotate-left rotate-right').fadeIn(400);
       }
    });  
.rotate-left
  transform: rotate(30deg) scale(0.8);
  transition: 1s;
  margin-left: 400px;
  cursor: e-resize;
  opacity: 0;
  z-index: 10;

「右に400px,30度傾けて80%の大きさに変更する」を1秒かけて行うという処理

 transform: rotate(30deg) scale(0.8);
 transition: 1s;
 margin-left: 400px;
  • transition: 1sがないと一瞬で動いてしまう

やっていること

  • rotate-leftで要素を傾ける
  • delayとfadeOutで少し遅らせてフェードアウト(hide)する
  • スワイプイベントはhammer.jsを使っている

思ったこと

Tinderのように左右のスワイプはこれで実現できる。 ただこれだと毎回同じ見た目のスワイプになってしまうので、 Yentaのようにドラッグしてどこかに飛ばすということは出来ないなぁ

hammer.jsを使ってブラウザで上下左右のスワイプを検知する

JavaScript アニメーション 実装

hammerjs.github.io

var element = document.getElementById('swipeTarget');
var hammertime = new Hammer(element);

hammertime.get('swipe').set({
  direction: Hammer.DIRECTION_ALL,
  threshold: 1,
  velocity:0.1
});
hammertime.on('swipeleft',function() {
  moveNext('left');
});
hammertime.on('swiperight',function() {
  moveNext('right');
});
hammertime.on('swipeup',function() {
  moveNext('top');
});
hammertime.on('swipedown',function() {
  moveNext('bottom');
});

こんな感じのコードになった。

注意点

  • $()だと動かなかった。document.getElementByIdを使う必要がある
  • direction: Hammer.DIRECTION_ALLの指定が無いと上下の検知がうまくできなかった

react-native-elementでタブのアイコンを表示する

ReactNative 実装 
const TabBarIcon = (props) => {
  return (
    <Icon
      name={props.name}
      type="ionicon"
      color={props.focused ? hoge_color : fuga_color}
    />
  );
};
  • フォントではなく画像を使いたい場合はImageを返す
<Scene key="home" initial component={HomeScreen} tabBarLabel='ホーム', icon={({ focused }) => <TabBarIcon name="md-home" focused={focused} />} />

https://infinitered.github.io/ionicons-version-3-search/

  • アイコンのリストは上から表示する

ReactVRで目線で操作する機能を実装する

React ReactVR 
npm i --save react-vr-gaze-button
import GazeButton from 'react-vr-gaze-button';

render() {
  const image = this.renderImage();
  return (
    <GazeButton onClick={() => this.props.onGaze()} duration={1500}>
      {time => (
        image
      )}
    </GazeButton>
  )
}

これで1.5秒注視したら何かする処理が作れる

nuxtで始めるシングルページアプリケーション (その1: HelloWorld)

Vue.js nuxt

CLIのインストール

npm install -g vue-cli

プロジェクトの作成

vue init nuxt-community/starter-template hellonuxt
cd hellonuxt
 npm install

サーバーの起動

npm run dev

こんな画面が表示されればOK f:id:masaru_furuya:20180123173947p:plain

Hello Worldを表示してみる

  • pages以下にページを書いていくので pages/index.vue を開いてHello Worldにテキストを変更してみる
  <section class="container">
    <div>
      <app-logo/>
      <h1 class="title">
        Hello World!
      </h1>
      <h2 class="subtitle">
        Nuxt.js project
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green">Documentation</a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey">GitHub</a>
      </div>
    </div>
  </section>

pages以下の変更を監視しているので、すぐに見た目に反映される。

react-native-router-fluxでタブを実装する 

  <Router>
    <Scene key="root">
      <Tabs key="mainTab" swipeEnabled={ true } animationEnabled={ false }>
        <Scene key="home" initial component={MainScreen} tabBarLabel='ホーム' />
        <Scene key="bookmark" component={bookmarkScreen} tabBarLabel='ブックマーク' />
      </Tabs>
      <Scene key="article" component={ArticleScreen} />
    </Scene>
  </Router>

こんな感じでうまく行った。スワイプで横遷移もできる。

react-native-router-flux v4 の実装7パターンをコードとGIFで眺める - Qiita

この記事は参考になった。

Laravelでキュー/ジョブの環境を用意する (DB)

前提知識

  • ジョブ: 何らかの処理

  • キュー: ジョブを並ばせる列

    • 保存先をドライバーと呼ぶ
    • DB, SQS, Redisと選べる

  • ディスパッチ: ジョブをキューに送ること

  • ワーカー: キューの中のジョブに対する処理するプロセス

キューを用意する

php artisan queue:table
php artisan migrate

今回はローカルのデータベースをキューの代わりに使う

ジョブを定義する

php artisan make:job SendReminderEmail
<?php

namespace App\Jobs;

use Illuminate\Bus\Queueable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;

class SendReminderEmail implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

    /**
     * Create a new job instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Execute the job.
     *
     * @return void
     */
    public function handle()
    {
        //
    }
}
Route::get('/', 'PostsController@index', function() {
  $log = (new SendReminderEmail)->delay(10);
  dispatch($log);
  return 'ユーザー登録完了を通知するメールを送信しました。';
});
  • 10秒後にSendReminderEmailインスタンスを実行するというジョブをキューに登録する

ワーカーの起動

php artisan queue:work