1日1%成長するブログ

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

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

Railsでページ毎にJSとCSSファイルを読み込む

- content_for :css do = stylesheet_link_tag 'posts/show' - content_for :js do = javascript_include_tag 'posts/show' Rails.application.config.assets.precompile += %w( posts/* ) ページ毎にcontent_forでレイアウトファイルに読み込ませる assets.…

RailsにおけるCSS構成のプラクティス

body class="#{controller.controller_name}-#{controller.action_name}" コントローラー名とアクション名 .articles { &-show { .inputContainer { margin: 20px } } &-edit { .inputContainer { margin: 10px; } } } @import "user/articles" ユーザー画面…

Rails5でローカルではsqlite3で動かしてHerokuではPostgresを使う手順

group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] # Adds support for Capybara system testing and selenium driver gem 'capybara…

package.jsonのdevDependenciesとdependenciesの使い分け

devDependencies ライブラリをdev(開発)する時に必要なライブラリを書く 開発時のみに必要で実行時には入らないもの - テストツール - ビルドツール - タスクランナー等 dependenciesに含まれていても動作はする。ただバンドルファイルの容量が増えたり用途…

VSCodeにES6+ReactのESLint設定を行う

1. eslintをプロジェクトのローカルにインストール yarn add --dev eslint 手軽さからグローバルにインストールする例もありますが、 チームで開発する場合は以下の理由からローカルにインストールした方がいいです プロジェクト毎に別々のバージョンのeslin…

Rubyの&とRailsの#tryの違い

Rubyの&. ruby2.3から追加された新しい演算子 Safe Navigation Operator(&.) 10&.to_s # => "10" nil&.to_s # nil レシーバがnilでない場合にメソッドを呼び出す レシーバがnilの場合はnilを返す Railsの#try ActiveSupportで提供されるメソッド 10.try(:to_…

HerokuにRails5のアプリをデプロイする

Herokuにログインする $ heroku login Postgresを使ったアプリを作成 $ rails new myapp --database=postgresql 動作確認用にコントローラーを作っておく $ rails generate controller welcome <h2>Hello World</h2> <p> The time is now: <%= Time.now %> </p> app/views/we…

CarrierwaveでUUIDを使ったファイル名にする方法

UUIDとは Universally (普遍的に) Unique (一意な) IDentifier (識別子) の略 誰でも作れるが世界中で重複しないようになっているID RFC4122という共通の規格が決められている https://tools.ietf.org/html/rfc4122 UUIDの種類 UUIDの作成方法には5種類存在…

Rails5でajaxを使っていいね機能を実装する

ルーティングを用意する resources :diaries do resources :diary_comments, only: [:create] resources :diary_likes, only: [:create, :destroy] end diaryが重複するので後でスッキリさせる モデルを用意する class Diary < ApplicationRecord belongs_to…

laravelでURLパラメータを取得する

Route::get('user/{id}', 'UserController@show'); public function show(Request $request, $id) { こんな感じで取得できる

react-nativeでbox-shadowをつける

IOSの場合 shadowColor: #ccc, shadowOffset: { width: 0, height: 2, }, shadowRadius: 0, shadowOpacity: 1, shadowOffset width: 横への影 height: 縦の影 shadowOpacity 影の透明度 0が透明、1は透明なし これでこんな感じで下に影をつけられる Android…

yenta風の特定の位置までドラッグしたらフェードアウトする処理を実装する

$('.draggable').draggable({ drag: function() { var offset = $(this).offset(); var xPos = offset.left; var yPos = offset.top; if (xPos >= 210) { $('.xxx).addClass('fadeout-right').delay(700).fadeOut(1); } if (xPos <= -210) { $('.xxx).addCla…

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で実装する

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">L</div>…

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

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以下にページを書い…

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></scene></router>

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

前提知識 ジョブ: 何らかの処理 キュー: ジョブを並ばせる列 保存先をドライバーと呼ぶ DB, SQS, Redisと選べる ディスパッチ: ジョブをキューに送ること ワーカー: キューの中のジョブに対する処理するプロセス キューを用意する php artisan queue:table p…

laravelでHello worldする

composerのインストール php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" php -r "if (hash_file('SHA384', 'composer-setup.php') === '544e09ee996cdf60ece3804abc52599c22b1f40f4323403c44d44fdfdd586475ca9813a858088ffbc1f…

laravelで管理画面を作る

インストール composer require encore/laravel-admin php artisan vendor:publish --provider="Encore\Admin\AdminServiceProvider" php artisan admin:install 最後のコマンドで必要なコントローラー、設定ファイル、データベースを用意してくれる URLの名…

カスタマーサポートツールの調査メモ

サポートツール www.supporttimes.com Zendeskは問い合わせをステータスごとに管理できる。毎日大量のメールが送られてくるサービスならオススメ メールワイズはZendeskと似てるかも。メールの共有サービス Intercomは顧客と直接チャットでサポート。スター…

react-native-elementでリストを作る

react-native-elementを使ってリストを使おうとすると、 unrecognized font family 'Material Icons`的なエラーがでる時があります。 実はreact-native-vector-iconsはXcodeやAndroid Studioでfont-familyを設定してあげる必要があります。 twins-tech.haten…

railsで多: 多の関連を作る

モデルを作る bundle exec rails g model user bundle exec rails g model group bundle exec rails g model group_user テーブルを作る 先ほど作ったマイグレーションファイルを編集する bundle exec rake db:migrate モデル間の関連を作る class User < Ap…

Railsのフォームで配列とハッシュを併用する

ハッシュだけ、配列だけの書き方は色んな所で書かれているが、 併用した書き方がなかなか見つからず困った。 古いが以下の記事が一通りまとまっていてわかりやすかった。 Rails のフォームで配列形式のデータを扱う方法 - WebOS Goodies ハッシュのみ HTML <input type="text name="user[name]" /> …

react-native-elementをインストールする

yarn add react-native-vector-icons yarn add react-native-elements react-native-vector-iconsが必ず必要 import { FormLabel, FormInput } from 'react-native-elements' <FormInput onChangeText={(text) => changeInputText(text) } /> 入力フォームはこんな感じで使う</forminput>

Railsのフォームで配列を扱う方法

fields_forとか便利メソッドを使って根本が理解できていないまま、 コードを書くのは応用が効かないので、シンプルに書く。 Webシステムではクライアントからサーバーにリクエストを投げるのにフォームを使う。 nameに指定したキーで値を取り出す。 同じname…

ReactVRでテキストフォームぽいものを作る

イメージ ソースコード <View style={{ flex: 1, flexDirection: 'column', width: 2, alignItems: 'stretch', transform: [{translate: [-1, 1, -5]}], }}> <View style={{ margin: 0.1, height: 0.1}}> <Text style={{fontSize: 0.2, textAlign: 'center'}}>Name</Text> </View> <VrButton onClick={() => onClick('name') } > </vrbutton></view>

Rails5でscaffoldを使ってベースを作る

モデルになりそうなものを全部scaffold rails g scaffold posts title content:text マイグレーションを実行 rake db:migarate 各画面にbootstrapなどから取ってきたら部品を設置していく これだけで慣れれば30分くらいでCRUDシステムなら画面用意できそう …