OmniAICreator/Qiita-1.07M huggingface dataset:
WindowInsetsを使わないでRealSizeからSystemUIの高さを求めているとChromebookで大変なことになる

かつて、WindowInsetsが扱えるようになる前、Kitkatとかの時代ですね。ステータスバーの高さやナビゲーションバーの高さを求める方法として、Display#getRealSize()を使う方法がありました。この方法は今でも**ある程度**通用します。

かなりやっつけコードですが、以下のように、ルートViewの`getGlobalVisibleRect()`で取得したルートViewの表示領域と、displayの`getRealSize()`で取得した実際のディスプレイサイズを使って、`rect.top`をステータスバーの高さと見なして、`point.y - rect.bottom` をナビゲーションバーの高さを見なすというものです。

```kotlin
val density = resources.displayMetrics.density
binding.root.doOnLayout {
    val rect = Rect()
    it.getGlobalVisibleRect(rect)
    val point = Point()
    windowManager.defaultDisplay.getRealSize(point)
    binding.realSize.text =
        """
        RealSize:
        StatusBar: ${rect.top / density}dp
        NavigationBar: ${(point.y - rect.bottom) / density}dp
        """.trimIndent()
}
ViewCompat.setOnApplyWindowInsetsListener(window.decorView) { _, insets ->
    window.decorView.onApplyWindowInsets(insets.toWindowInsets())
    binding.insets.text =
        """
        Insets:
        StatusBar: ${insets.systemWindowInsetTop / density}dp
        NavigationBar: ${insets.systemWindowInsetBottom / density}dp
        """.trimIndent()
    insets
}
```

比較用にWindowInsetsの値も表示させています。

まずはKitkatでの実行、WindowInsetsを扱えるのはLollipop以降なのでInsetsの方は表示されていませんが、StatusBar/NavigationBarの高さがとれていますね

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155171/18d86162-d7fd-058b-12e1-99cfb4d4273e.png" width="400">

Android 11で実行すると、WindowInsetsの値と一致しています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155171/85392cbf-8df6-0a3e-590a-d7aa4e4ede8f.png" width="400">

ってことで、ひょっとしたらまだこういうコードが残っているアプリもあるかもしれないですね。

ではChromebookで実行してみましょう

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155171/e81d4fb1-5a7b-07b5-4551-8e43f3ce8b88.png)
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155171/b15ab358-efe2-7fb9-1c31-a9beccc86e69.png)

はい、ディスプレイのRealSizeは物理ディスプレイのサイズですが、アプリ領域はウィンドウ化されているのでGlobalVisibleRectはウィンドウ内での領域情報ってことで、ディスプレイサイズからウィンドウのコンテンツ領域の高さを引いた値になるのですごく大きな値になります。

ってことで、ちゃんとWindowInsets使おうねって話でした。
【jQuery】スライダープラグインの使い方

#slick（スリック）とは

slickはjQueryベースの、**スライダーを作成するためのプラグイン**です。
レスポンシブにも対応し、カスタマイズの幅も広いため、世界的に利用されています。

#ファイルのダウンロード
公式サイト：[slick](https://kenwheeler.github.io/slick/)よりファイルをダウンロードする。
**get it now** ボタンを押下で、ページの下の方に移動。
そこに**Download Now** ボタンがあるので押下して、ファイルのダウンロードを実行。

#必要なファイルを任意のフォルダに設置する

- slick.css
- slick-theme.css
- slick.js

上記3つのファイルが必要です。任意のフォルダ設置してください。

#ファイルを読み込む

```html:CDN
<link rel="stylesheet" type="text/css" href="slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-theme.css"/>
<script src='jquery.js'></script>
<script src="modaal.js"></script>
```
slick.css、slick.jsの他に、jQueryのファイルも読んでおいてください。

#JavaScript・HTMLにmodaal.jsを動かすコードを記述
一番基本的でシンプルな、１枚の画像が表示されていて、左右に矢印、あるスライダーの作り方です。
左右の矢印をクリックすると画像が前後に切り替わります。

##HTML
```html:html
<div class="slider flex">
          <div><img src="img/難波.jpg" alt="難波" /></div>
          <div><img src="img/渋谷.jpg" alt="渋谷" /></div>
          <div><img src="img/横浜.jpg" alt="横浜" /></div>
          <div><img src="img/東山.jpg" alt="東山" /></div>
          <div><img src="img/博多.jpg" alt="博多" /></div>
          <div><img src="img/花園.jpg" alt="花園" /></div>
          <div><img src="img/祇園.jpg" alt="祇園" /></div>
          <div><img src="img/吉祥寺.jpg" alt="吉祥寺" /></div>
          <div><img src="img/秋葉原.jpg" alt="秋葉原" /></div>
          <div><img src="img/新宿.jpg" alt="新宿" /></div>
          <div><img src="img/川越.jpg" alt="川越" /></div>
          <div><img src="img/池袋.jpg" alt="池袋" /></div>
          <div><img src="img/天王寺.jpg" alt="天王寺" /></div>
          <div><img src="img/梅田.jpg" alt="梅田" /></div>
          <div><img src="img/伏見稲荷.jpg" alt="伏見稲荷" /></div>
        </div>
```

#JavaScript
```javascript:javascript
$('.slider').slick();
```

たったこのコードだけでスライダーが実装されます。

#slickのオプションを使ってカスタマイズ

```javascript:javascript
$('.slider').slick({
  infinite: true, //無限にスライドする
  autoplay: true,　//trueの場合、自動再生する
  arrow: true, //左右矢印を表示する
  slidesToShow: 3, //スライダーの表示数
  slidesToScroll: 1, //一度にスライドする数
  autoplaySpeed: 4000, //自動再生時のスライド切り替えのスピード
  centerMode: true, //センターモード（＝両端見切れ状態）になる
  centerPadding: "-10%", //センターモード時、見切れたコンテンツの幅をpx指定
  prevArrow: '<i class="prev-arrow fas fa-chevron-left"></i>', //前矢印のHTMLカスタマイズ
  nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>', //後矢印のHTMLカスタマイズ
}); 
```

オプションにつきましては、こちらに分かり易くまとめて下さっているのでご参考下さい。
[スライダープラグイン「Slick」便利なオプション&動きサンプル集](https://qiita.com/ymeeto/items/7fc56eea4bd44487cdb7)

#レスポンシブの設定方法

```javascript:javascript
$(".slider-works").slick({

 (省略)

  responsive: [
    {
      breakpoint: 1024, //ブレイクポイントの指定
      settings: {
        infinite: true,
        autoplay: true,
        arrow: true,
        slidesToShow: 2,
        slidesToScroll: 1,
        autoplaySpeed: 4000,
        prevArrow: '<i class="prev-arrow fas fa-chevron-left"></i>',
        nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>',
      },
    },
    {
      breakpoint: 600,
      settings: {
     
       (省略)

      },
    },
  ],
});
```
上記を追記してあげるだけで簡単にレスポンシブが可能になります。
必要に応じて**スライダーの表示数**や**一度にスライドする数**を記述すれば大丈夫です。

#まとめ
オプションとイベントを使えればかなりカスタマイズの幅が広がります。
是非、「slick」を活用して動きのあるWeb制作をしてみて下さい。
Sidekiqのメモリが増え続ける問題対処

# メモリが増え続ける

webコンテナとは別にworker用のコンテナを立ててsidekiqを動かしているという構成で、データ量の大きなオブジェクトを作成し、S3にアップロードしたpathをクライアント側に返す処理になっていた。
重たい処理を実行するたびにメモリが開放されずに膨張し続けて、たて続けに実行するとすぐにアラートが飛んでくるようになっていた。

これのせいでトラウマでSidekiqに抵抗が。。。

この人と状況似ていて参考にした。デザイン性の乏しいブログにこそ有益な情報がある
http://blog.jiikko.com/133

# プロセスをフォークして切り捨てる

フォークしたプロセスで処理を完結させるときれいにメモリ膨張が抑えられて処理終了とともにメモリが開放されるようになった。

1番最初にできたのがこれ

```ruby
class Test
  include Sidekiq::Worker
  
  def perform
    pid = Process.fork do
      # 処理内要
    end
    Process.waitpid pid
  end
end
```

これだと開発環境でActiveRecordまわりでエラー吐いていたので調べてみるとプロセス別にコネクションを用意してあげないといけないらしい。
マルチプロセス部分が終了したらメインプロセスで再接続。で出来上がったのが以下。
ほぼこれのまま 感謝 => https://gist.github.com/danieldbower/842562

```ruby
def process_fork
    # tracking if the op failed for the Process exit
    config = ActiveRecord::Base.remove_connection
    pid = Process.fork do
      begin
        ActiveRecord::Base.establish_connection(config)

        # This is needed to re-initialize the random number generator after forking (if you want diff random numbers generated in the forks)
        srand

        # Run the closure passed to the fork_with_new_connection method
        yield

      rescue Exception => exception
        puts ("Forked operation failed with exception: " + exception)
      ensure
        ActiveRecord::Base.remove_connection
        Process.exit!
      end
    end
    ActiveRecord::Base.establish_connection(config)

    #return the process id
    Process.waitpid pid
  end
```

使う時はこんな感じ

```ruby
class Test
  include Sidekiq::Worker
  
  def perform
    process_fork do
      # 処理内容
    end
  end
end
```

# 他に参考にしたやつ

> https://cloud6.net/so/ruby-on-rails/1480000
https://qiita.com/naotospace/items/61c7a5a4e44473fa1e21
SharePoint リストの列の書式設定でリンクを活性にする

# はじめに

SharePoint リストには、JSON 形式で列の書式設定をカスタマイズする機能があります。
[列の書式設定で SharePoint をカスタマイズする](https://docs.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/column-formatting)
公式ドキュメントにいろいろ書いていますが、読むのが面倒な方のために「1行テキスト」型の列をリンク化する方法をご紹介します。

# 1つの列の値を使ってリンク化

リンク化したい列の列名を右クリックし「列の設定＞この列の書式設定」を開いてください。
ここに JSON を貼り付ければ設定完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113765/a469b67a-bd5a-5783-3cd6-08730fd53c2a.png)

JSON はこちらです。

```JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "txtContent": "@currentField",
  "attributes": {
    "href": "@currentField",
    "target": "_blank"
  }
}
```

書式を設定しようとしている列の値を `@currentField` で参照しています。

# 他の列の値を使ってリンク化

発展形として、別の列の値と組み合わせてリンクを生成することもできます。
以下では URL と検索ワードを組み合わせて検索結果ページのリンクを作成しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113765/5ee8d188-e79c-152e-3c5e-82b0e22be456.png)

JSON はこちらです。

```JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "txtContent": "@currentField",
  "attributes": {
    "href": "=if([$value]=='https://www.yahoo.co.jp/', 'https://search.yahoo.co.jp/search?p=' + @currentField, 'https://www.google.com/search?q=' + @currentField)",
    "target": "_blank"
  }
}
```

Excel ライクな if 文が書けます。
また `[$列名]` で別の列の値を参照できます（この場合は「URL」列）。
列名は、画面に表示されている値ではなく、その列の値でフィルターを設定した際の URL の `FilterField1=` の後ろの値です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113765/b764a8e8-8d83-844d-6893-5a3a284a2285.png)


