Tinder風のUIを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を使ってブラウザで上下左右のスワイプを検知する
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でタブのアイコンを表示する
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で目線で操作する機能を実装する
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)
CLIのインストール
npm install -g vue-cli
プロジェクトの作成
vue init nuxt-community/starter-template hellonuxt
cd hellonuxt npm install
サーバーの起動
npm run dev
こんな画面が表示されればOK
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