1日1%成長するブログ

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

2018-01-24から1日間の記事一覧

Railsでコメント機能を作る

ルーティングの追加 resources :diaries do resources :comments, only: [:create] end コントローラー側 @diaryComment = DiaryComment.new(diary_comment_params) @diaryComment.user_id = User.first.id respond_to do |format| if @diaryComment.save fo…

Tinder風のUIをJavaScriptで実装する

codepen.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') ) { …

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

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…

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 }) => </scene></icon>

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秒注視したら何かする処理が作れる