以上
【C++】アップキャストされたポインタから派生クラスのstaticメンバへアクセスする

#はじめに
　この記事の内容は、ポリモーフィズムやC++の継承周りへの知識が少ない筆者が我流で編み出しただけのものなので、これが必要となる設計が正しいのかは保証しません。
　とりあえず動けばいいという方だけ参考にしていただければ。
　また、この記事の内容は、恐らく分かる人からしたら記事にするまでもない当然のことだとは思うのですが、この間詰まってしまったので、自分のための備忘録も兼ねて公開しています。

#やりたいこと
```C++
struct Base{
  //派生クラスが持つ static メンバを定義する術はない……
};
struct Derived : public Base{
  static Hoge static_var;
};
Base* p_base=new Derived();
p_base->static_var;//Baseのメンバではないのでエラー
```

　C++でポリモーフィズムをしようとするとき、たまに上のようなことをしたくなることがあります。
　上の例ぐらいならダウンキャストで何とかなりますが、例えば複数種類の派生クラスのインスタンスをvectorで管理しようとすると、ダウンキャスト先を知ることも出来なくなります。（仮に知れたとしても、派生クラスを増やす度にダウンキャスト処理を書き足すのはエレガントじゃないですよね）
　こういうとき、（残念ながらstatic変数の定義を強制することは出来ませんが）少なくともアクセスを可能にする方法が下にあるものです。
　ちなみに私は、これを使って関数オブジェクトをstd::unordered_mapで管理しようとしていました。（「それなら仮想関数で出来るだろ」という意見は受け付けません）

#やりかた
　非staticメンバであれば基底クラスが持っておくことができるので、アクセスしたいstaticメンバへのポインタを基底クラスに持たせるだけです。
　あとは、基底クラスで定義したアクセス用ポインタに、派生クラスのコンストラクタでstaticメンバのアドレスを代入するだけです。
　なお、インスタンス解放時に誤ってstaticメンバが解放されると困るので、それを防ぐためにshared_ptrとweak_ptrによるリソース管理を行っています。

##コード例
```C++
class Shared; //static変数として保持するクラス
class Base{
public:
  std::weak_ptr<Shared> ptr_to_static;//コレを経由して派生クラスのstaticメンバにアクセス
  //これがshared_ptrだと、Sharedがshared_ptr<Base>を持つとき循環参照が生じる
};

class Derived : public Base{
  static std::shared_ptr<Shared> really_static;//実際にアクセスしたいメンバ
public:
  Derived(){
    ptr_to_static=really_static;//ここで登録
  }
};
std::shared_ptr<Shared> Derived1::really_static=std::make_shared<Shared>();

```

　挙動のチェックには下のテストコードを使いました。アクセス方法の実例を見たい場合はご覧ください。
https://wandbox.org/permlink/Nk7hcJqsbKFmfgnj

【追記】
　@myoukaku さんからコメントを頂いた通り、仮想関数を使ったアプローチもあるようです。shared_ptrなど使わなくても実現できますし、定義忘れでコンパイルエラーを吐いてくれるなど、コメントの方法の方がbetterだと思います。（詳細はコメントを見てください）

#おわりに
　「はじめに」でも書きましたが、C++のポリモーフィズムは不慣れなので、もしかするとアンチパターンをやっていたりするかもしれません。何かあればコメントでアドバイスを下さると嬉しいです。
AWS Artifact とは

## 勉強前イメージ

全然イメージつかない・・・

## 調査

### AWS Artifact とは

AWSコンプライアンスレポートのダウンロードサービスです。
第三者による監査レポートをダウンロードできます。

### ダウンロード出来るレポート

- Global Financial Services Regulatory Principles
- ISO
- Payment Card Industry(PCI)
- Service Organization Control(SOC)
- Quality Management System Overview

### 契約ガバナンス

AWSとの結んだ契約を確認・管理することが出来ます。
このサービスにて契約を受諾したり終了したりすることが出来ます。

## 勉強後イメージ

あまり身近ではないサービス。
だけど、何に準拠してるからどれだけ安心だよっていう基準が見れるってことかな

## 参考

