OmniAICreator/Qiita-1.07M huggingface dataset:
【Android/Kotlin】RecyclerViewでオーバースクロールした際のエフェクトを消す

RecyclerViewやListView、ScrollViewなどで端までスクロールするとエフェクトが出る。これを消すには`overScrollMode`プロパティに`View.OVER_SCROLL_NEVER`を指定する。

指定できる値

* `OVER_SCROLL_ALWAYS` (デフォルト)
* `OVER_SCROLL_IF_CONTENT_SCROLLS`
* `OVER_SCROLL_NEVER`


```kotlin
val recyclerView = findViewById(R.id.recyclerView)
recyclerView.overScrollMode = View.OVER_SCROLL_NEVER
```
【Nuxt.js】Auth Module×nuxt-i18n ログイン画面を国際化させる方法

Nuxt.jsでアプリケーションを開発する際、ログイン認証にAuth Module、国際化にnuxt-i18nを使いました。

どちらも簡単に実装でき便利なライブラリですが、ログイン画面の国際化がうまくいかずハマってしまいました。

### 問題：言語の切り替えができない

nuxt-i18nを使用することで、アプリケーションを簡単に国際化することができます。

設定方法については、省略しますが、
パスのルートに言語の識別子を追加することで、言語の切り替えを行ってくれます。
例えば、
`/ja/page`だと日本語表示になり、`/en/page`だと英語表示になるように実装できます。
`/page`の場合は、デフォルトに設定した言語で表示されます。

しかし、Auth Moduleを用いてログイン認証を実装している場合、ここで問題が起こります。

Auth Moduleは、下記のように、nuxt.config.jsにログイン画面のパスを`/login`と記述すると、未ログイン時はログイン画面`/login`にリダイレクトしてくれます。

```javascript:nuxt.config.js
export default {
// ...

  auth: {
    redirect: {
      login: '/login',  // ログイン画面のパス
      logout: '/login', // ログアウト時のリダイレクト先
      callback: false,
      home: '/'         // ホーム画面のパス（ログイン後のリダイレクト先）
    }
  }

// ...
}
```

つまり、`/en/login`のようなパスでアクセスしても`/login`にリダイレクトされてしまい、英語ではなくデフォルト言語で表示されてしまうのです。


### 解決策：リダイレクト先を書き換える

nuxt.config.jsで設定したリダイレクト先を書き換えるコードをpluginsに追加します。


```javascript:plugins/auth.js
export default ({ app, route }) => {

  // パスに識別子が存在するときのみ書き換え
  if (route.fullPath.indexOf('/' + app.i18n.locale + '/') === 0) {   
    // nuxt.config.jsで記述したリダイレクト情報を取得
    const redirect = app.$auth.$storage.options.redirect

    for (const key in redirect) {
      // 書き換え後のリダイレクト先を定義
      redirect[key] = '/' + app.i18n.locale + redirect[key]
    }

    // リダイレクト情報の書き換え
    app.$auth.$storage.options.redirect = redirect
  }
}
```

そして、nuxt.config.jsにauth.jsのパスを追記します。

```javascript:nuxt.config.js
export default {
  auth: {
    redirect: {
      login: '/login',
      logout: '/login',
      callback: false,
      home: '/'
    },
    plugins: [            // ******
      '@/plugins/auth.js' // 追記
    ]                     // ******
  }
}
```

これでログイン画面の言語の切り替えが行われます。

例えば、パスが`/en/login`の場合、`/login`にリダイレクトされる前に、ログイン画面のパスを`/en/login`に書き換えるため、`/en/login`にリダイレクトされるようになりました。

### まとめ

今回はpluginsを追加することでリダイレクト先を書き換えるという強引な解決策でした。
もっと良い方法があるかもしれませんが参考になれば幸いです。
もしもっと良い方法があれば教えてください！！
macOSをダウングレードする方法

Macのダウングレード方法メモ
・shift + option + command + R　を押しながらmacを起動
→購入時のOSが指定された状態で初期化される（今回はSierraになった）
・Catalinaまでバージョンを上げる

## はじめに
2020年8月某日、**macOS Big Sur beta** へとアップデートされた業務用 Mac を Catalina にダウングレードさせなければいけない状況になりました。
悲劇的に Time Machine バックアップが無い状況で対応に悩んだのでメモに残しておきます。

## ダウングレードさせる方法
1. Time Machine のバックアップから macOS ごと復元する方法
1. 外付け HDD にインストーラーを作成してから macOS を再インストールする方法
1. インターネット経由で macOS を復元する方法

私が調べた範囲だと上記3つの方法があるとわかりました。
今回はバックアップがなかった、かつ社内に外付け HDD を持ち込めいない状況だったため**3の方法を実施しました。**
<br/>


※ 1と2の方法については以下の記事が参考になるかと思うので記載しておきます。

