デジカメやスマホで撮影した写真をWebサイト上に公開する時に、ファイルサイズが大きくてサイトが重くなっている・・なんていうことありませんか？

momo

今回は、そんな時に使える画像を一括でリサイズする方法をまとめるよ！

使用ツール

Mac標準の「プレビュー.app」

Macの標準ツールである「プレビュー.app」を利用します。

momo

画像以外にPDFなども開ける便利なアプリだよ！

mito

他の画像加工系のアプリよりも起動が速いです。

「プレビュー.app」で画像を一括リサイズする手順

画像ファイルを複数選択し、一括で開く

リサイズしたい画像ファイルを全て選択。
ダブルクリックもしくは、右クリックで「このアプリケーションで開く > プレビュー.app」を選択します。

ファイルを複数選択

アプリが立ち上がり、画面左に読み込んだ画像が一覧表示されます。
この中から必要なファイルを選びます。
(全て選ぶ場合はメニューバーの編集＞全てを選択)

momo

表示している画像全て一括でリサイズしたい場合は、command+Aで選択するよ！

mito

command+クリックで必要なファイルだけ選択していくこともできます。

サイズ調整

メニューで「ツール > サイズを調整」を選択

変更したいサイズに合わせて数値を入力

調整後のサイズのところでどのくらい縮小したかをパーセント単位で確認できます。

momo

「サイズに合わせる」を選択すると一般的に使用することの多いサイズを指定することができるよ！

mito

「縦横比を固定」や「イメージを再サンプル」のチェックボックスはデフォルトのままがおすすめです。

実行

「OK」ボタンをクリックすると選択したファイルの一括リサイズが始まります。

mito

既存ファイルを上書きするのでオリジナル画像はバックアップをとっておくことをオススメします。

まとめ

Webサイトなどに使用する画質の良いデータほど重たく、処理が遅くなってしまうので対策としてこのリサイズ方法を覚えておくと役に立つと思います。

PCで作った画像をSP用にリサイズしたいというような時にも便利です。

先日「アウトプット大全」という本を読んだ感想をまとめました。
今回はその対となる本、「インプット大全」についてまとめます。

mito

インプットするのは好きな方なので、たくさんインプットしていたつもりでしたが、いかに自分が効率の悪いインプットをしていたか思い知らされました。

momo

知識を入れる(IN)しても頭の中に定着させる（PUT）できずに流れてしまったら意味がないよね。。

インプットは好きだけれど上手く活用できている気がしない人やもっと効率よくインプットしたい人はぜひ読んでみてください！

それでは、いってみます！

インプットをはじめるときの心構え

インプットは目標や目的とセットで行うべき

つまり、出口（アウトプット）のないインプットは極力減らすべき。
今の自分に本当に必要な情報、知識に狙いを定めて集めるといって心構えが重要です。

momo

時間は有限、その限られた時間をどのように使うか？が問われるね。

mito

「なんのためにインプットするのか？」答えられるように意識します！

効率的なインプット方法

インプットとアウトプットを同時進行で行う

テニスの例が出てきますが、テニスの場合、相手の動きを観察するというインプットをしつつ、自分はどう動くか考え実際に行動するというアウトプットをしています。

この、インプットとアウトプットを同時にすることがポイントです。

momo

英語のシャドーイングも、インプットをしながらアウトプットをしているので身につく速度が速いんだね！

感情を刺激するようなインプットを行う

momo

本の中には7つの例が書かれていたよ

1. ストーリー活用（漫画化、小説化されたビジネス書を読む）
2. 好奇心を大切に、ワクワクすることを勉強する
3. 本を買ったらすぐ読む。「読みたい！」という気持ちが強いうちに読む
4. 「わからない！」と思った瞬間に検索する
5. 大舞台で講演する（「緊張」「興奮」「教える」で記憶増強）
6. 映画、美術鑑賞など、「感動」「学び」と連動させる
7. 旅行（緊張、興奮、感動）から学ぶ

感情を刺激すると、インプットが効率的にできるのは経験からも頷けます。

学びのステップを抑える

momo

学びにはステップがあるって知ってた？

mito

知らなかった！今までは人から教えてもらうのが一番最短ルートのインプットだと思ってました。

momo

知識としてきちんと定着させることを考える場合、段階を踏んだ方が定着しやすいんだよ！

まずは本を1冊買うところかあ始めるのが良いと書いています。

つまり

というステップを踏むと良いそうです。

リアルで会う目的は非言語情報を受け取ることです。

mito

確かに、事前のインプットが多いほど、受け取れる非言語情報は多くなる気がします。

momo

さらに、リアルで会うと感情を刺激するインプットができるから記憶に定着しやすいね！

アウトプットできる（議論できる水準）に達するようにインプットする

本を読む場合、速くたくさん読んでも記憶に残らなければ意味がありません。
それよりも深く読み、内容について議論できる水水準までじっくり読むことをオススメしています。

1ヶ月にさっと10冊読んでアウトプっとしないよりもじっくり3冊読んでアウトプットすることを推奨しています。

3点でバランスをとることを意識する

mito

これまでの話を踏まえるとやみくもにインプットすればいいというものではないですよね。