- [AWS Artifact](https://aws.amazon.com/jp/artifact/)
- [【新機能】AWS Artifactリリースされました！監査レポートをダウンロードしよう #reinvent](https://dev.classmethod.jp/articles/aws-artifact-new/)
wordpress学習中

#この記事の概要
wordpressを学習のアウトプットとして記述していきます。

#学習方法
2021/03現在
参考書：wordpressの教科書を用いて学習中

#環境構築
virtualBOXをインストール
kusanagiを利用

###hostsファイル
ローカルPCの環境で
ホストネームとIPアドレスを指定して、紐付ける設定ファイル
hostsファイルでの設定はDNSファイルより優先される


###DNS
Domain Name System

ドメインネームとIPアドレスを紐付ける機能

###FTP
File Transfar Protocol
ファイル転送の約束事

###wordpressのテーマとして認識されるには
index.phpファイルとstyle.cssファイルが必要

###テンプレートファイルの分割
index.phpだけでもテンプレートとして機能するが、header部、footer部など、部分ごとにテンプレートファイルを分割できる。
可読性、保守性を向上させることができる。

index.phpファイルとは別にheader.phpファイル、footer.phpファイルなどを用意して、
header.phpならヘッダー部の記述、footer.phpならフッター部の記述をする。
index.phpで上記ファイルを読み込みたい箇所に、
```<?php get_header(); ?>```
```<?php get_footer(); ?>```
のように取得する関数を記述する。


※テンプレートはwordpressで定められているもので、上記のヘッダー、フッター以外にもたくさんある。
※テンプレートを取得する関数はwordpressで用意しているもの。

###テンプレートファイルの呼び出し方法
テンプレートタグの記述方法は数種類に置き換えが可能。

例）headerの場合
パターン1 (テンプレートごとの決まったテンプレートタグ)
```<?php get_header(); ?>```

パターン２ (引数にテンプレートファイル名を与えて読み込む)
```<?php get_template_part('header'); ?>```

例）footer-topの場合
パターン１ (テンプレートが分岐している時、引数に"-"以降を与える)
```<?php get_footer('top'); ?>```

パターン２ （引数にテンプレートファイル名を与えて読み込む）
```<?php get_template_part('footer-top'); ?>```

###子テーマの作成、編集
他テンプレート親として利用して、別テーマを作成編集する方法

・親と同じ階層に新規ディレクトリを作成
・作成したディレクトリに```index.php```ファイル、```style.css```ファイル、```functions.php```ファイルを作成
```index.php```ファイルの内容は親テンプレートのものをそのまま代用

```style.cssファイルには以下を記述
/* 
Theme Name: Twenty Nineteen Child
Author: the WordPress team
Template: twentynineteen
Description: Twenty Nineteenの子テーマです。
Version: 1.0
*/
```
----------------------
***- style.cssファイルの内容 -***
Theme Name: テーマ名
Author: テーマの著者
Template: 親テンプレート名
Description: テーマの説明
Version: テーマのバージョン

-----------------------

```functions.phpファイルには以下を記述

<?php
add_action( 'wp_enqueue_scripts','theme_enqueue_styles');
function theme_enqueue_styles(){
  wp_enqueue_style('parent-style',get_template_directory_uri(). '/style.css');
  wp_enqueue_style('child-style',get_stylesheet_directory_uri(). '/style.css',array('parent-style'));
}
```

---
***- functions.phpの内容 -***
wp_enqueue_scriptsをフックに

---


###投稿と固定ページ


###ファイル名の優先順位
ファイル名には優先順位があり、index.phpファイルは最後に呼び出される。

トップページなら、front-page.php
固定ページなら、page.php

など、各表示箇所によってindex.phpより優先されるファイル名がある。

###カスタムメニュー
カスタムメニューという機能を使う事で、固定ページやカテゴリーで用意したページ情報をメニュー部に利用できる。
グローバル、フッターなどにメニューとして挿入できる。

利用には、header.phpファイルのメニューに該当する部分
```<nav></nav>```等の部分を以下のように代替する。

```globalメニューの場合.

<?php 
wp_nav_menu(
  array(
    'theme_location' => 'place_global',
    'container' => false,
  )
); 
?>

```

```footerメニューの場合.
<?php
wp_nav_menu(
  array(
    'theme_location' => 'place_footer',
    'container' => false,
  )
);
?>

```

###投稿ページを表示させる
single.phpファイルは投稿ページを表示させるために必要
single.phpファイルは投稿ページを表示させる際に参照される。
chrome driverがインストールできない時の対処方法

pip install chromedriverでは何やってもできなかった

https://sites.google.com/a/chromium.org/chromedriver/downloads
上記から該当ファイルをダウンロードして、パス指定してできた

```driver = webdriver.Chrome(executable_path='c:\\opt\\chromedriver_win32\\chromedriver.exe')```

参考
https://qiita.com/memakura/items/20a02161fa7e18d8a693
https://qiita.com/fujino-fpu/items/42e20c69896a25e27bb4
[ActiveStorage] s3上のファイルをffmpegで処理して再アップロードする

すでにs3上にアップロードされているファイルをffmpegで処理したい場面があったのでまとめます。

aws上で処理する場合はs3からlambdaでffmpegを動かしたり、elastic transcoderを使う方法があるかと思いますが、今回はただメタデータを付与したいだけの軽い処理なので、rails上で処理する方法にしました。

次のようなモデルを想定しています。

```ruby
class Post < ActiveRecord
  has_one_attached :movie
end
```

## gem
- sidekiq
- streamio-ffmpeg

## 実装

```ruby
class TranscodeWorker
  include Sidekiq::Worker

  def perform(post_id)
    post = Post.find(post_id)

    # Rails内での一時保存ファイルの作成
    local = Tempfile.open
    local.binmode

    # s3からダウンロード
    post.movie.download do |data|
      local.write(data)
    end

    # FFMPEGのインスタンスで処理
    movie = FFMPEG::Movie.new(local.path)
    output_path = "#{Rails.root}/path/to/output.mp4"
    movie.transcode(output_path, %w(-metadata:s:v rotate=180 -c copy))

    # 再アップロード
    post.movie.attach(
      io: File.open(output_path),
      filename: "rotated_#{Time.current.strftime("%F_%T")}.mp4",
      content_type: "video/mp4"
    )
    post.save!

    local.close
  end
```
`ActiveStorage::Blob#download`はバイナリーを返すので、tempfileは`binmode`でバイナリモードにしておく必要があります。ちなみに`rewind`でポインタをファイルの先頭に戻せるので、ダウンロードしたファイルを先頭から読み込む場合はコールしておくと良いと思います。

streamio-ffmpegはffmpegとほぼ同じことができます。`transcode`は第2引数に配列で、ffmpegのオプションを指定できます。第1引数のpathに出力してくれます。`%w()`を`%W()`にすれば文字列の時と同様に変数展開できます。

再アップロードは`ActiveStorage::Attached::One#attach`をコールすればOKです。HTTPリクエスト経由ではないファイルをアタッチする場合は、ioとfilenameの指定が必須です。content_typeは必須ではないですが、指定した方が無難かと思います。

動画処理に関する機能なので、非同期での実装例でした。
【JavaScript】ふわっと出て決まった高さで止まるスムーススクロールを実装

縦に長いwebページの場合、「トップへ戻るボタン」でページの上端まで一気に戻れると非常に便利です。

**⑴一定の高さまでスクロールしたらボタンがフェードインする。**

**⑵任意の高さまで行ったらピタッとトップボタンを固定する**

**⑶ボタンを押したらスクロールしながらトップまで移動する**

上記３つを兼ね備えたスムーススクロールの実装方法をご紹介していきます。

#HTMLにボタンを追加

「topBtn」ボタンというidをつけたaタグを準備します。

href属性には＃を設定し、ページの一番上に戻るようにします。
このaタグをcontentというidのついたdiv要素で囲みます。

今回はこのdiv要素より下に行かないように設定していきます。

```haml:html
<div id="content" class="top">
   <a href="#" id="top-button"><i class="fas fa-chevron-up"></i></a>
</div>
```

#CSSでボタンを装飾

下にスクロールしたら、#topBtnの「position：absolute」に変更して親要素の高さで
ボタンを固定するため、#contentに「poistion：relative」を指定します。

その他、わかりやすくするためにトップボタンを装飾していきます。装飾の部分はお好みで設定してください。

```css:css
#top-button {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #313131;
  color: white;
  z-index: 100;
}
```

トップボタンの矢印につきましては[Font Awesome](https://fontawesome.com/icons/chevron-up)より使用してます。

#JavaScriptで動きを実装

最後にJavaScriptを記述していきます。解説はコード内に記載しました。
コード前半はボタン表示・非表示、ポジションの変更、後半のコードはスムーススクロール実装のコードになっています。

```javascript:javascript
  $(document).ready(function () {
    $("#top-button").hide();　//ボタンを非表示にする
    $(window).on("scroll", function () {
      if ($(this).scrollTop() > 50) { //ページの上から50pxスクロールした時
        $("#top-button").fadeIn("fast"); //ボタンがフェードインする
      } else {
        $("#top-button").fadeOut("fast"); //ボタンがフェードアウトする
      }
      scrollHeight = $(document).height(); //ドキュメントの高さ
      scrollPosition = $(window).height() + $(window).scrollTop(); //現在地
      footHeight = $("footer").offset().top; //止めたい位置の高さ(今回はfooter)
      if (scrollPosition > footHeight) { //現在地がfooterの高さ以下の時
        $("#top-button").css({
          position: "absolute", //pisitionをabsoluteに変更
        });
      } else { //それ以外の場合は
        $("#top-button").css({
          position: "fixed", //固定表示
        });
      }
    });

    $("##top-button").click(function () {
      $("body,html").animate(
        {
          scrollTop: 0,
        },
        800 //スムーススクロールの速度
      );
      return false;
    });
  });

```
(window).height()･･･ウィンドウの高さ
(window).scrollTop()･･･スクロール位置
.offset().top･･･表示位置

#まとめ

トップボタンを実装する際にはフッターにかぶって視認性が悪くなったり、ボタンが情報を隠してしまう場合もあるので、
その場合は今回のようにボタンはある一定の高さから下にはいかないようにするといった処理を行うことで、
サイトの使いやすさに繋がってくるのではないかなと思います。
[Flutter]エントリーポイント(初回起動画面)の変更

アンドロイドスタジオで複数の画面を作った場合、画面遷移のプログラムを書かかずとも確認したい画面のデバッグができたら便利ですよね。
プログラムの開始位置のことをエントリーポイントといい、アプリの初回起動画面とも大きく関わってきます。
これを変更することで画面遷移のプログラムを実装しなくても他の画面の動作確認が行えます。
前回2つの画面を作成したアプリを用いて解説していきますので、よろしければこちらもぜひ参考に。
[>Flutter画面遷移の実装](https://qiita.com/Novice_Engineer/items/ab5a54b7b1121630548b)

## エントリーポイントの変更方法
「main.dart」と「next.dart」があり、アプリを立ち上げるとまず最初に「main.dart」が呼び出されます。
そのため、Runしてアプリを立ち上げると以下のような画面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468822/6ad664c8-ebf1-400d-ab60-b16f2e14057e.png)
それではエントリーポイントを変更して、2つ目の画面がアプリの起動時に呼び出されるようにしてみましょう。
アンドロイドスタジオの上部にこのような表示がありますが実はこれがエントリーポイントとなっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468822/412e68fc-43b1-51c4-c47c-682260dfd1ad.png)
Edit Configurationsを選択すると新たなウィンドウが開き、エントリーポイントの変更が可能です。ここでアプリ起動時最初に呼び出されるファイルを変更することができますが、ここを変更せずとももっと楽に初回起動画面を変えることができるので、まずはその方法を解説します。

```Dart:main.dart
void main() {
  runApp(MyApp());
}
```
「main.dart」には上のプログラムが書かれていて、これが先ほど解説したエントリーポイントと繋がっています。runAppの中にあるのが最初に呼び出されるクラスであるため、デフォルトではMyApp()となっています。それではこの中身を2画面目のクラスであるNext()と変えれば解決！と思うかもしれませんが、実際にやってみるとエミュレーターにエラーが表示されます。以下のようにMaterialAppの記載をすることで簡単に治せます。

```Dart:main.dart
void main() {
  runApp(new MaterialApp(home: new Next(),));
}
```
このようにしてrunAppの中身を変えることでアプリを立ち上げた際の初回起動画面の変更が可能です。実際にRunしてみると、以下のように最初に表示される画面が変わったことが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468822/355315a2-8928-96ee-6375-7af6de050615.png)
今回は楽な方法を取りましたが、実際はEdit Configurationsからエントリーポイントを指定のファイルにした後、そのファイルにrunAppのプログラムを書いた方が親切です。
Amazon Lightsail（LAMP） + PhpStorm を使った開発のススメ

# Amazon Lightsail（LAMP） + PhpStorm を使った開発のススメ

WEBサービスを公開する場合、Docker、EC2を準備して開発を進めることが多いが課題やミニマムサービスの場合、AWSのVPS（Lightsail） + PhpStormを使うとサクッとLAMP環境が構築でき最適解と感じた。

## Amazon Lightsail（LAMP）インスタンス作成

所要時間：１分

1. コンソール画面よりLightsailを選択
2. インスタンスの作成をクリック
3. プラットフォームの選択 → Linux/Unix を選択
4. 設計図の選択 → LAMP(PHP7) を選択
5. オプション
    1. SSH キーペアの変更 → 新規作成し新しいキーペアを作成
6. インスタンスプランの選択 → 1GB/1CPU プランを選択 ※ 512MB/1CPU だと稀にメモリエラーになる。
7. インスタンスの作成をクリック
8. 作成後、接続IPアドレスが表示される。

## 静的IPアドレス

所要時間：30秒

今のままだとIPアドレスが変わるため、静的IPアドレスと紐付けを行う

1. コンソール画面 → ネットワーク → パブリック IP → 静的IPのアタッチをクリックで紐付け完了


## サーバー確認

所要時間： ２分

作業開始にあたり一通り設定ファイルのパス、コマンドを確認

SSH

```
$ ssh bitnami@xxx.xxx.xxx.xxx -i ~/.ssh/xxx.pem
```

アプリパス ※ phpMyadminなどのログインパスワード

```
$ cat bitnami_application_password
```

公開サーバー

```
/home/bitnami/htdocs
```

### 設定ファイル

必要に応じて設定を変更

php.ini

```
$ sudo vi /opt/bitnami/php/etc/php.ini
```

my.cnf

```
$ sudo vi /opt/bitnami/mysql/conf/my.cnf
```

### サービス再起動

設定変更を行った場合再起動を行う
Lightsail（LAMP）はctlscript.sh を使って再起動を行う

```
$ sudo /opt/bitnami/ctlscript.sh restart apache
Restarted apache
$ sudo /opt/bitnami/ctlscript.sh restart php-fpm
Restarted php-fpm
$ sudo /opt/bitnami/ctlscript.sh restart mysql
Restarted mysql
```

## PhpStormと連携

所要時間：2分

言わずとも知れた有名IDE

https://www.jetbrains.com/ja-jp/phpstorm/

PhpStormのデプロイ機能を使い、LightsailにPhpStormからアップロード及びダウンロードをできるようにする。

1. Tools → Deployment → Cofiguration を選択
2. connectionタブを選択
    1. Type → SFTP、Host → 接続IPアドレス、User name → bitnami、Authentication → Key pair、Private key path → 作成したキーペア（xxx.pem）、Root path → /home/bitnami
3. Mappingタブを選択
    1. Local path → エディタルート
    2. Deployment path → htdocs
4. Tools → DeploymentからUpload、Downloadが可能、Automatic Uploadにチェックするとファイル変更すると自動でアップロードを行って便利

## phpMyAdmin確認

所要時間：1分

phpMyAdminの接続はポートフォワーディングを使う

```
$ ssh -N -L 8888:127.0.0.1:80 -i ~/.ssh/xxx.pem bitnami@xxx.xxx.xxx.xxx
```

ブラウザ確認
http://127.0.0.1:8888/phpmyadmin/

パスワードは `$ cat bitnami_application_password` の値を使う。

----

大体、5〜7分でLAMP環境の公開サーバーとデプロイ環境を準備することができた。
突発的な課題、サービス提供に利用してみてはいかがだろう？

いいね！と思ったら LGTM お願いします :clap::clap::clap:

【PR】週末ハッカソンというイベントやってます！ → https://weekend-hackathon.toyscreation.jp/about/
Linuxの種類と特徴

##Linuxとは
UNIX系OSの一つであり、それ自体はオペレーティングシステムの**カーネル**となります。
オープンソース・プラットフォームなので、ソースコードを誰でもダウンロード、変更、再配布することができます。
オープンソース且つカスタマイズ性が豊富であることから様々な**ディストリビューション**が生まれています。
※カーネルとはOSの中核部分に位置するソフトウェアのこと
OSはこのカーネルと様々な**機能レイヤー**が組み合わさることで成り立っている。

※機能レイヤー：デバイスドライバー、シェル、コンパイラー、アプリケーション、コマンド、ユーティリティー、デーモンなど

##Linux ディストリビューション
ディストリビューションとは「**OSとしてのLinux、もしくは、その配布形態**」を指します。
狭義でのLinuxはカーネルを指し、様々なソフトウェアと組み合わさることで広義でのLinuxとなります。
しかし、カーネルを中心に各種ソフトウェアを一から組み合わせていくのは難解であり、工数もかかります。
そこで各種ソフトウェアが**組み合わさっている状態で配布されている**Linuxがあり、それがディストリビューションと呼ばれています。

##ディストリビューションの種類
###主流の系統
Debian、Slackwere。RedHutの3つが主流であり、その他GentooやArthなどの系統もあります。
・**debian**
　└Knoppix、Ubuntu
・**slackware**
　└SuSE
・**Red Hat**
　└Fedora、CentOS
・Gentoo
・Arch

###シェア割合
Web系サービスで使われているOSではUbuntu、Debian、CentOSの３つが半数以上のシェアを獲得しています。
・Ubuntu：36.4%
・Debian：17.2%
・CentOS：12/0%

>◼️Ubuntuが選ばれる理由
https://japan.zdnet.com/article/35084172/
◼️LinuxOSの派生特徴
https://eng-entrance.com/linux-distribution-compare
◼️系統図
https://gigazine.net/news/20060827_linux_distributions/

##それぞれの特徴
###Debian
・ユーザーフレンドリー
・無償
・普通のパソコンとして使われるケースが多い
> Debianの宣言
1. Debian は 100% フリーソフトウェアであり続けます
2. 私たちはフリーソフトウェアコミュニティにお返しをします
3. 私たちは問題を隠しません
4. 私たちはユーザとフリーソフトウェアを大切にします
5. 私たちのフリーソフトウェア基準に合致しない著作物について

##Slackwere
・長い歴史に支えられた堅牢なOSであり安定性が高い
既に実績があるソフトウェアのみを含んだリリースが行われるので極めて安定性が高く、もっとも固いディストリビューションの評価を受け続けている。
・高いカスタマイズ性故に初心者には敷居が高い

##RedHut
・RedHat社が開発
・有償(無償版hはCentOSとFedora）
・商用向けの有償サポートがあるため、商業寄りまたは企業寄りのイメージが強い
　日本市場での商用 Linux シェアは約 85%を占める

##参照
[ZDNet Japan](https://japan.zdnet.com/article/35084172/)
[Linuxコマンドリファレンス](https://webkaru.net/linux/command-reference/)
[W3Techs](https://w3techs.com/technologies/history_details/os-linux)
git　まとめ

#目次
<b>①gitのインストールと準備</b>
<b>②ディレクトリをgitで管理する準備</b>
<b>③gitコマンド各種の説明</b>


##①gitのインストールと準備
git config --global user.name "設定したいユーザー名を入力する"
git config --global user.email "設定したいメールアドレス名を入力する"

##②ディレクトリをgitで管理する準備
アプリケーションのディレクトリでターミナルで
git init　
をする。　

##③gitコマンド各種の説明
<b>・git status</b>
変更されたファイルを確認することができるコマンド。

<b>・git add -A</b>
リポジトリ内に変更のあったファイル全てをステージング・エリアに移動するコマンド。
この時点では保存（コミット）されてはおらず、一時待機用のリポジトリに置かれているということを覚えておく。

<b>・git commmit -m "メッセージ内容"</b>
ステージングにある内容をローカルリポジトリに保存反映（コミット）するコマンド。

<b>・git push</b>
git push origin [ブランチ名]で特定のブランチをリモートブランチへpushするコマンド。

<b>・git checkout</b>
git checkout -b [トピックブランチ名]でトピックブランチが生成されると同時に、
現在いるブランチが作成したブランチに切り替わる。

git checkout <ブランチ名>で特定のブランチに移動ができる

<b>・git merge</b>
現在チェックアウトしているブランチに対して、別のコミットが持っている変更内容を
統合するためのコマンド。

<b>・git pull</b>
特定のリモートブランチの変更をローカルのカレントブランチへ反映するコマンド。

◯参考記事
https://qiita.com/gold-kou/items/7f6a3b46e2781b0dd4a0
Laravel-adminのインストール方法（laravel８）

##自分用メモ

windows10
wsl2:ubuntu
PHP 7.4.16 
laravel8.12
laravel-admin1.8


###Laravelのインストール

まず普通にlaravelをインストールする。

```ubuntu.
composer create-project laravel/laravel --prefer-dist admin
```

###laravel-adminのインストール
その後、
.envファイル,database.configを設定する。
databasename、username,passの設定。

名前を付けたadminフォルダに移動して、

```ubuntu.
composer require encore/laravel-admin
```

```ubuntu.
 php artisan vendor:publish --provider="Encore\Admin\AdminServiceProvider"
```
```ubuntu.
 php artisan admin:install
```
で自分で設定したローカルホストで見れます。
example:http://localhost:8001/admin/auth/login

以上
【Python】ImportError: No module named ~と表示される

##事象


```
import schedule
・・・
・・・
    schedule.run_pending()

```

として「schedule」モジュールを実行しようとしたところ、エラーが表示された。

```
ImportError: No module named 'schedule'
```

##解決方法

まず「schedule」モジュールがインストールされていることを確認する。

```
pip show schedule
```

```
Name: schedule
Version: 1.0.0
Summary: Job scheduling for humans.
Home-page: https://github.com/dbader/schedule
Author: Daniel Bader
Author-email: mail@dbader.org
License: MIT
Location: c:\users\***\anaconda3\lib\site-packages
Requires:
Required-by:
```

インストールされていることが分かったので、
LocationでインストールされているPATHを確認。

モジュール検索パスに上記PATHが入っているか確認するために、
Pythonの対話モードを起動し、sys.pathを表示する。

```
Type "help", "copyright", "credits" or "license" for more information.
>>> import sys
>> print(sys.path)

['','C:\\Users\\***\\Anaconda3\\lib\\site-packages\\win32\\lib', 'C:\\Users\\***\\Anaconda3\\lib\\site-packages\\Pythonwin']

```

どうやら入っていないよう。以下コマンドで追加してあげる。

```
sys.path.append('c:\\users\\***\\anaconda3\\lib\\site-packages')
```

もう一度実行したらエラーが解消された！
VSCodeでSvelte+ASP.Net CoreでJWTを利用したSPAの認証（セキュリティ）

#初めに
　社内システムを主にやっていたので、WEBのセキュリティについては少し疎いので今後のために、今回のSvelte+ASP.Net coreの環境でのセキュリティを考えてみました。間違ってるとかこうすべきとか教えてほしいです。

#IPAの資料を基にしました。
　セキュリティー対策についてはいろいろなものがネットに転がっていますが、今回はIPAで[安全なウェブサイトの作り方](https://www.ipa.go.jp/security/vuln/websecurity.html)をもとに、今回の開発環境を検証してみてみたいと思います。この記事を書くにあたって、いろいろと見て回ってはいますが。

#SQLインジェクション
　EntityFrameworkの機能で処理している分には、問題なさそうです。直接SQL書くようなことは基本ないはずです。そのような事象にあたっても、文字列の結合で作らず、パラメタライズドクエリー（というか一般的にはプレースフォルダーを使うというんでしょうか）でやってれば大丈夫かと。というか、文字列結合でSQL書くな！っとことですよね。

#OSコマンド・インジェクション
　これは、気を抜くと発生しそうですね。サーバー内でシェルやそれに近い機能を実行すること、特に送られてくるパラメータを利用するコマンドを実行する場合は、要注意ですね。基本使わないこのがいいかと思いますが、使いたいときがありそうに思います。

#パス名パラメータの未チェック／ディレクトリ・トラバーサル
　基本的にファイルを操作する場合、ファイルやフォルダ名をユーザーが入力できる環境を提供しないことですね。何らかの理由で使うファイルは固定パスにするのはもちろん、ユーザーデータとして保存するようなファイルがあった場合も、書かれている対策にはユーザー入力をチェックするようなことが書かれていますが、ユーザーが見る名称と実際のファイル名は別で管理し、ファイル名のほうはシステムで設定するような作りにするのがいいかと思います。

#セッション管理の不備
　基本的にセッションは使わない方向です。サーバーアクセスはステートレスなデータ操作に特化し、状態管理はフロントエンドでする方向で。サーバーアクセスをJWTで常に承認が必要な状態にしておけばだいじょうぶかと。

#クロスサイト・スクリプティング
　今回の環境ではHTMLはフロントエンドでの実装ですので、Svelteのプレースフォルダを使う限りは自動的にエスケープしてサニタイズしてくれます。SvelteのAPI説明にありますが、「{@html}」を使わなければ問題ないかと。「{@html}」を使う場合は要注意です。DOM Based XSSでも、結局はページ内に別のスクリプトを侵入させるのは同じでその元ネタが違うのですから、最終HTMLに表示するところでサニタイズされれば大丈夫でしょう。

#CSRF（クロスサイト・リクエスト・フォージェリ）
　JWTを使っての認証と承認ですので、大丈夫かと。（ちなみにASP.Net core MVCの場合は自分でAntiForgeryの設定が必要そうです。Razorの場合は基本的にAntiForgeryがテンプレートで設定されたと思います。）

#HTTPヘッダ・インジェクション
　今のところレスポンスヘッダを自身で設定したことがないのですが、「HttpResponse.AppendHeader」を使っていれば大丈夫でしょう。ASP.Net coreではレスポンスヘッダを直接編集するほうが難しそうです。ちゃんと改行ははじいてると思いますが、試してみます。

#メールヘッダ・インジェクション
　これはちょっと厄介そうです。スパムの発生元となるみたいですね。メール送信を行う場合、使っているライブラリ（フレームワーク内にあるならばフレームワーク）が対策しているかどうかチェックしておくか、ユニットテストで確認しておく必要がありそうです。自分でメール送信をフルスクラッチすることはほぼないと思うので。

#クリックジャッキング
　これは対策すべきか。基本的にiframeで別のページから参照させたいような条件がない限り、使えなくしておくに越したことはないので、「X-Frame-Options」は「DENY」設定しておこうかと思います。これに関連して見たレスポンスヘッダの記事がよさそうだったので、あとで参照を書いておきます。

#バッファオーバーフロー
　C#とかでやってる限り問題ないが、その下でC++のライブラリなどを使うことがあるなら要注意。でもどれがそうかわからないので使っているライブラリやパッケージは常に最新を心がけ、できればユニットテストで危なそうなものは確認しておくとかでしょうか。

#アクセス制御や認可制御の欠落
　まあ、基本的にバックエンドではログインや一般参照ページ以外は承認が必要にしておくこと（コントローラに[Authorize]を必ずつける）。また、処理によってはロールなどで使えるユーザーを限定する。また、画面遷移時に未認証が発覚すればログインページに戻す処理を入れておくとかでしょうか。

#ついでレスポンスを少しセキュアにする
　ついでに、「[ASP.NET Core でセキュアな レスポンスヘッダー を設定する](https://blog.beachside.dev/entry/2020/06/10/183000)」を参考に、いくつかのヘッダを追加しておくとより良いかと思います。必要なければRefereも出さないようにしておくのがよさそうですし。

　今どきのフレームワークは優れていて、いろいろと対策してくれてますね。それでも作る際に気を付けておくべきことはけっこうあるなー。
　また、新しい手口もすぐに出てくるので、情報には敏感になっている必要がありますね。
emmet機能が便利

#emmet機能

Emmet（エメット）は、HTMLとCSSの入力補完ツール

##使用例

何も書かれていないHTMLファイルに`!`を入力し、`tabキー`を押すとHTMLの雛形ができる

```html:~~.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
```

HTMLファイルのbodyタグの中で`.test`と入力し、`tabキー`を押すと`<div class="test"></div>`と変換されて表示

>
CSSでclass属性にスタイルを指定する際、`.class名`と入力したのと同様
>>
`.`が`class属性`を表し、
`.`以降が`class属性の名前`を表す

##ちょっと上級編？

```:~~html
ul>li*5
```
上記を入力、TABキーを押してみると…

```
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
```

上記の通り変換せれて表示がされる
>
圧倒的時短!!
尚且、うっかり入力ミスもなくなる

###emmet機能参考リンク

[cheat-sheet](https://docs.emmet.io/cheat-sheet/)
[VSCodeでEmmet入門](https://technical-creator.com/vscode-emmet/)
[ドットインストールemmetレッスン](https://dotinstall.com/lessons/basic_emmet_v3)
リモートデスクトップクライアント(MSTSC.EXE)とクライアントリソースのリダイレクト

サーバメンテナンス用として一般的にリモートデスクトップで接続し作業を行うと思います。
公開アプリケーションとしてMSTSC.EXEを設定する方法について考えてみましょう。

クライアントドライブなどのクライアントリソースをリダイレクトさせたくない場合には、接続先のサーバで次のポリシーを設定します。

```
[コンピュータの構成]
 -[管理用テンプレート]
  -[Windowsコンポーネント]
   -[リモートデスクトップサービス]
    -[リモートデスクトップセッションホスト]
     -[デバイスとリソースのリダイレクト]
     　- ドライブのリダイレクトを許可しない -> 有効
```

このポリシーが適用されていればクライアントドライブのリダイレクトは無効になります。
RDPで接続してサーバのメンテナンスを行うユーザアカウントは、通常ある程度の管理者権限を付与されているため、このポリシーを変更されてしまうとリダイレクトが有効になってしまいます。
接続元(MSTSC.EXE)でリダイレクトを無効にするポリシーを有効にすれば問題ないように思えますが、そのようなポリシーは存在しません。

日本語で書かれた情報葉を見かけたことがないのですが、MSTSC.EXEは起動するときに次のレジストリを
参照しています。

```
キー：HKLM\SOFTWARE\Microsoft\Terminal Server Client
名前：DisableDriveRedirection

キー：HKLM\SOFTWARE\Microsoft\Terminal Server Client
名前：DisableClipboardRedirection

キー：HKLM\SOFTWARE\Microsoft\Terminal Server Client
名前：DisablePrinterRedirection
```

`DisableDriveRedirection`は、ドライブリダイレクト機能を無効にします。
`DisableClipboardRedirection`は、クリップボードの機能を無効にします。
`DisablePrinterRedirection`プリンタリダイレクトの機能を無効にします。

これらのキーにREG_DWORDで「1」を設定すると機能を無効化することができます。
ちなみに、HKCUにも同じキーがあります。

メンテナンス用として踏み台用のWindows 10やサーバOSを運用している場合には、セキュリティー強化の目的で設定することをお勧めします。
XenApp環境の公開アプリケーションでMSTSC.EXEを公開する場合にもセキュリティー強化の目的で
設定することをお勧めします。
StoreFrontのデフォルト認証をSSO(シングルサインオン/パススルー)に変更する

シングルサインオンが有効に設定されているStoreFrontへ初回接続すると、認証方式を選択する画面が表示されます。
通常のクライアント端末(FATクライアント)であれば設定した内容をCookieに保存できるので次回ログイン時にも設定を記憶しているのですが、再起動すると初期化されてしまうシンクライアントでは接続するたびに認証情報を選択する画面が表示されてしまいます。

クライアントがブラウザよりアクセスすると、StoreFrontは保存されているCookieの情報を確認します。
Cookieの値`CtxsAuthMethod`を確認し、この値が`IntegratedWindows`に設定されているとSSOが有効になり、`ExplicitForms`が設定されていたり、CtxsAuthMethodのCookieが見つからなければユーザIDとパスワードの画面や、認証方式を選択する画面が表示されます。

クライアントが接続すると、StoreFrontより最終的には「receiver.html」が返されます。
負荷分散(LB)用途でNetScalerが導入されていればNetScalerでCookieを埋め込むとSSOをデフォルトで有効にできるのですが、そのような環境でなければreceiver.htmlを直接修正する方法しか思いつきません。

今回は、receiver.htmlのヘッダーに次の1行を追加し、デフォルトをSSOに変更する対応を行いました。

```
<meta http-equiv="set-cookie" content="CtxsAuthMethod=IntegratedWindows">
```

他にもいい方法ああると思うのですが・・・。
[VSCode]TypeScript 絶対パスでAuto Importを行う

## はじめに

VSCodeでモジュールのAuto Importを行った際、下記のようになったことはないでしょうか？</br>
絶対パスでimportして欲しいものです。

``` ts
import { TestModel } from '../../../model/test.model';
```

2021年4月時点

## 環境

- VSCode: 1.55.0
- TypeScript: 4.2.3

## VSCodeの設定

VSCodeの設定で対処できます。

``` settings.json
{
  "typescript.preferences.importModuleSpecifier": "non-relative"
}
```

tsconfig.jsonのbaseUrl、pathsの設定を使って絶対パスでのimportができるようになります。

``` ts
import { TestModel } from 'src/app/shared/model/test.model';
```

## オプション一覧

1. shortest(default)
    - 相対インポートよりもパス セグメント数が少なくなる場合にのみ、非相対インポートを優先します。

1. relative
    - インポートされたファイルの場所への相対パスを優先します。

1. non-relative
    - jsconfig.jsonまたは tsconfig.jsonに構成されているbseUrlまたはpathsに基づいて非相対インポートを優先

1. project-relative
    - 相対インポート パスでパッケージまたはプロジェクトディレクトリが提供される場合にのみ、非相対インポートを優先します。ワークスペースでTypeScript 4.2 + を使用する必要があります。
【Python】値を省略してenum（列挙型）を定義する方法（備忘録）

# 通常の書き方

通常はenumクラスに**name**と**value**を定義する。
ただこれだと要素の数が増えると大変。

```python
from enum import Enum

class Color(Enum):
     RED = 1
     BLUE = 2
     GREEN = 3

print(Color.BLUE.name)
print(Color.BLUE.value)
```

```
BLUE
2
```

# 省略した書き方

多くの用途で列挙型の実際の値は使わないので省略する。
値に**auto**インスタンスを使用することで省略可能。
Enum, IntEnum, Flag, IntFlag のすべてに適用可能。

```python
from enum import Enum, auto

class Color(Enum):
     RED = auto()
     BLUE = auto()
     GREEN = auto()

print(Color.BLUE.name)
print(Color.BLUE.value)
```

```
BLUE
2
```

以上

https://docs.python.org/ja/3/library/enum.html#using-auto
AWSでWebアプリをデプロイする方法(Java)⑤

#SSHで接続する
Amazon Linux 2をインストールしたEC2インスタンスに接続するには、SSHで操作します

###利用環境
OS:MacOS
ブラウザ:Chrome

###前提条件
EC2インスタンスの作成が終わっている状態
まだ、EC2インスタンスの作成が終わっていない方は[こちら]
(https://qiita.com/kunrenyouAcount/items/9537ecc45d34349e9759)

##SSHで接続する
###キーペアファイルを適当な位置に配置する
キーペアファイルを適当な位置に配置する(/Users/koyamatakumi/Documents/Development/practice/aws/myserverkey.pem)


###アクセス権を400に設定する
ターミナルを起動し、下記コマンドを入力し、キーペアファイルのアクセス権を400に変更します。

```
sudo chmod 400 /Users/koyamatakumi/Documents/Development/practice/aws/myserverkey.pem
```

[Password]の入力を求められた場合は、Macのパスワードを入力してEnter

###接続する
下記のsshコマンドを入力して接続します
※キーペアのファイルのパスと、ec2-user@以降は、変更して使用してください

```
ssh -i "/Users/koyamatakumi/Documents/Development/practice/aws/myserverkey.pem" ec2-user@13.115.141.44
```

[yes/no]の入力を求められた場合は、[yes]を入力してEnter

###接続確認
下記のように表示されていれば、接続完了です
![スクリーンショット 2021-04-06 2.01.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1066052/5abee9db-e974-15c2-21ae-99e5de13de87.png)



##SSHでの操作とrootユーザーへの切り替え
###rootユーザーのサインイン
下記コマンドを入力し、rootユーザーへサインインします

```
sudo -i
```

###rootユーザーのサインアウト
下記コマンドを入力し、rootユーザーをサインアウトします

```
exit
```

##ユーザーの見分け方

####ルートユーザー
```
#
```

####一般ユーザー
```
$
```

#AWSでWebアプリをデプロイする方法⑥
[Apacheのインストール](https://qiita.com/kunrenyouAcount/items/d10fb9a73e911d7f4937)
【JavaScript】ScrollReveal.jsを使ってスクロールしたらふわっと表示される動きの作り方


#ScrollRevealとは

スクロールして表示される要素をアニメーション化するJavaScriptライブラリです。

**要素が画面に表示されたら、指定したアニメーションを実行してくれる**優れものです。
「ふわっと表示」「下から表示」「遅れて表示」など簡単に実装することができます。

公式サイト：[ScrollReveal.js](https://scrollrevealjs.org/)

#ScrollRevealの使い方

ライブラリをscriptタグで読み込み、対象の要素にクラスを与えてJavaScriptからアニメーションを指定するだけです。
CDNは公式サイト：[ScrollReveal.js](https://scrollrevealjs.org/)のインストールから読み込みます。

```html:CDN
<script src="https://unpkg.com/scrollreveal"></script>
```

#対象の要素にクラスを与える

```haml
<h2 class="animate">WORKS</h2>
```

```javascript
ScrollReveal().reveal(".animate");
```
この一行を追加するだけで、スクロールでふわっと表示されるようになります。
#ScrollRevealのオプション追加
ScrollRevealでは下記のようにオプションを指定することで、アニメーションの詳細な動きを指定することができます。

```javascript:javascript
ScrollReveal().reveal(".animate", {
  origin: "bottom",　//下からふわっと表示させる
  distance: "50px", //表示された時に要素を50px移動させる
  duration: 800, //アニメーションの完了まで0.8秒。
  viewFactor: 0.5, //画面が表示エリアに対して0.5でアニメーションを開始
  reset: true,　//何回もアニメーション表示
});
```
どのようなオプションがあるかは[ScrollReveal.js](https://scrollrevealjs.org/api/delay.html)より確認することができます。


#まとめ
こういったアニメーションは使いどころを考える必要がありますが、適切な場面で使えば大きな効果が出ると思います。
使う場面があればぜひこちらのライブラリを使用してみてください。
el-tableの横幅をコンテンツの幅に合わせるのに苦労した話

# 環境
* Vue 2.6.11
* Element UI 2.13.0

# はじめに
HTMLのtableタグで作るテーブルの横幅はコンテンツの幅によって決まります。ですが、Element UIのテーブルは横幅が100%になるため、コンテンツの量が少ないとスカスカに見えてしまいます。そのため、HTMLのtableタグのようなテーブルにしたかったのですが、これが一筋縄ではいきませんでした。

要するにこういうのを
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291442/548fe242-df39-aa31-6f70-c22386a86ddf.png)
こうしたいということです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291442/1853031b-f333-f754-2fbd-c4172094630f.png)

# テーブル全体の横幅の変更
テーブル全体の横幅はブロック要素をインライン要素に変更して、横幅の指定を初期化することによって縮めることができます。

```css:Table.vue
.el-table {
  display: inline-block;
  width: initial;
  max-width: initial;
}
```
しかし、これだけではこんな風に縮みすぎてしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291442/ca51183f-0c1b-3e0a-3aa9-97cf517fa22a.png)

HTMLのtableタグであれば、`white-space: nowrap;`でセル内の折り返しを抑制できるのですが、el-tableの場合は列幅を自力で計算するしかありません。

# テーブルの各列の横幅の変更
コンテンツの文字数に応じて列幅を設定するために、次のようなメソッドを作成します。

```javascript:Table.vue
getColumnWidth (rows, headerTitle, columnName) {
  let maxLength = this.getLength(headerTitle)
  for (const row of rows) {
    const length = this.getLength(row[columnName])
    if (length > maxLength) maxLength = length
  }
  return maxLength * 8 + 20
}
```
ここで「8」は1文字の長さで「20」は左右の余白の幅です。また、全角文字は2文字とカウントしたいので、文字数を取得するメソッドも作成します。

```javascript:Table.vue
getLength (str) {
  let length = 0
  for (let i = 0; i < str.length; i++) {
    const c = str.charCodeAt(i)
    if ((c >= 0x0 && c < 0x81) || (c === 0xf8f0) || (c >= 0xff61 && c < 0xffa0) || (c >= 0xf8f1 && c < 0xf8f4)) {
      length += 1
    } else {
      length += 2
    }
  }
  return length
}
```
ここまで作成ができたら、テーブルの各列で横幅を設定します。

```vue:Table.vue
<el-table-column :width="getColumnWidth(rows, '都道府県', 'prefecture')">
</el-table-column>
```
するとこうなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291442/f051c3ad-6fe0-e98d-4535-e49bc9371a40.png)
良い感じですね。もう一息です！

# 他の要素をテーブルの幅に合わせる
例ではページングの要素がテーブルから離れすぎているので、テーブルの右端に合わせたいです。ですが、テーブルの横幅は動的に計算しているので、事前には分かりません。こういう時はVueの`$nextTick()`を使ってDOM要素がレンダリングされた後にテーブルの横幅を取得して設定します。

```javascript:Table.vue
search () {
  // テーブルに表示するデータを設定する処理
  // ・・・
  this.$nextTick(() => {
    let width = 0
    for (const child of this.$refs.table.$children) {
      if (child.width) width += child.width
    }
    this.$refs.paging.style.width = width + 'px'
  })
}
```
これで完成です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291442/f14f4771-6dd9-3a66-6923-c3b08d4537fd.png)

# さいごに
自分でやってみて、el-tableの標準機能でできない理由が何となく分かった気がします。。
Homebrew の不要パッケージをリストアップする

Homebrew で多くのパッケージ (formula) を入れていると、どれが明示的に入れたやつでどれが依存関係として入れたやつなのかがわからなくなってしまう。また、`brew uninstall` でパッケージを削除しても依存しているパッケージは削除されずに残ってしまうため、入れたり消したりを繰り返していると未使用のパッケージが溜まっていってよくわからなくなってしまう。

そこで今回は、パッケージの情報を Python で加工して、不要なパッケージをリストアップして削除してみる。

## インストールされているパッケージの情報を取得する
`brew info` コマンドを使うと、インストールされているパッケージの情報を JSON で出力できる。

例えばこんな感じ。

``` console
$ brew info --json neovim | jq .
```

``` json
[
  {
    "name": "neovim",
    "full_name": "neovim",
    "tap": "homebrew/core",
      :
    "dependencies": [
      "gettext",
      "libtermkey",
      "libuv",
        :
    ],
    "installed": [
      {
        "installed_as_dependency": false,
        "installed_on_request": true,
          :
      }
    ],
      :
  }
]
```

※ 長いので上記の出力はいろいろ省略している

インストールされている全てのパッケージ情報を取得するには `--installed` を指定する。

``` console
$ brew info --json --installed > brew_installed_formulae.json
```

## 未使用パッケージをリストアップする
先ほど出力した `brew_installed_formulae.json` を Python で読み込んで未使用パッケージをリストアップしてみる。
`installed_on_request` というフラグを使えば、依存関係から未使用パッケージを集計できそう。

まずは JSON ファイルを読み込む。

``` python
import json

with open("brew_installed_formulae.json") as f:
    d: dict = {f["full_name"]: f for f in json.load(f)}
```

依存関係ではなく、直接インストールされたパッケージの一覧を取得する。

``` python
installed_on_request: set = {k for k, v in d.items() if v["installed"][0]["installed_on_request"]}
```

それぞれのパッケージの依存しているパッケージを再帰的に取得する。

``` python
def list_deps(d: dict):
    """依存している formulae を再帰的に取り出す関数"""

    def _list_deps(full_name: str) -> list:
        return sum([[f["full_name"]] + _list_deps(f["full_name"]) for f in d[full_name]["installed"][0]["runtime_dependencies"]], [])
    
    return _list_deps


deps: set = set(sum([list_deps(d)(f) for f in installed_on_request], []))
```

未使用パッケージを計算して出力する。

``` python
unused: set = set(d.keys()) ^ (deps | installed_on_request)
print(" ".join(unused))
```

## 未使用パッケージをアンインストールする
上記を実行すると例えばこんな感じで出力されるので、あとはまとめて `brew uninstall ...` するだけでよい。

```
sqlite readline python@3.9 mpdecimal xz gdbm
```

## その他
同様のやり方で、「このパッケージが何に依存されているか調べる」とか「Brewfile を自動生成する」とかいろいろできそう。
ROSの勉強　第38弾：ツールの基礎まとめ

# #プログラミング ROS< ツールの基礎まとめ >

##はじめに
1つの参考書に沿って，ROS(Robot Operating System)を難なく扱えるようになることが目的である．その第38弾として，「ツールの基礎まとめ」を扱う．

##環境
#####仮想環境
|||
|:-:|:--|
|ソフト|VMware Workstation 15|
|実装RAM|2 GB|
|OS|Ubuntu 64 ビット|
|isoファイル|ubuntu-mate-20.04.1-desktop-amd64.iso|

#####コンピュータ
|||
|:-:|:--|
|デバイス|MSI|
|プロセッサ|Intel(R) Core(TM) i5-7300HQ CPU @ 2.50GHz 2.50GHz|
|実装RAM|8.00 GB (7.89 GB 使用可能)|
|OS|Windows (Windows 10 Home, バージョン：20H2)|

#####ROS
|||
|:-:|:--|
|Distribution|noetic|

##ツールの基礎まとめ
以下のスライドにより簡単にROSツールをまとめた．なお，すべて網羅できているわけではない．
<iframe src="https://docs.google.com/presentation/d/1Y_-cuvHW_fc3SY6OP5hBiePRpnoGJImvy1l19NYYRwE/embed?start=false&loop=false&delayms=3000" frameborder="0" width="500" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

##感想
今回はスライドにまとめたということで非常に短いが，重要な部分を学ぶことができたと思う．特にparamあたりの内容はいまいち理解ができていなかったため，よい学習機会であった．もうすぐこの教材も終わりに近づいてきているが，いまいちど気を引き締めていきたい．


##参考文献
プログラミングROS Pythonによるロボットアプリケーション開発
　　　　　　　　Morgan Quigley, Brian Gerkey, William D.Smart 著
　　　　　　　　　　　　　　　　　　　　　　　河田　卓志　監訳
　　　　　　　　　　  　松田　晃一，福地　正樹，由谷　哲夫　訳
　　　　　　　　　　　　　　　　　　オイラリー・ジャパン　発行
tailwindcss2でのlayout

# この記事の目的

tailwindcssでlayoutを組むときのパターン集

# pcで2カラム、spで1カラムのレスポンシブデザイン

```html
<div class="overflow-hidden">
  <div class="float-left w-full md:w-1/3 p-4">
    <p>ababa</p>
  </div>
  <div class="float-left w-full md:w-2/3 p-4">
    <p>ababa</p>
  </div>
</div>
```

- floatで2カラムに
- mdでmin-widthを指定し、レスポンシブに
- overflow-hiddenで親要素を認識されるようにする
Javaの基本文法

##Javaの基本的な文法
スクールではRubyを主に学んでいたのですが、企業様からの課題で初めてJavaに触れる機会があったのでアウトプットしていきます。

##Javaの構造

![スクリーンショット 2021-04-06 22.00.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918117/b4b80b96-280c-3abf-3cae-64030f4ef33c.png)

Main.javaには、出力の命令以外にもコードが書いてあります。これらは下図のように、クラス部分、メソッド部分、メソッド内の処理部分に分けられます。

##出力

System.out.println()の()の中に文字を書くと文字が表示されます。
文字列をダブルクォーテーション("")で囲まないと出力されないので注意してください。

```
class Main {
  public static void main(String[] args){
    System.out.println("Hello Java");
  }
}

=> "Hello Java"
```

例えば文字列の"3"と数値の3（" "で囲まない）は別物として扱われます。また下図のように、5 + 2は7になりますが、"5 + 2"はそのまま「5 + 2」という文字列として出力されます。


```
class Main {
  public static void main(String[] args) {
    System.out.println(17);
  }
}

=> 17
```

##コメント

コード内にはコメントを書くことができます。
コメントはコードが実行されるときにすべて無視されるので、メモなどを残しておくことができます。
下図のように「//」と書くことで、そこから行末までがコメントとみなされます。




```
class Main {
  public static void main(String[] args) {
    //この文章をコメントにします
  }
}
```

##四則演算

足し算「＋」
引き算「ー」
掛け算は「＊」(アスタリスク)
割り算は「/」(スラッシュ)
割り算の余りを計算は「%」（パーセント）

```
class Main {
  public static void main(String[] args) {
    System.out.println(1 + 3);
    System.out.println(5 - 3);
    System.out.println(12 / 3);
    System.out.println(3 * 6);
    System.out.println(8 % 3);
  }
}

=> 4
=> 2
=> 4
=> 18
=> 2
```
phpで現在の「年」「月」「日」「時」「分」「秒」を取得する方法（0なしバージョンあり）

#どうも7noteです。phpで現在時刻や年月日を取得する方法

PHPを使って日本時間（JST / UTC+0900）で

**「年」「月」「日」「時」「分」「秒」**

を取得していきます。
0を入れないパターンもありますので用途に合わせてお使いください。

## 「年」を取得する方法

```php
date_default_timezone_set('Asia/Tokyo');
date('Y'); // 2021
```

## 「月」を取得する方法

```php
date_default_timezone_set('Asia/Tokyo');
date('m'); // 04
date('n'); // 4 (0なし)
```

## 「日」を取得する方法

```php
date_default_timezone_set('Asia/Tokyo');
date('d'); // 05
date('j'); // 5 (0なし)
```

## 「時」を取得する方法

```php
date_default_timezone_set('Asia/Tokyo');
date('H'); // 00
date('G'); // 0 (0なし)
```

## 「分」を取得する方法

```php
date_default_timezone_set('Asia/Tokyo');
date('i'); // 00
intval(date('i')); // 0
```

## 「秒」を取得する方法

```php
date_default_timezone_set('Asia/Tokyo');
date('s'); // 00
intval(date('s')); // 0
```

## すべて繋げて書き出す

### ▼ 0ありバージョン
```php
date_default_timezone_set('Asia/Tokyo');
echo '<p>'. date('Y年m月d日 H時i分s秒').' Asia/Tokyo'. '</p>';
```

**結果**

2021年04月05日 00時00分00秒 Asia/Tokyo

### ▼ 0なしバージョン
```php
date_default_timezone_set('Asia/Tokyo');
echo '<p>'. date('Y年n月j日 G時'). intval(date('i')). '時'. intval(date('s')). '分'. ' Asia/Tokyo'. '</p>';
```

**結果**

2021年4月5日 0時0時0分 Asia/Tokyo


## まとめ

日本は基準となるロンドンからみて東経135度となり、これは9時間プラスされることになります。
それを自動算出してくれるのが`date_default_timezone_set('Asia/Tokyo');`です。
あとはdate()関数を使って好きな時間や日を抽出するだけ。
0付きや0なしは私もなかなか覚えられないので（自分用に）記事にまとめました。
だれかのお役に立てれば。

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
Nvidia GPUをコンピューティング用途だけで使う

# やりたいこと
ノートPCでGPUのグラフィックスを画面表示に使っていると、GPUの計算とバッティングするのか不具合がよく起こる
例) モニターつなげても表示されない等
画面表示はIntel内蔵で十分だけど、nvidia-settingsでintelにしちゃうと計算にも使えなくなるので、いい感じにする

# この手順を使う

https://gist.github.com/wangruohui/bc7b9f424e3d5deb0c0b8bba990b1bc5

# ちらつきがあったら

https://askubuntu.com/questions/1231824/fuzzy-graphics-after-upgrading-to-ubuntu-20-04

```
sudo apt purge xserver-xorg-video-intel
```

# /etc/X11/xorg.conf の設定例

モニタ名確認
```
xrandr
```

```
Section "ServerLayout"
    Identifier "layout"
    Screen 0 "intel"
EndSection

Section "Screen"
    Identifier "intel"
    Device "intel"
EndSection

Section "Device"
    Identifier "intel"
    Driver "modesetting"
    BusID "PCI:0:2:0"
    Option "AccelMethod" "SNA"
    Option "monitor-HDMI" "HDMI-1"
    Option "TearFree" "true"
EndSection

Section "Monitor"
    Identifier "HDMI-1"
    Device "intel"
EndSection
```


Bus IDは以下で確認

```
lspci | egrep 'VGA|3D'
```
IQ Botのカスタムロジックでそのまま使える文字列置換スクリプト

最近IQ Botを使うことが増えてきましたが、
読取った項目に「ザーマエ　株式会社」みたいなものがあったり、
「○○ ○○ 様」みたいなものがそこそこあり、IQ Botで実装可能なPythonによる後処理の「カスタムロジック」で文字列置換を良く使います。

自分用のメモも兼ねてすぐ使えるスクリプトを貼っておきます。

### シンプルな置換。半角スペースの削除。

```
field_value = field_value.replace(" ","")
```

### 正規表現を使った置換。末尾の半角スペース+様を削除する。
"?"がついているので、半角スペースがあれば一緒に置換するし、無ければ無視してくれる。

```
import re
field_value = re.sub(r'\s?様$', '', field_value)
```

reモジュールを呼び出し、正規表現「\s?様$」を使って文字列を置換しています。


### 参考ページ：
[re --- 正規表現操作 — Python 3.9.4 ドキュメント](https://docs.python.org/ja/3/library/re.html)

[IQ Bot のカスタムロジック 基本のキ - Qiita](https://qiita.com/IQ_Bocchi/items/67694b1b0d1376ede7e7)
Jupyter labのterminalで仮想環境を設立する 

#はじめに
はじめまして。普段はマーケティング関連を勉強している大学4年生です。
こちらの記事ではjupyter labにはじめから存在するterminal上で仮想環境を設立、及びkernelで気軽に切り替える方法を紹介します。発展としてlab内でRやbashを使えるようにもしました。


自分はQiitaに存在する先人たちの知恵をお借りしdockerを用いてjupyter環境構築をしていたのですが、毎度dockerコンテナに入って作業をすることが億劫でした。コンテナも稼働しっぱなし（メモリ上良くないですが）のため、lab内で完結させれば楽なのではないかと考えました。記録用としてこちらの記事を書きました。


#前提
・jupyter labのterminalでcondaコマンドが使えること
⇒dockerでコンテナ作成していても、anaconda navigatorからでも構いません。

#本題
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/915480/ca4d5404-4869-0225-1d67-ecfd527acea5.png)

↑上記の画像のようなterminalがlauncherから開かれていれば準備完了です。
もし起動時に(base)root@〇〇:/#　と出ていなければbashやzshなどのコマンドを打てば出ます。

次から作成していきます。

###作成手順

```
①現在の仮想環境を確認
conda info -e 
```

今現在いる環境には＊が頭に付きます。

```
②仮想環境を設立
conda create -n 名前 python=つかいたいバージョン  -y
```
名前は　つけたい自由な名前で大丈夫です。
-y は実行後に出てくる[y/N]の際に、yの打ち込みをしないで通るようにするために書いています。

```
③入りたい仮想環境に切り替える
conda activate 名前
```
＊の位置が変わっていることが確認できます。

```
④カーネルをインストールする
conda install notebook ipykernel -y
```

```
⑤カーネル切り替えできるようにする
ipython kernel install --user ユーザー　--name 仮想環境の名前 --display-name 表示したいカーネルの名前 
```
ユーザーはわからなければ空欄で良いです。

```python:python
⑥実際に確認する
import sys
sys.version
```
確認する場はterminal上でpythonと入力し、上記のコマンドでもいいです。新しくnotebookを作って確認しても良いです。

ここまで来ましたら、おめでとうございます！！新しいnotebookを開いて、kernelから環境を切り替えてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/915480/faf61d54-6a03-a90e-0cbd-6b1c983ed7b6.png)

↑のchange kernelに名前をつけた仮想環境があれば無事完了です。selectから切り替えて作業ができます。
また、launcherから直接仮想環境のnottebookを開くことも可能です。


仮想環境を消すときは

```
conda remove -n 名前 --all
```

で消去可能です。
この時点ではカーネルは削除できていないため、

```
jupyter kernelspec uninstall 表示されている名前
```
でカーネルも消しておくと良いでしょう。

#+α
+αとして、Rとbashをlab内のnotebookで対話形式に実行できるようにします。

Rは以下をterminal実行すればよいです
```
install.packages('devtools')
devtools::install_github('IRkernel/IRkernel')
IRkernel::installspec()
```

bashも以下のコマンド実行で可能になります
```
pip install bash_kernel
python -m bash_kernel.install
```

どちらもR,bashとそれぞれのJupyterカーネルをインストールしています。
先程同様にR,bashが切り替えできることが確認できます。

解析をメインに行う方はRも使う機会が出ると思うため、入れておくと楽になるかもしれません。


#終わりに
今回初投稿ということもあり、非常に拙い記事ではありますがご容赦ください。
この記事がお役に立てたら幸いです。

追記　
python3.6だけterminal側では仮想環境設立できるが、jupyter側に反映されていない状況が出るかもしれません


#参考にした記事
https://qiita.com/ko-ya346/items/9e17c191599d8a6887db

https://qiita.com/tomochiii/items/8b937f15c79a0c3eae0e