BetterTouchToolとPopClipの紹介（mac）
どうも〜
webアプリ開発中便利だなと思ったツールの紹介です！
と言っても、知り合いの方からオススメされて、いいなと思ったところが正直な話ですが笑
生産性あがること間違いなしなので、導入されていない方は是非検討してください！
※有料アプリになりますので、事前にご了承ください。
今回は2つ紹介します。
BetterTouchToolとPopClipです！
まずはBetterTouchToolから紹介します。
MacBookについているトラックパットの設定を自由自裁に可能にできるアプリです。
何がいいって、Chromeのタブ移動、タブを消す、launcherを出す、デスクトップを表示するなど、お好みの設定ができちゃうんです。
プログラミング勉強中、タブが鬼のように開かれる現象、あると思うのですが、どこのタブにこの情報あったっけ！？って時に、いちいちマウスのカーソルを移動しなくて済みます！
個人的にはストレスフリーです！（今のところ）
使ってくうちに、最適な設定になってくると思うので、楽しみです。
裏技みたいな買い方で360円で使えるので、皆さんも是非！
導入方法や価格を安く導入する方法は下記 URLにまとめていただいた記事があるので、参照してください！
https://tekuten.com/bettertouchtool
↑の公式URLが古いのか、入れなかったので、下記アドレスからDLしてください。
https://folivora.ai/downloads/
続いて、PopClicです！
実際これは、紹介された時よりも価格が爆上がりで、使ってません笑
ですが！明らかに使いやすそうなので、紹介します！
PopClipは
コピペからの検索を最短かするツールです。
※他の使い方ありますが、個人的にはここを使いたかったので、ここだけピックアップ
これまたプログラミング勉強中にですが、知らない単語のいたちごっこになるんですよね。
それでも調べていかなくてはならいので、単語をコピーしては検索バーへペースト。
これが効率が悪いなと思ってました。
PopClipはドラックした段階で、何をしたいか選択肢を表示してくれます。
ドラック→google検索なんて選択もできるので、小さいことですが、一手間減らしてくれます。
使いたかった〜
別の方がまとめた紹介ページです。
当時450円が1600円に化けている…
また使えそうなアプリがあれば紹介します〜
では〜
Bootstrapを部分的に効かせる
どうも〜
いきなりですが、個人アプリ開発中にBootstrapを導入することになりました。
途中からの導入なので、どうしてもCSSが崩れちゃいます。
そんな時にいい方法を残してくれてる方がいました。
特定のdiv要素の中だけBootstrapを適用する - Qiita
自分なり解説したいと思います。
scssを使って解説します。
まず始めに、_bootstrap.scssを作成してください。
その中に下記URLのコードを全てコピペしてください。
https://pgmemo.tokyo/data/filedir/1178_1.css?975
出来上がったら、application.scssへ@importを書くのですが、ここで一工夫。
application.scss
.bootstrap {
//実際クラス名はなんでもいいですが、divに付与する名前となります。
@import "bootstrap";
}
処理の流れとしては、今回だとHTML上にbootstrapクラスが書かれていれば、そこだけBootstrapのCSSが適応されるといった流れです。
最初からBootstrapを導入していればよかったのですが、なかなか融通きかない部分もあるようなので、手こずりました。
Deviseのカラム追加について
どうも〜
個人で作成しているアプリで、Deviseを設けてカラム追加をしたので、やり方を載せておきます。
はじめに
Rubyでログイン認証管理を簡単に実装してくれるgemのDeviseですが、シンプルに実装するとDBに入力できるカラムは、emailとpasswordぐらいです。
ユーザーの名前とか、アイコン画像とか登録したい時ありますよね。
単純にマイグレーションファイルに追加するだけでは、DBへ登録できないので、一工夫必要です！
普段と違うのはこれだけ
(とはいえ、Deviseを使う機会は多いので、逆に普段これをするんだと思いますが笑)
今回は:nicknmaeと:iconimageを追加することにします。
マイグレーションやストロングパラメーターはできてる前提で話してすいません！
application_controller.rb
class ApplicationController < ActionController::Base
before_action :configure_permitted_parameters, if: :devise_controller?
protected
def configure_permitted_parameters
devise_parameter_sanitizer.permit(:sign_up, keys: [:nickname,:iconimage])
end
end
これを追加することで、DBへデータが登録されます。
まぁほぼほぼ備忘録ですが、参考になれば幸いです。
画像登録前のプレビューのやり方 画像比率
どうも〜
画像を登録する必要のある、もしくはできるアプリであれば、登録する画像のプレビューが付き物ですよね。
1作前の個人アプリでもプレビュー機能は作ったのですが、画像によってプレビュー時に縦に伸びたり、横に伸びたりとなってしまってました。
今回解決方法が見つかったので、備忘録ついでにブログに載せて起きます。
その前にまず、プレビューのやり方です。
HTML
= form_with(model: [@image], local: true,class:"image_form") do |f| -# ①
.image_field-new
= f.label :'Icon(Not essential)',class:'new_labelname'
%br/
= image_tag asset_path('初期画像'),class:'icon_image',size:"120x120"
= f.file_field :iconimage, autocomplete: "iconimage",class:'icon_image-form' -# ②
.icon_imagebtn File -# ③
※今回作成しているアプリのやり方をほぼコピーして載せてるので、下記に注意点を載せて起きます。
①withでもforでも大丈夫です。
②display: none;で隠してます。
③②を隠したので、これを加工してJsから②を押すように処理
丸っとコピーだとCSSの記述が足りないのでご注意を！
JavaScript(jQuery)
$(function(){
// 新規登録の画像を選択するファイルボタンを擬似的に押せるように
const realBtn = $('.icon_image-form');
const fakeBtn = $('.icon_imagebtn');
$(fakeBtn).on('mousedown',function(){
$(realBtn).click();
});
//ここから画像のプレビュー
$('.icon_image-form').change(function(e){
//ファイルオブジェクトを取得する
let file = e.target.files[0];
let reader = new FileReader();
//画像でない場合は処理終了
if(file.type.indexOf("image") < 0){
alert("画像ファイルを指定してください。");
return false;
}
//アップロードした画像を設定する
reader.onload = (function(file){
return function(e){
$(".icon_image").attr("src", e.target.result);
$(".icon_image").attr("title", file.name);
};
})(file);
reader.readAsDataURL(file);
});
});
という感じでここまで実装できれば画像は表示されます。
が！
画像の比率によって縦横に画像が伸びちゃいます。
実際carrierwaveでmini_magickとか使って設定すれば保存される画像は比率をコントロールできます。
ちなみにこんな感じになります。（設定が個人アプリ用なのはすいません…）
さて本題の比率のコントロールですが、2種類紹介したいと思います。
先に画像から
.icon_image{
width: 120px;
height: 120px;
object-fit: cover;
}
しっかり元の画像通りの比率で必要範囲だけ表示されてます。
.icon_image{
width: 120px;
height: 120px;
object-fit: contain;
}
こちらは横幅に合わせて表示してくれてます。
みんながみんな正四角形の画像を登録するとは限らないので、個人的にはcoverがいいかなと思いますが、もっと他の方法はあると思います。
プレビュー表示の実装に少しでも手助けになれば幸いです！
フロント作ってると忘れちゃうこと
人それぞれかもしれませんが、基本的にフロントエンドの部分から作って、バックエンドを実装していく手順で作っています。
フロントの作成時間が長すぎて、バックエンドをいざ始めるぞって時に初手のコマンドを忘れてしまう現象に陥ってます…笑
とは言っても、ある程度INDEXをまとめているので、迷子にはならないのですが、いいバランスで作成をできていないのでしょう。
Model作って、Controller作って、ルーティング設定してってわかるんですけど、一回フリーズしますね。
それでも物はできるし、おそらくずっとこんな感じで暗記じゃなく調べながら実装していくんだろうなと思いました。
とりあえず今作っているブログは、やっとトップが終わった〜
【HTML/CSS】Searchバーのアニメーション
ブログを作ってるんですが、検索バーをつけようと思い、少しアニメーションをつけてみました。
CSSでの実装となります。
1.検索バーをクリックするとバー自体の範囲が伸びる
2.placeholderで表示している文字をクリックした時に消す
今後も使いそうなので、備忘録として残しておきます。
クリックでバーの範囲を伸ばす
とっても簡単でした。
HTML
<input class="search" type="text" placeholder="Search">
.search{
width:100px;
}
.search:focus{
width: 120px;
}
これでクリックされた後に横幅が広がります。
イメージとしてはクリック(focus)されたとどういう形にしたいかを設定するということですね。
ちなみにtransitionなどを設定すると時間をかけて広がるので、モダンな感じがします笑
placeholderの文字を消す
これも簡単でした。
CSS
.search:focus::placeholder{
color: transparent;
}
これでクリック(focus)した時に消えてくれます。
class名:focus{} これは結構使えそうだなと思いました。
JavaScriptで実装するんだろうなと思ってたら、CSSで簡単にできたので、参考になる方がいれば幸いです。
デュアルディスプレイになりました！
どうも〜
タイトル通りデュアルディスプレイ化しました。
PHILIPSの241E9/11(23.8inch)を買いました！
https://www.amazon.co.jp/gp/product/B07J9L8QDB/ref=ppx_yo_dt_b_asin_title_o00_s00?ie=UTF8&psc=1
これですね。
用途としては、ローカル環境でエディタとクロームの行き来が効率悪かったので、モニターにクローム開きっぱ！ノートにエディタ開きっぱ！を実現したかった。
ということですね。
今更感はありますが笑
使ってみた（2時間ぐらい）感想ですが、想像通りでした！
効率は間違いなく良いと思います。
もともとiMacとMacBookProを前後に置いて使っていたので、画面が2個有ることに違和感なしでした。
いきなりは目が疲れるかもしれないです。
ただしかし… ケーブルが悪いのか接続が切れます笑
効率どこ行ったになりますが、後日新しいケーブルを買ってみます…
と、ブログを書いている今も映像が消えました！
他にも良い使い方がないか探してみます〜