- Time Machine のバックアップからOSごと復元する方法
  - 参考記事：[**バックアップから Mac を復元する**](https://support.apple.com/ja-jp/HT203981)
- 外付け HDD にインストーラーを作成してから macOS を再インストールする方法
  - 参考記事：[**macOS CatalinaからMojaveにダウングレードした**](https://note.com/toli_torey/n/nf6ec70198dd0)

## 3. インターネット経由で macOS を復元する方法
1. バックアップを取る
1. 内蔵ドライブに **Mac に当初付属していた macOS 、またはそのバージョンに一番近い、現在も利用可能なバージョンを再インストールする**
1. 好みの macOS までアップデートする
1. macOS 以外のバックアップを復元する

ポイントは**2の工程です。**
macOS を再インストールする際、Macの電源を入れた直後に「command + R」を押し続けるかと思いますが、ここでは**「shift + option + command + R」を押し続けます。**
すると最後に Mac にインストールされていたバージョンの macOS ではなく、 **Mac に当初付属していた macOS 、またはそのバージョンに一番近い、現在も利用可能なバージョンが再インストールの対象となります。**


- [macOS 復元について - Apple サポート](https://support.apple.com/ja-jp/HT201314)
- [macOS 復元から macOS を再インストールする方法 - Apple サポート](https://support.apple.com/ja-jp/HT204904)

詳細なインストール手順は上記2つの記事を参考にしていただければと思います。
また、3以降の工程についてはここでは割愛します。（検索して頂ければ、すぐに情報が見つかるかと思います。）

説明は以上となりますが、OSの再インストールはデータ損失のリスクが付きまといます。
なのでこちらの方法を試すときも、**必ずバックアップを取るようにしてください。**


## 参考記事
- [macOS 復元について - Apple サポート](https://support.apple.com/ja-jp/HT201314)
- [macOS 復元から macOS を再インストールする方法 - Apple サポート](https://support.apple.com/ja-jp/HT204904)
- [バックアップから Mac を復元する - Apple サポート](https://support.apple.com/ja-jp/HT203981)
- [macOS CatalinaからMojaveにダウングレードした｜ToLi｜note](https://note.com/toli_torey/n/nf6ec70198dd0)
Flutterの導入(4) ~for Windows10~ Windows で Flutter を扱うときの設定をしよう

Windows で Flutter を扱うときの設定をしよう

---

そんなにいろんなことはしないんだけど。
Windows 上でも Flutter を起動できるテクニカルプレビューがあるようなので、
それで起動するときの設定とやり方を書いておく。

#Windows で Flutter ？
Android Studio とか Visual Studio Code で動かすんでもいいんだけどさ。
俺は個人的には Windows でも動かしたいわけなんですよ。
それが出来るなら、３つの環境で動くクロスプラットフォーム環境だし、
ソースコード１個しか書かなくて済むから、とても気楽なんだよね。

#Visual Studio 2019 をインストールする
[Visual Studio 2019](https://visualstudio.microsoft.com/ja/downloads/) をインストールする。[Visual Studio Community 2019](https://visualstudio.microsoft.com/ja/vs/community/)でいい。
ダウンロードして、インストールするだけ。

#Visual Studio 2019 で使うものをインストールしておく
以下が必要なようだ。

- C++ によるデスクトップ開発
  - MSBuild
  - MSVC v142 - VS 2019 C++ x64/x86 ビルドツール
  - Windows 10 SDK (最新)

Visual Studio 2019 を起動して、メニューから「ツール」「ツールと機能を取得」を選択。
Visual Studio Installer が起動するので、
赤枠のところにチェックが入っているようにして、インストールを行う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194966/c325d69f-74d3-17fc-e096-ecdec03b19f0.png)

#Flutter に Windows を認識してもらう
デフォルトだと Windows 用の機能が無効になっているので有効にしてもらう。

念の為Flutterを更新してから、 --enable-windows-desktop を設定して、
機能を有効にする。

```
C:\src>flutter channel master
C:\src>flutter upgrade
C:\src>flutter config --enable-windows-desktop
```

これでOK。この後、デバイスリストを取得すると、
↓こんな感じに Windows をデバイスとして認識できるようになる。

```
C:\src>flutter devices
1 connected device:

Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.18363.997]
```

これで Windows 上でも Flutter を使ったアプリが起動できるようになった。

# 参考
- Desktop support for Flutter
   - https://flutter.dev/desktop
   - でもまだTechnicalPreviewだからか、Windowsの記載がない
- FlutterでWindowsデスクトップアプリのネイティブ連携をする
   - https://qiita.com/br_branch/items/746ba34cc2d5780ee8db
Flutterの導入(3) ~for Windows10~ Android Studio で Flutter を扱うときの設定をしよう

[Flutterの導入(1)](https://qiita.com/bonkoturyu/items/5ab3d756c24f5b8875a8) で、さらっと触れてたんだけど、Flutter用の設定って何だよ？ってなるだろうから、ここに書いておく。

#Android Studio に Flutter のプラグインを追加する

Android Studio を起動すると、プロジェクトを以前開いてなかった場合は、
↓こんな画面が出てくる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194966/6b81be5d-1d09-297b-0492-b5c76eec73e0.png)

前に何かしらプロジェクトを作ってた人は、一度プロジェクトを閉じれば、
同じ画面になるので、それで確認してみて。

その画面にある歯車のマークをクリックすると、サブメニューが出てきて、
その中に、Pluginというのがあるから、それをクリックする。

左上の拡大鏡マークで、Flutterを検索してインストール。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194966/43b7af32-dddc-cec2-86d8-ac7a5d234650.png)

次にDartを検索してインストール。
Flutterからインストールすると、「Dartもインストールするよ」って言われるはずなので、これは自動的にインストールするかも。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194966/0f36a56b-11b2-c456-6ae8-ead0002a7b10.png)

ココまでが終わると、Android Studio のさっきの画面に、Flutterの項目が追加される。
↓この赤枠のところが増える。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194966/54d0fbb8-01ee-d224-4773-cc4110ad4a95.png)

これで Flutter が Android Studio で使えるようになる。

#参考
- Windowsでflutterインストール
  - https://qiita.com/nkmk1215/items/2b741157bc253350ff18
【Linux】インフラエンジニアの僕が「hostname」コマンドを使わない理由とは？

# はじめに
Linuxの運用監視～設計構築迄経験している僕が、「hostname」コマンドを基本的に使わない理由について書いていきたいと思います。

# 今回の対象OS

Linux系OS全般(RHEL/CentOS/Solaris等)

# そもそも「hostname」コマンドとは？

Linux系OSのホスト名を確認するコマンドになります。

使い方は、こんな感じになります。

```bash:hostname
[root@GitBucket-sv ~]# hostname
GitBucket-sv
[root@GitBucket-sv ~]#
```

このように、ホスト名を確認できるコマンドになります。

詳しくは、こちらのサイトの解説をご覧頂ければと思います。
[【 hostname 】コマンド――ホスト名を表示する／設定する](https://www.atmarkit.co.jp/ait/articles/1612/21/news033.html)

# 基本的に使わない理由とは？

**誤入力にてホスト名が変更されてしまう可能性があるからです。**

誤入力の例は、こちらになります。

```bash:誤入力
【コマンド入力】
[root@GitBucket-sv ~]# hostname i

【ホスト名確認】
[root@GitBucket-sv ~]# hostname
i
[root@GitBucket-sv ~]#
```

このように、ホスト名自体が変更されてしまいます。
(上記の場合、ホスト名が「i」になっている。)




ちなみに、`hostname -i`はサーバーのIPアドレスを確認するコマンドになります。

```bash:IPアドレス確認
[root@GitBucket-sv ~]# hostname -i
fe80::250:56ff:fe8c:2091%ens192 2404:7a80:91a1:4d00:250:56ff:fe8c:2091%2 192.168.0.150
[root@GitBucket-sv ~]#
```

**このように、誤入力でホスト名を変更してしまう可能性があるため、基本的に使用することをおすすめしません。**

# では、何のコマンドでホスト名確認をすればいいのか？

`uname -n`コマンドがおすすめです。

実行例はこちらになります。

```bash:実行例
[root@GitBucket-sv ~]# uname -n
GitBucket-sv
[root@GitBucket-sv ~]#
```

万が一、誤入力をしてしまった場合も問題ございません。

```bash:誤入力の例
[root@GitBucket-sv ~]# uname n
uname: 余分な演算子 `n'
Try 'uname --help' for more information.
[root@GitBucket-sv ~]#
```

このように、エラーが表示されます。


`uname`コマンドについて深く知りたい方は、こちらのサイトの解説をご覧頂ければと思います。
[unameコマンド（OSまたはハードウェアの情報を表示する）](http://itdoc.hitachi.co.jp/manuals/3020/30203S3530/JPAS0263.HTM)


# まとめ

ホスト名を確認する際は、`hostname`コマンドの使用は控えた方が無難です。
→誤ってホスト名を変更してしまう可能性がある。

ホスト名を確認する際は、`uname -n`コマンドにて確認した方が安全です。
→ホスト名を変更してしまう危険性がない
【PHP,Laravel】PHPから変数や配列をまとめて送り、Laravelで表示する方法

とても悩んだので、プログラムを簡略化して記録します。

#問題点

```
name  | number | text
test  |      1 | test
sample|      2 | sample
```

以上のようなとき、一行目しか変数に入らない！

#できた時のプログラム
```index.php
            $count = 1;

            $db = pg_connect("host=host port=5432 dbname=dashboard user=postgres password=○○" ); 
            if(!$db)throw new Exception("DB接続に失敗しました。");

            $search = pg_query("SELECT *FROM board_posted;");
            if (!$search)throw new Exception('クエリーが失敗しました。');

//ここからポイント
            for($i=0;$i<$rows_count;$i++){
                $rows[] = pg_fetch_array($search, $i, PGSQL_ASSOC);
            }

        $info = array(
            "count"=> $count,//数値
            "board"=> $rows//配列
        );
        print_r($rows);

        return view('dashboard')->with('info',$info);
```

print_r($rows)の結果は

```
Array (
[0] => Array (
 [number] => 0 [name] => hoge [text] => This is a sample.
 ) 
[1] => Array (
 [number] => 1 [name] => hoge [text] => This is a sample2.
 ) 
)
```

```index.blade.php.html
      @for($i = 0; $i < $info['board_count']; $i++)
                  <div class="card" style="width: 60rem;">
                  {{$info['board'][$i]['number']}}<!--ここで配列から取り出す-->   
                  </div>
                  <div class="card-body">
                      <table border="1">
                          <tbody>
                          <tr>
                            <td>{{$info['board'][$i]['name']}}</td><!--ここで配列から取り出す-->
                          </tr>
                          {{$info['board'][$i]['text']}}<!--ここで配列から取り出す-->
                      </tbody>
                      </table>
                  </div>
      @endfor
```

当たり前かもしれませんが、$rows[]と配列にしたらできました。
あとlaravel側での取り出し方がポイントでした。
#できなかった時のプログラム

```index.php
            $count = 1;

            $db = pg_connect("host=host port=5432 dbname=dashboard user=postgres password=○○" ); 
            if(!$db)throw new Exception("DB接続に失敗しました。");

            $search = pg_query("SELECT *FROM board_posted;");
            if (!$search)throw new Exception('クエリーが失敗しました。');

            $rows = pg_fetch_array($search, $i, PGSQL_ASSOC);//一行の配列は入る

        $info = array(
            "count"=> $count,//数値
            "board_number"=> $rows['number'],//1個しか入っていなかった
            "board_name"=> $rows['name'],//1個しか入っていなかった
            "board_text"=> $rows['text'],//1個しか入っていなかった
        );
        print_r($rows);

        return view('dashboard')->with('info',$info);
```

#まとめ
このような配列の中に配列があるものを<b>三次元配列</b>というそうです。
普通の配列か、そうでない配列かをわかる必要がありました。
当たり前だなと思いました。が、使わなければ忘れます…。
もっと簡単な記述方法があればご教授ください。
以上です。
初心者がwebpackを調べてまとめてみた

##この記事について
Rails6でポートフォリオを作成していたが、webpackを理解できずに開発を進めていってたから勉強のまとめとして投稿


##参考URL
https://qiita.com/kamykn/items/45fb4690ace32216ca25
https://eng-entrance.com/what-is-nodejs
https://note.com/billion_dollars/n/n596fecfdeb2e
https://qiita.com/ashketcham/items/48d64e960d436f8b6f78

##webpackとは
一言でまとめると**Node.jsで、サーバーサイドで動かすモジュールバンドラーツール**のこと


###さて、いきなり知らん単語ばかりが並んで思考が停止しそうになるぜ。
このwebpackの説明文読んだときの頭の中を表現すると、

「Node.jsって美味しいの？？？」
「モジュールとは・・・」



ここは落ち着いて知らん単語を調べるのみ！！！！



####Node.jsとは・・・
**サーバサイドで動くJavaScriptのこと。**Ruby やPHPなどと同じような働きをしてくれる。

このようにサーバサイドで動くJavaScriptを**サーバサイドJavaScript**と呼ばれるが、その中でも代表的なのがNode.js。（他にも色々あるみたいだけどマイナーらしい。）**Node.js = サーバサイドJavaScript**だと認識しておいてよさげ。




####モジュールとは・・・
**JavaScriptファイルなどのファイルのこと**をモジュールと呼ぶ。

ちなみに、webpackではCSSや画像もまとめてくれるので、それらもモジュールと呼ばれている！！




####バンドラーとは
複数のモジュールを依存関係を解決して一つにまとめること。

そもそもバンドルとは、**まとめられたファイル**を意味する。




##つまりここまでの用語を噛み砕いてwebpackを説明すると・・・
サーバサイドで動くJavaScriptで、CSS・JavaScript・画像などを１つのファイルとしてまとめるための便利なやつ！！！！（強引）

**ここで疑問に感じるよね**




##なんでまとめる必要があるのか？？？？
それはブラウザ／サーバー間での通信プロトコルであるHTTP/1.1の仕組みにある。
HTTP/1.1では一度に処理できるリクエストの数が限られている。そんな限られている中で、CSSや画像やらJSファイルを一つ一つリクエストしてると、処理速度が遅くなってしまう。
そこで、JSのリクエストをなるべく一つにまとめてリクエストの回数を減らすことが表示速度（パフォーマンス）を上げてやることができる。


ここまででなんとなくwebpackが何なのか薄らわかってきたとこで、webpackの利点をまとめる。







##webpackの良いところ


###其の１：外部モジュールを簡単に利用できる。
フロントエンドの開発ではjQueryやVue.jsなどを利用することが多く、webpackではこのような外部モジュールを簡単に利用することができる。




###其の２：依存関係を解決したファイルを出力できる。
複数のライブラリ等を読み込んで、それに依存しているapplication.jsに読み込むファイルがあった場合は以下のようになる

```ruby:qiita.rb
<!DOCTYPEhtml>
<html>
	<head>
		<metacharset="utf8"/>
		<title>dependency</title>
	</head>
	<body>
		<scriptsrc="js/extra.js"></script>
		<scriptsrc="js/jquery.js"></script>
        <scriptsrc="js/mymodule.js"></script>
        <scriptsrc="js/main.js"></script>
		<scriptsrc="js/application.js"></script>
	</body>
</html>
```


上記のようにしてたら、読み込みが増えれば増えるほど管理が大変になってしまtたり、読み込み順を変えると上手く動かなくなったりするかもしれないという懸念がある。


##そんな懸念を解決するのがwebpackさん！！！


webpackを使わなかったらjs以下等のファイルを一つ一つ記述していたが、それらをwebpackで**ギュッと**一つにまとめてやると、記述をかなり減らして書くことができる。


```ruby:qiita.rb
<!DOCTYPEhtml>
<html>
	<head>
		<metacharset="utf8"/>
		<title>dependencyresolved</title>
	</head>
	<body>
		<scriptsrc="js/bundle.js"></script>
	</body>
</html>

```

他のCSSやJSの読み込みの記述は必要なく、bundle.jsにすべてまとめられている。




###まとめ
webpackはフロントエンド開発用のモジュールバンドラーのこと。
モジュールバンドラとは、複数のモジュールをまとめるツールのことであり、モジュールはJavaScriptファイルなどのこと。
つまり、webpackは複数のJavaScriptファイルなどをまとめてくれるツールのことなんやな！！！
はじめてのPython3 ~番外編：数値ランダム狂想曲~

# はじめに
注意点などは[こちら](https://qiita.com/kashun0410/items/4113051964d5a1cd0bb5)を参照してください。

# この記事を描こうと思ったきっかけ
Pythonの計算に関して、適当な数値を入れてみてみたい。<br>そこでランダムな数値を精製してくれるrandomモジュールを使用してみることにしました。<br>そんなrandomモジュールについての備忘録のようなものです。

# ようこそ、乱数の世界へ
### randomモジュールをインポート
randomモジュールはPythonの標準ライブラリに含まれているため、ダウンロードは入りません。<br>ただし、インポートは必要です。

```
import random # 上部の段にこれを記述
```

### randomモジュールの関数
#### random.random()
0.0以上1.0未満の浮動小数点数float型の乱数を生成します。

```
import random

print(random.random())

# 実行結果↓
# 0.830963714448
# 0.253643551299
# 0.906046050863 など
```
#### random.uniform(a,b)
任意の範囲（a から b の間）の浮動小数点数float型の乱数を生成する。

```
import random

print(random.uniform(10,20))

# 実行結果↓
# 10.4740789672
# 14.8562079851
# 10.2516560825 など
```
・2つの数値は大きさ順不同。

```
import random

print(random.uniform(1,-2))

# 実行結果↓
# -14.6138465193
# -1.29546679922
# 5.63021229752 など
```
・もしも同じ数だったら、その値のみ返す。

```
import random

print(random.uniform(10,10))

# 実行結果↓
# 10.0
```
引数は浮動小数点数float型でも可能。
※ bの値が範囲に含まれるかはドキュメント引用部分より、a + (b-a) * random.random()の丸めに依存。
> 端点の値 b が範囲に含まれるかどうかは、等式 a + (b-a) * random() における浮動小数点の丸めに依存します。 ー [Pythonドキュメント：random --- 擬似乱数を生成する より引用](https://docs.python.org/ja/3/library/random.html#random.uniform)


```
import random

print(random.uniform(1.234,4.321))

# 実行結果↓
# 1.93441022683
# 2.75716839399
# 3.91940634098 など
```

#### random.randrange(a,b,x)
range(a, b, x)の要素からランダムに選ばれた要素（整数int型）を返す。<br>a…スタート、x…ステップは省略可能。<br>そうした場合は、a = 0、x = 1 となる。

```
import random

print(list(range(10)))

print(random.randrange(10))

# 実行結果↓
# [0,1,2,3,4,5,6,7,8,9]
# 7 など
```
##### x = ステップの設定
奇数や偶数のランダム整数を生成したり、3の倍数のランダム整数を生成したりすることができる。

```
import random

print(list(range(2,10,2)))

print(random.randrange(2,10,2))

# 実行結果↓
# [2, 4, 6, 8]
# 4 など
```

#### random.randint(a,b)
a以上、b以下ののランダムな整数intを返す。

```
import random

print(random.randint(10,100))

# 実行結果↓
# 37 など
```

##### こぼれ話
1000から10000の間で、3000や6000といった百の位までが0の整数を出したい場合、<br>random.randint(1,10)の結果 * 1000 とすれば良い。

```
import random

print(random.randint(1,10) * 1000)

# 実行結果↓
# 3000
# 4000 など
```

# 参考
https://docs.python.org/ja/3/library/random.html#functions-for-integers
【最低限知っておきたいIT基礎知識】文字コード

SEなら最低限知っておきたい基礎知識の１つ、文字コードについてざっくりまとめています。

##目次
- １．文字コードとは？
- ２．文字コードがなぜ重要なのか？
- ３．複雑化した文字コード
- ４．代表的な文字コード
    - １）ASCII
    - ２）Unicode
    - ３）Shift-JIS

##１．文字コードとは？
文字や記号をPC上で扱えるようにするために、１文字ずつ番号を割り振ったもの。
PCはデータを0または1でしか扱えないため、人間が使用する文字をそのまま扱うことができません。
そこで、文字を使って何かの処理をしたり通信したりするには、この文字にはこの番号、この記号にはこの番号というように１つずつ番号を割り振る必要があります。
ちなみに、文字だけでなく絵文字にも文字コードが割り振られています。

◆絵文字の文字コード（引用元：[★](http://powerbiz.jp/psm/wp-content/uploads/2010/01/emoji_code.html)）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498362/0f27ebda-72e1-2391-1a31-49897e2249f4.png)




##２．文字コードがなぜ重要なのか？
３．文字コードの種類 でご紹介しているように、文字コードにはいくつも種類があります。
**文字コードの種類が想定しているものと異なるだけで、動くはずの処理が動かなくなったり、文字化けして見たいものが見れなかったりと、思わぬ問題に発展する場合もあります。**
よって、文字コードを普段から意識しておくことは、IT業界に従事する者として最低限必要なことと言えます（かく言う筆者はこの記事を書くまであまり意識できていませんでした←）。

##３．複雑化した文字コード
文字コードには複数の種類が存在します。
最初に誕生したのはASCII（American Standard Code for Information Interchange）と言われており、アメリカで標準化されました。
しかし、ASCIIは英語に使われる文字にしか対応しておらず、日本語や中国語の漢字のように何千文字もあるような言語に対しては、文字数の違いから対応することができませんでした。
そこで、各国の言語で使われる文字や記号に対応できるように、ASCIIをベースとして後から次々と新しい文字コードが標準化されていき、今では様々な種類の文字コードが使われるようになりました。

##４．代表的な文字コード
よく使われる代表的な文字コードは以下の通り。

###１）ASCII（アスキー）
1963年に開発され、現在は国際標準化機構（ISO）により国際標準となっている、最も基本的な文字コードです。
2進数で0000000〜1111111（128個）までの数値を使い、アルファベット、数字、記号、空白文字、制御文字など128文字を表現します。

◆ASCIIコード一覧（引用元：[★](https://qiita.com/yuji38kwmt/items/b3a7820b4d3b544da4ff)）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498362/9af2d791-2dd7-d5f1-7e93-7c866a74ba3f.png)

###２）Unicode（ユニコード）
日本語、ロシア語など、世界中の文字を１つの文字コードにまとめ、それぞれに番号を付けて利用できるようにしたもの。
Unicode誕生前までは多数の文字コードが世界各地で作成され使用されてきましたが、PCが世界各国に普及していく中で、国や地域ごとに文字コードを使い分けなければならない点が不便でした。そこで、１つの文字コードに統一することで世界中の文字を扱えるよう、1991年にUnicodeが開発されました。
現在では、絵文字や記号も含め約14万文字もの文字数をUnicodeで表現できるようになっています。

####（１）UTF-8（ユーティーエフエイト）
Unicodeを文字コードの１つとしてご紹介しましたが、実際にはあらゆる国や地域の文字を１つの文字コードに統一するという当初の目的から外れ、Unicodeの中でさらにいくつもの文字コードが作られることとなりました。その１つがUTF-8です。

また、以下の図のように、Unicodeは正確には文字集合と呼ばれ、その名の通り文字コードにしたい文字の集合体のことを言います。
文字集合に対して、どのような数値を各文字に割り当てるかを定義したものを符号化方式と言い、
　Unicode：文字集合
　UTF-8：符号化方式
となります。

◆文字集合と符号化方式（引用元：[★](http://equj65.net/tech/charcode/)）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498362/e21da516-17be-3709-6cdb-e09088026b18.png)

ちなみに、PCでメモ帳を作成して保存する際に文字コードを選択できますが、選択項目の中にはUnicodeとUTF-8が並列しています。
Unicodeはあくまで文字集合ですが、Unicodeを文字コードとして選択して保存すると、符号化方式UTF-16が暗黙的に選択されます。
つまり、
　メモ帳保存時に文字コードの項目からUTF-8を選択⇒そのメモ帳の文字コードはUTF-8
　メモ帳保存時に文字コードの項目からUnicodeを選択⇒そのメモ帳の文字コードはUTF-16
となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498362/0c1ba1ea-5438-a352-f1d7-1b7a942e6ee0.png)

###３）Shift-JIS（シフトジス）
Microsoft社が日本にPCを普及させるときに開発したコードで、ASCIIで表現される半角文字や記号に日本語の平仮名・カタカナ・漢字などを加えた文字コードです。
Shift-JISの"Shift"は、Shift-JISと同じ文字集合からなる符号化方式 JIS（ジス）コードを変更（シフト）して作成したことに由来しています。JISコードの非効率的な部分を改善し、効率的に漢字データなどを扱えることから広く普及しています。
SJIS（エスジス）と略されることもあります。
EC2にPostgreSQLをインストールする方法（動作確認用）

# インストール

```
sudo yum update # 省略していい
sudo yum install postgresql postgresql-libs postgresql-server # 何をインストールしているのか未調査
sudo service postgresql initdb # これをしないと起動できないらしい
sudo service postgresql start
sudo service postgresql status
sudo chkconfig postgresql on # EC2起動時にPostgreSQLを起動してくれるらしい
```

# psqlを使う
postgresqlインストール時に作られるpostgresユーザに切り替える。
このユーザじゃないとpsqlを使えない。

```
sudo su - postgres
psql
create database testdb;
\l
\c testdb
```

# メモ
postgresユーザに切り替えるのが不便で分かりにくい。
安全のための設定と思われる。

# 参考
AmazonLinuxにPostgreSQL9.6をインストールする
https://qiita.com/shinsaka/items/cf45cd87c2c75e35ce12

PostgreSQLの基本的なコマンド
https://qiita.com/H-A-L/items/fe8cb0e0ee0041ff3ceb
入力フォームを作る

お問い合わせフォームとかを作るときに必要な入力フォームの作成方法について説明します。

#`<input>` `<textarea>`
`<input>` は１行のテキスト入力を受け取るための要素です。
`<textarea>` は複数行のテキスト入力を受け取るための要素です
`<input>` は終了タグが不要な点に注意してください。

```index.html
<form>
  <p>名前</p>
  <input> <!-- 終了タグ不要 -->
  <p>問い合わせ内容</p>
  <textarea></textarea>
</form>
```

#送信ボタンも`<input>`で作成する
送信ボタンにも、`<input>`を用います。
`<input>`には`type`属性を指定することができ、`type`属性に`submit`を指定すると、入力欄ではなく送信ボタンになります。
ボタンに表示されるテキストは、日本語のブラウザではデフォルトで「送信」になります。

```index.html
<input type="submit">
```
docker-composeでのvolume作成方法

## 概要
dockerでのvolumeの作成方法に手こずったので、備忘録です。

## よくあるvolume作成方法

```docker-compose.yml
version: "3"
services:
  db:
    image: mysql
    volumes:
      - ./db/mysql/volumes:/var/lib/mysql
```
この記述のみでは`そのコンテナ自体にvolumeが作成され、データを保存`を行うことはできるがデータの永続化はできない。
理由は、コンテナが削除されると一緒にデータも削除されてしまうため。

## データを永続化するには
```docker-compose.yml
version: "3"
services:
  mysql:
    image: mysql
    volumes:
      - mysql-db:/var/lib/mysql
volumes:
  mysql-db:
    driver: local
```
これが正しい記述となる。

### やっていること
1. mysqlコンテナにデータを格納するvolumeを作成
2. そのvolumeを`「データを永続化するためだけの役割」`であるvolumeコンテナとマウント

## 実際にvolumeを確認
まず`docker-compose.yml`の設定を反映させる&サーバー起動

```
$ docker-compose up --build
```
その後、volumeの一覧を表示してみると

```
$ docker volume ls
DRIVER              VOLUME NAME
local               b1d0c166382335a52c546e1ea2eaddf752d6f410c4c6664bdc59e9606f4bd25
local               myapp_mysql-db
```

新たにvolumeが作成できていることを確認できるはずです。

## 参考にした記事
[Docker Composeでボリューム作成](https://qiita.com/reflet/items/5c0a488494c7d6904084)
要素にボーダー（枠線）をつける

要素にボーダー（枠線）をつけるには、`border`プロパティを用います。以下のように、枠線の太さ、種類、色を指定して使用します。

```style.css
div {
  border: 5px solod red; /* 太さ 線の種類 色 */
}
```

上下左右すべてに線を付けたい場合は`border`とし、特定の場所にのみ付けたい場合は`border-bottom`のように、`border-方向`とします。
他に`border-top`、`border-left`、`border-right`などがあります。

```style.css
div {
  border-bottom: 1px solod #333;
}
```
buffaloルータWZR-450HP,WZR-HP-G450HをDD-WRT化する方法

はじめに
---

中古buffaloルータ[WZR-450HP](https://www.buffalo.jp/product/series/WZR-450HP)と[WZR-HP-G450H](https://www.buffalo.jp/product/detail/wzr-hp-g450h.html)を入手し[DD-WRT](https://dd-wrt.com/)化しました。
下記参考サイトの有志の方々のノウハウをほぼそのまま実行しています。とても有り難いです。
目新しい内容は、この記事投稿時のDD-WRT最新バージョン[08-07-2020-r44085](https://download1.dd-wrt.com/dd-wrtv2/downloads/betas/2020/08-07-2020-r44085/buffalo-wzr-hp-g450h/wzr_hp_g450h-dd-wrt-webupgrade-MULTI.bin)にアップグレード
できることだけです。細かい動作確認までしていません。

**WZR-450HP**は**WZR-HP-G450H**を名称変更したもので、ハードウェアは同じものだそうですが、
純正ファームウェアが異なるのでDD-WRT化の手順が少し異なります。
先に**WZR-450HP**の設定方法を説明し、最後に**WZR-HP-G450H**で設定する場合の変更点を説明します。

かなりリスクの高い作業です、同じ手順で失敗しても当方は一切責任を負えません。自己責任でお願いします。

参考サイト
---

- [PUKIWIKI - dd-wrt](http://www.shortcut.jp/index.php?dd-wrt)
- [DD-WRT OpenWrt 適材適所で両方使いたい人向け @ ウィキ](https://w.atwiki.jp/ddwrt_openwrt/pages/56.html)


1.【WZR-450HP】ルータがJPリージョンだとDD-WRTを書き込めないので、USリージョンに変更する
---

1-1. 初期化したWZR-450HPでデバッグモードに接続します。ブリッジモード(ROUTER OFF)での設定例です。

```text
http://192.168.11.100/cgi-bin/cgi?req=frm&frm=py-db/55debug.html
ユーザ名：bufpy
パスワード：otdpopypassword
```

1-2. **telnetd**をクリックし使えるようにします。

1-3. USリージョンに変更します。

```shell-session
$ telnet 192.168.11.100
# ubootenv set region US
```

2.【WZR-450HP】純正ファームウェアからDD-WRTを焼きます。
---

2-1. ファームウェア[11-03-2014-r25251 - wzr_hp_g450h-factory-to-ddwrt.bin](https://download1.dd-wrt.com/dd-wrtv2/downloads/betas/2014/11-03-2014-r25251/buffalo_wzr_hp_g450h/wzr_hp_g450h-factory-to-ddwrt.bin)をダウンロードします。

2-2. ルータのWebUIから上記ファームウェアを焼きます。

```text
http://192.168.11.100/cgi-bin/cgi?req=frm&frm=py-db/firmup.html
ユーザ名：bufpy
パスワード：otdpopypassword
```

```text
Update firmware
  Firmware File Name
    wzr_hp_g450h-factory-to-ddwrt.bin
  OK
```

3.【WZR-450HP】最新版ファームウェアに更新します。
---

3-1. ファームウェア[08-07-2020-r44085 - wzr_hp_g450h-dd-wrt-webupgrade-MULTI.bin](https://download1.dd-wrt.com/dd-wrtv2/downloads/betas/2020/08-07-2020-r44085/buffalo-wzr-hp-g450h/wzr_hp_g450h-dd-wrt-webupgrade-MULTI.bin)をダウンロードします。

```text
http://192.168.1.1/Upgrade.asp
```

```text
Firmware Upgrade
  Please select a file to upgrade
    wzr_hp_g450h-dd-wrt-webupgrade-MULTI.bin
  Upgrade
```


【WZR-HP-G450H】をDD-WRT化する場合
---
 
純正ファームウェアが**Ver.1.89**だとデバッグモードに入れません。
[**Ver.1.76**](https://www.buffalo.jp/support/download/detail/?dl_contents_id=61626&version=1.76)に変更した上で、デバッグモードのパスワードを下記に置き換えれば、【WZR-450HP】の手順通りに設定できます。

```text
パスワード：otdpopyp
```

さいごに
---

おうちDD-WRTしてみませんか。
Flutter で Windows アプリをテンプレートから生成し、起動してみよう

Flutter で Windows アプリをテンプレートから生成し、起動してみよう。
※2020/08/08 での話です。現在の最新のFlutterとは異なります。
最新に合わせたのは後で書こう……。

---

Flutter 公式が用意してくれてる、アプリのサンプルを起動するところまで。

Electron みたいな見た目で起動して表示されるみたい。
Win32-basedだから、違うんだろう……。
ちょっと試した感じだと、普通のアプリみたいに見える。
.exe単体で起動できるような形には、今はならないっぽい。

テクニカルレビューなそうなので、今後にも期待。
あとでUWPに対応するとかも書いてるみたいだしね。

#Flutter で Windows アプリのテンプレートを作成する

#### サンプル用テンプレートを生成するフォルダへ移動する
flutter create で作成するだけ。
. は、カレントディレクトリの指定になる。

```
C:\src> mkdir FlutterSample01
C:\src> cd FlutterSample01
C:\src\FlutterSample> flutter create .
```

↓こんな感じのメッセージになる。

```

Running "flutter pub get" in FlutterSample...                    1.6s
Wrote 91 files.

All done!
[√] Flutter: is fully installed. (Channel master, 1.21.0-8.0.pre.109, on Microsoft Windows [Version 10.0.18363.997],
    locale ja-JP)
[√] Android toolchain - develop for Android devices: is fully installed. (Android SDK version 29.0.2)
[√] Visual Studio - develop for Windows: is fully installed. (Visual Studio Community 2019 16.3.10)
[√] Android Studio: is fully installed. (version 4.0)
[√] Connected device: is fully installed. (1 available)

In order to run your application, type:

  $ cd .
  $ flutter run

Your application code is in .\lib\main.dart.


WARNING: The Windows tooling and APIs are not yet stable. You will likely need to re-create the "windows" directory
after future Flutter updates.

C:\src\FlutterSample>
```

#### サンプルを起動してみる

flutter run を実行するだけ。

```
C:\src\FlutterSample>flutter run
```
↓こんな画面になる。＋をクリックするとカウントが増えていく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194966/129ae0c3-9a60-58f2-d0ca-21ca5fe47039.png)

このサンプル自体も、中身的にはAndroid/iOS用と同じサンプルプログラムの内容となっている。
なので、lib\main.dart の中身が実行されているのは一緒。
すげえなあ。Windowsでも同じソースで書けちゃうじゃん。

Hot Reload とかはどうなん、って？
まだ試してないからわからないけど、Windowsで同じのを起動できる時点で、
俺の中では十分なんだよなあ。確認しやすいし。

#他の環境で動かすにはどうすれば良い？
あくまで、現時点（2020/08/08 19:27）時点での話なんだけど。
他の環境で動かすには、以下が必要になるみたい。

- [Visual Studio 2015、2017、および 2019 用 Microsoft Visual C++ 再頒布可能パッケージ](https://support.microsoft.com/ja-jp/help/2977003/the-latest-supported-visual-c-downloads)
- 各環境用のFlutterのBuild後のPackage
   - Windowsの場合は、 flutter run じゃなく、flutter build を実行する必要がある

↓以下を実行する

```
C:\src\FlutterSample>flutter build windows
```

Buildが終わると、以下のフォルダにBuildしたものが出来ている。
build\windows\runner\Release
build\windows\runner\Debug
上の例で言うと、C:\src\FlutterSample\build\windows\runner\Release(Debug)　になる。
中身の全てが必要。exeだけじゃ動作しない。
dataフォルダの中身がないと画面が出ない。

[再配布パッケージ](https://support.microsoft.com/ja-jp/help/2977003/the-latest-supported-visual-c-downloads)がインストールされてる環境であれば、.exeを起動すれば動く。
ない場合はエラーになる。

#参考
- FlutterでWindowsデスクトップアプリのネイティブ連携をする
  - https://qiita.com/br_branch/items/746ba34cc2d5780ee8db
HTMLタグの改行されるタグとされないタグについて

HTMLの要素には、改行される要素と改行されない要素があります。
前後で改行が入り、親要素の幅一杯に広がる要素を`ブロック要素`といいます。`<div>`や`<h1>`、`<p>`はブロック要素です。
それに対して、`<span>`や`<a>`のように改行されない要素を`インライン要素`といいます。

ブロック要素： `<div>` `<h1>` `<p>` ..etc
インライン要素： `<span>` `<a>` ...etc
EclipseよりInteliJが良いところ

# EclipseよりInteliJが良い点
- 強力なおすすめ機能（Smart Completion）
- 様々なリファクタリングとデバック機能
- EclipseのGitより高い自由度
- プロジェクトが始まるときインデクシングを行い、ファイルおよび資源に対して検索が早い
- HTMLとCSS、JS、XMLについて強力な機能支援
- Java、Spring bootのバージョンアップに合わせた早いアップデート
文中の一部にCSSを適用させたい

文中の一部にCSSを適用させたい場合は、`<span>`タグで囲みます。
以下の例では、`<span>`タグにCSSを指定することで、文字の色を一部変えています。
`<span>`タグの前後には改行は入りません。

```index.html
<h1>
  <span>ここ</span>を強調したい
</h1>
```

```style.css
span {
  color: #ff0000;
}
```
Vue.js のライブラリを探すなら awesome-vue を使うと便利

## はじめに (おわりに)

「Vue.js で○○したい」って時、(あえて)自力で実装って人も居ると思うけど、多くの人はライブラリを探してきて使っていると思う。

ライブラリ探す時「Google でキーワード検索する」でも良いが、[Awesome Vue.js](https://awesome-vue.js.org/resources/official-resources.html) で探すのも良いよ、というだけの話。
リポジトリは [vuejs/awesome-vue](https://github.com/vuejs/awesome-vue)。

[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72108/e1135407-a985-0ef0-5d42-88796f076f25.png)](https://awesome-vue.js.org/)

[公式ページ](https://awesome-vue.js.org)上でも、[GitHub](https://github.com/vuejs/awesome-vue) 上でも情報を探せるようになっている。

[GitHub](https://github.com/vuejs/awesome-vue) 上で見る場合は、スクロールバーのサイズ(ページの長さ)や目次のデカさを見て探す気が失せるかもしれないが、目次の「Components & Libraries」を見て自分の見たい箇所だけチェックするという使い方で OK。
もしくは 「Ctrl(Cmd) + F」 で探すとかでも良いと思う。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72108/56ac3fa0-2898-8f18-2a29-4ea8ab9e8136.png)


あとは各ライブラリのリポジトリで詳細を確認し、自分のプロジェクトにマッチするかどうか、スター数、コミット頻度(放置されてないか)などで、どれを使うかを判断すれば良い。


## 補足

わかりにくいけど[公式ドキュメント](https://vuejs.org/index.html)からも awesome-vue へのリンクはある。(自分は Google 検索から、たまたま awesome-vue にたどり着いた)

----

[プラグインの使用](https://jp.vuejs.org/v2/guide/plugins.html#%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AE%E4%BD%BF%E7%94%A8) の下記

> コミュニティの貢献による膨大なプラグインやライブラリは [awesome-vue](https://github.com/vuejs/awesome-vue#components--libraries) で確認できます。

[Using a Plugin](https://vuejs.org/v2/guide/plugins.html#Using-a-Plugin) の下記

> Checkout [awesome-vue](https://github.com/vuejs/awesome-vue#components--libraries) for a huge collection of community-contributed plugins and libraries.

----

もしくは

[エコシステムを調べる](https://jp.vuejs.org/v2/guide/join.html#%E3%82%A8%E3%82%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%82%92%E8%AA%BF%E3%81%B9%E3%82%8B) の下記

> [The Awesome Vue Page](https://github.com/vuejs/awesome-vue): 他の素晴らしい人々によって公開された素晴らしいリソースを参照します。

[Explore the Ecosystem](https://vuejs.org/v2/guide/join.html#Explore-the-Ecosystem) の下記

> [The Awesome Vue Page](https://github.com/vuejs/awesome-vue): See what other awesome resources have been published by other awesome people.

----

あと、多くの人が速攻で削除しているであろう `src/components/HelloWorld.vue` にも実はリンクがある、ちゃんと確認しよう(自戒)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72108/57edc6f4-c5ee-66a6-7b33-7563ef17faf4.png)

## 補足2

自分も「そんな便利ページあったのか」って感じだし、「実は知らない人も多いんじゃないかな」と思って書いた。

あと、ざっと調べた感じ「awesome-vue」そのものに焦点を当てた記事が Qiita 上に無さそうだった(無さそうに見えた)ってのもある。
(以下の記事に登場しているのは確認したが主題ではない)

* [[DEPRECATED] Vue.js の情報まとめ - Qiita](https://qiita.com/zakuro9715/items/88fb25c3c883c8aea943)
* [既存のVue.jsアプリにQuasar Frameworkを入れる - Qiita](https://qiita.com/SatoTakumi/items/19222f6e74f53043d6a1)

## 参考文献

- [Awesome Vue.js](https://awesome-vue.js.org/)
- [vuejs/awesome-vue: 🎉 A curated list of awesome things related to Vue.js](https://github.com/vuejs/awesome-vue)
要素に余白を入れる

#余白を入れる
要素に余白を作りたい場合は、`border`の内側と外側のどちらに余白を作るかで指定するプロパティが変わってきます。

#内側に余白を作る
`padding`を用います。
`padding: 値;`とすると、上下左右すべての方向にその大きさの余白が追加されます。

```index.html
<div>
  hoge
</div>
```

```style.css
div {
  padding: 20px;
}
```

###余白を入れる方向を指定する
上下左右ではなく、ある方向のみに余白を指定したい場合もあります。
その場合は、`padding-top: 値;`などとすると、その方向のみに余白が追加されます。
他に`padding-bottom`、`padding-left`、`padding-right`などがあります。

```style.css
div {
  padding-top: 20px;
}
```

###まとめて指定する
指定したい値が方向ごとに異なる場合、個別で指定する方法もありますが、まとめて書くことも可能です。
値を4つ、スペース区切りで指定した場合、「上」「右」「下」「左」の順で適用されます。(上から時計回りです)
値を2つ指定した場合、「上下」「左右」の順に適用されます。

```style.css
div {
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}
```

```style.css
div {
  padding: 20px 10px 20px 10px;
}
```

```style.css
div {
  padding-top: 20px 10px;
}
```

#外側に余白を作る
`margin`を用います。
値の指定の方法は、`padding`と同じです。

```index.html
<div>
  hoge
</div>
```

```style.css
div {
  margin: 20px;
}
```


#ボックスモデル
`border` `padding` `margin` は、[ボックスモデル](https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/The_box_model#What_is_the_CSS_box_model)という概念に基づいています。

HTMLの全ての要素には、`border`（初期状態では表示されない）があり、その外側の余白は`margin`, 内側の余白は`padding`です。
要素を横並びにする

HTMLで記述した要素は基本的に縦に並んでいくので、横並びにするにはCSSでの指定が必要です。

#`float`プロパティ
`float`プロパティを用いることで、指定した要素を横並びにすることができます。
`float: left;`を指定すると要素が左から順に横に並びます。
`float: right;`を指定すると要素が右から順に横に並びます。

```index.html
<ul>
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>
```

```style.css
li {
  float: left;
}
```
【JS】デフォルトで用意されているダイアログ


#警告のメッセージを表示する　alert()


```.js
alert("Hello");
```


###Google chromeで、JSONデータをアラートで表示したい時

JSONデータ(data)だけを引数にしたalertメソッドだと、「*Object*」としか表示されない


```.js
alert(JSON.stringify(data));
```
こうすることで、JSONデータをアラート表示できるようになる



#クローズドクエスチョンを表示する　confirm()

はい、いいえかで答えられるメッセージを表示させます。

```.js
confirm(メッセージ);
```

実際によく使うのは、メッセージ対する返答によって処理を変えることです。

```.js
let result = confirm("このメッセージを送信しますか？");

if(result){
  //「はい」を選んだ時の処理
}else{
  //「いいえ」を選んだ時の処理
}
```


#オープンクエスチョンを表示する　prompt()

具体的な返答が求められるメッセージを表示させます。

```.js
let result = prompt(入力ダイアログに表示する文字列, 入力欄の初期値)
```

confirmメソッドと同様、実際によく使うのは、メッセージ対する返答によって処理を変えることです。

```.js
let name = prompt("あなたの名前は？", '太郎')

if(name){
  //入力された時の処理
}else{
  //キャンセルが押された時の処理
}
```


###計算の答えによって、アラートを変える

```.js
let answer = prompt('1 + 1は？')

if (answer === 2){
  alert（'正解です！'）
} else {
  
}
if(answer === ''){
  alert('空欄で回答しないでください')
}else if(answer === null){
  alert('キャンセルしないでください')
}else if(answer != 2){
  alert('不正解です')
}else{
  alert('正解です！')
}
```
Processing3でArduinoシリアルからの値を読み取りたい



![SS 192.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/a41cd967-f549-8677-1efa-2e99bf69518d.png) センサの値をグラフィカルに可視化したい

## やること
Arduino系（特にTeensy3.2)で読み取ったシリアルの値をProcessing3に渡し、画面で描画される図形を変化させます。それだけです。
今回は距離センサ2Y0A21を使います（アナログ出力ならセンサはなんでもよいです。）
なるべく最小限の要素にして、成功しやすくしています。

## 準備物・実施環境
- Arduino系のもの（今回の狙いはTeensy3.2)
- Processing3
- アナログセンサ（距離センサ、照度センサなど）
- 手元の環境はMac


## 接続

-センサの電源線を必要電圧に応じてArduino系の5v(or3V)、GNDに接続。
-センサのアナログ出力線をArduino系のA0ピンに接続。

## プログラム

#### Arduino系側のスケッチ

```c++:Arduino系

int sensorPin = 0; //analog入力に使うセンサ用のピン番号。0ならA0ピン
int val; //センサの値
void setup(){
  Serial.begin(9600); //シリアルを9600bpsで開始
}

void loop(){
  //センサのアナログ値(0~1024を読み取って0-255の1バイトに変換)
  val = map(analogRead(sensorPin),0,1023,0,255);
  Serial.write(val);//1バイト（0-255）にしたセンサ値をシリアル送信
  delay(10); //0.01秒止める
}
```

Arduinoに書き込む。ArduinoのSDKはここで閉じてもよい。

#### 一旦Processing3でシリアルポートを調べる

Processing3を開いて下記のスクリプトを実行する。

```c++:Processing3
import processing.serial.*;
Serial myPort;
printArray(Serial.list());
```
すると、Processing3のスクリプト画面の下段にシリアル通信のコンソール画面が現れ、下記のような結果が表示されます。（コンソール画面が出ない場合には、画面右下の三角印を押すと出ます。）

結果例>
[0] /dev/cu.ほにゃらら/ほにゃらら
[1] /dev/tty.ほにゃらら/ほにゃらら
[2] /dev/ほにゃらら/ほにゃらら

ここで、Arduino系で使っているシリアルポートと同じものの番号を調べておきます。
Arduinoで使用中のポートはArduinoSDKのメニューから「ツール」→「シリアルポート」

#### Proessing3側のスケッチ
```c++:Processing3
import processing.serial.*; // シリアルライブラリをインポート

Serial myPort;  //シリアルポートのインスタンス
int available_serialport = 2; // シリアル検索プログラムで調べたシリアルポートの番号に変更
String arduinoPort = Serial.list()[available_serialport]; //
int x; //シリアルから読み取った値を入れる

void setup(){
  size(300, 300); // キャンバスサイズ
 myPort = new Serial(this, arduinoPort, 9600); // シリアルポートの設定
 }

void draw(){
  background(251,252,239); //背景色をやわらかい色に
  noFill(); //図形をぬりつぶさない
  stroke(153,0,0) ;//線を赤っぽく
  strokeWeight(3);//線をちょっと太く
  ellipse(width/2,height/2,x,x); //キャンバスの中心に円を描画。サイズはシリアルの値(0-255)
}

void serialEvent(Serial p){
  x = p.read();  //xにシリアルの値を入れる
  println(x); //processingのシリアルモニタに数値を表示
}
```

## 実行
Processingを実行します。
センサが繋がっていれば、センサから出るアナログ電圧に応じて画面の丸がおおきくなったり小さくなったりします。
![sketch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/b9a82953-4d4f-f3b1-07d6-670aca8148cb.png)
（↑実行例）

#### トラブルシュート
うまくいかない場合、問題がまずプログラム側なのかセンサ側なのかを特定します。
A0をArduinoのGNDに接続してアナログ入力の電圧を0にしてみたり、同じく3.3v（場合により5v）に接続して電圧を最大にした場合に、Processing3側の図形に反映されるか調べます。（GDNに繋いだ場合には円は点に、3.3or5Vに接続した場合には円の大きさが最大になります。）
この表示がうまくいっている場合、問題はセンサ側ということになります。

Teensyduinoだとシリアルポートの都合からうまくいかないかもしれないと危惧しましたが、このシンプルなプログラムの場合には無事に動きました。I2Cのデータなど少し長いデータも試してみようと思います。

## 次回記事

https://qiita.com/Ninagawa_Izumi/items/25cc0469ef1dee8481a5

6軸センサー(MPU6050/GY-521)の値をArduino系で読み取ります。
CSSの基本プロパティ

#文字の色を指定する
文字の色を変えるには`color`プロパティを用います。

```style.css
h1 {
  color: #ff0000;
}
```

#文字の大きさを指定する
文字の大きさを指定するには`font-size`プロパティを用います。
`font-size`は、`px`(ピクセル)という単位を用いて指定します。

```style.css
h1 {
  font-size: 10px;
}
```

#コメント
`/*` `*/`で囲んだ行がコメントになります。

```style.css
h1 {
  /* コメント */
  font-size: 10px;
}
```

#フォントの指定
`font-family`に様々なフォントを指定することができます。

```style.css
body {
  font-family: serif;
}
```

#背景色を指定する
背景色を変えるには`background-color`プロパティを用います。 色の指定の方法は`color`プロパティと同様です。
`#dddddd`のように同じ値が続く場合は、`#ddd`と省略できます。

```style.css
h1 {
  background-color: #ddd;
}
```

#横幅、高さを指定する
要素の横幅、高さを変更したいときには、それぞれ`width`プロパティ、`height`プロパティを用います。

```style.css
div {
  width: 500px;
  height: 80px
}
```

#その他
[要素を横並びにする](https://qiita.com/shtwangy/items/3bac2a0e18845e803c1c)

[要素に余白を入れる]
(https://qiita.com/shtwangy/items/ce32223e7a0d2cf66986)

[文中の一部にCSSを適用させたい](https://qiita.com/shtwangy/items/5275c17b6ca8d0784751)

[要素にボーダーをつける](https://qiita.com/shtwangy/items/7b1ef58815fc4c0104a5)

[背景画像を指定する](https://qiita.com/shtwangy/items/2c873a4846f954ce7f2d)

[要素を中央に配置する](https://qiita.com/shtwangy/items/b65c6e3ab57e1261c3dc)

[要素を透過させる](https://qiita.com/shtwangy/items/1c742c89130eb826da5b)

[文字の間隔を調整する](https://qiita.com/shtwangy/items/6037bc970d3c2f570194)

[displayプロパティの利用方法](https://qiita.com/shtwangy/items/8bd192240b6bce8a9511)

[カーソルが乗った時のスタイルを指定する](https://qiita.com/shtwangy/items/e08cb2ae7568f4d53fde)

[角を丸める](https://qiita.com/shtwangy/items/ba9eaf82aa83e6b5a1dc)

[「margin: 0 auto」と 「text-align: center」の使い分け](https://qiita.com/shtwangy/items/a6b4e5fc515292d79045)

[背景だけ透過させる](https://qiita.com/shtwangy/items/408ce1650faac84c6742)

[アニメーションをつける](https://qiita.com/shtwangy/items/447df69c613d4f78d555)

[行間を指定する](https://qiita.com/shtwangy/items/a4e9c24733068120e72c)

[`<a>`タグのクリックできる範囲](https://qiita.com/shtwangy/items/db5a5d1c7ff2e623cff7)

[文字の太さを指定する]
(https://qiita.com/shtwangy/items/d43f4ba70a07a78f40ee)

[相対的な大きさを指定する](https://qiita.com/shtwangy/items/2b9b2020e33564265d92)

[画像と文字を重ねる]
(https://qiita.com/shtwangy/items/2b3a4b3415fc7c70b370)

[立体的なボタンを作ってみる](https://qiita.com/shtwangy/items/661a790ffa32ce54191d)

[ヘッダーを固定する](https://qiita.com/shtwangy/items/38b6adc9404b82c80a6b)
【Python】pandas でdtypeを変更や要素の削除等

これは何度も自分でググっているので、自分用のメモです。

# メモ

## DataFrame のデータの変更

### dtype 変更

まとめて変更したいとき。

```python
df = df.astype({'a': 'float32', 'c': 'int8'})
```

ひとつだけ変更したいとき

```python 
df = df.aaaa.astype('int32')
```

## NaN (Not a Number)

###　NaNの数を数える

NaN (not a number)を確認できる。

```python
df.info()
df.isnull().sum()
```

### NaNを削除する

ある項目（列）の値がNaNであるを削除する. [dropna](https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.DataFrame.dropna.html)を使います。

```
df.dronna(subset= [])
```

## 削除

drop を使います。

### 行番号を指定して削除

下記を参考にしました。

https://note.nkmk.me/python-pandas-drop/

## ファイル入出力

### CSVファイルを読む

普通はread_csv だけで仕事をしていますが、ときに、データを読んで後でラベルを振りたいときもあります。
CSVファイルから読む。行の名前を自分でつけるとき。１行目を無視して、そのあとつける。

```python
df = pd.read_csv('input.csv', skiprows=1, white...)
df.columns = ['time', 'data1', 'data2']
```

### CSVファイルに保存

CSVファイルに保存するには[to_csv](https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.DataFrame.dropna.html)を使う。オプションで引数でindex（行の名前）、header（列の名前）の有無を指定する。個人的には、いつもindex=Falseにしています。

```python
df.to_csv('out.csv', header=True, index=False)
```

# まとめ

# これまでのメモ

https://qiita.com/XPT60/items/18ae1acd81d87a76add8

https://qiita.com/XPT60/items/9cecae970447cd5cfe20

https://qiita.com/XPT60/items/c247b2c666e9d1126ffa

## 備考
pandas 関係でいつも何度も調べなおしていることがあり、思い出したらここに追加していこう。(2020/08/08)

- 削除、ファイルの入出力を追加(2021/01/24)
- 行番号を指定して削除、のリンクを追加(2021/05/23)
ferenOSの導入１（インストール）

日常的に使用できるLinuxディストリビューションであるferenOSの導入方法を紹介します。
個人的なノートの代わりとしても用いますので、自分流の設定、カスタマイズ方法になるかもしれません。

##ferenOSのメリット（主観）
 - デザイン、操作性が洗練されている

　ferenOSのオリジナルアプリケーションでかんたんにWindows風やMacOS風のディスプレイのテーマを導入することができる。

- Ubuntuから派生したディストリビューションのため、UbuntuやDebianのノウハウで対処できる

　「だったらUbuntuを使えばいいじゃないか」となりますが、UbuntuのUIが苦手だったりすると重宝するかもしれないです。UIを自分好みにカスタマイズしやすいのがいいかもしれません。

##ferenOSのデメリット（主観）
- 安定性にかける

　ときおりアプリケーションが落ちることがあります。

 - 日本語での情報が少ない

　有志の方の解説サイトがいくつかありますが、公式サイトは英語オンリーです。（２０２０年８月時点）

#インストール
公式サイト[Get FerenOS](https://ferenos.weebly.com/get-feren-os.html)からISOファイルをダウンロードして、USBメモリやDVDなどに書き込んでインストール用メディアを作成します。（ここでは、デスクトップ環境にKDE Plasmaを用いた64bit版の方のferenOSを解説します。ちなみにデスクトップ環境のCinnamonを用いたFerenOS ClassicはUbuntu 18.04LTSのメインストリームサポートが終了する2023年になると同時にサポート終了となるそうです。また、32bit版のOSも同様に2023年にサポート終了だそうです。）

起動後、「Install FerenOS」アイコンを選択してインストールを開始。Calamaresインストーラが立ち上がったあと、言語、地域、パーティションを設定します。ユーザ名、パスワードの設定などはOSのインストール後に行います。
HTMLの基本的なタグ

#見出しをつける
見出しは`<h1>`~`<h6>`タグを使ってつけます。
hはheading（見出し）の略です。
`<h1>`が一番大きな見出し、`<h6>`が一番小さい見出しになります。

```index.html
<h1>見出し</h1>
```

#段落を作成する
段落は`<p>`タグで表します。
pはparagraph（段落）の略です。
`<h2>`や`<p>`で囲んだテキストは改行されます。

```index.html
<p>ホゲホゲ</p>
```

#コメント
`<!--`　`-->`で囲んだテキストはコメント扱いになり、ブラウザには表示されません。

```index.html
<!-- コメント -->
```

#リンクを作成する
リンクを作成する時は`<a>`タグを使用します。
リンク先の指定には、`href`属性を使用します。

```index.html
<a href="{リンク先URL}">リンク</a>
```

#画像を表示する
画像の表示には`<img>`タグを使用します。
`src`属性に画像のリンクを指定することで画像が表示されます。
`<img>`タグはテキストを囲むことがないので、終了タグが不要です。

```index.html
<img src="{画像のリンク}"> <!-- 終了タグ不要 -->
```

#リストを作成する
リストを作成するには`<li>`タグを使用します。
箇条書きしたいテキストをそれぞれ`<li>`タグで囲むことで、リストを作成することができます。

また、`<li>`タグは囲む要素によって種類が変わります。
`<ul>`タグで囲むと、黒点が先頭につき、
`<ol>`タグで囲むと、数字がつきます。
このように要素を要素で囲むことを入れ子と言います。
囲む方の要素を親要素、囲まれる要素を子要素と呼びます。

```index.html
<ul>
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>
```

リストの先頭マーカーは`list-style`プロパティで消すことができます。

```style.css
li {
  list-style: none;
}
```

#要素をグループ化する
`<div>`タグによって要素をグループ化します。
「div」は「division」の略です。

```index.html
<div>
  <img src="{画像のリンク}">
  <p>画像</p>
</div>
```
AutomationAnywhereA2019 CommunityEditionを利用開始する手順

#はじめに
AutomationAnywhere A2019 CommunityEditionを利用開始する手順について説明する。

#前提情報
###AutomationAnywhere A2019とは
RPA製品の一種。
国内シェアではWinActor/UIPath/BizRobo/BluePrismなどに続く（認識）。
A2019とは、2020年時点の最新バージョンで、管理・開発環境をクラウド上（Webブラウザ上）で行える
※オンプレミス版もある。

###CommunityEditionについて
Editionとして、以下の種類がある。

- Enterprise
- Commuinty

前者は有料で年間ライセンスの契約が必要。評価版があるが30日限定である。
後者は無料版で、利用期限もない（ただしEnterpriseと比べて機能制限がある）。
とりあえず気軽に試してみたい場合はCommunityEditionを使ってみるのがよい。
（Enterpriseで頑張ってボット作っても、期限切れるとなくなっちゃうし。。）

#利用開始手順

以下にアクセスし、右側のCOMMUNITY EDITION A2019 に、必要事項を記入し、CommunityEditionを入手　を押下
https://www.automationanywhere.com/jp/lp/rpa-editions-comparison

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217757/62732634-558c-c662-4123-46311917c628.png)

以下画面が表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217757/6e250aac-f223-a868-dbb4-5f1a2b355251.png)

メールが届く（迷惑メール扱いの場合もあるので注意）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217757/eeb228a1-2718-a8ad-6770-5c7cf36b7e92.png)

メールに記載のページにアクセスし、メールに記載の情報でログイン。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217757/316fe04f-e14e-c48c-4618-91cd7bf3e99a.png)

初期パスワードを変更。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217757/b7cc7726-2964-656f-7640-2f38b1d0e6b9.png)

ログイン成功！
ボット作成編は、またいずれ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217757/ff4428b8-d693-c585-dc7d-9f67972bbbcd.png)
【Laravel】5.5→7.2へアップデートをした話

## はじめに
PHPのフレームワークを勉強しようと、Laravelを触っていたときの話。

どうやらバージョン毎に使えるコード・使えないコードがあるらしい...

**そんなわけで初めてのLaravelバージョンアップ！**
必要なファイルがインストールされていなかったり、エラーが発生したり...
それでも数十分で解決できて、とても簡単でした。

## とりあえずやってみる
バージョンアップには、どうやらcomposer.jsonを編集する必要があるらしい。
しかし...それらしきファイルがない！

### Composerのインストール
[Composerをインストールしてみた](https://qiita.com/kakijin/items/02364adacf36410f449e)を参考にインストールしました。

### composer.jsonを編集
調べてみると、バージョンアップは、composer.jsonでバージョンを引き上げて composer update するだけみたい。
[Laravelを5.8→6.0にアップデートしただけの話](https://qiita.com/June8715/items/6b3c07a022c0ef02f903)を参考にやってみます。

## エラー　その１
5.x→7.xへの大幅アップデートのため、ひたすらエラーが流れていきます。

```html:
Loading composer repositories with package information
Updating dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Conclusion: don't install laravel/framework v7.24.0
    - Conclusion: don't install laravel/framework v7.23.2
...中略
    - Installation request for laravel/framework ^7.0 -> satisfiable by laravel/framework[v7.0.0, v7.0.1...以下略].
    - Installation request for laravel/tinker ^1.0 -> satisfiable by laravel/tinker[v1.0.0, v1.0.1...以下略].
```

どうやら、最後の方に出るエラーが肝のようです。

```html:
    - Installation request for laravel/framework ^7.0 -> satisfiable by laravel/framework[v7.0.0, v7.0.1...以下略].
    - Installation request for laravel/tinker ^1.0 -> satisfiable by laravel/tinker[v1.0.0, v1.0.1...以下略].
```

composer.jsonでlaravel/tinkerのバージョンを^2.0に変更。
無事アップデートが始まりました。

## エラー　その２
しかし、今度は別のエラーが発生

```html:
Script @php artisan package:discover handling the post-autoload-dump event returned with error code 255
```

[Script @php artisan package:discover handling the post-autoload-dump event returned with error code 255](https://qiita.com/lara_bell/items/8ebac16560bddcffd6ad)を参考に対処していきます。
 
## エラー　その３
上記エラーは解決しましたが、また別のエラー発生

```html:
In cache.php line 91:

  Call to undefined function str_slug()

Script @php artisan package:discover handling the post-autoload-dump event returned with error code 1
```

[Laravel6へのアップグレードで Call to undefined function str_slug()](https://blog.e2info.co.jp/2019/09/21/laravel6-call-to-undefined-function-str-slug/)を参考に進めます。

```html:
composer require laravel/helpers
```
を実行したところ、別のエラーメッセージが...

```html:
In Auth.php line 56:

  In order to use the Auth::routes() method, please install the laravel/ui pa
  ckage.

Script @php artisan package:discover handling the post-autoload-dump event returned with error code 1
```
[【Laravel6系】php artisan make:authが使えない問題の対処法](https://qiita.com/phper_sugiyama/items/8e37c53ced7b419519b4)を参考に進めていきます。

```html:
composer require laravel/ui
```
を実行し、無事エラーが消えました！

```html:
php artisan --version
Laravel Framework 7.24.0
```

## まとめ
初めてのバージョンアップでしたが、とても簡単にできました！

composer.jsonで各パッケージのバージョンを変えて、あとはエラーメッセージを基に対処していくだけでした。
bottlejs hello 💩

#動機
自作のSPAをスクラップ＆ビルドするので今度はDIを使ってみようと思ったけどinverify はなんだか面倒くさそうなので bottlejs を使う。

#前準備
Webpackとnpm install --save bottlejs とかやっておいた。

#実装
```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>Kamishibai framework</title>
</head>
<body>
    <!-- IE11 promise -->
    <script src="https://www.promisejs.org/polyfills/promise-7.0.4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.4/fetch.min.js"></script>
    <script src="/js/bundle.js"></script>
</body>
</html>
```
```javascript:app.js
import Bottle from 'bottlejs'
window.kms = window.kms||{};
window.kms.Unko=function(){
    this.color = "brown";
}
window.kms.rootBottle = new Bottle();
window.kms.rootBottle.service("💩",window.kms.Unko);
window.kms.unko = window.kms.rootBottle.container["💩"];
alert("💩の色は"+window.kms.unko.color);
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647892/a507eb09-fb8e-5c92-af10-e20a16814b72.png)
#結論
見事にボトルに💩を詰めておくことができた。
これで何ができるかってことだけど、処理の流れとオブジェクトの作られ方が分離できるってことかなと思う。
例えば、その💩に🐝がついていたとしても、ロジック側でその設計を考える必要がなくなるというか。あらかじめ🐝付きの💩をボトルに詰めときゃいいじゃんっていう。

その用途だったらかなり古いけど bottlejs で十分機能するかなと思って実験中。
PythonでYahooにメール送信できなかった時の対応。

##環境
- Windows 10
- Python 3.8

##プログラム

↓を参考にさせていただきました。
https://cercopes-z.com/Python/tips-mail-py.html#yahoo

しかし、なぜか↓のエラーが出た。
smtplib.SMTPServerDisconnected: Connection unexpectedly closed

Yahooメール側で外部からのメールを受信できる設定にする必要があった。
https://knowledge.support.yahoo-net.jp/PccMail/s/article/H000007321
bash scriptでCOLUMNSという名前の変数を使ってはいけない

`COLUMNS`変数はbashの予約変数なので、意図しないタイミングで変更されてスクリプト実行が失敗する可能性がある。

以下のスクリプトを実行すると、`mkdir`の後で`COLUMNS`変数が上書きされているのがわかる。

```bash
#!/bin/bash

COLUMNS="a,b,c"
echo ${COLUMNS}
mkdir -p /tmp/t
echo ${COLUMNS}
```

```shell
$ bash test.sh
a,b,c
204
```

その他の予約変数は [Bash Guide for Beginners | 3.2.4. Reserved variables](https://tldp.org/LDP/Bash-Beginners-Guide/html/sect_03_02.html) に記載がある。
`LINES`などは同じ間違いをしてしまいそう。
deviseを利用したフラッシュメッセージ

# hamlを使った記述
サインインやログアウトをした際に、画面上部に”ログインしました。”　”ログアウトしました。”のようなメッセージを表示できるようにする。
deviseを使用すると、ログイン時などに表示させるメッセージが「flashオブジェクト」に自動で格納されます。

flashオブジェクト内には、複数のメッセージがハッシュのように「キー」「バリュー」形式で保存されています。
### ①メッセージ用のviewを用意
フラッシュメッセージ用のビューファイル_notifications.html.hamlをviews/layoutsに配置し、application.html.hamlのbody内でrenderで読み込む。

```ruby:_notifications.html.haml
.Notification
  - flash.each do |key, value|
    = content_tag :div, value, class: key
```
```ruby:application.html.haml
%body
    = render 'layouts/notifications'
    = yield
```
###②フラッシュメッセージのスタイリングを行う
flashはデフォルトで"notice（動作成功時）"と"alert（失敗時）"の２つのキーを作成する。
それぞれにスタイルを当てていく

```ruby:stylesheets/modules/_flash.scss
.Notification {
  .notice {
    background-color: #38AEF0;
    color: #fff;
    text-align: center;
  }

  .alert {
    background-color: #F35500;
    color: #fff;
    text-align: center;
  }
}
```
最後にapplication.scssを編集して、作成した設定ファイルが読み込む

```ruby:app/assets/stylesheets/application.scss
@import "modules/flash";
```

###③メッセージの日本語化
まず、日本語化用のファイルを作成します
「config/locales」フォルダに、「devise.ja.yml」および「ja.yml」という名前のファイルを新規作成します。

下記のサイトに記述内容が掲載されているので、それぞれ中身を丸ごとコピーして貼り付け、保存しましょう。
[devise.ja.yml](https://github.com/tigrish/devise-i18n/blob/master/rails/locales/ja.yml)
[ja.yml](https://github.com/svenfuchs/rails-i18n/blob/master/rails/locale/ja.yml)

次に、application.rbを編集して、言語設定を変更しましょう。

```ruby:config/application.rb
  class Application < Rails::Application
    #〜省略〜
    config.i18n.default_locale = :ja
  end
end
```