1つのことをどんな角度からインプットするか？ということで推奨されているのが、3点インプットです。

中立派、賛成派、反対派の3つの視点からインプットをするということです。

momo

三角形の重心を探るイメージだね。

そうすることで、偏りなく、知識をインプットできます。

インプットした後にすべきこと

3つの気づきをまとめる

これも一種のアウトプットですが、人は一度に3つしか覚えられない、記憶に残らない、処理できないそうです。

読み終わった後、色々学んだ気になっていましたが、いざ気づきを3つ上げようとすると、すぐに出てこない、すでに忘れていることに気づきました。

mito

ここでもインプットとアウトプットを同時に行う重要性を感じました。

ですので、本書の気づきベスト３を書きます。

TODOにする

気づきだけでは勿体無い、アウトプット大全にもありましたが、現実世界を変えるためには行動しなければ変わりません。

momo

インプットの最後に、行動するための段取りとしてTODO化することが大事だよ！

ここで読んだことを実行して習慣化していきます！

https://mito-lab.com/bookreview-output/

最近、Xdでデザインをすることが増えました。

https://mito-lab.com/webtrace-xd/

そこで今回は、Xdのデザイン時によく使うショートカットキーをまとめます。

mito

Photoshopやillustratorとショートカットキーが少し異なるので慣れが必要だなと思いました。

momo

これさえ覚えておけば便利！という観点でまとめるよ！

基本のショートカットキー

mito

Photoshopやillustratorにも同様の機能はありますが、ショートカットキーが異なる部分もあるので新たに覚える必要があります。

よく使うショートカットキー

こちらにもまとめた内容にいくつか新たに追加しました。

https://twitter.com/mito_works/status/1182286154881585152

momo

ZoomやZoom outはXd独特のショートカットキーだよ！

使いこなすとよく使うショートカットキー

Xdならではの機能としてアセットやプラグインがあります。

それらを使い、レイヤーに戻る時などにショートカットキーを使えると便利です。

今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。

30DAYSトライアルは、独学を前提としたプログラミング学習プログラムです。

#30daysトライアルとは何？どうやって始めるの？といった疑問をお持ちの方、こちらをご覧ください。

mito

30DAYSトライアルの2ndステージ。より実践レベルのトライアルです！

momo

2ndのDAY5,6はprogateを使ってSassを学んでいくよ！

Sass(サス)とは

Sass(Syntactically Awesome StyleSheet)は、CSSをより便利に効率的に書くことができる言語です。

mito

SASS記法とSCSS記法の2種類の書き方があります。私はSCSS記法を学びました。

momo

ファイルの拡張子もcssではなく、scssになるよ！

1. CSSより記述量を減らせること
2. コードを再利用できること

入れ子構造の使い方

1つのセレクタのなかに別のセレクタを入れ子にして指定できます。

<div class="message">
  <h1>About us</h1>
  <p>私たちは・・・・</p>
</div>

CSSで記載する場合

.message{
 width:100%
}
.massage h1{
 font-size:50px;
}
.massage p{
 font-saize:20px;
}

Scssで書く場合

.message{
 width:100%
　h1{
   font-size:50px;
  }
  p{
  font-saize:20px;
  }
}

momo

同じセレクタをなんども書かなくてすむね！

&記号の使い方

入れ子構造を使うことによって、「セレクタ:hover」を「&:hover」というように書き換えることができます。

momo

「&」はhoverだけでなく、activeなどにも使うことができるよ！

HTMLの記載↓

<div class="col-12 social">
   <a href="#" class="socoalIcon"><i class="fab fa-facebook"></i></a>
</div>

Scssの記載↓

.fa-facebook{
  color: #3d5998;

　&:hover{
  color: #d5d5d5;
  }
}

momo

liなどの中の特定の要素の指定にも使えるよ！

HTMLの記載↓

<ul>
    <li>planA</li>
    <li class="color-change">PlanB</li>
    <li>PlanC</li>
</ul>

Scssの記載↓

li{
  padding-left: 10px;
  &.color-change{
    color:red;
  }
}

変数の定義

momo

右の値を左の変数に入れる(代入)という意味だよ。

$hover-color:#d5d5d5;

.fa-facebook{
  color: #3d5998;

　&:hover{
  color: $hover-color;
  }
}

mito

他でも使い回しができるので便利ですね。

まずはこの3つを使えるようになるだけでもかなり便利です。
以下はさらに効率的にコーディングするための書き方です。

mixinについて

mixinとは

mixinは、いくつかのコードを1つにまとめて、複数箇所で簡単に呼び出すことができる機能です。

mixinの定義

momo

呼び出すときは@include mixin名;で呼び出すよ！

@mixin circle{
  display: inline-block;
  border-radius: 50%;
  margin-left: 10px;
  text-align: center;
  background-color: black;
}

.main {
  margin: 20px 10px;
  
  .small {
    @include circle;
    
    width: 10px;
    height: 10px;
  }
  
  .large {
     @include circle;
    
    width: 50px;
    height: 50px;
  }
}

引数を使ったmixinの定義

mixinの引数を指定しておくことで、includeから値を渡すことができます。

HTMLの記載↓

<div class="social">
  <a href="#"><i class="fab fa-facebook"></i></a>
</div>

Scssの記載↓

@mixin social($color){
  color:$color;
  padding: 3rem;
}
@mixin hoverColor{
  color:#d5d5d5;
}

.social{
  .fa-facebook{
    @include social(#3d5998);
      &:hover{
        @include hoverColor;
      } 
  }
}

関数の使い方

色を操作する関数はよく使われます。
HTMLの記載↓

    <div class="colorChange">
        <ul>
          <li class="orange1"></li>
          <li class="orange2"></li>
          <li class="black1"></li>
          <li class="black2"></li>
        </ul>
    </div>

Scssの記載↓

$orange:#fd7e00;
$black:#000;

.colorChange{
  margin-top: 10px;

  li{
    list-style: none;
    float: left;
    height: 50px;
    width:20%;
    margin-bottom: 10px;
  }
  .orange1{
    background-color:$orange;
  }
  .orange2{
    background-color:darken($orange,20%);
  }
  .black1{
    background-color:lighten($black,20%);
  }
  .black2{
    background-color:lighten($black,50%);
  }
}

結果

まとめ

これまで取り上げてきた書き方を実践することで効率的にコードが書けます。
環境設定については、VS codeの拡張機能「Easy Sass」で作りました。

VS codeについての記事はこちらです。

https://mito-lab.com/how-to-vscode/

今回は、ソースコードエディタのVSCode(Visual Studio Code)の便利なショートカットキーをまとめました。

mito

自分がよく使うな〜と思うものを中心にまとめているので随時更新していく予定です。

まずは、VSCodeとはどんなエディタなのか？というところから書くので、どのエディタを使うか悩んでいる方もぜひ参考にしてください。

VSCodeとは

2015年にマイクロソフトからリリースされたエディタです。
Windowsのほかに、Mac OS、Linux上でも動作します。

VSCodeの特徴

シンタックスハイライト

ソースコードの構造を視覚的に区別できるようにする表示機能のことです。
テキストの一部（構文）をわかりやすい色で表示します。

マルチカーソル機能

エディタ上で複数選択し、同時編集ができる機能です。以下を参考にさせていただきました。

マルチカーソルを使わないVSCodeはただのVSCodeだ！〜解説編〜

mito

⌘Dで選択か⌘⇧Lで選択して一気に修正できます。

標準でEmmetがついてる

EmmetとはHTML/CSSの超強力な入力補完プラグインです。

mito

このEmmetがすごく便利でコードを書くスピードを上げてくれるということで使いはじめました。

覚えておくと便利なEmmetのショートカットキー紹介

基本的な使い方はこちらがすごく参考になります。

「はじめて」でも簡単！Emmetの使い方とよく使うパターン集

以下には少しスペルが紛らわしく覚える必要があるなと思ったものを書いています。

CSS編

その他チートシートはこちらEmmetのチートシート

VScodeのショートカットキー

【Mac版】 VisualStudioCode キーボードショートカット

こちらから特によく使うものをご紹介します！

コードを書く時に先に書いてあるコードをコピーすることがよくあるのですごくよく使います。

例えばHTMLでdivの中身を先に書いて後からdivで囲む時に便利です。

2列表示の場合の切り替えに便利です。

選択している行が長い場合も上記のショートカットで上下にコードを追加できます。

カーソルで選択しているコードと同じコードをすぐに検索できます。

momo

使いこなせるとコードを書くのが楽しくなるね！

画像を切り抜く際に、うまく切り抜けなくて、気づけば30分以上経っていたなんてことありませんか？

私は不器用ゆえ、よくあります。

momo

今回はそんな不器用さんに是非ともオススメしたい、画像の切り抜きがワンクリックでできる、Photoshop拡張プラグインの紹介だよ！

Photoshop拡張プラグインRemove.bg とは？

人物などの被写体の切り抜きをPhotshop上でボタンクリックひとつで行うことができるツールです。

momo

ボタンをクリックすれば、AIが自動で切り抜きを行ってくれるんだよ。時間短縮になる画期的なツールだね！

Remove.bgのインストール

拡張機能のインストールを行います。以下のようにFreeを押すとインストールが開始されます。

拡張子、zxpでダウンロードされるので、解凍の際はZXPinstallerを使って解凍しました。

Rmove.bgにサインアップ

Photoshop上で使うにはAPIキーが必要となるため以下からサインアップを行います。

サインアップしたら登録したメールアドレス宛に認証用のメールが届くので「Confirm my account」をクリックして認証を完了します。

APIキーの取得

下記のページへ遷移し、APIを取得します。

PhotoshopでAPIキーの入力

Photoshopを開き、ウィンドウ＞エクステンション＞Remove Backgroundとアクセスします。

APIキーを入力し保存します。

Photoshopで背景を自動切り抜き

切り抜きたい写真を開き、パネルから「Remove Background」をクリックします。数秒待つと自動で背景を切り抜いてくれます。

mito

ワンクリックでこんなに綺麗に切り抜いてくれるのかと感動します！是非お試しください〜。 

ーEndー